From 2a060caea738da2cbda0b2a825473b85839a3aa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=20Mu=C3=B1oz?= <rafael.munoz77@gmail.com>
Date: Tue, 25 Mar 2025 16:58:15 +0100
Subject: [PATCH] feat(ch 5): added login & list of books for SimpleBackendAPI

---
 .../AccesoSimpleBackenAPI/accesoBooks.html    | 64 +++++++++++++++++++
 .../AccesoSimpleBackenAPI/login.html          | 56 ++++++++++++++++
 2 files changed, 120 insertions(+)
 create mode 100644 Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoBooks.html
 create mode 100644 Unidad_05_Javascript/AccesoSimpleBackenAPI/login.html
diff --git a/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoBooks.html b/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoBooks.html
new file mode 100644
index 0000000..1fa433f
--- /dev/null
+++ b/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoBooks.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        function loadBooks() {
+            let booksTable = document.getElementById("booksTable");
+
+            const xhttp = new XMLHttpRequest();
+            xhttp.onload = function () {
+
+                if (xhttp.readyState === 4) { // 4 = La solicitud ha sido completada
+                    if (xhttp.status === 200 || xhttp.status === 201) {
+                        let strResponse = xhttp.responseText;
+                        console.log("Datos recibidos: " + strResponse);
+                        let jsonResponse = JSON.parse(strResponse);
+                        let responseArray = jsonResponse.content;
+                        console.log("Datos parseados: " + responseArray);
+                        for (let i = 0; i < responseArray.length; i++) {
+                            let book = responseArray[i];
+                            console.log("Book: " + book.id + " - "
+                                + book.titulo);
+                                booksTable.innerHTML += '<tr>' +
+                                '<td>' + book.id + '</td>' +
+                                '<td>' + book.titulo + '</td>' +
+                                '<td>' + book.autor + '</td>' +
+                                '<td>' + book.genero.nombre + '</td>' +
+                                '</tr>'
+                        }
+                    }
+                    else {
+                        console.log('Error al obtener la petición xhr.status: ' + xhttp.status);
+                    }
+                }
+            }
+
+            // Send a request
+            xhttp.open("GET", "http://localhost:8081/v1/books?page=0&size=1000&fieldOrder=titulo&orderType=asc");
+            xhttp.setRequestHeader("accept","application/json");
+            xhttp.setRequestHeader("Content-Type","application/json");
+            console.log("jwt recuperado de localStorage: " + localStorage.getItem("jwt"));
+            xhttp.setRequestHeader("Authorization", localStorage.getItem("jwt"));
+            xhttp.send();
+        }
+
+    </script>
+</head>
+
+<body body onload="loadBooks()">
+
+</body>
+<table id="booksTable" border="1" width="100%">
+    <tr>
+        <th>Id</th>
+        <th>Título</th>
+        <th>Autor</th>
+        <th>Género</th>
+    </tr>
+</table>
+
+</html>
\ No newline at end of file
diff --git a/Unidad_05_Javascript/AccesoSimpleBackenAPI/login.html b/Unidad_05_Javascript/AccesoSimpleBackenAPI/login.html
new file mode 100644
index 0000000..ad37f51
--- /dev/null
+++ 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>
