refactor: Transition to authentication system and remove identity management

- 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.

src/components/auth/UserProfile.vue

@@ -0,0 +1,70 @@
+<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>