h4ckx0r/LMSGI-2024-25
1
0
Fork 0
mirror of https://gitlab.com/tutorial-java-rafa-munoz/tutorial-java-2024-25/LMSGI-2024-25.git synced 2025-11-09 18:03:06 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rafa Muñoz
2025-03-25 16:58:15 +01:00
parent a2283cbce2
commit 2a060caea7
2 changed files with 120 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoBooks.html Normal file
View File

@@ -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>

56
Unidad_05_Javascript/AccesoSimpleBackenAPI/login.html Normal file
View File

@@ -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>