138 lines
4.4 KiB
Vue
138 lines
4.4 KiB
Vue
<template>
|
|
<div class="p-6 items-center justify-center">
|
|
<q-card-section>
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl font-bold text-gray-900">E-Learning</h1>
|
|
<p class="text-gray-600 mt-2">ตั้งรหัสผ่านใหม่</p>
|
|
</div>
|
|
|
|
<!-- Success Message -->
|
|
<div v-if="success" class="text-center">
|
|
<q-icon name="check_circle" size="80px" color="positive" class="mb-4" />
|
|
<h2 class="text-xl font-semibold text-gray-900 mb-2">รีเซ็ตรหัสผ่านสำเร็จ!</h2>
|
|
<p class="text-gray-600 mb-6">คุณสามารถเข้าสู่ระบบด้วยรหัสผ่านใหม่ได้แล้ว</p>
|
|
<q-btn
|
|
color="primary"
|
|
label="ไปหน้าเข้าสู่ระบบ"
|
|
@click="router.push('/login')"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Reset Form -->
|
|
<div v-else>
|
|
<q-form @submit="handleResetPassword" class="space-y-4">
|
|
<q-input
|
|
v-model="password"
|
|
label="รหัสผ่านใหม่"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
outlined
|
|
:rules="[
|
|
val => !!val || 'กรุณากรอกรหัสผ่าน',
|
|
val => val.length >= 8 || 'รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร'
|
|
]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="lock" />
|
|
</template>
|
|
<template v-slot:append>
|
|
<q-icon
|
|
:name="showPassword ? 'visibility_off' : 'visibility'"
|
|
class="cursor-pointer"
|
|
@click="showPassword = !showPassword"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-input
|
|
v-model="confirmPassword"
|
|
label="ยืนยันรหัสผ่านใหม่"
|
|
:type="showConfirmPassword ? 'text' : 'password'"
|
|
outlined
|
|
:rules="[
|
|
val => !!val || 'กรุณายืนยันรหัสผ่าน',
|
|
val => val === password || 'รหัสผ่านไม่ตรงกัน'
|
|
]"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="lock" />
|
|
</template>
|
|
<template v-slot:append>
|
|
<q-icon
|
|
:name="showConfirmPassword ? 'visibility_off' : 'visibility'"
|
|
class="cursor-pointer"
|
|
@click="showConfirmPassword = !showConfirmPassword"
|
|
/>
|
|
</template>
|
|
</q-input>
|
|
|
|
<q-btn
|
|
type="submit"
|
|
color="primary"
|
|
label="ตั้งรหัสผ่านใหม่"
|
|
class="w-full"
|
|
size="lg"
|
|
:loading="loading"
|
|
/>
|
|
</q-form>
|
|
|
|
<div class="mt-6 text-center">
|
|
<NuxtLink to="/login" class="text-sm text-primary-600 hover:text-primary-700">
|
|
กลับหน้าเข้าสู่ระบบ
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useQuasar } from 'quasar';
|
|
import { authService } from '~/services/auth.service';
|
|
|
|
definePageMeta({
|
|
layout: 'auth'
|
|
});
|
|
|
|
const $q = useQuasar();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
// Form
|
|
const password = ref('');
|
|
const confirmPassword = ref('');
|
|
const showPassword = ref(false);
|
|
const showConfirmPassword = ref(false);
|
|
const loading = ref(false);
|
|
const success = ref(false);
|
|
|
|
// Get token from URL
|
|
const token = computed(() => route.query.token as string);
|
|
|
|
// Check if token exists
|
|
onMounted(() => {
|
|
if (!token.value) {
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: 'ลิงก์รีเซ็ตรหัสผ่านไม่ถูกต้อง',
|
|
position: 'top'
|
|
});
|
|
router.push('/login');
|
|
}
|
|
});
|
|
|
|
const handleResetPassword = async () => {
|
|
loading.value = true;
|
|
try {
|
|
await authService.resetPassword(token.value, password.value);
|
|
success.value = true;
|
|
} catch (error: any) {
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: error.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่',
|
|
position: 'top'
|
|
});
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|