src/App.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="dark:bg-blue-900 min-h-screen">
     <v-nav />
-    <main class="container mx-auto px-2 sm:px-6 pt-8">
-      <suspense>
-        <template #default><router-view></router-view> </template>
-        <template #fallback>Loading</template>
-      </suspense>
+    <main class="container mx-auto px-2 max-w-7xl sm:px-6">
+      <router-view></router-view>
     </main>
   </div>
 </template>

src/api/index.ts

@@ -1,13 +1,6 @@
-import { cSite, LoginResponse, Site, token } from "./types";
-import { get as idbGet, set as idbSet, del as idbDel } from "idb-keyval";
-
-export * from "./types";
-
-const enum HTTPMethod {
-  GET = "GET",
-  POST = "POST",
-  PATCH = "PATCH",
-}
+import { LoginResponse, token } from "./types";
+import { get, set } from "idb-keyval";
+import { unref } from "vue";
 
 const url = "http://192.168.178.5:8080/api";
 let token: token;
@@ -16,7 +9,7 @@ let ready = false;
 export async function init() {
   if (ready) return;
 
-  await idbGet("token").then((val: token) => {
+  await get("token").then((val: token) => {
     if (val !== undefined) {
       token = val;
     }
@@ -24,80 +17,36 @@ export async function init() {
   ready = true;
 }
 
-export async function logout(): Promise<void> {
-  token = { jwt: "", expiration: 0 };
-  await idbDel("token");
-}
-
 export async function isLoggedIn(): Promise<boolean> {
   await init();
-  return token?.expiration > Date.now();
+  return token !== undefined && token.expiration > Date.now();
 }
 
-interface ReqOptions extends RequestInit {
-  method: HTTPMethod;
-  auth?: boolean;
-}
-
-async function request<T = unknown>(
-  endpoint: string,
-  options: ReqOptions,
-  data?: any
-): Promise<T> {
-  if (options.auth) {
-    await init();
-    options.headers = {
-      ...options.headers,
-      Authorization: `Bearer ${token.jwt}`,
-    };
-  }
-  if (
-    options.method === HTTPMethod.POST ||
-    options.method === HTTPMethod.PATCH
-  ) {
-    options.headers = {
-      ...options.headers,
+export async function login(user: string, password: string): Promise<boolean> {
+  await init();
+  let response = await fetch(`${url}/auth`, {
+    method: "POST",
+    headers: {
+      Accept: "application/json",
       "Content-Type": "application/json",
-    };
-    options.body = JSON.stringify(data);
-  }
-
-  const response = await fetch(`${url}${endpoint}`, {
-    ...options,
-    headers: { ...options.headers, Accept: "application/json" },
+    },
+    body: JSON.stringify({ username: user, password: password }),
   });
-  if (!response.ok) {
-    throw new Error(response.statusText);
+  const login: LoginResponse = await response.json();
+
+  if (response.ok) {
+    if (login.success) {
+      token = {
+        jwt: login.token,
+        expiration: Date.parse(login.expiration),
+      };
+      set("token", token).catch((error) => console.error(error));
+      return true;
+    } else {
+      return Promise.reject(new Error(login.message));
+    }
+  } else {
+    const error = new Error(login.message);
+    return Promise.reject(error);
   }
-  return response.json();
-}
-
-export async function login(
-  username: string,
-  password: string
-): Promise<boolean> {
-  const login = await request<LoginResponse>(
-    "/auth",
-    { method: HTTPMethod.POST },
-    { username, password }
-  );
-
-  if (!login.success) {
-    throw new Error(login.message);
-  }
-  token = {
-    jwt: login.token,
-    expiration: Date.parse(login.expiration),
-  };
-  idbSet("token", token).catch((error) => console.error(error));
-
-  return true;
-}
-
-export async function getSites(): Promise<Site[]> {
-  return request<Site[]>("/sites", { auth: true, method: HTTPMethod.GET });
-}
-
-export async function createSite(site: Site) {
-  return request<cSite>("/sites", { auth: true, method: HTTPMethod.POST });
 }

src/api/types.ts

@@ -9,13 +9,3 @@ export interface LoginResponse {
   success: boolean;
   token: string;
 }
-
-export interface Site {
-  default_prefix: string;
-  id: number;
-  name: string;
-}
-
-export interface cSite {
-  "site-id": number;
-}

src/components/VNav.vue

@@ -88,9 +88,9 @@
           class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
         >
           <router-link
-            :to="{ name: 'Login', query: { logout: true } }"
+            :to="{ name: 'Login' }"
             class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
-            >{{ isLoggedIn ? "Logout" : "Login" }}</router-link
+            >Logout</router-link
           >
         </div>
       </div>
@@ -124,9 +124,8 @@
 <script lang="ts">
 //stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
 
-import { ref, reactive, computed, watch } from "vue";
+import { ref, reactive, computed } from "vue";
 import { useRoute } from "vue-router";
-import { isLoggedIn as isLoggedinFromAPI } from "../api";
 
 export default {
   name: "VNav",
@@ -138,25 +137,16 @@ export default {
         name: "Dashboard",
         to: "Home",
       },
-      {
-        name: "Sites",
-        to: "Sites",
-      },
       {
         name: "Settings",
         to: "Settings",
       },
     ]);
     const route = useRoute();
+    console.log(route);
     const activeRoute = computed(() => route.name);
 
-    const isLoggedIn = ref(false);
-    const getLoginStatus = async () => {
-      isLoggedIn.value = await isLoggedinFromAPI();
-    };
-    watch(activeRoute, getLoginStatus);
-
-    return { title, open, items, activeRoute, isLoggedIn };
+    return { title, open, items, activeRoute };
   },
 };
 </script>

src/router/index.ts

@@ -2,7 +2,6 @@ import { createWebHistory, createRouter } from "vue-router";
 import Home from "../views/Home.vue";
 const Settings = () => import("../views/Settings.vue");
 const Login = () => import("../views/Login.vue");
-const Sites = () => import("../views/Sites.vue");
 import { isLoggedIn } from "../api";
 
 const routes = [
@@ -16,16 +15,10 @@ const routes = [
     name: "Settings",
     component: Settings,
   },
-  {
-    path: "/sites",
-    name: "Sites",
-    component: Sites,
-  },
   {
     path: "/login",
     name: "Login",
     component: Login,
-    props: (route) => ({ logout: route.query.logout }),
   },
 ];
 

src/views/Login.vue

@@ -1,12 +1,11 @@
-<template>
+<template xmlns="http://www.w3.org/1999/html">
   <div
     class="container mx-auto h-full flex justify-center items-center dark:text-white"
   >
     <div class="sm:w-3/4 md:w-1/3 w-full">
       <h1 class="font-hairline mb-6 text-center">Login</h1>
-      <form
+      <div
         class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
-        @submit.prevent="login"
       >
         <div class="mb-4">
           <label class="font-bold text-gray-800 block mb-2"
@@ -34,37 +33,29 @@
         <div class="flex items-center justify-between">
           <button
             class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
-            type="submit"
+            @click="login"
           >
             Login
           </button>
         </div>
-      </form>
+      </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { ref, toRefs } from "vue";
-import { login as apiLogin, logout as apiLogout } from "../api";
+<script>
+import { ref } from "vue";
+import { login as apiLogin } from "../api";
 import router from "../router";
 
 export default {
   name: "Login",
-  props: {
-    logout: {
-      type: String,
-      required: false,
-    },
-  },
-  async setup(props) {
-    const { logout } = toRefs(props);
+  setup() {
     const user = ref("");
     const password = ref("");
     async function login() {
       try {
         let loginResp = await apiLogin(user.value, password.value);
-
         if (loginResp) {
           router.push({ name: "Home" });
         }
@@ -73,11 +64,6 @@ export default {
       }
     }
 
-    if (logout.value !== undefined) {
-      console.log("LOGOUT");
-      await apiLogout();
-    }
-
     return {
       user,
       password,

src/views/Sites.vue

@@ -1,65 +0,0 @@
-<template>
-  <div
-    class="dark:text-white container mx-auto h-full flex justify-center items-center"
-  >
-    <table class="table-fixed shadow-lg">
-      <thead>
-        <tr>
-          <th
-            class="w-1/2 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
-          >
-            Name
-          </th>
-          <th
-            class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
-          >
-            ID
-          </th>
-          <th
-            class="w-1/4 bg-blue-100 dark:bg-blue-900 border text-left px-8 py-4"
-          >
-            Default Prefix
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="site in sites">
-          <td class="border px-8 py-4">{{ site.name }}</td>
-          <td class="border px-8 py-4">{{ site.id }}</td>
-          <td class="border px-8 py-4">{{ site.default_prefix }}</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div
-    class="dark:text-white container mx-auto h-full flex justify-center items-center mt-12"
-  >
-    <h1 class="font-hairline mb-6 text-center">New Site</h1>
-    <form>
-      <label
-        >Name
-        <input type="text" placeholder="Name" />
-      </label>
-      <label>
-        Default Prefix
-        <input type="text" placeholder="Default Prefix" />
-      </label>
-    </form>
-  </div>
-</template>
-
-<script lang="ts">
-import { getSites, Site } from "../api";
-import { ref } from "vue";
-
-export default {
-  name: "Sites",
-  setup() {
-    const sites = ref<Site[]>([]);
-    getSites().then((s) => void (sites.value = s));
-    return { sites };
-  },
-};
-</script>
-
-<style scoped></style>