web-app/src/components/auth/UserProfile.vue
padreug 4feb5459cc Refactor authentication architecture to eliminate dual auth complexity
This major refactor consolidates the authentication system to use a single
source of truth, eliminating timing issues and architectural complexity
that was causing chat and payment functionality problems.

Key Changes:
• Remove old global useAuth composable and replace with useAuthService wrapper
• Update all 25+ files to use consistent auth pattern via dependency injection
• Eliminate dual auth detection workarounds from services (ChatService, PaymentService, etc.)
• Fix TypeScript errors and add proper Uint8Array conversion for Nostr private keys
• Consolidate auth state management to AuthService as single source of truth

Benefits:
• Resolves chat peer loading and message subscription timing issues
• Fixes wallet detection problems for Lightning payments
• Eliminates race conditions between global and injected auth
• Maintains API compatibility while improving architecture
• Reduces code complexity and improves maintainability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-07 00:47:02 +02:00

77 lines
No EOL
2.8 KiB
Vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { LogoutConfirmDialog } from '@/components/ui/LogoutConfirmDialog'
import { User, LogOut, Settings } from 'lucide-vue-next'
import { auth } from '@/composables/useAuthService'
import { toast } from 'vue-sonner'
const router = useRouter()
const userDisplay = computed(() => auth.userDisplay.value)
const showLogoutConfirm = ref(false)
function handleLogout() {
auth.logout()
toast.success('Logged out successfully')
router.push('/login')
}
</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="ghost" size="sm" @click="showLogoutConfirm = true" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10">
<LogOut class="w-4 h-4 mr-2" />
Logout
</Button>
</div>
</CardContent>
</Card>
</div>
<!-- Logout Confirm Dialog -->
<LogoutConfirmDialog v-model:is-open="showLogoutConfirm" variant="ghost" size="sm" class="flex-1 text-destructive hover:text-destructive/90 hover:bg-destructive/10" @confirm="handleLogout">
<LogOut class="w-4 h-4 mr-2" />
Logout
</LogoutConfirmDialog>
</template>