elearning/Frontend-Learner/pages/verify-email.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>