padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: Transition to authentication system and remove identity management

Browse source 
- Replace identity management with a new authentication system across the application.
- Update App.vue to integrate LoginDialog and remove PasswordDialog.
- Modify Navbar.vue to handle user authentication state and logout functionality.
- Enhance Home.vue to display user information upon login.
- Implement routing changes in index.ts to enforce authentication requirements for protected routes.
This commit is contained in:
padreug 2025-07-29 23:10:31 +02:00
parent 5ceb12ca3b
commit be4ab13b32
11 changed files with 1065 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/layout/Navbar.vue
View file

@ -5,10 +5,9 @@ import { useTheme } from '@/components/theme-provider'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { Sun, Moon, Menu, X, User, Key, LogOut } from 'lucide-vue-next'
import { Sun, Moon, Menu, X, User, LogOut } from 'lucide-vue-next'
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
import IdentityDialog from '@/components/nostr/IdentityDialog.vue'
import { identity } from '@/composables/useIdentity'
import { auth } from '@/composables/useAuth'
interface NavigationItem {
name: string
@ -18,7 +17,6 @@ interface NavigationItem {
const { t } = useI18n()
const { theme, setTheme } = useTheme()
const isOpen = ref(false)
const showIdentityDialog = ref(false)
const navigation = computed<NavigationItem[]>(() => [
{ name: t('nav.home'), href: '/' },
@ -34,11 +32,13 @@ const toggleTheme = () => {
setTheme(theme.value === 'dark' ? 'light' : 'dark')
}
const openIdentityDialog = () => {
console.log('openIdentityDialog called')
showIdentityDialog.value = true
// Close mobile menu when opening dialog
isOpen.value = false
const handleLogout = async () => {
try {
await auth.logout()
isOpen.value = false
} catch (error) {
console.error('Logout failed:', error)
}
}
</script>
@ -66,36 +66,32 @@ const openIdentityDialog = () => {
<!-- Theme Toggle, Language, and Identity -->
<div class="flex items-center gap-2">
<!-- Identity Management -->
<!-- Authentication Management -->
<div class="hidden sm:block">
<DropdownMenu v-if="identity.isAuthenticated.value">
<DropdownMenu v-if="auth.isAuthenticated.value">
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="sm" class="gap-2">
<User class="h-4 w-4" />
<span class="max-w-24 truncate">{{ identity.profileDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs">Connected</Badge>
<span class="max-w-24 truncate">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs">Logged In</Badge>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" class="w-56">
<DropdownMenuItem @click="openIdentityDialog" class="gap-2">
<DropdownMenuItem class="gap-2">
<User class="h-4 w-4" />
Profile
</DropdownMenuItem>
<DropdownMenuItem @click="openIdentityDialog" class="gap-2">
<Key class="h-4 w-4" />
Keys
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="identity.signOut()" class="gap-2 text-destructive">
<DropdownMenuItem @click="handleLogout" class="gap-2 text-destructive">
<LogOut class="h-4 w-4" />
Sign Out
Logout
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Button v-else variant="outline" size="sm" @click="openIdentityDialog" class="gap-2">
<Button v-else variant="outline" size="sm" class="gap-2">
<User class="h-4 w-4" />
Connect Identity
Login
</Button>
</div>
@ -125,28 +121,28 @@ const openIdentityDialog = () => {
<div v-show="isOpen"
class="absolute left-0 right-0 top-14 z-40 border-b bg-background/95 backdrop-blur-sm md:hidden">
<div class="space-y-1 p-4">
<!-- Identity in mobile menu -->
<!-- Authentication in mobile menu -->
<div class="mb-4 px-2">
<Button v-if="!identity.isAuthenticated.value" variant="outline" size="sm" @click="openIdentityDialog"
<Button v-if="!auth.isAuthenticated.value" variant="outline" size="sm"
class="w-full gap-2 min-h-[44px] touch-manipulation">
<User class="h-4 w-4" />
Connect Identity
Login
</Button>
<div v-else class="space-y-2">
<div class="flex items-center gap-2 px-2 py-1">
<User class="h-4 w-4" />
<span class="text-sm font-medium">{{ identity.profileDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs ml-auto">Connected</Badge>
<span class="text-sm font-medium">{{ auth.userDisplay.value?.name || 'Anonymous' }}</span>
<Badge variant="secondary" class="text-xs ml-auto">Logged In</Badge>
</div>
<div class="space-y-1">
<Button variant="ghost" size="sm" @click="openIdentityDialog" class="w-full justify-start gap-2">
<Button variant="ghost" size="sm" class="w-full justify-start gap-2">
<User class="h-4 w-4" />
Profile
</Button>
<Button variant="ghost" size="sm" @click="identity.signOut(); isOpen = false"
<Button variant="ghost" size="sm" @click="handleLogout"
class="w-full justify-start gap-2 text-destructive">
<LogOut class="h-4 w-4" />
Sign Out
Logout
</Button>
</div>
</div>
@ -172,7 +168,5 @@ const openIdentityDialog = () => {
</div>
</div>
<!-- Identity Dialog -->
<IdentityDialog v-model:is-open="showIdentityDialog" />
</nav>
</template>