feat(KAN-22): rebuild password confirmation flows

resources/js/pages/auth/ConfirmPassword.vue

@@ -1,52 +1,77 @@
 <script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
+import { Head, useForm } from '@inertiajs/vue3';
+import { ShieldCheck } from 'lucide-vue-next';
+import { onUnmounted } from 'vue';
+import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
 import InputError from '@/components/InputError.vue';
 import PasswordInput from '@/components/PasswordInput.vue';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
-import { Spinner } from '@/components/ui/spinner';
-import AuthLayout 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/password/confirm';
+
+const { t } = useLocalization();
+const form = useForm({ password: '' }).dontRemember('password');
+const protection = useFormProtection(form, { isDirty: () => false });
+const submit = (): void =>
+    protection.submit(store(), { onSuccess: () => form.reset() });
+onUnmounted(() => form.reset());
 </script>
 
 <template>
-    <AuthLayout
-        title="Confirm your password"
-        description="This is a secure area of the application. Please confirm your password before continuing."
+    <AuthFlowLayout
+        :title="t('auth.confirm.title')"
+        :description="t('auth.confirm.description')"
+        :icon="ShieldCheck"
     >
-        <Head title="Confirm password" />
-
-        <Form
-            v-bind="store.form()"
-            reset-on-success
-            v-slot="{ errors, processing }"
+        <Head :title="t('auth.confirm.title')" />
+        <form
+            :action="store.url()"
+            method="post"
+            class="grid gap-5"
+            @submit.prevent="submit"
         >
-            <div class="space-y-6">
-                <div class="grid gap-2">
-                    <Label htmlFor="password">Password</Label>
-                    <PasswordInput
-                        id="password"
-                        name="password"
-                        class="mt-1 block w-full"
-                        required
-                        autocomplete="current-password"
-                        autofocus
-                    />
-
-                    <InputError :message="errors.password" />
-                </div>
-
-                <div class="flex items-center">
-                    <Button
-                        class="w-full"
-                        :disabled="processing"
-                        data-test="confirm-password-button"
-                    >
-                        <Spinner v-if="processing" />
-                        Confirm password
-                    </Button>
-                </div>
+            <AuthFormFeedback
+                :state="protection.state.value"
+                :response-status="protection.responseStatus.value"
+                :loading-title="t('auth.confirm.pending')"
+                @retry="submit"
+            />
+            <div class="gap-stack grid">
+                <Label for="password">{{ t('auth.confirm.password') }}</Label>
+                <PasswordInput
+                    id="password"
+                    v-model="form.password"
+                    name="password"
+                    required
+                    autocomplete="current-password"
+                    autofocus
+                    :disabled="form.processing"
+                    :invalid="Boolean(form.errors.password)"
+                    aria-describedby="password-hint password-error"
+                />
+                <p
+                    id="password-hint"
+                    class="text-caption text-muted-foreground"
+                >
+                    {{ t('auth.confirm.passwordHint') }}
+                </p>
+                <InputError
+                    id="password-error"
+                    :message="form.errors.password"
+                />
             </div>
-        </Form>
-    </AuthLayout>
+            <Button
+                type="submit"
+                class="w-full"
+                :loading="form.processing"
+                :loading-label="t('auth.confirm.pending')"
+                data-test="confirm-password-button"
+                >{{ t('auth.confirm.submit') }}</Button
+            >
+        </form>
+        <template #footer>{{ t('auth.confirm.footer') }}</template>
+    </AuthFlowLayout>
 </template>