125 lines
4.3 KiB
Vue
125 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
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 { 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';
|
|
|
|
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>
|
|
<AuthFlowLayout
|
|
:title="t('auth.verify.title')"
|
|
:description="t('auth.verify.description')"
|
|
:icon="Mail"
|
|
>
|
|
<Head :title="t('auth.verify.title')" />
|
|
<div
|
|
v-if="email"
|
|
class="gap-stack bg-muted p-card grid rounded-md border"
|
|
>
|
|
<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>
|
|
<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"
|
|
>
|
|
<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
|
|
>
|
|
</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>
|