Have the UI inform the user why they could not update their password (#23398)

## #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

@@ -0,0 +1 @@
+* Have the UI inform the user why they could not update their password

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

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;
+};