367 lines
10 KiB
Vue
367 lines
10 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file register.vue
|
|
* @description User Registration Page.
|
|
* Features a multi-step style form (though currently single view) for creating a new account.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: "auth",
|
|
middleware: "auth",
|
|
});
|
|
|
|
useHead({
|
|
title: "สมัครสมาชิก - e-Learning",
|
|
});
|
|
|
|
const router = useRouter();
|
|
const { register } = useAuth(); // Import register from useAuth
|
|
const { errors, validate, clearFieldError } = useFormValidation();
|
|
|
|
const isLoading = ref(false);
|
|
|
|
|
|
const registerForm = reactive({
|
|
prefix: "นาย",
|
|
username: "",
|
|
firstName: "",
|
|
lastName: "",
|
|
phone: "",
|
|
email: "",
|
|
password: "",
|
|
confirmPassword: "",
|
|
});
|
|
|
|
|
|
const registerRules = {
|
|
username: {
|
|
rules: {
|
|
required: true,
|
|
minLength: 4,
|
|
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
|
},
|
|
label: "ชื่อผู้ใช้"
|
|
},
|
|
firstName: {
|
|
rules: {
|
|
required: true,
|
|
minLength: 2,
|
|
custom: (val: string) => /\d/.test(val) ? 'ห้ามใส่ตัวเลข' : null
|
|
},
|
|
label: "ชื่อ"
|
|
},
|
|
lastName: {
|
|
rules: {
|
|
required: true,
|
|
minLength: 2,
|
|
custom: (val: string) => /\d/.test(val) ? 'ห้ามใส่ตัวเลข' : null
|
|
},
|
|
label: "นามสกุล"
|
|
},
|
|
phone: {
|
|
rules: {
|
|
required: true,
|
|
pattern: /^0[0-9]{8,9}$/,
|
|
custom: (val: string) => /\D/.test(val) ? 'กรุณากรอกเฉพาะตัวเลข' : null
|
|
},
|
|
label: "เบอร์โทรศัพท์",
|
|
},
|
|
email: {
|
|
rules: {
|
|
required: true,
|
|
email: true,
|
|
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
|
},
|
|
label: "อีเมล"
|
|
},
|
|
password: {
|
|
rules: {
|
|
required: true,
|
|
minLength: 8,
|
|
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
|
},
|
|
label: "รหัสผ่าน"
|
|
},
|
|
confirmPassword: {
|
|
rules: { required: true, match: "password" },
|
|
label: "ยืนยันรหัสผ่าน",
|
|
},
|
|
};
|
|
|
|
const onUsernameInput = (val: string) => {
|
|
registerForm.username = val;
|
|
if (/[\u0E00-\u0E7F]/.test(val)) {
|
|
errors.value.username = 'ห้ามใส่ภาษาไทย';
|
|
} else {
|
|
// Only clear if the error is specifically about Thai chars,
|
|
// otherwise we might clear minLength errors undesirably
|
|
if (errors.value.username === 'ห้ามใส่ภาษาไทย') {
|
|
clearFieldError('username');
|
|
}
|
|
}
|
|
};
|
|
|
|
const onPhoneInput = (val: string) => {
|
|
registerForm.phone = val;
|
|
if (/\D/.test(val)) {
|
|
errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
|
|
} else {
|
|
if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
|
|
}
|
|
};
|
|
|
|
const onEmailInput = (val: string) => {
|
|
registerForm.email = val;
|
|
if (/[\u0E00-\u0E7F]/.test(val)) {
|
|
errors.value.email = 'ห้ามใส่ภาษาไทย';
|
|
} else {
|
|
if (errors.value.email === 'ห้ามใส่ภาษาไทย') clearFieldError('email');
|
|
}
|
|
};
|
|
|
|
const onPasswordInput = (val: string) => {
|
|
registerForm.password = val;
|
|
if (/[\u0E00-\u0E7F]/.test(val)) {
|
|
errors.value.password = 'ห้ามใส่ภาษาไทย';
|
|
} else {
|
|
if (errors.value.password === 'ห้ามใส่ภาษาไทย') clearFieldError('password');
|
|
}
|
|
};
|
|
|
|
const onFirstNameInput = (val: string) => {
|
|
registerForm.firstName = val;
|
|
if (/\d/.test(val)) {
|
|
errors.value.firstName = 'ห้ามใส่ตัวเลข';
|
|
} else {
|
|
if (errors.value.firstName === 'ห้ามใส่ตัวเลข') clearFieldError('firstName');
|
|
}
|
|
};
|
|
|
|
const onLastNameInput = (val: string) => {
|
|
registerForm.lastName = val;
|
|
if (/\d/.test(val)) {
|
|
errors.value.lastName = 'ห้ามใส่ตัวเลข';
|
|
} else {
|
|
if (errors.value.lastName === 'ห้ามใส่ตัวเลข') clearFieldError('lastName');
|
|
}
|
|
};
|
|
|
|
const handleRegister = async () => {
|
|
if (!validate(registerForm, registerRules)) return;
|
|
|
|
isLoading.value = true;
|
|
|
|
// Map prefix to { th, en }
|
|
const prefixMap: Record<string, string> = {
|
|
'นาย': 'Mr.',
|
|
'นาง': 'Mrs.',
|
|
'นางสาว': 'Ms.'
|
|
};
|
|
|
|
const payload = {
|
|
username: registerForm.username,
|
|
email: registerForm.email,
|
|
password: registerForm.password,
|
|
first_name: registerForm.firstName,
|
|
last_name: registerForm.lastName,
|
|
prefix: {
|
|
th: registerForm.prefix,
|
|
en: prefixMap[registerForm.prefix] || 'Mr.'
|
|
},
|
|
phone: registerForm.phone
|
|
};
|
|
|
|
const result = await register(payload);
|
|
|
|
isLoading.value = false;
|
|
|
|
if (result.success) {
|
|
alert('สมัครสมาชิกสำเร็จ! กรุณาเข้าสู่ระบบ');
|
|
router.push("/auth/login");
|
|
} else {
|
|
alert(result.error || 'การลงทะเบียนล้มเหลว');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card auth-card" style="width: 100%; max-width: 480px">
|
|
<!-- Loading Overlay -->
|
|
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
|
|
|
<!-- Title Area -->
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-3xl font-bold text-white mb-2">e-Learning Platform</h1>
|
|
<p class="text-gray-400 text-sm">
|
|
ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ
|
|
</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="handleRegister">
|
|
<FormInput
|
|
:model-value="registerForm.username"
|
|
label="ชื่อผู้ใช้"
|
|
placeholder="username"
|
|
:error="errors.username"
|
|
required
|
|
class="dark-form-input"
|
|
@update:model-value="onUsernameInput"
|
|
/>
|
|
<FormInput
|
|
:model-value="registerForm.email"
|
|
label="อีเมล"
|
|
type="email"
|
|
placeholder="student@example.com"
|
|
:error="errors.email"
|
|
required
|
|
class="dark-form-input"
|
|
@update:model-value="onEmailInput"
|
|
/>
|
|
|
|
<FormInput
|
|
:model-value="registerForm.password"
|
|
label="รหัสผ่าน"
|
|
type="password"
|
|
placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
|
|
:error="errors.password"
|
|
required
|
|
class="dark-form-input"
|
|
@update:model-value="onPasswordInput"
|
|
/>
|
|
|
|
<FormInput
|
|
v-model="registerForm.confirmPassword"
|
|
label="ยืนยันรหัสผ่าน"
|
|
type="password"
|
|
placeholder="ยืนยันรหัสผ่านอีกครั้ง"
|
|
:error="errors.confirmPassword"
|
|
required
|
|
class="dark-form-input"
|
|
@update:model-value="clearFieldError('confirmPassword')"
|
|
/>
|
|
|
|
<div class="grid-12" style="gap: 16px; margin-bottom: 0">
|
|
<div class="col-span-4">
|
|
<label class="input-label text-gray-300">คำนำหน้า</label>
|
|
<select
|
|
v-model="registerForm.prefix"
|
|
class="input-field dark-input"
|
|
style="height: 42px"
|
|
>
|
|
<option value="นาย">นาย</option>
|
|
<option value="นาง">นาง</option>
|
|
<option value="นางสาว">นางสาว</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-span-8">
|
|
<FormInput
|
|
:model-value="registerForm.firstName"
|
|
label="ชื่อ"
|
|
placeholder=""
|
|
:error="errors.firstName"
|
|
required
|
|
class="dark-form-input"
|
|
@update:model-value="onFirstNameInput"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<FormInput
|
|
:model-value="registerForm.lastName"
|
|
label="นามสกุล"
|
|
placeholder=""
|
|
:error="errors.lastName"
|
|
required
|
|
class="dark-form-input"
|
|
@update:model-value="onLastNameInput"
|
|
/>
|
|
|
|
<FormInput
|
|
:model-value="registerForm.phone"
|
|
label="เบอร์โทรศัพท์"
|
|
type="tel"
|
|
placeholder=""
|
|
:error="errors.phone"
|
|
required
|
|
class="dark-form-input"
|
|
@update:model-value="onPhoneInput"
|
|
/>
|
|
|
|
<button
|
|
type="submit"
|
|
class="btn btn-primary w-full mb-4 mt-2"
|
|
:disabled="isLoading"
|
|
style="height: 44px; font-size: 16px"
|
|
>
|
|
<LoadingSpinner v-if="isLoading" size="sm" />
|
|
<span v-else>สร้างบัญชี</span>
|
|
</button>
|
|
|
|
<div class="text-center mt-6 text-sm">
|
|
<span class="text-muted">มีบัญชีอยู่แล้ว? </span>
|
|
<NuxtLink to="/auth/login" class="font-bold text-primary hover:underline">เข้าสู่ระบบ</NuxtLink>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Force Dark Theme for Card */
|
|
.auth-card {
|
|
background-color: #1e293b; /* Slate 800 */
|
|
border-color: transparent;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
color: #f8fafc;
|
|
}
|
|
|
|
|
|
|
|
/* Input Overrides for Dark Mode integration within this page */
|
|
.dark-input {
|
|
background-color: #334155; /* Slate 700 */
|
|
border-color: #475569; /* Slate 600 */
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.dark-input:focus {
|
|
border-color: #3b82f6;
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
/* Deep selector for FormInput component internals */
|
|
:deep(.input-field) {
|
|
background-color: #334155 !important;
|
|
border-color: #475569 !important;
|
|
color: #f1f5f9 !important;
|
|
}
|
|
|
|
:deep(.input-field::placeholder) {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
:deep(.input-label) {
|
|
color: #cbd5e1 !important;
|
|
}
|
|
|
|
:deep(.input-label span.required-mark) {
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* Select option styling */
|
|
option {
|
|
background-color: #334155;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
/*
|
|
Global Override for Auth Layout Background on this page context.
|
|
Ensures the entire page background matches the design requirement.
|
|
*/
|
|
.auth-shell {
|
|
background-color: #0f172a !important; /* Slate 900 */
|
|
}
|
|
</style>
|