webapp/src/components/auth/UserProfile.vue

<script setup lang="ts">
import { computed } from 'vue'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { User, LogOut, Settings } from 'lucide-vue-next'
import { auth } from '@/composables/useAuth'
import { toast } from 'vue-sonner'

const userDisplay = computed(() => auth.userDisplay.value)

async function handleLogout() {
  try {
    await auth.logout()
    toast.success('Logged out successfully')
  } catch (error) {
    toast.error('Failed to logout')
  }
}
</script>

<template>
  <div v-if="userDisplay" class="space-y-4">
    <Card>
      <CardHeader>
        <CardTitle class="flex items-center gap-2">
          <User class="w-5 h-5" />
          User Profile
        </CardTitle>
        <CardDescription>
          Your account information
        </CardDescription>
      </CardHeader>
      <CardContent class="space-y-4">
        <div class="grid gap-4">
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium">Name:</span>
            <span class="text-sm">{{ userDisplay.name }}</span>
          </div>
          
          <div v-if="userDisplay.username" class="flex items-center justify-between">
            <span class="text-sm font-medium">Username:</span>
            <span class="text-sm">{{ userDisplay.username }}</span>
          </div>
          
          <div v-if="userDisplay.email" class="flex items-center justify-between">
            <span class="text-sm font-medium">Email:</span>
            <span class="text-sm">{{ userDisplay.email }}</span>
          </div>
          
          <div class="flex items-center justify-between">
            <span class="text-sm font-medium">User ID:</span>
            <Badge variant="secondary" class="text-xs">{{ userDisplay.shortId }}</Badge>
          </div>
        </div>
        
        <div class="flex gap-2 pt-4">
          <Button variant="outline" size="sm" class="flex-1">
            <Settings class="w-4 h-4 mr-2" />
            Settings
          </Button>
          <Button variant="destructive" size="sm" @click="handleLogout" class="flex-1">
            <LogOut class="w-4 h-4 mr-2" />
            Logout
          </Button>
        </div>
      </CardContent>
    </Card>
  </div>
</template>