elearning/frontend_management/pages/register.vue

<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 ตัวอักษร'
                ]"
                hide-bottom-space
                lazy-rules="ondemand"
              >
                <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) || 'รูปแบบอีเมลไม่ถูกต้อง'
                ]"
                hide-bottom-space
                lazy-rules="ondemand"
              >
                <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 ตัวอักษร'
                ]"
                hide-bottom-space
                lazy-rules="ondemand"
              >
                <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 || 'รหัสผ่านไม่ตรงกัน'
                ]"
                hide-bottom-space
                lazy-rules="ondemand"
              >
                <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="selectedPrefix"
                :options="prefixOptions"
                label="คำนำหน้า *"
                outlined
                emit-value
                map-options
                :rules="[val => !!val || 'กรุณาเลือกคำนำหน้า']"
                hide-bottom-space
                lazy-rules="ondemand"
              />

              <q-input
                v-model="form.first_name"
                label="ชื่อจริง *"
                outlined
                :rules="[val => !!val || 'กรุณากรอกชื่อ']"
                hide-bottom-space
                lazy-rules="ondemand"
              />

              <q-input
                v-model="form.last_name"
                label="นามสกุล *"
                outlined
                :rules="[val => !!val || 'กรุณากรอกนามสกุล']"
                hide-bottom-space
                lazy-rules="ondemand"
              />
            </div>

            <!-- Phone -->
            <div class="mb-6">
              <q-input
                v-model="form.phone"
                label="เบอร์โทรศัพท์ *"
                outlined
                mask="###-###-####"
                :rules="[val => !!val || 'กรุณากรอกเบอร์โทร']"
                hide-bottom-space
                lazy-rules="ondemand"
              >
                <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('');
const selectedPrefix = ref<string | null>(null);

// Form
const form = ref<RegisterInstructorRequest>({
  username: '',
  email: '',
  password: '',
  first_name: '',
  last_name: '',
  prefix: { th: '', en: '' }, // We construct this on submit
  phone: ''
});

// Prefix options
const prefixMap: Record<string, { th: string; en: string }> = {
  'mr': { th: 'นาย', en: 'Mr.' },
  'mrs': { th: 'นาง', en: 'Mrs.' },
  'ms': { th: 'นางสาว', en: 'Ms.' },
  'dr': { th: 'ดร.', en: 'Dr.' },
  'asst_prof': { th: 'ผศ.', en: 'Asst.Prof.' },
  'assoc_prof': { th: 'รศ.', en: 'Assoc.Prof.' },
  'prof': { th: 'ศ.', en: 'Prof.' }
};

const prefixOptions = [
  { label: 'นาย / Mr.', value: 'mr' },
  { label: 'นาง / Mrs.', value: 'mrs' },
  { label: 'นางสาว / Ms.', value: 'ms' },
  { label: 'ดร. / Dr.', value: 'dr' },
  { label: 'ผศ. / Asst.Prof.', value: 'asst_prof' },
  { label: 'รศ. / Assoc.Prof.', value: 'assoc_prof' },
  { label: 'ศ. / Prof.', value: 'prof' }
];

// Methods
const handleRegister = async () => {
  if (!selectedPrefix.value) {
     $q.notify({ type: 'warning', message: 'กรุณาเลือกคำนำหน้า', position: 'top' });
     return;
  }
  
  // Map selected prefix string back to object
  form.value.prefix = prefixMap[selectedPrefix.value];

  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>