elearning/frontend_management/pages/verify-email.vue

<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-blue-100 p-4">
    <div class="w-full max-w-md">
      <q-card class="rounded-2xl shadow-xl">
        <q-card-section class="text-center py-10 px-8">
          <!-- Loading State -->
          <template v-if="loading">
            <q-spinner color="primary" size="60px" class="mb-6" />
            <h1 class="text-2xl font-bold text-gray-800 mb-2">กำลังยืนยันอีเมล...</h1>
            <p class="text-gray-500">กรุณารอสักครู่</p>
          </template>

          <!-- Success State -->
          <template v-else-if="verified">
            <div class="w-20 h-20 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6">
              <q-icon name="check_circle" size="60px" color="positive" />
            </div>
            <h1 class="text-2xl font-bold text-gray-800 mb-2">ยืนยันอีเมลสำเร็จ!</h1>
            <p class="text-gray-500 mb-6">{{ message || 'อีเมลของคุณได้รับการยืนยันเรียบร้อยแล้ว' }}</p>
            <q-btn
              color="primary"
              label="กลับสู่หน้าหลัก"
              class="px-8"
              @click="navigateTo('/instructor')"
            />
          </template>

          <!-- Error State -->
          <template v-else-if="error">
            <div class="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-6">
              <q-icon name="error" size="60px" color="negative" />
            </div>
            <h1 class="text-2xl font-bold text-gray-800 mb-2">ยืนยันอีเมลไม่สำเร็จ</h1>
            <p class="text-gray-500 mb-6">{{ message || 'ลิงก์ยืนยันอีเมลไม่ถูกต้องหรือหมดอายุ' }}</p>
            <div class="flex flex-col gap-3">
              <q-btn
                color="primary"
                label="เข้าสู่ระบบ"
                class="px-8"
                @click="navigateTo('/login')"
              />
              <q-btn
                flat
                color="grey-7"
                label="ขอลิงก์ใหม่"
                @click="resendVerification"
                :loading="resending"
              />
            </div>
          </template>

          <!-- No Token State -->
          <template v-else>
            <div class="w-20 h-20 rounded-full bg-orange-100 flex items-center justify-center mx-auto mb-6">
              <q-icon name="warning" size="60px" color="warning" />
            </div>
            <h1 class="text-2xl font-bold text-gray-800 mb-2">ไม่พบ Token</h1>
            <p class="text-gray-500 mb-6">ไม่พบ Token สำหรับยืนยันอีเมล กรุณาตรวจสอบลิงก์อีกครั้ง</p>
            <q-btn
              color="primary"
              label="กลับสู่หน้าหลัก"
              class="px-8"
              @click="navigateTo('/')"
            />
          </template>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { authService } from '~/services/auth.service';

definePageMeta({
  layout: 'blank'
});

const route = useRoute();

const loading = ref(false);
const verified = ref(false);
const error = ref(false);
const message = ref('');
const resending = ref(false);

const verifyEmail = async (token: string) => {
  loading.value = true;
  error.value = false;
  verified.value = false;
  
  try {
    const response = await authService.verifyEmail(token);
    verified.value = true;
    message.value = response.message || '';
  } catch (err: any) {
    error.value = true;
    message.value = err.data?.message || err.data?.error?.message || 'ลิงก์ยืนยันอีเมลไม่ถูกต้องหรือหมดอายุ';
  } finally {
    loading.value = false;
  }
};

const resendVerification = async () => {
  resending.value = true;
  try {
    await authService.sendVerifyEmail();
    message.value = 'ส่งอีเมลยืนยันใหม่แล้ว กรุณาตรวจสอบอีเมลของคุณ';
    error.value = false;
  } catch (err: any) {
    message.value = err.data?.message || 'กรุณาเข้าสู่ระบบก่อนขอลิงก์ยืนยันใหม่';
  } finally {
    resending.value = false;
  }
};

onMounted(() => {
  const token = route.query.token as string;
  if (token) {
    verifyEmail(token);
  }
});
</script>

<style scoped>
.bg-green-100 {
  background-color: #dcfce7;
}

.bg-red-100 {
  background-color: #fee2e2;
}

.bg-orange-100 {
  background-color: #ffedd5;
}
</style>