- Reemplaza dropdown manual por componente DropdownMenu con radix-vue
- Agrega avoid-collisions y collision-padding para posicionamiento automático
- El menú ahora se ajusta automáticamente cuando no hay espacio horizontal
- Actualiza DropdownMenuItem para soportar prop 'as' y 'href' para enlaces
- Botón de info (ℹ) en la barra superior
- Documentación completa sobre:
- Sesiones (estados, ciclo de vida, limitaciones)
- Eventos FreeRADIUS (authorize, post-auth, accounting)
- Usuarios normales y sus características
- Invitados (temporales, auto-deshabilitación)
- Dispositivos (MAC, relación con usuarios)
- Flujo completo de conexión WiFi
- Nueva tabla `sesiones` para historial persistente de conexiones
- Job de detección de stale cada 2 min (10 min idle = desconectado)
- Inicialización resiliente desde BD al arrancar el servidor
- Nuevos endpoints: /api/sessions, /api/sessions/history, /api/sessions.csv
- Nueva vista "Sesiones" en el dashboard con estadísticas
- Historial integrado en UserCard y DispositivoCard
- Estadísticas de bytes in/out y duración por sesión
- Retención configurable de historial (90 días por defecto)
- Solo actualizar users/devices si los datos realmente cambiaron
- Aumentar debounce de SSE de 1s a 3s para reducir frecuencia de updates
- Evitar re-renders innecesarios comparando JSON antes de actualizar
- Ocultar botones de colapsar en vista desktop
- En móvil, contenedores colapsados ocupan solo el alto del header
- Mantener comportamiento desktop (52px width cuando colapsado)
- Mejorar UX en dispositivos móviles evitando contenedores inutilizables
PROBLEMA:
- Frontend hacía fetch a APIs protegidas por Authentik
- Cuando sesión expiraba, Authentik redirigía causando error de CORS
- TypeError: Failed to fetch
SOLUCIÓN:
1. Backend inyecta window.__AUTHENTIK_USER__ en HTML inicial (app.js)
- Servidor lee headers de Authentik y los pasa al frontend
- Evita fetch innecesario en carga inicial
2. Frontend usa window.__AUTHENTIK_USER__ como fuente principal (useAuthentik.js)
- Solo hace fetch cuando se fuerza refresh
- Detecta errores de CORS como señal de sesión expirada
- Muestra mensaje claro al usuario
3. App.vue detecta errores de autenticación en APIs
- Cuando fetch falla con CORS, recarga página automáticamente
- Authentik manejará la re-autenticación
SEGURIDAD:
- Todos los endpoints /api/* siguen protegidos por Authentik
- No se exponen APIs sin autenticación
- Headers de Authentik solo presentes con sesión válida
- Backend: Nuevos endpoints /api/auth/status y /api/auth/check-group
- Frontend: Composable useAuthentik para gestión de autenticación
- Frontend: Componentes UserDropdown, UserAvatar, SessionStatusButton, GroupCheckButton
- Frontend: Integración en topbar con dropdown de usuario
- Config: URLs de Authentik y configuración de avatares
- Lectura de headers x-authentik-* inyectados por Traefik
- Verificación de grupos RBAC (frontend y backend)
- Validación de sesión contra Authentik
Cambios:
- Crear componente Toast.vue con soporte para posiciones (top/bottom, left/center/right)
- Crear composable useToast.js para manejar notificaciones
- Integrar sistema de toast en App.vue
- Implementar detección de PWA:
* Detecta si el usuario está en modo standalone (PWA instalada)
* Si puede instalar, muestra toast con botón de instalación
* Si ya está instalada pero no se usa, sugiere abrir en app
- Toast persistente hasta que el usuario interactúe
- Soporte para tema claro/oscuro
- Animaciones suaves y diseño moderno
- Responsive para móviles
El sistema permite mostrar toasts de tipo: success, error, warning, info, pwa
con opciones de posición, duración, acciones personalizadas y modo persistente.
Cambios en App.vue:
- Agregar botón Inicio con emoji 🏠 en el topbar
- Botón apunta a https://inicio.nucleoriofrio.com
- Posicionado al inicio de la sección de acciones
- Usa clase .icon-btn para consistencia visual
El botón usa scope extensions para navegar dentro de la PWA.
