From ec779c5288fde788cf20c91f997d421afe10d135 Mon Sep 17 00:00:00 2001
From: Hendrik de Graaf <hendrik@dhis2.org>
Date: Mon, 2 Dec 2019 13:51:42 +0100
Subject: [PATCH] fix(account): show dialog after password change success

---
 i18n/module/i18n_module_en.properties      |  3 ++
 src/account/PasswordChangeSuccessDialog.js | 39 ++++++++++++++++++++++
 src/account/account.actions.js             |  7 ++--
 src/app.router.js                          |  2 ++
 4 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/account/PasswordChangeSuccessDialog.js

diff --git a/i18n/module/i18n_module_en.properties b/i18n/module/i18n_module_en.properties
index 1169f7f8..b4c363b5 100644
--- a/i18n/module/i18n_module_en.properties
+++ b/i18n/module/i18n_module_en.properties
@@ -149,3 +149,6 @@ false=No
 yes=Yes
 no=No
 
+password_changed_successfully=Password changed successfully
+login_again=You need to login again to continue using the application.
+login=Login
\ No newline at end of file
diff --git a/src/account/PasswordChangeSuccessDialog.js b/src/account/PasswordChangeSuccessDialog.js
new file mode 100644
index 00000000..2e758cf0
--- /dev/null
+++ b/src/account/PasswordChangeSuccessDialog.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FlatButton, Dialog } from 'material-ui';
+
+import appActions from '../app.actions';
+
+// In development environments this won't provide the correct behavior
+// because the app is hosted on a different port, but once an app is deployed
+// reloading the window with an invalidated session will redirect to the login page
+const reload = () => {
+    appActions.setCategory('account')
+    window.location.reload(true);
+}
+
+function PasswordChangeSuccessDialog(props, context) {
+    const titleText = context.d2.i18n.getTranslation('password_changed_successfully');
+    const bodyText = context.d2.i18n.getTranslation('login_again');
+    const buttonText = context.d2.i18n.getTranslation('login');
+
+    const buttons = [
+        <FlatButton label={buttonText} primary onClick={reload} />,
+    ];
+    return (
+        <Dialog
+            title={titleText}
+            actions={buttons}
+            modal
+            open
+        >
+            {bodyText}
+        </Dialog>
+    );
+}
+
+PasswordChangeSuccessDialog.contextTypes = { 
+    d2: PropTypes.object.isRequired
+};
+
+export default PasswordChangeSuccessDialog;
\ No newline at end of file
diff --git a/src/account/account.actions.js b/src/account/account.actions.js
index 38bd1c1f..6b4445f1 100644
--- a/src/account/account.actions.js
+++ b/src/account/account.actions.js
@@ -20,10 +20,9 @@ accountActions.setPassword.subscribe(({ data: [oldPassword, newPassword, onSucce
         api.update('/me/changePassword', payload)
             .then(() => {
                 log.debug('Password updated successfully.');
-                appActions.showSnackbarMessage({
-                    message: d2.i18n.getTranslation('password_update_success'),
-                    status: 'success',
-                });
+                
+                appActions.setCategory('passwordChanged');
+
                 onSuccess();
                 complete();
             })
diff --git a/src/app.router.js b/src/app.router.js
index 263f5f87..d80fb134 100644
--- a/src/app.router.js
+++ b/src/app.router.js
@@ -17,6 +17,7 @@ import TwoFactor from './account/twoFactor/TwoFactor';
 import UserSettings from './settings/UserSettings.component';
 import ViewProfile from './viewProfile/ViewProfile.component';
 import AboutPage from './aboutPage/AboutPage.component';
+import PasswordChangeSuccessDialog from './account/PasswordChangeSuccessDialog';
 
 function WrAppadApp(props) {
     return (
@@ -48,6 +49,7 @@ class AppRouter extends Component {
                             <Route path="profile" component={Profile} />
                             <Route path="account" component={Account} />
                             <Route path="twoFactor" component={TwoFactor} />
+                            <Route path="passwordChanged" component={PasswordChangeSuccessDialog} />
                             <Route path="viewProfile" component={ViewProfile} />
                             <Route path="aboutPage" component={AboutPage} />
                             <Redirect from="/" to="/viewProfile" />