Website Structure

Frontend-Learner/pages/auth/forgot-password.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * @file forgot-password.vue
+ * @description Forgot Password Page.
+ * Allows users to request a password reset link via email.
+ */
+
+definePageMeta({
+  layout: 'auth'
+})
+
+useHead({
+  title: 'ลืมรหัสผ่าน - e-Learning'
+})
+
+const { errors, validate, clearFieldError } = useFormValidation()
+
+const isLoading = ref(false)
+// State to track if the request email has been sent
+const forgotStep = ref<'initial' | 'success'>('initial')
+
+const forgotForm = reactive({
+  email: ''
+})
+
+const forgotRules = {
+  email: { rules: { required: true, email: true }, label: 'อีเมล' }
+}
+
+const sendResetLink = async () => {
+  if (!validate(forgotForm, forgotRules)) return
+  
+  isLoading.value = true
+  // Simulate API call
+  await new Promise(resolve => setTimeout(resolve, 1500))
+  isLoading.value = false
+  forgotStep.value = 'success'
+}
+</script>
+
+<template>
+  <div class="card" style="width: 100%; max-width: 440px;">
+    <!-- Loading Overlay -->
+    <LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
+    
+    <!-- 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>
+
+    <!-- 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
+          v-model="forgotForm.email"
+          label="อีเมล"
+          type="email"
+          placeholder="student@example.com"
+          :error="errors.email"
+          required
+          @update:model-value="clearFieldError('email')"
+        />
+        <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>
+
+      <!-- Step 2: Success Message -->
+      <div v-else style="text-align: center;">
+        <div style="font-size: 40px; margin-bottom: 16px;">📧</div>
+        <h3 class="font-bold mb-2">ส่งลิงก์เรียบร้อยแล้ว</h3>
+        <p class="text-sm text-muted mb-6">กรุณาตรวจสอบกล่องจดหมายในอีเมลของคุณเพื่อดำเนินการรีเซ็ตรหัสผ่าน</p>
+        <!-- Simulation: redirect to reset-password for demo -->
+        <NuxtLink to="/reset-password" class="btn btn-primary w-full mb-4">จำลองการคลิกลิงก์ (เพื่อการสาธิต)</NuxtLink>
+      </div>
+
+      <!-- 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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  box-shadow: var(--shadow-md);
+}
+</style>

Frontend-Learner/pages/auth/login.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+/**
+ * @file login.vue
+ * @description Login Page.
+ * Handles user authentication with email/password and social login (mock).
+ * Uses the 'auth' layout.
+ */
+
+definePageMeta({
+  layout: 'auth',
+  middleware: 'auth'
+})
+
+useHead({
+  title: 'เข้าสู่ระบบ - e-Learning'
+})
+
+const router = useRouter()
+const { login } = useAuth()
+const { errors, validate, clearFieldError } = useFormValidation()
+
+const isLoading = ref(false)
+
+// Form data model
+const loginForm = reactive({
+  email: '',
+  password: ''
+})
+
+// Validation rules definition
+const loginRules = {
+  email: { rules: { required: true, email: true }, label: 'อีเมล' },
+  password: { rules: { required: true, minLength: 6 }, label: 'รหัสผ่าน' }
+}
+
+/**
+ * Validates form and attempts login.
+ * Currently simulates an API call for demonstration.
+ */
+const handleLogin = async () => {
+  if (!validate(loginForm, loginRules)) return
+  
+  isLoading.value = true
+  // Simulate API call delay
+  await new Promise(resolve => setTimeout(resolve, 1500))
+  
+  // Demo credential check
+  if (loginForm.email === 'student@example.com' && loginForm.password === '123456') {
+    login() // Set token via auth composable
+    isLoading.value = false
+    router.push('/dashboard')
+  } else {
+    isLoading.value = false
+    alert('อีเมลหรือรหัสผ่านไม่ถูกต้อง! (Demo: student@example.com / 123456)')
+  }
+}
+</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
+      </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">
+      <!-- Email Input -->
+      <FormInput
+        v-model="loginForm.email"
+        label="อีเมล"
+        type="email"
+        placeholder="student@example.com"
+        :error="errors.email"
+        required
+        @update:model-value="clearFieldError('email')"
+      />
+      <!-- Password Input -->
+      <FormInput
+        v-model="loginForm.password"
+        label="รหัสผ่าน"
+        type="password"
+        placeholder="••••••••"
+        :error="errors.password"
+        required
+        @update:model-value="clearFieldError('password')"
+      />
+      
+      <!-- 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>
+
+      <!-- Demo Credentials Hint (For Development Only) -->
+      <div style="background: var(--neutral-100); padding: 12px; border-radius: 8px; margin-bottom: 16px; border: 1px dashed var(--primary);">
+        <p class="text-xs font-bold text-primary mb-1">🔑 บัญชีทดสอบ:</p>
+        <p class="text-xs text-muted">อีเมล: student@example.com</p>
+        <p class="text-xs text-muted">รหัสผ่าน: 123456</p>
+      </div>
+
+      <!-- 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-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>
+</template>
+
+<style scoped>
+.card {
+  box-shadow: var(--shadow-md);
+}
+</style>

Frontend-Learner/pages/auth/register.vue

@@ -0,0 +1,252 @@
+<script setup lang="ts">
+/**
+ * @file register.vue
+ * @description User Registration Page.
+ * Features a multi-step style form (though currently single view) for creating a new account.
+ */
+
+definePageMeta({
+  layout: "auth",
+  middleware: "auth",
+});
+
+useHead({
+  title: "สมัครสมาชิก - e-Learning",
+});
+
+const router = useRouter();
+const { errors, validate, clearFieldError } = useFormValidation();
+
+const isLoading = ref(false);
+
+// Reactive form state
+const registerForm = reactive({
+  prefix: "นาย",
+  username: "",
+  firstName: "",
+  lastName: "",
+  phone: "",
+  email: "",
+  password: "",
+  confirmPassword: "",
+});
+
+// Validation rules
+const registerRules = {
+  username: { rules: { required: true, minLength: 4 }, label: "ชื่อผู้ใช้" },
+  firstName: { rules: { required: true, minLength: 2 }, label: "ชื่อ" },
+  lastName: { rules: { required: true, minLength: 2 }, label: "นามสกุล" },
+  phone: {
+    rules: { required: true, pattern: /^0[0-9]{8,9}$/ },
+    label: "เบอร์โทรศัพท์",
+  },
+  email: { rules: { required: true, email: true }, label: "อีเมล" },
+  password: { rules: { required: true, minLength: 8 }, label: "รหัสผ่าน" },
+  confirmPassword: {
+    rules: { required: true, match: "password" },
+    label: "ยืนยันรหัสผ่าน",
+  },
+};
+
+const handleRegister = async () => {
+  if (!validate(registerForm, registerRules)) return;
+
+  isLoading.value = true;
+  // Simulate API delay
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  isLoading.value = false;
+  router.push("/dashboard");
+};
+</script>
+
+<template>
+  <div class="card auth-card" style="width: 100%; max-width: 480px">
+    <!-- Loading Overlay -->
+    <LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
+
+    <!-- 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>
+
+    <!-- Tabs Removed -->
+
+    <!-- REGISTER FORM -->
+    <form @submit.prevent="handleRegister">
+       <!-- Email -->
+       <FormInput
+        v-model="registerForm.email"
+        label="อีเมล"
+        type="email"
+        placeholder="student@example.com"
+        :error="errors.email"
+        required
+        class="dark-form-input"
+        @update:model-value="clearFieldError('email')"
+      />
+
+      <!-- Username -->
+      <FormInput
+        v-model="registerForm.username"
+        label="ชื่อผู้ใช้"
+        placeholder="username"
+        :error="errors.username"
+        required
+        class="dark-form-input"
+        @update:model-value="clearFieldError('username')"
+      />
+
+      <!-- Password Fields -->
+      <FormInput
+        v-model="registerForm.password"
+        label="รหัสผ่าน"
+        type="password"
+        placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
+        :error="errors.password"
+        required
+        class="dark-form-input"
+        @update:model-value="clearFieldError('password')"
+      />
+
+      <FormInput
+        v-model="registerForm.confirmPassword"
+        label="ยืนยันรหัสผ่าน"
+        type="password"
+        placeholder="ยืนยันรหัสผ่านอีกครั้ง"
+        :error="errors.confirmPassword"
+        required
+        class="dark-form-input"
+        @update:model-value="clearFieldError('confirmPassword')"
+      />
+      
+      <!-- Name Fields (Split Row) -->
+      <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
+            v-model="registerForm.firstName"
+            label="ชื่อ"
+            placeholder=""
+            :error="errors.firstName"
+            required
+            class="dark-form-input"
+            @update:model-value="clearFieldError('firstName')"
+          />
+        </div>
+      </div>
+
+      <FormInput
+        v-model="registerForm.lastName"
+        label="นามสกุล"
+        placeholder=""
+        :error="errors.lastName"
+        required
+        class="dark-form-input"
+        @update:model-value="clearFieldError('lastName')"
+      />
+
+      <FormInput
+        v-model="registerForm.phone"
+        label="เบอร์โทรศัพท์"
+        type="tel"
+        placeholder="0812345678"
+        :error="errors.phone"
+        required
+        class="dark-form-input"
+        @update:model-value="clearFieldError('phone')"
+      />
+
+      <!-- Submit Button -->
+      <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>
+
+      <!-- Toggle to Login -->
+      <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>
+  </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;
+}
+
+
+
+/* Input Overrides for Dark Mode integration within this page */
+.dark-input {
+  background-color: #334155; /* Slate 700 */
+  border-color: #475569; /* Slate 600 */
+  color: #f1f5f9;
+}
+
+.dark-input:focus {
+  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;
+  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>

Frontend-Learner/pages/auth/reset-password.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * @file reset-password.vue
+ * @description Reset Password Page.
+ * Allows user to set a new password after verifying their email link (simulated).
+ */
+
+definePageMeta({
+  layout: 'auth'
+})
+
+useHead({
+  title: 'ตั้งรหัสผ่านใหม่ - e-Learning'
+})
+
+const router = useRouter()
+const { errors, validate, clearFieldError } = useFormValidation()
+
+const isLoading = ref(false)
+
+const resetForm = reactive({
+  password: '',
+  confirmPassword: ''
+})
+
+const resetRules = {
+  password: { rules: { required: true, minLength: 8 }, label: 'รหัสผ่านใหม่' },
+  confirmPassword: { rules: { required: true, match: 'password' }, label: 'ยืนยันรหัสผ่าน' }
+}
+
+const resetPassword = async () => {
+  if (!validate(resetForm, resetRules)) return
+  
+  isLoading.value = true
+  await new Promise(resolve => setTimeout(resolve, 1500))
+  isLoading.value = false
+  alert('รีเซ็ตรหัสผ่านสำเร็จ!')
+  router.push('/auth/login')
+}
+</script>
+
+<template>
+  <div class="card" style="width: 100%; max-width: 440px;">
+    <!-- Loading Overlay -->
+    <LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
+    
+    <!-- Header -->
+    <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-muted text-sm">ตั้งรหัสผ่านใหม่ของคุณ</p>
+    </div>
+
+    <!-- RESET PASSWORD FORM -->
+    <form @submit.prevent="resetPassword">
+      <h3 class="font-bold mb-4">ตั้งรหัสผ่านใหม่</h3>
+      
+      <!-- New Password -->
+      <FormInput
+        v-model="resetForm.password"
+        label="รหัสผ่านใหม่"
+        type="password"
+        placeholder="••••••••"
+        :error="errors.password"
+        required
+        @update:model-value="clearFieldError('password')"
+      />
+      
+      <!-- Confirm New Password -->
+      <FormInput
+        v-model="resetForm.confirmPassword"
+        label="ยืนยันรหัสผ่านใหม่"
+        type="password"
+        placeholder="••••••••"
+        :error="errors.confirmPassword"
+        required
+        @update:model-value="clearFieldError('confirmPassword')"
+      />
+      
+      <button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
+        <LoadingSpinner v-if="isLoading" size="sm" />
+        <span v-else>บันทึกรหัสผ่านใหม่</span>
+      </button>
+
+      <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>
+      </div>
+      <div class="text-center pt-4 border-t border-gray-100">
+        <NuxtLink to="/" class="text-sm text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors flex items-center justify-center gap-1">
+          <span>←</span> กลับไปหน้าหลัก
+        </NuxtLink>
+      </div>
+    </form>
+  </div>
+</template>