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

resources/js/pages/auth/VerifyEmail.vue

@@ -1,49 +1,124 @@
 <script setup lang="ts">
-import { Form, Head } from '@inertiajs/vue3';
-import TextLink from '@/components/TextLink.vue';
+import { Head, router, useForm, usePage } from '@inertiajs/vue3';
+import { Mail } from 'lucide-vue-next';
+import { computed } from 'vue';
+import AuthFormFeedback from '@/components/AuthFormFeedback.vue';
+import FeedbackState from '@/components/FeedbackState.vue';
 import { Button } from '@/components/ui/button';
-import { Spinner } from '@/components/ui/spinner';
-import AuthLayout from '@/layouts/AuthLayout.vue';
-import { logout } from '@/routes/index';
+import { useFormProtection } from '@/composables/useFormProtection';
+import { useLocalization } from '@/composables/useLocalization';
+import AuthFlowLayout from '@/layouts/auth/AuthFlowLayout.vue';
+import { dashboard, logout } from '@/routes/index';
 import { send } from '@/routes/verification';
 
-defineProps<{
-    status?: string;
-}>();
+const props = defineProps<{ status?: string }>();
+const { t } = useLocalization();
+const page = usePage();
+const email = computed(() => page.props.auth.user?.email);
+const resendForm = useForm({});
+const logoutForm = useForm({});
+const resendProtection = useFormProtection(resendForm);
+const logoutProtection = useFormProtection(logoutForm);
+const busy = computed(() => resendForm.processing || logoutForm.processing);
+const sent = computed(
+    () =>
+        resendProtection.state.value === 'success' ||
+        (resendProtection.state.value === 'idle' &&
+            props.status === 'verification-link-sent'),
+);
+const resend = (): void => {
+    if (!busy.value) {
+        resendProtection.submit(send(), { preserveScroll: true });
+    }
+};
+const signOut = (): void => {
+    if (!busy.value) {
+        logoutProtection.submit(logout());
+    }
+};
 </script>
 
 <template>
-    <AuthLayout
-        title="Verify email"
-        description="Please verify your email address by clicking on the link we just emailed to you."
+    <AuthFlowLayout
+        :title="t('auth.verify.title')"
+        :description="t('auth.verify.description')"
+        :icon="Mail"
     >
-        <Head title="Email verification" />
-
+        <Head :title="t('auth.verify.title')" />
         <div
-            v-if="status === 'verification-link-sent'"
-            class="mb-4 text-center text-sm font-medium text-green-600"
+            v-if="email"
+            class="gap-stack bg-muted p-card grid rounded-md border"
         >
-            A new verification link has been sent to the email address you
-            provided during registration.
+            <p class="text-label text-muted-foreground uppercase tracking-wide">
+                {{ t('auth.verify.emailLabel') }}
+            </p>
+            <p class="text-body break-all font-medium">{{ email }}</p>
         </div>
-
-        <Form
-            v-bind="send.form()"
-            class="space-y-6 text-center"
-            v-slot="{ processing }"
+        <FeedbackState
+            v-if="sent"
+            state="success"
+            :title="t('auth.verify.sentTitle')"
+            :description="t('auth.verify.sentDescription')"
+        />
+        <form
+            :action="send.url()"
+            method="post"
+            class="gap-column grid"
+            @submit.prevent="resend"
         >
-            <Button :disabled="processing" variant="secondary">
-                <Spinner v-if="processing" />
-                Resend verification email
-            </Button>
-
-            <TextLink
-                :href="logout()"
-                as="button"
-                class="mx-auto block text-sm"
+            <AuthFormFeedback
+                :state="
+                    resendProtection.state.value === 'success'
+                        ? 'idle'
+                        : resendProtection.state.value
+                "
+                :response-status="resendProtection.responseStatus.value"
+                :loading-title="t('auth.verify.pending')"
+                @retry="resend"
+            />
+            <Button
+                type="submit"
+                class="w-full"
+                :disabled="busy"
+                :loading="resendForm.processing"
+                :loading-label="t('auth.verify.pending')"
+                >{{ t('auth.verify.resend') }}</Button
             >
-                Log out
-            </TextLink>
-        </Form>
-    </AuthLayout>
+        </form>
+        <div class="gap-stack pt-column grid border-t">
+            <p class="text-body text-muted-foreground">
+                {{ t('auth.verify.help') }}
+            </p>
+            <Button
+                type="button"
+                variant="outline"
+                :disabled="busy"
+                @click="router.visit(dashboard())"
+                >{{ t('auth.verify.continue') }}</Button
+            >
+        </div>
+        <form
+            :action="logout.url()"
+            method="post"
+            class="gap-card grid"
+            @submit.prevent="signOut"
+        >
+            <AuthFormFeedback
+                :state="logoutProtection.state.value"
+                :response-status="logoutProtection.responseStatus.value"
+                :loading-title="t('auth.signingOut')"
+                @retry="signOut"
+            />
+            <Button
+                type="submit"
+                variant="ghost"
+                class="w-full"
+                :disabled="busy"
+                :loading="logoutForm.processing"
+                :loading-label="t('auth.signingOut')"
+                >{{ t('auth.signOut') }}</Button
+            >
+        </form>
+        <template #footer>{{ t('auth.verify.wrongAccount') }}</template>
+    </AuthFlowLayout>
 </template>