refactor(user-register): showing validation

src/app/ui/register-form.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import styles from '@/app/styles/login.module.scss';
-import { useActionState } from 'react';
+import { useActionState, useEffect } from 'react';
 import { registration } from '@/app/actions/auth';
 
 export default function RegisterForm() {
@@ -10,8 +10,14 @@ export default function RegisterForm() {
 		undefined,
 	);
 
+	useEffect(() => {
+		console.log(errorMessage);
+	}, [errorMessage])
+
 	return (
-		<form action={formAction}>
+		<form action={(e) => {
+			formAction(e);
+		}}>
 			<div className={`${styles['form-group']}`}>
 				<label
 					className={`${styles['form-label']} ${styles['required']}`}
@@ -19,11 +25,17 @@ export default function RegisterForm() {
 					Полное имя
 				</label>
 				<input type="readOnly" id="full_name" name="full_name" className={`${styles['form-input']}`} placeholder="Иванов Иван Иванович" />
+				{errorMessage?.full_name && (
+					<p className="text-sm text-red-500">{errorMessage!.full_name}</p>
+				)}
 			</div>
 			<div className={`${styles['form-row']}`}>
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']} ${styles['required']}`}>Email адрес</label>
 					<input type="text" id="email" name="email" className={`${styles['form-input']}`} placeholder="ivan@example.com" />
+					{errorMessage?.email && (
+						<p className="text-sm text-red-500">{errorMessage!.email}</p>
+					)}
 				</div>
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']}`}>Телефон</label>
@@ -42,15 +54,18 @@ export default function RegisterForm() {
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']} ${styles['required']}`}>Пароль</label>
 					<input type="password" id="password" name="password" className={`${styles['form-input']}`} placeholder="Минимум 6 символов" />
+					{errorMessage?.password && (
+						<p className="text-sm text-red-500">{errorMessage!.password}</p>
+					)}
 				</div>
 				<div className={`${styles['form-group']}`}>
 					<label className={`${styles['form-label']} ${styles['required']}`}>Подтвердите пароль</label>
 					<input type="password" id="confirm_password" name="confirm_password" className={`${styles['form-input']}`} placeholder="Повторите пароль" />
+					{errorMessage?.confirm_password && (
+						<p className="text-sm text-red-500">{errorMessage!.confirm_password}</p>
+					)}
 				</div>
 			</div>
-			{errorMessage && (
-				<p className="text-sm text-red-500">{errorMessage}</p>
-			)}
 			<div className={`${styles['form-checkbox']}`} style={{ marginBottom: "20px" }}>
 				<input type="checkbox" id="remember" name="remember" />
 				<label>Я соглашаюсь с <a href="forgot-password" >условиями использования и политикой конфиденциальности</a></label>