Feat: Reorganizar UI - Sistema de catación como página principal
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m2s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m2s
- Crear componente CataUserInfo con estilo mobile-first del sistema de catación - Mover "/" para redirigir automáticamente a /cata - Incluir información del usuario en página de catación - Mantener estilo consistente con diseño outline/terminal del sistema - Optimizar componente de usuario para mobile (compacto y funcional)
This commit is contained in:
84
nuxt4/app/components/cata/UserInfo.vue
Normal file
84
nuxt4/app/components/cata/UserInfo.vue
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="user" class="cata-user-info">
|
||||||
|
<div class="cata-outline-box rounded-lg p-4">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<!-- Avatar simple con inicial -->
|
||||||
|
<div class="user-avatar cata-outline-box">
|
||||||
|
<span class="cata-text text-xl font-semibold">
|
||||||
|
{{ userInitial }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Info del usuario -->
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<h3 class="cata-text font-semibold text-base sm:text-lg truncate">
|
||||||
|
{{ user.name || user.username }}
|
||||||
|
</h3>
|
||||||
|
<p class="cata-text text-xs sm:text-sm opacity-60 truncate">
|
||||||
|
{{ user.email }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Botón de logout compacto -->
|
||||||
|
<button
|
||||||
|
class="cata-button p-2 flex-shrink-0"
|
||||||
|
@click="handleLogout"
|
||||||
|
title="Cerrar sesión"
|
||||||
|
>
|
||||||
|
<UIcon name="i-lucide-log-out" class="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const { user } = useAuthentik()
|
||||||
|
|
||||||
|
// Obtener la inicial del usuario
|
||||||
|
const userInitial = computed(() => {
|
||||||
|
if (!user.value) return '?'
|
||||||
|
const name = user.value.name || user.value.username || user.value.email || '?'
|
||||||
|
return name.charAt(0).toUpperCase()
|
||||||
|
})
|
||||||
|
|
||||||
|
// Manejar logout
|
||||||
|
const handleLogout = () => {
|
||||||
|
// Redirigir al endpoint de logout de Authentik
|
||||||
|
window.location.href = '/outpost.goauthentik.io/sign_out'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.cata-user-info {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background-color: color-mix(in srgb, var(--cata-primary) 5%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .user-avatar {
|
||||||
|
background-color: color-mix(in srgb, var(--cata-primary) 10%, transparent);
|
||||||
|
box-shadow: 0 0 8px color-mix(in srgb, var(--cata-primary) 20%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive adjustments */
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.user-avatar {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar .cata-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="cata-page cata-text">
|
<div class="cata-page cata-text">
|
||||||
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
<div class="container mx-auto px-4 py-8 max-w-4xl">
|
||||||
|
<!-- Información del usuario -->
|
||||||
|
<div v-if="isAuthenticated" class="mb-6 cata-fade-in">
|
||||||
|
<CataUserInfo />
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="text-center mb-12">
|
<div class="text-center mb-12">
|
||||||
<h1 class="text-4xl sm:text-5xl font-bold mb-3 cata-text dark:cata-glow">
|
<h1 class="text-4xl sm:text-5xl font-bold mb-3 cata-text dark:cata-glow">
|
||||||
@@ -182,21 +187,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Link para volver al home -->
|
|
||||||
<div class="text-center mt-12">
|
|
||||||
<NuxtLink
|
|
||||||
to="/"
|
|
||||||
class="text-sm cata-text opacity-60 hover:opacity-100 transition-opacity"
|
|
||||||
>
|
|
||||||
<UIcon name="i-lucide-arrow-left" class="w-4 h-4 inline mr-1" />
|
|
||||||
Volver al inicio
|
|
||||||
</NuxtLink>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
const { isAuthenticated } = useAuthentik()
|
||||||
|
|
||||||
const {
|
const {
|
||||||
sesionActiva,
|
sesionActiva,
|
||||||
cargando,
|
cargando,
|
||||||
|
|||||||
@@ -1,127 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<UContainer class="py-8">
|
<div />
|
||||||
<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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const { isAuthenticated } = useAuthentik()
|
// Redirigir automáticamente al sistema de catación
|
||||||
|
definePageMeta({
|
||||||
useHead({
|
middleware: () => {
|
||||||
title: 'RioCata - Inicio',
|
return navigateTo('/cata', { replace: true })
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user