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>
77 lines
No EOL
2.8 KiB
Vue
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> |