WIP

ui/src/App.vue

@@ -1,33 +1,10 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterLink, 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/AllowedServers.vue

@@ -1,12 +1,10 @@
-<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 lang="ts" setup>
+import TableComponent from './TableComponent.vue';
+const { tableHeader, tableRows } = defineProps<{ tableHeader: string[], tableRows: any[][] }>()
 </script>
 <template>
     <div class="flex justify-between m-5">
-        <h1 class="text-xl normal-case">Server Configs</h1>
+        <h1 class="text-xl normal-case">Allowed Servers</h1>
         <button class="btn btn-circle btn-success">Add</button>
     </div>
     <TableComponent :tableHeader="tableHeader" :tableRows="tableRows">

ui/src/components/Nav.vue

@@ -0,0 +1,18 @@
+<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/helpers/index.d.ts

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

ui/src/layouts/DefaultLayout.vue

@@ -0,0 +1,9 @@
+<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,11 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '@/views/HomeView.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'
+import HomeView from '../views/HomeView.vue'
+import LoginView from '../views/LoginView.vue'
 
 const routerConfig = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -19,31 +14,6 @@ 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

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

ui/src/views/HomeView.vue

@@ -1,13 +1,13 @@
 <template>
-    <h1 class="text-xl normal-case m-5">Overview</h1>
-    <div class="flex justify-center m-4">
-        <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>
+    <DefaultLayout>
+        <AllowedServers :tableHeader="tableHeader" :tableRows="tableRows" />
+    </DefaultLayout>
 </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,6 +1,9 @@
-<script setup lang="ts">
+<template>
+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();
@@ -10,12 +13,3 @@ 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 lang="ts">
+<script setup>
 </script>
 <template>
 

ui/src/views/index.d.ts

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

ui/src/views/servers/AllowedServersView.vue

@@ -1,16 +1,8 @@
 <script setup lang="ts">
-import TableComponent from '@/components/TableComponent.vue';
-
-const tableHeader = ["ID", "User", "Comment", "Date"]
-const tableRows = [["1", "name", "comment", Date.now()]]
+import DefaultLayout from "../../layouts/DefaultLayout.vue"
 </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>
+<DefaultLayout>
+    
+</DefaultLayout>
 </template>

ui/src/views/servers/IndexServersView.vue

@@ -1,18 +0,0 @@
-<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/ServerMessagesView.vue

@@ -1,17 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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>