diff --git a/src/App.vue b/src/App.vue
index 80a5f3004ad74ae84f4d82d5d76f5ec2488980c4..0236374e935b47547e50478033e896fedcb29c87 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,26 @@
<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>
diff --git a/src/components/FormLogin.vue b/src/components/FormLogin.vue
index 1e5fbf4572adeea42c8d5cc5a7cfa9b2ab11d654..731e224e722324e37fb36ffd35f3bfe4ee2344f7 100644
--- a/src/components/FormLogin.vue
+++ b/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 = () => {
diff --git a/src/components/FormRegister.vue b/src/components/FormRegister.vue
index 8b3e34b6453ccaa8d170a91694d77dbed9b14604..384712994cf7ec631a7228240f8b6da3ac4db45b 100644
--- a/src/components/FormRegister.vue
+++ b/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 = () => {
diff --git a/src/components/NavBarComponent.vue b/src/components/NavBarComponent.vue
index e6c79d2b1ccb284a35994147cd288069c560eb4d..ccde7964c03b077a924287e8cc67ff75d32a57ec 100644
--- a/src/components/NavBarComponent.vue
+++ b/src/components/NavBarComponent.vue
@@ -1,114 +1,80 @@
<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>
diff --git a/src/services/authInterceptor.ts b/src/services/authInterceptor.ts
index f2fd74ff880df5b430d9dadca83cf38b973c3449..cf37191544d587734c508bfb5258560dd98e654d 100644
--- a/src/services/authInterceptor.ts
+++ b/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
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 7d3b80eb1acea632670099dc8333161a71b47f71..fe31bd1a782e8feadd79d12e5fc3338ade7f9f93 100644
--- a/src/stores/userStore.ts
+++ b/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
}
})
diff --git a/src/views/ConfigSpendingItemsAmountView.vue b/src/views/ConfigSpendingItemsAmountView.vue
index 2024c22128c6f56abbc6ff0aacf66fc19bae5337..625bf5335a0e50a61c1db4cb2a388d954430a73e 100644
--- a/src/views/ConfigSpendingItemsAmountView.vue
+++ b/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'
diff --git a/src/views/ConfigSpendingItemsTotalAmountView.vue b/src/views/ConfigSpendingItemsTotalAmountView.vue
index d79963fe003051c6558fe5a16c9b2174582d8cc7..d24cb4f6c652780a935a810a34c0ef3b489a2588 100644
--- a/src/views/ConfigSpendingItemsTotalAmountView.vue
+++ b/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'
diff --git a/src/views/ConfigSpendingItemsView.vue b/src/views/ConfigSpendingItemsView.vue
index 39b47f754a524035be2aae2db23c05152fd1354a..2226cb066b6cc1ed6a880672f6f3223bd33bbb5d 100644
--- a/src/views/ConfigSpendingItemsView.vue
+++ b/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'
diff --git a/src/views/ManageGoalView.vue b/src/views/ManageGoalView.vue
index 360cf137ae3a52657f0d319f5c1b5c88168a56b1..d370e5045efd3f92790714121cc4619449d1dbd1 100644
--- a/src/views/ManageGoalView.vue
+++ b/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: '',