login with api

This commit is contained in:
Missez 2026-01-14 13:58:25 +07:00
parent d8a9909eb9
commit ff5b189b2f
16 changed files with 1241 additions and 66 deletions

View file

@ -1,14 +1,55 @@
<template>
<div>
<!-- Header -->
<div class="flex justify-between items-center mb-8">
<div>
<h1 class="text-3xl font-bold text-gray-900">สวสด, อาจารยทดสอบ 👋</h1>
<p class="text-gray-600 mt-2">นดอนรบกลบสระบบ</p>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl">
👤
<div class="mb-8">
<div class="flex justify-between items-center">
<div>
<h1 class="text-2xl font-bold text-gray-900">
สวสด, {{ authStore.user?.fullName || 'อาจารย์' }}
</h1>
<p class="text-gray-600 mt-2">นดอนรบกลบสระบบ</p>
</div>
<div class="flex items-center gap-4">
<div class="text-right">
<div class="text-sm font-semibold text-gray-900">{{ authStore.user?.fullName || 'อาจารย์ทดสอบ' }}</div>
<div class="text-xs text-gray-500">{{ authStore.user?.role || 'INSTRUCTOR' }}</div>
</div>
<div
class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl cursor-pointer hover:bg-primary-200 transition"
>
👨🏫
<q-menu>
<q-list style="min-width: 200px">
<!-- User Info Header -->
<q-item class="bg-primary-50">
<q-item-section>
<q-item-label class="text-weight-bold">{{ authStore.user?.fullName }}</q-item-label>
<q-item-label caption>{{ authStore.user?.email }}</q-item-label>
</q-item-section>
</q-item>
<q-separator />
<!-- Profile -->
<q-item clickable v-close-popup @click="goToProfile">
<q-item-section avatar>
<q-icon name="person" />
</q-item-section>
<q-item-section>โปรไฟล</q-item-section>
</q-item>
<q-separator />
<!-- Logout -->
<q-item clickable v-close-popup @click="handleLogout">
<q-item-section avatar>
<q-icon name="logout" color="negative" />
</q-item-section>
<q-item-section class="text-negative">ออกจากระบบ</q-item-section>
</q-item>
</q-list>
</q-menu>
</div>
</div>
</div>
</div>
@ -96,9 +137,24 @@ definePageMeta({
middleware: 'auth'
});
const authStore = useAuthStore();
const instructorStore = useInstructorStore();
const router = useRouter();
// Navigation functions
const goToProfile = () => {
router.push('/instructor/profile');
};
const goToSettings = () => {
router.push('/instructor/settings');
};
const handleLogout = () => {
authStore.logout();
router.push('/login');
};
// Fetch dashboard data on mount
onMounted(() => {
instructorStore.fetchDashboardData();