Untitled
plain_text
2 months ago
4.7 kB
5
Indexable
Never
import React from "react"; import { useNavigate } from "react-router-dom"; import { useState } from "react"; export default function SignUp() { const [email, setEmail] = useState(""); const [emailError, setEmailError] = useState(false); const handleEmailChange = (event) => { setEmail(event.target.value); }; const validateEmail = () => { const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/; if (!emailRegex.test(email)) { setEmailError("Por favor, insira um e-mail válido"); } else { setEmailError(""); } }; const navigate = useNavigate(); const handleSignUp = async (event) => { event.preventDefault(); const name = document.getElementById("name").value; const email = document.getElementById("email").value; const password = document.getElementById("password").value; const confirmPassword = document.getElementById("confirmPassword").value; if (!name || !email || !password) { return alert("Preencha todos os campos"); } if (password !== confirmPassword) { return alert("As senhas não coincidem"); } if (emailError) { return; } const values = { nome: name, email, senha: password, }; const response = await fetch(`http://localhost:${process.env.PORT}/users`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(values), }); if (response.status === 201) { navigate("/login"); } if (response.status === 400) { return alert("Email já cadastrado"); } }; return ( <div className="flex h-full w-full flex-1 items-center flex-col justify-center px-6 py-12 lg:px-8 text-white"> <div className="rounded-xl bg-primary-500 px-40 py-8 my-16"> <div className="flex flex-col items-center justify-center sm:mx-auto sm:w-full sm:max-w-sm"> <img className="mt-8 w-80" src="./mediatracker.svg" alt="mediatracker's logo" ></img> <h2 className="mt-24 text-center text-4xl font-bold leading-9 tracking-tight"> Create your account </h2> </div> <form className="space-y-6 mt-16" action="#"> <input id="name" maxLength={20} name="text" type="email" autoComplete="email" required placeholder="Name" className="block w-full rounded-xl border-0 py-5 px-4 text-white text-lg outline-none shadow-sm bg-primary-700" /> <input id="email" name="email" type="email" autoComplete="email" required placeholder="E-mail" className="block w-full rounded-xl border-0 py-5 px-4 text-white text-lg outline-none shadow-sm bg-primary-700" onChange={handleEmailChange} onBlur={validateEmail} /> {emailError && <p className="text-red-500 text-s">{emailError}</p>} <input id="password" name="password" type="password" autoComplete="current-password" required placeholder="Password" className="block w-full rounded-xl border-0 py-5 px-4 text-white text-lg outline-none shadow-sm bg-primary-700" /> <input id="confirmPassword" name="confirmPassword" type="password" autoComplete="current-confirm-password" required placeholder="Confirm Password" className="block w-full rounded-xl border-0 py-5 px-4 text-white text-lg outline-none shadow-sm bg-primary-700" /> <div> <button type="submit" className="flex w-full text-center justify-center rounded-xl bg-primary-300 px-3 py-4 text-2xl font-semibold leading-6 text-white shadow-sm transition hover:brightness-105" onClick={handleSignUp} > Sign in </button> </div> <p className="mt-6 text-center text-xl text-white opacity-30"> Already have an account?{" "} <span className="underline" onClick={() => navigate("/login")} style={{ cursor: "pointer" }} > Login </span> </p> </form> </div> </div> ); }