Untitled
unknown
plain_text
a year ago
4.7 kB
4
Indexable
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
Editor is loading...
Leave a Comment