93 lines
2.8 KiB
Vue
93 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
|
||
|
|
<q-card class="w-full max-w-md p-8 shadow-xl">
|
||
|
|
<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>
|
||
|
|
<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>ทดสอบ: instructor@test.com / admin@test.com</p>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { useQuasar } from 'quasar';
|
||
|
|
definePageMeta({
|
||
|
|
layout: 'auth'
|
||
|
|
});
|
||
|
|
const $q = useQuasar();
|
||
|
|
const authStore = useAuthStore();
|
||
|
|
const router = useRouter();
|
||
|
|
const email = ref('');
|
||
|
|
const password = ref('');
|
||
|
|
const showPassword = ref(false);
|
||
|
|
const loading = 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) {
|
||
|
|
$q.notify({
|
||
|
|
type: 'negative',
|
||
|
|
message: 'อีเมลหรือรหัสผ่านไม่ถูกต้อง',
|
||
|
|
position: 'top'
|
||
|
|
});
|
||
|
|
} finally {
|
||
|
|
loading.value = false;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|