Inicio de sesión
Iniciar sesión
CSS (en archivo styles.css)
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 50%;
margin: 2em auto;
padding: 2em;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
form {
margin-top: 2em;
}
label {
display: block;
margin-bottom: 0.5em;
}
input[type="text"], input[type="password"] {
width: 100%;
height: 2em;
margin-bottom: 1em;
padding: 0.5em;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100%;
height: 2em;
background-color: #4CAF50;
color: #fff;
padding: 0.5em;
border: none;
border-radius: 0.5em;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #3e8e41;
}
JavaScript (en archivo script.js)
const formularioInicioSesion = document.getElementById('formulario-inicio-sesion');
formularioInicioSesion.addEventListener('submit', (e) => {
e.preventDefault();
const nombre = document.getElementById('nombre').value;
const contraseña = document.getElementById('contraseña').value;
// Enviar solicitud de inicio de sesión al servidor
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ nombre, contraseña })
})
.then((response) => response.json())
.then((data) => {
if (data.token) {
// Redirigir a la página de administración
window.location.href = '/admin';
} else {
alert('Usuario o contraseña incorrecta');
}
})
.catch((error) => console.error(error));
});
