From 50a49b25bfa5346d2a18a72044371647f1473d57 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Wed, 23 Jun 2021 07:29:49 -0700
Subject: [PATCH] Account settings page: Email update UX (#1142)

---
 .../UserSettingsPage/UserSettingsPage.jsx     | 19 ++++++++++++-------
 .../UserSettingsPage.tests.jsx                |  3 ++-
 frontend/pages/UserSettingsPage/_styles.scss  |  4 ++++
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
index 19957e8504..b105874418 100644
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
+++ b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
@@ -21,6 +21,7 @@ import FleetIcon from "components/icons/FleetIcon";
 import InputField from "components/forms/fields/InputField";
 import { logoutUser, updateUser } from "redux/nodes/auth/actions";
 import Modal from "components/modals/Modal";
+import configInterface from "interfaces/config";
 import { renderFlash } from "redux/nodes/notifications/actions";
 import userActions from "redux/nodes/entities/users/actions";
 import versionActions from "redux/nodes/version/actions";
@@ -31,6 +32,7 @@ const baseClass = "user-settings";
 
 export class UserSettingsPage extends Component {
   static propTypes = {
+    config: configInterface,
     dispatch: PropTypes.func.isRequired,
     version: PropTypes.shape({
       version: PropTypes.string,
@@ -164,7 +166,7 @@ export class UserSettingsPage extends Component {
   };
 
   handleSubmit = (formData) => {
-    const { dispatch, user } = this.props;
+    const { dispatch, user, config } = this.props;
     const updatedUser = deepDifference(formData, user);
 
     if (updatedUser.email && !updatedUser.password) {
@@ -173,11 +175,13 @@ export class UserSettingsPage extends Component {
 
     return dispatch(updateUser(user, updatedUser))
       .then(() => {
+        let accountUpdatedFlashMessage = "Account updated";
         if (updatedUser.email) {
+          accountUpdatedFlashMessage += `: A confirmation email was sent from ${config.sender_address} to ${updatedUser.email}`;
           this.setState({ pendingEmail: updatedUser.email });
         }
 
-        dispatch(renderFlash("success", "Account updated!"));
+        dispatch(renderFlash("success", accountUpdatedFlashMessage));
 
         return true;
       })
@@ -211,10 +215,10 @@ export class UserSettingsPage extends Component {
     }
 
     return (
-      <Modal
-        title="To change your email you must supply your password"
-        onExit={onToggleEmailModal}
-      >
+      <Modal title="Confirm email update" onExit={onToggleEmailModal}>
+        <div className={`${baseClass}__confirm-update`}>
+          To update your email you must confirm your password.
+        </div>
         <ChangeEmailForm
           formData={updatedUser}
           handleSubmit={emailSubmit}
@@ -376,9 +380,10 @@ export class UserSettingsPage extends Component {
 const mapStateToProps = (state) => {
   const { data: version } = state.version;
   const { errors, user } = state.auth;
+  const { config } = state.app;
   const { errors: userErrors } = state.entities.users;
 
-  return { version, errors, user, userErrors };
+  return { version, errors, user, userErrors, config };
 };
 
 export default connect(mapStateToProps)(UserSettingsPage);
diff --git a/frontend/pages/UserSettingsPage/UserSettingsPage.tests.jsx b/frontend/pages/UserSettingsPage/UserSettingsPage.tests.jsx
index 37ae60a3bc..f50de36f8a 100644
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.tests.jsx
+++ b/frontend/pages/UserSettingsPage/UserSettingsPage.tests.jsx
@@ -6,7 +6,7 @@ import ConnectedPage, {
   UserSettingsPage,
 } from "pages/UserSettingsPage/UserSettingsPage";
 import testHelpers from "test/helpers";
-import { userStub } from "test/stubs";
+import { userStub, configStub } from "test/stubs";
 import * as authActions from "redux/nodes/auth/actions";
 
 const { connectedComponent, fillInFormInput, reduxMockStore } = testHelpers;
@@ -14,6 +14,7 @@ const { connectedComponent, fillInFormInput, reduxMockStore } = testHelpers;
 describe("UserSettingsPage - component", () => {
   const store = {
     auth: { user: userStub },
+    app: { config: configStub },
     entities: { users: {} },
     version: { data: {} },
   };
diff --git a/frontend/pages/UserSettingsPage/_styles.scss b/frontend/pages/UserSettingsPage/_styles.scss
index 26fcf75816..5431b0ef06 100644
--- a/frontend/pages/UserSettingsPage/_styles.scss
+++ b/frontend/pages/UserSettingsPage/_styles.scss
@@ -81,6 +81,10 @@
     margin: 4px 0 $pad-large;
   }
 
+  &__confirm-update {
+    margin-bottom: $pad-medium;
+  }
+
   &__reveal-secret {
     float: right;
     text-decoration: none;