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

resources/js/pages/auth/Login.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
+import { Head, useForm } from '@inertiajs/vue3';
+import { LogIn } from 'lucide-vue-next';
+import { onUnmounted } from 'vue';
+import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
+import FeedbackState from '@/components/FeedbackState.vue';
 import InputError from '@/components/InputError.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
 import TextLink from '@/components/TextLink.vue';
@@ -7,94 +11,114 @@ import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import AuthBase from '@/layouts/AuthLayout.vue';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import AuthFlowLayout from '@/layouts/auth/AuthFlowLayout.vue';
 import { store } from '@/routes/login';
 import { request } from '@/routes/password';
 
-defineProps<{
-    status?: string;
-    canResetPassword: boolean;
-}>();
+defineProps<{ status?: string; canResetPassword: boolean }>();
+const { t } = useLocalization();
+// Credentials stay in memory only; no remembered form key or browser storage.
+const form = useForm({ email: '', password: '', remember: false }).dontRemember(
+    'password',
+);
+const protection = useFormProtection(form, { isDirty: () => false });
+const submit = (): void =>
+    protection.submit(store(), {
+        onSuccess: () => form.reset('password'),
+    });
+onUnmounted(() => form.reset('password'));
 </script>
 
 <template>
-    <AuthBase
-        title="Log in to your account"
-        description="Enter your email and password below to log in"
+    <AuthFlowLayout
+        :title="t('auth.login.title')"
+        :description="t('auth.login.description')"
+        :icon="LogIn"
     >
-        <Head title="Log in" />
-
-        <div
+        <Head :title="t('auth.login.submit')" />
+        <FeedbackState
             v-if="status"
-            class="mb-4 text-center text-sm font-medium text-green-600"
+            state="success"
+            :title="t('auth.login.statusTitle')"
+            :description="status"
+        />
+        <form
+            :action="store.url()"
+            method="post"
+            class="grid gap-5"
+            @submit.prevent="submit"
         >
-            {{ status }}
-        </div>
-
-        <Form
-            v-bind="store.form()"
-            :reset-on-success="['password']"
-            v-slot="{ errors, processing }"
-            class="flex flex-col gap-6"
-        >
-            <div class="grid gap-6">
-                <div class="grid gap-2">
-                    <Label for="email">Email address</Label>
-                    <Input
-                        id="email"
-                        type="email"
-                        name="email"
-                        required
-                        autofocus
-                        :tabindex="1"
-                        autocomplete="email"
-                        placeholder="email@example.com"
-                    />
-                    <InputError :message="errors.email" />
-                </div>
-
-                <div class="grid gap-2">
-                    <div class="flex items-center justify-between">
-                        <Label for="password">Password</Label>
-                        <TextLink
-                            v-if="canResetPassword"
-                            :href="request()"
-                            class="text-sm"
-                            :tabindex="5"
-                        >
-                            Forgot password?
-                        </TextLink>
-                    </div>
-                    <PasswordInput
-                        id="password"
-                        name="password"
-                        required
-                        :tabindex="2"
-                        autocomplete="current-password"
-                        placeholder="Password"
-                    />
-                    <InputError :message="errors.password" />
-                </div>
-
-                <div class="flex items-center justify-between">
-                    <Label for="remember" class="flex items-center space-x-3">
-                        <Checkbox id="remember" name="remember" :tabindex="3" />
-                        <span>Remember me</span>
-                    </Label>
-                </div>
-
-                <Button
-                    type="submit"
-                    class="mt-4 w-full"
-                    :tabindex="4"
-                    :disabled="processing"
-                    data-test="login-button"
-                >
-                    <Spinner v-if="processing" />
-                    Log in
-                </Button>
+            <AuthFormFeedback
+                :state="protection.state.value"
+                :response-status="protection.responseStatus.value"
+                :loading-title="t('auth.login.pending')"
+                @retry="submit"
+            />
+            <div class="gap-stack grid">
+                <Label for="email">{{ t('auth.login.email') }}</Label>
+                <Input
+                    id="email"
+                    v-model="form.email"
+                    name="email"
+                    type="email"
+                    inputmode="email"
+                    autocomplete="username"
+                    autocapitalize="none"
+                    :spellcheck="false"
+                    required
+                    autofocus
+                    :disabled="form.processing"
+                    :placeholder="t('auth.login.emailPlaceholder')"
+                    :invalid="Boolean(form.errors.email)"
+                    aria-describedby="email-error"
+                />
+                <InputError id="email-error" :message="form.errors.email" />
             </div>
-        </Form>
-    </AuthBase>
+            <div class="gap-stack grid">
+                <Label for="password">{{ t('auth.login.password') }}</Label>
+                <PasswordInput
+                    id="password"
+                    v-model="form.password"
+                    name="password"
+                    autocomplete="current-password"
+                    required
+                    :disabled="form.processing"
+                    :invalid="Boolean(form.errors.password)"
+                    aria-describedby="password-error"
+                />
+                <InputError
+                    id="password-error"
+                    :message="form.errors.password"
+                />
+            </div>
+            <div class="gap-card flex flex-wrap items-center justify-between">
+                <Label for="remember" class="min-h-control gap-stack">
+                    <Checkbox
+                        id="remember"
+                        v-model="form.remember"
+                        name="remember"
+                        :disabled="form.processing"
+                    />
+                    {{ t('auth.login.remember') }}
+                </Label>
+                <TextLink
+                    v-if="canResetPassword"
+                    :href="request()"
+                    class="min-h-control text-body inline-flex items-center"
+                    >{{ t('auth.login.forgot') }}</TextLink
+                >
+            </div>
+            <Button
+                type="submit"
+                class="w-full"
+                :loading="form.processing"
+                :loading-label="t('auth.login.pending')"
+                data-test="login-button"
+                >{{ t('auth.login.submit') }}</Button
+            >
+        </form>
+        <template #footer>{{ t('auth.login.help') }}</template>
+    </AuthFlowLayout>
 </template>