Untitled

import { useState, useRef } from "react";
import './Styles/SignUp.css'
function SignUp() {

    // user properties
    const [firstName , setFirstName] = useState('');
    const [laststName , setLastName] = useState('');
    const [email , setEmail] = useState('');
    const [password , setPassword] = useState('');
    const [secondPassword , setSecondPassword] = useState('');
    const [registrationStatus, setRegistrationStatus] = useState('');

    // error
    const [passwordError, setPasswordError] = useState(false);
    const [secondPasswordError, setSecondPasswordError] = useState(false);

    // Refs to store references to input elements
    const firstNameRef = useRef(null);
    const lastNameRef = useRef(null);
    const emailRef = useRef(null);
    const passwordRef = useRef(null);
    const secondPasswordRef = useRef(null);

    function handleSubmit(e)
    {
        e.preventDefault();

        // searching for empty fields
        const fields = [firstName, laststName, email, password, secondPassword];
        const fieldRefs = [firstNameRef, lastNameRef, emailRef, passwordRef, secondPasswordRef];

        let hasEmptyField = false;

        fields.forEach((field, index) => {
            if( field === '' ) // if field is empty
            {
                const inputRef = fieldRefs[index];
                
                if (inputRef.current) 
                {
                    inputRef.current.classList.add('field-error');
                    hasEmptyField = true;
                }
            }
        });
        
        // if there were empty fields
        if(hasEmptyField) return;
        
        // if passwords don't match
        if(password !== secondPassword)
        {
            // display the error message
            setRegistrationStatus("Passwords don't match");
            
            // add styles to indicate where is the problem
            setPasswordError(true);
            setSecondPasswordError(true);


            // hide the error after 5 seconds
            setTimeout( () => {
                setRegistrationStatus('');
            }, 5000);

            return;
        }

        const userData = {
            firstName,
            laststName,
            email,
            password,
        };

        // Convert the userData object to a JSON string
        const userDataString = JSON.stringify(userData);
        console.log(userDataString);

        // to create a unique key
        const uniqueKey = `userData_${email}`;
        localStorage.setItem(uniqueKey, userDataString);

        // Save the JSON string in localStorage
        localStorage.setItem(uniqueKey, userDataString);

    }

    return (
      <div className="container">
        
        {/* error displayer */}
        <div className="registrationStatus-container">
            <p id="registrationStatus">{registrationStatus}check</p>
        </div>

        <form className="signup-form" onSubmit={handleSubmit}>
            {/* first name */}
            <label htmlFor="first-name">First name:</label>
            <input type="text" id="first-name" ref={firstNameRef} value={firstName} 
                onChange={e => setFirstName(e.target.value)} />
            
            {/* last name */}
            <label htmlFor="last-name">last name:</label>
            <input type="text" id="last-name" ref={lastNameRef} value={laststName} 
                onChange={e => setLastName(e.target.value)}/>
            
            {/* email */}
            <label htmlFor="email">Email:</label>
            <input type="email" id="email" ref={emailRef} value={email} 
                onChange={e => setEmail(e.target.value)}/>

            <div className="form-passwords-container">
                {/* password */}
                <label htmlFor="password">Password:</label>
                <input type="text" className={passwordError ? 'field-error':''} 
                    id="password" ref={passwordRef} value={password} 
                    onChange={e => setPassword(e.target.value)}/>

                {/* second password */}
                <label htmlFor="secondPassword">Password again:</label>
                <input type="text" className={secondPasswordError ? 'field-error':''} 
                    id="secondPassword" ref={secondPasswordRef} value={secondPassword} 
                    onChange={e => setSecondPassword(e.target.value)}/>
            </div>
            
            {/* submit button */}
            <button type="submit">Sign up</button>
        </form> 
    
      </div>
    )
}
  
  export default SignUp