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">
|
<div class="mt-6 text-center text-sm text-gray-600">
|
||||||
<p>ทดสอบ: admin@elearning.local / instructor@elearning.local</p>
|
<p>ทดสอบ: admin@elearning.local / instructor@elearning.local</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mt-4 text-center">
|
||||||
|
ยังไม่มีบัญชี?
|
||||||
|
<NuxtLink to="/register" class="text-primary-600 font-semibold hover:underline">
|
||||||
|
ลงทะเบียนเป็นผู้สอน
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
</q-card-section>
|
</q-card-section>
|
||||||
|
|
||||||
<!-- Forgot Password Modal -->
|
<!-- 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,
|
baseURL: config.public.apiBaseUrl as string,
|
||||||
body: { token, password }
|
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