nucleo000/perfil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor auth components into individual button components

Browse Source 
- 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
This commit is contained in:
josedario87
2025-10-13 03:00:02 -06:00
parent 0fd25e34e6
commit d8f70f2aa5
7 changed files with 90 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
nuxt4/app/app.vue
View File

@@ -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 -->

64
nuxt4/app/components/auth/ActionButtons.vue
View File

@@ -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>

19
nuxt4/app/components/auth/LoginButton.vue Normal file
View File

@@ -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>

21
nuxt4/app/components/auth/LogoutButton.vue Normal file
View File

@@ -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>

20
nuxt4/app/components/auth/ProfileButton.vue Normal file
View File

@@ -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>

21
nuxt4/app/components/auth/SessionStatusButton.vue Normal file
View File

@@ -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>

46
nuxt4/app/components/auth/StatusBadges.vue
View File

@@ -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>