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

<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,
      custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null 
    }, 
    label: 'อีเมล' 
  }
}

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 === 'ห้ามใส่ภาษาไทย') {
      clearFieldError('email')
    }
  }
}

const { requestPasswordReset } = useAuth()

const sendResetLink = async () => {
  if (!validate(forgotForm, forgotRules)) return
  
  isLoading.value = true
  
  const result = await requestPasswordReset(forgotForm.email)
  
  isLoading.value = false
  
  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="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>

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

      <!-- 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>
.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>