144 lines
7.7 KiB
HTML
144 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<title>Acceso Operarios - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
body {
|
|
background-color: #f8fafc;
|
|
-webkit-tap-highlight-color: transparent;
|
|
background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
|
</style>
|
|
</head>
|
|
<body class="text-slate-800 font-sans antialiased h-screen flex flex-col items-center justify-center p-6 relative overflow-hidden">
|
|
|
|
<div class="absolute top-[-10%] left-[-10%] w-64 h-64 bg-blue-400 rounded-full mix-blend-multiply filter blur-[80px] opacity-30"></div>
|
|
<div class="absolute bottom-[-10%] right-[-10%] w-64 h-64 bg-emerald-400 rounded-full mix-blend-multiply filter blur-[80px] opacity-30"></div>
|
|
|
|
<div class="w-full max-w-sm z-10 fade-in">
|
|
|
|
<div class="text-center mb-10">
|
|
<div class="w-20 h-20 bg-white rounded-[1.5rem] shadow-xl shadow-blue-500/10 border border-slate-100 flex items-center justify-center mx-auto mb-5">
|
|
<i data-lucide="wrench" class="w-10 h-10 text-blue-600"></i>
|
|
</div>
|
|
<h1 class="text-3xl font-black tracking-tight text-slate-800 uppercase">App Operario</h1>
|
|
<p class="text-sm font-medium text-slate-500 mt-2">Introduce tus credenciales de acceso</p>
|
|
</div>
|
|
|
|
<form id="loginForm" onsubmit="doLogin(event)" class="bg-white/80 backdrop-blur-xl p-8 rounded-[2rem] shadow-2xl shadow-slate-200/50 border border-white space-y-6">
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-2">Email o Teléfono</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i data-lucide="user" class="w-5 h-5 text-slate-400"></i>
|
|
</div>
|
|
<input type="text" id="userInput" required placeholder="Ej: 600123456" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-inner">
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1.5 ml-2">Contraseña</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
|
|
<i data-lucide="lock" class="w-5 h-5 text-slate-400"></i>
|
|
</div>
|
|
<input type="password" id="passInput" required placeholder="••••••••" class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-700 outline-none focus:bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all shadow-inner">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorMsg" class="hidden bg-rose-50 border border-rose-200 text-rose-600 text-xs font-bold p-3 rounded-xl text-center flex items-center justify-center gap-2">
|
|
<i data-lucide="alert-circle" class="w-4 h-4"></i> <span>Datos incorrectos</span>
|
|
</div>
|
|
|
|
<button type="submit" id="btnSubmit" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-[0_8px_20px_-6px_rgba(37,99,235,0.5)] hover:bg-blue-700 active:scale-95 transition-all uppercase tracking-widest text-xs flex justify-center items-center gap-2 mt-2">
|
|
Entrar a mi Ruta <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<p class="text-center text-[10px] font-bold text-slate-400 mt-8 uppercase tracking-widest">
|
|
Tecnología IntegraRepara
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
|
|
? 'http://localhost:3000'
|
|
: 'https://integrarepara-api.integrarepara.es';
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
lucide.createIcons();
|
|
// Si ya tiene sesión iniciada, lo mandamos directo al menú
|
|
if (localStorage.getItem("token") && localStorage.getItem("role") === "operario") {
|
|
window.location.href = "menu.html";
|
|
}
|
|
});
|
|
|
|
async function doLogin(e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('btnSubmit');
|
|
const err = document.getElementById('errorMsg');
|
|
|
|
const user = document.getElementById('userInput').value.trim();
|
|
const pass = document.getElementById('passInput').value;
|
|
|
|
btn.innerHTML = '<i data-lucide="loader-2" class="w-5 h-5 animate-spin mx-auto"></i>';
|
|
btn.disabled = true;
|
|
err.classList.add('hidden');
|
|
lucide.createIcons();
|
|
|
|
try {
|
|
const res = await fetch(`${API_URL}/auth/login`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email: user, password: pass })
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok && data.ok) {
|
|
// GUARDAMOS LOS DATOS CORRECTAMENTE LEYENDO DATA.USER
|
|
localStorage.setItem('token', data.token);
|
|
localStorage.setItem('role', data.user ? data.user.role : 'operario');
|
|
localStorage.setItem('userName', data.user ? data.user.full_name : 'Operario');
|
|
localStorage.setItem('accountId', data.user ? data.user.accountId : '');
|
|
|
|
// 💥 BARRERA DESTRUIDA: Ya no hay comprobación de if(data.role === 'operario')...
|
|
// Si el servidor (server.js) dice que OK, ¡entra todo el mundo directo!
|
|
|
|
btn.innerHTML = '<i data-lucide="check" class="w-5 h-5 mx-auto"></i>';
|
|
lucide.createIcons();
|
|
btn.classList.replace('bg-blue-600', 'bg-emerald-500');
|
|
|
|
// Redirigimos al menú tras medio segundo
|
|
setTimeout(() => { window.location.href = "menu.html"; }, 500);
|
|
|
|
} else {
|
|
err.querySelector('span').innerText = data.error || "Credenciales incorrectas";
|
|
err.classList.remove('hidden');
|
|
}
|
|
} catch (error) {
|
|
err.querySelector('span').innerText = "Error de conexión con el servidor";
|
|
err.classList.remove('hidden');
|
|
} finally {
|
|
if(!btn.classList.contains('bg-emerald-500')) {
|
|
btn.disabled = false;
|
|
btn.innerHTML = 'Entrar a mi Ruta <i data-lucide="arrow-right" class="w-4 h-4"></i>';
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |