add input mask, edit valitation and validation message

src/app/ui/register-form.tsx

@@ -3,6 +3,7 @@
 import styles from '@/app/styles/login.module.scss';
 import { useActionState } from 'react';
 import { registration } from '@/app/actions/auth';
+import PhoneInput from '@/app/ui/inputs/phone-input';
 
 export default function RegisterForm() {
 	const [state, formAction, isPending] = useActionState(
@@ -48,15 +49,11 @@ export default function RegisterForm() {
 					)}
 				</div>
 				<div className={`${styles['form-group']}`}>
-					<label className={`${styles['form-label']}`}>Телефон</label>
-					<input
-						type="phone"
-						id="phone"
-						name="phone"
-						className={`${styles['form-input']}`}
-						placeholder="+7 (999) 123-45-67"
-						defaultValue={state?.previousState?.phone ? state?.previousState?.phone : ''}
-					/>
+					<label className={`${styles['form-label']} ${styles['required']}`}>Телефон</label>
+					<PhoneInput phoneState={state?.previousState?.phone} />
+					{state?.error?.phone && (
+						<p className="text-sm text-red-500">{state?.error?.phone}</p>
+					)}
 				</div>
 			</div>
 			<div className={`${styles['form-group']}`}>
@@ -103,11 +100,22 @@ export default function RegisterForm() {
 					)}
 				</div>
 			</div>
-			<div className={`${styles['form-checkbox']}`} style={{ marginBottom: "20px" }}>
-				<input type="checkbox" id="remember" name="remember" />
-				<label>Я соглашаюсь с <a href="forgot-password" >условиями использования и политикой конфиденциальности</a></label>
+			<div className={`${styles['form-checkbox']}`}>
+				<input
+					type="checkbox"
+					id="agree"
+					name="agree"
+					defaultChecked={state?.previousState?.agree ? true : false}
+				/>
+				<label htmlFor="agree">Я соглашаюсь с <a href="/" >условиями использования и политикой конфиденциальности</a></label>
 			</div>
-			<button type="submit" className={`${styles['btn']}`}>Создать аккаунт</button>
-		</form>
+			{state?.error?.agree && (
+				<p className="text-sm text-red-500">{state?.error?.agree}</p>
+			)}
+			{state?.error?.server && (
+				<p className="text-sm text-red-500">{state?.error?.server}</p>
+			)}
+			<button type="submit" className={`${styles['btn']}`} style={{ marginTop: "20px" }}>Создать аккаунт</button>
+		</form >
 	)
 }