From 6d59ec06bf1437e02c0223b2f6cf7fd5eab71d6f Mon Sep 17 00:00:00 2001
From: Missez <lertpisi@gmail.com>
Date: Mon, 19 Jan 2026 16:52:37 +0700
Subject: [PATCH] feat: Introduce user authentication and registration features
 with login, registration pages, and an authentication service.

---
 frontend_management/pages/login.vue          |   6 +
 frontend_management/pages/register.vue       | 216 +++++++++++++++++++
 frontend_management/services/auth.service.ts |  32 +++
 3 files changed, 254 insertions(+)
 create mode 100644 frontend_management/pages/register.vue

diff --git a/frontend_management/pages/login.vue b/frontend_management/pages/login.vue
index 679f5012..c7603bd8 100644
--- a/frontend_management/pages/login.vue
+++ b/frontend_management/pages/login.vue
@@ -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 -->
diff --git a/frontend_management/pages/register.vue b/frontend_management/pages/register.vue
new file mode 100644
index 00000000..3f8d4f9b
--- /dev/null
+++ b/frontend_management/pages/register.vue
@@ -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>
diff --git a/frontend_management/services/auth.service.ts b/frontend_management/services/auth.service.ts
index c7579709..bd3b0011 100644
--- a/frontend_management/services/auth.service.ts
+++ b/frontend_management/services/auth.service.ts
@@ -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;
+}