Merge branch 'enhancement/ui-cleanup' into 'dev'

UI cleanup

See merge request !24

src/App.vue

 <script setup lang="ts">
 import NavBarComponent from '@/components/NavBarComponent.vue'
+import { RouterView, useRoute } from 'vue-router'
+import { computed } from 'vue'
+
+const route = useRoute()
+
+const showNavBar = computed(() => {
+    return !(
+        route.path == '/' ||
+        route.path == '/registrer' ||
+        route.path == '/logginn' ||
+        route.path == '/forgotPassword'
+    )
+})
 </script>
 
 <template>
-    <NavBarComponent />
+    <NavBarComponent v-if="showNavBar" />
+
+    <main>
+        <RouterView />
+    </main>
 </template>
 
 <style>

src/components/FormLogin.vue

@@ -2,7 +2,6 @@
 import { computed, ref, watch } from 'vue'
 import { useUserStore } from '@/stores/userStore'
 import ModalComponent from '@/components/ModalComponent.vue'
-import { useRouter } from 'vue-router'
 import axios from 'axios'
 
 const username = ref<string>('')
@@ -14,13 +13,11 @@ const resetEmail = ref<string>('')
 const emailRegex = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/
 
 const userStore = useUserStore()
-const router = useRouter()
 
 const isEmailValid = computed(() => emailRegex.test(resetEmail.value))
 
 const submitForm = () => {
     userStore.login(username.value, password.value)
-    router.push('/hjem')
 }
 
 const toggleShowPassword = () => {

src/components/FormRegister.vue

@@ -2,7 +2,6 @@
 import { computed, ref, watch } from 'vue'
 import { useUserStore } from '@/stores/userStore'
 import ToolTip from '@/components/ToolTip.vue'
-import { useRouter } from 'vue-router'
 
 const firstname = ref<string>('')
 const lastname = ref<string>('')
@@ -15,7 +14,6 @@ const showPassword = ref<boolean>(false)
 const errorMessage = ref<string>('')
 
 const userStore = useUserStore()
-const router = useRouter()
 
 const nameRegex = /^[a-zA-Z ,.'-]+$/
 const emailRegex = /^[a-zA-Z0-9_+&*-]+(?:\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,7}$/
@@ -37,7 +35,6 @@ const isFormInvalid = computed(
 
 const submitForm = () => {
     userStore.register(firstname.value, lastname.value, email.value, username.value, password.value)
-    router.push('/konfigurasjonSteg1')
 }
 
 const toggleShowPassword = () => {

src/components/NavBarComponent.vue

 <template>
-    <nav v-if="showNavBar" class="flex justify-center items-center mt-10 text-xl w-full">
+    <nav class="flex justify-between items-center min-h-32 text-xl w-full px-3 my-0">
         <div>
-            <img
-                src="@/assets/spareSti.png"
-                alt="logo"
-                class="absolute left-0 top-8 w-48 h-15 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-110 hover:opacity-90"
-                @click="goToHome"
-            />
-            <div class="absolute left-6 top-24 flex-1 sm:flex justify-start items-center">
-                <div class="flex md:left-80 md:top-20 right-28 top-20 items-center">
-                    <img src="@/assets/streakFlame.png" alt="streak" class="w-8 h-8" />
-                    <p class="font-bold">Streak</p>
-                </div>
+            <router-link to="/hjem" @click="hamburgerOpen = false">
+                <img
+                    alt="logo"
+                    class="w-40 cursor-pointer transition-transform duration-300 ease-in-out hover:scale-110 hover:opacity-90"
+                    src="@/assets/spareSti.png"
+                />
+            </router-link>
+
+            <div class="flex flex-row justify-center">
+                <img alt="streak" class="w-8 h-8" src="@/assets/streakFlame.png" />
+                <p class="font-bold">Streak</p>
             </div>
         </div>
-        <div class="navcontainer flex space-x-10 justify-center">
-            <router-link to="/hjem" class="nav-link" active-class="border-b-2">🏠Hjem</router-link>
-            <router-link to="/sparemaal" class="nav-link" active-class="border-b-2"
-                >🎯Sparemål</router-link
-            >
-            <router-link to="/spareutfordringer" class="nav-link" active-class="border-b-2"
+        <div v-if="!isHamburger" class="flex flex-row gap-10">
+            <router-link active-class="border-b-2" to="/hjem">🏠Hjem</router-link>
+            <router-link active-class="border-b-2" to="/sparemaal">🎯Sparemål</router-link>
+            <router-link active-class="border-b-2" to="/spareutfordringer"
                 >💰Spareutfordringer</router-link
             >
-            <router-link to="/profil" class="nav-link" active-class="border-b-2"
-                >🤭Profil</router-link
-            >
-            <button
-                @click="logout"
-                class="hidden sm:flex absolute right-10 py-2 px-6 rounded-full focus:outline-none focus:ring focus:ring-black-300"
-            >
-                Logg ut
-            </button>
+            <router-link active-class="border-b-2" to="/profil">🤭Profil</router-link>
         </div>
-        <button class="hamburger-menu sm:hidden absolute right-10 top-10" @click="toggleMenu">
-            <p>☰</p>
-        </button>
+
+        <div v-if="!isHamburger" class="flex justify-center w-40">
+            <button class="focus:ring focus:ring-black-300" @click="logout">Logg ut</button>
+        </div>
+        <button v-if="isHamburger" @click="toggleMenu">☰</button>
     </nav>
 
-    <div
-        v-if="menuOpen"
-        class="sm:hidden flex flex-col bg-white absolute border border-slate-300 top-10 w-full mt-10 z-50 rounded-xl"
-    >
-        <router-link to="/hjem" @click="menuOpen = false">🏠Hjem</router-link>
-        <router-link to="/sparemaal" @click="menuOpen = false">🎯Sparemål</router-link>
-        <router-link to="/spareutfordringer" @click="menuOpen = false"
+    <div v-if="hamburgerOpen" class="flex flex-col bg-white border border-slate-300 z-50">
+        <router-link to="/hjem" @click="hamburgerOpen = false">🏠Hjem</router-link>
+        <router-link to="/sparemaal" @click="hamburgerOpen = false">🎯Sparemål</router-link>
+        <router-link to="/spareutfordringer" @click="hamburgerOpen = false"
             >💰Spareutfordringer</router-link
         >
-        <router-link to="/profil" @click="menuOpen = false">🤭Profil</router-link>
-        <button
-            @click="logout"
-            class="py-2 px-6 mx-auto rounded-full focus:outline-none focus:ring focus:ring-black-300 bg-transparent"
-        >
+        <router-link to="/profil" @click="hamburgerOpen = false">🤭Profil</router-link>
+        <button class="focus:ring focus:ring-black-300 bg-transparent" @click="logout">
             Logg ut
         </button>
     </div>
-
-    <main>
-        <RouterView />
-    </main>
 </template>
 
 <script setup lang="ts">
-import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
-import { computed, onMounted, ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import { useUserStore } from '@/stores/userStore'
 
-const route = useRoute()
-const router = useRouter()
-const windowWidth = ref(window.innerWidth)
-const menuOpen = ref(false)
+const userStore = useUserStore()
 
-const showNavBar = computed(() => {
-    return (
-        route.path == '/hjem' ||
-        route.path == '/sparemaal' ||
-        route.path == '/spareutfordringer' ||
-        route.path == '/profil' ||
-        route.path == '/konfigurasjonSteg1'
-    )
-})
+const windowWidth = ref(window.innerWidth)
+const hamburgerOpen = ref(false)
+const isHamburger = ref(false)
 
 const logout = () => {
-    router.push('/login')
-    menuOpen.value = false
+    userStore.logout()
 }
 
-const goToHome = () => {
-    router.push('/hjem')
-    menuOpen.value = false
+const toggleMenu = () => {
+    hamburgerOpen.value = !hamburgerOpen.value
 }
 
-const toggleMenu = () => {
-    menuOpen.value = !menuOpen.value
+const updateWindowWidth = () => {
+    windowWidth.value = window.innerWidth
+    if (windowWidth.value < 1150) {
+        isHamburger.value = true
+    } else {
+        isHamburger.value = false
+        hamburgerOpen.value = false
+    }
 }
 
 onMounted(() => {
-    const updateWindowWidth = () => {
-        windowWidth.value = window.innerWidth
-    }
     window.addEventListener('resize', updateWindowWidth)
+    updateWindowWidth()
 })
 </script>
 
-<style scoped>
-@media (max-width: 1150px) {
-    .hamburger-menu {
-        display: block;
-        cursor: pointer;
-    }
-    .navcontainer {
-        display: none;
-    }
-}
-</style>
+<style scoped></style>

src/services/authInterceptor.ts

@@ -28,7 +28,10 @@ authInterceptor.interceptors.response.use(
     },
     async (error) => {
         const originalRequest = error.config
-        if (error.response.status === 401 && !originalRequest._retry) {
+        if (
+            (error.response.status === 401 || error.response.status === 403) &&
+            !originalRequest._retry
+        ) {
             originalRequest._retry = true
             const refreshToken = localStorage.getItem('refreshToken')
             axios

src/stores/userStore.ts

@@ -38,7 +38,7 @@ export const useUserStore = defineStore('user', () => {
                 user.value.lastname = lastname
                 user.value.username = username
 
-                router.push('/')
+                router.push({ name: 'configurations1' })
             })
             .catch((error) => {
                 const axiosError = error as AxiosError
@@ -60,7 +60,7 @@ export const useUserStore = defineStore('user', () => {
                 user.value.lastname = response.data.lastName
                 user.value.username = response.data.username
 
-                router.push('/')
+                router.push({ name: 'home' })
             })
             .catch((error) => {
                 const axiosError = error as AxiosError
@@ -68,9 +68,18 @@ export const useUserStore = defineStore('user', () => {
             })
     }
 
+    const logout = () => {
+        console.log('Logging out')
+        sessionStorage.removeItem('accessToken')
+        localStorage.removeItem('refreshToken')
+        user.value = defaultUser
+        router.push({ name: 'login' })
+    }
+
     return {
-        login,
         register,
+        login,
+        logout,
         errorMessage
     }
 })

src/views/ConfigSpendingItemsAmountView.vue

@@ -60,7 +60,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'

src/views/ConfigSpendingItemsTotalAmountView.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'

src/views/ConfigSpendingItemsView.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'

src/views/ManageGoalView.vue

@@ -18,7 +18,7 @@ const maxDate = thirtyDaysFromNow.toISOString().slice(0, 16)
 const goalInstance = ref<Goal>({
     id: 0,
     title: '',
-    saved: 50,
+    saved: 0,
     target: 100,
     completion: 0,
     description: '',