From 2c62820101f7f85482655c950d5a79fdabcdaae4 Mon Sep 17 00:00:00 2001
From: Elias Crum <eliascrum@OS-Bessje.local>
Date: Thu, 23 May 2024 14:17:53 +0200
Subject: [PATCH] random changes

---
 src/components/Styling/TheHeader.vue | 83 ++++++++++++++++++++++++++--
 src/router.ts                        | 25 +++++----
 2 files changed, 91 insertions(+), 17 deletions(-)

diff --git a/src/components/Styling/TheHeader.vue b/src/components/Styling/TheHeader.vue
index 0f442c3..2f82bcb 100644
--- a/src/components/Styling/TheHeader.vue
+++ b/src/components/Styling/TheHeader.vue
@@ -1,21 +1,87 @@
 <template>
   <v-card color="#ccdff8">
     <v-container>
-      <v-card-title justify="center">
-        <h1>TRIPLE App</h1>
-      </v-card-title>
+      <v-row align="center" justify="center">
+        <v-card-title justify="start">
+          <h1>TRIPLE App</h1>
+        </v-card-title>
+
+        <!--
+        <div class="account">
+          <div class="text-center">
+            <v-menu
+              v-model="menu"
+              :close-on-content-click="false"
+              location="end"
+            >
+              <template v-slot:activator="{ props }">
+                <v-btn
+                  icon="mdi-account"
+                  size="medium"
+                  color="grey-darken-4"
+                  justify="end"
+                ></v-btn>
+              </template>
+
+              <v-card min-width="300">
+                <v-list>
+                  <v-list-item
+                    subtitle="{{ webID }}"
+                    title="WebID:"
+                  ></v-list-item>
+
+                <v-divider></v-divider>
+
+                <v-list>
+                  <div v-show="!loggedIn">
+                    <v-list-item>
+                        <v-btn
+                          v-model="message"
+                          color="blue"
+                          label="Login"
+                          @click= redirect...
+                        ></v-btn>
+                    </v-list-item>
+                  </div>
+
+                  <div v-show="loggedIn">
+                  <v-list-item>
+                    <v-switch
+                      v-model="message"
+                      color="blue"
+                      label="Logout"
+                      @click= redirect...
+                    ></v-switch>
+                  </v-list-item>
+                  </div>
+                </v-list>
+
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn variant="text" @click="menu = false"> Cancel </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-menu>
+          </div>
+        </div>
+      -->
+      </v-row>
     </v-container>
   </v-card>
 </template>
 
 <script lang="ts">
 export default {
-  data: () => ({}),
+  data: () => ({
+    loggedIn: false,
+    webID: '',
+    menu: false,
+    message: false,
+  }),
 };
 </script>
 
 <style scoped>
-
 h1 {
   color: rgb(0, 0, 0);
   margin: 0;
@@ -23,4 +89,11 @@ h1 {
   font-size: 3rem; /* Adjust as needed */
   text-align: center;
 }
+
+.account {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 15px; /* Optional: adjust the padding as needed */
+}
 </style>
diff --git a/src/router.ts b/src/router.ts
index 9a20422..19993a3 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory } from "vue-router";
-import { Component, defineAsyncComponent } from "vue";
 
 import LandingPage from "./components/LandingPage.vue";
 // import TheFooter from './components/Styling/TheFooter.vue'
@@ -27,34 +26,34 @@ const router = createRouter({
       path: "/",
       redirect: { name: "Home" }
     },
-    {
-      name: "Login Page",
-      path: "login",
-      components: { default: PodLogin },
-    },
     {
       name: "Home",
-      path: "home",
+      path: "/home",
       components: { default: LandingPage },
     },
+    {
+      name: "Login Page",
+      path: "/login",
+      components: { default: PodLogin },
+    },
     {
       name: "Data Upload",
-      path: "dataUpload",
+      path: "/dataUpload",
       components: { default: PodUpload },
     },
     {
       name: "Pod Browser",
-      path: "podBrowser",
+      path: "/podBrowser",
       components: { default: PodBrowser },
     },
     {
       name: "Query",
-      path: "dataQuery",
+      path: "/dataQuery",
       components: { default: DataQuery },
     },
     {
       name: "Data Privacy",
-      path: "privacy",
+      path: "/privacy",
       components: { default: EditPrivacy },
     },
     { 
@@ -73,7 +72,9 @@ const router = createRouter({
 setTimeout(() => {
   router.beforeEach(function (to, from, next) {
     // make sure the user is authenticated
-    if (!isLoggedin() && to.name !== "Login Page") {
+    if (!isLoggedin() && to.name !== "Login Page" && to.name !== "Home") {
+      next({ name: "Login Page" });
+    } else if ( !isLoggedin() && to.name !== "Login Page" ) {
       next({ name: "Login Page" });
     } else if (isLoggedin() && to.name === "Login Page") {
       next({ name: "Home" });