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>

legalconsenthub/i18n/locales/de.json

@@ -175,7 +175,8 @@
     "redirectMessage": "Sie werden zur Authentifizierung zu Keycloak weitergeleitet",
     "signIn": "Mit Keycloak anmelden",
     "termsAgreement": "Mit der Anmeldung stimmen Sie unseren Nutzungsbedingungen zu",
-    "login": "Anmelden"
+    "login": "Anmelden",
+    "redirecting": "Sie werden weitergeleitet"
   },
   "error": {
     "pageNotFound": "Seite nicht gefunden",

legalconsenthub/i18n/locales/en.json

@@ -175,7 +175,8 @@
     "redirectMessage": "You will be redirected to Keycloak to authenticate",
     "signIn": "Sign in with Keycloak",
     "termsAgreement": "By signing in, you agree to our terms of service",
-    "login": "Login"
+    "login": "Login",
+    "redirecting": "You are being redirected"
   },
   "error": {
     "pageNotFound": "Page not found",

legalconsenthub/server/routes/auth/keycloak.get.ts

@@ -38,7 +38,7 @@ export default defineOAuthKeycloakEventHandler({
       loggedInAt: Date.now()
     })
 
-    return sendRedirect(event, '/')
+    return sendRedirect(event, '/callback')
   },
 
   onError(event) {