fix auth

app/pages/index.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-/* ── Time ── */
+const { data: session } = useAuth()
+
+const userName = computed(() => session.value?.user?.name || 'User')
+
 const timeGreeting = computed(() => {
   const h = new Date().getHours()
   if (h < 12) return 'Good morning'
@@ -18,7 +21,7 @@ const currentDate = computed(() =>
       <!-- Greeting -->
       <div class="mb-12">
         <h1 class="text-3xl font-semibold tracking-tight text-[var(--text-primary)]">
-          {{ timeGreeting }}, User
+          {{ timeGreeting }}, {{ userName }}
         </h1>
         <p class="mt-1 text-sm text-[var(--text-muted)]">{{ currentDate }}</p>
       </div>

app/pages/login.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+definePageMeta({
+  auth: false
+})
+
+const { signIn, status } = useAuth()
+
+const isLoading = ref(false)
+const isAuthenticated = computed(() => status.value === 'authenticated')
+
+watch(isAuthenticated, (authenticated) => {
+  if (authenticated) {
+    navigateTo('/')
+  }
+})
+
+async function loginWithZitadel() {
+  try {
+    isLoading.value = true
+    await signIn('zitadel', { callbackUrl: '/' })
+  } catch (error) {
+    console.error('Login failed:', error)
+    isLoading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex items-center justify-center" style="background: var(--page-bg);">
+    <div class="w-full max-w-md p-8 rounded-xl border" style="background: var(--surface); border-color: var(--card-border);">
+      <div class="text-center mb-8">
+        <h1 class="text-2xl font-semibold" style="color: var(--text-primary);">
+          Welcome to Segur-OS
+        </h1>
+        <p class="mt-2 text-sm" style="color: var(--text-muted);">
+          Sign in to access your insurance management dashboard
+        </p>
+      </div>
+
+      <button
+        type="button"
+        :disabled="isLoading"
+        @click="loginWithZitadel"
+        class="w-full flex items-center justify-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        style="background: var(--brand); color: white;"
+      >
+        <UIcon v-if="isLoading" name="i-heroicons-arrow-path" class="h-5 w-5 animate-spin" />
+        <UIcon v-else name="i-heroicons-lock-closed" class="h-5 w-5" />
+        <span>{{ isLoading ? 'Signing in...' : 'Sign in with Zitadel' }}</span>
+      </button>
+
+      <div class="mt-6 text-center text-xs" style="color: var(--text-muted);">
+        <p>Secure authentication powered by Zitadel</p>
+      </div>
+    </div>
+  </div>
+</template>