Add session status check button
Add new button to check and display current session status: - New checkSessionStatus() function in useAuthentik composable - Displays toast notification with session info - Shows user name if authenticated or warning if not - Add UNotifications component to app.vue to render toasts This allows users to quickly verify their authentication status.
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<UApp>
|
<UApp>
|
||||||
<NuxtRouteAnnouncer />
|
<NuxtRouteAnnouncer />
|
||||||
|
<UNotifications />
|
||||||
|
|
||||||
<UContainer class="py-8">
|
<UContainer class="py-8">
|
||||||
<div class="space-y-6">
|
<div class="space-y-6">
|
||||||
|
|||||||
@@ -1,6 +1,19 @@
|
|||||||
<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 -->
|
||||||
|
<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 -->
|
<!-- Botón de perfil -->
|
||||||
<UButton
|
<UButton
|
||||||
color="primary"
|
color="primary"
|
||||||
@@ -30,5 +43,5 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { logout, goToProfile } = useAuthentik()
|
const { logout, goToProfile, checkSessionStatus } = useAuthentik()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -50,10 +50,33 @@ export const useAuthentik = () => {
|
|||||||
navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
|
navigateTo(`${authentikUrl}/if/user/`, { external: true, open: { target: '_blank' } })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const checkSessionStatus = () => {
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
|
if (isAuthenticated.value && user.value) {
|
||||||
|
toast.add({
|
||||||
|
title: 'Sesión Activa',
|
||||||
|
description: `Conectado como: ${user.value.name || user.value.username}`,
|
||||||
|
color: 'success',
|
||||||
|
icon: 'i-heroicons-check-circle',
|
||||||
|
timeout: 5000
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
toast.add({
|
||||||
|
title: 'Sin Sesión',
|
||||||
|
description: 'No hay sesión activa en este momento',
|
||||||
|
color: 'warning',
|
||||||
|
icon: 'i-heroicons-exclamation-triangle',
|
||||||
|
timeout: 5000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
user,
|
user,
|
||||||
isAuthenticated,
|
isAuthenticated,
|
||||||
logout,
|
logout,
|
||||||
goToProfile
|
goToProfile,
|
||||||
|
checkSessionStatus
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user