101 lines
3.5 KiB
Vue
101 lines
3.5 KiB
Vue
<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>
|