diff --git a/apps/frontend/src/pages/auth/libs/components/reset-password-form/reset-password-form.tsx b/apps/frontend/src/pages/auth/libs/components/reset-password-form/reset-password-form.tsx index 4c502e090..85a3a92c4 100644 --- a/apps/frontend/src/pages/auth/libs/components/reset-password-form/reset-password-form.tsx +++ b/apps/frontend/src/pages/auth/libs/components/reset-password-form/reset-password-form.tsx @@ -49,7 +49,7 @@ const ResetPasswordForm: React.FC = ({ newPassword, }); } else { - setError(ConfirmPasswordCustomValidation.FIELD, { + setError(ConfirmPasswordCustomValidation.FIELD.CONFIRM_PASSWORD, { message: ConfirmPasswordCustomValidation.ERROR_MESSAGE, type: ConfirmPasswordCustomValidation.ERROR_TYPE, }); diff --git a/apps/frontend/src/pages/auth/libs/components/sign-up-form/sign-up-form.tsx b/apps/frontend/src/pages/auth/libs/components/sign-up-form/sign-up-form.tsx index 6b1f06918..5f857241f 100644 --- a/apps/frontend/src/pages/auth/libs/components/sign-up-form/sign-up-form.tsx +++ b/apps/frontend/src/pages/auth/libs/components/sign-up-form/sign-up-form.tsx @@ -35,7 +35,7 @@ const SignUpForm: React.FC = ({ onSubmit }: Properties) => { if (confirmPassword === password) { onSubmit(payload); } else { - setError(ConfirmPasswordCustomValidation.FIELD, { + setError(ConfirmPasswordCustomValidation.FIELD.CONFIRM_PASSWORD, { message: ConfirmPasswordCustomValidation.ERROR_MESSAGE, type: ConfirmPasswordCustomValidation.ERROR_TYPE, }); diff --git a/apps/frontend/src/pages/profile/libs/components/update-password-form/libs/enums/enums.ts b/apps/frontend/src/pages/profile/libs/components/update-password-form/libs/enums/enums.ts new file mode 100644 index 000000000..46fe494df --- /dev/null +++ b/apps/frontend/src/pages/profile/libs/components/update-password-form/libs/enums/enums.ts @@ -0,0 +1 @@ +export { ConfirmPasswordCustomValidation } from "shared"; diff --git a/apps/frontend/src/pages/profile/libs/components/update-password-form/update-password-form.tsx b/apps/frontend/src/pages/profile/libs/components/update-password-form/update-password-form.tsx index b5bfa2eef..e6e140c48 100644 --- a/apps/frontend/src/pages/profile/libs/components/update-password-form/update-password-form.tsx +++ b/apps/frontend/src/pages/profile/libs/components/update-password-form/update-password-form.tsx @@ -7,6 +7,7 @@ import { } from "~/modules/users/users.js"; import { DEFAULT_UPDATE_PASSWORD_PAYLOAD } from "./libs/constants/constants.js"; +import { ConfirmPasswordCustomValidation } from "./libs/enums/enums.js"; import styles from "./styles.module.css"; type Properties = { @@ -21,7 +22,7 @@ const UpdatePasswordForm: React.FC = ({ onSubmit }: Properties) => { const [isConfirmNewPasswordVisible, setIsConfirmNewPasswordVisible] = useState(false); - const { control, errors, handleSubmit } = + const { control, errors, getValues, handleSubmit, setError } = useAppForm({ defaultValues: DEFAULT_UPDATE_PASSWORD_PAYLOAD, validationSchema: userUpdatePasswordValidationSchema, @@ -29,9 +30,21 @@ const UpdatePasswordForm: React.FC = ({ onSubmit }: Properties) => { const handleFormSubmit = useCallback( (event_: React.BaseSyntheticEvent): void => { - void handleSubmit(onSubmit)(event_); + void handleSubmit((payload: UserUpdatePasswordRequestDto) => { + const { confirmNewPassword } = getValues(); + const { newPassword } = payload; + + if (confirmNewPassword === newPassword) { + onSubmit(payload); + } else { + setError(ConfirmPasswordCustomValidation.FIELD.CONFIRM_NEW_PASSWORD, { + message: ConfirmPasswordCustomValidation.ERROR_MESSAGE, + type: ConfirmPasswordCustomValidation.ERROR_TYPE, + }); + } + })(event_); }, - [handleSubmit, onSubmit], + [handleSubmit, onSubmit, setError, getValues], ); const handleTogglePasswordVisibility = useCallback(() => { diff --git a/apps/mobile/src/libs/hooks/use-app-form/use-app-form.hook.ts b/apps/mobile/src/libs/hooks/use-app-form/use-app-form.hook.ts index 8fd3195f0..e3bdaa8d6 100644 --- a/apps/mobile/src/libs/hooks/use-app-form/use-app-form.hook.ts +++ b/apps/mobile/src/libs/hooks/use-app-form/use-app-form.hook.ts @@ -5,6 +5,7 @@ import { type FieldErrors, type FieldValues, useForm, + type UseFormGetValues, type UseFormHandleSubmit, type UseFormReset, type UseFormSetError, @@ -23,6 +24,7 @@ type Arguments = { type Results = { control: Control; errors: FieldErrors; + getValues: UseFormGetValues; handleSubmit: UseFormHandleSubmit; isValid: boolean; reset: UseFormReset; @@ -38,6 +40,7 @@ const useAppForm = ({ const { control, formState: { errors, isValid }, + getValues, handleSubmit, reset, setError, @@ -51,6 +54,7 @@ const useAppForm = ({ return { control, errors, + getValues, handleSubmit, isValid, reset, diff --git a/apps/mobile/src/screens/auth/components/sign-up-form/sign-up-form.tsx b/apps/mobile/src/screens/auth/components/sign-up-form/sign-up-form.tsx index c28d21d9a..072a6b4a1 100644 --- a/apps/mobile/src/screens/auth/components/sign-up-form/sign-up-form.tsx +++ b/apps/mobile/src/screens/auth/components/sign-up-form/sign-up-form.tsx @@ -39,7 +39,7 @@ const SignUpForm: React.FC = ({ onSubmit }) => { setIsConfirmPasswordHidden(!isConfirmPasswordHidden); }, [isConfirmPasswordHidden]); - const { control, errors, handleSubmit, setError, watch } = + const { control, errors, getValues, handleSubmit, setError } = useAppForm({ defaultValues: USER_SIGN_UP_DEFAULT_VALUES, validationSchema: userSignUpValidationSchema, @@ -48,18 +48,20 @@ const SignUpForm: React.FC = ({ onSubmit }) => { const handleFormSubmit = useCallback((): void => { void handleSubmit((signUpSubmissionData: UserSignUpFormDto) => { const { password } = signUpSubmissionData; - const confirmPassword = watch(ConfirmPasswordCustomValidation.FIELD); + const confirmPassword = getValues( + ConfirmPasswordCustomValidation.FIELD.CONFIRM_PASSWORD, + ); if (confirmPassword === password) { onSubmit(signUpSubmissionData); } else { - setError(ConfirmPasswordCustomValidation.FIELD, { + setError(ConfirmPasswordCustomValidation.FIELD.CONFIRM_PASSWORD, { message: ConfirmPasswordCustomValidation.ERROR_MESSAGE, type: ConfirmPasswordCustomValidation.ERROR_TYPE, }); } })(); - }, [handleSubmit, onSubmit, setError, watch]); + }, [handleSubmit, onSubmit, setError, getValues]); return ( <> diff --git a/packages/shared/src/modules/auth/libs/enums/confirm-password-custom-validation.enum.ts b/packages/shared/src/modules/auth/libs/enums/confirm-password-custom-validation.enum.ts index 7cb7b560c..994fe1157 100644 --- a/packages/shared/src/modules/auth/libs/enums/confirm-password-custom-validation.enum.ts +++ b/packages/shared/src/modules/auth/libs/enums/confirm-password-custom-validation.enum.ts @@ -1,7 +1,10 @@ const ConfirmPasswordCustomValidation = { ERROR_MESSAGE: "Passwords do not match. Please re-enter your password", ERROR_TYPE: "custom", - FIELD: "confirmPassword", + FIELD: { + CONFIRM_NEW_PASSWORD: "confirmNewPassword", + CONFIRM_PASSWORD: "confirmPassword", + }, } as const; export { ConfirmPasswordCustomValidation };