fix(account): show dialog after password change success

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

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;

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();
             })

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