fix(account): login again after password change

dhis2 · Jan 13, 2020 · 79c96b9 · 79c96b9
2 parents 9765406 + 32daf90
commit 79c96b9
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 6 deletions.
diff --git 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
diff --git a/src/account/PasswordChangeSuccessDialog.js 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;
diff --git a/src/account/account.actions.js b/src/account/account.actions.js
@@ -20,17 +20,21 @@ 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();
             })
             .catch((err) => {
+                const message = err && err.message && typeof err.message === 'string' 
+                    ? err.message 
+                    : d2.i18n.getTranslation('password_update_failed');
+
                 appActions.showSnackbarMessage({
-                    message: d2.i18n.getTranslation('password_update_failed'),
+                    message,
                     status: 'error',
+                    permanent: true,
                 });
                 log.error('Failed to update password:', err);
                 error();

diff --git 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" />

diff --git a/src/layout/Snackbar.component.js b/src/layout/Snackbar.component.js
@@ -10,11 +10,14 @@ const messageStatus = {
     success: { backgroundColor: '#9CCC65' },
 };
 
+const DEFAULT_AUTOHIDE_DURATION = 1250
+
 class SnackWrapper extends Component {
     state = {
         snackbarMessage: '',
         showSnackbar: false,
         messageStatus: messageStatus['neutral'],
+        autoHideDuration: DEFAULT_AUTOHIDE_DURATION
     };
 
     componentDidMount() {
@@ -23,10 +26,13 @@ class SnackWrapper extends Component {
         this.subscriptions.push(appActions.showSnackbarMessage.subscribe((params) => {
             const message = params.data.message;
             const status = params.data.status ? params.data.status : 'neutral';
+            const autoHideDuration = params.data.permanent ? undefined : DEFAULT_AUTOHIDE_DURATION
+
             this.setState({ 
                 snackbarMessage: message, 
                 showSnackbar: !!message,
                 messageStatus: messageStatus[status],
+                autoHideDuration,
             });
         }));
     }
@@ -45,7 +51,7 @@ class SnackWrapper extends Component {
         return (
             <Snackbar
                 message={this.state.snackbarMessage}
-                autoHideDuration={1250}
+                autoHideDuration={this.state.autoHideDuration}
                 bodyStyle={this.state.messageStatus}
                 open={this.state.showSnackbar}
                 onRequestClose={this.closeSnackbar}