From d8f70f2aa547dacfb8dc47bb8a783321988d9968 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 13 Oct 2025 03:00:02 -0600
Subject: [PATCH] Refactor auth components into individual button components

- Remove StatusBadges component (badges for authenticated, connected, groups)
- Remove ActionButtons component
- Create individual button components:
  - SessionStatusButton: handles session status check
  - ProfileButton: navigates to user profile
  - LogoutButton: handles user logout
  - LoginButton: reloads page to trigger login
- Update app.vue to use new individual button components
- Improve code quality with better component separation and reusability
---
 nuxt4/app/app.vue                             | 14 ++--
 nuxt4/app/components/auth/ActionButtons.vue   | 64 -------------------
 nuxt4/app/components/auth/LoginButton.vue     | 19 ++++++
 nuxt4/app/components/auth/LogoutButton.vue    | 21 ++++++
 nuxt4/app/components/auth/ProfileButton.vue   | 20 ++++++
 .../components/auth/SessionStatusButton.vue   | 21 ++++++
 nuxt4/app/components/auth/StatusBadges.vue    | 46 -------------
 7 files changed, 90 insertions(+), 115 deletions(-)
 delete mode 100644 nuxt4/app/components/auth/ActionButtons.vue
 create mode 100644 nuxt4/app/components/auth/LoginButton.vue
 create mode 100644 nuxt4/app/components/auth/LogoutButton.vue
 create mode 100644 nuxt4/app/components/auth/ProfileButton.vue
 create mode 100644 nuxt4/app/components/auth/SessionStatusButton.vue
 delete mode 100644 nuxt4/app/components/auth/StatusBadges.vue

diff --git a/nuxt4/app/app.vue b/nuxt4/app/app.vue
index d58f565..0d640f8 100644
--- a/nuxt4/app/app.vue
+++ b/nuxt4/app/app.vue
@@ -20,11 +20,15 @@
             <!-- Avatar y datos básicos -->
             <AuthUserAvatar />
 
-            <!-- Badges de estado -->
-            <AuthStatusBadges />
-
-            <!-- Botones de acción -->
-            <AuthActionButtons />
+            <!-- Botones de acción individuales -->
+            <UCard class="w-full">
+              <div class="flex flex-wrap gap-3">
+                <AuthSessionStatusButton />
+                <AuthProfileButton />
+                <AuthLogoutButton />
+                <AuthLoginButton />
+              </div>
+            </UCard>
           </div>
 
           <!-- Columna derecha -->
diff --git a/nuxt4/app/components/auth/ActionButtons.vue b/nuxt4/app/components/auth/ActionButtons.vue
deleted file mode 100644
index 5840f22..0000000
--- a/nuxt4/app/components/auth/ActionButtons.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<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"
-        size="lg"
-        @click="goToProfile"
-      >
-        <template #leading>
-          <UIcon name="i-heroicons-user-circle" />
-        </template>
-        Ver Perfil
-      </UButton>
-
-      <!-- Botón de logout -->
-      <UButton
-        color="error"
-        size="lg"
-        variant="soft"
-        @click="logout"
-      >
-        <template #leading>
-          <UIcon name="i-heroicons-arrow-right-on-rectangle" />
-        </template>
-        Cerrar Sesión
-      </UButton>
-
-      <!-- Botón de iniciar sesión (siempre visible) -->
-      <UButton
-        color="success"
-        size="lg"
-        @click="reloadPage"
-      >
-        <template #leading>
-          <UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
-        </template>
-        Iniciar Sesión
-      </UButton>
-    </div>
-  </UCard>
-</template>
-
-<script setup lang="ts">
-const { logout, goToProfile, checkSessionStatus, isAuthenticated } = useAuthentik()
-
-const reloadPage = () => {
-  // Recargar la página para forzar redirect de Authentik al login
-  window.location.reload()
-}
-</script>
diff --git a/nuxt4/app/components/auth/LoginButton.vue b/nuxt4/app/components/auth/LoginButton.vue
new file mode 100644
index 0000000..b02a705
--- /dev/null
+++ b/nuxt4/app/components/auth/LoginButton.vue
@@ -0,0 +1,19 @@
+<template>
+  <UButton
+    color="success"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
+    </template>
+    Iniciar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const handleClick = () => {
+  // Recargar la página para forzar redirect de Authentik al login
+  window.location.reload()
+}
+</script>
diff --git a/nuxt4/app/components/auth/LogoutButton.vue b/nuxt4/app/components/auth/LogoutButton.vue
new file mode 100644
index 0000000..193012d
--- /dev/null
+++ b/nuxt4/app/components/auth/LogoutButton.vue
@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="error"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-arrow-right-on-rectangle" />
+    </template>
+    Cerrar Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { logout } = useAuthentik()
+
+const handleClick = () => {
+  logout()
+}
+</script>
diff --git a/nuxt4/app/components/auth/ProfileButton.vue b/nuxt4/app/components/auth/ProfileButton.vue
new file mode 100644
index 0000000..11d81ff
--- /dev/null
+++ b/nuxt4/app/components/auth/ProfileButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <UButton
+    color="primary"
+    size="lg"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-user-circle" />
+    </template>
+    Ver Perfil
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { goToProfile } = useAuthentik()
+
+const handleClick = () => {
+  goToProfile()
+}
+</script>
diff --git a/nuxt4/app/components/auth/SessionStatusButton.vue b/nuxt4/app/components/auth/SessionStatusButton.vue
new file mode 100644
index 0000000..68b6465
--- /dev/null
+++ b/nuxt4/app/components/auth/SessionStatusButton.vue
@@ -0,0 +1,21 @@
+<template>
+  <UButton
+    color="info"
+    size="lg"
+    variant="soft"
+    @click="handleClick"
+  >
+    <template #leading>
+      <UIcon name="i-heroicons-information-circle" />
+    </template>
+    Estado de Sesión
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const { checkSessionStatus } = useAuthentik()
+
+const handleClick = () => {
+  checkSessionStatus()
+}
+</script>
diff --git a/nuxt4/app/components/auth/StatusBadges.vue b/nuxt4/app/components/auth/StatusBadges.vue
deleted file mode 100644
index b99eee5..0000000
--- a/nuxt4/app/components/auth/StatusBadges.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <UCard class="w-full">
-    <div class="flex flex-wrap gap-2">
-      <!-- Estado de autenticación -->
-      <UBadge
-        :color="isAuthenticated ? 'success' : 'error'"
-        size="lg"
-        variant="subtle"
-      >
-        <template #leading>
-          <UIcon :name="isAuthenticated ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" />
-        </template>
-        {{ isAuthenticated ? 'Autenticado' : 'No autenticado' }}
-      </UBadge>
-
-      <!-- Estado de conexión -->
-      <UBadge
-        color="success"
-        size="lg"
-        variant="subtle"
-      >
-        <template #leading>
-          <UIcon name="i-heroicons-signal" />
-        </template>
-        Conectado
-      </UBadge>
-
-      <!-- Número de grupos -->
-      <UBadge
-        v-if="user"
-        color="primary"
-        size="lg"
-        variant="subtle"
-      >
-        <template #leading>
-          <UIcon name="i-heroicons-user-group" />
-        </template>
-        {{ user.groups.length }} {{ user.groups.length === 1 ? 'Grupo' : 'Grupos' }}
-      </UBadge>
-    </div>
-  </UCard>
-</template>
-
-<script setup lang="ts">
-const { user, isAuthenticated } = useAuthentik()
-</script>