cleaning up

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

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "version": "0.0.0",
       "dependencies": {
+        "idb-keyval": "^5.0.4",
         "vue": "^3.0.5",
         "vue-router": "^4.0.5"
       },
@@ -997,6 +998,11 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/idb-keyval": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-5.0.4.tgz",
+      "integrity": "sha512-qS0kplHuadZujoE90ze0NUkhW0/Fbfib7d+mYNMXNEn45NSh2NWY3fBewoX4GZUsKkGHBgc8JiAwMx0zrfL3LQ=="
+    },
     "node_modules/indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -2945,6 +2951,11 @@
       "dev": true,
       "requires": {}
     },
+    "idb-keyval": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-5.0.4.tgz",
+      "integrity": "sha512-qS0kplHuadZujoE90ze0NUkhW0/Fbfib7d+mYNMXNEn45NSh2NWY3fBewoX4GZUsKkGHBgc8JiAwMx0zrfL3LQ=="
+    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",

package.json

@@ -8,6 +8,7 @@
     "format": "npx prettier --write ."
   },
   "dependencies": {
+    "idb-keyval": "^5.0.4",
     "vue": "^3.0.5",
     "vue-router": "^4.0.5"
   },

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <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>
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent } from "vue";
 import VNav from "./components/VNav.vue";
 
 export default defineComponent({
@@ -16,10 +16,7 @@ export default defineComponent({
   components: {
     VNav,
   },
-  setup() {
-    const message = ref("Hi");
-    return { message };
-  },
+  setup() {},
 });
 </script>
 

src/api/index.ts

@@ -0,0 +1,52 @@
+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;
+let ready = false;
+
+export async function init() {
+  if (ready) return;
+
+  await get("token").then((val: token) => {
+    if (val !== undefined) {
+      token = val;
+    }
+  });
+  ready = true;
+}
+
+export async function isLoggedIn(): Promise<boolean> {
+  await init();
+  return token !== undefined && 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();
+
+  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);
+  }
+}

src/api/types.ts

@@ -0,0 +1,11 @@
+export interface token {
+  jwt: string;
+  expiration: number;
+}
+
+export interface LoginResponse {
+  expiration: string;
+  message: string;
+  success: boolean;
+  token: string;
+}

src/components/VNav.vue

@@ -87,10 +87,10 @@
         <div
           class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0"
         >
-          <a
-            href="#"
+          <router-link
+            :to="{ name: 'Login' }"
             class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
-            >Logout</a
+            >Logout</router-link
           >
         </div>
       </div>
@@ -124,11 +124,12 @@
 <script lang="ts">
 //stolen from https://git.max-site.de/Eulinchen/eulinchen-frontend/src/branch/master/src/components/VNav.vue
 
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } from "vue";
+import { useRoute } from "vue-router";
 
 export default {
   name: "VNav",
-  data() {
+  setup() {
     const title = "radiator";
     const open = ref(false);
     const items = reactive([
@@ -141,12 +142,11 @@ export default {
         to: "Settings",
       },
     ]);
-    return { title, open, items };
-  },
-  computed: {
-    activeRoute(): string {
-      return this.$route.name;
-    }
+    const route = useRoute();
+    console.log(route);
+    const activeRoute = computed(() => route.name);
+
+    return { title, open, items, activeRoute };
   },
 };
 </script>

src/router/index.ts

@@ -1,6 +1,8 @@
 import { createWebHistory, createRouter } from "vue-router";
 import Home from "../views/Home.vue";
-import About from "../views/Settings.vue";
+const Settings = () => import("../views/Settings.vue");
+const Login = () => import("../views/Login.vue");
+import { isLoggedIn } from "../api";
 
 const routes = [
   {
@@ -11,7 +13,12 @@ const routes = [
   {
     path: "/settings",
     name: "Settings",
-    component: About,
+    component: Settings,
+  },
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
   },
 ];
 
@@ -20,4 +27,12 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach(async (to) => {
+  if (to.name !== "Login") {
+    const canAccess = await isLoggedIn();
+    if (!canAccess) return "/login";
+  }
+  return true;
+});
+
 export default router;

src/views/Home.vue

@@ -1,6 +1,4 @@
-<template>
-  Mi casa e tu casa
-</template>
+<template>Mi casa e tu casa</template>
 
 <script lang="ts">
 export default {

src/views/Login.vue

@@ -0,0 +1,76 @@
+<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>
+      <div
+        class="border-yellow-300 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
+      >
+        <div class="mb-4">
+          <label class="font-bold text-gray-800 block mb-2"
+            >Username or Email
+            <input
+              type="text"
+              class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
+              v-model.trim="user"
+              placeholder="Username"
+            />
+          </label>
+        </div>
+        <div class="mb-4">
+          <label class="font-bold text-gray-800 block mb-2"
+            >Password
+            <input
+              type="password"
+              class="text-black block appearance-none w-full bg-white border border-gray-300 hover:border-gray-700 px-2 py-2 rounded shadow"
+              v-model.trim="password"
+              placeholder="Password"
+            />
+          </label>
+        </div>
+
+        <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"
+          >
+            Login
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+import { login as apiLogin } from "../api";
+import router from "../router";
+
+export default {
+  name: "Login",
+  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" });
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    }
+
+    return {
+      user,
+      password,
+      login,
+    };
+  },
+};
+</script>
+
+<style scoped></style>

src/views/Settings.vue

@@ -1,6 +1,4 @@
-<template>
-  settierungsmöglichkeiten
-</template>
+<template>settierungsmöglichkeiten</template>
 
 <script>
 export default {

vite.config.ts

@@ -1,23 +1,6 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import styleImport from "vite-plugin-style-import";
 
 export default defineConfig({
-  plugins: [
-    vue(),
-    styleImport({
-      libs: [
-        {
-          libraryName: "element-plus",
-          resolveStyle: (name) => {
-            name = name.slice(3);
-            return `element-plus/packages/theme-chalk/src/${name}.scss`;
-          },
-          resolveComponent: (name) => {
-            return `element-plus/lib/${name}`;
-          },
-        },
-      ],
-    }),
-  ],
+  plugins: [vue()],
 });