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>({}); const [showApiTokenModal, setShowApiTokenModal] = useState(false); const [errors, setErrors] = useState<{ [key: string]: string }>({}); - const [userErrors, setUserErrors] = useState<{ [key: string]: string }>({}); const onCancel = (evt: React.MouseEvent) => { 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 => { ); 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; +};