diff --git a/cabecera.php b/cabecera.php index 12a68a4..61f8133 100644 --- a/cabecera.php +++ b/cabecera.php @@ -21,9 +21,8 @@ @@ -49,11 +48,6 @@ -
- - -
-
@@ -93,7 +87,14 @@ - + + +
+ + +
diff --git a/index.php b/index.php index ff01c2e..8eaed56 100644 --- a/index.php +++ b/index.php @@ -1,7 +1,3 @@ - - @@ -9,16 +5,17 @@ include 'cabecera.php'; Triviagmático - + +
- +
diff --git a/js/cabecera.js b/js/cabecera.js index f046a1c..b61a631 100644 --- a/js/cabecera.js +++ b/js/cabecera.js @@ -1,275 +1,216 @@ $(document).ready(function () { - comprobarSesion(); + // Comprobar la sesión activa al cargar la página + comprobarEstadoSesion(); + + // Evento Click: Login + $('#botonAceptarLogin').on('click', function () { + ejecutarLogin(); + }); + + // Permitir Submit con tecla Enter en el formulario de Login + $('#formLogin').on('submit', function (e) { + e.preventDefault(); + ejecutarLogin(); + }); + + // Evento Click: Registro + $('#botonAceptarRegistro').on('click', function () { + ejecutarRegistro(); + }); + + // Permitir Submit con tecla Enter en el formulario de Registro + $('#formRegistro').on('submit', function (e) { + e.preventDefault(); + ejecutarRegistro(); + }); }); -// Función auxiliar para escapar texto HTML y evitar XSS -function escapeHTML(str) { - return $("
").text(str ?? "").html(); +/** + * Comprueba con el servidor si existe una sesión PHP activa. + */ +function comprobarEstadoSesion() { + $.ajax({ + url: 'controladores/controladorUsuario.php', + type: 'POST', + dataType: 'json', + data: { orden: 'comprobarSesion' }, + success: function (respuesta) { + if (respuesta.activa) { + renderizarCabeceraConSesion(respuesta.usuario); + // Si existe el contenedor del botón Jugar en index, lo mostramos + $('#colBotonJugar').removeClass('d-none'); + } else { + renderizarCabeceraSinSesion(); + $('#colBotonJugar').addClass('d-none'); + } + }, + error: function () { + renderizarCabeceraSinSesion(); + } + }); } -// Comprobar estado de sesión al cargar la página -function comprobarSesion() { - $.ajax({ - method: "POST", - url: "controladores/controladorUsuario.php", - data: { orden: "comprobarSesion" }, - }).done(function (respuesta) { - try { - if (typeof respuesta === "string") { - respuesta = JSON.parse(respuesta); - } +/** + * Petición AJAX para iniciar sesión + */ +function ejecutarLogin() { + let email = $('#loginEmail').val().trim(); + let contrasena = $('#loginPassword').val().trim(); + $('#errorLogin').text(''); - const contenedor = $("#contenedorUsuarioCabecera"); - contenedor.empty(); + if (email === '' || contrasena === '') { + $('#errorLogin').text('Por favor, rellena todos los campos.'); + return; + } - if (respuesta.activa && respuesta.usuario) { - // Usuario autenticado: Mostrar Menú Dropdown - const htmlUsuario = ` -
- -
- `; - contenedor.html(htmlUsuario); - - // Si estamos en la página principal, mostramos el botón JUGAR - if ($("#colBotonJugar").length) { - $("#colBotonJugar").removeClass("d-none"); - $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8"); - } - - } else { - // No hay sesión: Mostrar botones de Login y Registro - const htmlInvitado = ` - - - `; - contenedor.html(htmlInvitado); - - // Si estamos en la página principal, ocultamos el botón JUGAR - if ($("#colBotonJugar").length) { - $("#colBotonJugar").addClass("d-none"); - $("#colRanking").removeClass("col-lg-7 col-xl-8").addClass("col-lg-8"); - } - } - } catch (e) { - console.error("Error al procesar la respuesta de la sesión:", e); - } - }); +
+ `; + $('#contenedorUsuarioCabecera').html(html); } -// Evento Registro -$("#botonAceptarRegistro").click(function (event) { - event.preventDefault(); +/** + * Renderiza los botones originales: + * - "Iniciar Sesión" (Rojo -> btn-danger) + * - "Registrarse" (Verde -> btn-success) + */ +function renderizarCabeceraSinSesion() { + let html = ` + + + `; + $('#contenedorUsuarioCabecera').html(html); +} - let nombreUsuario = $("#regNombre").val().trim(); - let email = $("#regEmail").val().trim(); - let contrasena = $("#regPassword").val(); - let contrasenaConfirmacion = $("#regPasswordConfirm").val(); - - $("#regNombre").removeClass("is-invalid"); - $("#regEmail").removeClass("is-invalid"); - $("#regPassword").removeClass("is-invalid"); - $("#regPasswordConfirm").removeClass("is-invalid"); - $("#errorRegistro").text(""); - - if (contrasena !== contrasenaConfirmacion) { - $("#regPassword").addClass("is-invalid"); - $("#regPasswordConfirm").addClass("is-invalid"); - $("#errorRegistro").text("Las contraseñas no coinciden."); - return; - } - - $.ajax({ - method: "POST", - url: "controladores/controladorUsuario.php", - data: { - nombreUsuario: nombreUsuario, - email: email, - contrasena: contrasena, - orden: "registrarUsuario", - }, - }).done(function (respuesta) { - if (typeof respuesta === "string") respuesta = JSON.parse(respuesta); - - if (respuesta.error) { - $("#errorRegistro").text(respuesta.error); - $("#regNombre").addClass("is-invalid"); - $("#regEmail").addClass("is-invalid"); - } else { - $("#errorRegistro") - .removeClass("text-danger") - .addClass("text-success") - .text(respuesta.exito); - - $("#formRegistro")[0].reset(); - - setTimeout(function () { - location.reload(); - }, 1000); - } - }); -}); - -// Evento Login -$("#botonAceptarLogin").click(function (event) { - event.preventDefault(); - - let email = $("#loginEmail").val().trim(); - let contrasena = $("#loginPassword").val(); - - $("#loginEmail").removeClass("is-invalid"); - $("#loginPassword").removeClass("is-invalid"); - $("#errorLogin").text(""); - - if (email === "" || contrasena === "") { - $("#errorLogin").text("Todos los campos son obligatorios."); - if (email === "") $("#loginEmail").addClass("is-invalid"); - if (contrasena === "") $("#loginPassword").addClass("is-invalid"); - return; - } - - $.ajax({ - method: "POST", - url: "controladores/controladorUsuario.php", - data: { - email: email, - contrasena: contrasena, - orden: "comprobarUsuario", - }, - }).done(function (respuesta) { - if (typeof respuesta === "string") respuesta = JSON.parse(respuesta); - - if (respuesta.error) { - $("#loginEmail").addClass("is-invalid"); - $("#loginPassword").addClass("is-invalid"); - $("#errorLogin").text(respuesta.error); - } else { - location.reload(); - } - }); -}); - -// Evento Cerrar sesión (usa delegación de eventos por crearse dinámicamente) -$(document).on("click", "#botonCerrarSesion", function (event) { - event.preventDefault(); - - $.ajax({ - method: "POST", - url: "controladores/controladorUsuario.php", - data: { orden: "cerrarSesion" }, - }).done(function (respuesta) { - if (typeof respuesta === "string") respuesta = JSON.parse(respuesta); - - if (respuesta.error) { - console.log(respuesta.error); - } else { - window.location.href = "index.php"; - } - }); -}); - -// Registro -$("#botonAceptarRegistro").click(function (event) { - event.preventDefault(); - let nombreUsuario = $("#regNombre").val().trim(); - let email = $("#regEmail").val().trim(); - let contrasena = $("#regPassword").val(); - let contrasenaConfirmacion = $("#regPasswordConfirm").val(); - - $("#regNombre").removeClass("is-invalid"); - $("#regEmail").removeClass("is-invalid"); - $("#regPassword").removeClass("is-invalid"); - $("#regPasswordConfirm").removeClass("is-invalid"); - $("#errorRegistro").text(""); - - if (contrasena !== contrasenaConfirmacion) { - $("#regPassword").addClass("is-invalid"); - $("#regPasswordConfirm").addClass("is-invalid"); - $("#errorRegistro").text("Las contraseñas no coinciden."); - return; - } - - $.ajax({ - method: "POST", - url: "controladores/controladorUsuario.php", - data: { - nombreUsuario: nombreUsuario, - email: email, - contrasena: contrasena, - orden: "registrarUsuario", - }, - }).done(function (respuesta) { - if (typeof respuesta === "string") respuesta = JSON.parse(respuesta); - - if (respuesta.error) { - $("#errorRegistro").text(respuesta.error); - $("#regNombre").addClass("is-invalid"); - $("#regEmail").addClass("is-invalid"); - } else { - $("#errorRegistro") - .removeClass("text-danger") - .addClass("text-success") - .text(respuesta.exito); - - $("#formRegistro")[0].reset(); - - setTimeout(function () { - location.reload(); - }, 1000); - } - }); -}); - -// Login -$("#botonAceptarLogin").click(function (event) { - event.preventDefault(); - - let email = $("#loginEmail").val().trim(); - let contrasena = $("#loginPassword").val(); - - $("#loginEmail").removeClass("is-invalid"); - $("#loginPassword").removeClass("is-invalid"); - $("#errorLogin").text(""); - - if (email === "" || contrasena === "") { - $("#errorLogin").text("Todos los campos son obligatorios."); - if (email === "") $("#loginEmail").addClass("is-invalid"); - if (contrasena === "") $("#loginPassword").addClass("is-invalid"); - return; - } - - $.ajax({ - method: "POST", - url: "controladores/controladorUsuario.php", - data: { orden: "cerrarSesion" }, - }).done(function (respuesta) { - if (typeof respuesta === "string") respuesta = JSON.parse(respuesta); - - if (respuesta.error) { - console.log(respuesta.error); - } else { - window.location.href = "index.php"; - } - }); -}); \ No newline at end of file +function escapeHtml(texto) { + return $('
').text(texto).html(); +} \ No newline at end of file