elearning/frontend_management/pages/login.vue

<template>
  <div class=" p-6 items-center justify-center">
      <q-card-section>
        <div class="text-center mb-8">
          <h1 class="text-3xl font-bold text-gray-900">E-Learning</h1>
          <p class="text-gray-600 mt-2">เข้าสู่ระบบ</p>
        </div>
        <q-form @submit="handleLogin" class="space-y-4">
          <q-input
            v-model="email"
            label="อีเมล"
            type="email"
            outlined
            :rules="[val => !!val || 'กรุณากรอกอีเมล']"
          >
            <template v-slot:prepend>
              <q-icon name="email" />
            </template>
          </q-input>
          <q-input
            v-model="password"
            label="รหัสผ่าน"
            :type="showPassword ? 'text' : 'password'"
            outlined
            :rules="[val => !!val || 'กรุณากรอกรหัสผ่าน']"
          >
            <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>

          <div class="flex items-center justify-between">
            <q-checkbox v-model="rememberMe" label="จดจำฉันไว้" />
            <a 
              href="#" 
              class="text-sm text-primary-600 hover:text-primary-700"
              @click.prevent="showForgotModal = true"
            >ลืมรหัสผ่าน?</a>
          </div>

          <q-btn
            type="submit"
            color="primary"
            label="เข้าสู่ระบบ"
            class="w-full"
            size="lg"
            :loading="loading"
          />
        </q-form>
        <div class="mt-6 text-center text-sm text-gray-600">
          <p>ทดสอบ: admin@elearning.local / instructor@elearning.local</p>
        </div>
      </q-card-section>

    <!-- Forgot Password Modal -->
    <q-dialog v-model="showForgotModal" persistent>
      <q-card style="min-width: 400px">
        <q-card-section class="row items-center q-pb-none">
          <div class="text-h6">ลืมรหัสผ่าน</div>
          <q-space />
          <q-btn icon="close" flat round dense @click="showForgotModal = false" />
        </q-card-section>

        <q-card-section>
          <p class="text-gray-600 mb-4">
            กรอกอีเมลของคุณ เราจะส่งลิงก์สำหรับรีเซ็ตรหัสผ่านไปให้
          </p>
          <q-form @submit="handleForgotPassword">
            <q-input
              v-model="forgotEmail"
              label="อีเมล"
              type="email"
              outlined
              :rules="[val => !!val || 'กรุณากรอกอีเมล']"
            >
              <template v-slot:prepend>
                <q-icon name="email" />
              </template>
            </q-input>

            <div class="flex justify-end gap-2 mt-4">
              <q-btn
                flat
                label="ยกเลิก"
                color="grey-7"
                @click="showForgotModal = false"
              />
              <q-btn
                type="submit"
                label="ส่งลิงก์รีเซ็ต"
                color="primary"
                :loading="forgotLoading"
              />
            </div>
          </q-form>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import { authService } from '~/services/auth.service';

definePageMeta({
  layout: 'auth'
});

const $q = useQuasar();
const authStore = useAuthStore();
const router = useRouter();

// Login form
const email = ref('');
const password = ref('');
const showPassword = ref(false);
const rememberMe = ref(false);
const loading = ref(false);

// Forgot password
const showForgotModal = ref(false);
const forgotEmail = ref('');
const forgotLoading = ref(false);

const handleLogin = async () => {
  loading.value = true;
  try {
    await authStore.login(email.value, password.value);
    
    $q.notify({
      type: 'positive',
      message: 'เข้าสู่ระบบสำเร็จ',
      position: 'top'
    });
    // Redirect based on role
    if (authStore.isInstructor) {
      router.push('/instructor');
    } else if (authStore.isAdmin) {
      router.push('/admin');
    }
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.message || 'อีเมลหรือรหัสผ่านไม่ถูกต้อง',
      position: 'top'
    });
  } finally {
    loading.value = false;
  }
};

const handleForgotPassword = async () => {
  forgotLoading.value = true;
  try {
    await authService.forgotPassword(forgotEmail.value);
    
    $q.notify({
      type: 'positive',
      message: 'ส่งลิงก์รีเซ็ตรหัสผ่านไปยังอีเมลของคุณแล้ว',
      position: 'top'
    });
    
    showForgotModal.value = false;
    forgotEmail.value = '';
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่',
      position: 'top'
    });
  } finally {
    forgotLoading.value = false;
  }
};
</script>