package-lock.json

@@ -7,7 +7,6 @@
     "": {
       "version": "0.0.0",
       "dependencies": {
-        "idb-keyval": "^5.0.4",
         "vue": "^3.0.5",
         "vue-router": "^4.0.5"
       },
@@ -998,11 +997,6 @@
         "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",
@@ -2951,11 +2945,6 @@
       "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,7 +8,6 @@
     "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 class="dark:bg-blue-900 min-h-screen">
+  <div>
     <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 } from "vue";
+import { defineComponent, ref } from "vue";
 import VNav from "./components/VNav.vue";
 
 export default defineComponent({
@@ -16,7 +16,10 @@ export default defineComponent({
   components: {
     VNav,
   },
-  setup() {},
+  setup() {
+    const message = ref("Hi");
+    return { message };
+  },
 });
 </script>
 

src/api/index.ts

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

@@ -1,11 +0,0 @@
-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"
         >
-          <router-link
-            :to="{ name: 'Login' }"
+          <a
+            href="#"
             class="text-white bg-blue-600 hover:bg-blue-800 px-3 py-2 rounded-md text-sm font-medium"
-            >Logout</router-link
+            >Logout</a
           >
         </div>
       </div>
@@ -124,12 +124,11 @@
 <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 { useRoute } from "vue-router";
+import { ref, reactive } from "vue";
 
 export default {
   name: "VNav",
-  setup() {
+  data() {
     const title = "radiator";
     const open = ref(false);
     const items = reactive([
@@ -142,11 +141,12 @@ export default {
         to: "Settings",
       },
     ]);
-    const route = useRoute();
-    console.log(route);
-    const activeRoute = computed(() => route.name);
-
-    return { title, open, items, activeRoute };
+    return { title, open, items };
+  },
+  computed: {
+    activeRoute(): string {
+      return this.$route.name;
+    }
   },
 };
 </script>

src/router/index.ts

@@ -1,8 +1,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");
-import { isLoggedIn } from "../api";
+import About from "../views/Settings.vue";
 
 const routes = [
   {
@@ -13,12 +11,7 @@ const routes = [
   {
     path: "/settings",
     name: "Settings",
-    component: Settings,
-  },
-  {
-    path: "/login",
-    name: "Login",
-    component: Login,
+    component: About,
   },
 ];
 
@@ -27,12 +20,4 @@ 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,4 +1,6 @@
-<template>Mi casa e tu casa</template>
+<template>
+  Mi casa e tu casa
+</template>
 
 <script lang="ts">
 export default {

src/views/Login.vue

@@ -1,76 +0,0 @@
-<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,4 +1,6 @@
-<template>settierungsmöglichkeiten</template>
+<template>
+  settierungsmöglichkeiten
+</template>
 
 <script>
 export default {

vite.config.ts

@@ -1,6 +1,23 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import styleImport from "vite-plugin-style-import";
 
 export default defineConfig({
-  plugins: [vue()],
+  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}`;
+          },
+        },
+      ],
+    }),
+  ],
 });