Feature: Agregar modal de información del sistema
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 27s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 27s
- 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
This commit is contained in:
@@ -46,6 +46,7 @@ const layoutMode = ref('user');
|
|||||||
const theme = ref(localStorage.getItem('theme') || 'dark');
|
const theme = ref(localStorage.getItem('theme') || 'dark');
|
||||||
const statusText = ref('OK');
|
const statusText = ref('OK');
|
||||||
const showSettingsMenu = ref(false);
|
const showSettingsMenu = ref(false);
|
||||||
|
const showInfoModal = ref(false);
|
||||||
|
|
||||||
async function fetchUsers() {
|
async function fetchUsers() {
|
||||||
loading.users = true;
|
loading.users = true;
|
||||||
@@ -407,6 +408,13 @@ async function handleUserFormSubmit(data) {
|
|||||||
<Button as="a" href="https://inicio.nucleoriofrio.com" variant="ghost">
|
<Button as="a" href="https://inicio.nucleoriofrio.com" variant="ghost">
|
||||||
🏠 Inicio
|
🏠 Inicio
|
||||||
</Button>
|
</Button>
|
||||||
|
<Button variant="ghost" size="icon" @click="showInfoModal = true" title="Información del sistema">
|
||||||
|
<svg class="size-4 opacity-90" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||||
|
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
<Button variant="ghost" size="icon" @click="toggleTheme">
|
<Button variant="ghost" size="icon" @click="toggleTheme">
|
||||||
<img class="size-4 opacity-90" :src="theme === 'light' ? '/icons/moon.svg' : '/icons/sun.svg'" alt="theme">
|
<img class="size-4 opacity-90" :src="theme === 'light' ? '/icons/moon.svg' : '/icons/sun.svg'" alt="theme">
|
||||||
</Button>
|
</Button>
|
||||||
@@ -665,6 +673,148 @@ async function handleUserFormSubmit(data) {
|
|||||||
</div>
|
</div>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
|
<!-- Info Modal -->
|
||||||
|
<Modal :open="showInfoModal" title="Información del Sistema RADIUS" @close="showInfoModal = false">
|
||||||
|
<div class="space-y-6 max-h-[70vh] overflow-y-auto scroll-custom pr-2">
|
||||||
|
<!-- Sesiones -->
|
||||||
|
<section>
|
||||||
|
<h3 class="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||||
|
<svg class="size-5 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<polyline points="12 6 12 12 16 14"></polyline>
|
||||||
|
</svg>
|
||||||
|
Sesiones
|
||||||
|
</h3>
|
||||||
|
<div class="text-sm text-muted space-y-2">
|
||||||
|
<p>Una <strong class="text-foreground">sesión</strong> representa el período de tiempo durante el cual un dispositivo está conectado a la red WiFi.</p>
|
||||||
|
<p><strong class="text-foreground">Estados de sesión:</strong></p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||||
|
<li><Badge variant="pink" class="text-[10px]">active</Badge> — Dispositivo actualmente conectado y enviando datos</li>
|
||||||
|
<li><Badge variant="warning" class="text-[10px]">stale</Badge> — Sin actividad por más de 10 minutos (posible desconexión sin notificar)</li>
|
||||||
|
<li><Badge variant="secondary" class="text-[10px]">stopped</Badge> — Sesión finalizada correctamente</li>
|
||||||
|
</ul>
|
||||||
|
<p class="mt-2"><strong class="text-foreground">Información disponible:</strong> Usuario, dispositivo (MAC), hora de inicio/fin, duración, datos transferidos (bytes enviados/recibidos).</p>
|
||||||
|
<p><strong class="text-foreground">Limitación:</strong> Si un dispositivo se desconecta abruptamente (batería, pérdida de señal), puede quedar como "stale" hasta que el sistema lo detecte.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Eventos FreeRADIUS -->
|
||||||
|
<section>
|
||||||
|
<h3 class="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||||
|
<svg class="size-5 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path>
|
||||||
|
<polyline points="14 2 14 8 20 8"></polyline>
|
||||||
|
</svg>
|
||||||
|
Eventos FreeRADIUS
|
||||||
|
</h3>
|
||||||
|
<div class="text-sm text-muted space-y-2">
|
||||||
|
<p>El servidor RADIUS recibe eventos del Access Point (NAS) en tiempo real:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1.5 ml-2">
|
||||||
|
<li><strong class="text-foreground">authorize</strong> — Cuando un dispositivo intenta conectarse. Se verifica usuario/contraseña y se decide si permitir acceso.</li>
|
||||||
|
<li><strong class="text-foreground">post-auth</strong> — Después de autenticación exitosa. Se asigna VLAN y se registra el dispositivo.</li>
|
||||||
|
<li><strong class="text-foreground">accounting</strong> — Durante la sesión:
|
||||||
|
<ul class="list-disc list-inside ml-4 mt-1 space-y-0.5">
|
||||||
|
<li><em>Start</em> — Inicio de sesión</li>
|
||||||
|
<li><em>Interim-Update</em> — Actualización periódica con estadísticas</li>
|
||||||
|
<li><em>Stop</em> — Fin de sesión (desconexión)</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><strong class="text-foreground">coa-disconnect</strong> — Desconexión forzada desde la interfaz (Change of Authorization).</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Usuarios -->
|
||||||
|
<section>
|
||||||
|
<h3 class="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||||
|
<svg class="size-5 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="12" cy="7" r="4"></circle>
|
||||||
|
</svg>
|
||||||
|
Usuarios
|
||||||
|
</h3>
|
||||||
|
<div class="text-sm text-muted space-y-2">
|
||||||
|
<p>Los <strong class="text-foreground">usuarios normales</strong> son cuentas permanentes para acceso a la red:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||||
|
<li>Tienen usuario y contraseña únicos</li>
|
||||||
|
<li>Se les asigna una VLAN específica</li>
|
||||||
|
<li>Pueden conectar múltiples dispositivos</li>
|
||||||
|
<li>Pueden ser deshabilitados temporalmente sin eliminar la cuenta</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Invitados -->
|
||||||
|
<section>
|
||||||
|
<h3 class="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||||
|
<svg class="size-5 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||||
|
<circle cx="8.5" cy="7" r="4"></circle>
|
||||||
|
<line x1="20" y1="8" x2="20" y2="14"></line>
|
||||||
|
<line x1="23" y1="11" x2="17" y2="11"></line>
|
||||||
|
</svg>
|
||||||
|
Invitados
|
||||||
|
</h3>
|
||||||
|
<div class="text-sm text-muted space-y-2">
|
||||||
|
<p>Los <strong class="text-foreground">invitados</strong> son usuarios temporales para visitantes:</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||||
|
<li>Creados con un solo clic mediante el botón "Invitado"</li>
|
||||||
|
<li>Se asignan automáticamente a la VLAN de invitados (VLAN 5)</li>
|
||||||
|
<li>Tienen la etiqueta <Badge variant="secondary" class="text-[10px]">invitado</Badge></li>
|
||||||
|
<li>El usuario se genera aleatoriamente (ej: invitado_a3x9)</li>
|
||||||
|
<li><strong class="text-foreground">Auto-deshabilitación:</strong> Si se configura, el usuario se deshabilita automáticamente después de cierto tiempo</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Dispositivos -->
|
||||||
|
<section>
|
||||||
|
<h3 class="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||||
|
<svg class="size-5 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
|
||||||
|
<line x1="12" y1="18" x2="12.01" y2="18"></line>
|
||||||
|
</svg>
|
||||||
|
Dispositivos
|
||||||
|
</h3>
|
||||||
|
<div class="text-sm text-muted space-y-2">
|
||||||
|
<p>Los <strong class="text-foreground">dispositivos</strong> son los equipos físicos que se conectan (teléfonos, laptops, etc.):</p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||||
|
<li>Se identifican por su dirección <strong class="text-foreground">MAC</strong> (única para cada dispositivo)</li>
|
||||||
|
<li>Se registran automáticamente cuando un usuario se conecta</li>
|
||||||
|
<li>Pueden tener un nombre descriptivo (ej: "iPhone de Juan")</li>
|
||||||
|
<li>Un dispositivo puede pertenecer a múltiples usuarios (compartido)</li>
|
||||||
|
<li>Se puede desconectar un dispositivo específico sin afectar otros del mismo usuario</li>
|
||||||
|
</ul>
|
||||||
|
<p class="mt-2"><strong class="text-foreground">Relación Usuario-Dispositivo:</strong></p>
|
||||||
|
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||||
|
<li><em>dispositivos_utilizados</em> — Todos los dispositivos que ha usado el usuario</li>
|
||||||
|
<li><em>dispositivos_conectados</em> — Dispositivos actualmente conectados</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Flujo de conexión -->
|
||||||
|
<section>
|
||||||
|
<h3 class="text-lg font-semibold mb-2 flex items-center gap-2">
|
||||||
|
<svg class="size-5 text-pink-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
|
||||||
|
</svg>
|
||||||
|
Flujo de Conexión
|
||||||
|
</h3>
|
||||||
|
<div class="text-sm text-muted space-y-2">
|
||||||
|
<ol class="list-decimal list-inside space-y-1.5 ml-2">
|
||||||
|
<li>Dispositivo intenta conectarse al WiFi con usuario/contraseña</li>
|
||||||
|
<li>Access Point (NAS) envía solicitud <em>authorize</em> al servidor RADIUS</li>
|
||||||
|
<li>RADIUS verifica credenciales y responde Accept/Reject</li>
|
||||||
|
<li>Si es Accept, NAS envía <em>post-auth</em> y luego <em>accounting Start</em></li>
|
||||||
|
<li>Durante la conexión, NAS envía <em>Interim-Updates</em> periódicos</li>
|
||||||
|
<li>Al desconectar, NAS envía <em>accounting Stop</em></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
|
||||||
<!-- Toast System -->
|
<!-- Toast System -->
|
||||||
<Toast position="top-center" />
|
<Toast position="top-center" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user