Website Structure

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>