triviagmatico/js/cabecera.js

$(document).ready(function () {
    // 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();
    });
});

/**
 * Comprueba con el servidor si existe una sesión PHP
 */
function comprobarEstadoSesion() {
    $.ajax({
        url: 'controladores/controladorUsuario.php',
        type: 'POST',
        dataType: 'json',
        data: { orden: 'comprobarSesion' },
        success: function (respuesta) {
            if (respuesta.activa) {
                renderizarCabeceraConSesion(respuesta.usuario);
                $('#colBotonJugar').removeClass('d-none');
            } else {
                renderizarCabeceraSinSesion();
                $('#colBotonJugar').addClass('d-none');
            }
        },
        error: function () {
            renderizarCabeceraSinSesion();
        }
    });
}

/**
 * Petición AJAX para iniciar sesión
 */
function ejecutarLogin() {
    let email = $('#loginEmail').val().trim();
    let contrasena = $('#loginPassword').val().trim();
    $('#errorLogin').text('');

    if (email === '' || contrasena === '') {
        $('#errorLogin').text('Por favor, rellena todos los campos.');
        return;
    }

    $.ajax({
        url: 'controladores/controladorUsuario.php',
        type: 'POST',
        dataType: 'json',
        data: {
            orden: 'comprobarUsuario',
            email: email,
            contrasena: contrasena
        },
        success: function (respuesta) {
            if (respuesta.error) {
                $('#errorLogin').text(respuesta.error);
            } else if (respuesta.exito) {
                $('#modalLogin').modal('hide');
                $('#formLogin')[0].reset();

                // Cargar datos de la sesión actualizados 
                comprobarEstadoSesion();
            }
        },
        error: function () {
            $('#errorLogin').text('Error al conectar con el servidor.');
        }
    });
}

/**
 * Petición AJAX para registrar un usuario
 */
function ejecutarRegistro() {
    let nombre = $('#regNombre').val().trim();
    let email = $('#regEmail').val().trim();
    let pass = $('#regPassword').val().trim();
    let passConfirm = $('#regPasswordConfirm').val().trim();

    $('#errorRegistro').text('');

    if (nombre === '' || email === '' || pass === '') {
        $('#errorRegistro').text('Todos los campos son obligatorios.');
        return;
    }

    if (pass !== passConfirm) {
        $('#errorRegistro').text('Las contraseñas no coinciden.');
        return;
    }

    $.ajax({
        url: 'controladores/controladorUsuario.php',
        type: 'POST',
        dataType: 'json',
        data: {
            orden: 'registrarUsuario',
            nombreUsuario: nombre,
            email: email,
            contrasena: pass
        },
        success: function (respuesta) {
            if (respuesta.error) {
                $('#errorRegistro').text(respuesta.error);
            } else {
                $('#modalRegistro').modal('hide');
                $('#formRegistro')[0].reset();

                // Autologin tras registrarse
                $('#loginEmail').val(email);
                $('#loginPassword').val(pass);
                ejecutarLogin();
            }
        },
        error: function () {
            $('#errorRegistro').text('Error al procesar el registro.');
        }
    });
}

/**
 * Petición AJAX para cerrar la sesión
 */
function cerrarSesion() {
    $.ajax({
        url: 'controladores/controladorUsuario.php',
        type: 'POST',
        dataType: 'json',
        data: { orden: 'cerrarSesion' },
        success: function () {
            renderizarCabeceraSinSesion();
            $('#colBotonJugar').addClass('d-none');

            if (window.location.pathname.includes('perfil.php') || window.location.pathname.includes('buscadorSala.php')) {
                window.location.href = 'index.php';
            }
        }
    });
}

/**
 * Renderiza la cabecera cuando HAY sesión iniciada 
 */
function renderizarCabeceraConSesion(usuario) {
    //Mete el avatar en cabecera
    let avatarImg = (usuario.avatar && usuario.avatar !== '') 
        ? usuario.avatar 
        : 'img/avatars/defaultProfile.jpeg';

    // Refrescar avatar si se cambia
    let avatarConCacheBuster = avatarImg + '?v=' + new Date().getTime();

    let html = `
        <div class="dropdown">
            <button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 rounded-pill px-3 py-1 fw-bold" type="button" id="userMenu" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="${avatarConCacheBuster}" alt="Avatar" class="rounded-circle border" style="width: 32px; height: 32px; object-fit: cover;">
                <span>${escapeHtml(usuario.nombreUsuario)}</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow border-0 mt-2" aria-labelledby="userMenu">
                <li>
                    <a class="dropdown-item py-2 fw-semibold" href="perfil.php">
                        <i class="fa-solid fa-user me-2 text-primary"></i>Mi Perfil
                    </a>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li>
                    <button class="dropdown-item py-2 fw-semibold text-danger" onclick="cerrarSesion()">
                        <i class="fa-solid fa-right-from-bracket me-2"></i>Cerrar Sesión
                    </button>
                </li>
            </ul>
        </div>
    `;
    $('#contenedorUsuarioCabecera').html(html);
}

/**
 * Renderiza los botones en la cabecera cuando NO hay sesión (Iniciar sesión azul)
 */
function renderizarCabeceraSinSesion() {
    let html = `
        <button class="btn btn-primary rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalLogin">
            <i class="fa-solid fa-right-to-bracket me-1"></i> Iniciar sesión
        </button>
        <button class="btn btn-success rounded-pill px-4 fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#modalRegistro">
            <i class="fa-solid fa-user-plus me-1"></i> Registrarse
        </button>
    `;
    $('#contenedorUsuarioCabecera').html(html);
}

function escapeHtml(texto) {
    return $('<div>').text(texto).html();
}