feat(#26): Add custom login form

legalconsenthub/app/pages/callback.vue

@@ -1,11 +1,30 @@
 <template>
-  <h1>Authentication callback processing...</h1>
+  <div class="min-h-screen w-full flex items-center justify-center">
+    <UCard variant="subtle" class="w-full max-w-sm text-center">
+      <div class="flex flex-col items-center gap-4 py-4">
+        <UIcon name="i-lucide-loader-circle" class="size-10 text-primary animate-spin" />
+        <p class="text-xl font-medium text-muted">
+          {{ $t('auth.redirecting') }}
+        </p>
+      </div>
+    </UCard>
+  </div>
 </template>
 
 <script setup lang="ts">
+definePageMeta({ auth: false, layout: 'auth' })
+
+const { t: $t } = useI18n()
+
 onMounted(async () => {
   const logger = useLogger().withTag('auth callback')
   try {
+    // Check if we're in a popup window opened by nuxt-auth-utils
+    if (window.opener) {
+      window.close()
+      return
+    }
+    // Regular redirect flow (not a popup)
     await navigateTo('/')
   } catch (e) {
     logger.error('Error during login', e)

legalconsenthub/app/pages/login.vue

@@ -30,10 +30,17 @@
 definePageMeta({ auth: false, layout: 'auth' })
 
 const { t: $t } = useI18n()
+const { loggedIn, openInPopup } = useUserSession()
 
 useSeoMeta({ title: $t('auth.login') })
 
+watch(loggedIn, (isLoggedIn) => {
+  if (isLoggedIn) {
+    navigateTo('/')
+  }
+})
+
 function handleSignIn() {
-  navigateTo('/auth/keycloak', { external: true })
+  openInPopup('/auth/keycloak')
 }
 </script>