From 86a5bbf8fbcbeaabb7fca658fd5c0a1b96c2e6ce Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Wed, 11 Sep 2024 08:41:06 +0200
Subject: [PATCH] make usable admin panel

---
 src/app/pages/admin.vue         | 51 +++++++++++++++++++++++++++++++++
 src/app/pages/admin/clients.vue | 34 ++++++++++++++++++++++
 src/app/pages/admin/index.vue   |  7 ++---
 src/app/pages/admin/server.vue  | 34 ++++++++++++++++++++++
 src/app/pages/admin/user.vue    | 34 ++++++++++++++++++++++
 src/server/middleware/auth.ts   |  2 +-
 6 files changed, 156 insertions(+), 6 deletions(-)
 create mode 100644 src/app/pages/admin.vue
 create mode 100644 src/app/pages/admin/clients.vue
 create mode 100644 src/app/pages/admin/server.vue
 create mode 100644 src/app/pages/admin/user.vue

diff --git a/src/app/pages/admin.vue b/src/app/pages/admin.vue
new file mode 100644
index 00000000..0ac27a88
--- /dev/null
+++ b/src/app/pages/admin.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="min-h-screen">
+    <div class="container mx-auto p-4">
+      <div class="flex">
+        <!-- Sidebar -->
+        <div class="w-64 bg-white dark:bg-neutral-700 rounded-lg p-4 mr-4">
+          <h2 class="text-xl font-bold dark:text-neutral-200 mb-4">
+            Admin Panel
+          </h2>
+          <ul class="space-y-2">
+            <li
+              v-for="(item, index) in menuItems"
+              :key="index"
+              :class="{ 'bg-gray-700': activeMenuItem?.id === item.id }"
+              class="font-medium dark:text-neutral-200 p-2 rounded cursor-pointer hover:bg-red-800 transition-colors duration-200"
+              @click="router.push(`/admin/${item.id}`)"
+            >
+              {{ item.name }}
+            </li>
+          </ul>
+        </div>
+
+        <!-- Main Content -->
+        <div
+          class="flex-1 bg-white dark:text-neutral-200 dark:bg-neutral-700 rounded-lg p-6"
+        >
+          <h1 class="text-3xl font-bold mb-6">{{ activeMenuItem?.name }}</h1>
+          <NuxtPage />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const authStore = useAuthStore();
+authStore.update();
+
+const router = useRouter();
+const route = useRoute();
+
+const menuItems = [
+  { id: 'user', name: 'User' },
+  { id: 'clients', name: 'Clients' },
+  { id: 'server', name: 'Server' },
+];
+
+const activeMenuItem = computed(() => {
+  return menuItems.find((item) => route.path === `/admin/${item.id}`);
+});
+</script>
diff --git a/src/app/pages/admin/clients.vue b/src/app/pages/admin/clients.vue
new file mode 100644
index 00000000..53a4b11b
--- /dev/null
+++ b/src/app/pages/admin/clients.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex items-center space-x-4">
+      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
+      <div>
+        <h3 class="text-xl font-semibold">John Doe</h3>
+        <p class="text-gray-400">john.doe@example.com</p>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Username</label>
+        <input
+          v-model="username"
+          type="text"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Email</label>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const username = ref();
+const email = ref();
+</script>
diff --git a/src/app/pages/admin/index.vue b/src/app/pages/admin/index.vue
index 3cbcfd8a..d4a40441 100644
--- a/src/app/pages/admin/index.vue
+++ b/src/app/pages/admin/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <div>Admin Area</div>
+  <div class="space-y-6">This is a test</div>
 </template>
 
-<script setup lang="ts">
-const authStore = useAuthStore();
-authStore.update();
-</script>
+<script setup lang="ts"></script>
diff --git a/src/app/pages/admin/server.vue b/src/app/pages/admin/server.vue
new file mode 100644
index 00000000..53a4b11b
--- /dev/null
+++ b/src/app/pages/admin/server.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex items-center space-x-4">
+      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
+      <div>
+        <h3 class="text-xl font-semibold">John Doe</h3>
+        <p class="text-gray-400">john.doe@example.com</p>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Username</label>
+        <input
+          v-model="username"
+          type="text"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Email</label>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const username = ref();
+const email = ref();
+</script>
diff --git a/src/app/pages/admin/user.vue b/src/app/pages/admin/user.vue
new file mode 100644
index 00000000..53a4b11b
--- /dev/null
+++ b/src/app/pages/admin/user.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="space-y-6">
+    <div class="flex items-center space-x-4">
+      <img src="/logo.png" alt="User Avatar" class="w-20 h-20 rounded-full" />
+      <div>
+        <h3 class="text-xl font-semibold">John Doe</h3>
+        <p class="text-gray-400">john.doe@example.com</p>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium mb-1">Username</label>
+        <input
+          v-model="username"
+          type="text"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+      <div>
+        <label class="block text-sm font-medium mb-1">Email</label>
+        <input
+          v-model="email"
+          type="email"
+          class="w-full bg-gray-800 rounded p-2 text-white"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const username = ref();
+const email = ref();
+</script>
diff --git a/src/server/middleware/auth.ts b/src/server/middleware/auth.ts
index fe37d19b..7ab156f0 100644
--- a/src/server/middleware/auth.ts
+++ b/src/server/middleware/auth.ts
@@ -14,7 +14,7 @@ export default defineEventHandler(async (event) => {
     }
   }
 
-  if (url.pathname === '/admin') {
+  if (url.pathname.startsWith('/admin')) {
     if (!session.data.userId) {
       return sendRedirect(event, '/login', 302);
     }