149 lines
4.3 KiB
Vue
149 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file verify-email.vue
|
|
* @description Page for handling email verification process.
|
|
* Displays loading state while processing token, then shows success or error message.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: 'auth'
|
|
})
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const { t } = useI18n()
|
|
const { verifyEmail } = useAuth()
|
|
|
|
const isLoading = ref(true)
|
|
const isSuccess = ref(false)
|
|
const errorMessage = ref('')
|
|
|
|
onMounted(async () => {
|
|
const token = route.query.token as string
|
|
|
|
if (!token) {
|
|
isLoading.value = false
|
|
isSuccess.value = false
|
|
errorMessage.value = t('auth.invalidToken')
|
|
return
|
|
}
|
|
|
|
// Call verify API
|
|
const result = await verifyEmail(token)
|
|
|
|
isLoading.value = false
|
|
|
|
if (result.success) {
|
|
isSuccess.value = true
|
|
} else {
|
|
isSuccess.value = false
|
|
if (result.code === 400) {
|
|
errorMessage.value = t('profile.emailAlreadyVerified')
|
|
// If already verified, show success state with specific message
|
|
isSuccess.value = true
|
|
} else if (result.code === 401) {
|
|
errorMessage.value = t('auth.tokenExpired')
|
|
} else {
|
|
errorMessage.value = result.error || t('common.error')
|
|
}
|
|
}
|
|
})
|
|
|
|
const navigateToHome = () => {
|
|
router.push('/dashboard/profile')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-[#0f172a]">
|
|
<div class="auth-card max-w-md w-full space-y-8 p-8 rounded-2xl text-center">
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="isLoading" class="flex flex-col items-center justify-center py-8">
|
|
<q-spinner-dots size="4rem" color="primary" />
|
|
<h2 class="mt-6 text-xl font-bold text-slate-900 dark:text-white animate-pulse">
|
|
{{ $t('auth.verifyingEmail') }}
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Success State -->
|
|
<div v-else-if="isSuccess" class="flex flex-col items-center animate-bounce-in">
|
|
<div class="w-24 h-24 rounded-full bg-green-500 flex items-center justify-center mb-10 shadow-lg shadow-green-500/20">
|
|
<q-icon name="check" class="text-5xl text-white font-black" />
|
|
</div>
|
|
|
|
<h2 class="text-3xl font-black text-slate-900 dark:text-white mb-2">
|
|
{{ errorMessage && errorMessage !== '' ? (errorMessage) : ($t('auth.emailVerified')) }}
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400 mb-8">
|
|
{{ $t('auth.emailVerifiedDesc') }}
|
|
</p>
|
|
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
class="w-full py-3 font-bold text-lg shadow-lg shadow-blue-500/30"
|
|
:label="$t('common.backToHome')"
|
|
@click="navigateToHome"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else class="flex flex-col items-center animate-shake">
|
|
<div class="w-24 h-24 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-6">
|
|
<q-icon name="error" class="text-6xl text-red-500" />
|
|
</div>
|
|
|
|
<h2 class="text-2xl font-black text-slate-900 dark:text-white mb-2">
|
|
{{ $t('common.error') }}
|
|
</h2>
|
|
<p class="text-red-500 font-medium mb-8">
|
|
{{ errorMessage }}
|
|
</p>
|
|
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="slate-700"
|
|
class="w-full py-3 font-bold text-lg"
|
|
:label="$t('common.tryAgain')"
|
|
@click="router.push('/')"
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.animate-bounce-in {
|
|
animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
}
|
|
|
|
.animate-shake {
|
|
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
|
|
}
|
|
|
|
.auth-card {
|
|
@apply bg-white border-slate-100 shadow-xl;
|
|
border-width: 1px;
|
|
}
|
|
.dark .auth-card {
|
|
@apply bg-[#1e293b] border-white/5 shadow-none;
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% { transform: scale(0.3); opacity: 0; }
|
|
50% { transform: scale(1.05); opacity: 1; }
|
|
70% { transform: scale(0.9); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
@keyframes shake {
|
|
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
|
20%, 80% { transform: translate3d(2px, 0, 0); }
|
|
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
|
40%, 60% { transform: translate3d(4px, 0, 0); }
|
|
}
|
|
</style>
|