Para los errores utilicé un estado “errorLogin” para mostrar el error y otro estado “loading” para mostrar un icono en el botón y desahabilitar al enviar el form
const [errorLogin, setErrorLogin] = useState(null);
const [loading, setLoading] = useState(false);
En el submit un catch y seteo el error y el estado de loading para mostrar un icono
const submitHandler = (event) => {
event.preventDefault();
const email = emailRef.current.value;
const password = passwordRef.current.value;
setErrorLogin(null);
setLoading(true);
auth
.signIn(email, password)
.then(() => {
route.push('/dashboard');
})
.catch(function (error) {
if (error.response?.status === 401) {
setErrorLogin('Usuario o password incorrecto.');
} else if (error.request) {
setErrorLogin('Tenemos un problema');
} else {
setErrorLogin('Algo salió mal.');
}
setLoading(false);
});
};
El si hay un error muestro el div con el mensaje
{errorLogin && (
<div class="p-3 mb-3 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" role="alert">
<span class="font-medium">Error!</span> {errorLogin}
</div>
)}
Si se envía el formulario muestro un icono dentro del button
{loading && (
<span class="flex absolute h-4 w-4 top-0 right-0 -mt-1 -mr-1">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-300 opacity-75"></span>
<span class="relative inline-flex rounded-full h-4 w-4 bg-indigo-400"></span>
</span>
)}
Y establezco disabled el button
disabled={loading}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.