no-copy-frontend/src/app/ui/register-form.tsx

'use client'

import styles from '@/app/styles/login.module.scss';
import { useActionState, useEffect } from 'react';
import { registration } from '@/app/actions/auth';

export default function RegisterForm() {
	const [errorMessage, formAction, isPending] = useActionState(
		registration,
		undefined,
	);

	useEffect(() => {
		console.log(errorMessage);
	}, [errorMessage])

	return (
		<form action={(e) => {
			formAction(e);
		}}>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']} ${styles['required']}`}
				>
					Полное имя
				</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>
					<input type="phone" id="phone" name="phone" className={`${styles['form-input']}`} placeholder="+7 (999) 123-45-67" />
				</div>
			</div>
			<div className={`${styles['form-group']}`}>
				<label
					className={`${styles['form-label']}`}
				>
					Компания
				</label>
				<input type="readOnly" id="company" name="company" className={`${styles['form-input']}`} placeholder="ООО «Ваша компания»" />
			</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>
					)}
				</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>
			<div className={`${styles['form-checkbox']}`} style={{ marginBottom: "20px" }}>
				<input type="checkbox" id="remember" name="remember" />
				<label>Я соглашаюсь с <a href="forgot-password" >условиями использования и политикой конфиденциальности</a></label>
			</div>
			<button type="submit" className={`${styles['btn']}`}>Создать аккаунт</button>
		</form>
	)
}