97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
import { useState } from 'react';
|
|
import { useUsuario } from '../services/useUsuario';
|
|
|
|
const Login = ({setUsuario}:any) => {
|
|
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
setUsuario(
|
|
{
|
|
id: 1,
|
|
name: "Juan Pepe",
|
|
username: "jpepe",
|
|
email: "",
|
|
permissionLevel: ["ADMIN"],
|
|
}
|
|
);
|
|
} catch (error) {
|
|
} finally {
|
|
//simulamos latencia
|
|
setTimeout(()=>setLoading(false), 1000)
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-md w-full space-y-8">
|
|
<div>
|
|
<h2 className="mt-6 text-center text-3xl font-extrabold ">
|
|
Iniciar sesión
|
|
</h2>
|
|
</div>
|
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
|
<div className="rounded-md shadow-sm -space-y-px">
|
|
<div>
|
|
<label htmlFor="email-address" className="sr-only">
|
|
Correo electrónico
|
|
</label>
|
|
<input
|
|
id="email-address"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
|
placeholder="Correo electrónico"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="sr-only">
|
|
Contraseña
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
|
|
placeholder="Contraseña"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className={`group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white ${
|
|
loading ? 'bg-indigo-400' : 'bg-indigo-600 hover:bg-indigo-700'
|
|
} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`}
|
|
>
|
|
{loading ? (
|
|
<span>Enviando...</span>
|
|
) : (
|
|
<span>Iniciar sesión</span>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|