82 lines
4.0 KiB
HTML
82 lines
4.0 KiB
HTML
<div class="max-w-md mx-auto mt-10 bg-gradient-to-br from-green-50 to-green-50 p-7 rounded-xl shadow-2xl text-center transform transition-all">
|
|
<div class="flex justify-start mb-6">
|
|
<img src="/img/logousite.webp" alt="Logo de la empresa" class="w-20">
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="w-24 h-24 bg-gradient-to-br from-green-500 to-green-600 rounded-full flex items-center justify-center mb-6 shadow-lg">
|
|
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-6">Bienvenido</h2>
|
|
<form id="loginForm" class="space-y-4">
|
|
<div class="relative">
|
|
<input type="text" id="username" placeholder="Usuario" class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-all" required>
|
|
<svg class="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="relative">
|
|
<input type="password" id="password" placeholder="Contraseña" class="w-full p-3 pl-10 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-green-500 transition-all" required>
|
|
<svg class="w-5 h-5 text-gray-400 absolute left-3 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
|
</svg>
|
|
</div>
|
|
<button type="submit" class="w-full bg-gradient-to-br from-green-500 to-green-600 text-white p-3 rounded-lg font-semibold hover:from-green-600 hover:to-green-700 transition-all transform hover:scale-105">
|
|
Iniciar sesión
|
|
</button>
|
|
</form>
|
|
<div class="mt-4 text-sm text-gray-600 hover:text-green-500 transition-all">
|
|
<a href="#">¿Olvidaste tu contraseña?</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('loginForm').addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
try {
|
|
const response = await fetch('/do/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
nombre_usuario: username,
|
|
password: password,
|
|
}),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
switch (result.status) {
|
|
case "success":
|
|
window.location.href = '/app/dashboard';
|
|
break;
|
|
|
|
case "missing":
|
|
window.location.href = '/update-credentials';
|
|
break;
|
|
|
|
case "error":
|
|
if (result.message === "no_password") {
|
|
window.location.href = '/update-credentials';
|
|
} else {
|
|
alert("Error: " + result.message);
|
|
}
|
|
break;
|
|
|
|
default:
|
|
alert("Respuesta inesperada del servidor");
|
|
break;
|
|
}
|
|
} catch (error) {
|
|
console.error("Error en la solicitud:", error);
|
|
alert("Hubo un error al intentar iniciar sesión. Inténtalo de nuevo.");
|
|
}
|
|
});
|
|
</script> |