webapp/src/components/auth/ProfileDialog.vue

<script setup lang="ts">
import { computed } from 'vue'
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
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, Key, Wallet, ExternalLink } from 'lucide-vue-next'
import { auth } from '@/composables/useAuth'
import { toast } from 'vue-sonner'

interface Props {
  isOpen: boolean
}

interface Emits {
  (e: 'update:isOpen', value: boolean): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

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

// Get the API base URL from environment variables
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || ''

function handleLogout() {
  auth.logout()
  toast.success('Logged out successfully')
  handleClose()
}

function handleOpenWallet() {
  if (!auth.currentUser.value?.id) {
    toast.error('User ID not available')
    return
  }
  
  const walletUrl = `${apiBaseUrl}/wallet?usr=${auth.currentUser.value.id}`
  window.open(walletUrl, '_blank')
  toast.success('Opening wallet in new tab')
}

function handleClose() {
  emit('update:isOpen', false)
}
</script>

<template>
  <Dialog :open="isOpen" @update:open="handleClose">
    <DialogContent class="sm:max-w-[500px]">
      <DialogHeader>
        <DialogTitle class="flex items-center gap-2">
          <User class="w-5 h-5" />
          User Profile
        </DialogTitle>
        <DialogDescription>
          Your account information and settings
        </DialogDescription>
      </DialogHeader>

      <div v-if="userDisplay" class="space-y-6">
        <!-- User Info Card -->
        <Card>
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <User class="w-5 h-5" />
              Account Information
            </CardTitle>
            <CardDescription>
              Your profile details
            </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>
          </CardContent>
        </Card>

        <!-- Actions Card -->
        <Card>
          <CardHeader>
            <CardTitle class="flex items-center gap-2">
              <Settings class="w-5 h-5" />
              Account Actions
            </CardTitle>
            <CardDescription>
              Manage your account settings
            </CardDescription>
          </CardHeader>
          <CardContent class="space-y-4">
            <div class="grid gap-3">
              <Button variant="outline" @click="handleOpenWallet" class="w-full justify-start gap-2">
                <Wallet class="w-4 h-4" />
                Open Wallet
                <ExternalLink class="w-3 h-3 ml-auto" />
              </Button>
              
              <Button variant="outline" class="w-full justify-start gap-2">
                <Settings class="w-4 h-4" />
                Account Settings
              </Button>
              
              <Button variant="outline" class="w-full justify-start gap-2">
                <Key class="w-4 h-4" />
                Change Password
              </Button>
              
              <Button variant="destructive" @click="handleLogout" class="w-full justify-start gap-2">
                <LogOut class="w-4 h-4" />
                Logout
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      <div v-else class="text-center py-8">
        <User class="w-12 h-12 mx-auto text-muted-foreground mb-4" />
        <p class="text-muted-foreground">No user information available</p>
      </div>
    </DialogContent>
  </Dialog>
</template>