feat(frontend/shared): change password funcionality in profile screen…

… bb-417 (#512) * feat: slicing form design ui bb-9 * fix: remove lint css root folder bb-0 * feat: make toggle visibility password bb-9 * feat: add user data in redux store bb-9 * feat: make validation confirm password bb-9 * fix: refactor unused code and comment bb-9 * style: adjust css variabel to match with other bb-9 * refactor: make other props instead className bb-9 * style: adjust css variabel conflict bb-9 * chore: release-1.6.0 (#95) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * refactor: using getValidClassNames and seperate each style in component bb-9 * fix: handle conflict in app.tsx bb-9 * style: change all changelog file bb-9 * refactor: remove unused img and code bb-9 * style: change folder structure and handle typo name in class bb-9 * fix: solve UI issue in # UI bb-9 * feat: redirect user to root after # bb-9 * feat: navigate user to root path bb-9 * refactor: remove use navigate in # form bb-9 * feat: add error handling # bb-9 * fix: up to date package-lock with main bb-9 * feat: remove try catch block bb-9 * feat: follow rules and messages from doc validation bb-209 * feat: disabled button when schema invalid bb-209 * feat: add mode onchange in react hook form bb-209 * refactor: remove unused user validation schema bb-209 * refactor: remove unused validation & seperate const for user bb-209 * fix: remove confirm input in schema validation bb-209 * refactor: remove duplicate message for confirm input bb-209 * style: add type in variabel no error bb-209 * refactor: remove unused message in user validation bb-209 * style: change email placeholder bb-209 * style: change no error input const in user modules bb-209 * style: create constan folder in user module bb-209 * fix: show error popup auth & reorder password validation bb-209 * chore: change package-lock.json bb-209 * fix: change regex rule for email bb-209 * fix: change email rule validation bb-209 * refactor: make notification as global for any page bb-209 * feat: show logout confirmation bb-365 * refactor: wrap logout confirm popup using dialog tag bb-365 * fix: set false logout popup as default state bb-365 * style: add class for img tag bb-365 * style: change variabel popup into meaningful bb-365 * style: add variant for confirm button bb-365 * feat: add logo to sigin & # pages bb-373 * feat: update password functionality backend-frontend bb-417 * feat: add success notification update password bb-417 * style: remove unused comment bb-417 * style: change response status swager spec bb-417 * style: remove unused comment bb-417 * refactor: remove token in update req & make helper check password bb-417 * refactor: move check password to auth service and using API handler to get userDTO bb-417 * fix: solve not match confirm new password bb-417 * refactor: remove fields object in confirm password custom validation bb-417 * refactor: remove fields object in confirm password custom validation bb-417 * refactor: move confirm new password field to enum bb-417 * style: change enum property of confirm password custom validation bb-417 * refactor: using get values instead watch in # mobile bb-417 --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Farid Shabanov <61088675+fshabanov@users.noreply.github.com>
BinaryStudioAcademy · Sep 21, 2024 · b3e98c8 · b3e98c8
1 parent 60c6e6a
commit b3e98c8
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 10 deletions.
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
@@ -49,7 +49,7 @@ const ResetPasswordForm: React.FC<Properties> = ({
 						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
@@ -35,7 +35,7 @@ const #Form: React.FC<Properties> = ({ 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
@@ -0,0 +1 @@
+export { ConfirmPasswordCustomValidation } from "shared";
diff --git a/.../frontend/src/pages/profile/libs/components/update-password-form/update-password-form.tsx b/.../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,17 +22,29 @@ const UpdatePasswordForm: React.FC<Properties> = ({ onSubmit }: Properties) => {
 	const [isConfirmNewPasswordVisible, setIsConfirmNewPasswordVisible] =
 		useState<boolean>(false);
 
-	const { control, errors, handleSubmit } =
+	const { control, errors, getValues, handleSubmit, setError } =
 		useAppForm<UserUpdatePasswordFormDto>({
 			defaultValues: DEFAULT_UPDATE_PASSWORD_PAYLOAD,
 			validationSchema: userUpdatePasswordValidationSchema,
 		});
 
 	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
@@ -5,6 +5,7 @@ import {
 	type FieldErrors,
 	type FieldValues,
 	useForm,
+	type UseFormGetValues,
 	type UseFormHandleSubmit,
 	type UseFormReset,
 	type UseFormSetError,
@@ -23,6 +24,7 @@ type Arguments<T extends FieldValues = FieldValues> = {
 type Results<T extends FieldValues = FieldValues> = {
 	control: Control<T, null>;
 	errors: FieldErrors<T>;
+	getValues: UseFormGetValues<T>;
 	handleSubmit: UseFormHandleSubmit<T>;
 	isValid: boolean;
 	reset: UseFormReset<T>;
@@ -38,6 +40,7 @@ const useAppForm = <T extends FieldValues = FieldValues>({
 	const {
 		control,
 		formState: { errors, isValid },
+		getValues,
 		handleSubmit,
 		reset,
 		setError,
@@ -51,6 +54,7 @@ const useAppForm = <T extends FieldValues = FieldValues>({
 	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
@@ -39,7 +39,7 @@ const #Form: React.FC<Properties> = ({ onSubmit }) => {
 		setIsConfirmPasswordHidden(!isConfirmPasswordHidden);
 	}, [isConfirmPasswordHidden]);
 
-	const { control, errors, handleSubmit, setError, watch } =
+	const { control, errors, getValues, handleSubmit, setError } =
 		useAppForm<User#FormDto>({
 			defaultValues: USER_SIGN_UP_DEFAULT_VALUES,
 			validationSchema: user#ValidationSchema,
@@ -48,18 +48,20 @@ const #Form: React.FC<Properties> = ({ onSubmit }) => {
 	const handleFormSubmit = useCallback((): void => {
 		void handleSubmit((#SubmissionData: User#FormDto) => {
 			const { password } = #SubmissionData;
-			const confirmPassword = watch(ConfirmPasswordCustomValidation.FIELD);
+			const confirmPassword = getValues(
+				ConfirmPasswordCustomValidation.FIELD.CONFIRM_PASSWORD,
+			);
 
 			if (confirmPassword === password) {
 				onSubmit(#SubmissionData);
 			} 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
@@ -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 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { ConfirmPasswordCustomValidation } from "shared";