triviagmatico/js/cabecera.js

$(document).ready(function () {
  comprobarSesion();
});

// Función auxiliar para escapar texto HTML
function escapeHTML(str) {
  return $("<div>")
    .text(str ?? "")
    .html();
}

// 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);
      }

      const contenedor = $("#contenedorUsuarioCabecera");
      contenedor.empty();

      if (respuesta.activa && respuesta.usuario) {
        // Obtenemos la ruta del avatar o la de por defecto
        const avatarUrl =
          respuesta.usuario.avatar || "img/avatars/defaultProfile.jpeg";

        // Usuario autenticado: Mostrar Menú Dropdown con el avatar
        const htmlUsuario = `
          <div class="dropdown">
            <button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2"
                    type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
              <img src="${escapeHTML(avatarUrl)}" alt="Avatar" class="rounded-circle" style="width: 32px; height: 32px; object-fit: cover;">
              <span>${escapeHTML(respuesta.usuario.nombreUsuario)}</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
              <li>
                <a class="dropdown-item d-flex align-items-center gap-2" href="perfil.php">
                  <i class="fa-solid fa-user text-primary"></i> Perfil
                </a>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item logout-item d-flex align-items-center gap-2" href="#" id="botonCerrarSesion">
                  <i class="fa-solid fa-right-from-bracket"></i> Cerrar Sesión
                </a>
              </li>
            </ul>
          </div>
        `;
        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 = `
          <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
          </button>
          <button type="button" class="btn btn-kahoot-register rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalRegistro">
            <i class="fa-solid fa-user-plus me-1"></i> Registrarse
          </button>
        `;
        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);
    }
  });
}

//  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();
  let recuerdame = $("#recordar").is(":checked");

  $("#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,
      recuerdame: recuerdame,
      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();
    }
  });
});

//  Cerrar sesión
$(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";
    }
  });
});