Add home header

This is to make it look and feel like the server pages.

ui/src/App.vue

@@ -1,10 +1,33 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
 </script>
 
 <template>
+  <header>
+    <div class="navbar bg-base-100">
+      <div class="flex-1">
+        <a class="btn btn-ghost normal-case text-xl">
+          <RouterLink to="/">dchat</RouterLink>
+        </a>
+      </div>
+      <div class="flex-none">
+        <ul class="menu menu-horizontal px-1">
+          <li>
+            <a>
+              <RouterLink to="/login">Login</RouterLink>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </header>
   <RouterView />
+  <footer class="footer footer-center p-4 bg-base-300 text-base-content">
+    <div>
+      <p>Copyright © 2023 Augusto Dwenger J.</p>
+      <p>This website is licensed under the <a href="https://git.hhhammer.de/hamburghammer/dchat/raw/branch/main/LICENSE" class="link">MIT License</a>
+        and uses open source software. View the <a href="https://git.hhhammer.de/hamburghammer/dchat" class="link">source
+          code</a> on Forgejo.</p>
+    </div>
+  </footer>
 </template>
-
-<style scoped>
-</style>

ui/src/components/Nav.vue

@@ -1,18 +0,0 @@
-<template>
-  <header>
-    <div class="navbar bg-base-100">
-      <div class="flex-1">
-        <a class="btn btn-ghost normal-case text-xl"><RouterLink to="/">dchat</RouterLink></a>
-      </div>
-      <div class="flex-none">
-        <ul class="menu menu-horizontal px-1">
-          <li>
-            <a>
-              <RouterLink to="/login">Login</RouterLink>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </header>
-</template>

ui/src/components/TableComponent.vue

@@ -2,10 +2,6 @@
 const { tableHeader, tableRows } = defineProps<{ tableHeader: string[], tableRows: any[][] }>()
 </script>
 <template>
-    <div class="flex justify-between m-5">
-        <h1 class="text-xl normal-case">Allowed Servers</h1>
-        <button class="btn btn-circle btn-success">Add</button>
-    </div>
     <div class="overflow-x-auto">
         <table class="table w-full">
             <!-- head -->
@@ -26,8 +22,7 @@ const { tableHeader, tableRows } = defineProps<{ tableHeader: string[], tableRow
                         </template>
                     </template>
                     <th>
-                        <button class="btn btn-sm btn-info m-1">Edit</button>
+                        <slot />
-                        <button class="btn btn-sm btn-error m-1">Delete</button>
                     </th>
                 </tr>
             </tbody>

ui/src/helpers/index.d.ts

@@ -1 +0,0 @@
-export * from './fetch-wrapper';

ui/src/layouts/DefaultLayout.vue

@@ -1,9 +0,0 @@
-<template>
-    <Nav />
-    <slot />
-</template>
-
-<script setup>
-import Nav from "../components/Nav.vue"
-
-</script>

ui/src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import App from './App.vue'
+import App from '@/App.vue'
 import router from './router'
 
 import './assets/main.css'

ui/src/router/index.ts

@@ -1,6 +1,11 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '@/views/HomeView.vue'
-import LoginView from '../views/LoginView.vue'
+import LoginView from '@/views/LoginView.vue'
+import AllowedServersView from '@/views/servers/AllowedServersView.vue'
+import IndexServersView from '@/views/servers/IndexServersView.vue'
+import ServerConfigsView from '@/views/servers/ServerConfigsView.vue'
+import ServersMessagesView from '@/views/servers/ServersMessagesView.vue'
+import ServerMessagesView from '@/views/servers/ServerMessagesView.vue'
 
 const routerConfig = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -14,6 +19,31 @@ const routerConfig = createRouter({
       path: '/login',
       name: 'login',
       component: LoginView
+    },
+    {
+      path: '/servers',
+      name: 'servers',
+      component: IndexServersView
+    },
+    {
+      path: '/servers/allowed',
+      name: 'allowedServers',
+      component: AllowedServersView
+    },
+    {
+      path: '/servers/configs',
+      name: 'serverConfigs',
+      component: ServerConfigsView
+    },
+    {
+      path: '/servers/messages',
+      name: 'serversMessages',
+      component: ServersMessagesView
+    },
+    {
+      path: '/servers/messages/:serverId(\\d+)',
+      name: 'serverMessages',
+      component: ServerMessagesView
     }
   ]
 })

ui/src/stores/index.d.ts

@@ -1 +0,0 @@
-export * from './auth.store';

ui/src/views/HomeView.vue

@@ -1,13 +1,13 @@
 <template>
-    <DefaultLayout>
+    <h1 class="text-xl normal-case m-5">Overview</h1>
-        <AllowedServers :tableHeader="tableHeader" :tableRows="tableRows" />
+    <div class="flex justify-center m-4">
-    </DefaultLayout>
+        <div class="flex flex-col space-y-2">
+            <RouterLink to="/servers">
+                <button class="btn btn-wide btn-outline">Servers</button>
+            </RouterLink>
+            <RouterLink to="/users">
+                <button class="btn btn-wide btn-outline">Users</button>
+            </RouterLink>
+        </div>
+    </div>
 </template>
-
-<script setup>
-import DefaultLayout from "../layouts/DefaultLayout.vue"
-import AllowedServers from "../components/AllowedServers.vue"
-
-const tableHeader = ["ID", "User", "Comment", "Date"]
-const tableRows = [["1", "name", "comment", Date.now()]]
-</script>

ui/src/views/LoginView.vue

@@ -1,9 +1,6 @@
-<template>
+<script setup lang="ts">
-login
-</template>
-<script setup>
 import { ref, onMounted } from 'vue'
-import { useAuthStore } from '../stores/auth.store';
+import { useAuthStore } from '@/stores/auth.store';
 
 function onSubmit(values, { setErrors }) {
     const authStore = useAuthStore();
@@ -13,3 +10,12 @@ function onSubmit(values, { setErrors }) {
         .catch(error => setErrors({ apiError: error }));
 }
 </script>
+<template>
+    <div class="flex justify-center m-4">
+        <div class="flex flex-col space-y-2">
+            <input type="text" placeholder="Username" class="input input-bordered w-full max-w-xs" />
+            <input type="password" placeholder="Username" class="input input-bordered w-full max-w-xs" />
+            <button class="btn btn-wide btn-outline">Login</button>
+        </div>
+    </div>
+</template>

ui/src/views/UsersView.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 </script>
 <template>
 

ui/src/views/index.d.ts

@@ -1,2 +0,0 @@
-export {default as Login} from './Login.vue'
-export {default as HomeView} from './HomeView.vue'

ui/src/views/servers/AllowedServersView.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import TableComponent from '@/components/TableComponent.vue';
+
+const tableHeader = ["ID", "User", "Comment", "Date"]
+const tableRows = [["1", "name", "comment", Date.now()]]
+</script>
+<template>
+    <div class="flex justify-between m-5">
+        <h1 class="text-xl normal-case">Allowed Servers</h1>
+        <button class="btn btn-circle btn-success">Add</button>
+    </div>
+    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows">
+        <button class="btn btn-sm btn-info m-1">Edit</button>
+        <button class="btn btn-sm btn-error m-1">Delete</button>
+    </TableComponent>
+</template>

ui/src/views/servers/IndexServersView.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+</script>
+<template>
+    <h1 class="text-xl normal-case m-5">Server overview</h1>
+    <div class="flex justify-center m-4">
+        <div class="flex flex-col space-y-2">
+            <RouterLink to="/servers/allowed">
+                <button class="btn btn-wide btn-outline">Allowed</button>
+            </RouterLink>
+            <RouterLink to="/servers/configs">
+                <button class="btn btn-wide btn-outline">Configs</button>
+            </RouterLink>
+            <RouterLink to="/servers/messages">
+                <button class="btn btn-wide btn-outline">Server with Messages</button>
+            </RouterLink>
+        </div>
+    </div>
+</template>

ui/src/views/servers/ServerConfigsView.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import TableComponent from '@/components/TableComponent.vue';
+
+const tableHeader = ["ID", "Server ID", "System Message", "Rate limit"]
+const tableRows = [["1", "name", "comment", "1"]]
+</script>
+<template>
+    <div class="flex justify-between m-5">
+        <h1 class="text-xl normal-case">Server Configs</h1>
+        <button class="btn btn-circle btn-success">Add</button>
+    </div>
+    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows">
+        <button class="btn btn-sm btn-info m-1">Edit</button>
+        <button class="btn btn-sm btn-error m-1">Delete</button>
+    </TableComponent>
+</template>

ui/src/views/servers/ServerMessagesView.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import TableComponent from '@/components/TableComponent.vue';
+import { useRoute } from 'vue-router';
+const router = useRoute()
+const { serverId } = router.params
+const tableHeader = ["ID", "Server ID", "User ID", "Tokens", "Date"]
+const tableRows = [["1", "name", "comment", "2", Date.now()]]
+</script>
+<template>
+    <div class="flex justify-between m-5">
+        <h1 class="text-xl normal-case">Server Messages</h1>
+        <h1 class="text-xl normal-case">Server ID: {{ serverId }}</h1>
+    </div>
+    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows">
+        <button class="btn btn-sm btn-info m-1 no-animation">Nothing</button>
+    </TableComponent>
+</template>

ui/src/views/servers/ServersMessagesView.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import TableComponent from '@/components/TableComponent.vue';
+import { useRouter } from 'vue-router';
+
+const view = (id: string) => { useRouter().push("/servers/messages/" + id) }
+
+const tableHeader = ["ID", "Server ID"]
+const tableRows = [["1", "1234567890"]]
+</script>
+<template>
+    <div class="flex justify-between m-5">
+        <h1 class="text-xl normal-case">Server with Messages</h1>
+    </div>
+    <TableComponent :tableHeader="tableHeader" :tableRows="tableRows">
+        <button class="btn btn-sm btn-info m-1">View</button>
+    </TableComponent>
+</template>