From d31a715974502a7019af8f5cda32218dc1d7f2d4 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 12 Oct 2025 03:16:01 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20agregar=20dropdown=20de=20autenticaci?=
 =?UTF-8?q?=C3=B3n=20con=20opci=C3=B3n=20de=20logout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dropdown aparece al hacer click cuando estás conectado
- Opciones: verificar estado y cerrar sesión
- Logout usa endpoint de Authentik (/outpost.goauthentik.io/sign_out)
- Desregistra Service Worker antes de logout
- Animación smooth del dropdown
- Flecha indicadora que rota al abrir/cerrar
- Diseño glassmorphism consistente con la app
---
 components/AuthIndicator.client.vue | 227 +++++++++++++++++++++++++---
 composables/useAuth.ts              |  13 ++
 2 files changed, 222 insertions(+), 18 deletions(-)

diff --git a/components/AuthIndicator.client.vue b/components/AuthIndicator.client.vue
index 277dfb6..be44064 100644
--- a/components/AuthIndicator.client.vue
+++ b/components/AuthIndicator.client.vue
@@ -1,23 +1,53 @@
 <template>
-  <button
-    class="auth-indicator"
-    :class="[authStatus, { checking: isCheckingAuth }]"
-    @click="handleClick"
-    :title="tooltipText"
-    :disabled="isCheckingAuth"
-  >
-    <component
-      :is="iconComponent"
-      :size="20"
-      class="auth-icon"
-    />
-    <span class="auth-status-text">{{ statusText }}</span>
-  </button>
+  <div class="auth-indicator-container">
+    <button
+      class="auth-indicator"
+      :class="[authStatus, { checking: isCheckingAuth, 'dropdown-open': dropdownOpen }]"
+      @click="handleClick"
+      :title="tooltipText"
+      :disabled="isCheckingAuth"
+    >
+      <component
+        :is="iconComponent"
+        :size="20"
+        class="auth-icon"
+      />
+      <span class="auth-status-text">{{ statusText }}</span>
+      <ChevronDown
+        v-if="authStatus === 'authenticated'"
+        :size="16"
+        class="dropdown-arrow"
+        :class="{ rotated: dropdownOpen }"
+      />
+    </button>
+
+    <!-- Dropdown Menu -->
+    <Teleport to="body">
+      <transition name="dropdown">
+        <div
+          v-if="dropdownOpen && authStatus === 'authenticated'"
+          class="auth-dropdown glass"
+          :style="dropdownStyle"
+          @click.stop
+        >
+          <button class="dropdown-item" @click="handleVerifyAuth">
+            <RefreshCw :size="16" />
+            <span>Verificar estado</span>
+          </button>
+          <div class="dropdown-divider"></div>
+          <button class="dropdown-item danger" @click="handleLogout">
+            <LogOut :size="16" />
+            <span>Cerrar sesión</span>
+          </button>
+        </div>
+      </transition>
+    </Teleport>
+  </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, watch } from 'vue'
-import { UserCheck, UserX, Loader, ShieldAlert } from 'lucide-vue-next'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { UserCheck, UserX, Loader, ShieldAlert, ChevronDown, RefreshCw, LogOut } from 'lucide-vue-next'
 import { useAuth } from '~/composables/useAuth'
 import { useMusicStore } from '~/stores/music'
 
@@ -28,12 +58,17 @@ const {
   authStatus,
   checkAuth,
   triggerAuth,
+  logout,
   markUnauthenticated,
   setupVisibilityListener,
   cleanupListeners
 } = useAuth()
 const musicStore = useMusicStore()
 
+// Dropdown state
+const dropdownOpen = ref(false)
+const buttonRef = ref(null)
+
 // Check auth on mount and setup listeners
 onMounted(async () => {
   // Asumimos autenticado inicialmente (si la página cargó, pasamos Authentik)
@@ -145,6 +180,31 @@ const tooltipText = computed(() => {
   }
 })
 
+// Dropdown positioning
+const dropdownStyle = computed(() => {
+  if (!process.client) return {}
+
+  // Position dropdown below the button
+  const button = document.querySelector('.auth-indicator')
+  if (!button) return {}
+
+  const rect = button.getBoundingClientRect()
+  return {
+    position: 'fixed',
+    top: `${rect.bottom + 8}px`,
+    left: `${rect.left}px`,
+    minWidth: `${rect.width}px`
+  }
+})
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const closeDropdown = () => {
+  dropdownOpen.value = false
+}
+
 const handleClick = () => {
   if (isCheckingAuth.value) return
 
@@ -152,10 +212,44 @@ const handleClick = () => {
     // Forzar reload de la página para que Authentik intercepte
     triggerAuth()
   } else if (authStatus.value === 'authenticated') {
-    // Re-check auth status (forzar, ignorar cache)
-    checkAuth(true)
+    // Abrir dropdown
+    toggleDropdown()
   }
 }
+
+const handleVerifyAuth = async () => {
+  closeDropdown()
+  await checkAuth(true)
+}
+
+const handleLogout = async () => {
+  closeDropdown()
+  await logout()
+}
+
+// Close dropdown when clicking outside
+const handleClickOutside = (event) => {
+  const dropdown = document.querySelector('.auth-dropdown')
+  const button = document.querySelector('.auth-indicator')
+
+  if (dropdown && !dropdown.contains(event.target) &&
+      button && !button.contains(event.target)) {
+    closeDropdown()
+  }
+}
+
+// Setup click outside listener
+onMounted(() => {
+  if (process.client) {
+    document.addEventListener('click', handleClickOutside)
+  }
+})
+
+onUnmounted(() => {
+  if (process.client) {
+    document.removeEventListener('click', handleClickOutside)
+  }
+})
 </script>
 
 <style scoped>
@@ -316,4 +410,101 @@ const handleClick = () => {
     background: rgba(239, 68, 68, 0.2);
   }
 }
+
+/* Container for dropdown positioning */
+.auth-indicator-container {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown arrow */
+.dropdown-arrow {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  transition: transform 0.3s ease;
+  margin-left: 4px;
+}
+
+.dropdown-arrow.rotated {
+  transform: rotate(180deg);
+}
+
+/* Dropdown Menu */
+.auth-dropdown {
+  position: fixed;
+  z-index: 10000;
+  min-width: 200px;
+  border-radius: 12px;
+  background: var(--bg-secondary);
+  backdrop-filter: blur(50px);
+  -webkit-backdrop-filter: blur(50px);
+  color: var(--text-primary);
+  border: 1px solid var(--border-glass);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+  padding: 8px;
+  overflow: hidden;
+}
+
+.dropdown-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.dropdown-item:hover {
+  background: rgba(255, 255, 255, 0.08);
+  transform: translateX(2px);
+}
+
+.dropdown-item.danger {
+  color: #ef4444;
+}
+
+.dropdown-item.danger:hover {
+  background: rgba(239, 68, 68, 0.15);
+}
+
+.dropdown-item svg {
+  flex-shrink: 0;
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--border-glass);
+  margin: 6px 0;
+}
+
+/* Dropdown animation */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s ease;
+}
+
+.dropdown-enter-from {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+}
+
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-4px) scale(0.98);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .auth-dropdown {
+    min-width: 180px;
+  }
+}
 </style>
diff --git a/composables/useAuth.ts b/composables/useAuth.ts
index 89b8c24..aeae531 100644
--- a/composables/useAuth.ts
+++ b/composables/useAuth.ts
@@ -106,6 +106,18 @@ export const useAuth = () => {
     window.location.href = window.location.origin + '/'
   }
 
+  const logout = async () => {
+    console.log('[Auth] Logging out...')
+
+    // Marcar como no autenticado y desregistrar SW
+    await markUnauthenticated()
+
+    // Navegar al endpoint de logout de Authentik
+    // Esto cerrará la sesión y redirigirá al login
+    console.log('[Auth] Navigating to Authentik logout endpoint...')
+    window.location.href = '/outpost.goauthentik.io/sign_out'
+  }
+
   const markUnauthenticated = async () => {
     // Helper para marcar como no autenticado (útil cuando detectamos 401/403)
     console.log('[Auth] Marking as unauthenticated')
@@ -188,6 +200,7 @@ export const useAuth = () => {
     authStatus,
     checkAuth,
     triggerAuth,
+    logout,
     markUnauthenticated,
     setupVisibilityListener,
     cleanupListeners