// LOLA Consola Web — Acceso partido persistente: la presentación (con estrellas) queda
// SIEMPRE a la izquierda; a la derecha cambia el paso (Bienvenida, Login, 2FA, Recuperar,
// Cambiar contraseña). La sesión la maneja window.LOLA.api (sessionStorage, NO localStorage).
// Acceso POR INVITACIÓN: no hay registro público (las cuentas se crean en Configuración → Equipo).
const api = () => window.LOLA.api;
// Keyframes (titileo de estrellas + entrada suave del panel derecho). Se inyectan una vez.
(function injectAuthKeyframes() {
if (typeof document === 'undefined' || document.getElementById('lola-auth-kf')) return;
const s = document.createElement('style');
s.id = 'lola-auth-kf';
s.textContent =
'@keyframes lolaTwinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}' +
'@keyframes lolaFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}';
document.head.appendChild(s);
})();
// ── Íconos locales (no están en window.WI) ──
function Eye({ size = 18 }) {
return ;
}
function EyeOff({ size = 18 }) {
return ;
}
function ArrowR({ size = 17 }) {
return ;
}
function Key({ size = 18 }) {
return ;
}
// ── Fondo dark centrado (solo para la pantalla de bloqueo) ──
function AuthBackdrop({ children }) {
const t = window.WC;
return (
{children}
);
}
function Brand() {
const t = window.WC;
return (
LOLA
Consola Admin
);
}
function Card({ children, style }) {
return
{children}
;
}
// ── Campo con ícono, foco animado y mostrar/ocultar ──
function Field({ t, label, type, value, onChange, autoFocus, onEnter, placeholder, icon, mono }) {
const [show, setShow] = React.useState(false);
const [foc, setFoc] = React.useState(false);
const isPass = type === 'password';
const Icn = icon ? window.WI[icon] : null;
return (
);
}
function Btn({ t, children, onClick, disabled, kind }) {
const [h, setH] = React.useState(false);
const primary = kind !== 'ghost';
return (
);
}
function OutlineBtn({ t, children, onClick }) {
return (
);
}
function TextLink({ t, children, onClick, color }) {
return ;
}
function ErrBox({ t, children }) {
if (!children) return null;
return
{children}
;
}
function Footer({ t }) {
return
LOLA Logística S.A. · Acceso restringido
;
}
function Eyebrow({ t, children }) {
return
{children}
;
}
function Title({ t, children }) {
return
{children}
;
}
function Sub({ t, children }) {
return
{children}
;
}
function BackLink({ t, onClick, children }) {
return
{children || '← Volver a la bienvenida'}
;
}
// ── Marco partido persistente: izquierda fija (presentación con estrellas), derecha cambiante ──
function AuthSplit({ t, screenKey, children }) {
const isMobile = window.useIsMobile(880);
const caps = [
{ i: 'Check', l: 'Aprobaciones', d: 'Autoriza contratos de clientes y transportistas' },
{ i: 'Wallet', l: 'Comisiones', d: 'Ingresos de la plataforma por categoría' },
{ i: 'Users', l: 'Usuarios', d: 'Gestión de clientes y proveedores' },
{ i: 'Book', l: 'Bitácora', d: 'Registro de accesos y auditoría' },
];
const stars = React.useMemo(() => {
const arr = [];
for (let i = 0; i < 60; i++) {
const r = Math.random();
arr.push({
top: (Math.random() * 100).toFixed(2),
left: (Math.random() * 100).toFixed(2),
size: r < 0.12 ? 3 : (r < 0.5 ? 1.4 : 2),
op: (0.35 + Math.random() * 0.65).toFixed(2),
dur: (2.4 + Math.random() * 3.4).toFixed(2),
delay: (Math.random() * 5).toFixed(2),
});
}
return arr;
}, []);
return (
{/* IZQUIERDA — presentación con estrellas (FIJA) */}
Verificación en dos pasosEnviamos un código de 6 dígitos a {email}. setCode(v.replace(/\D/g, '').slice(0, 6))}
autoFocus onEnter={verificar} placeholder="000000" mono/>
{devCode &&
Código de desarrollo: {devCode} (solo aparece fuera de producción)
}
{err}{busy ? 'Verificando…' : 'Verificar y entrar'}
);
}
// ── Derecha: Recuperar contraseña (real) ──
function RecoverRight({ t, onBack }) {
const [email, setEmail] = React.useState('');
const [sent, setSent] = React.useState(false);
const [busy, setBusy] = React.useState(false);
const [err, setErr] = React.useState('');
const enviar = async () => {
if (!email.trim() || busy) return;
setErr(''); setBusy(true);
try { await api().recuperar(email.trim().toLowerCase()); setSent(true); }
catch (e) {
// El backend responde igual exista o no la cuenta (no confirma por respuesta); solo
// mostramos error ante un problema real de conexión/servidor.
setErr(e.status === 0 || e.message === 'Failed to fetch'
? 'No hay conexión con el servidor. ¿Está corriendo la API?' : (e.message || 'No se pudo enviar el enlace.'));
}
setBusy(false);
};
return (
{!sent ? (
Recuperar contraseñaEscribe el correo de tu cuenta y te enviaremos un enlace para restablecerla.{err}{busy ? 'Enviando…' : 'Enviar enlace'}
) : (
Revisa tu correo
Si {email} tiene una cuenta,
recibirá un enlace para restablecer la contraseña.
)}
);
}
// ── Derecha: Restablecer contraseña (desde el enlace del correo, ?reset=token) ──
function ResetPasswordRight({ t, token, onDone }) {
const [nueva, setNueva] = React.useState('');
const [conf, setConf] = React.useState('');
const [err, setErr] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [done, setDone] = React.useState(false);
const guardar = async () => {
setErr('');
if (nueva.length < 8) { setErr('La contraseña debe tener al menos 8 caracteres.'); return; }
if (nueva !== conf) { setErr('Las contraseñas no coinciden.'); return; }
setBusy(true);
try { await api().resetPassword(token, nueva); setDone(true); }
catch (e) {
setErr(e.code === 'RESET_INVALID' ? 'El enlace es inválido o ya expiró. Solicita uno nuevo.' : (e.message || 'No se pudo restablecer la contraseña.'));
setBusy(false);
}
};
if (done) {
return (
Contraseña actualizada
Ya puedes iniciar sesión con tu nueva contraseña.
Ir al inicio de sesión
);
}
return (
Elige una nueva contraseñaTu enlace de restablecimiento es válido por 30 minutos. { setNueva(v); setErr(''); }} autoFocus placeholder="Mínimo 8 caracteres" icon="Key"/>
{ setConf(v); setErr(''); }} onEnter={guardar} placeholder="••••••••" icon="Key"/>
{err}{busy ? 'Guardando…' : 'Restablecer contraseña'}
);
}
// ── Derecha: Cambiar contraseña ──
function ChangePasswordRight({ t, onBack }) {
const [email, setEmail] = React.useState('');
const [actual, setActual] = React.useState('');
const [nueva, setNueva] = React.useState('');
const [conf, setConf] = React.useState('');
const [err, setErr] = React.useState('');
const [busy, setBusy] = React.useState(false);
const [done, setDone] = React.useState(false);
const score = (p) => {
let s = 0;
if (p.length >= 8) s++;
if (/[A-Z]/.test(p) && /[a-z]/.test(p)) s++;
if (/[0-9]/.test(p)) s++;
if (/[^A-Za-z0-9]/.test(p)) s++;
return s;
};
const sc = nueva ? score(nueva) : 0;
const scLabel = ['Muy débil', 'Débil', 'Aceptable', 'Fuerte', 'Excelente'][sc];
const scColor = [t.danger, t.danger, t.warn, t.success, t.success][sc];
const guardar = async () => {
setErr('');
if (!email.trim() || !actual || !nueva) { setErr('Completa todos los campos.'); return; }
if (nueva.length < 8) { setErr('La nueva contraseña debe tener al menos 8 caracteres.'); return; }
if (nueva === actual) { setErr('La nueva contraseña debe ser distinta a la actual.'); return; }
if (nueva !== conf) { setErr('Las contraseñas no coinciden.'); return; }
setBusy(true);
try {
if (api().changePassword) await api().changePassword(email.trim().toLowerCase(), actual, nueva);
setDone(true);
} catch (e) {
setErr(e.status === 0 || e.message === 'Failed to fetch'
? 'No hay conexión con el servidor. ¿Está corriendo la API?'
: (e.code === 'BAD_CREDENTIALS' ? 'La contraseña actual es incorrecta.' : (e.message || 'No se pudo cambiar la contraseña.')));
setBusy(false);
}
};
if (done) {
return (
Contraseña actualizada
Ya puedes iniciar sesión con tu nueva contraseña.
Ir al inicio de sesión
);
}
return (
Cambiar contraseñaConfirma tu contraseña actual y define una nueva. { setNueva(v); setErr(''); }} placeholder="Mínimo 8 caracteres" icon="Key"/>
{nueva && (