josedario87
7de670d824
- Create useAuthentik composable to read headers - Add UserAvatar component with avatar and user info - Add StatusBadges for auth/connection status - Add ActionButtons for logout and profile - Add UserMetadata component with full user details - Integrate all components in main page - Use Nuxt UI components throughout
21 lines
592 B
Vue
21 lines
592 B
Vue
<template>
|
|
<UCard v-if="user" class="w-full">
|
|
<div class="flex items-center gap-4">
|
|
<UAvatar
|
|
:src="user.avatar"
|
|
:alt="user.name || user.username"
|
|
size="xl"
|
|
/>
|
|
<div class="flex-1">
|
|
<h3 class="font-semibold text-lg">{{ user.name || user.username }}</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{{ user.email }}</p>
|
|
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">ID: {{ user.uid }}</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { user } = useAuthentik()
|
|
</script>
|