feat: Initialize core frontend application structure, including layouts, authentication pages, and common UI components.
This commit is contained in:
supalerk-ar66
parent
ae84e7e879
commit
69eb60f901
16 changed files with 1178 additions and 1396 deletions
|
|
@ -34,9 +34,10 @@ const forgotRules = {
|
|||
}
|
||||
}
|
||||
|
||||
const handleInput = (val: string) => {
|
||||
forgotForm.email = val
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const handleInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
forgotForm.email = value
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.email = 'ห้ามใส่ภาษาไทย'
|
||||
} else {
|
||||
if (errors.value.email === 'ห้ามใส่ภาษาไทย') {
|
||||
|
|
@ -59,58 +60,115 @@ const sendResetLink = async () => {
|
|||
if (result.success) {
|
||||
forgotStep.value = 'success'
|
||||
} else {
|
||||
// Basic alert for now, could be improved with q-notify later
|
||||
alert(result.error || 'ไม่สามารถส่งลิงก์รีเซ็ตได้ กรุณาลองใหม่')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="width: 100%; max-width: 440px;">
|
||||
<!-- Loading Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
<div class="flex items-center justify-center min-h-screen bg-slate-900 font-inter p-4 relative overflow-hidden">
|
||||
|
||||
<!-- Logo area -->
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div
|
||||
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
||||
>
|
||||
E
|
||||
</div>
|
||||
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
||||
<p class="text-slate-700 dark:text-slate-400 text-sm">รีเซ็ตรหัณผ่านของคุณ</p>
|
||||
</div>
|
||||
<!-- 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>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div>
|
||||
<!-- Step 1: Request Email Form -->
|
||||
<form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink">
|
||||
<p class="text-slate-700 dark:text-slate-400 text-sm mb-6">กรุณากรอกอีเมลเพื่อรับลิงก์รีเซ็ตรหัณผ่าน</p>
|
||||
<FormInput
|
||||
:model-value="forgotForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="handleInput"
|
||||
/>
|
||||
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>ส่งลิงก์รีเซ็ต</span>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Navigation Links -->
|
||||
<div class="text-center mt-6">
|
||||
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-500 hover:text-slate-800 transition-colors">
|
||||
← กลับไปหน้าเข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
<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">
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div>
|
||||
<!-- Step 1: Request Email Form -->
|
||||
<form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink" class="flex flex-col gap-5">
|
||||
|
||||
<p class="text-slate-400 text-base mb-2 text-center">กรุณากรอกอีเมลเพื่อรับลิงก์รีเซ็ตรหัสผ่าน</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
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
ส่งลิงก์รีเซ็ต
|
||||
<template v-slot:loading>
|
||||
<q-spinner-dots color="white" />
|
||||
</template>
|
||||
</q-btn>
|
||||
</form>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div v-else class="text-center animate-fade-in">
|
||||
<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>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">ส่งลิงก์เรียบร้อยแล้ว!</h3>
|
||||
<p class="text-slate-400 mb-6">กรุณาตรวจสอบอีเมลของคุณเพื่อดำเนินการต่อ</p>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
box-shadow: var(--shadow-md);
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @file login.vue
|
||||
* @description หน้าเข้าสู่ระบบ (Login Page)
|
||||
* รองรับการเข้าสู่ระบบด้วย Email/Password
|
||||
* NOTE: ไม่เปลี่ยนสี และไม่เปลี่ยนการเรียก API login
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -19,6 +20,8 @@ const { login, user } = useAuth()
|
|||
const { errors, validate, clearFieldError } = useFormValidation()
|
||||
|
||||
const isLoading = ref(false)
|
||||
const rememberMe = ref(false)
|
||||
const showPassword = ref(false)
|
||||
|
||||
// Form data model
|
||||
const loginForm = reactive({
|
||||
|
|
@ -26,162 +29,218 @@ const loginForm = reactive({
|
|||
password: ''
|
||||
})
|
||||
|
||||
type LoginField = keyof typeof loginForm
|
||||
|
||||
// Validation rules definition
|
||||
// กำหนดกฎการตรวจสอบข้อมูล (Validation Rules)
|
||||
const loginRules = {
|
||||
email: {
|
||||
rules: {
|
||||
required: true,
|
||||
email: {
|
||||
rules: {
|
||||
required: true,
|
||||
email: true,
|
||||
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
||||
},
|
||||
custom: (val: string) => (/[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null)
|
||||
},
|
||||
label: 'อีเมล',
|
||||
messages: {
|
||||
required: 'กรุณากรอกอีเมลของคุณ',
|
||||
email: 'กรุณากรอกอีเมลให้ถูกต้อง (you@example.com)'
|
||||
}
|
||||
},
|
||||
password: {
|
||||
rules: {
|
||||
required: true,
|
||||
password: {
|
||||
rules: {
|
||||
required: true,
|
||||
minLength: 8,
|
||||
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
||||
},
|
||||
custom: (val: string) => (/[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null)
|
||||
},
|
||||
label: 'รหัสผ่าน',
|
||||
messages: {
|
||||
required: 'กรุณากรอกรหัสผ่าน',
|
||||
minLength: 'กรุณากรอกรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)'
|
||||
}
|
||||
}
|
||||
}
|
||||
} as const
|
||||
|
||||
/**
|
||||
* ฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและเรียก API login
|
||||
*/
|
||||
/**
|
||||
* จัดการเมื่อมีการพิมพ์ข้อมูล (Input Handler)
|
||||
* - ลบ error เมื่อเริ่มพิมพ์ใหม่
|
||||
* - ตรวจสอบภาษาไทยแบบ real-time
|
||||
*/
|
||||
const handleInput = (field: keyof typeof loginForm, value: string) => {
|
||||
const handleInput = (field: LoginField, value: string) => {
|
||||
loginForm[field] = value
|
||||
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value[field] = 'ห้ามใส่ภาษาไทย'
|
||||
} else {
|
||||
if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
|
||||
clearFieldError(field)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
|
||||
clearFieldError(field)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและเรียก API login
|
||||
*/
|
||||
const handleLogin = async () => {
|
||||
if (!validate(loginForm, loginRules)) return
|
||||
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
|
||||
// ✅ ไม่เปลี่ยน API: ยังคงเรียก login({ email, password }) ตามเดิม
|
||||
const result = await login({
|
||||
email: loginForm.email,
|
||||
password: loginForm.password
|
||||
})
|
||||
|
||||
|
||||
isLoading.value = false
|
||||
|
||||
if (result.success) {
|
||||
router.push('/dashboard')
|
||||
} else {
|
||||
// Show error on specific fields
|
||||
if (result.error === 'ไม่พบอีเมลในระบบ') {
|
||||
errors.value.email = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
errors.value.password = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
} else if (result.error === 'Email ไม่ถูกต้อง') {
|
||||
errors.value.email = result.error
|
||||
} else {
|
||||
errors.value.password = 'กรอกรหัสผ่านไม่ถูกต้อง'
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Show error on specific fields
|
||||
if (result.error === 'ไม่พบอีเมลในระบบ') {
|
||||
errors.value.email = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
errors.value.password = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
} else if (result.error === 'Email ไม่ถูกต้อง') {
|
||||
errors.value.email = result.error
|
||||
} else {
|
||||
errors.value.password = 'กรอกรหัสผ่านไม่ถูกต้อง'
|
||||
}
|
||||
}
|
||||
|
||||
// optional: social login placeholder (ไม่แตะ API เดิม)
|
||||
const handleGoogleLogin = () => {
|
||||
// TODO: implement when backend ready
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="width: 100%; max-width: 440px;">
|
||||
<!-- Loading Screen Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
|
||||
<!-- Header / Logo Section -->
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div
|
||||
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
||||
>
|
||||
E
|
||||
<!-- 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>
|
||||
|
||||
<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"
|
||||
>
|
||||
|
||||
<!-- 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>
|
||||
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
||||
<p class="text-slate-400 text-base">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
||||
</div>
|
||||
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
||||
<p class="text-muted text-sm">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form @submit.prevent="handleLogin" novalidate>
|
||||
<!-- Email Input -->
|
||||
<FormInput
|
||||
:model-value="loginForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="val => handleInput('email', val)"
|
||||
/>
|
||||
<!-- Password Input -->
|
||||
<FormInput
|
||||
:model-value="loginForm.password"
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:error="errors.password"
|
||||
required
|
||||
@update:model-value="val => handleInput('password', val)"
|
||||
/>
|
||||
|
||||
<!-- Helpers: Remember Me & Forgot Password -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<label class="flex items-center gap-2 text-sm text-muted">
|
||||
<input type="checkbox"> จดจำฉัน
|
||||
</label>
|
||||
<NuxtLink to="/auth/forgot-password" class="text-sm" style="color: var(--primary); font-weight: 500;">ลืมรหัสผ่าน?</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>เข้าสู่ระบบ</span>
|
||||
</button>
|
||||
<!-- 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>
|
||||
</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>
|
||||
|
||||
<!-- Social Login (Google) -->
|
||||
<button type="button" class="btn-google w-full mb-6 flex items-center justify-center gap-3">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/>
|
||||
<path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.834.859-3.048.859-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
|
||||
<path d="M3.964 10.706c-.18-.54-.282-1.117-.282-1.706 0-.589.102-1.166.282-1.706V4.962H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332z" fill="#FBBC05"/>
|
||||
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962l3.007 2.332c.708-2.127 2.692-3.711 5.036-3.711z" fill="#EA4335"/>
|
||||
</svg>
|
||||
<span>เข้าสู่ระบบด้วย Google</span>
|
||||
</button>
|
||||
<!-- 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>
|
||||
|
||||
<!-- Back to Landing Page -->
|
||||
<div class="text-center pt-6 border-t border-gray-100">
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl border border-gray-200 text-sm font-bold text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-blue-600 transition-all duration-300 group">
|
||||
<span class="transform group-hover:-translate-x-1 transition-transform">←</span>
|
||||
กลับไปหน้าแรก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
box-shadow: var(--shadow-md);
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field__control:before) {
|
||||
border-color: #475569; /* Slate 600 */
|
||||
}
|
||||
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
||||
border-color: #3b82f6; /* Blue 500 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @file register.vue
|
||||
* @description User Registration Page.
|
||||
* Features a multi-step style form (though currently single view) for creating a new account.
|
||||
* Updated to match the Dark Theme design.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -15,11 +16,12 @@ useHead({
|
|||
});
|
||||
|
||||
const router = useRouter();
|
||||
const { register } = useAuth(); // Import register from useAuth
|
||||
const { register } = useAuth();
|
||||
const { errors, validate, clearFieldError } = useFormValidation();
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const showPassword = ref(false);
|
||||
const showConfirmPassword = ref(false);
|
||||
|
||||
const registerForm = reactive({
|
||||
prefix: "นาย",
|
||||
|
|
@ -32,7 +34,6 @@ const registerForm = reactive({
|
|||
confirmPassword: "",
|
||||
});
|
||||
|
||||
|
||||
const registerRules = {
|
||||
username: {
|
||||
rules: {
|
||||
|
|
@ -88,58 +89,63 @@ const registerRules = {
|
|||
},
|
||||
};
|
||||
|
||||
const onUsernameInput = (val: string) => {
|
||||
registerForm.username = val;
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const prefixOptions = ['นาย', 'นาง', 'นางสาว']
|
||||
|
||||
// handlers
|
||||
const onUsernameInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.username = value;
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.username = 'ห้ามใส่ภาษาไทย';
|
||||
} else {
|
||||
// Only clear if the error is specifically about Thai chars,
|
||||
// otherwise we might clear minLength errors undesirably
|
||||
if (errors.value.username === 'ห้ามใส่ภาษาไทย') {
|
||||
clearFieldError('username');
|
||||
}
|
||||
if (errors.value.username === 'ห้ามใส่ภาษาไทย') clearFieldError('username');
|
||||
}
|
||||
};
|
||||
|
||||
const onPhoneInput = (val: string) => {
|
||||
registerForm.phone = val;
|
||||
if (/\D/.test(val)) {
|
||||
const onPhoneInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.phone = value;
|
||||
if (/\D/.test(value)) {
|
||||
errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
|
||||
} else {
|
||||
if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
|
||||
}
|
||||
};
|
||||
|
||||
const onEmailInput = (val: string) => {
|
||||
registerForm.email = val;
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const onEmailInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.email = value;
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.email = 'ห้ามใส่ภาษาไทย';
|
||||
} else {
|
||||
if (errors.value.email === 'ห้ามใส่ภาษาไทย') clearFieldError('email');
|
||||
}
|
||||
};
|
||||
|
||||
const onPasswordInput = (val: string) => {
|
||||
registerForm.password = val;
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const onPasswordInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.password = value;
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.password = 'ห้ามใส่ภาษาไทย';
|
||||
} else {
|
||||
if (errors.value.password === 'ห้ามใส่ภาษาไทย') clearFieldError('password');
|
||||
}
|
||||
};
|
||||
|
||||
const onFirstNameInput = (val: string) => {
|
||||
registerForm.firstName = val;
|
||||
if (/\d/.test(val)) {
|
||||
const onFirstNameInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.firstName = value;
|
||||
if (/\d/.test(value)) {
|
||||
errors.value.firstName = 'ห้ามใส่ตัวเลข';
|
||||
} else {
|
||||
if (errors.value.firstName === 'ห้ามใส่ตัวเลข') clearFieldError('firstName');
|
||||
}
|
||||
};
|
||||
|
||||
const onLastNameInput = (val: string) => {
|
||||
registerForm.lastName = val;
|
||||
if (/\d/.test(val)) {
|
||||
const onLastNameInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.lastName = value;
|
||||
if (/\d/.test(value)) {
|
||||
errors.value.lastName = 'ห้ามใส่ตัวเลข';
|
||||
} else {
|
||||
if (errors.value.lastName === 'ห้ามใส่ตัวเลข') clearFieldError('lastName');
|
||||
|
|
@ -151,7 +157,6 @@ const handleRegister = async () => {
|
|||
|
||||
isLoading.value = true;
|
||||
|
||||
// Map prefix to { th, en }
|
||||
const prefixMap: Record<string, string> = {
|
||||
'นาย': 'Mr.',
|
||||
'นาง': 'Mrs.',
|
||||
|
|
@ -185,183 +190,235 @@ const handleRegister = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card auth-card" style="width: 100%; max-width: 480px">
|
||||
<!-- Loading Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
<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>
|
||||
|
||||
<!-- Title Area -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-white mb-2">e-Learning Platform</h1>
|
||||
<p class="text-gray-400 text-sm">
|
||||
ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ
|
||||
</p>
|
||||
</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">
|
||||
|
||||
<form @submit.prevent="handleRegister">
|
||||
<FormInput
|
||||
:model-value="registerForm.username"
|
||||
label="ชื่อผู้ใช้"
|
||||
placeholder="username"
|
||||
:error="errors.username"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onUsernameInput"
|
||||
/>
|
||||
<FormInput
|
||||
:model-value="registerForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onEmailInput"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
:model-value="registerForm.password"
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
|
||||
:error="errors.password"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onPasswordInput"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
v-model="registerForm.confirmPassword"
|
||||
label="ยืนยันรหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="ยืนยันรหัสผ่านอีกครั้ง"
|
||||
:error="errors.confirmPassword"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
|
||||
<div class="grid-12" style="gap: 16px; margin-bottom: 0">
|
||||
<div class="col-span-4">
|
||||
<label class="input-label text-gray-300">คำนำหน้า</label>
|
||||
<select
|
||||
v-model="registerForm.prefix"
|
||||
class="input-field dark-input"
|
||||
style="height: 42px"
|
||||
>
|
||||
<option value="นาย">นาย</option>
|
||||
<option value="นาง">นาง</option>
|
||||
<option value="นางสาว">นางสาว</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-8">
|
||||
<FormInput
|
||||
:model-value="registerForm.firstName"
|
||||
label="ชื่อ"
|
||||
placeholder=""
|
||||
:error="errors.firstName"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onFirstNameInput"
|
||||
/>
|
||||
<!-- 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>
|
||||
|
||||
<FormInput
|
||||
:model-value="registerForm.lastName"
|
||||
label="นามสกุล"
|
||||
placeholder=""
|
||||
:error="errors.lastName"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onLastNameInput"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<FormInput
|
||||
:model-value="registerForm.phone"
|
||||
label="เบอร์โทรศัพท์"
|
||||
type="tel"
|
||||
placeholder=""
|
||||
:error="errors.phone"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onPhoneInput"
|
||||
/>
|
||||
<!-- 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>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary w-full mb-4 mt-2"
|
||||
:disabled="isLoading"
|
||||
style="height: 44px; font-size: 16px"
|
||||
>
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>สร้างบัญชี</span>
|
||||
</button>
|
||||
<!-- 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>
|
||||
|
||||
<div class="text-center mt-6 text-sm">
|
||||
<span class="text-muted">มีบัญชีอยู่แล้ว? </span>
|
||||
<NuxtLink to="/auth/login" class="font-bold text-primary hover:underline">เข้าสู่ระบบ</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
<!-- 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">
|
||||
เข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Force Dark Theme for Card */
|
||||
.auth-card {
|
||||
background-color: #1e293b; /* Slate 800 */
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
color: #f8fafc;
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Input Overrides for Dark Mode integration within this page */
|
||||
.dark-input {
|
||||
background-color: #334155; /* Slate 700 */
|
||||
border-color: #475569; /* Slate 600 */
|
||||
color: #f1f5f9;
|
||||
/* Custom dark input styling */
|
||||
.custom-dark-input :deep(.q-field__control) {
|
||||
background: #334155 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dark-input:focus {
|
||||
.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;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Deep selector for FormInput component internals */
|
||||
:deep(.input-field) {
|
||||
background-color: #334155 !important;
|
||||
border-color: #475569 !important;
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
:deep(.input-field::placeholder) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:deep(.input-label) {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
:deep(.input-label span.required-mark) {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Select option styling */
|
||||
option {
|
||||
background-color: #334155;
|
||||
/* Adjust QSelect to match */
|
||||
.custom-dark-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/*
|
||||
Global Override for Auth Layout Background on this page context.
|
||||
Ensures the entire page background matches the design requirement.
|
||||
*/
|
||||
.auth-shell {
|
||||
background-color: #0f172a !important; /* Slate 900 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue