add sites

Signed-off-by: garionion <github@entr0py.de>

src/App.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="dark:bg-blue-900 min-h-screen">
     <v-nav />
-    <main class="container mx-auto px-2 max-w-7xl sm:px-6">
-      <router-view></router-view>
+    <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>
   </div>
 </template>

src/api/index.ts

@@ -1,6 +1,13 @@
-import { LoginResponse, token } from "./types";
-import { get, set } from "idb-keyval";
-import { unref } from "vue";
+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",
+}
 
 const url = "http://192.168.178.5:8080/api";
 let token: token;
@@ -9,7 +16,7 @@ let ready = false;
 export async function init() {
   if (ready) return;
 
-  await get("token").then((val: token) => {
+  await idbGet("token").then((val: token) => {
     if (val !== undefined) {
       token = val;
     }
@@ -17,36 +24,80 @@ 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 !== undefined && token.expiration > Date.now();
+  return token?.expiration > Date.now();
 }
 
-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",
-    },
-    body: JSON.stringify({ username: user, password: password }),
-  });
-  const login: LoginResponse = await response.json();
+interface ReqOptions extends RequestInit {
+  method: HTTPMethod;
+  auth?: boolean;
+}
 
-  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);
+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,
+      "Content-Type": "application/json",
+    };
+    options.body = JSON.stringify(data);
+  }
+
+  const response = await fetch(`${url}${endpoint}`, {
+    ...options,
+    headers: { ...options.headers, Accept: "application/json" },
+  });
+  if (!response.ok) {
+    throw new Error(response.statusText);
+  }
+  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,3 +9,13 @@ 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' }"
+            :to="{ name: 'Login', query: { logout: true } }"
             class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
-            >Logout</router-link
+            >{{ isLoggedIn ? "Logout" : "Login" }}</router-link
           >
         </div>
       </div>
@@ -124,8 +124,9 @@
 <script lang="ts">
 //stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
 
-import { ref, reactive, computed } from "vue";
+import { ref, reactive, computed, watch } from "vue";
 import { useRoute } from "vue-router";
+import { isLoggedIn as isLoggedinFromAPI } from "../api";
 
 export default {
   name: "VNav",
@@ -137,16 +138,25 @@ 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);
 
-    return { title, open, items, activeRoute };
+    const isLoggedIn = ref(false);
+    const getLoginStatus = async () => {
+      isLoggedIn.value = await isLoggedinFromAPI();
+    };
+    watch(activeRoute, getLoginStatus);
+
+    return { title, open, items, activeRoute, isLoggedIn };
   },
 };
 </script>

src/router/index.ts

@@ -2,6 +2,7 @@ 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 = [
@@ -15,10 +16,16 @@ 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,11 +1,12 @@
-<template xmlns="http://www.w3.org/1999/html">
+<template>
   <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>
-      <div
+      <form
         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"
@@ -33,29 +34,37 @@
         <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"
-            @click="login"
+            type="submit"
           >
             Login
           </button>
         </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
 
-<script>
-import { ref } from "vue";
-import { login as apiLogin } from "../api";
+<script lang="ts">
+import { ref, toRefs } from "vue";
+import { login as apiLogin, logout as apiLogout } from "../api";
 import router from "../router";
 
 export default {
   name: "Login",
-  setup() {
+  props: {
+    logout: {
+      type: String,
+      required: false,
+    },
+  },
+  async setup(props) {
+    const { logout } = toRefs(props);
     const user = ref("");
     const password = ref("");
     async function login() {
       try {
         let loginResp = await apiLogin(user.value, password.value);
+
         if (loginResp) {
           router.push({ name: "Home" });
         }
@@ -64,6 +73,11 @@ export default {
       }
     }
 
+    if (logout.value !== undefined) {
+      console.log("LOGOUT");
+      await apiLogout();
+    }
+
     return {
       user,
       password,

src/views/Sites.vue

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