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

feat: Initialize core frontend application structure, including layouts, authentication pages, and common UI components.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-26 09:27:31 +07:00
parent ae84e7e879
commit 69eb60f901
16 changed files with 1178 additions and 1396 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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