feat(KAN-21): rebuild login verification and two-factor flows

2026-09-11 14:18:23 +02:00
parent 5e52e4fe78
commit 802294d6a2
17 changed files with 1294 additions and 250 deletions
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { ShieldCheck } from 'lucide-vue-next';
+import type { Component } from 'vue';
+import AppLogo from '@/components/AppLogo.vue';
+import AppearanceTabs from '@/components/AppearanceTabs.vue';
+import { useLocalization } from '@/composables/useLocalization';
+import { home } from '@/routes/index';
+
+defineProps<{ title: string; description: string; icon?: Component }>();
+const { t } = useLocalization();
+</script>
+
+<template>
+    <div class="bg-background text-foreground flex min-h-dvh flex-col">
+        <header
+            class="bg-card px-page flex justify-center border-b py-4 sm:justify-start"
+        >
+            <Link
+                :href="home()"
+                :aria-label="t('auth.home')"
+                class="focus-visible:ring-ring/35 rounded-md outline-none focus-visible:ring-2"
+                ><AppLogo
+            /></Link>
+        </header>
+        <main
+            class="gap-column sm:px-page mx-auto flex w-full max-w-md flex-1 flex-col justify-center px-4 py-8 sm:py-12"
+        >
+            <section
+                aria-labelledby="auth-title"
+                class="bg-card p-page text-card-foreground shadow-xs grid gap-6 rounded-md border"
+            >
+                <div class="gap-column grid">
+                    <span
+                        class="bg-primary/10 text-primary flex size-11 items-center justify-center rounded-md"
+                    >
+                        <component
+                            :is="icon ?? ShieldCheck"
+                            class="size-5"
+                            aria-hidden="true"
+                        />
+                    </span>
+                    <div class="gap-stack grid">
+                        <p
+                            class="text-label text-muted-foreground uppercase tracking-wide"
+                        >
+                            {{ t('auth.accountAccess') }}
+                        </p>
+                        <h1
+                            id="auth-title"
+                            class="text-headline-mobile sm:text-headline"
+                        >
+                            {{ title }}
+                        </h1>
+                        <p class="text-body text-muted-foreground">
+                            {{ description }}
+                        </p>
+                    </div>
+                </div>
+                <slot />
+            </section>
+            <div
+                v-if="$slots.footer"
+                class="px-card text-body text-muted-foreground text-center"
+            >
+                <slot name="footer" />
+            </div>
+        </main>
+        <footer class="pb-page flex justify-center px-4">
+            <AppearanceTabs />
+        </footer>
+    </div>
+</template>