1ra Versión
This commit is contained in:
MarcosFlorSalcedo
+272
@@ -0,0 +1,272 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user