Fix / old password form error after validation

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

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"

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;

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

platforms/web/public/locales/en/account.json

@@ -195,6 +195,7 @@
     "password_reset_text": "",
     "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",

platforms/web/public/locales/es/account.json

@@ -205,6 +205,7 @@
     "password_reset_text": "",
     "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",