Untitled

'use client';

import { useState } from 'react';
import axios from 'axios';
import './component/style.css';

export default function RegisterPage() {
    const [formState, setFormState] = useState({
        email: '',
        password: '',
        confirmPassword: '',
        isAccepted: false,
        notificationMessage: '',
    });
    const [errors, setErrors] = useState({
        emailError: '',
        passwordError: '',
        confirmPasswordError: '',
    });

    const validateEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) ? '' : 'Invalid email address.';

    const validatePassword = (password: string) => password ? '' : 'Password is required.';

    const validateConfirmPassword = (password: string, confirmPassword: string) => password === confirmPassword ? '' : 'Passwords do not match.';

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();

        const emailError = validateEmail(formState.email);
        const passwordError = validatePassword(formState.password);
        const confirmPasswordError = validateConfirmPassword(formState.password, formState.confirmPassword);

        setErrors({ emailError, passwordError, confirmPasswordError });

        if (emailError || passwordError || confirmPasswordError) {
            setFormState((prev) => ({ ...prev, notificationMessage: 'Please correct the errors above.' }));
            return;
        }
        if (!formState.isAccepted) {
            setFormState((prev) => ({ ...prev, notificationMessage: 'You must accept the privacy policy.' }));
            return;
        }

        try {
            const response = await axios.post('/api/auth/register', {
                email: formState.email,
                password: formState.password,
            });
            setFormState((prev) => ({ ...prev, notificationMessage: response.data.message }));
        } catch (error) {
            setFormState((prev) => ({ ...prev, notificationMessage: 'Registration failed. Please try again.' }));
        }
    };

    return (
        <div className="main">
            <div className="left-pane">
                <img src="/img/loginregistter.png" alt="Register Image" className="bottom-image" />
            </div>

            <div className="right-pane">
                <img src="/img/ovoticimg.svg" alt="Logo" className="logo" />
                <h1 className="title">Register</h1>
                <p className="sub-title">Create a new account</p>

                <form onSubmit={handleSubmit}>
                    <div className="form-group">
                        <label className="form-label">Email</label>
                        <input
                            type="email"
                            className={`form-input ${errors.emailError ? 'error' : (formState.email && !errors.emailError ? 'valid' : '')}`}
                            placeholder="Enter your Email"
                            value={formState.email}
                            onChange={(e) => setFormState({ ...formState, email: e.target.value })}
                            onBlur={() => setErrors((prev) => ({
                                ...prev,
                                emailError: validateEmail(formState.email)
                            }))}
                        />
                        {errors.emailError && <p className="error-message">{errors.emailError}</p>}
                    </div>

                    <div className="form-group">
                        <label className="form-label">Password</label>
                        <input
                            type="password"
                            className={`form-input ${errors.passwordError ? 'error' : (formState.password && !errors.passwordError ? 'valid' : '')}`}
                            placeholder="Enter your Password"
                            value={formState.password}
                            onChange={(e) => setFormState({ ...formState, password: e.target.value })}
                            onBlur={() => setErrors((prev) => ({
                                ...prev,
                                passwordError: validatePassword(formState.password)
                            }))}
                        />
                        {errors.passwordError && <p className="error-message">{errors.passwordError}</p>}
                    </div>

                    <div className="form-group">
                        <label className="form-label">Confirm Password</label>
                        <input
                            type="password"
                            className={`form-input ${errors.confirmPasswordError ? 'error' : (formState.confirmPassword && !errors.confirmPasswordError ? 'valid' : '')}`}
                            placeholder="Confirm your Password"
                            value={formState.confirmPassword}
                            onChange={(e) => setFormState({ ...formState, confirmPassword: e.target.value })}
                            onBlur={() => setErrors((prev) => ({
                                ...prev,
                                confirmPasswordError: validateConfirmPassword(formState.password, formState.confirmPassword)
                            }))}
                        />
                        {errors.confirmPasswordError && <p className="error-message">{errors.confirmPasswordError}</p>}
                    </div>

                    <div className="form-group">
                        <div className="checkbox-container">
                            <input
                                type="checkbox"
                                className="form-checkbox"
                                checked={formState.isAccepted}
                                onChange={(e) => setFormState({ ...formState, isAccepted: e.target.checked })}
                            />
                            <label className="form-checkbox-label">
                                I accept the <a href="#" className="privacy-policy-link">privacy policy</a>.
                            </label>
                        </div>
                    </div>

                    <div className="button-container">
                        <button type="submit" className="register-button">Register</button>
                    </div>

                    {formState.notificationMessage && (
                        <div className={`notification ${formState.notificationMessage ? 'show' : ''}`}>
                            {formState.notificationMessage}
                        </div>
                    )}
                </form>
            </div>
        </div>
    );
}