josedario87
76dcff31d6
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)
85 lines
2.1 KiB
Vue
85 lines
2.1 KiB
Vue
<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>
|