77 lines
2.4 KiB
JavaScript
77 lines
2.4 KiB
JavaScript
import { useState } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
|
|
export default function Login() {
|
|
const [username, setUsername] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const router = useRouter();
|
|
|
|
const handleLogin = async (e) => {
|
|
e.preventDefault();
|
|
try {
|
|
const res = await fetch('http://localhost:9002/posts/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (res.ok) {
|
|
localStorage.setItem('blog_token', data.token);
|
|
router.push('/admin');
|
|
} else {
|
|
alert('Credenciales incorrectas');
|
|
}
|
|
} catch (err) {
|
|
alert('Error de conexión');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{
|
|
height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center',
|
|
backgroundColor: '#f8fafc', fontFamily: 'sans-serif'
|
|
}}>
|
|
<form onSubmit={handleLogin} style={{
|
|
backgroundColor: 'white', padding: '50px', borderRadius: '20px',
|
|
border: '1px solid #e2e8f0', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)',
|
|
width: '100%', maxWidth: '400px'
|
|
}}>
|
|
<h2 style={{ textAlign: 'center', marginBottom: '30px', color: '#0f172a', marginTop: 0 }}>
|
|
Admin Login 🔐
|
|
</h2>
|
|
|
|
<input
|
|
placeholder="Usuario"
|
|
value={username}
|
|
onChange={e => setUsername(e.target.value)}
|
|
style={{
|
|
width: '100%', padding: '14px', border: '2px solid #e2e8f0',
|
|
borderRadius: '10px', marginBottom: '20px', fontSize: '1rem',
|
|
boxSizing: 'border-box', outline: 'none'
|
|
}}
|
|
/>
|
|
|
|
<input
|
|
type="password"
|
|
placeholder="Contraseña"
|
|
value={password}
|
|
onChange={e => setPassword(e.target.value)}
|
|
style={{
|
|
width: '100%', padding: '14px', border: '2px solid #e2e8f0',
|
|
borderRadius: '10px', marginBottom: '30px', fontSize: '1rem',
|
|
boxSizing: 'border-box', outline: 'none'
|
|
}}
|
|
/>
|
|
|
|
<button style={{
|
|
width: '100%', padding: '16px', backgroundColor: '#2563eb', color: 'white',
|
|
border: 'none', borderRadius: '10px', fontWeight: '800', fontSize: '1rem',
|
|
cursor: 'pointer'
|
|
}}>
|
|
Entrar al Sistema
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
} |