Corregida cabecera.js

js/cabecera.js

@@ -1,19 +1,19 @@
 let idUsuarioSesion = null;
 
 $(document).ready(function () {
+  // Cargar la cabecera HTML e iniciar comprobación de sesión SOLO al terminar de cargar
+  $("#cabecera-container").load("cabecera.html", function (response, status, xhr) {
+    if (status === "error") {
+      console.error("Error al cargar cabecera.html:", xhr.status, xhr.statusText);
+    } else {
       comprobarSesion();
-	  // Carga la cabecera html
+    }
-	  $("#cabecera-container").load("cabecera.html", function () {
-	    // Después de cargar cabecera comprobamos sesión
-	    comprobarSesion();
   });
 });
 
 // Función auxiliar para escapar texto HTML
 function escapeHTML(str) {
-  return $("<div>")
+  return $("<div>").text(str ?? "").html();
-    .text(str ?? "")
-    .html();
 }
 
 // Comprobar estado de sesión al cargar la página
@@ -21,24 +21,21 @@ function comprobarSesion() {
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
+    dataType: "json",
     data: { orden: "comprobarSesion" },
-  }).done(function (respuesta) {
+  })
-    try {
+  .done(function (respuesta) {
-      if (typeof respuesta === "string") {
-        respuesta = JSON.parse(respuesta);
-      }
-
     const contenedor = $("#contenedorUsuarioCabecera");
+    if (!contenedor.length) return; // Si aún no existe el contenedor en HTML, cancelamos
+
     contenedor.empty();
 
-      if (respuesta.activa && respuesta.usuario) {
+    if (respuesta && respuesta.activa && respuesta.usuario) {
-        // Recogemos el idUsuario de la sesion en una variable para usarlo (no me lo volváis a borrar por favor os lo pido)
+      // Guardar idUsuario globalmente
       idUsuarioSesion = respuesta.usuario.idUsuario;
-        // Obtenemos la ruta del avatar o la de por defecto
+      const avatarUrl = respuesta.usuario.avatar || "img/avatars/defaultProfile.jpeg";
-        const avatarUrl =
-          respuesta.usuario.avatar || "img/avatars/defaultProfile.jpeg";
 
-        // Usuario autenticado: Mostrar Menú Dropdown con el avatar
+      // Usuario autenticado: Menú desplegable
       const htmlUsuario = `
         <div class="dropdown">
           <button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2"
@@ -66,12 +63,10 @@ function comprobarSesion() {
       // Si estamos en la página principal, mostramos el botón JUGAR
       if ($("#colBotonJugar").length) {
         $("#colBotonJugar").removeClass("d-none");
-          $("#colRanking")
+        $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");
-            .removeClass("col-lg-8")
-            .addClass("col-lg-7 col-xl-8");
       }
     } else {
-        // No hay sesión: Mostrar botones de Login y Registro
+      // No hay sesión: Botones de Login y Registro
       const htmlInvitado = `
         <button type="button" class="btn btn-kahoot-login rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalLogin">
           <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar Sesión
@@ -82,22 +77,19 @@ function comprobarSesion() {
       `;
       contenedor.html(htmlInvitado);
 
-        // Si estamos en la página principal, ocultamos el botón JUGAR
       if ($("#colBotonJugar").length) {
         $("#colBotonJugar").addClass("d-none");
-          $("#colRanking")
+        $("#colRanking").removeClass("col-lg-7 col-xl-8").addClass("col-lg-8");
-            .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);
+  .fail(function (xhr, status, error) {
-    }
+    console.error("Error en comprobarSesion AJAX:", error, xhr.responseText);
   });
 }
 
-//  Registro
+// Registro de usuario
-$("#formRegistro").on("submit", function (event) {
+$(document).on("click", "#botonAceptarRegistro", function (event) {
   event.preventDefault();
 
   let nombreUsuario = $("#regNombre").val().trim();
@@ -105,61 +97,64 @@ $("#formRegistro").on("submit", function (event) {
   let contrasena = $("#regPassword").val();
   let contrasenaConfirmacion = $("#regPasswordConfirm").val();
 
-  $("#regNombre").removeClass("is-invalid");
+  // Resetear estados visuales
-  $("#regEmail").removeClass("is-invalid");
+  $("#regNombre, #regEmail, #regPassword, #regPasswordConfirm").removeClass("is-invalid");
-  $("#regPassword").removeClass("is-invalid");
+  $("#errorRegistro").removeClass("text-danger text-success").text("").show();
-  $("#regPasswordConfirm").removeClass("is-invalid");
-  $("#errorRegistro").text("");
 
   if (contrasena !== contrasenaConfirmacion) {
-    $("#regPassword").addClass("is-invalid");
+    $("#regPassword, #regPasswordConfirm").addClass("is-invalid");
-    $("#regPasswordConfirm").addClass("is-invalid");
+    $("#errorRegistro").addClass("text-danger").text("Las contraseñas no coinciden.");
-    $("#errorRegistro").text("Las contraseñas no coinciden.");
     return;
   }
 
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
+    dataType: "json",
     data: {
       nombreUsuario: nombreUsuario,
       email: email,
       contrasena: contrasena,
       orden: "registrarUsuario",
     },
-  }).done(function (respuesta) {
+  })
-    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+  .done(function (respuesta) {
-
     if (respuesta.error) {
-      $("#errorRegistro").text(respuesta.error);
+      $("#errorRegistro").addClass("text-danger").text(respuesta.error);
-      $("#regNombre").addClass("is-invalid");
+      $("#regNombre, #regEmail").addClass("is-invalid");
-      $("#regEmail").addClass("is-invalid");
     } else {
+      // Mostrar mensaje de confirmación
       $("#errorRegistro")
         .removeClass("text-danger")
-        .addClass("text-success")
+        .addClass("text-success fw-bold")
-        .text(respuesta.exito);
+        .text(respuesta.exito || "¡Registro completado con éxito!");
 
+      if ($("#formRegistro").length) {
         $("#formRegistro")[0].reset();
+      }
 
+      // Recargar para iniciar sesión tras 1.5 segundos
       setTimeout(function () {
         location.reload();
-      }, 1000);
+      }, 1500);
     }
+  })
+  .fail(function (xhr, status, error) {
+    console.error("Error en el registro:", error, xhr.responseText);
+    $("#errorRegistro").addClass("text-danger").text("Error de conexión con el servidor.");
   });
 });
 
-//  Login
+// Login de usuario
-$("#botonAceptarLogin").click(function (event) {
+$(document).on("click", "#botonAceptarLogin", function (event) {
   event.preventDefault();
 
   let email = $("#loginEmail").val().trim();
   let contrasena = $("#loginPassword").val();
   let recuerdame = $("#recordar").is(":checked");
 
-  $("#loginEmail").removeClass("is-invalid");
+  $("#loginEmail, #loginPassword").removeClass("is-invalid");
-  $("#loginPassword").removeClass("is-invalid");
+  $("#errorLogin").removeClass("text-success").addClass("text-danger").text("").show();
-  $("#errorLogin").text("");
 
   if (email === "" || contrasena === "") {
     $("#errorLogin").text("Todos los campos son obligatorios.");
@@ -171,22 +166,26 @@ $("#botonAceptarLogin").click(function (event) {
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
+    dataType: "json",
     data: {
       email: email,
       contrasena: contrasena,
       recuerdame: recuerdame,
       orden: "comprobarUsuario",
     },
-  }).done(function (respuesta) {
+  })
-    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+  .done(function (respuesta) {
-
     if (respuesta.error) {
-      $("#loginEmail").addClass("is-invalid");
+      $("#loginEmail, #loginPassword").addClass("is-invalid");
-      $("#loginPassword").addClass("is-invalid");
       $("#errorLogin").text(respuesta.error);
     } else {
+      // Login correcto: Recargar la vista
       location.reload();
     }
+  })
+  .fail(function (xhr, status, error) {
+    console.error("Error en el login:", error, xhr.responseText);
+    $("#errorLogin").text("Error de conexión o respuesta no válida del servidor.");
   });
 });
 
@@ -197,15 +196,13 @@ $(document).on("click", "#botonCerrarSesion", function (event) {
   $.ajax({
     method: "POST",
     url: "controladores/controladorUsuario.php",
+    dataType: "json",
     data: { orden: "cerrarSesion" },
-  }).done(function (respuesta) {
+  })
-    if (typeof respuesta === "string") respuesta = JSON.parse(respuesta);
+  .done(function (respuesta) {
-
+    window.location.href = "index.php"; 
-    if (respuesta.error) {
+  })
-      console.log(respuesta.error);
+  .fail(function () {
-    } else {
     window.location.href = "index.php";
-    }
   });
 });
-