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>