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

feat: Implement initial landing pages, authentication flows, and course browsing functionality with i18n.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-02 11:11:25 +07:00
parent 7de5457170
commit b60a3853cd
12 changed files with 822 additions and 606 deletions
Download patch file Download diff file Expand all files Collapse all files

163
Frontend-Learner/pages/auth/forgot-password.vue
View file

@ -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>

254
Frontend-Learner/pages/auth/login.vue
View file

@ -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>

452
Frontend-Learner/pages/auth/register.vue
View file

@ -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>