ADD:API RESET -request and password and Refresh access token
This commit is contained in:
supalerk-ar66
parent
c557c383e3
commit
ae771420be
8 changed files with 55 additions and 29 deletions
|
|
@ -24,7 +24,25 @@ const forgotForm = reactive({
|
|||
})
|
||||
|
||||
const forgotRules = {
|
||||
email: { rules: { required: true, email: true }, label: 'อีเมล' }
|
||||
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()
|
||||
|
|
@ -68,29 +86,19 @@ const sendResetLink = async () => {
|
|||
<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"
|
||||
:model-value="forgotForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="clearFieldError('email')"
|
||||
@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>
|
||||
|
||||
<!-- 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">
|
||||
|
|
|
|||
|
|
@ -1,130 +0,0 @@
|
|||
<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 route = useRoute()
|
||||
const router = useRouter()
|
||||
const { confirmResetPassword } = useAuth()
|
||||
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: 'ยืนยันรหัสผ่าน' }
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!route.query.token || !route.query.id) {
|
||||
alert('ลิงก์รีเซ็ตรหัสผ่านไม่ถูกต้องหรือหมดอายุ')
|
||||
router.push('/auth/login')
|
||||
}
|
||||
})
|
||||
|
||||
const resetPassword = async () => {
|
||||
if (!validate(resetForm, resetRules)) return
|
||||
|
||||
// Extract token and id from query
|
||||
const token = route.query.token as string
|
||||
const id = Number(route.query.id)
|
||||
|
||||
if (!token || !id) {
|
||||
alert('ข้อมูลสำหรับรีเซ็ตไม่ครบถ้วน')
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
const result = await confirmResetPassword({
|
||||
id,
|
||||
token,
|
||||
password: resetForm.password
|
||||
})
|
||||
|
||||
isLoading.value = false
|
||||
|
||||
if (result.success) {
|
||||
alert('รีเซ็ตรหัสผ่านสำเร็จ! กรุณาเข้าสู่ระบบด้วยรหัสผ่านใหม่')
|
||||
router.push('/auth/login')
|
||||
} else {
|
||||
alert(result.error || 'เกิดข้อผิดพลาดในการรีเซ็ตรหัสผ่าน')
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue