From 7e11074c1ba9aebc02f01e0dfffcc47d39a9a370 Mon Sep 17 00:00:00 2001
From: Melissa Hart <48496458+MelissaDTH@users.noreply.github.com>
Date: Tue, 2 Apr 2024 09:14:12 +0200
Subject: [PATCH] fix(project): old password form error after validation

---
 .../src/components/EditPasswordForm/EditPasswordForm.tsx     | 5 ++++-
 .../__snapshots__/EditPasswordForm.test.tsx.snap             | 2 ++
 .../ui-react/src/components/PasswordField/PasswordField.tsx  | 2 +-
 .../src/containers/AccountModal/forms/EditPassword.tsx       | 2 ++
 platforms/web/public/locales/en/account.json                 | 1 +
 platforms/web/public/locales/es/account.json                 | 1 +
 6 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
index 5aa41f030..8413310ac 100644
--- a/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/packages/ui-react/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -43,7 +43,7 @@ const EditPasswordForm: React.FC<Props> = ({
 }: Props) => {
   const { t } = useTranslation(['account', 'user']);
   return (
-    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate>
       {errors.form && (
         <FormFeedback variant="error" visible={!validationError}>
           {errors.form}
@@ -69,6 +69,7 @@ const EditPasswordForm: React.FC<Props> = ({
           name="oldPassword"
           showToggleView={false}
           showHelperText={false}
+          autoComplete="current-password"
           required
         />
       )}
@@ -95,6 +96,7 @@ const EditPasswordForm: React.FC<Props> = ({
         placeholder={t('reset.password')}
         error={!!errors.password}
         name="password"
+        autoComplete="new-password"
         required
       />
 
@@ -106,6 +108,7 @@ const EditPasswordForm: React.FC<Props> = ({
         placeholder={t('reset.repeat_new_password')}
         error={!!errors.passwordConfirmation}
         name="passwordConfirmation"
+        autoComplete="new-password"
         required
       />
 
diff --git a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
index 6158f4261..154c0b47c 100644
--- a/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
+++ b/packages/ui-react/src/components/EditPasswordForm/__snapshots__/EditPasswordForm.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_password"
           aria-invalid="false"
+          autocomplete="new-password"
           class="_input_e16c1b"
           id="text-field_1235_password"
           name="password"
@@ -79,6 +80,7 @@ exports[`<EditPasswordForm> > renders and matches snapshot 1`] = `
         <input
           aria-describedby="helper_text_1235_passwordconfirmation"
           aria-invalid="false"
+          autocomplete="new-password"
           class="_input_e16c1b"
           id="text-field_1235_passwordconfirmation"
           name="passwordConfirmation"
diff --git a/packages/ui-react/src/components/PasswordField/PasswordField.tsx b/packages/ui-react/src/components/PasswordField/PasswordField.tsx
index 0a430ee44..a4eceecd3 100644
--- a/packages/ui-react/src/components/PasswordField/PasswordField.tsx
+++ b/packages/ui-react/src/components/PasswordField/PasswordField.tsx
@@ -9,7 +9,7 @@ import PasswordStrength from '../PasswordStrength/PasswordStrength';
 import IconButton from '../IconButton/IconButton';
 import Icon from '../Icon/Icon';
 
-type Props = {
+type Props = React.InputHTMLAttributes<HTMLInputElement> & {
   onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   error?: boolean;
diff --git a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
index 50321cc8a..22c54a2ba 100644
--- a/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
+++ b/packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx
@@ -59,6 +59,8 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
           setErrors({ form: t('reset.invalid_reset_link') });
         } else if (error.message.includes('score does not match standards')) {
           setErrors({ form: t('reset.password_strength') });
+        } else if (error.message.includes('old password does not match')) {
+          setErrors({ form: t('reset.old_password_does_not_match') });
         } else if (error.message.includes('password could not be set')) {
           setErrors({ form: t('reset.invalid_token') });
         }
diff --git a/platforms/web/public/locales/en/account.json b/platforms/web/public/locales/en/account.json
index d5dddbee5..12dfe8199 100644
--- a/platforms/web/public/locales/en/account.json
+++ b/platforms/web/public/locales/en/account.json
@@ -195,6 +195,7 @@
     "password_reset_success": "Password reset successful",
     "password_strength": "Although your password meets the criteria for a strong password, it includes elements that are not advisable, such as prohibited phrases or repeated words. Please modify it to ensure account safety.",
     "passwords_do_not_match": "Passwords do not match",
+    "old_password_does_not_match": "Old password does not match",
     "repeat_new_password": "Repeat new password",
     "reset_password": "Edit Password",
     "reset_password_token": "Token",
diff --git a/platforms/web/public/locales/es/account.json b/platforms/web/public/locales/es/account.json
index fbf29626e..2701e8a2c 100644
--- a/platforms/web/public/locales/es/account.json
+++ b/platforms/web/public/locales/es/account.json
@@ -205,6 +205,7 @@
     "password_reset_success": "Contraseña restablecida",
     "password_strength": "Aunque tu contraseña cumple con los criterios de una contraseña segura, incluye elementos que no son recomendables, como frases prohibidas o palabras repetidas. Por favor, modifícala para garantizar la seguridad de tu cuenta.",
     "passwords_do_not_match": "Las contraseñas no coinciden",
+    "old_password_does_not_match": "La contraseña antigua no coincide",
     "repeat_new_password": "Repetir nueva contraseña",
     "reset_password": "Editar contraseña",
     "reset_password_token": "Token",