From b7285316cfb1ceceb916d43e5f25654038dee108 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 13 Oct 2025 01:20:45 -0600
Subject: [PATCH] Add session status check button

Add new button to check and display current session status:
- New checkSessionStatus() function in useAuthentik composable
- Displays toast notification with session info
- Shows user name if authenticated or warning if not
- Add UNotifications component to app.vue to render toasts

This allows users to quickly verify their authentication status.
---
 nuxt4/app/app.vue                           |  1 +
 nuxt4/app/components/auth/ActionButtons.vue | 15 ++++++++++++-
 nuxt4/app/composables/useAuthentik.ts       | 25 ++++++++++++++++++++-
 3 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index f1e1f4a..d58f565 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -1,6 +1,7 @@
 <template>
   <UApp>
     <NuxtRouteAnnouncer />
+    <UNotifications />
 
     <UContainer class="py-8">
       <div class="space-y-6">
diff --git a/nuxt4/app/components/auth/ActionButtons.vue b/nuxt4/app/components/auth/ActionButtons.vue
index db99b40..dd1c573 100644
--- a/nuxt4/app/components/auth/ActionButtons.vue
+++ b/nuxt4/app/components/auth/ActionButtons.vue
@@ -1,6 +1,19 @@
 <template>
   <UCard class="w-full">
     <div class="flex flex-wrap gap-3">
+      <!-- Botón de estado de sesión -->
+      <UButton
+        color="info"
+        size="lg"
+        variant="soft"
+        @click="checkSessionStatus"
+      >
+        <template #leading>
+          <UIcon name="i-heroicons-information-circle" />
+        </template>
+        Estado de Sesión
+      </UButton>
+
       <!-- Botón de perfil -->
       <UButton
         color="primary"
@@ -30,5 +43,5 @@
 </template>
 
 <script setup lang="ts">
-const { logout, goToProfile } = useAuthentik()
+const { logout, goToProfile, checkSessionStatus } = useAuthentik()
 </script>
diff --git a/nuxt4/app/composables/useAuthentik.ts b/nuxt4/app/composables/useAuthentik.ts
index f67c2b7..15e8753 100644
--- a/nuxt4/app/composables/useAuthentik.ts
+++ b/nuxt4/app/composables/useAuthentik.ts
@@ -50,10 +50,33 @@ export const useAuthentik = () => {
     navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
   }
 
+  const checkSessionStatus = () => {
+    const toast = useToast()
+
+    if (isAuthenticated.value && user.value) {
+      toast.add({
+        title: 'Sesión Activa',
+        description: `Conectado como: ${user.value.name || user.value.username}`,
+        color: 'success',
+        icon: 'i-heroicons-check-circle',
+        timeout: 5000
+      })
+    } else {
+      toast.add({
+        title: 'Sin Sesión',
+        description: 'No hay sesión activa en este momento',
+        color: 'warning',
+        icon: 'i-heroicons-exclamation-triangle',
+        timeout: 5000
+      })
+    }
+  }
+
   return {
     user,
     isAuthenticated,
     logout,
-    goToProfile
+    goToProfile,
+    checkSessionStatus
   }
 }