feat: Introduce user authentication and registration features with login, registration pages, and an authentication service.
This commit is contained in:
Missez
parent
11d714c632
commit
6d59ec06bf
3 changed files with 254 additions and 0 deletions
|
|
@ -57,6 +57,12 @@
|
|||
<div class="mt-6 text-center text-sm text-gray-600">
|
||||
<p>ทดสอบ: admin@elearning.local / instructor@elearning.local</p>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
ยังไม่มีบัญชี?
|
||||
<NuxtLink to="/register" class="text-primary-600 font-semibold hover:underline">
|
||||
ลงทะเบียนเป็นผู้สอน
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Forgot Password Modal -->
|
||||
|
|
|
|||
216
frontend_management/pages/register.vue
Normal file
216
frontend_management/pages/register.vue
Normal file
|
|
@ -0,0 +1,216 @@
|
|||
<template>
|
||||
<div class="min-h-screen bg-gradient-to-br from-primary-50 to-primary-100 flex items-center justify-center p-4">
|
||||
<div class="w-full max-w-xl">
|
||||
<!-- Register Card -->
|
||||
<q-card class="shadow-xl">
|
||||
<!-- Header -->
|
||||
<q-card-section class="text-center bg-primary-600 text-white">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
||||
<q-icon name="school" size="40px" color="white" />
|
||||
</div>
|
||||
<div class="text-2xl font-bold">ลงทะเบียนเป็นผู้สอน</div>
|
||||
<div class="text-primary-100 mt-2">สร้างบัญชีเพื่อเริ่มสร้างหลักสูตร</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Form -->
|
||||
<q-card-section>
|
||||
<q-form @submit="handleRegister">
|
||||
<!-- Username & Email -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<q-input
|
||||
v-model="form.username"
|
||||
label="ชื่อผู้ใช้ (Username) *"
|
||||
outlined
|
||||
:rules="[
|
||||
val => !!val || 'กรุณากรอก username',
|
||||
val => val.length >= 4 || 'อย่างน้อย 4 ตัวอักษร'
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="person" />
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
v-model="form.email"
|
||||
label="อีเมล *"
|
||||
type="email"
|
||||
outlined
|
||||
:rules="[
|
||||
val => !!val || 'กรุณากรอกอีเมล',
|
||||
val => /.+@.+\..+/.test(val) || 'รูปแบบอีเมลไม่ถูกต้อง'
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="email" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
|
||||
<q-input
|
||||
v-model="form.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="showPassword ? 'text' : 'password'"
|
||||
outlined
|
||||
:rules="[
|
||||
val => !!val || 'กรุณายืนยันรหัสผ่าน',
|
||||
val => val === form.password || 'รหัสผ่านไม่ตรงกัน'
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="lock" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Prefix & Name -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||
<q-select
|
||||
v-model="form.prefix"
|
||||
:options="prefixOptions"
|
||||
label="คำนำหน้า *"
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
:rules="[val => !!val.th || 'กรุณาเลือกคำนำหน้า']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="form.first_name"
|
||||
label="ชื่อจริง *"
|
||||
outlined
|
||||
:rules="[val => !!val || 'กรุณากรอกชื่อ']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="form.last_name"
|
||||
label="นามสกุล *"
|
||||
outlined
|
||||
:rules="[val => !!val || 'กรุณากรอกนามสกุล']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="mb-6">
|
||||
<q-input
|
||||
v-model="form.phone"
|
||||
label="เบอร์โทรศัพท์ *"
|
||||
outlined
|
||||
mask="###-###-####"
|
||||
:rules="[val => !!val || 'กรุณากรอกเบอร์โทร']"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="phone" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Submit -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
label="ลงทะเบียน"
|
||||
color="primary"
|
||||
class="w-full py-3"
|
||||
:loading="loading"
|
||||
/>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Footer -->
|
||||
<q-card-section class="text-center bg-grey-1">
|
||||
มีบัญชีอยู่แล้ว?
|
||||
<NuxtLink to="/login" class="text-primary-600 font-semibold hover:underline">
|
||||
เข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { authService, type RegisterInstructorRequest } from '~/services/auth.service';
|
||||
|
||||
definePageMeta({
|
||||
layout: false
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
|
||||
// Data
|
||||
const loading = ref(false);
|
||||
const showPassword = ref(false);
|
||||
const confirmPassword = ref('');
|
||||
|
||||
// Form
|
||||
const form = ref<RegisterInstructorRequest>({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
prefix: { en: '', th: '' },
|
||||
phone: ''
|
||||
});
|
||||
|
||||
// Prefix options
|
||||
const prefixOptions = [
|
||||
{ label: 'นาย / Mr.', value: { th: 'นาย', en: 'Mr.' } },
|
||||
{ label: 'นาง / Mrs.', value: { th: 'นาง', en: 'Mrs.' } },
|
||||
{ label: 'นางสาว / Ms.', value: { th: 'นางสาว', en: 'Ms.' } },
|
||||
{ label: 'ดร. / Dr.', value: { th: 'ดร.', en: 'Dr.' } },
|
||||
{ label: 'ผศ. / Asst.Prof.', value: { th: 'ผศ.', en: 'Asst.Prof.' } },
|
||||
{ label: 'รศ. / Assoc.Prof.', value: { th: 'รศ.', en: 'Assoc.Prof.' } },
|
||||
{ label: 'ศ. / Prof.', value: { th: 'ศ.', en: 'Prof.' } }
|
||||
];
|
||||
|
||||
// Methods
|
||||
const handleRegister = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await authService.registerInstructor(form.value);
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'ลงทะเบียนสำเร็จ! กรุณาเข้าสู่ระบบ',
|
||||
position: 'top'
|
||||
});
|
||||
|
||||
router.push('/login');
|
||||
} catch (error: any) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: error.data?.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -193,5 +193,37 @@ export const authService = {
|
|||
baseURL: config.public.apiBaseUrl as string,
|
||||
body: { token, password }
|
||||
});
|
||||
},
|
||||
|
||||
async registerInstructor(data: RegisterInstructorRequest): Promise<void> {
|
||||
const config = useRuntimeConfig();
|
||||
const useMockData = config.public.useMockData as boolean;
|
||||
|
||||
if (useMockData) {
|
||||
// Mock: simulate registration
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
return;
|
||||
}
|
||||
|
||||
// Real API
|
||||
await $fetch('/api/auth/register-instructor', {
|
||||
method: 'POST',
|
||||
baseURL: config.public.apiBaseUrl as string,
|
||||
body: data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Register Instructor Request
|
||||
export interface RegisterInstructorRequest {
|
||||
username: string;
|
||||
email: string;
|
||||
password: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
prefix: {
|
||||
en: string;
|
||||
th: string;
|
||||
};
|
||||
phone: string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue