0
201
VisualizaçõesCómo poner un mensaje de error al poner las credenciales incorrectas en un inicio de sesión
Estoy haciendo un inicio de sesión, y necesito que cuando ingrese la contraseña incorrecta o el correo electrónico me salga un mensaje de error pero no sé cómo hacerlo, estoy trabajando con el método POST y también en nextjs
este es mi código:
function Login({}) { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); useEffect(() => { if (localStorage.getItem("user-info")) { } }, []); async function login() { console.warn(email, password); let item = { email, password }; let result = await fetch( "https://login-test.repl.co/auth/login", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify(item), } ); result = await result.json(); localStorage.setItem("user-info", JSON.stringify(result)); } return ( <div className="bg-white w-full rounded-lg shadow p-2 h-screen flex justify-center items-center relative"> <div className="w-full "> <input id="inputEmail" onChange={(e) => setEmail(e.target.value)} type="email" /> <input id="inputPassword" onChange={(e) => setPassword(e.target.value)} type="password" /> <button type="submit" onClick={login}> Login </button> <div className={`${!error ? "hidden" : ""}`}> INCORRECT PASSWORD OR EMAIL </div> </div> </div> ); } export default Login;cuando pongo la contraseña equivocada o el correo me manda esto:
·
Santiago Gelvez
2 Respostas
Responde à pergunta0
puedes comprobar asi
function Login({}) { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(null); useEffect(() => { if (localStorage.getItem("user-info")) { } }, []); async function login() { setError(false); console.warn(email, password); let item = { email, password }; try { let result = await fetch( "https://login-test.repl.co/auth/login", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify(item), } ); result = await result.json(); localStorage.setItem("user-info", JSON.stringify(result)); } catch(error) { setError(true); } } return ( <div className="bg-white w-full rounded-lg shadow p-2 h-screen flex justify-center items-center relative"> <div className="w-full "> <input id="inputEmail" onChange={(e) => setEmail(e.target.value)} type="email" /> <input id="inputPassword" onChange={(e) => setPassword(e.target.value)} type="password" /> <button type="submit" onClick={login}> Login </button> <div className={`${!error ? "hidden" : ""}`}> INCORRECT PASSWORD OR EMAIL </div> </div> </div> ); } export default Login;
·
Santiago Gelvez
Relatório
0
Puede lograr esto comprobando el código de estado.
Si obtiene el estado 200, puede actualizar el estado de la siguiente manera:
if(result.status === 200) { setEmail("Email Already Exists"); }Puede obtener más códigos de estado y puede configurar los errores como desee.
·
Santiago Gelvez
Relatório
Responde à pergunta