feat: Implement initial landing pages, authentication flows, and course browsing functionality with i18n.
This commit is contained in:
supalerk-ar66
parent
7de5457170
commit
b60a3853cd
12 changed files with 822 additions and 606 deletions
|
|
@ -37,7 +37,7 @@ onMounted(() => {
|
|||
E
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black text-lg leading-none tracking-tight text-white group-hover:text-blue-400 transition-colors">E-Learning</span>
|
||||
<span class="font-black text-lg leading-none tracking-tight text-slate-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">E-Learning</span>
|
||||
<span class="text-[10px] font-bold text-slate-500 uppercase tracking-[0.2em] leading-none mt-1">Platform</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
|
@ -46,13 +46,13 @@ onMounted(() => {
|
|||
<nav class="hidden md:block">
|
||||
<ul class="flex items-center gap-8 text-sm font-bold">
|
||||
<li>
|
||||
<NuxtLink to="/browse" class="text-slate-400 hover:text-white transition-colors relative group">
|
||||
<NuxtLink to="/browse" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-white transition-colors relative group">
|
||||
{{ $t('landing.allCourses') }}
|
||||
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/browse/discovery" class="text-slate-400 hover:text-white transition-colors relative group">
|
||||
<NuxtLink to="/browse/discovery" class="text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-white transition-colors relative group">
|
||||
{{ $t('landing.discovery') }}
|
||||
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
|
||||
</NuxtLink>
|
||||
|
|
@ -66,7 +66,7 @@ onMounted(() => {
|
|||
-->
|
||||
<div class="flex items-center gap-4">
|
||||
<template v-if="!isAuthenticated">
|
||||
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-300 hover:text-white px-4 py-2 transition-colors">{{ $t('auth.login') }}</NuxtLink>
|
||||
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-white px-6 py-2.5 rounded-xl border border-slate-200 dark:border-white/10 hover:bg-slate-50 dark:hover:bg-white/5 transition-all">{{ $t('auth.login') }}</NuxtLink>
|
||||
<NuxtLink to="/auth/register" class="btn-primary-premium shadow-lg shadow-blue-600/20">
|
||||
{{ $t('auth.getStarted') }}
|
||||
</NuxtLink>
|
||||
|
|
@ -91,8 +91,13 @@ onMounted(() => {
|
|||
|
||||
/* Glassmorphism Effect for Scrolled Header */
|
||||
.glass-nav {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-nav {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -78,14 +78,17 @@ export const useAuth = () => {
|
|||
// ฟังก์ชันเข้าสู่ระบบ (Login)
|
||||
const login = async (credentials: { email: string; password: string }) => {
|
||||
try {
|
||||
const data = await $fetch<loginResponse>(`${API_BASE_URL}/auth/login`, {
|
||||
// API returns { code: 200, message: "...", data: { token, user, ... } }
|
||||
const response = await $fetch<any>(`${API_BASE_URL}/auth/login`, {
|
||||
method: 'POST',
|
||||
body: credentials
|
||||
})
|
||||
|
||||
if (data) {
|
||||
// Validation: อนุญาตเฉพาะ Role 'STUDENT' เท่านั้น
|
||||
if (data.user.role.code !== 'STUDENT') {
|
||||
if (response && response.data) {
|
||||
const data = response.data
|
||||
|
||||
// Validation: Ensure user and role exist, then check for Role 'STUDENT'
|
||||
if (!data.user || !data.user.role || data.user.role.code !== 'STUDENT') {
|
||||
return { success: false, error: 'Email ไม่ถูกต้อง' }
|
||||
}
|
||||
|
||||
|
|
@ -360,6 +363,44 @@ export const useAuth = () => {
|
|||
return false
|
||||
}
|
||||
|
||||
// ฟังก์ชันส่งอีเมลยืนยันตัวตน
|
||||
const sendVerifyEmail = async () => {
|
||||
if (!token.value) return { success: false, error: 'Token missing' }
|
||||
|
||||
const doSend = async () => {
|
||||
return await $fetch<{code: number, message: string}>(`${API_BASE_URL}/user/send-verify-email`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Authorization: `Bearer ${token.value}`
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await doSend()
|
||||
return { success: true, message: res.message }
|
||||
} catch (err: any) {
|
||||
if (err.statusCode === 400) {
|
||||
return { success: false, error: 'Email already verified', code: 400 }
|
||||
}
|
||||
if (err.statusCode === 401) {
|
||||
const refreshed = await refreshAccessToken()
|
||||
if (refreshed) {
|
||||
try {
|
||||
const res = await doSend()
|
||||
return { success: true, message: res.message }
|
||||
} catch (retryErr: any) {
|
||||
return { success: false, error: retryErr.data?.message || 'Failed to send verification email' }
|
||||
}
|
||||
} else {
|
||||
logout()
|
||||
return { success: false, error: 'Session expired' }
|
||||
}
|
||||
}
|
||||
return { success: false, error: err.data?.message || 'Failed to send verification email' }
|
||||
}
|
||||
}
|
||||
|
||||
// ฟังก์ชันออกจากระบบ (Logout)
|
||||
const logout = () => {
|
||||
token.value = null
|
||||
|
|
@ -401,6 +442,7 @@ export const useAuth = () => {
|
|||
changePassword,
|
||||
uploadAvatar,
|
||||
refreshAccessToken,
|
||||
logout
|
||||
logout,
|
||||
sendVerifyEmail
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,11 @@
|
|||
"updateSuccess": "Profile updated successfully",
|
||||
"updateError": "Failed to update profile",
|
||||
"passwordSuccess": "Password changed successfully",
|
||||
"passwordError": "Failed to change password"
|
||||
"passwordError": "Failed to change password",
|
||||
"verifyEmail": "Verify Email",
|
||||
"verifyEmailSuccess": "Verification email sent successfully",
|
||||
"verifyEmailError": "Failed to send verification email",
|
||||
"emailAlreadyVerified": "Your email is already verified"
|
||||
},
|
||||
"userMenu": {
|
||||
"home": "Home",
|
||||
|
|
|
|||
|
|
@ -112,7 +112,11 @@
|
|||
"updateSuccess": "บันทึกข้อมูลส่วนตัวเรียบร้อยแล้ว",
|
||||
"updateError": "เกิดข้อผิดพลาดในการบันทึกข้อมูลส่วนตัว",
|
||||
"passwordSuccess": "เปลี่ยนรหัสผ่านเรียบร้อยแล้ว",
|
||||
"passwordError": "เปลี่ยนรหัสผ่านไม่สำเร็จ"
|
||||
"passwordError": "เปลี่ยนรหัสผ่านไม่สำเร็จ",
|
||||
"verifyEmail": "ยืนยันอีเมล",
|
||||
"verifyEmailSuccess": "ส่งอีเมลยืนยันสำเร็จ",
|
||||
"verifyEmailError": "ส่งอีเมลไม่สำเร็จ",
|
||||
"emailAlreadyVerified": "อีเมลของคุณได้รับการยืนยันแล้ว"
|
||||
},
|
||||
"userMenu": {
|
||||
"home": "หน้าหลัก",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="lHh LpR lFf" class="bg-slate-900 text-slate-100 font-inter">
|
||||
<q-layout view="lHh LpR lFf" class="bg-slate-50 dark:bg-slate-900 text-slate-900 dark:text-slate-100 font-inter">
|
||||
|
||||
<!-- Header (Transparent & Overlay) -->
|
||||
<q-header class="bg-transparent" style="height: auto;">
|
||||
|
|
|
|||
|
|
@ -67,108 +67,121 @@ const sendResetLink = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-center min-h-screen bg-slate-900 font-inter p-4 relative overflow-hidden">
|
||||
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="relative min-h-screen w-full flex items-center justify-center p-4 overflow-hidden bg-slate-50 transition-colors">
|
||||
<!-- ==========================================
|
||||
BACKGROUND EFFECTS (Light Mode Only)
|
||||
========================================== -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-white via-slate-50 to-blue-50/50"></div>
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full bg-blue-100/50 blur-[100px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] rounded-full bg-indigo-100/50 blur-[100px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<q-card class="w-full max-w-[480px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl">
|
||||
<!-- ==========================================
|
||||
Forgot Password Card
|
||||
========================================== -->
|
||||
<div class="w-full max-w-[460px] relative z-10 slide-up">
|
||||
|
||||
<!-- Logo area -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
|
||||
E
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
||||
<p class="text-slate-400 text-base">รีเซ็ตรหัสผ่านของคุณ</p>
|
||||
</div>
|
||||
<!-- Logo area -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20 mb-6">
|
||||
<span class="font-black text-2xl">E</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-black text-slate-900 mb-2">ลืมรหัสผ่าน?</h1>
|
||||
<p class="text-slate-600 text-base">ไม่ต้องห่วง! เราจะช่วยคุณตั้งค่ารหัสผ่านใหม่</p>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div>
|
||||
<!-- Step 1: Request Email Form -->
|
||||
<form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink" class="flex flex-col gap-5">
|
||||
<div class="bg-white rounded-[2rem] p-8 md:p-10 shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden">
|
||||
|
||||
<!-- Step 1: Request Email Form -->
|
||||
<form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink" class="flex flex-col gap-6">
|
||||
|
||||
<p class="text-slate-400 text-base mb-2 text-center">กรุณากรอกอีเมลเพื่อรับลิงก์รีเซ็ตรหัสผ่าน</p>
|
||||
<p class="text-slate-500 text-sm text-center px-4 leading-relaxed">
|
||||
กรุณากรอกอีเมลที่ลงทะเบียนไว้ เราจะส่งลิงก์สำหรับรีเซ็ตรหัสผ่านไปให้คุณ
|
||||
</p>
|
||||
|
||||
<!-- Email Input -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="forgotForm.email"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder="student@example.com"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.email"
|
||||
:error-message="errors.email"
|
||||
@update:model-value="handleInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">email</span>
|
||||
</div>
|
||||
<input
|
||||
:value="forgotForm.email"
|
||||
@input="(e) => handleInput((e.target as HTMLInputElement).value)"
|
||||
type="email"
|
||||
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
placeholder="student@example.com"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.email}"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="errors.email" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.email }}</span>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500 mt-4"
|
||||
:loading="isLoading"
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
class="w-full py-3.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-lg font-bold shadow-lg shadow-blue-600/30 transform active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed"
|
||||
>
|
||||
ส่งลิงก์รีเซ็ต
|
||||
<template v-slot:loading>
|
||||
<q-spinner-dots color="white" />
|
||||
</template>
|
||||
</q-btn>
|
||||
<span v-if="!isLoading">ส่งลิงก์รีเซ็ต</span>
|
||||
<div v-else class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div v-else class="text-center animate-fade-in">
|
||||
<!-- Step 2: Success Message -->
|
||||
<div v-else class="text-center slide-up-sm py-4">
|
||||
<div class="mb-6 flex justify-center">
|
||||
<div class="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center text-green-500 mb-4">
|
||||
<q-icon name="check_circle" size="32px" />
|
||||
<div class="w-20 h-20 bg-green-50 rounded-full flex items-center justify-center text-green-500 mb-2 border border-green-100 shadow-sm">
|
||||
<span class="material-icons text-4xl">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">ส่งลิงก์เรียบร้อยแล้ว!</h3>
|
||||
<p class="text-slate-400 mb-6">กรุณาตรวจสอบอีเมลของคุณเพื่อดำเนินการต่อ</p>
|
||||
<h3 class="text-xl font-bold text-slate-900 mb-2">ส่งลิงก์เรียบร้อยแล้ว!</h3>
|
||||
<p class="text-slate-500 text-sm leading-relaxed px-2 mb-8">
|
||||
กรุณาตรวจสอบกล่องจดหมายของคุณ<br>เพื่อดำเนินการตั้งค่ารหัสผ่านใหม่
|
||||
</p>
|
||||
|
||||
<button
|
||||
@click="forgotStep = 'initial'"
|
||||
class="text-sm font-bold text-blue-600 hover:text-blue-700 transition-colors"
|
||||
>
|
||||
ส่งอีกครั้ง?
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="text-center pt-6 border-t border-slate-700 mt-6">
|
||||
<NuxtLink to="/auth/login" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-slate-400 text-base font-bold hover:text-white hover:bg-slate-700 transition-all duration-300 group">
|
||||
<q-icon name="arrow_back" class="text-lg transform group-hover:-translate-x-1 transition-transform" />
|
||||
กลับไปหน้าเข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<!-- Back Link -->
|
||||
<div class="mt-8 text-center text-slate-500">
|
||||
<NuxtLink to="/auth/login" class="inline-flex items-center gap-2 text-sm font-medium hover:text-slate-800 transition-colors group px-4 py-2 rounded-lg hover:bg-white/50">
|
||||
<span class="group-hover:-translate-x-1 transition-transform">←</span> กลับไปหน้าเข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
/* Animations */
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
/* Custom dark input styling */
|
||||
.custom-dark-input :deep(.q-field__control) {
|
||||
background: #334155 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field__control:before) {
|
||||
border-color: #475569;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
||||
border-color: #3b82f6;
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.5s ease-out;
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.slide-up-sm {
|
||||
animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -131,130 +131,160 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<!-- Background Decoration (Optional Subtle Glows to match cool dark feel) -->
|
||||
<div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="relative min-h-screen w-full flex items-center justify-center p-4 overflow-hidden bg-slate-50 transition-colors">
|
||||
<!-- ==========================================
|
||||
BACKGROUND EFFECTS (Light Mode Only)
|
||||
========================================== -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-white via-slate-50 to-blue-50/50"></div>
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full bg-blue-100/50 blur-[100px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] rounded-full bg-indigo-100/50 blur-[100px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<q-card
|
||||
class="w-full max-w-[480px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl"
|
||||
>
|
||||
<!-- ==========================================
|
||||
LOGIN CARD
|
||||
========================================== -->
|
||||
<div class="w-full max-w-[460px] relative z-10 slide-up">
|
||||
|
||||
<!-- Header / Logo -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20 mb-6">
|
||||
<span class="font-black text-2xl">E</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-black text-slate-900 mb-2">เข้าสู่ระบบ</h1>
|
||||
<p class="text-slate-600 text-base">ยินดีต้อนรับกลับมา! กรุณากรอกข้อมูลของคุณ</p>
|
||||
</div>
|
||||
|
||||
<!-- Header / Logo Section -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
|
||||
E
|
||||
<div class="bg-white rounded-[2rem] p-8 md:p-10 shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden">
|
||||
|
||||
<!-- Form -->
|
||||
<form @submit.prevent="handleLogin" class="flex flex-col gap-5">
|
||||
|
||||
<!-- Email Input -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">อีเมล</label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">email</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="loginForm.email"
|
||||
type="email"
|
||||
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
placeholder=""
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.email}"
|
||||
@input="(e) => handleInput('email', (e.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="errors.email" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.email }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">รหัสผ่าน</label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">lock</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="loginForm.password"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
class="w-full h-12 pl-12 pr-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
placeholder=""
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.password}"
|
||||
@input="(e) => handleInput('password', (e.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="showPassword = !showPassword"
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none flex items-center"
|
||||
>
|
||||
<span class="material-icons text-lg">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<span v-if="errors.password" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.password }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Options -->
|
||||
<div class="flex items-center justify-between mt-1">
|
||||
<label class="flex items-center gap-2 cursor-pointer group select-none">
|
||||
<div class="relative flex items-center">
|
||||
<input type="checkbox" v-model="rememberMe" class="peer sr-only">
|
||||
<div class="w-5 h-5 border-2 border-slate-300 rounded-md peer-checked:bg-blue-600 peer-checked:border-blue-600 transition-all bg-white flex items-center justify-center">
|
||||
<svg class="w-3.5 h-3.5 text-white opacity-0 peer-checked:opacity-100 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-sm text-slate-600 font-medium group-hover:text-slate-800 transition-colors">จดจำฉัน</span>
|
||||
</label>
|
||||
<NuxtLink to="/auth/forgot-password" class="text-sm font-semibold text-blue-600 hover:text-blue-700 transition-colors">
|
||||
ลืมรหัสผ่าน?
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
class="w-full py-3.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-lg font-bold shadow-lg shadow-blue-600/30 transform active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed mt-4"
|
||||
>
|
||||
<span v-if="!isLoading">เข้าสู่ระบบ</span>
|
||||
<div v-else class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="my-8 flex items-center gap-4">
|
||||
<div class="h-px bg-slate-200 flex-1"></div>
|
||||
<span class="text-slate-400 text-xs font-medium uppercase tracking-wider">หรือ</span>
|
||||
<div class="h-px bg-slate-200 flex-1"></div>
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
||||
<p class="text-slate-400 text-base">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
||||
|
||||
<!-- Register Link -->
|
||||
<div class="text-center">
|
||||
<p class="text-slate-600 text-sm">
|
||||
ยังไม่มีบัญชีสมาชิก?
|
||||
<NuxtLink to="/auth/register" class="font-bold text-blue-600 hover:text-blue-700 transition-colors ml-1">
|
||||
สมัครสมาชิกฟรี
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form @submit.prevent="handleLogin" class="flex flex-col gap-5">
|
||||
|
||||
<!-- Email Input -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="loginForm.email"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder="student@example.com"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.email"
|
||||
:error-message="errors.email"
|
||||
@update:model-value="(val: string | number | null) => handleInput('email', val as string)"
|
||||
hide-bottom-space
|
||||
>
|
||||
</q-input>
|
||||
<!-- Back Link -->
|
||||
<div class="mt-8 text-center text-slate-500">
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 text-sm font-medium hover:text-slate-800 transition-colors group px-4 py-2 rounded-lg hover:bg-white/50">
|
||||
<span class="group-hover:-translate-x-1 transition-transform">←</span> กลับไปหน้าแรก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">รหัสผ่าน <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="loginForm.password"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
placeholder="••••••••"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.password"
|
||||
:error-message="errors.password"
|
||||
@update:model-value="(val: string | number | null) => handleInput('password', val as string)"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400 hover:text-white transition-colors"
|
||||
@click="showPassword = !showPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Helpers: Remember Me & Forgot Password -->
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<q-checkbox
|
||||
v-model="rememberMe"
|
||||
label="จดจำฉัน"
|
||||
size="sm"
|
||||
dense
|
||||
dark
|
||||
color="white"
|
||||
class="text-slate-300"
|
||||
/>
|
||||
<NuxtLink to="/auth/forgot-password" class="font-medium text-blue-400 hover:text-blue-300 transition-colors">
|
||||
ลืมรหัสผ่าน?
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500"
|
||||
:loading="isLoading"
|
||||
>
|
||||
เข้าสู่ระบบ
|
||||
<template v-slot:loading>
|
||||
<q-spinner-dots color="white" />
|
||||
</template>
|
||||
</q-btn>
|
||||
|
||||
<!-- Back to Landing Page -->
|
||||
<div class="text-center pt-6 border-t border-slate-700 mt-2">
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-slate-400 text-base font-bold hover:text-white hover:bg-slate-700 transition-all duration-300 group">
|
||||
<q-icon name="arrow_back" class="text-lg transform group-hover:-translate-x-1 transition-transform" />
|
||||
กลับไปหน้าแรก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
/* Animations */
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
/* Custom dark input styling to match screenshot: Dark background, light border */
|
||||
.custom-dark-input :deep(.q-field__control) {
|
||||
background: #334155 !important; /* Slate 700ish */
|
||||
border-radius: 8px;
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 8s ease-in-out infinite;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field__control:before) {
|
||||
border-color: #475569; /* Slate 600 */
|
||||
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
||||
border-color: #3b82f6; /* Blue 500 */
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.slide-up-sm {
|
||||
animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -190,235 +190,255 @@ const handleRegister = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center justify-center min-h-screen bg-slate-900 font-inter p-4 relative overflow-hidden">
|
||||
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="relative min-h-screen w-full flex items-center justify-center p-4 overflow-hidden bg-slate-50 transition-colors">
|
||||
<!-- ==========================================
|
||||
BACKGROUND EFFECTS (Light Mode Only)
|
||||
========================================== -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-white via-slate-50 to-blue-50/50"></div>
|
||||
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full bg-blue-100/50 blur-[100px] animate-pulse-slow"/>
|
||||
<div class="absolute bottom-[-10%] left-[-5%] w-[500px] h-[500px] rounded-full bg-indigo-100/50 blur-[100px] animate-pulse-slow" style="animation-delay: 3s;"/>
|
||||
</div>
|
||||
|
||||
<q-card class="w-full max-w-[740px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl">
|
||||
<!-- ==========================================
|
||||
REGISTER CARD
|
||||
========================================== -->
|
||||
<div class="w-full max-w-[700px] relative z-10 slide-up">
|
||||
|
||||
<!-- Header / Logo -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-tr from-blue-600 to-indigo-600 text-white shadow-lg shadow-blue-600/20 mb-6">
|
||||
<span class="font-black text-2xl">E</span>
|
||||
</div>
|
||||
<h1 class="text-3xl font-black text-slate-900 mb-2">สร้างบัญชีผู้ใช้งาน</h1>
|
||||
<p class="text-slate-600 text-base">เข้าถึงคอร์สเรียนคุณภาพได้ทันที เพียงสมัครสมาชิก</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-[2rem] p-8 md:p-10 shadow-xl shadow-slate-200/50 border border-slate-100 relative overflow-hidden">
|
||||
|
||||
<form @submit.prevent="handleRegister" class="flex flex-col gap-5">
|
||||
|
||||
<!-- Username & Email Row -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<!-- Username -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">ชื่อผู้ใช้ <span class="text-red-500">*</span></label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">person</span>
|
||||
</div>
|
||||
<input
|
||||
:value="registerForm.username"
|
||||
@input="(e) => onUsernameInput((e.target as HTMLInputElement).value)"
|
||||
type="text"
|
||||
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
placeholder="username"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.username}"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="errors.username" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.username }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">email</span>
|
||||
</div>
|
||||
<input
|
||||
:value="registerForm.email"
|
||||
@input="(e) => onEmailInput((e.target as HTMLInputElement).value)"
|
||||
type="email"
|
||||
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
placeholder="student@example.com"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.email}"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="errors.email" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Name Section -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<!-- Prefix -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">คำนำหน้า</label>
|
||||
<div class="relative">
|
||||
<select
|
||||
v-model="registerForm.prefix"
|
||||
class="w-full h-12 pl-4 pr-8 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium appearance-none cursor-pointer"
|
||||
>
|
||||
<option v-for="opt in prefixOptions" :key="opt" :value="opt">{{ opt }}</option>
|
||||
</select>
|
||||
<div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
|
||||
<span class="material-icons">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- First Name -->
|
||||
<div class="col-span-12 md:col-span-4">
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">ชื่อ <span class="text-red-500">*</span></label>
|
||||
<input
|
||||
:value="registerForm.firstName"
|
||||
@input="(e) => onFirstNameInput((e.target as HTMLInputElement).value)"
|
||||
type="text"
|
||||
class="w-full h-12 px-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.firstName}"
|
||||
/>
|
||||
<span v-if="errors.firstName" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.firstName }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Last Name -->
|
||||
<div class="col-span-12 md:col-span-5">
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">นามสกุล <span class="text-red-500">*</span></label>
|
||||
<input
|
||||
:value="registerForm.lastName"
|
||||
@input="(e) => onLastNameInput((e.target as HTMLInputElement).value)"
|
||||
type="text"
|
||||
class="w-full h-12 px-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.lastName}"
|
||||
/>
|
||||
<span v-if="errors.lastName" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.lastName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">เบอร์โทรศัพท์ <span class="text-red-500">*</span></label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">phone</span>
|
||||
</div>
|
||||
<input
|
||||
:value="registerForm.phone"
|
||||
@input="(e) => onPhoneInput((e.target as HTMLInputElement).value)"
|
||||
type="tel"
|
||||
class="w-full h-12 pl-12 pr-4 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.phone}"
|
||||
/>
|
||||
</div>
|
||||
<span v-if="errors.phone" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.phone }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Password Row -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">รหัสผ่าน <span class="text-red-500">*</span></label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">lock</span>
|
||||
</div>
|
||||
<input
|
||||
:value="registerForm.password"
|
||||
@input="(e) => onPasswordInput((e.target as HTMLInputElement).value)"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
class="w-full h-12 pl-12 pr-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
placeholder="••••••••"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.password}"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="showPassword = !showPassword"
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none flex items-center"
|
||||
>
|
||||
<span class="material-icons text-lg">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<span v-if="errors.password" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.password }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-slate-700 mb-2 ml-1">ยืนยันรหัสผ่าน <span class="text-red-500">*</span></label>
|
||||
<div class="relative group">
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 transition-colors group-focus-within:text-blue-500 pointer-events-none">
|
||||
<span class="material-icons text-xl">lock_clock</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="registerForm.confirmPassword"
|
||||
@input="clearFieldError('confirmPassword')"
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
class="w-full h-12 pl-12 pr-12 rounded-xl bg-slate-50 border border-slate-200 text-slate-900 placeholder-slate-400 text-base focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all font-medium"
|
||||
placeholder="••••••••"
|
||||
:class="{'border-red-500 focus:ring-red-500/20 focus:border-red-500': errors.confirmPassword}"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="showConfirmPassword = !showConfirmPassword"
|
||||
class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition-colors focus:outline-none flex items-center"
|
||||
>
|
||||
<span class="material-icons text-lg">{{ showConfirmPassword ? 'visibility_off' : 'visibility' }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<span v-if="errors.confirmPassword" class="text-xs text-red-500 font-medium ml-1 mt-1 block slide-up-sm">{{ errors.confirmPassword }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="isLoading"
|
||||
class="w-full py-3.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl text-lg font-bold shadow-lg shadow-blue-600/30 transform active:scale-[0.98] transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-not-allowed mt-4"
|
||||
>
|
||||
<span v-if="!isLoading">สร้างบัญชี</span>
|
||||
<div v-else class="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
|
||||
</button>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="my-4 flex items-center gap-4">
|
||||
<div class="h-px bg-slate-200 flex-1"></div>
|
||||
<span class="text-slate-400 text-xs font-medium uppercase tracking-wider">หรือ</span>
|
||||
<div class="h-px bg-slate-200 flex-1"></div>
|
||||
</div>
|
||||
|
||||
<!-- Login Link -->
|
||||
<div class="text-center">
|
||||
<p class="text-slate-600 text-sm">
|
||||
มีบัญชีอยู่แล้ว?
|
||||
<NuxtLink to="/auth/login" class="font-bold text-blue-600 hover:text-blue-700 transition-colors ml-1">
|
||||
เข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
|
||||
E
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
||||
<p class="text-slate-400 text-base">สร้างบัญชีผู้ใช้งานใหม่</p>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleRegister" class="flex flex-col gap-5">
|
||||
|
||||
<!-- Username -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">ชื่อผู้ใช้ <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.username"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder="username"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.username"
|
||||
:error-message="errors.username"
|
||||
@update:model-value="onUsernameInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.email"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.email"
|
||||
:error-message="errors.email"
|
||||
@update:model-value="onEmailInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">รหัสผ่าน <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.password"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.password"
|
||||
:error-message="errors.password"
|
||||
@update:model-value="onPasswordInput"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400 hover:text-white transition-colors"
|
||||
@click="showPassword = !showPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">ยืนยันรหัสผ่าน <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
v-model="registerForm.confirmPassword"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
placeholder="ยืนยันรหัสผ่านอีกครั้ง"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.confirmPassword"
|
||||
:error-message="errors.confirmPassword"
|
||||
@update:model-value="clearFieldError('confirmPassword')"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showConfirmPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400 hover:text-white transition-colors"
|
||||
@click="showConfirmPassword = !showConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Name Section -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<!-- Prefix -->
|
||||
<div class="col-span-4">
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">คำนำหน้า</div>
|
||||
<q-select
|
||||
v-model="registerForm.prefix"
|
||||
:options="prefixOptions"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
<!-- First Name -->
|
||||
<div class="col-span-8">
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">ชื่อ <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.firstName"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder=""
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.firstName"
|
||||
:error-message="errors.firstName"
|
||||
@update:model-value="onFirstNameInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">นามสกุล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.lastName"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder=""
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.lastName"
|
||||
:error-message="errors.lastName"
|
||||
@update:model-value="onLastNameInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">เบอร์โทรศัพท์ <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.phone"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
type="tel"
|
||||
placeholder=""
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.phone"
|
||||
:error-message="errors.phone"
|
||||
@update:model-value="onPhoneInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500 mt-4"
|
||||
:loading="isLoading"
|
||||
>
|
||||
สร้างบัญชี
|
||||
<template v-slot:loading>
|
||||
<q-spinner-dots color="white" />
|
||||
</template>
|
||||
</q-btn>
|
||||
|
||||
<!-- Login Link -->
|
||||
<div class="text-center pt-6 border-t border-slate-700 mt-2 text-base text-slate-400">
|
||||
มีบัญชีอยู่แล้ว?
|
||||
<NuxtLink to="/auth/login" class="font-bold text-blue-400 hover:text-blue-300 transition-colors ml-1">
|
||||
เข้าสู่ระบบ
|
||||
<!-- Back Link -->
|
||||
<div class="mt-8 text-center text-slate-500">
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 text-sm font-medium hover:text-slate-800 transition-colors group px-4 py-2 rounded-lg hover:bg-white/50">
|
||||
<span class="group-hover:-translate-x-1 transition-transform">←</span> กลับไปหน้าแรก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
/* Animations */
|
||||
@keyframes pulse-slow {
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.15); }
|
||||
}
|
||||
|
||||
/* Custom dark input styling */
|
||||
.custom-dark-input :deep(.q-field__control) {
|
||||
background: #334155 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field__control:before) {
|
||||
border-color: #475569;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
||||
border-color: #3b82f6;
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-slow 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Adjust QSelect to match */
|
||||
.custom-dark-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.slide-up {
|
||||
animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
.slide-up-sm {
|
||||
animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const filteredCourses = computed(() => {
|
|||
|
||||
<template>
|
||||
<!-- Main Container: Dark Theme Base -->
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors">
|
||||
<div class="relative min-h-screen text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 transition-colors">
|
||||
|
||||
<!-- ==========================================
|
||||
BACKGROUND EFFECTS
|
||||
|
|
@ -81,7 +81,7 @@ const filteredCourses = computed(() => {
|
|||
</span>
|
||||
</div>
|
||||
<!-- Main Title -->
|
||||
<h1 class="text-4xl md:text-6xl font-black text-white mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
|
||||
<h1 class="text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6 tracking-tight slide-up" style="animation-delay: 0.1s;">
|
||||
คอร์สเรียน<span class="text-gradient-cyan">ทั้งหมด</span>
|
||||
</h1>
|
||||
<!-- Subtitle -->
|
||||
|
|
@ -94,104 +94,116 @@ const filteredCourses = computed(() => {
|
|||
<!-- ==========================================
|
||||
SEARCH & GRID SECTION
|
||||
========================================== -->
|
||||
<section class="container mx-auto max-w-6xl px-6 pb-32">
|
||||
<!-- Search Bar -->
|
||||
<div class="mb-20 relative max-w-2xl mx-auto slide-up" style="animation-delay: 0.3s;">
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
|
||||
|
||||
</div>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="w-full h-16 pl-14 pr-6 bg-white/5 border border-white/10 rounded-2xl text-white placeholder-slate-500 focus:outline-none focus:border-blue-500/50 focus:bg-white/10 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium text-lg backdrop-blur-md"
|
||||
placeholder="ค้นหาบทเรียนที่คุณสนใจ..."
|
||||
>
|
||||
<!-- Hover Glow Effect on Input -->
|
||||
<div class="absolute inset-0 rounded-2xl ring-1 ring-inset ring-transparent group-hover:ring-white/20 pointer-events-none transition-all" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ==========================================
|
||||
SEARCH & GRID SECTION
|
||||
========================================== -->
|
||||
<section class="container mx-auto max-w-[1440px] px-6 pb-32">
|
||||
|
||||
<!-- Content Frame Container -->
|
||||
<div class="glass-premium rounded-[3rem] p-8 md:p-12 shadow-xl shadow-blue-900/5">
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-12">
|
||||
<h2 class="text-2xl font-black text-slate-900 dark:text-white flex items-center gap-3">
|
||||
<span class="w-2 h-8 bg-blue-600 rounded-full"/>
|
||||
รายการคอร์สเรียน
|
||||
</h2>
|
||||
|
||||
<!-- Course Grid -->
|
||||
<div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
|
||||
<div
|
||||
v-for="(course, index) in filteredCourses"
|
||||
:key="course.id"
|
||||
class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
|
||||
:style="{ animationDelay: `${0.1 * (index + 1)}s` }"
|
||||
>
|
||||
<!-- Card Image -->
|
||||
<div class="h-56 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
|
||||
<img
|
||||
v-if="course.thumbnail_url"
|
||||
:src="course.thumbnail_url"
|
||||
:alt="getLocalizedText(course.title)"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<!-- Search Bar (Compact) -->
|
||||
<div class="relative max-w-md w-full">
|
||||
<div class="relative group">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="w-full pl-12 pr-6 py-3 bg-slate-100 dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:outline-none focus:bg-white focus:dark:bg-white/10 focus:ring-2 focus:ring-blue-500/50 transition-all font-medium"
|
||||
placeholder="ค้นหาบทเรียน..."
|
||||
>
|
||||
<div class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course Grid (Updated to 4 cols) -->
|
||||
<div v-if="filteredCourses.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||||
<div
|
||||
v-else
|
||||
class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
|
||||
v-for="(course, index) in filteredCourses"
|
||||
:key="course.id"
|
||||
class="glass-card group flex flex-col h-full hover:-translate-y-2 transition-transform duration-500 slide-up"
|
||||
:style="{ animationDelay: `${0.1 * (index + 1)}s` }"
|
||||
>
|
||||
<!-- Card Image -->
|
||||
<div class="h-48 bg-gradient-to-br from-slate-800 to-slate-900 relative overflow-hidden group-hover:opacity-90 transition-opacity">
|
||||
<img
|
||||
v-if="course.thumbnail_url"
|
||||
:src="course.thumbnail_url"
|
||||
:alt="getLocalizedText(course.title)"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
@error="(e) => (e.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-slate-800 to-slate-900"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Content Body -->
|
||||
<div class="p-6 flex-1 flex flex-col border-t border-slate-100 dark:border-white/5">
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2 leading-snug group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-xs mb-6 line-clamp-2 leading-relaxed flex-1">
|
||||
{{ getLocalizedText(course.description) }}
|
||||
</p>
|
||||
|
||||
<!-- Meta Information -->
|
||||
<div class="flex items-center gap-4 mb-6 text-xs font-medium text-slate-500 dark:text-slate-400">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="text-amber-400">⭐</span>
|
||||
<span>{{ course.rating || 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="w-1 h-1 rounded-full bg-slate-300 dark:bg-slate-600" />
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span>📖</span>
|
||||
<span>{{ course.lessons || 0 }} บทเรียน</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Footer -->
|
||||
<div class="pt-4 border-t border-slate-100 dark:border-white/5 flex items-center justify-between mt-auto">
|
||||
<span class="text-lg font-black text-blue-600 dark:text-blue-400 tracking-tight">
|
||||
{{ course.is_free ? 'ฟรี' : course.price }}
|
||||
</span>
|
||||
<NuxtLink
|
||||
:to="`/course/${course.id}`"
|
||||
class="px-4 py-2 bg-slate-50 dark:bg-white/5 hover:bg-blue-600 text-slate-600 dark:text-slate-300 hover:text-white rounded-lg text-xs font-bold transition-all border border-slate-200 dark:border-white/10 hover:border-blue-500/50"
|
||||
>
|
||||
ดูรายละเอียด
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Level Badge (Neutral/Warning/Success variants) - Optional based on data -->
|
||||
<div v-if="course.levelType" class="absolute top-4 right-4">
|
||||
<!-- Add badge logic if needed -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Content Body -->
|
||||
<div class="p-8 flex-1 flex flex-col border-t border-white/5">
|
||||
<h3 class="text-2xl font-bold text-white mb-3 leading-tight group-hover:text-blue-400 transition-colors">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h3>
|
||||
<p class="text-slate-400 text-sm mb-8 line-clamp-2 leading-relaxed flex-1">
|
||||
{{ getLocalizedText(course.description) }}
|
||||
<!-- Empty State (No Results) -->
|
||||
<div v-else class="text-center py-20">
|
||||
<div class="text-6xl mb-6 opacity-50 animate-bounce">🔭</div>
|
||||
<h2 class="text-2xl font-black text-slate-900 dark:text-white mb-3">ไม่พบคอร์สที่คุณค้นหา</h2>
|
||||
<p class="text-slate-400 mb-8 max-w-md mx-auto">
|
||||
ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการ
|
||||
</p>
|
||||
|
||||
<!-- Meta Information (Rating, Lessons) -->
|
||||
<div class="flex items-center gap-6 mb-8 text-sm font-medium text-slate-500">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-amber-400">⭐</span>
|
||||
<span class="text-slate-300">{{ course.rating || 'N/A' }}</span>
|
||||
</div>
|
||||
<div class="w-1 h-1 rounded-full bg-slate-700" />
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="opacity-70">📖</span>
|
||||
<span class="text-slate-300">{{ course.lessons || 0 }} บทเรียน</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Footer (Price & Action) -->
|
||||
<div class="pt-6 border-t border-white/5 flex items-center justify-between mt-auto">
|
||||
<span class="text-2xl font-black text-blue-400 tracking-tight">
|
||||
{{ course.is_free ? 'ฟรี' : course.price }}
|
||||
</span>
|
||||
<NuxtLink
|
||||
:to="`/course/${course.id}`"
|
||||
class="px-6 py-3 bg-white/10 hover:bg-blue-600 text-white rounded-xl text-sm font-bold transition-all border border-white/10 hover:border-blue-500/50"
|
||||
>
|
||||
ดูรายละเอียด
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<button
|
||||
class="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-600/20"
|
||||
@click="searchQuery = ''"
|
||||
>
|
||||
แสดงคอร์สทั้งหมด
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State (No Results) -->
|
||||
<div v-else class="text-center py-32 glass-premium rounded-[3rem]">
|
||||
<div class="text-7xl mb-8 opacity-50 animate-bounce">🔭</div>
|
||||
<h2 class="text-3xl font-black text-white mb-4">ไม่พบคอร์สที่คุณค้นหา</h2>
|
||||
<p class="text-slate-400 mb-10 max-w-md mx-auto text-lg">
|
||||
ลองใช้คำค้นหาอื่น หรือดูคอร์สทั้งหมดที่เรามีให้บริการในขณะนี้
|
||||
</p>
|
||||
<button
|
||||
class="px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-black transition-all shadow-lg shadow-blue-600/20 hover:-translate-y-1"
|
||||
@click="searchQuery = ''"
|
||||
>
|
||||
แสดงคอร์สทั้งหมด
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ==========================================
|
||||
|
|
@ -203,7 +215,7 @@ const filteredCourses = computed(() => {
|
|||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent pointer-events-none"/>
|
||||
|
||||
<div class="container mx-auto max-w-4xl text-center relative z-10 px-6">
|
||||
<h2 class="text-4xl md:text-5xl font-black text-white mb-8 tracking-tight">
|
||||
<h2 class="text-4xl md:text-5xl font-black text-slate-900 dark:text-white mb-8 tracking-tight">
|
||||
พร้อมจะเริ่มต้นแล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-slate-400 text-xl mb-12 max-w-2xl mx-auto leading-relaxed">
|
||||
|
|
@ -237,6 +249,11 @@ const filteredCourses = computed(() => {
|
|||
|
||||
/* Premium Glass Effect for Containers */
|
||||
.glass-premium {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
:global(.dark) .glass-premium {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
|
|
@ -244,11 +261,18 @@ const filteredCourses = computed(() => {
|
|||
|
||||
/* Glass Card Style for Course Items */
|
||||
.glass-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-card {
|
||||
background: rgba(30, 41, 59, 0.4); /* Slate-800 with opacity */
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 2rem;
|
||||
overflow: hidden;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Slow Pulse Animation for Background Glows */
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ useHead({
|
|||
title: 'ตั้งค่าบัญชี - e-Learning'
|
||||
})
|
||||
|
||||
const { currentUser, updateUserProfile, changePassword, uploadAvatar } = useAuth()
|
||||
const { currentUser, updateUserProfile, changePassword, uploadAvatar, sendVerifyEmail } = useAuth()
|
||||
const { t } = useI18n()
|
||||
// const { errors, validate, clearFieldError } = useFormValidation() // Unused
|
||||
|
||||
|
|
@ -16,6 +16,7 @@ const { t } = useI18n()
|
|||
const isEditing = ref(false)
|
||||
const isProfileSaving = ref(false)
|
||||
const isPasswordSaving = ref(false)
|
||||
const isSendingVerify = ref(false)
|
||||
const isHydrated = ref(false)
|
||||
|
||||
const formatDate = (dateString?: string) => {
|
||||
|
|
@ -48,6 +49,7 @@ const passwordForm = reactive({
|
|||
confirmPassword: ''
|
||||
})
|
||||
|
||||
|
||||
const nameRules = [(val: string) => !!val || t('common.required')]
|
||||
const emailRules = [
|
||||
(val: string) => !!val || t('common.required'),
|
||||
|
|
@ -139,6 +141,22 @@ const handleUpdateProfile = async () => {
|
|||
isProfileSaving.value = false
|
||||
}
|
||||
|
||||
const handleSendVerifyEmail = async () => {
|
||||
isSendingVerify.value = true
|
||||
const result = await sendVerifyEmail()
|
||||
isSendingVerify.value = false
|
||||
|
||||
if (result.success) {
|
||||
alert(result.message || t('profile.verifyEmailSuccess') || 'ส่งอีเมลยืนยันสำเร็จ')
|
||||
} else {
|
||||
if (result.code === 400) {
|
||||
alert(t('profile.emailAlreadyVerified') || 'อีเมลของคุณได้รับการยืนยันแล้ว')
|
||||
} else {
|
||||
alert(result.error || t('profile.verifyEmailError') || 'ส่งอีเมลไม่สำเร็จ')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdatePassword = async () => {
|
||||
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
||||
alert('รหัสผ่านใหม่ไม่ตรงกัน')
|
||||
|
|
@ -360,7 +378,19 @@ onMounted(() => {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.email') }}</label>
|
||||
<div class="flex justify-between items-end mb-1">
|
||||
<label class="text-xs font-bold text-slate-500 dark:text-slate-400 ml-1 uppercase">{{ $t('profile.email') }}</label>
|
||||
<q-btn
|
||||
flat dense
|
||||
color="primary"
|
||||
size="sm"
|
||||
no-caps
|
||||
icon="mark_email_read"
|
||||
:label="$t('profile.verifyEmail') || 'ยืนยันอีเมล'"
|
||||
@click="handleSendVerifyEmail"
|
||||
:loading="isSendingVerify"
|
||||
/>
|
||||
</div>
|
||||
<q-input
|
||||
v-model="userData.email"
|
||||
type="email"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ useHead({
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative min-h-screen text-slate-200 bg-slate-900 transition-colors">
|
||||
<div class="relative min-h-screen text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-900 transition-colors">
|
||||
<!-- Premium Background -->
|
||||
<div class="fixed inset-0 overflow-hidden pointer-events-none -z-10">
|
||||
<!-- Animated Glows -->
|
||||
|
|
@ -26,129 +26,137 @@ useHead({
|
|||
<!-- Hero Section: ส่วนหัวของหน้าเว็บ แสดงข้อความต้อนรับและปุ่ม CTA -->
|
||||
<section class="hero-section min-h-[95vh] flex items-center relative overflow-hidden pt-32 pb-20">
|
||||
<div class="container relative z-10 w-full">
|
||||
<div class="grid-hero items-center">
|
||||
<!-- Hero Card Container -->
|
||||
<div class="bg-white/60 dark:bg-slate-800/60 backdrop-blur-3xl rounded-[3rem] p-8 md:p-16 shadow-2xl shadow-blue-900/5 border border-white/50 dark:border-white/10 relative overflow-hidden">
|
||||
|
||||
<!-- Left Content -->
|
||||
<div class="hero-content">
|
||||
<div class="mb-10 slide-up">
|
||||
<span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)]">
|
||||
เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
|
||||
</span>
|
||||
</div>
|
||||
<!-- Decorative background inside card -->
|
||||
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/2 pointer-events-none"/>
|
||||
|
||||
<div class="grid-hero items-center relative z-10">
|
||||
|
||||
<h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
|
||||
ยกระดับทักษะ <br>
|
||||
<span class="text-white">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
|
||||
</h1>
|
||||
<h2 class="hero-subtitle text-slate-300 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
|
||||
แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
|
||||
เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
|
||||
</h2>
|
||||
|
||||
<div class="hero-actions flex flex-wrap gap-6 mb-20 slide-up" style="animation-delay: 0.3s;">
|
||||
<NuxtLink to="/auth/register" class="btn-cta-premium group">
|
||||
สมัครเรียนฟรีวันนี้
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/browse" class="btn-outline-glass">
|
||||
เปิดดูคอร์สทั้งหมด
|
||||
</NuxtLink>
|
||||
<!-- Left Content -->
|
||||
<div class="hero-content">
|
||||
<div class="mb-10 slide-up">
|
||||
<span class="px-5 py-2 rounded-full glass border border-blue-400/20 text-blue-400 text-[11px] font-black tracking-[0.25em] uppercase shadow-[0_0_20px_rgba(59,130,246,0.15)] bg-white dark:bg-slate-900">
|
||||
เริ่มต้นเส้นทางความสำเร็จใหม่ที่นี่
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 class="hero-title leading-[1.05] mb-8 slide-up" style="animation-delay: 0.1s;">
|
||||
ยกระดับทักษะ <br>
|
||||
<span class="text-slate-900 dark:text-white">แห่งอนาคต</span> <span class="text-gradient-cyan">ไปพร้อมกับเรา</span>
|
||||
</h1>
|
||||
<h2 class="hero-subtitle text-slate-600 dark:text-slate-300 font-medium mb-12 text-xl leading-relaxed slide-up max-w-[640px]" style="animation-delay: 0.2s;">
|
||||
แหล่งรวมความรู้ออนไลน์ที่เข้าถึงง่ายที่สุด พัฒนาโดยผู้เชี่ยวชาญ <br class="hidden-mobile" >
|
||||
เพื่อช่วยให้คุณก้าวสู่เป้าหมายที่ตั้งไว้ได้อย่างมั่นใจ
|
||||
</h2>
|
||||
|
||||
<div class="hero-actions flex flex-wrap gap-6 mb-20 slide-up" style="animation-delay: 0.3s;">
|
||||
<NuxtLink to="/auth/register" class="btn-cta-premium group">
|
||||
สมัครเรียนฟรีวันนี้
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/browse" class="btn-outline-glass">
|
||||
เปิดดูคอร์สทั้งหมด
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Content (Visual) - Redesigned as a Preview/Showcase -->
|
||||
<div class="hero-visual flex justify-center items-center relative slide-up" style="animation-delay: 0.2s;">
|
||||
<!-- Preview Snapshot Container -->
|
||||
<div class="platform-preview-card glass-premium rotate-[-1deg] shadow-[0_50px_100px_rgba(0,0,0,0.6)] border border-white/10">
|
||||
<!-- Browser-like header -->
|
||||
<div class="preview-header border-b border-white/5 py-4 bg-white/5 flex items-center px-6">
|
||||
<div class="dots flex gap-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
|
||||
<!-- Right Content (Visual) - Redesigned as a Preview/Showcase -->
|
||||
<div class="hero-visual flex justify-center items-center relative slide-up" style="animation-delay: 0.2s;">
|
||||
<!-- Preview Snapshot Container -->
|
||||
<div class="platform-preview-card glass-premium rotate-[-1deg] shadow-2xl dark:shadow-[0_50px_100px_rgba(0,0,0,0.6)] border border-slate-200 dark:border-white/10">
|
||||
<!-- Browser-like header -->
|
||||
<div class="preview-header border-b border-slate-200 dark:border-white/5 py-4 bg-slate-100 dark:bg-white/5 flex items-center px-6">
|
||||
<div class="dots flex gap-2">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-slate-600"/>
|
||||
</div>
|
||||
<div class="mx-auto bg-slate-200 dark:bg-white/5 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">www.elearning.com</div>
|
||||
</div>
|
||||
<div class="mx-auto bg-white/5 px-4 py-1 rounded-full text-[10px] text-slate-500 tracking-wider">platform-elearning.com</div>
|
||||
</div>
|
||||
|
||||
<!-- Showcase Content -->
|
||||
<div class="preview-body p-8 space-y-8">
|
||||
<!-- Video Hero Preview -->
|
||||
<div class="relative aspect-video bg-gradient-to-br from-blue-900/50 to-indigo-900/50 rounded-3xl overflow-hidden group/vid border border-white/5">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center shadow-2xl group-hover/vid:scale-110 transition-transform">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white ml-1" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-4 left-6 right-6 h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[65%]"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course List Preview -->
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-white/[0.03] rounded-2xl border border-white/5">
|
||||
<div class="w-full h-20 bg-blue-400/10 rounded-xl mb-3"/>
|
||||
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
|
||||
<div class="h-2 bg-white/5 rounded w-1/2"/>
|
||||
</div>
|
||||
<div class="p-4 bg-white/[0.03] rounded-2xl border border-white/5">
|
||||
<div class="w-full h-20 bg-indigo-400/10 rounded-xl mb-3"/>
|
||||
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
|
||||
<div class="h-2 bg-white/5 rounded w-1/2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Showcase Content -->
|
||||
<div class="preview-body p-8 space-y-8">
|
||||
<!-- Video Hero Preview -->
|
||||
<div class="relative aspect-video bg-gradient-to-br from-blue-900/50 to-indigo-900/50 rounded-3xl overflow-hidden group/vid border border-white/5">
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-16 h-16 rounded-full bg-blue-600 flex items-center justify-center shadow-2xl group-hover/vid:scale-110 transition-transform">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white fill-white ml-1" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute bottom-4 left-6 right-6 h-1.5 bg-white/10 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-blue-500 w-[65%]"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course List Preview -->
|
||||
<div class="space-y-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
|
||||
<div class="w-full h-20 bg-blue-400/10 rounded-xl mb-3"/>
|
||||
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
|
||||
<div class="h-2 bg-white/5 rounded w-1/2"/>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-50 dark:bg-white/[0.03] rounded-2xl border border-slate-200 dark:border-white/5">
|
||||
<div class="w-full h-20 bg-indigo-400/10 rounded-xl mb-3"/>
|
||||
<div class="h-3 bg-white/10 rounded w-3/4 mb-2"/>
|
||||
<div class="h-2 bg-white/5 rounded w-1/2"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Floating Feature Highlights (Marketing focused) -->
|
||||
<div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float">
|
||||
<div class="absolute top-[10%] -right-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-emerald-500/20 rounded-xl flex items-center justify-center text-emerald-400">
|
||||
<div class="w-12 h-12 bg-emerald-500 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-500/30">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white font-black text-sm">รับใบประกาศนียบัตร</div>
|
||||
<div class="text-slate-400 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
|
||||
<div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">รับใบประกาศนียบัตร</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">เมื่อเรียนจบหลักสูตร</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float" style="animation-delay: -3s;">
|
||||
<div class="absolute bottom-[10%] -left-8 glass-tag-premium px-8 py-5 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.1)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.3)] animate-float" style="animation-delay: -3s;">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 bg-blue-500/20 rounded-xl flex items-center justify-center text-blue-400">
|
||||
<div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-600/30">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white font-black text-sm">เรียนได้ทุกที่</div>
|
||||
<div class="text-slate-400 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
|
||||
<div class="text-slate-900 dark:text-white font-black text-sm mb-0.5">เรียนได้ทุกที่</div>
|
||||
<div class="text-slate-500 dark:text-slate-400 text-[10px] font-bold">รองรับทุกอุปกรณ์</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Platform Info Section: ส่วนแสดงจุดเด่นของแพลตฟอร์ม (Features) -->
|
||||
<section class="info-section py-40 bg-slate-900 relative transition-colors">
|
||||
<section class="info-section py-40 bg-slate-50 dark:bg-slate-900 relative transition-colors">
|
||||
<!-- Background detail -->
|
||||
<div class="absolute top-0 inset-x-0 h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"/>
|
||||
|
||||
<div class="container relative z-10">
|
||||
<div class="text-center mb-28">
|
||||
<span class="text-blue-500 font-black tracking-[0.4em] text-[11px] uppercase mb-5 block">Why Choose Us</span>
|
||||
<h2 class="section-title text-5xl font-black mb-8 text-white tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
|
||||
<h2 class="section-title text-5xl font-black mb-8 text-slate-900 dark:text-white tracking-tight">ออกแบบมาเพื่อความสำเร็จของคุณ</h2>
|
||||
<p class="section-desc max-w-2xl mx-auto text-slate-500 text-xl leading-relaxed">
|
||||
เราไม่ใช่แค่แพลตฟอร์มการเรียนรู้ แต่เราคือคู่หูที่จะช่วยพาคุณไปสู่จุดหมายที่ต้องการ
|
||||
</p>
|
||||
|
|
@ -162,7 +170,7 @@ useHead({
|
|||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">สื่อการเรียนระดับสูง</h3>
|
||||
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">สื่อการเรียนระดับสูง</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">วิดีโอคุณภาพคมชัด พร้อมเอกสารประกอบการเรียนที่คัดสรรมาอย่างดีเพื่อความเข้าใจง่าย</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -173,7 +181,7 @@ useHead({
|
|||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">วัดผลแบบอัจฉริยะ</h3>
|
||||
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">วัดผลแบบอัจฉริยะ</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">ระบบ Quizz ออนไลน์ที่ช่วยประเมินความเข้าใจได้ทันที พร้อมวิเคราะห์จุดที่ควรปรับปรุง</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -184,7 +192,7 @@ useHead({
|
|||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-2xl font-black mb-5 text-white">ระบบติดตามผล</h3>
|
||||
<h3 class="text-2xl font-black mb-5 text-slate-900 dark:text-white">ระบบติดตามผล</h3>
|
||||
<p class="text-slate-500 text-base leading-relaxed">ดูความก้าวหน้าของตัวเองได้ทุกที่ทุกเวลา ผ่าน Dashboard ที่สรุปภาพรวมไว้อย่างลงตัว</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -203,6 +211,9 @@ useHead({
|
|||
.hero-title {
|
||||
font-size: clamp(3.5rem, 7vw, 5.5rem);
|
||||
font-weight: 900;
|
||||
color: #0f172a;
|
||||
}
|
||||
:global(.dark) .hero-title {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -214,14 +225,28 @@ useHead({
|
|||
}
|
||||
|
||||
.glass-premium {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-premium {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
backdrop-filter: blur(40px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.glass-tag-premium {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .glass-tag-premium {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
|
@ -238,6 +263,7 @@ useHead({
|
|||
}
|
||||
|
||||
.btn-cta-premium:hover {
|
||||
@apply bg-blue-600;
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.5);
|
||||
}
|
||||
|
|
@ -246,14 +272,28 @@ useHead({
|
|||
padding: 1.5rem 3.5rem;
|
||||
border-radius: 1.5rem;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: #1e293b; /* Slate 800 for better visibility */
|
||||
border: 2px solid #cbd5e1; /* Thicker, Slate 300 border */
|
||||
background: rgba(255, 255, 255, 0.8); /* Whiting background */
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
:global(.dark) .btn-outline-glass {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.btn-outline-glass:hover {
|
||||
background: #ffffff;
|
||||
border-color: #3b82f6; /* Blue border on hover */
|
||||
color: #2563eb;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
:global(.dark) .btn-outline-glass:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,6 +63,7 @@
|
|||
- `PUT /api/user/me`: อัปเดตข้อมูลส่วนตัว
|
||||
- `POST /api/user/change-password`: เปลี่ยนรหัสผ่าน
|
||||
- `POST /api/user/upload-avatar`: อัปโหลดรูปโปรไฟล์
|
||||
- `POST /api/user/send-verify-email`: ส่งอีเมลยืนยันตัวตน
|
||||
|
||||
### 3.2 `useCourse.ts` (Course & Learning)
|
||||
|
||||
|
|
@ -162,3 +163,6 @@
|
|||
- เชื่อมต่อ API ดึงใบประกาศนียบัตร (`GET /api/certificates/{courseId}`) และสร้างใหม่ (`POST .../generate`)
|
||||
- ระบบ **Smart Download:** เช็คก่อนว่ามีไฟล์ไหม ถ้าไม่มีถึงสร้างใหม่ แล้วเปิด PDF ทันที
|
||||
- รองรับการแสดงผลภาษาไทยและวันที่ถูกต้องแบบ Real-time API
|
||||
9. **Email Verification:**
|
||||
- เพิ่มระบบส่งอีเมลยืนยันตัวตน (`POST /api/user/send-verify-email`)
|
||||
- ปุ่มกดส่งยืนยันในหน้าโปรไฟล์ (`profile.vue`) พร้อมจัดการสถานะ (Already Verified)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue