fix: [MP-1501] add validation error when user input wrong password

src/features/private/profile/settings/components/ContactDetails/components/CheckPasswordStep/CheckPasswordStep.tsx

@@ -8,9 +8,9 @@ import { Form } from "react-final-form";
 
 import TextInput from "@/features/auth/ui/molecules/TextInput";
 import ERRORS from "@/features/auth/utils/errors";
-import { validatePassword } from "@/features/auth/utils/validation";
 import { handleContactUpdate } from "@/features/private/profile/settings/utils/legacyUtils";
 import { required } from "@/lib/validations";
+import { ErrorBox } from "@/ui";
 import Button from "@/uikit2/atoms/Button";
 import { Label } from "@/uikit2/components";
 
@@ -30,7 +30,13 @@ export const CheckPasswordStep: FC<CheckPasswordStepProps> = ({
       handleContactUpdate(values, updateEmailMutation, onComplete)
     }
   >
-    {({ handleSubmit, submitting, pristine }) => (
+    {({
+      handleSubmit,
+      submitting,
+      pristine,
+      hasValidationErrors,
+      submitErrors,
+    }) => (
       <form onSubmit={handleSubmit}>
         <Label className={styles.label}>
           This is a Two-Factor verification process
@@ -47,12 +53,15 @@ export const CheckPasswordStep: FC<CheckPasswordStepProps> = ({
           type="password"
           validate={composeFieldValidators(
             required(),
-            maxLength(58, ERRORS.PASSWORD_IS_TOO_LONG),
-            (v) => validatePassword(v)
+            maxLength(58, ERRORS.PASSWORD_IS_TOO_LONG)
           )}
         />
+        {submitErrors && <ErrorBox>{submitErrors.verification}</ErrorBox>}
         <ActionsPanel>
-          <Button.Blue disabled={submitting || pristine} type="submit">
+          <Button.Blue
+            disabled={submitting || pristine || hasValidationErrors}
+            type="submit"
+          >
             Next
           </Button.Blue>
         </ActionsPanel>