KnowledgeBase_frontend/src/pages/auth/Signup.jsx

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';
import { checkAuthThunk, signupThunk } from '../../store/auth/auth.thunk';

export default function Signup() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const [username, setUsername] = useState('');
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errors, setErrors] = useState({});
    const [submitted, setSubmitted] = useState(false);

    const { user } = useSelector((state) => state.auth);

    useEffect(() => {
        handleCheckAuth();
    }, [dispatch]);

    const handleCheckAuth = async () => {
        console.log('signup page handleCheckAuth');
        await dispatch(checkAuthThunk()).unwrap();
        if (user) navigate('/');
    };

    const validateForm = () => {
        const newErrors = {};
        if (!username) {
            newErrors.username = 'Username is required';
        }

        if (!email) {
            newErrors.email = 'Email is required';
        } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
            newErrors.email = 'Invalid email address';
        }
        
        if (!password) {
            newErrors.password = 'Password is required';
        } else if (password.length < 6) {
            newErrors.password = 'Password must be at least 6 characters';
        }
        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        setSubmitted(true);
        console.log(validateForm());

        if (validateForm()) {
            console.log('Form submitted successfully!');
            console.log('Username:', username);
            console.log('Email:', email);
            console.log('Password:', password);

            dispatch(signupThunk({ username, password, email }));
        }
    };

    return (
        <div className='position-absolute top-50 start-50 translate-middle d-flex flex-column gap-4 align-items-center'>
            <div className='title text-center h1'>OOIN 智能知识库</div>
            <form
                className='auth-form login-form d-flex flex-column gap-3 align-items-center'
                onSubmit={handleSubmit}
                noValidate
            >
                <div className='input-group has-validation'>
                    <input
                        type='text'
                        className={`form-control form-control-lg${submitted && errors.username ? ' is-invalid' : ''}`}
                        id='username'
                        placeholder='Username'
                        required
                        onChange={(e) => setUsername(e.target.value.trim())}
                    ></input>
                    {submitted && errors.username && <div className='invalid-feedback'>{errors.username}</div>}
                </div>
                <div className='input-group has-validation'>
                    <input
                        type='email'
                        className={`form-control form-control-lg${submitted && errors.email ? ' is-invalid' : ''}`}
                        id='email'
                        placeholder='Email'
                        required
                        onChange={(e) => setEmail(e.target.value.trim())}
                    ></input>
                    {submitted && errors.email && <div className='invalid-feedback'>{errors.email}</div>}
                </div>
                <div className='input-group has-validation'>
                    <input
                        type='password'
                        id='password'
                        placeholder='Password'
                        required
                        className={`form-control form-control-lg${submitted && errors.password ? ' is-invalid' : ''}`}
                        aria-describedby='passwordHelpBlock'
                        onChange={(e) => setPassword(e.target.value.trim())}
                    ></input>
                    {submitted && errors.password && <div className='invalid-feedback'>{errors.password}</div>}
                </div>
                <button type='submit' className='btn btn-dark btn-lg w-100'>
                    Sign Up
                </button>
            </form>
            <Link to='/login' className='go-to-signup w-100 link-underline-light h5 text-center'>
                Already have account?
            </Link>
        </div>
    );
}