chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

login with api

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

83
frontend_management/layouts/admin.vue Normal file
View file

@ -0,0 +1,83 @@
<template>
<div class="min-h-screen bg-gray-50">
<!-- Sidebar -->
<aside class="fixed left-0 top-0 h-screen w-64 bg-white shadow-lg">
<div class="p-6">
<h2 class="text-xl font-bold text-primary-600">E-Learning</h2>
<p class="text-sm text-gray-500">Admin Panel</p>
</div>
<nav class="px-4">
<NuxtLink
to="/admin"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<q-icon name="dashboard" size="24px" />
<span>Dashboard</span>
</NuxtLink>
<NuxtLink
to="/admin/courses"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<q-icon name="school" size="24px" />
<span>จัดการหลักสูตร</span>
</NuxtLink>
<NuxtLink
to="/admin/users"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<q-icon name="people" size="24px" />
<span>จัดการผู้ใช้</span>
</NuxtLink>
<NuxtLink
to="/admin/categories"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<q-icon name="folder" size="24px" />
<span>หมวดหมู่</span>
</NuxtLink>
<NuxtLink
to="/admin/settings"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<q-icon name="settings" size="24px" />
<span>ตั้งค่าระบบ</span>
</NuxtLink>
</nav>
<!-- <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
<button
@click="handleLogout"
class="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-lg transition"
>
<span>🚪</span>
<span>ออกจากระบบ</span>
</button>
</div> -->
</aside>
<!-- Main Content -->
<main class="ml-64 p-8">
<slot />
</main>
</div>
</template>
<script setup lang="ts">
const authStore = useAuthStore();
const router = useRouter();
const handleLogout = () => {
authStore.logout();
router.push('/login');
};
</script>

47
frontend_management/layouts/auth.vue Normal file
View file

@ -0,0 +1,47 @@
<template>
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-blue-100 to-indigo-100">
<!-- Background Pattern (Optional) -->
<div class="absolute inset-0 overflow-hidden opacity-10">
<div class="absolute -top-40 -right-40 w-80 h-80 bg-primary-500 rounded-full blur-3xl"></div>
<div class="absolute -bottom-40 -left-40 w-80 h-80 bg-secondary-500 rounded-full blur-3xl"></div>
</div>
<!-- Auth Container -->
<div class="relative z-10 w-full max-w-md px-6">
<!-- Logo/Brand -->
<div class="text-center mb-8">
</div>
<!-- Auth Card -->
<q-card class="shadow-2xl rounded-2xl overflow-hidden">
<q-card-section class="p-1">
<slot></slot>
</q-card-section>
</q-card>
<!-- Footer -->
<div class="text-center mt-6 text-sm text-gray-600">
</div>
</div>
</div>
</template>
<script setup lang="ts">
// No props needed - pure layout component
</script>
<style scoped>
/* Optional: Add custom animations */
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
</style>

32
frontend_management/layouts/instructor.vue
View file

@ -10,42 +10,24 @@
<nav class="px-4">
<NuxtLink
to="/instructor"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 shadow-md transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600 "
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<span>📊</span>
<q-icon name="dashboard" size="24px" />
<span>Dashboard</span>
</NuxtLink>
<NuxtLink
to="/instructor/courses"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-200 shadow-md transition mb-2"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<span>📚</span>
<q-icon name="school" size="24px" />
<span>หลักสูตร</span>
</NuxtLink>
<NuxtLink
to="/instructor/announcements"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-200 shadow-md transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<span>📢</span>
<span>ประกาศ</span>
</NuxtLink>
<NuxtLink
to="/instructor/reports"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-200 shadow-md transition mb-2"
active-class="bg-primary-500 text-white hover:bg-primary-600"
>
<span>📈</span>
<span>รายงาน</span>
</NuxtLink>
</nav>
<div class="absolute bottom-0 left-0 right-0 p-4 border-t">
<!-- <div class="absolute bottom-0 left-0 right-0 p-4 border-t">
<button
@click="handleLogout"
class="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-lg transition"
@ -53,7 +35,7 @@
<span>🚪</span>
<span>ออกจากระบบ</span>
</button>
</div>
</div> -->
</aside>
<!-- Main Content -->