add sync form validate

src/app/ui/forms/register-form.tsx

@@ -1,22 +1,30 @@
 'use client'
 
 import styles from '@/app/styles/login.module.scss';
-import { useActionState, useState } from 'react';
-import { registration } from '@/app/actions/auth';
+import { ChangeEvent, useActionState, useEffect, useRef, useState } from 'react';
+import { registration, FormState } from '@/app/actions/auth';
 import PhoneInput from '@/app/ui/inputs/phone-input';
 import Link from 'next/link';
 import { useTranslations } from 'next-intl';
 import { IconEye } from '@/app/ui/icons/icons';
+import { SignupFormSchema } from '@/app/actions/definitions';
+import * as z from 'zod'
 
 export default function RegisterForm() {
 	const [state, formAction, isPending] = useActionState(
 		registration,
 		undefined,
 	);
-	const t = useTranslations('Login-register-form');
 
+	const t = useTranslations('Login-register-form');
 	const [showPassword, setShowPassword] = useState(false);
 	const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+	const [formState, setFormState] = useState<FormState | undefined>(undefined);
+	const passwordRef = useRef<HTMLInputElement>(null);
+
+	useEffect(() => {
+		setFormState(state);
+	}, [state])
 
 	function handleMouseDown(target: 'password' | 'confirm-password') {
 		if (target === 'password') {
@@ -43,6 +51,71 @@ export default function RegisterForm() {
 		}
 	}
 
+	function validateField(
+		fieldName: string,
+		value: string,
+	) {
+		switch (fieldName) {
+			case 'confirm_password':
+				const baseSchema = SignupFormSchema.shape.confirm_password;
+				const baseResult = baseSchema.safeParse(value);
+
+				if (!baseResult.success) {
+					return baseResult;
+				}
+
+				const currentPassword = passwordRef.current?.value || '';
+				if (value !== currentPassword) {
+					return {
+						success: false,
+						error: new z.ZodError([
+							{
+								code: z.ZodIssueCode.custom,
+								message: 'repeat-password',
+								path: ['confirm_password']
+							}
+						])
+					};
+				}
+
+				return { success: true, data: value };
+
+			case 'email':
+			case 'fullName':
+			case 'phone':
+			case 'password':
+			case 'agree':
+				const schema = SignupFormSchema.shape[fieldName];
+				if (fieldName === 'phone') {
+					return schema.safeParse(value.replace(/[-\(\)\s]/g, ''));
+				}
+				return schema.safeParse(value);
+
+			default:
+				throw new Error(`Unknown field: ${fieldName}`);
+		}
+	}
+
+	function onChangeHandler(e: ChangeEvent<HTMLInputElement>): void {
+		const fieldName = e.target.name;
+		const validatedField = validateField(fieldName, e.target.value);
+
+		if (validatedField.success) {
+			setFormState(prevState => {
+				if (!prevState?.error || !prevState?.error[fieldName]) {
+					return prevState;
+				}
+
+				const { [fieldName]: _, ...newError } = prevState.error;
+
+				return {
+					...prevState,
+					error: newError
+				};
+			});
+		}
+	}
+
 	return (
 		<form action={(e) => {
 			formAction(e);
@@ -59,12 +132,13 @@ export default function RegisterForm() {
 					name="fullName"
 					className={`${styles['form-input']}`}
 					placeholder={t('name-placeholder')}
-					defaultValue={state?.previousState?.fullName ? state?.previousState?.fullName : ''}
+					defaultValue={formState?.previousState?.fullName ? formState?.previousState?.fullName : ''}
+					onChange={onChangeHandler}
 				/>
-				{state?.error?.fullName && (
+				{formState?.error?.fullName && (
 					<p className="text-sm text-red-500">
 						{
-							state?.error?.fullName.split('&').map((e) => {
+							formState?.error?.fullName.split('&').map((e) => {
 								return t(e) + " "
 							})
 						}
@@ -82,12 +156,13 @@ export default function RegisterForm() {
 						name="email"
 						className={`${styles['form-input']}`}
 						placeholder="ivan@example.com"
-						defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
+						defaultValue={formState?.previousState?.email ? formState?.previousState?.email : ''}
+						onChange={onChangeHandler}
 					/>
-					{state?.error?.email && (
+					{formState?.error?.email && (
 						<p className="text-sm text-red-500">
 							{
-								state?.error?.email.split('&').map((e) => {
+								formState?.error?.email.split('&').map((e) => {
 									return t(e) + " "
 								})
 							}
@@ -98,10 +173,10 @@ export default function RegisterForm() {
 					<label className={`${styles['form-label']} ${styles['required']}`}>
 						{t('phone')}
 					</label>
-					<PhoneInput phoneState={state?.previousState?.phone} />
-					{state?.error?.phone && (
+					<PhoneInput phoneState={formState?.previousState?.phone} validateHandler={onChangeHandler} />
+					{formState?.error?.phone && (
 						<p className="text-sm text-red-500">
-							{t(state?.error?.phone)}
+							{t(formState?.error?.phone)}
 						</p>
 					)}
 				</div>
@@ -118,7 +193,7 @@ export default function RegisterForm() {
 					name="companyName"
 					className={`${styles['form-input']}`}
 					placeholder={t('company-placeholder')}
-					defaultValue={state?.previousState?.companyName ? state?.previousState?.companyName : ''}
+					defaultValue={formState?.previousState?.companyName ? formState?.previousState?.companyName : ''}
 				/>
 			</div>
 			<div className={`${styles['form-row']}`}>
@@ -130,11 +205,13 @@ export default function RegisterForm() {
 						className={`${styles['password-wrapper']}`}
 					>
 						<input
+							ref={passwordRef}
 							type={showPassword ? "text" : "password"}
 							id="password" name="password"
 							className={`${styles['form-input']}`}
 							placeholder={t('password-placeholder')}
-							defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
+							defaultValue={formState?.previousState?.password ? formState?.previousState?.password : ''}
+							onChange={onChangeHandler}
 						/>
 						<button
 							onMouseDown={() => {
@@ -152,10 +229,10 @@ export default function RegisterForm() {
 							<IconEye />
 						</button>
 					</div>
-					{state?.error?.password && (
+					{formState?.error?.password && (
 						<p className="text-sm text-red-500">
 							{
-								state?.error?.password.split('&').map((e) => {
+								formState?.error?.password.split('&').map((e) => {
 									return t(e)
 								})
 							}
@@ -173,7 +250,8 @@ export default function RegisterForm() {
 							name="confirm_password"
 							className={`${styles['form-input']}`}
 							placeholder={t('repeat-password')}
-							defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
+							defaultValue={formState?.previousState?.confirm_password ? formState?.previousState?.confirm_password : ''}
+							onChange={onChangeHandler}
 						/>
 						<button
 							onMouseDown={() => {
@@ -191,9 +269,9 @@ export default function RegisterForm() {
 							<IconEye />
 						</button>
 					</div>
-					{state?.error?.confirm_password && (
+					{formState?.error?.confirm_password && (
 						<p className="text-sm text-red-500">
-							{t(state?.error?.confirm_password)}
+							{t(formState?.error?.confirm_password)}
 						</p>
 					)}
 				</div>
@@ -203,7 +281,8 @@ export default function RegisterForm() {
 					type="checkbox"
 					id="agree"
 					name="agree"
-					defaultChecked={state?.previousState?.agree ? true : false}
+					defaultChecked={formState?.previousState?.agree ? true : false}
+					onChange={onChangeHandler}
 				/>
 				<label htmlFor="agree">
 					{t('i-agree-to')} <Link
@@ -219,14 +298,14 @@ export default function RegisterForm() {
 					</Link>
 				</label>
 			</div>
-			{state?.error?.agree && (
+			{formState?.error?.agree && (
 				<p className="text-sm text-red-500">
-					{t(state?.error?.agree)}
+					{t(formState?.error?.agree)}
 				</p>
 			)}
-			{state?.error?.server && (
+			{formState?.error?.server && (
 				<p className="text-sm text-red-500 mt-4">
-					{t(state?.error?.server)}
+					{t(formState?.error?.server)}
 				</p>
 			)}
 			<button type="submit" className={`${styles['btn']}`}>