add sites

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

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/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>