/* Login + System view (users, audit, sessions, profile) */
function LoginScreen({ onLogin }) {
const [mode, setMode] = React.useState(() => {
const saved = localStorage.getItem('iti_login_mode');
if (saved) return saved;
return location.search.includes('portal') || location.pathname.startsWith('/portal') ? 'portal' : 'soporte';
});
React.useEffect(()=>{ localStorage.setItem('iti_login_mode', mode); },[mode]);
return (
IT
INFINITOS TI
Gestión de soporte
{mode==='portal' ? '🎫' : 'IT'}
{mode==='portal' ? 'Portal de Soporte' : '¡Hola otra vez!'}
{mode==='portal' ? 'Levanta tu ticket con el sticker de tu PC' : 'Ingresa tus credenciales para continuar'}
{mode==='soporte' ?
: }
INFINITOS TI · v0.5 · {mode==='portal' ? 'Acceso de cliente' : 'Acceso restringido'}
© Robert Muesser · Los Infinitos · Consultoría IT
);
}
function SoporteLoginForm({ onLogin }) {
const [u, setU] = React.useState('');
const [p, setP] = React.useState('');
const [otp, setOtp] = React.useState('');
const [needOtp, setNeedOtp] = React.useState(false);
const [err, setErr] = React.useState('');
const [loading, setLoading] = React.useState(false);
const [showPwd, setShowPwd] = React.useState(false);
async function submit(e) {
e.preventDefault(); setErr(''); setLoading(true);
try { const r = await window.API.login(u.trim(), p, otp || undefined); onLogin(r.user); }
catch (e) {
if (e.body?.error === 'totp_requerido' || e.body?.error === 'totp_invalido') {
setNeedOtp(true); setErr(e.body?.error === 'totp_invalido' ? 'Código 2FA inválido' : 'Ingresa tu código de autenticador');
} else if (e.body?.error === 'usuario_bloqueado') setErr('🔒 Cuenta bloqueada por intentos fallidos. Intenta en 15 minutos.');
else if (e.body?.error === 'usuario_inactivo') setErr('Tu cuenta está desactivada. Contacta al admin.');
else setErr(e.body?.intentos_restantes != null ? `Usuario o contraseña incorrectos. Te quedan ${e.body.intentos_restantes} intentos.` : 'Usuario o contraseña incorrectos');
} finally { setLoading(false); }
}
return (
);
}
function PortalLoginForm({ onLogin }) {
const [stickerId, setSticker] = React.useState('');
const [pin, setPin] = React.useState('');
const [err, setErr] = React.useState('');
const [loading, setLoading] = React.useState(false);
async function submit(e) {
e.preventDefault(); setErr(''); setLoading(true);
try { const r = await window.API.portalLogin(stickerId, pin); onLogin(r.user); }
catch (e) {
if (e.body?.error === 'demasiados_intentos') setErr('🔒 Demasiados intentos. Espera 5 minutos.');
else setErr('Sticker o PIN incorrectos. Verifica los datos.');
} finally { setLoading(false); }
}
return (
);
}
function SystemView({ user, navigate, toast }) {
const isAdmin = user.rol === 'admin';
const isSupervisor = user.rol === 'supervisor';
const canManageUsers = isAdmin || isSupervisor;
const tabs = [
{ id:'profile', label:'Mi perfil', show:true },
{ id:'users', label:'Usuarios', show:canManageUsers },
{ id:'config', label:'Configuración', show:isAdmin },
{ id:'webhooks', label:'Webhooks', show:isAdmin },
{ id:'audit', label:'Auditoría', show:isAdmin },
{ id:'sessions', label:'Mis sesiones', show:true },
{ id:'tokens', label:'API tokens', show:true },
].filter(t=>t.show);
// Estado inicial: si el rol del usuario no puede ver el tab default, ir al primero disponible
const [tab, setTab] = React.useState(() => tabs[0]?.id || 'profile');
React.useEffect(()=>{
if (!tabs.find(t=>t.id===tab)) setTab(tabs[0]?.id || 'profile');
},[user.rol]); // eslint-disable-line
function safeRender(panel, name) {
try { return panel; }
catch(e) {
console.error(`[SystemView] panel ${name} crashed`, e);
return Error cargando {name}: {String(e?.message||e)}
;
}
}
return (
Sistema
Administración de cuentas, seguridad y auditoría · estás como {user.rol}
{tabs.map(t=>(
))}
Error en este panel: {String(err?.message || err)}
Cambia de tab o recarga la página. Si persiste, reporta a soporte.
}>
{tab==='profile' && }
{tab==='users' && canManageUsers && }
{tab==='config' && isAdmin && }
{tab==='webhooks' && isAdmin && }
{tab==='audit' && isAdmin && }
{tab==='sessions' && }
{tab==='tokens' && }
);
}
class ErrorBoundary extends React.Component {
constructor(props){ super(props); this.state = { err: null }; }
static getDerivedStateFromError(err){ return { err }; }
componentDidCatch(err, info){ console.error('ErrorBoundary:', err, info); }
render(){ return this.state.err ? this.props.fallback(this.state.err) : this.props.children; }
}
function ProfilePanel({ user, toast }) {
const [actual, setActual] = React.useState('');
const [nueva, setNueva] = React.useState('');
const [conf, setConf] = React.useState('');
const [totp, setTotp] = React.useState(null);
const [code, setCode] = React.useState('');
async function changePwd(e) {
e.preventDefault();
if (nueva !== conf) return toast('Las contraseñas no coinciden','error');
if (nueva.length < 8) return toast('Mínimo 8 caracteres','error');
try { await window.API.changePassword(actual, nueva); toast('Contraseña actualizada'); setActual(''); setNueva(''); setConf(''); }
catch(e) { toast(e.body?.error || 'error', 'error'); }
}
async function setupTotp() {
const r = await window.API.totpSetup(); setTotp(r);
}
async function enableTotp() {
try { await window.API.totpEnable(code); toast('2FA activado'); setTotp(null); setCode(''); user.totp_enabled = true; }
catch(e) { toast('Código inválido','error'); }
}
async function disableTotp() {
if (!confirm('¿Desactivar 2FA?')) return;
await window.API.totpDisable(); toast('2FA desactivado'); user.totp_enabled = false;
}
return (
Datos de la cuenta
|
|
|
Cambiar contraseña
Autenticación de 2 factores (TOTP)
{!user.totp_enabled && !totp && (
Asegura tu cuenta con Google Authenticator, 1Password, Authy, etc.
Activar 2FA
)}
{totp && (
Escanea con tu app o introduce manualmente:
{totp.secret}
URI: {totp.uri}
setCode(e.target.value.replace(/\D/g,''))} maxLength={6} placeholder="Código 6 dígitos"
style={{padding:'8px 12px',border:'1.5px solid #e2e8f0',borderRadius:8,fontFamily:'monospace',letterSpacing:3,marginRight:10}} />
Confirmar
)}
{user.totp_enabled && (
Desactivar
)}
);
}
function UsersAdminPanel({ user, toast }) {
const [list, setList] = React.useState([]);
const [roles, setRoles] = React.useState([]);
const [showAdd, setShowAdd] = React.useState(false);
const [editing, setEditing] = React.useState(null);
React.useEffect(() => { reload(); window.API.listRoles().then(setRoles); }, []);
function reload() { window.API.listUsers().then(setList); }
return (
{list.length} usuarios del sistema
setShowAdd(true)}>+ Nuevo usuario
| Usuario |
Nombre |
Rol |
Estado |
Último login |
|
{list.map(u=>(
|
{u.username}
{u.totp_enabled && 2FA}
|
{u.nombre} |
|
{u.activo?:}{u.bloqueado_hasta && } |
{u.ultimo_login?DB.timeAgo(u.ultimo_login):'nunca'} |
setEditing(u)}>Editar
{u.id!==user.id && {
if (confirm(`¿Borrar usuario ${u.username}?`)) { await window.API.deleteUser(u.id); reload(); toast('Usuario borrado'); }
}}>Borrar}
|
))}
{showAdd &&
{
try {
const r = await window.API.createUser(form);
if (form.rol === 'supervisor' && r?.id && Array.isArray(empresaIds)) {
await window.API.setUserEmpresas(r.id, empresaIds);
}
reload(); setShowAdd(false); toast('Usuario creado');
}
catch(e){ toast(e.body?.error || 'error','error'); }
}} onClose={()=>setShowAdd(false)} />}
{editing && {
try {
await window.API.updateUser(editing.id, form);
if (form.rol === 'supervisor' && Array.isArray(empresaIds)) {
await window.API.setUserEmpresas(editing.id, empresaIds);
}
reload(); setEditing(null); toast('Usuario actualizado');
}
catch(e){ toast(e.body?.error || 'error','error'); }
}} onClose={()=>setEditing(null)} />}
);
}
function UserFormModal({ initial = {}, roles = [], onSave, onClose }) {
const [f, setF] = React.useState({
username: initial.username || '', nombre: initial.nombre || '', email: initial.email || '',
rol: initial.rol || 'operador', password: '', activo: initial.activo !== false,
company_db_id: initial.company_db_id || '',
});
const [companies, setCompanies] = React.useState([]);
// empresaIds === null → "todas las empresas" (default abierto, 0 filas)
// empresaIds === [] → ninguna asignada explícitamente
// empresaIds === [...] → solo esas
const [empresaIds, setEmpresaIds] = React.useState(null);
React.useEffect(() => {
window.API.getState().then(r => setCompanies(r?.data?.companies || []));
if (initial.id && initial.rol === 'supervisor') {
window.API.getUserEmpresas(initial.id).then(rows => {
const ids = (rows || []).map(r => r.company_db_id);
setEmpresaIds(ids.length === 0 ? null : ids);
}).catch(() => setEmpresaIds(null));
}
}, []);
const set = k => v => setF(p => ({...p, [k]:v}));
const todas = empresaIds === null;
function toggleEmpresa(id) {
setEmpresaIds(prev => {
const cur = prev === null ? companies.map(c => c.id) : prev;
return cur.includes(id) ? cur.filter(x => x !== id) : [...cur, id];
});
}
return (
({value:r.id,label:`${r.nombre} — ${r.descripcion}`}))} />
{f.rol === 'cliente' && (
({value:c.id,label:c.name})),
]} hint="Solo verá los datos de esta empresa" />
)}
{f.rol === 'supervisor' && (
Empresas asignadas
{!todas && (
{companies.length === 0 &&
No hay empresas todavía.
}
{companies.map(c => (
))}
)}
{todas ? 'Verá todas las empresas y sus tickets/equipos.' : `Verá solo las empresas seleccionadas (${(empresaIds||[]).length}).`}
)}
Cancelar
{
const out = {...f};
if (initial.id && !out.password) delete out.password;
if (out.rol !== 'cliente') out.company_db_id = null;
// empresaIds: null → [] (sin filas = ve todas), array → tal cual
const empresasToSend = out.rol === 'supervisor'
? (empresaIds === null ? [] : empresaIds)
: null;
onSave(out, empresasToSend);
}}>Guardar
);
}
function AuditPanel({ toast }) {
const [list, setList] = React.useState([]);
React.useEffect(()=>{ window.API.audit(300).then(setList); },[]);
return (
| Cuándo |
Quién |
Acción |
Recurso |
IP |
{list.map(a=>(
| {DB.formatDateTime(a.ts)} |
{a.username} |
{a.accion} |
{a.recurso||'—'} |
{a.ip||'—'} |
))}
);
}
function SessionsPanel({ toast }) {
const [list, setList] = React.useState([]);
React.useEffect(()=>{ window.API.sessions().then(setList); },[]);
return (
| Iniciada |
IP |
Navegador |
Expira |
{list.map(s=>(
| {DB.formatDateTime(s.iniciada)} |
{s.ip||'—'} |
{s.user_agent||'—'} |
{DB.formatDateTime(s.expira)} |
))}
);
}
function TokensPanel({ toast }) {
const [list, setList] = React.useState([]);
const [showAdd, setShowAdd] = React.useState(false);
const [created, setCreated] = React.useState(null);
React.useEffect(()=>{ reload(); },[]);
function reload() { window.API.listTokens().then(setList); }
return (
Tokens API para integraciones (n8n, monitoring, scripts)
setShowAdd(true)}>+ Nuevo token
{created && (
⚠ Copia este token AHORA — no se mostrará otra vez:
{created.token}
{navigator.clipboard.writeText(created.token); toast('Copiado al portapapeles');}}>Copiar
setCreated(null)}>Cerrar
)}
| Nombre |
Prefijo |
Alcance |
Estado |
|
{list.map(t=>(
| {t.nombre} |
{t.prefijo}… |
|
{t.revocado?:} |
{!t.revocado && { if(confirm('¿Revocar?')){await window.API.revokeToken(t.id); reload(); toast('Token revocado');}}}>Revocar}
|
))}
{showAdd && (
setShowAdd(false)}>
{
const r = await window.API.createToken(f.nombre, f.alcance);
setCreated(r); setShowAdd(false); reload();
}} onCancel={()=>setShowAdd(false)} />
)}
);
}
function NewTokenForm({ onSave, onCancel }) {
const [f, setF] = React.useState({ nombre:'', alcance:'read' });
return (
setF({...f,nombre:v})} placeholder="Integración n8n" />
setF({...f,alcance:v})} options={[
{value:'read',label:'Solo lectura'},
{value:'write',label:'Lectura y escritura'},
]} />
Cancelar
onSave(f)} disabled={!f.nombre}>Crear
);
}
function Row({ label, value }) {
return (
{label}
{value}
);
}