jorge/triviagmatico
4
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Corregida cabecera.js

Browse Source
This commit is contained in:
jorge
2026-10-02 09:21:23 +02:00
parent 20131bbe7f
commit d67e4d76e2
1 changed files with 111 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js/cabecera.js
+111 -114
View File
@@ -1,19 +1,19 @@
let idUsuarioSesion = null; let idUsuarioSesion = null;
$(document).ready(function () { $(document).ready(function () {
comprobarSesion(); // Cargar la cabecera HTML e iniciar comprobación de sesión SOLO al terminar de cargar
// Carga la cabecera html $("#cabecera-container").load("cabecera.html", function (response, status, xhr) {
$("#cabecera-container").load("cabecera.html", function () { if (status === "error") {
// Después de cargar cabecera comprobamos sesión console.error("Error al cargar cabecera.html:", xhr.status, xhr.statusText);
comprobarSesion(); } else {
}); comprobarSesion();
}); }
});
});
// Función auxiliar para escapar texto HTML // Función auxiliar para escapar texto HTML
function escapeHTML(str) { function escapeHTML(str) {
return $("<div>") return $("<div>").text(str ?? "").html();
.text(str ?? "")
.html();
} }
// Comprobar estado de sesión al cargar la página // Comprobar estado de sesión al cargar la página
@@ -21,83 +21,75 @@ function comprobarSesion() {
$.ajax({ $.ajax({
method: "POST", method: "POST",
url: "controladores/controladorUsuario.php", url: "controladores/controladorUsuario.php",
dataType: "json",
data: { orden: "comprobarSesion" }, data: { orden: "comprobarSesion" },
}).done(function (respuesta) { })
try { .done(function (respuesta) {
if (typeof respuesta === "string") { const contenedor = $("#contenedorUsuarioCabecera");
respuesta = JSON.parse(respuesta); if (!contenedor.length) return; // Si aún no existe el contenedor en HTML, cancelamos
}
const contenedor = $("#contenedorUsuarioCabecera"); contenedor.empty();
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; 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 = ` const htmlUsuario = `
<div class="dropdown"> <div class="dropdown">
<button class="btn user-dropdown-btn dropdown-toggle d-flex align-items-center gap-2" <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"> 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;"> <img src="${escapeHTML(avatarUrl)}" alt="Avatar" class="rounded-circle" style="width: 32px; height: 32px; object-fit: cover;">
<span>${escapeHTML(respuesta.usuario.nombreUsuario)}</span> <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>
<button type="button" class="btn btn-kahoot-register rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#modalRegistro"> <ul class="dropdown-menu dropdown-menu-end user-dropdown-menu" aria-labelledby="userDropdown">
<i class="fa-solid fa-user-plus me-1"></i> Registrarse <li>
</button> <a class="dropdown-item d-flex align-items-center gap-2" href="perfil.php">
`; <i class="fa-solid fa-user text-primary"></i> Perfil
contenedor.html(htmlInvitado); </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, ocultamos el botón JUGAR // Si estamos en la página principal, mostramos el botón JUGAR
if ($("#colBotonJugar").length) { if ($("#colBotonJugar").length) {
$("#colBotonJugar").addClass("d-none"); $("#colBotonJugar").removeClass("d-none");
$("#colRanking") $("#colRanking").removeClass("col-lg-8").addClass("col-lg-7 col-xl-8");
.removeClass("col-lg-7 col-xl-8") }
.addClass("col-lg-8"); } else {
} // 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
</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);
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);
} }
})
.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(); event.preventDefault();
let nombreUsuario = $("#regNombre").val().trim(); let nombreUsuario = $("#regNombre").val().trim();
@@ -105,61 +97,64 @@ $("#formRegistro").on("submit", function (event) {
let contrasena = $("#regPassword").val(); let contrasena = $("#regPassword").val();
let contrasenaConfirmacion = $("#regPasswordConfirm").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) { 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; return;
} }
$.ajax({ $.ajax({
method: "POST", method: "POST",
url: "controladores/controladorUsuario.php", url: "controladores/controladorUsuario.php",
dataType: "json",
data: { data: {
nombreUsuario: nombreUsuario, nombreUsuario: nombreUsuario,
email: email, email: email,
contrasena: contrasena, contrasena: contrasena,
orden: "registrarUsuario", orden: "registrarUsuario",
}, },
}).done(function (respuesta) { })
if (typeof respuesta === "string") respuesta = JSON.parse(respuesta); .done(function (respuesta) {
if (respuesta.error) { 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 { } else {
// Mostrar mensaje de confirmación
$("#errorRegistro") $("#errorRegistro")
.removeClass("text-danger") .removeClass("text-danger")
.addClass("text-success") .addClass("text-success fw-bold")
.text(respuesta.exito); .text(respuesta.exito || "¡Registro completado con éxito!");
$("#formRegistro")[0].reset(); if ($("#formRegistro").length) {
$("#formRegistro")[0].reset();
}
// Recargar para iniciar sesión tras 1.5 segundos
setTimeout(function () { setTimeout(function () {
location.reload(); 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(); event.preventDefault();
let email = $("#loginEmail").val().trim(); let email = $("#loginEmail").val().trim();
let contrasena = $("#loginPassword").val(); let contrasena = $("#loginPassword").val();
let recuerdame = $("#recordar").is(":checked"); 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 === "") { if (email === "" || contrasena === "") {
$("#errorLogin").text("Todos los campos son obligatorios."); $("#errorLogin").text("Todos los campos son obligatorios.");
@@ -171,41 +166,43 @@ $("#botonAceptarLogin").click(function (event) {
$.ajax({ $.ajax({
method: "POST", method: "POST",
url: "controladores/controladorUsuario.php", url: "controladores/controladorUsuario.php",
dataType: "json",
data: { data: {
email: email, email: email,
contrasena: contrasena, contrasena: contrasena,
recuerdame: recuerdame, recuerdame: recuerdame,
orden: "comprobarUsuario", orden: "comprobarUsuario",
}, },
}).done(function (respuesta) { })
if (typeof respuesta === "string") respuesta = JSON.parse(respuesta); .done(function (respuesta) {
if (respuesta.error) { if (respuesta.error) {
$("#loginEmail").addClass("is-invalid"); $("#loginEmail, #loginPassword").addClass("is-invalid");
$("#loginPassword").addClass("is-invalid");
$("#errorLogin").text(respuesta.error); $("#errorLogin").text(respuesta.error);
} else { } else {
// Login correcto: Recargar la vista
location.reload(); 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.");
}); });
}); });
// Cerrar sesión // Cerrar sesión
$(document).on("click", "#botonCerrarSesion", function (event) { $(document).on("click", "#botonCerrarSesion", function (event) {
event.preventDefault(); event.preventDefault();
$.ajax({ $.ajax({
method: "POST", method: "POST",
url: "controladores/controladorUsuario.php", url: "controladores/controladorUsuario.php",
dataType: "json",
data: { orden: "cerrarSesion" }, 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";
window.location.href = "index.php";
}
}); });
}); });