feat(ch 5): added login & list of books for SimpleBackendAPI

2025-11-10 02:13:05 +01:00 · 2025-03-25 16:58:15 +01:00
parent a2283cbce2
commit 2a060caea7
2 changed files with 120 additions and 0 deletions
--- a/Unidad_05_Javascript/AccesoSimpleBackenAPI/login.html
+++ b/Unidad_05_Javascript/AccesoSimpleBackenAPI/login.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+</head>
+<body>
+    <h2>Iniciar Sesión</h2>
+    <form id="loginForm">
+        <label for="username">Usuario:</label>
+        <input type="text" id="username" value="admin" required><br><br>
+
+        <label for="password">Contraseña:</label>
+        <input type="password" id="password" value="81dc9bdb52d04dc20036dbd8313ed055" required><br><br>
+
+        <button type="submit">Iniciar sesión</button>
+    </form>
+
+    <script>
+        document.getElementById("loginForm").addEventListener("submit", function(event) {
+            event.preventDefault(); // Evitar el envío tradicional del formulario
+
+            var xhr = new XMLHttpRequest();
+            xhr.open("POST", "http://localhost:8081/v1/users/authenticate/", true);
+            xhr.setRequestHeader("Content-Type", "application/json");
+
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState === 4) {
+                    if (xhr.status === 200) {
+                        var response = JSON.parse(xhr.responseText);
+
+                        if (response.jwt) { // Si el token no es nulo
+                            localStorage.setItem("jwt", response.jwt); // Guardar en localStorage
+                            console.log('jwt obtenido:' + localStorage.getItem("jwt"));
+                            window.location.href = "accesoBooks.html"; // Redirigir
+                        } else {
+                            alert("Error de autenticación.");
+                        }
+                    } else {
+                        alert("Error en la petición: " + xhr.status);
+                    }
+                }
+            };
+
+            // Obtener datos del formulario y enviarlos como JSON
+            var data = JSON.stringify({
+                username: document.getElementById("username").value,
+                encPassword: document.getElementById("password").value
+            });
+
+            xhr.send(data);
+        });
+    </script>
+</body>
+</html>