From 78f520b467ced37942ad6460dce4d825525fd5c0 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 30 Oct 2024 11:14:50 -0700
Subject: [PATCH] Have the UI inform the user why they could not update their
 password (#23398)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## #23341

<img width="1305" alt="Screenshot 2024-10-30 at 10 13 27 AM"
src="https://github.com/user-attachments/assets/c085f77c-4620-4f62-9f2c-0fe7fd9dec8b">

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality
- [ ] Cherry-pick and PR into RC

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/23341-handle-error-change-password |  1 +
 frontend/pages/AccountPage/AccountPage.tsx |  9 +++------
 frontend/pages/AccountPage/helpers.ts      | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 changes/23341-handle-error-change-password
 create mode 100644 frontend/pages/AccountPage/helpers.ts

diff --git a/changes/23341-handle-error-change-password b/changes/23341-handle-error-change-password
new file mode 100644
index 0000000000..ec010c38e7
--- /dev/null
+++ b/changes/23341-handle-error-change-password
@@ -0,0 +1 @@
+* Have the UI inform the user why they could not update their password
\ No newline at end of file
diff --git a/frontend/pages/AccountPage/AccountPage.tsx b/frontend/pages/AccountPage/AccountPage.tsx
index 87e7276083..41b7950385 100644
--- a/frontend/pages/AccountPage/AccountPage.tsx
+++ b/frontend/pages/AccountPage/AccountPage.tsx
@@ -26,6 +26,7 @@ import CustomLink from "components/CustomLink";
 
 import SecretField from "./APITokenModal/TokenSecretField/SecretField";
 import AccountSidePanel from "./AccountSidePanel";
+import { getErrorMessage } from "./helpers";
 
 const baseClass = "account-page";
 
@@ -43,7 +44,6 @@ const AccountPage = ({ router }: IAccountPageProps): JSX.Element | null => {
   const [updatedUser, setUpdatedUser] = useState<Partial<IUser>>({});
   const [showApiTokenModal, setShowApiTokenModal] = useState(false);
   const [errors, setErrors] = useState<{ [key: string]: string }>({});
-  const [userErrors, setUserErrors] = useState<{ [key: string]: string }>({});
 
   const onCancel = (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
@@ -121,10 +121,8 @@ const AccountPage = ({ router }: IAccountPageProps): JSX.Element | null => {
       await usersAPI.changePassword(formData);
       renderFlash("success", "Password changed successfully");
       setShowPasswordModal(false);
-    } catch (response) {
-      const errorObject = formatErrorResponse(response);
-      setUserErrors(errorObject);
-      return false;
+    } catch (e) {
+      renderFlash("error", getErrorMessage(e));
     }
   };
 
@@ -161,7 +159,6 @@ const AccountPage = ({ router }: IAccountPageProps): JSX.Element | null => {
         <ChangePasswordForm
           handleSubmit={handleSubmitPasswordForm}
           onCancel={onTogglePasswordModal}
-          serverErrors={userErrors}
         />
       </Modal>
     );
diff --git a/frontend/pages/AccountPage/helpers.ts b/frontend/pages/AccountPage/helpers.ts
new file mode 100644
index 0000000000..2521555d66
--- /dev/null
+++ b/frontend/pages/AccountPage/helpers.ts
@@ -0,0 +1,16 @@
+import { getErrorReason } from "interfaces/errors";
+
+const DEFAULT_ERROR_MESSAGE = "Could not update. Please try again.";
+
+// eslint-disable-next-line import/prefer-default-export
+export const getErrorMessage = (e: unknown) => {
+  let errorMessage = getErrorReason(e, {
+    reasonIncludes: "Cannot reuse old password",
+  });
+
+  if (!errorMessage) {
+    errorMessage = DEFAULT_ERROR_MESSAGE;
+  }
+
+  return errorMessage;
+};