Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x | import React, {useState} from "react"
import './register.css';
import { Link } from "react-router-dom";
export const Register = (props) => {
const [email, setEmail] = useState('');
const [pass, setPass] = useState('');
const [name, setName] = useState('');
const [confirmPass, setConfirmPass] = useState('');
const [passwordsMatch, setPasswordsMatch] = useState(true);
const handleSubmit = (e) =>{
e.preventDefault();
if (!passwordsMatch) {
console.error("Passwords do not match");
return;
}
console.log(email);
}
const handleConfirmPassChange = (e) => {
const confirmPassword = e.target.value;
setConfirmPass(confirmPassword);
setPasswordsMatch(confirmPassword === pass);
}
return (
<div className="register">
<div className="auth-form-container">
<h2>Register</h2>
<form className="register-form" onSubmit={handleSubmit}>
<label htmlFor="name">User Name</label>
<input value={name} onChange={(e) => setName(e.target.value)} type="name" id="name" placeholder="User Name" />
<label htmlFor="email">Email</label>
<input value={email} onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Your Email" id="email" name="email" />
<label htmlFor="password">Password</label>
<input value={pass} onChange={(e) => setPass(e.target.value)} type="password" placeholder="********" id="password" name="password" />
<label htmlFor="confirmPassword">Confirm Password</label>
<input value={confirmPass} onChange={handleConfirmPassChange} type="password" placeholder="********" id="confirmPassword" name="confirmPassword"/>
{!passwordsMatch && <p style={{ color: 'red' }}>Passwords do not match</p>}
<button className="login-btn" type="submit">Sign up</button>
</form>
<Link to="/login">
<button className="link-btn">Already have an account? Login here.</button>
</Link>
</div>
</div>
)
} |