66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { TextInput, PasswordInput, Button, Paper, Title, Container, Group, Alert } from '@mantine/core';
|
|
import { User, Lock } from 'phosphor-react'; // ← Importa los iconos Phosphor
|
|
|
|
export function LoginPage() {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError('');
|
|
// Aquí deberías llamar a tu endpoint de login (ajusta la URL y payload)
|
|
try {
|
|
const res = await fetch('/api/v1/usuarios/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password })
|
|
});
|
|
if (!res.ok) throw new Error('Credenciales incorrectas');
|
|
// Aquí puedes guardar el usuario/token en el estado global o localStorage
|
|
window.location.href = '/';
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Container size={420} my={40}>
|
|
<Title align="center" mb={20}>Iniciar sesión</Title>
|
|
<Paper withBorder shadow="md" p={30} mt={30} radius="md">
|
|
<form onSubmit={handleSubmit}>
|
|
<TextInput
|
|
label="Email"
|
|
placeholder="tucorreo@ejemplo.com"
|
|
icon={<User size={18} />} // ← Usa el icono Phosphor aquí
|
|
value={email}
|
|
onChange={e => setEmail(e.target.value)}
|
|
required
|
|
mb={10}
|
|
/>
|
|
<PasswordInput
|
|
label="Contraseña"
|
|
placeholder="Tu contraseña"
|
|
icon={<Lock size={18} />} // ← Usa el icono Phosphor aquí
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
required
|
|
mb={20}
|
|
/>
|
|
{error && <Alert color="red" mb={10}>{error}</Alert>}
|
|
<Group mt="md">
|
|
<Button type="submit" loading={loading} fullWidth>
|
|
Entrar
|
|
</Button>
|
|
</Group>
|
|
</form>
|
|
</Paper>
|
|
</Container>
|
|
);
|
|
}
|