MarcosFlorSalcedo
272 lines
11 KiB
HTML
272 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="..\css\Login.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Iniciar Sesión</h1>
|
|
<form id="loginForm">
|
|
<div class="input-box">
|
|
<input type="text" id="usuario" name="usuario" placeholder="Usuario" required>
|
|
</div>
|
|
<div class="input-box">
|
|
<input type="password" id="clave" name="clave" placeholder="Contraseña" required>
|
|
</div>
|
|
<div class="remember-password">
|
|
<!--<label><input type="checkbox">Recordarme</label>-->
|
|
<a href="#" id="btnOlvidoContrasena">¿Olvidaste tu contraseña?</a>
|
|
</div>
|
|
<button type="submit" class="btnI">Ingresar</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Modal de Recuperación de Contraseña -->
|
|
<div id="modalRecuperacion" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close" id="cerrarModal">×</span>
|
|
|
|
<!-- Paso 1: Solicitar Correo -->
|
|
<div id="paso1" class="paso-recuperacion">
|
|
<h2>Recuperar Contraseña</h2>
|
|
<p>Ingresa tu correo para recibir un código de verificación</p>
|
|
<input type="email" id="correoRecuperacion" placeholder="Correo electrónico" required>
|
|
<button id="btnEnviarCodigo" class="btnRecuperar">Enviar Código</button>
|
|
<p id="msgPaso1" class="mensaje"></p>
|
|
</div>
|
|
|
|
<!-- Paso 2: Verificar Código y Nueva Contraseña -->
|
|
<div id="paso2" class="paso-recuperacion" style="display: none;">
|
|
<h2>Verificar Código</h2>
|
|
<p>Ingresa el código que recibiste en tu correo</p>
|
|
<input type="text" id="codigoVerificacion" placeholder="Código de 6 dígitos" maxlength="6" required>
|
|
<input type="password" id="nuevaContrasena" placeholder="Nueva contraseña" required>
|
|
<input type="password" id="confirmarContrasena" placeholder="Confirmar contraseña" required>
|
|
<div class="botones-grupo">
|
|
<button id="btnCambiarContrasena" class="btnRecuperar">Cambiar Contraseña</button>
|
|
<button id="btnVolver" class="btnVolver">Volver</button>
|
|
</div>
|
|
<p id="msgPaso2" class="mensaje"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Variables globales para el flujo de recuperación
|
|
let correoRecuperacion = '';
|
|
|
|
// Elementos del modal
|
|
const modalRecuperacion = document.getElementById('modalRecuperacion');
|
|
const btnOlvidoContrasena = document.getElementById('btnOlvidoContrasena');
|
|
const cerrarModal = document.getElementById('cerrarModal');
|
|
const paso1 = document.getElementById('paso1');
|
|
const paso2 = document.getElementById('paso2');
|
|
|
|
// Botones
|
|
const btnEnviarCodigo = document.getElementById('btnEnviarCodigo');
|
|
const btnCambiarContrasena = document.getElementById('btnCambiarContrasena');
|
|
const btnVolver = document.getElementById('btnVolver');
|
|
|
|
// Inputs
|
|
const correoInput = document.getElementById('correoRecuperacion');
|
|
const codigoInput = document.getElementById('codigoVerificacion');
|
|
const nuevaContrasenaInput = document.getElementById('nuevaContrasena');
|
|
const confirmarContrasenaInput = document.getElementById('confirmarContrasena');
|
|
|
|
// Mensajes
|
|
const msgPaso1 = document.getElementById('msgPaso1');
|
|
const msgPaso2 = document.getElementById('msgPaso2');
|
|
|
|
// Abrir modal
|
|
btnOlvidoContrasena.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
modalRecuperacion.style.display = 'block';
|
|
correoInput.focus();
|
|
});
|
|
|
|
// Cerrar modal
|
|
cerrarModal.addEventListener('click', () => {
|
|
modalRecuperacion.style.display = 'none';
|
|
limpiarModal();
|
|
});
|
|
|
|
window.addEventListener('click', (e) => {
|
|
if (e.target === modalRecuperacion) {
|
|
modalRecuperacion.style.display = 'none';
|
|
limpiarModal();
|
|
}
|
|
});
|
|
|
|
// Paso 1: Enviar Código
|
|
btnEnviarCodigo.addEventListener('click', async () => {
|
|
const correo = correoInput.value.trim();
|
|
|
|
if (!correo) {
|
|
msgPaso1.textContent = 'Por favor ingresa un correo';
|
|
msgPaso1.className = 'mensaje error';
|
|
return;
|
|
}
|
|
|
|
btnEnviarCodigo.disabled = true;
|
|
btnEnviarCodigo.textContent = 'Enviando...';
|
|
msgPaso1.textContent = '';
|
|
|
|
try {
|
|
const response = await fetch('../php/Recuperar_Contrasena_Solicitar.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ correo })
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
correoRecuperacion = correo;
|
|
msgPaso1.textContent = data.message;
|
|
msgPaso1.className = 'mensaje success';
|
|
|
|
// Cambiar al paso 2 después de 1.5 segundos
|
|
setTimeout(() => {
|
|
paso1.style.display = 'none';
|
|
paso2.style.display = 'block';
|
|
codigoInput.focus();
|
|
}, 1500);
|
|
} else {
|
|
msgPaso1.textContent = data.message;
|
|
msgPaso1.className = 'mensaje error';
|
|
}
|
|
} catch (error) {
|
|
msgPaso1.textContent = 'Error al conectar con el servidor';
|
|
msgPaso1.className = 'mensaje error';
|
|
console.error('Error:', error);
|
|
} finally {
|
|
btnEnviarCodigo.disabled = false;
|
|
btnEnviarCodigo.textContent = 'Enviar Código';
|
|
}
|
|
});
|
|
|
|
// Paso 2: Cambiar Contraseña
|
|
btnCambiarContrasena.addEventListener('click', async () => {
|
|
const codigo = codigoInput.value.trim();
|
|
const nuevaContrasena = nuevaContrasenaInput.value;
|
|
const confirmarContrasena = confirmarContrasenaInput.value;
|
|
|
|
if (!codigo || !nuevaContrasena || !confirmarContrasena) {
|
|
msgPaso2.textContent = 'Por favor completa todos los campos';
|
|
msgPaso2.className = 'mensaje error';
|
|
return;
|
|
}
|
|
|
|
if (codigo.length !== 6 || isNaN(codigo)) {
|
|
msgPaso2.textContent = 'El código debe tener 6 dígitos';
|
|
msgPaso2.className = 'mensaje error';
|
|
return;
|
|
}
|
|
|
|
if (nuevaContrasena.length < 6) {
|
|
msgPaso2.textContent = 'La contraseña debe tener al menos 6 caracteres';
|
|
msgPaso2.className = 'mensaje error';
|
|
return;
|
|
}
|
|
|
|
if (nuevaContrasena !== confirmarContrasena) {
|
|
msgPaso2.textContent = 'Las contraseñas no coinciden';
|
|
msgPaso2.className = 'mensaje error';
|
|
return;
|
|
}
|
|
|
|
btnCambiarContrasena.disabled = true;
|
|
btnCambiarContrasena.textContent = 'Cambiando...';
|
|
msgPaso2.textContent = '';
|
|
|
|
try {
|
|
const response = await fetch('../php/Recuperar_Contrasena_Verificar.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
correo: correoRecuperacion,
|
|
codigo,
|
|
nueva_contrasena: nuevaContrasena
|
|
})
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
msgPaso2.textContent = data.message;
|
|
msgPaso2.className = 'mensaje success';
|
|
|
|
// Cerrar modal después de 2 segundos
|
|
setTimeout(() => {
|
|
modalRecuperacion.style.display = 'none';
|
|
limpiarModal();
|
|
alert('Contraseña cambiada exitosamente. Ahora puedes iniciar sesión');
|
|
}, 2000);
|
|
} else {
|
|
msgPaso2.textContent = data.message;
|
|
msgPaso2.className = 'mensaje error';
|
|
}
|
|
} catch (error) {
|
|
msgPaso2.textContent = 'Error al conectar con el servidor';
|
|
msgPaso2.className = 'mensaje error';
|
|
console.error('Error:', error);
|
|
} finally {
|
|
btnCambiarContrasena.disabled = false;
|
|
btnCambiarContrasena.textContent = 'Cambiar Contraseña';
|
|
}
|
|
});
|
|
|
|
// Volver a paso 1
|
|
btnVolver.addEventListener('click', () => {
|
|
paso2.style.display = 'none';
|
|
paso1.style.display = 'block';
|
|
correoInput.focus();
|
|
});
|
|
|
|
// Función para limpiar el modal
|
|
function limpiarModal() {
|
|
correoInput.value = '';
|
|
codigoInput.value = '';
|
|
nuevaContrasenaInput.value = '';
|
|
confirmarContrasenaInput.value = '';
|
|
msgPaso1.textContent = '';
|
|
msgPaso2.textContent = '';
|
|
paso1.style.display = 'block';
|
|
paso2.style.display = 'none';
|
|
correoRecuperacion = '';
|
|
}
|
|
|
|
// Script original de login
|
|
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(document.getElementById('loginForm'));
|
|
|
|
try {
|
|
const response = await fetch('../php/Login.php', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Redirigir al panel
|
|
window.location.href = '../php/Cantina.php';
|
|
} else {
|
|
// Mostrar error sin cambiar de página
|
|
alert(data.message);
|
|
// Limpiar campos de contraseña
|
|
document.getElementById('clave').value = '';
|
|
}
|
|
} catch (error) {
|
|
alert('Error al conectar con el servidor');
|
|
console.error('Error:', error);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |