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

Add permanent 'Iniciar Sesión' button when not authenticated

Browse Source 
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]
This commit is contained in:
josedario87
2025-10-13 01:56:42 -06:00
parent 5676647f0f
commit a132fdfbf8
1 changed files with 47 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template> <template>
<UCard class="w-full"> <UCard class="w-full">
<div class="flex flex-wrap gap-3"> <div class="flex flex-wrap gap-3">
<!-- Botón de estado de sesión --> <!-- Botón de estado de sesión (siempre visible) -->
<UButton <UButton
color="info" color="info"
size="lg" size="lg"
@@ -14,34 +14,56 @@
Estado de Sesión Estado de Sesión
</UButton> </UButton>
<!-- Botón de perfil --> <!-- Botones cuando HAY sesión -->
<UButton <template v-if="isAuthenticated">
color="primary" <!-- Botón de perfil -->
size="lg" <UButton
@click="goToProfile" color="primary"
> size="lg"
<template #leading> @click="goToProfile"
<UIcon name="i-heroicons-user-circle" /> >
</template> <template #leading>
Ver Perfil <UIcon name="i-heroicons-user-circle" />
</UButton> </template>
Ver Perfil
</UButton>
<!-- Botón de logout --> <!-- Botón de logout -->
<UButton <UButton
color="error" color="error"
size="lg" size="lg"
variant="soft" variant="soft"
@click="logout" @click="logout"
> >
<template #leading> <template #leading>
<UIcon name="i-heroicons-arrow-right-on-rectangle" /> <UIcon name="i-heroicons-arrow-right-on-rectangle" />
</template> </template>
Cerrar Sesión Cerrar Sesión
</UButton> </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> </div>
</UCard> </UCard>
</template> </template>
<script setup lang="ts"> <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> </script>