Files
perfil/nuxt4/app/app.vue
josedario87 b1caa15089 Trigger: Reintentar build del fix user.ts
El build anterior del commit b6a58e8 no completó el push de las
imágenes Docker al registro. Este commit trivial triggerea el
workflow de nuevo para que se complete correctamente el build
y deploy del fix que unifica user.ts (GET y PATCH en un solo archivo).
2025-10-16 19:02:00 -06:00

126 lines
4.5 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">
<AuthEditProfileButton />
<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' }
]
})
// Trigger rebuild: fix b6a58e8 con user.ts unificado
</script>