Fix: Corregir app.vue para usar NuxtPage y crear página de inicio
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m3s

- Simplificar app.vue para usar <NuxtPage /> correctamente
- Crear index.vue con contenido de autenticación de Authentik
- Agregar enlace a la aplicación de catación desde el inicio
- Esto permite que las rutas /cata y /cata/sesion se rendericen correctamente
This commit is contained in:
2025-10-18 01:50:00 -06:00
parent 87fb92d210
commit 231c901e1c
2 changed files with 128 additions and 97 deletions

View File

@@ -2,103 +2,7 @@
<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">RioCata</h1>
<p class="text-gray-600 dark:text-gray-400">
Sistema de Catastro del Río - Gestión Integral
</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>
<NuxtPage />
</UApp>
</template>

127
nuxt4/app/pages/index.vue Normal file
View File

@@ -0,0 +1,127 @@
<template>
<UContainer class="py-8">
<div class="space-y-6">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-4xl font-bold mb-2">RioCata</h1>
<p class="text-gray-600 dark:text-gray-400">
Sistema de Catastro del Río - Gestión Integral
</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>
<!-- Link a catación -->
<UCard class="w-full">
<template #header>
<div class="flex items-center gap-2">
<UIcon name="i-lucide-coffee" class="w-5 h-5 text-primary" />
<h3 class="text-lg font-semibold">Aplicaciones</h3>
</div>
</template>
<NuxtLink to="/cata" class="block p-4 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-colors">
<div class="flex items-center gap-3">
<UIcon name="i-lucide-coffee" class="w-6 h-6 text-primary" />
<div>
<h4 class="font-semibold">Sistema de Catación de Café</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
Gestión de sesiones de catación y evaluación sensorial
</p>
</div>
</div>
</NuxtLink>
</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>
</template>
<script setup lang="ts">
const { isAuthenticated } = useAuthentik()
useHead({
title: 'RioCata - Inicio',
})
</script>