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

Feature: Rediseño completo con tema día/noche y fondos animados
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 54s
Details

Browse Source 
- Implementar sistema de tema día/noche con persistencia en localStorage
- Crear componente AnimatedBackground con paisajes SVG animados
- Generar todos los assets SVG desde cero (sol, luna, estrellas, nubes, montañas)
- Añadir animaciones suaves para nubes, estrellas y elementos del paisaje
- Rediseñar UserHeader como componente principal clickeable
- Integrar modal de edición de perfil en el header
- Reorganizar layout principal mostrando solo aplicaciones
- Mejorar diseño de ApplicationsList con glassmorphism
- Implementar efectos hover y transiciones elegantes
- Diseño responsive mobile-first
- Diferencias visuales notorias entre modo día y noche
This commit is contained in:
josedario87
2025-10-16 21:46:22 -06:00
parent 9ebc97c784
commit 01139f4415
5 changed files with 1112 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
nuxt4/app/app.vue
View File

@@ -3,114 +3,47 @@
<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 revisando cambios
</p>
</div>
<!-- Fondo animado -->
<AnimatedBackground />
<!-- Componentes de autenticación -->
<!-- Contenido principal -->
<div class="main-content">
<UContainer class="py-8">
<div v-if="isAuthenticated" class="space-y-6">
<!-- Lista de aplicaciones (ancho completo) -->
<!-- Header principal con info del usuario -->
<UserHeader />
<!-- Lista de aplicaciones -->
<AuthApplicationsList />
<!-- Grid de 2 columnas para el resto -->
<div 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>
<!-- Acciones rápidas en footer transparente -->
<div class="quick-actions">
<AuthSessionStatusButton />
<AuthProfileButton />
<AuthLogoutButton />
</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>
<div v-else class="auth-message">
<UCard class="text-center">
<div class="py-12">
<UIcon name="i-heroicons-shield-exclamation" class="w-20 h-20 mx-auto mb-6 text-gray-400" />
<h2 class="text-3xl font-bold mb-3">No autenticado</h2>
<p class="text-gray-600 dark:text-gray-400 text-lg">
Authentik Proxy Outpost debería redirigirte automáticamente.
</p>
</div>
</UCard>
</div>
</UContainer>
</div>
</UApp>
</template>
<script setup lang="ts">
const { isAuthenticated } = useAuthentik()
const { isNight } = useTheme()
// Configurar meta tags para PWA
useHead({
@@ -126,6 +59,55 @@ useHead({
{ name: 'apple-mobile-web-app-status-bar-style', content: 'default' }
]
})
// Build con user.ts unificado (GET y PATCH)
</script>
<style scoped>
.main-content {
position: relative;
z-index: 1;
min-height: 100vh;
padding-top: 2rem;
}
.quick-actions {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border-radius: 1rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
:global(.dark) .quick-actions {
background: rgba(30, 30, 40, 0.7);
}
.auth-message {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
/* Mejorar estilos de las cards en el tema oscuro */
:global(.dark) :global(.card) {
background: rgba(30, 30, 40, 0.8);
backdrop-filter: blur(10px);
}
/* Responsive */
@media (max-width: 768px) {
.main-content {
padding-top: 1rem;
}
.quick-actions {
flex-direction: column;
align-items: stretch;
}
}
</style>