josedario87
43bcf4a647
This commit implements a comprehensive, reusable group verification system: Components: - GroupCheckButton: Base component for group verification - 7 specialized buttons: 3 real groups (authentik Admins, grupo-prueba, lvl0), 1 public access test, 2 system verification buttons - All buttons support both frontend and backend verification modes Backend: - New API endpoint /api/auth/check-group for server-side group validation - Reads Authentik headers and validates group membership Frontend: - Enhanced useAuthentik composable with hasGroup() and checkGroupBackend() methods - Toast notifications for all verification results - Smooth animations and color-coded visual feedback UI Improvements: - Organized layout with cards for different verification types - Grid layout for group buttons - Professional styling with hover effects and shadows - Clear visual distinction between frontend/backend checks
123 lines
4.4 KiB
Vue
123 lines
4.4 KiB
Vue
<template>
|
|
<UApp>
|
|
<NuxtRouteAnnouncer />
|
|
<UNotifications />
|
|
|
|
<UContainer class="py-8">
|
|
<div class="space-y-6">
|
|
<!-- Header -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-4xl font-bold mb-2">Plantilla Nuxt + Authentik</h1>
|
|
<p class="text-gray-600 dark:text-gray-400">
|
|
Ejemplo de integración con Authentik Proxy Outpost
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Componentes de autenticación -->
|
|
<div v-if="isAuthenticated" class="grid gap-6 lg:grid-cols-2">
|
|
<!-- Columna izquierda -->
|
|
<div class="space-y-6">
|
|
<!-- Avatar y datos básicos -->
|
|
<AuthUserAvatar />
|
|
|
|
<!-- Botones de acción individuales -->
|
|
<UCard class="w-full">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold">Acciones de Sesión</h3>
|
|
</template>
|
|
<div class="flex flex-wrap gap-3">
|
|
<AuthSessionStatusButton />
|
|
<AuthProfileButton />
|
|
<AuthLogoutButton />
|
|
<AuthLoginButton />
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Verificaciones Frontend/Backend -->
|
|
<UCard class="w-full">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-cpu-chip" class="w-5 h-5" />
|
|
<h3 class="text-lg font-semibold">Verificación de Sistema</h3>
|
|
</div>
|
|
</template>
|
|
<div class="flex flex-wrap gap-3">
|
|
<AuthFrontendVerificationButton />
|
|
<AuthBackendVerificationButton />
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
|
|
<!-- Columna derecha -->
|
|
<div class="space-y-6">
|
|
<!-- Metadatos completos -->
|
|
<AuthUserMetadata />
|
|
|
|
<!-- Verificaciones de Grupos Frontend -->
|
|
<UCard class="w-full">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-user-group" class="w-5 h-5 text-purple-500" />
|
|
<h3 class="text-lg font-semibold">Grupos (Frontend)</h3>
|
|
</div>
|
|
</template>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<AuthCheckAuthentikAdminsButton />
|
|
<AuthCheckGrupoPruebaButton />
|
|
<AuthCheckLvl0Button />
|
|
<AuthCheckPublicAccessButton />
|
|
</div>
|
|
</UCard>
|
|
|
|
<!-- Verificaciones de Grupos Backend -->
|
|
<UCard class="w-full">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UIcon name="i-heroicons-server-stack" class="w-5 h-5 text-orange-500" />
|
|
<h3 class="text-lg font-semibold">Grupos (Backend)</h3>
|
|
</div>
|
|
</template>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<AuthCheckAuthentikAdminsButton :verify-backend="true" />
|
|
<AuthCheckGrupoPruebaButton :verify-backend="true" />
|
|
<AuthCheckLvl0Button :verify-backend="true" />
|
|
<AuthCheckPublicAccessButton :verify-backend="true" />
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mensaje si no está autenticado -->
|
|
<UCard v-else class="text-center">
|
|
<div class="py-8">
|
|
<UIcon name="i-heroicons-shield-exclamation" class="w-16 h-16 mx-auto mb-4 text-gray-400" />
|
|
<h2 class="text-2xl font-semibold mb-2">No autenticado</h2>
|
|
<p class="text-gray-600 dark:text-gray-400">
|
|
Authentik Proxy Outpost debería redirigirte automáticamente.
|
|
</p>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</UContainer>
|
|
</UApp>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { isAuthenticated } = useAuthentik()
|
|
|
|
// Configurar meta tags para PWA
|
|
useHead({
|
|
link: [
|
|
{ rel: 'manifest', href: '/manifest.webmanifest' },
|
|
{ rel: 'icon', type: 'image/svg+xml', href: '/icon.svg' },
|
|
{ rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
|
|
],
|
|
meta: [
|
|
{ name: 'theme-color', content: '#00DC82' },
|
|
{ name: 'mobile-web-app-capable', content: 'yes' },
|
|
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
|
{ name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
|
|
]
|
|
})
|
|
</script>
|