chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: student page and create email verification page.

Browse source
This commit is contained in:
Missez 2026-02-03 17:13:30 +07:00
parent 52d86400b3
commit e8a10e5024
6 changed files with 894 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

137
frontend_management/pages/verify-email.vue Normal file
View file

@ -0,0 +1,137 @@
<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>