279 lines
11 KiB
PHP
279 lines
11 KiB
PHP
<?php
|
|
if (session_status() === PHP_SESSION_NONE) {
|
|
session_start();
|
|
}
|
|
|
|
// Comprobación de sesión
|
|
$isLoggedIn = isset($_SESSION['idUsuario']) && !empty($_SESSION['idUsuario']);
|
|
$username = $isLoggedIn ? $_SESSION['nombreUsuario'] : '';
|
|
?>
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- FontAwesome para iconos -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
<!-- Google Fonts para estilo Kahoot -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/index.css">
|
|
<script src="js/jquery-4.0.0.min.js"></script>
|
|
<style>
|
|
|
|
|
|
</style>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-kahoot py-3 mb-4">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.php">
|
|
<i class="fa-solid fa-gamepad me-2"></i>TRIVIAGMÁTICO
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
|
|
|
|
<div class="d-flex align-items-center gap-3">
|
|
<?php if ($isLoggedIn): ?>
|
|
<!-- Menú desplegable cuando la sesión está iniciada -->
|
|
<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">
|
|
<i class="fa-solid fa-circle-user fa-lg text-warning"></i>
|
|
<span><?= htmlspecialchars($username) ?></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="logout.php">
|
|
<i class="fa-solid fa-right-from-bracket"></i> Cerrar Sesión
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<?php else: ?>
|
|
<!-- Botones que abren los modales cuando NO hay sesión iniciada -->
|
|
<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>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- MODAL DE LOGIN -->
|
|
<div class="modal fade" id="modalLogin" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-dark">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5 fw-bold" id="loginModalLabel">
|
|
<i class="fa-solid fa-right-to-bracket text-primary me-2"></i>Iniciar sesión
|
|
</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="formLogin">
|
|
<div class="form-floating mb-3">
|
|
<input type="email" class="form-control border-dark" id="loginEmail" name="email" placeholder="Correo electrónico" required>
|
|
<label for="loginEmail">Correo electrónico</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<input type="password" class="form-control border-dark" id="loginPassword" name="contrasena" placeholder="Contraseña" required>
|
|
<label for="loginPassword">Contraseña</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" id="recordar" name="recordar" type="checkbox" />
|
|
<label for="recordar" class="small">Recuérdeme durante 10 días</label>
|
|
</div>
|
|
<input type="hidden" name="orden" value="validar">
|
|
</form>
|
|
<div id="errorLogin" class="text-danger fw-bold mt-2"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary rounded-pill px-3" data-bs-dismiss="modal">Cancelar</button>
|
|
<button type="button" class="btn btn-primary rounded-pill px-4" id="botonAceptarLogin">Entrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL DE REGISTRO -->
|
|
<div class="modal fade" id="modalRegistro" tabindex="-1" aria-labelledby="registroModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content border-dark">
|
|
<div class="modal-header">
|
|
<h1 class="modal-title fs-5 fw-bold" id="registroModalLabel">
|
|
<i class="fa-solid fa-user-plus text-success me-2"></i>Registrarse
|
|
</h1>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="formRegistro">
|
|
<div class="form-floating mb-3">
|
|
<input type="text" class="form-control border-dark" id="regNombre" name="nombreUsuario" placeholder="Nombre" required>
|
|
<label for="regNombre">Nombre</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<input type="email" class="form-control border-dark" id="regEmail" name="email" placeholder="Correo electrónico" required>
|
|
<label for="regEmail">Correo electrónico</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<input type="password" class="form-control border-dark" id="regPassword" name="contrasena" placeholder="Contraseña" required>
|
|
<label for="regPassword">Contraseña</label>
|
|
</div>
|
|
<div class="form-floating mb-3">
|
|
<input type="password" class="form-control border-dark" id="regPasswordConfirm" name="contrasenaConfirm" placeholder="Confirmar contraseña" required>
|
|
<label for="regPasswordConfirm">Confirmar contraseña</label>
|
|
</div>
|
|
<input type="hidden" name="orden" value="registrar">
|
|
</form>
|
|
<div id="errorRegistro" class="text-danger fw-bold mt-2"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary rounded-pill px-3" data-bs-dismiss="modal">Cancelar</button>
|
|
<button type="button" class="btn btn-success rounded-pill px-4" id="botonAceptarRegistro">Registrarse</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// Registro
|
|
$('#botonAceptarRegistro').click(function(event){
|
|
event.preventDefault();
|
|
console.log('hola');
|
|
let nombreUsuario = $('#regNombre').val().trim();
|
|
let email = $('#regEmail').val().trim();
|
|
let contrasena = $('#regPassword').val();
|
|
let contrasenaConfirmacion = $('#regPasswordConfirm').val();
|
|
|
|
// Limpiamos errores anteriores
|
|
$('#regNombre').removeClass('is-invalid');
|
|
$('#regEmail').removeClass('is-invalid');
|
|
$('#regPassword').removeClass('is-invalid');
|
|
$('#regPasswordConfirm').removeClass('is-invalid');
|
|
$('#errorRegistro').text('');
|
|
|
|
// Comprobamos que las contraseñas coincidan
|
|
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){
|
|
console.log(respuesta);
|
|
respuesta = JSON.parse(respuesta);
|
|
if(respuesta.error){
|
|
|
|
$('#errorRegistro').text(respuesta.error);
|
|
|
|
// Marcamos los campos si hay error
|
|
$('#regNombre').addClass('is-invalid');
|
|
$('#regEmail').addClass('is-invalid');
|
|
|
|
}else{
|
|
|
|
// Registro correcto
|
|
$('#errorRegistro')
|
|
.removeClass('text-danger')
|
|
.addClass('text-success')
|
|
.text(respuesta.exito);
|
|
|
|
// Limpiamos formulario
|
|
$('#formRegistro')[0].reset();
|
|
|
|
// Cerramos modal después de un segundo
|
|
setTimeout(function(){
|
|
location.reload();
|
|
}, 1000);
|
|
}
|
|
|
|
}); // Fin función ajax
|
|
|
|
});
|
|
|
|
// Login
|
|
$('#botonAceptarLogin').click(function(event){
|
|
event.preventDefault();
|
|
|
|
let email = $('#loginEmail').val().trim();
|
|
let contrasena = $('#loginPassword').val();
|
|
|
|
// Limpiamos errores anteriores
|
|
$('#loginEmail').removeClass('is-invalid');
|
|
$('#loginPassword').removeClass('is-invalid');
|
|
$('#errorLogin').text('');
|
|
|
|
// Comprobación básica
|
|
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){
|
|
console.log(respuesta);
|
|
respuesta = JSON.parse(respuesta);
|
|
if(respuesta.error){
|
|
|
|
$('#loginEmail').addClass('is-invalid');
|
|
$('#loginPassword').addClass('is-invalid');
|
|
|
|
$('#errorLogin').text(respuesta.error);
|
|
|
|
}else{
|
|
|
|
location.reload();
|
|
}
|
|
|
|
}); // Fin función ajax
|
|
|
|
});
|
|
|
|
|
|
|
|
</script>
|