From a132fdfbf8fcde193bda52933460586e452fe4fe Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Mon, 13 Oct 2025 01:56:42 -0600
Subject: [PATCH] =?UTF-8?q?Add=20permanent=20'Iniciar=20Sesi=C3=B3n'=20but?=
 =?UTF-8?q?ton=20when=20not=20authenticated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace 'Ver Perfil' and 'Cerrar Sesión' buttons with a prominent
'Iniciar Sesión' button when user is not authenticated. The button
reloads the page to trigger Authentik login redirect.

This provides a more accessible way to log in compared to the toast
button, which can be difficult to click.

Button layout:
- Authenticated: [Estado de Sesión] [Ver Perfil] [Cerrar Sesión]
- Not authenticated: [Estado de Sesión] [Iniciar Sesión]
---
 nuxt4/app/components/auth/ActionButtons.vue | 72 ++++++++++++++-------
 1 file changed, 47 insertions(+), 25 deletions(-)

diff --git a/nuxt4/app/components/auth/ActionButtons.vue b/nuxt4/app/components/auth/ActionButtons.vue
index dd1c573..8bbc190 100644
--- a/nuxt4/app/components/auth/ActionButtons.vue
+++ b/nuxt4/app/components/auth/ActionButtons.vue
@@ -1,7 +1,7 @@
 <template>
   <UCard class="w-full">
     <div class="flex flex-wrap gap-3">
-      <!-- Botón de estado de sesión -->
+      <!-- Botón de estado de sesión (siempre visible) -->
       <UButton
         color="info"
         size="lg"
@@ -14,34 +14,56 @@
         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>
+      <!-- Botones cuando HAY sesión -->
+      <template v-if="isAuthenticated">
+        <!-- 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 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>
+      </template>
+
+      <!-- Botón cuando NO hay sesión -->
+      <template v-else>
+        <UButton
+          color="primary"
+          size="lg"
+          @click="reloadPage"
+        >
+          <template #leading>
+            <UIcon name="i-heroicons-arrow-right-end-on-rectangle" />
+          </template>
+          Iniciar Sesión
+        </UButton>
+      </template>
     </div>
   </UCard>
 </template>
 
 <script setup lang="ts">
-const { logout, goToProfile, checkSessionStatus } = useAuthentik()
+const { logout, goToProfile, checkSessionStatus, isAuthenticated } = useAuthentik()
+
+const reloadPage = () => {
+  // Recargar la página para forzar redirect de Authentik al login
+  window.location.reload()
+}
 </script>