implemented settings and user page (darkmode is still missing)

layouts/Actionbar.vue

@@ -91,9 +91,9 @@
           <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
         </Transition>
       </button>
-      <router-link v-if="addSolutionIcon" to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
-        <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution"
-          @click="addSolution">
+      <router-link v-if="addSolutionIcon" to="/solutions" class="button"
+        :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution" @click="addSolution">
           <div class="icon" id="new-icon">
             <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="/icons/actionbar-icons/Add-New-Icon.svg" />
@@ -128,10 +128,11 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
+const changeToSet = computed(() => store.state.changeToSet);
 const addIcon = computed(() => store.state.addIcon);
 const addInstanceIcon = computed(() => store.state.addInstanceIcon);
 const addSolutionIcon = computed(() => store.state.addSolutionIcon);
@@ -178,8 +179,22 @@ const changeToSolutions = () => {
   store.commit('changeToSolutionlistAsset');
 }
 
+// const changeToSettingsPage = () => {
+//   store.commit('changeToSettings');
+//   if (changeToSet.value) {
+//     store.commit('toggleChangeToSet');
+//   }
+//   console.log('set')
+// }
+
+// watch(changeToSet, changeToSettingsPage)
+
 onMounted(() => {
   store.commit('changeToAssetlist')
+  if (changeToSet.value) {
+    store.commit('toggleChangeToSet');
+    store.commit('changeToSettings');
+  }
 });
 </script>
 

layouts/PageHeader.vue

@@ -1,29 +1,98 @@
 <template>
     <header :class="[darkMode ? 'header-darkmode' : 'header-lightmode']">
         <img id="header-logo" loading="lazy" src="/tüit-logo.svg.png" />
-        <div class="profile">
-            <pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']" id='uname'>username</pre>
-            <div :class="['picture', darkMode ? 'picture-darkmode' : 'picture-lightmode']">
-                <img id="picture" loading="lazy" src="" />
+        <router-link v-if="visibilityBool" to="/settings" class="button"
+            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="goToSettings">
+            <div v-if="visibilityBool" class="profile">
+                <pre :class="['username', darkMode ? 'username-darkmode' : 'username-lightmode']"
+                    id='username'>{{ loggedInUserUsername }}</pre>
+                <div v-if="visibilityBool"
+                    :class="['picture', visibilityBool && !darkMode ? 'picture-loggedin-lightmode' : '', !visibilityBool && !darkMode ? 'picture-not-loggedin-lightmode' : '', visibilityBool && darkMode ? 'picture-loggedin-darkmode' : '', !visibilityBool && darkMode ? 'picture-not-loggedin-darkmode' : '']">
+                    <img id="picture" loading="lazy" src="" />
+                </div>
             </div>
-        </div>
+        </router-link>
     </header>
 </template>
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch, onMounted } from 'vue';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const loggedInUserUsername = ref('');
+const loggedInBool = ref(false);
+const visibilityBool = computed(() => loggedInBool.value);
+const storeChanged = computed(() => store.state.localStorageChanged);
+
+const route = useRoute()
+const id = computed(() => route)
 
 const darkMode = ref(true)
-const username = ref('username');
 
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+const goToSettings = () => {
+    store.commit('resetStore');
+    store.commit('toggleChangeToSet');
+    store.commit('changeToSettings');
+};
+
+const getSession = async () => {
+    if ((!(id.value.fullPath == '/login')) && (!(id.value.fullPath == '/settings'))) {
+        loggedInBool.value = false;
+        loggedInBool.value = getItem('logged-in-bool');
+        loggedInUserUsername.value = getItem('logged-in-user-username');
+    }
+    if (storeChanged.value) {
+        loggedInBool.value = getItem('logged-in-bool');
+        loggedInUserUsername.value = getItem('logged-in-user-username');
+        store.commit('resetLocalStorageChanged');
+    }
+}
+
+const checkPath = async () => {
+    if (id.value.fullPath == '/login') {
+        loggedInBool.value = false;
+        localStorage.setItem('logged-in-bool', false);
+        localStorage.removeItem('logged-in-user-id');
+        localStorage.removeItem('logged-in-user-username');
+        localStorage.removeItem('logged-in-user-registered');
+        localStorage.removeItem('logged-in-user-lastLogin');
+        localStorage.removeItem('logged-in-user-fullName');
+        localStorage.removeItem('logged-in-user-email');
+        localStorage.removeItem('logged-in-user-phonenumber');
+        localStorage.removeItem('logged-in-user-address');
+        localStorage.removeItem('logged-in-user-city');
+        localStorage.removeItem('logged-in-user-postcode');
+        localStorage.removeItem('logged-in-user-adminBool');
+        localStorage.removeItem('logged-in-user-technicianBool');
+        localStorage.removeItem('logged-in-user-readerBool'); store.commit('logout');
+    }
+}
+
+watch(storeChanged, getSession);
+watch(visibilityBool, getSession);
+
+onMounted(async () => {
+    await checkPath();
+    await getSession();
+});
 </script>
 
 
 <script>
 
 export default {
-  name: "PageHeader",
+    name: "PageHeader",
 }
 </script>
 
@@ -90,6 +159,10 @@ header {
     color: #000000;
 }
 
+.pre#username {
+    text-decoration: none;
+}
+
 .picture {
     display: flex;
     width: 1.875rem;
@@ -97,11 +170,19 @@ header {
     border-radius: 50%;
 }
 
-.picture-darkmode {
+.picture-loggedin-darkmode {
     background-color: #ffffff;
 }
 
-.picture-lightmode {
+.picture-not-loggedin-darkmode {
+    background-color: #212121;
+}
+
+.picture-loggedin-lightmode {
     background-color: #000000;
 }
+
+.picture-not-loggedin-lightmode {
+    background-color: #ebebeb;
+}
 </style>

layouts/empty.vue

@@ -10,7 +10,6 @@
 import PageHeader from "../layouts/PageHeader.vue";
 
 const darkMode = ref(true)
-
 </script>
 
 <script>