index.ejs (clase-7) #20
Description
Dejo el template HTML faltante de la clase 7 para los formularios 😀
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formularios de login y registro</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.form-container {
display: flex;
flex-direction: column;
padding: 20px;
margin: 10px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
form h2 {
margin-bottom: 20px;
font-size: 24px;
text-align: center;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="container">
<% if (typeof username !== 'undefined') { %>
<div class="form-container">
<h2 style="margin: 0; text-align: center;">Hola, <%= username %>!</h2>
<p>Estas en el panel de administración</p>
<button id="close-session">Cerrar sesión</button>
</div>
<% } %>
<% if (typeof username === 'undefined') { %>
<div class="form-container">
<form id="login-form">
<h2>Login</h2>
<label for="login-username">Username</label>
<input id="login-username" name="username" required>
<label for="login-password">Password</label>
<input type="password" id="login-password" name="password" required>
<button type="submit">Login</button>
<span> </span>
</form>
</div>
<div class="form-container">
<form id="register-form">
<h2>Register</h2>
<label for="register-username">Username</label>
<input id="register-username" name="username" required>
<label for="register-password">Password</label>
<input type="password" id="register-password" name="password" required>
<label for="register-confirm-password">Confirm password</label>
<input type="password" id="register-confirm-password" name="password" required>
<button type="submit">Register</button>
<span> </span>
</form>
</div>
<% } %>
</div>
<script>
const $ = el => document.querySelector(el)
const $loginForm = $('#login-form')
const $loginSpan = $('#login-form span')
const $registerForm = $('#register-form')
const $registerSpan = $('#register-form span')
const $logoutButton = $('#close-session')
$loginForm?.addEventListener('submit', e => {
e.preventDefault()
const username = $('#login-username').value
const password = $('#login-password').value
fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
})
.then(res => {
if (res.ok) {
$loginSpan.innerText = 'Sesión iniciada. Entrando...'
$loginSpan.style.color = 'green'
setTimeout(() => {
window.location.href = '/protected'
}, 1500);
} else {
$loginSpan.innerText = 'Error al iniciar sesión'
$loginSpan.style.color = 'red'
}
})
})
$registerForm?.addEventListener('submit', e => {
e.preventDefault()
const username = $('#register-username').value
const password = $('#register-password').value
const confirmPassword = $('#register-confirm-password').value
if (password !== confirmPassword){
alert('Las contraseñas no coinciden')
return
}
fetch('/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, password })
})
.then(res => {
if (res.ok) {
$registerSpan.innerText = 'Usuario registrado. Entrando...'
$registerSpan.style.color = 'green'
setTimeout(() => {
window.location.href = '/protected'
}, 1500);
} else {
$registerSpan.innerText = 'Error al registrar usuario'
$registerSpan.style.color = 'red'
}
})
})
$logoutButton?.addEventListener('click', e => {
e.preventDefault()
fetch('/logout', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
console.log(res)
window.location.href = '/'
})
})
</script>
</body>
</html>Gracias por tanto Midu!