add logout

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