116 lines
3.5 KiB
Vue
116 lines
3.5 KiB
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) => {
|
|
forgotForm.email = val
|
|
if (/[\u0E00-\u0E7F]/.test(val)) {
|
|
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 {
|
|
alert(result.error || 'ไม่สามารถส่งลิงก์รีเซ็ตได้ กรุณาลองใหม่')
|
|
}
|
|
}
|
|
</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
|
|
: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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.card {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
</style>
|