edit validation messages, saving formData

src/app/ui/login-form.tsx

@@ -5,7 +5,7 @@ import { useActionState } from 'react';
 import { authorization } from '@/app/actions/auth';
 
 export default function LoginForm() {
-	const [errorMessage, formAction, isPending] = useActionState(
+	const [state, formAction, isPending] = useActionState(
 		authorization,
 		undefined,
 	);
@@ -14,14 +14,33 @@ export default function LoginForm() {
 		<form action={formAction}>
 			<div className={`${styles['form-group']}`}>
 				<label className={`${styles['form-label']}`}>Email адрес</label>
-				<input type="readOnly" id="email" name="email" className={`${styles['form-input']}`} placeholder="Введите ваш email" />
+				<input
+					type="readOnly"
+					id="email"
+					name="email"
+					className={`${styles['form-input']}`}
+					placeholder="Введите ваш email"
+					defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
+				/>
+				{state?.error?.email && (
+					<p className="text-sm text-red-500">{state?.error?.email}</p>
+				)}
 			</div>
 			<div className={`${styles['form-group']}`}>
 				<label className={`${styles['form-label']}`}>Пароль</label>
-				<input type="password" id="password" name="password" className={`${styles['form-input']}`} placeholder="Введите пароль" />
+				<input
+					type="password"
+					id="password"
+					name="password"
+					className={`${styles['form-input']}`}
+					placeholder="Введите пароль"
+				/>
+				{state?.error?.password && (
+					<p className="text-sm text-red-500">{state?.error?.password}</p>
+				)}
 			</div>
-			{errorMessage && (
-				<p className="text-sm text-red-500">{errorMessage}</p>
+			{state?.error.server && (
+				<p className="text-sm text-red-500">{state?.error.server}</p>
 			)}
 			<div className={`${styles['form-options']}`}>
 				<div className={`${styles['form-checkbox']}`}>

src/app/ui/register-form.tsx

@@ -1,19 +1,15 @@
 'use client'
 
 import styles from '@/app/styles/login.module.scss';
-import { useActionState, useEffect } from 'react';
+import { useActionState } from 'react';
 import { registration } from '@/app/actions/auth';
 
 export default function RegisterForm() {
-	const [errorMessage, formAction, isPending] = useActionState(
+	const [state, formAction, isPending] = useActionState(
 		registration,
 		undefined,
 	);
 
-	useEffect(() => {
-		console.log(errorMessage);
-	}, [errorMessage])
-
 	return (
 		<form action={(e) => {
 			formAction(e);
@@ -24,22 +20,43 @@ export default function RegisterForm() {
 				>
 					Полное имя
 				</label>
-				<input type="text" 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>
+				<input
+					type="text"
+					id="full_name"
+					name="full_name"
+					className={`${styles['form-input']}`}
+					placeholder="Иванов Иван Иванович"
+					defaultValue={state?.previousState?.full_name ? state?.previousState?.full_name : ''}
+				/>
+				{state?.error?.full_name && (
+					<p className="text-sm text-red-500">{state?.error?.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>
+					<input
+						type="text"
+						id="email"
+						name="email"
+						className={`${styles['form-input']}`}
+						placeholder="ivan@example.com"
+						defaultValue={state?.previousState?.email ? state?.previousState?.email : ''}
+					/>
+					{state?.error?.email && (
+						<p className="text-sm text-red-500">{state?.error?.email}</p>
 					)}
 				</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" />
+					<input
+						type="phone"
+						id="phone"
+						name="phone"
+						className={`${styles['form-input']}`}
+						placeholder="+7 (999) 123-45-67"
+						defaultValue={state?.previousState?.phone ? state?.previousState?.phone : ''}
+					/>
 				</div>
 			</div>
 			<div className={`${styles['form-group']}`}>
@@ -48,21 +65,41 @@ export default function RegisterForm() {
 				>
 					Компания
 				</label>
-				<input type="text" id="company" name="company" className={`${styles['form-input']}`} placeholder="ООО «Ваша компания»" />
+				<input
+					type="text"
+					id="company"
+					name="company"
+					className={`${styles['form-input']}`}
+					placeholder="ООО «Ваша компания»"
+					defaultValue={state?.previousState?.company ? state?.previousState?.company : ''}
+				/>
 			</div>
 			<div className={`${styles['form-row']}`}>
 				<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>
+					<input
+						type="password"
+						id="password" name="password"
+						className={`${styles['form-input']}`}
+						placeholder="Минимум 8 символов"
+						defaultValue={state?.previousState?.password ? state?.previousState?.password : ''}
+					/>
+					{state?.error?.password && (
+						<p className="text-sm text-red-500">{state?.error?.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>
+					<input
+						type="password"
+						id="confirm_password"
+						name="confirm_password"
+						className={`${styles['form-input']}`}
+						placeholder="Повторите пароль"
+						defaultValue={state?.previousState?.confirm_password ? state?.previousState?.confirm_password : ''}
+					/>
+					{state?.error?.confirm_password && (
+						<p className="text-sm text-red-500">{state?.error?.confirm_password}</p>
 					)}
 				</div>
 			</div>