Files
laravel-nuxt-ui-inertia-tem…/resources/js/Pages/Auth/VerifyEmail.vue

49 lines
1.3 KiB
Vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3'
import { computed } from 'vue'
import { useAuth } from '@/composables/useAuth'
import AuthLayout from '@/layouts/AuthLayout.vue'
const { flash } = useAuth()
const form = useForm('VerifyEmailForm', {})
function resend() {
form.post('/email/verification-notification')
}
const linkSent = computed(() => flash.status === 'verification-link-sent')
</script>
<template>
<AuthLayout>
<div class="flex flex-col items-center gap-4 text-center">
<UIcon name="i-lucide-mail-check" class="text-primary size-12" />
<h2 class="text-xl font-semibold">
Verify your email
</h2>
<p class="text-muted text-sm">
We've sent a verification link to your email address. Please check your inbox and click the link to verify your account.
</p>
<UAlert
v-if="linkSent"
color="success"
icon="i-lucide-check-circle"
title="A new verification link has been sent to your email address."
class="w-full"
/>
<UButton
:loading="form.processing"
:disabled="form.processing"
variant="soft"
block
@click="resend"
>
Resend verification email
</UButton>
</div>
</AuthLayout>
</template>