merge: merge with dev

cypress/e2e/homeView.cy.ts

+/*import { useUserStore } from '../../src/stores/userStore'
+
 describe('Goals and Challenges Page Load', () => {
+  let userStore;
+
   beforeEach(() => {
     // Add console log to trace API calls
     cy.on('window:before:load', (win) => {
       cy.spy(win.console, 'log');
     });
 
+    cy.window().then((win) => {
+      win.sessionStorage.setItem('accessToken', 'validAccessToken');
+      win.localStorage.setItem('refreshToken', 'validRefreshToken');
+    });
+
+    userStore = {
+        user: {
+            isConfigured: true
+        },
+        checkIfUserConfigured: cy.stub().resolves(),
+      };
+
+    cy.stub(window, useUserStore()).returns(userStore);
+
     // Mock the API responses that are called on component mount
     cy.intercept('GET', '/goals', {
       statusCode: 200,
@@ -115,3 +133,4 @@ describe('Goals and Challenges Page Load', () => {
   });
 
 });
+*/
\ No newline at end of file

src/App.vue

@@ -10,7 +10,7 @@ const showNavBar = computed(() => {
     return !(
         route.path == '/' ||
         route.path == '/registrer' ||
-        route.path == '/logginn' ||
+        route.path.startsWith('/logginn') ||
         route.path == '/forgotPassword' ||
         route.path.startsWith('/konfigurasjon')
     )

src/assets/base.css

@@ -30,12 +30,6 @@
     --section-gap: 160px;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        /* TODO: add dark mode colors */
-    }
-}
-
 *,
 *::before,
 *::after {

src/components/ButtonAddGoalOrChallenge.vue

@@ -25,20 +25,25 @@
 import { defineProps, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-interface Props {
-    buttonText: string
-    type: 'goal' | 'challenge'
-}
+const props = defineProps({
+    buttonText: String,
+    type: String,
+    showModal: Boolean
+})
+
+const emit = defineEmits(['update:showModal'])
+
 const router = useRouter()
 
-const props = defineProps<Props>()
 const btnText = ref(props.buttonText)
 
 const routeToGoalOrChallenge = () => {
     if (props.type === 'goal') {
         router.push('/sparemaal')
-    } else {
+    } else if (props.type === 'challenge') {
         router.push('/spareutfordringer')
+    } else if (props.type === 'generatedChallenge') {
+        emit('update:showModal', true)
     }
 }
 </script>

src/components/ContinueButtonComponent.vue

@@ -13,7 +13,14 @@
 import { defineEmits, defineProps } from 'vue'
 
 const props = defineProps({
-    disabled: Boolean
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    text: {
+        type: String,
+        default: 'Fortsett'
+    }
 })
 
 const emit = defineEmits(['click'])

src/components/FormLogin.vue

@@ -23,10 +23,6 @@ const submitForm = () => {
     userStore.login(username.value, password.value)
 }
 
-const bioLogin = () => {
-    userStore.bioLogin(username.value)
-}
-
 const toggleShowPassword = () => {
     showPassword.value = !showPassword.value
 }
@@ -121,7 +117,6 @@ watch(
                 Logg inn
             </button>
             <p>{{ errorMessage }}</p>
-            <button @click="bioLogin">biologin</button>
         </div>
     </div>
     <modal-component

src/components/FormRegister.vue

@@ -15,7 +15,7 @@ const errorMessage = ref<string>('')
 
 const userStore = useUserStore()
 
-const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{1,29}$/
+const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{0,29}$/
 const emailRegex =
     /^[æÆøØåÅa-zA-Z0-9_+&*-]+(?:\.[æÆøØåÅa-zA-Z0-9_+&*-]+)*@(?:[æÆøØåÅa-zA-Z0-9-]+\.)+[æÆøØåÅa-zA-Z]{2,7}$/
 const usernameRegex = /^[ÆØÅæøåA-Za-z][æÆøØåÅA-Za-z0-9_]{2,29}$/

src/components/GeneratedChallengesModal.vue

+<template>
+    <div
+        v-if="showModal"
+        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
+    >
+        <div class="relative bg-white pt-10 p-4 rounded-lg shadow-xl" style="width: 40rem">
+            <button @click="closeModal" class="absolute top-0 right-0 m-2 text-white">
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M6 18L18 6M6 6l12 12"
+                    />
+                </svg>
+            </button>
+            <div v-if="generatedChallenges.length > 0">
+                <div class="text-center font-bold text-3xl mb-4 mt-2">
+                    Personlig tilpassede spareutfordringer:
+                </div>
+                <div class="grid grid-cols-7 sm:grid-cols-11 gap-2 p-3 pb-1 border-b-2">
+                    <span class="font-bold col-span-2 md:col-span-3 sm:text-lg pt-1 mb-0"
+                        >Tittel</span
+                    >
+                    <span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0"
+                        >Målsum</span
+                    >
+                    <span
+                        class="font-bold col-span-2 md:col-span-1 sm:text-lg pt-1 pr-1 md:pr-3 mb-0"
+                        >Frist</span
+                    >
+                    <span class="col-span-2"></span>
+                </div>
+                <div class="space-y-2">
+                    <div
+                        v-for="(challenge, index) in generatedChallenges"
+                        :key="index"
+                        :class="{ 'bg-gray-100': index % 2 === 0 }"
+                        class="grid grid-cols-7 md:grid-cols-7 sm:grid-cols-2 lg:grid-cols-7 gap-4 items-center border p-3 rounded mt-[-8px]"
+                    >
+                        <span class="break-words col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{
+                            challenge.title
+                        }}</span>
+                        <span class="col-span-2 md:col-span-2 lg:col-span-1 text-lg">{{
+                            challenge.target
+                        }}</span>
+                        <span class="col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{
+                            challenge.due
+                        }}</span>
+                        <div
+                            class="col-span-7 sm:col-start-3 sm:col-span-2 md:col-span-2 lg:col-span-2 flex items-center justify-end space-x-2"
+                        >
+                            <span v-if="challenge.isAccepted" class="font-bold text-lg"
+                                >Godtatt!</span
+                            >
+                            <button
+                                @click="acceptChallenge(challenge)"
+                                class="text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0"
+                            >
+                                Godta
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-else class="text-center text-2xl font-bold mt-1">
+                Ingen nye spareutfordringer enda ... sjekk igjen senere!
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import authInterceptor from '@/services/authInterceptor'
+import type { AxiosResponse } from 'axios'
+
+interface Challenge {
+    title: string
+    target: number
+    due: string
+    dueFull: string
+    isAccepted: boolean
+    perPurchase?: number
+    description?: string
+    type?: string
+}
+
+const showModal = ref(true)
+const generatedChallenges = reactive<Challenge[]>([])
+
+async function fetchGeneratedChallenges() {
+    try {
+        const response: AxiosResponse = await authInterceptor.get('/challenges/generate')
+        if (response.status === 200) {
+            generatedChallenges.splice(
+                0,
+                generatedChallenges.length,
+                ...response.data.map((ch: any) => ({
+                    ...ch,
+                    due: new Date(ch.due).toISOString().split('T')[0],
+                    dueFull: ch.due,
+                    isAccepted: false
+                }))
+            )
+        } else {
+            generatedChallenges.splice(0, generatedChallenges.length)
+        }
+    } catch (error) {
+        console.error('Error fetching challenges:', error)
+    }
+}
+
+onMounted(() => {
+    fetchGeneratedChallenges()
+    localStorage.setItem('lastModalShow', Date.now().toString())
+})
+
+function acceptChallenge(challenge: Challenge) {
+    if (!challenge) {
+        console.error('No challenge data provided to acceptChallenge function.')
+        return
+    }
+    const postData = {
+        title: challenge.title,
+        saved: 0,
+        target: challenge.target,
+        perPurchase: challenge.perPurchase,
+        description: challenge.description,
+        due: challenge.dueFull,
+        type: challenge.type
+    }
+    authInterceptor
+        .post('/challenges', postData)
+        .then((response: AxiosResponse) => {
+            challenge.isAccepted = true
+        })
+        .catch((error) => {
+            console.error('Failed to save challenge:', error)
+        })
+}
+
+const closeModal = () => {
+    showModal.value = false
+}
+</script>

src/components/NavBarComponent.vue

@@ -10,7 +10,7 @@
             </router-link>
 
             <div class="flex flex-row justify-center">
-                <ButtonDisplayStreak></ButtonDisplayStreak>
+                <ButtonDisplayStreak />
             </div>
         </div>
         <div v-if="!isHamburger" class="flex flex-row gap-10">

src/components/__tests__/NavBarTest.spec.ts

-import { mount, VueWrapper } from '@vue/test-utils'
-import NavBar from '@/components/NavBarComponent.vue'
-import router from '@/router'
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-vi.stubGlobal('scrollTo', vi.fn())
-// Mocking Axios correctly using `importOriginal`
-const mocks = vi.hoisted(() => ({
-    get: vi.fn(),
-    post: vi.fn()
-}))
-
-vi.mock('axios', async (importActual) => {
-    const actual = await importActual<typeof import('axios')>()
-
-    return {
-        default: {
-            ...actual.default,
-            create: vi.fn(() => ({
-                ...actual.default.create(),
-                get: mocks.get,
-                post: mocks.post
-            }))
-        }
-    }
-})
-
-describe('NavBar Routing', () => {
-    let wrapper: VueWrapper<any>
-
-    beforeEach(async () => {
-        const pinia = createPinia()
-        setActivePinia(pinia)
-
-        wrapper = mount(NavBar, {
-            global: {
-                plugins: [router, pinia]
-            }
-        })
-
-        await router.push('/')
-        await router.isReady()
-        await nextTick()
-    })
-
-    it('renders without errors', () => {
-        expect(wrapper.exists()).toBe(true)
-    })
-
-    it('displays correct active route for home link on full screen', async () => {
-        global.innerWidth = 1200
-        await router.push('/hjem')
-        await router.isReady()
-
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-
-    it('displays correct active route for goals link on full screen', async () => {
-        global.innerWidth = 1200
-
-        await router.push('/sparemaal')
-        await router.isReady()
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-
-    it('displays correct active route for challenges link on full screen', async () => {
-        global.innerWidth = 1200
-
-        await router.push('/spareutfordringer')
-        await router.isReady()
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-
-    it('displays correct active route for profile link on full screen', async () => {
-        global.innerWidth = 1200
-
-        await router.push('/profil')
-        await router.isReady()
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-
-    it('displays correct active route for home link when the hamburger menu is open', async () => {
-        global.innerWidth = 1000
-        wrapper.vm.hamburgerOpen = true
-        await wrapper.vm.$nextTick()
-
-        await router.push('/hjem')
-        await router.isReady()
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-
-    it('displays correct active route for goals link when the hamburger menu is open', async () => {
-        global.innerWidth = 1000
-        wrapper.vm.hamburgerOpen = true
-        await wrapper.vm.$nextTick()
-
-        await router.push('/sparemaal')
-        await router.isReady()
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-
-    it('displays correct active route for challenges link when the hamburger menu is open', async () => {
-        global.innerWidth = 1000
-        wrapper.vm.hamburgerOpen = true
-        await wrapper.vm.$nextTick()
-
-        await router.push('/spareutfordringer')
-        await router.isReady()
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-
-    it('displays correct active route for profile link when the hamburger menu is open', async () => {
-        global.innerWidth = 1000
-        wrapper.vm.hamburgerOpen = true
-        await wrapper.vm.$nextTick()
-
-        await router.push('/profil')
-        await router.isReady()
-        expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
-    })
-})

src/router/index.ts

 import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/userStore'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -18,6 +19,11 @@ const router = createRouter({
             name: 'login',
             component: () => import('@/views/RegisterLoginView.vue')
         },
+        {
+            path: '/logginn/:username',
+            name: 'login-bio',
+            component: () => import('@/views/BiometricLoginView.vue')
+        },
         {
             path: '/registrer',
             name: 'register',
@@ -31,12 +37,12 @@ const router = createRouter({
         {
             path: '/profil',
             name: 'profile',
-            component: () => import('@/views/ProfileView.vue')
+            component: () => import('@/views/ViewProfileView.vue')
         },
         {
             path: '/profil/rediger',
             name: 'edit-profile',
-            component: () => import('@/views/EditProfileView.vue')
+            component: () => import('@/views/ManageProfileView.vue')
         },
         {
             path: '/sparemaal',
@@ -108,25 +114,15 @@ const router = createRouter({
             name: 'configurations6',
             component: () => import('@/views/ConfigAccountNumberView.vue')
         },
-        {
-            path: '/forsteSparemaal',
-            name: 'firstSavingGoal',
-            component: () => import('@/views/FirstSavingGoalView.vue')
-        },
-        {
-            path: '/forsteSpareutfordring',
-            name: 'firstSavingChallengde',
-            component: () => import('@/views/FirstSavingChallengeView.vue')
-        },
         {
             path: '/:pathMatch(.*)*',
             name: 'not-found',
             component: () => import('@/views/NotFoundView.vue')
         },
         {
-            path: '/addAlternativeLogin',
-            name: 'addAlternativeLogin',
-            component: () => import('@/views/AddAlternativeLogin.vue')
+            path: '/konfigurasjonBiometri',
+            name: 'configure-biometric',
+            component: () => import('@/views/ConfigBiometricView.vue')
         }
     ],
     scrollBehavior() {
@@ -134,4 +130,67 @@ const router = createRouter({
     }
 })
 
+router.beforeEach(async (to, from, next) => {
+    const publicPages = [
+        { name: 'login' },
+        { name: 'login-bio' },
+        { name: 'register' },
+        { name: 'resetPassword' },
+        { name: 'start' }
+    ]
+
+    const configPages = [
+        { name: 'configure-biometric' },
+        { name: 'configurations1' },
+        { name: 'configurations2' },
+        { name: 'configurations3' },
+        { name: 'configurations4' },
+        { name: 'configurations5' },
+        { name: 'configurations6' }
+    ]
+
+    const authRequired = !publicPages.some((page) => page.name === to.name)
+    const loginCredentials = sessionStorage.getItem('accessToken')
+    const bioCredentials = localStorage.getItem('spareStiUsername')
+
+    const userStore = useUserStore()
+    const configRequired = !configPages.some((page) => page.name === to.name)
+
+    if (!loginCredentials) {
+        if (bioCredentials && to.name !== 'login-bio') {
+            console.log('Bio login')
+            await router.replace({ name: 'login-bio', params: { username: bioCredentials } })
+            return next({ name: 'login-bio', params: { username: bioCredentials } })
+        } else if (authRequired && !bioCredentials && to.name !== 'login') {
+            console.log('Normal login')
+            await router.replace({ name: 'login' })
+            return next({ name: 'login' })
+        } else if (!authRequired) {
+            console.log('Public page')
+            next()
+        }
+    } else {
+        if (userStore.user.isConfigured == false) {
+            await userStore.checkIfUserConfigured()
+        }
+
+        const isConfigured = userStore.user.isConfigured
+
+        if (configRequired && !isConfigured) {
+            await router.replace({ name: 'configure-biometric' })
+            return next({ name: 'configure-biometric' })
+        } else if (!configRequired && isConfigured) {
+            await router.replace({ name: 'home' })
+            return next({ name: 'home' })
+        }
+
+        if (!authRequired) {
+            await router.replace({ name: 'home' })
+            return next({ name: 'home' })
+        }
+    }
+
+    return next()
+})
+
 export default router

src/services/authInterceptor.ts

@@ -33,28 +33,15 @@ authInterceptor.interceptors.response.use(
             !originalRequest._retry
         ) {
             originalRequest._retry = true
-            const refreshToken = localStorage.getItem('refreshToken')
-            axios
-                .post('/auth/renewToken', null, {
-                    headers: {
-                        Authorization: `Bearer ${refreshToken}`
-                    }
-                })
-                .then((response) => {
-                    sessionStorage.setItem('accessToken', response.data.accessToken)
-                    authInterceptor.defaults.headers['Authorization'] =
-                        `Bearer ${response.data.accessToken}`
-                    return authInterceptor(originalRequest)
-                })
-                .catch((err) => {
-                    router.push({ name: 'login' })
-                    return Promise.reject(err)
-                })
-        }
-        // Specific handler for 404 errors
-        if (error.response?.status === 404) {
-            console.error('Requested resource not found:', error.config.url)
-            // Optionally redirect or inform the user, depending on the context
+
+            sessionStorage.removeItem('accessToken')
+            const username = localStorage.getItem('spareStiUsername')
+
+            if (!username) {
+                await router.push({ name: 'login' })
+            } else {
+                await router.push({ name: 'login-bio', params: { username: username } })
+            }
         }
         return Promise.reject(error)
     }

src/stores/accountStore.ts

-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import authInterceptor from '@/services/authInterceptor'
-import { AxiosError } from 'axios'
-
-export const useAccountStore = defineStore('account', {
-    state: () => ({
-        errorMessage: ref<string>('')
-    }),
-    actions: {
-        async postAccount(accountType: 'SAVING' | 'SPENDING', accNumber: string, balance: number) {
-            const payload = {
-                accountType,
-                accNumber,
-                balance
-            }
-
-            try {
-                const response = await authInterceptor.post('/accounts', payload)
-                console.log('Success:', response.data)
-            } catch (error) {
-                console.error('Error posting account:', error)
-                this.handleAxiosError(error)
-            }
-        },
-        handleAxiosError(error: any) {
-            const axiosError = error as AxiosError
-            if (axiosError.response && axiosError.response.data) {
-                const errorData = axiosError.response.data as { message: string }
-            } else {
-                this.errorMessage = 'An unexpected error occurred'
-            }
-        }
-    }
-})

src/stores/userConfigStore.ts

-import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { defineStore } from 'pinia'
 import authInterceptor from '@/services/authInterceptor'
 import { AxiosError } from 'axios'
 
-export const useUserConfigStore = defineStore('userConfig', {
-    state: () => ({
-        role: 'USER',
-        experience: 'VERY_HIGH',
-        motivation: 'VERY_HIGH',
-        challengeTypeConfigs: [] as {
+export const useUserConfigStore = defineStore('userConfig', () => {
+    const role = ref('USER')
+    const experience = ref('')
+    const motivation = ref('')
+    const challengeTypeConfigs = ref(
+        [] as {
             type: string
             specificAmount: number
             generalAmount: number
-        }[],
-        errorMessage: ref<string>('')
-    }),
-    actions: {
-        setExperience(value: string) {
-            this.experience = value
-        },
-        setMotivation(value: string) {
-            this.motivation = value
-        },
-        addChallengeTypeConfig(type: string, specificAmount: number, generalAmount: number) {
-            this.challengeTypeConfigs.push({ type, specificAmount, generalAmount })
-        },
-        postUserConfig() {
-            const payload = {
-                experience: this.experience,
-                motivation: this.motivation,
-                challengeTypeConfigs: Array.from(this.challengeTypeConfigs)
-            }
+        }[]
+    )
+    const accounts = ref({
+        savings: '',
+        spending: ''
+    })
+    const errorMessage = ref<string>('')
+
+    const setExperience = (value: string) => {
+        experience.value = value
+    }
 
-            authInterceptor
-                .post('/config/challenge', payload)
-                .then((response) => {
-                    console.log('Success:', response.data)
-                })
-                .catch((error) => {
-                    const axiosError = error as AxiosError
-                    if (axiosError.response && axiosError.response.data) {
-                        const errorData = axiosError.response.data as { message: string }
-                        this.errorMessage = errorData.message || 'An error occurred'
-                    } else {
-                        this.errorMessage = 'An unexpected error occurred'
-                    }
-                    console.error('Axios error:', this.errorMessage)
-                })
+    const setMotivation = (value: string) => {
+        motivation.value = value
+    }
+
+    const addChallengeTypeConfig = (
+        type: string,
+        specificAmount: number,
+        generalAmount: number
+    ) => {
+        challengeTypeConfigs.value.push({ type, specificAmount, generalAmount })
+    }
+
+    const postAccount = async (
+        accountType: 'SAVING' | 'SPENDING',
+        accNumber: string,
+        balance: number
+    ) => {
+        const payload = {
+            accountType,
+            accNumber,
+            balance
+        }
+        await authInterceptor
+            .post('/accounts', payload)
+            .then((response) => {
+                console.log('Success:', response.data)
+            })
+            .catch((error) => {
+                const axiosError = error as AxiosError
+                errorMessage.value =
+                    (axiosError.response?.data as string) ||
+                    'An error occurred while posting account'
+                console.error('Error posting account:', errorMessage.value)
+            })
+    }
+
+    const postUserConfig = async () => {
+        const payload = {
+            experience: experience.value,
+            motivation: motivation.value,
+            challengeTypeConfigs: Array.from(challengeTypeConfigs.value)
         }
+        await authInterceptor
+            .post('/config/challenge', payload)
+            .then((response) => {
+                console.log('Success:', response.data)
+            })
+            .catch((error) => {
+                const axiosError = error as AxiosError
+                errorMessage.value =
+                    (axiosError.response?.data as string) ||
+                    'An error occurred while updating configuration'
+                console.error('Error updating configuration:', errorMessage.value)
+            })
+    }
+
+    return {
+        role,
+        experience,
+        motivation,
+        challengeTypeConfigs,
+        accounts,
+        errorMessage,
+        setExperience,
+        setMotivation,
+        addChallengeTypeConfig,
+        postAccount,
+        postUserConfig
     }
 })

src/stores/userStore.ts

@@ -14,7 +14,8 @@ export const useUserStore = defineStore('user', () => {
     const defaultUser: User = {
         firstname: 'Firstname',
         lastname: 'Lastname',
-        username: 'Username'
+        username: 'Username',
+        isConfigured: false
     }
 
     const user = ref<User>(defaultUser)
@@ -30,7 +31,7 @@ export const useUserStore = defineStore('user', () => {
     ) => {
         await axios
             .post(`http://localhost:8080/auth/register`, {
-                firstName: firstname, //TODO rename all instances of firstname to firstName
+                firstName: firstname,
                 lastName: lastname,
                 email: email,
                 username: username,
@@ -38,13 +39,12 @@ export const useUserStore = defineStore('user', () => {
             })
             .then((response) => {
                 sessionStorage.setItem('accessToken', response.data.accessToken)
-                localStorage.setItem('refreshToken', response.data.refreshToken)
 
                 user.value.firstname = firstname
                 user.value.lastname = lastname
                 user.value.username = username
 
-                router.push({ name: 'addAlternativeLogin' })
+                router.push({ name: 'configure-biometric' })
             })
             .catch((error) => {
                 const axiosError = error as AxiosError
@@ -60,13 +60,22 @@ export const useUserStore = defineStore('user', () => {
             })
             .then((response) => {
                 sessionStorage.setItem('accessToken', response.data.accessToken)
-                localStorage.setItem('refreshToken', response.data.refreshToken)
 
                 user.value.firstname = response.data.firstName
                 user.value.lastname = response.data.lastName
                 user.value.username = response.data.username
 
-                router.push({ name: 'home' })
+                authInterceptor('/profile').then((profileResponse) => {
+                    if (profileResponse.data.hasPasskey === true) {
+                        localStorage.setItem('spareStiUsername', username)
+                    }
+                })
+
+                checkIfUserConfigured()
+
+                user.value.isConfigured
+                    ? router.push({ name: 'home' })
+                    : router.push({ name: 'configure-biometric' })
             })
             .catch((error) => {
                 const axiosError = error as AxiosError
@@ -77,160 +86,167 @@ export const useUserStore = defineStore('user', () => {
     const logout = () => {
         console.log('Logging out')
         sessionStorage.removeItem('accessToken')
-        localStorage.removeItem('refreshToken')
+        localStorage.removeItem('spareStiUsername')
         user.value = defaultUser
         router.push({ name: 'login' })
     }
-    const getUserStreak = async () => {
-        try {
-            const response = await authInterceptor('/profile/streak')
-            if (response.data) {
+
+    const getUserStreak = () => {
+        authInterceptor('/profile/streak')
+            .then((response) => {
                 streak.value = response.data
-                console.log('Fetched Challenges:', streak.value)
-            } else {
+            })
+            .catch((error) => {
+                console.error('Error fetching challenges:', error)
                 streak.value = undefined
-                console.error('No challenge content found:', response.data)
-            }
-        } catch (error) {
-            console.error('Error fetching challenges:', error)
-            streak.value = undefined // Ensure challenges is always an array
-        }
+            })
     }
 
     const bioRegister = async () => {
-        try {
-            const response = await authInterceptor.post('/auth/bioRegistration')
-            initialCheckStatus(response)
-
-            const credentialCreateJson: CredentialCreationOptions = response.data
-
-            const credentialCreateOptions: CredentialCreationOptions = {
-                publicKey: {
-                    ...credentialCreateJson.publicKey,
-                    challenge: base64urlToUint8array(
-                        credentialCreateJson.publicKey.challenge as unknown as string
-                    ),
-                    user: {
-                        ...credentialCreateJson.publicKey.user,
-                        id: base64urlToUint8array(
-                            credentialCreateJson.publicKey.user.id as unknown as string
-                        )
+        authInterceptor
+            .post('/auth/bioRegistration')
+            .then((response) => {
+                initialCheckStatus(response)
+
+                const credentialCreateJson: CredentialCreationOptions = response.data
+
+                const credentialCreateOptions: CredentialCreationOptions = {
+                    publicKey: {
+                        ...credentialCreateJson.publicKey,
+                        challenge: base64urlToUint8array(
+                            credentialCreateJson.publicKey.challenge as unknown as string
+                        ),
+                        user: {
+                            ...credentialCreateJson.publicKey.user,
+                            id: base64urlToUint8array(
+                                credentialCreateJson.publicKey.user.id as unknown as string
+                            )
+                        },
+                        excludeCredentials: credentialCreateJson.publicKey.excludeCredentials?.map(
+                            (credential) => ({
+                                ...credential,
+                                id: base64urlToUint8array(credential.id as unknown as string)
+                            })
+                        ),
+                        extensions: credentialCreateJson.publicKey.extensions
+                    }
+                }
+
+                return navigator.credentials.create(
+                    credentialCreateOptions
+                ) as Promise<PublicKeyCredential>
+            })
+            .then((publicKeyCredential) => {
+                const publicKeyResponse =
+                    publicKeyCredential.response as AuthenticatorAttestationResponse
+                const encodedResult = {
+                    type: publicKeyCredential.type,
+                    id: publicKeyCredential.id,
+                    response: {
+                        attestationObject: uint8arrayToBase64url(
+                            publicKeyResponse.attestationObject
+                        ),
+                        clientDataJSON: uint8arrayToBase64url(publicKeyResponse.clientDataJSON),
+                        transports: publicKeyResponse.getTransports?.() || []
                     },
-                    excludeCredentials: credentialCreateJson.publicKey.excludeCredentials?.map(
-                        (credential) => ({
-                            ...credential,
-                            id: base64urlToUint8array(credential.id as unknown as string)
-                        })
-                    ),
-                    extensions: credentialCreateJson.publicKey.extensions
+                    clientExtensionResults: publicKeyCredential.getClientExtensionResults()
                 }
-            }
-
-            const publicKeyCredential = (await navigator.credentials.create(
-                credentialCreateOptions
-            )) as PublicKeyCredential
-
-            const publicKeyResponse =
-                publicKeyCredential.response as AuthenticatorAttestationResponse
-            const encodedResult = {
-                type: publicKeyCredential.type,
-                id: publicKeyCredential.id,
-                response: {
-                    attestationObject: uint8arrayToBase64url(publicKeyResponse.attestationObject),
-                    clientDataJSON: uint8arrayToBase64url(publicKeyResponse.clientDataJSON),
-                    transports: publicKeyResponse.getTransports?.() || []
-                },
-                clientExtensionResults: publicKeyCredential.getClientExtensionResults()
-            }
-
-            await authInterceptor
-                .post('/auth/finishBioRegistration', { credential: JSON.stringify(encodedResult) })
-                .then((response) => {
-                    router.push({ name: 'configurations1' })
+
+                return authInterceptor.post('/auth/finishBioRegistration', {
+                    credential: JSON.stringify(encodedResult)
                 })
-        } catch (error) {
-            router.push({ name: 'configurations1' })
-            console.error(error)
-        }
+            })
+            .then(() => {
+                localStorage.setItem('spareStiUsername', user.value.username)
+            })
+            .catch((error) => {
+                console.error(error)
+            })
     }
 
-    const bioLogin = async (username: string) => {
-        try {
-            const request = await axios.post(`http://localhost:8080/auth/bioLogin/${username}`)
-
-            initialCheckStatus(request)
-            console.log(request)
-
-            const credentialGetJson: CredentialRequestOptions = request.data
-            console.log(credentialGetJson)
-
-            const credentialGetOptions: CredentialRequestOptions = {
-                publicKey: {
-                    ...credentialGetJson.publicKey,
-                    allowCredentials:
-                        credentialGetJson.publicKey.allowCredentials &&
-                        credentialGetJson.publicKey.allowCredentials.map((credential) => ({
-                            ...credential,
-                            id: base64urlToUint8array(credential.id as unknown as string)
-                        })),
-                    challenge: base64urlToUint8array(
-                        credentialGetJson.publicKey.challenge as unknown as string
-                    ),
-                    extensions: credentialGetJson.publicKey.extensions
+    const bioLogin = (username: string) => {
+        axios
+            .post(`http://localhost:8080/auth/bioLogin/${username}`)
+            .then((request) => {
+                initialCheckStatus(request)
+                console.log(request)
+
+                const credentialGetJson: CredentialRequestOptions = request.data
+                console.log(credentialGetJson)
+
+                const credentialGetOptions: CredentialRequestOptions = {
+                    publicKey: {
+                        ...credentialGetJson.publicKey,
+                        allowCredentials: credentialGetJson.publicKey.allowCredentials?.map(
+                            (credential) => ({
+                                ...credential,
+                                id: base64urlToUint8array(credential.id as unknown as string)
+                            })
+                        ),
+                        challenge: base64urlToUint8array(
+                            credentialGetJson.publicKey.challenge as unknown as string
+                        ),
+                        extensions: credentialGetJson.publicKey.extensions
+                    }
                 }
-            }
-
-            const publicKeyCredential = (await navigator.credentials.get(
-                credentialGetOptions
-            )) as PublicKeyCredential
-
-            // Extract response data based on the type of credential
-            const response = publicKeyCredential.response as AuthenticatorAssertionResponse
-
-            const encodedResult = {
-                type: publicKeyCredential.type,
-                id: publicKeyCredential.id,
-                response: {
-                    authenticatorData:
-                        response.authenticatorData &&
-                        uint8arrayToBase64url(response.authenticatorData),
-                    clientDataJSON:
-                        response.clientDataJSON && uint8arrayToBase64url(response.clientDataJSON),
-
-                    signature: response.signature && uint8arrayToBase64url(response.signature),
-                    userHandle: response.userHandle && uint8arrayToBase64url(response.userHandle)
-                },
-                clientExtensionResults: publicKeyCredential.getClientExtensionResults()
-            }
-            console.log(encodedResult)
-
-            await axios
-                .post(`http://localhost:8080/auth/finishBioLogin/${username}`, {
+
+                return navigator.credentials.get(
+                    credentialGetOptions
+                ) as Promise<PublicKeyCredential>
+            })
+            .then((publicKeyCredential) => {
+                const response = publicKeyCredential.response as AuthenticatorAssertionResponse
+
+                const encodedResult = {
+                    type: publicKeyCredential.type,
+                    id: publicKeyCredential.id,
+                    response: {
+                        authenticatorData:
+                            response.authenticatorData &&
+                            uint8arrayToBase64url(response.authenticatorData),
+                        clientDataJSON:
+                            response.clientDataJSON &&
+                            uint8arrayToBase64url(response.clientDataJSON),
+                        signature: response.signature && uint8arrayToBase64url(response.signature),
+                        userHandle:
+                            response.userHandle && uint8arrayToBase64url(response.userHandle)
+                    },
+                    clientExtensionResults: publicKeyCredential.getClientExtensionResults()
+                }
+                console.log(encodedResult)
+
+                return axios.post(`http://localhost:8080/auth/finishBioLogin/${username}`, {
                     credential: JSON.stringify(encodedResult)
                 })
-                .then((response) => {
-                    sessionStorage.setItem('accessToken', response.data.accessToken)
-                    localStorage.setItem('refreshToken', response.data.refreshToken)
+            })
+            .then((response) => {
+                sessionStorage.setItem('accessToken', response.data.accessToken)
 
-                    user.value.firstname = response.data.firstName
-                    user.value.lastname = response.data.lastName
-                    user.value.username = response.data.username
+                user.value.firstname = response.data.firstName
+                user.value.lastname = response.data.lastName
+                user.value.username = response.data.username
 
-                    router.push({ name: 'home' })
-                })
-                .catch((error) => {
-                    const axiosError = error as AxiosError
-                    errorMessage.value =
-                        (axiosError.response?.data as string) || 'An error occurred'
-                    console.log('hei :' + errorMessage.value)
-                })
-        } catch (error) {
-            // Handle errors
-            console.log(error)
-        }
+                router.push({ name: 'home' })
+            })
+            .catch((error) => {
+                console.error(error)
+            })
+    }
+
+    const checkIfUserConfigured = async () => {
+        await authInterceptor('/config')
+            .then((response) => {
+                console.log('User configured: ' + user.value.isConfigured)
+                user.value.isConfigured = response.data.challengeConfig != null
+            })
+            .catch(() => {
+                user.value.isConfigured = false
+            })
     }
 
     return {
+        user,
+        checkIfUserConfigured,
         register,
         login,
         logout,

src/types/profile.ts

@@ -16,4 +16,5 @@ export interface Profile {
         balance?: number
     }
     badges?: object[]
+    hasPasskey?: boolean
 }

src/types/user.ts

@@ -2,4 +2,6 @@ export interface User {
     firstname: string
     lastname: string
     username: string
+    isConfigured: boolean
+    isBiometric?: boolean
 }

src/views/AddAlternativeLogin.vue

-<template>
-    <div class="alt-login-main">
-        <h1>Alternativ innlogging</h1>
-        <div class="img-div">
-            <img src="@/assets/bioAuthTouch.png" alt="bioAuthTouch" />
-            <img src="@/assets/bioAuthFace.png" alt="bioAuthFace" />
-        </div>
-        <h2>Vil du logge på med touch eller face id?</h2>
-        <div class="btn-div">
-            <button @click="router.push('konfigurasjonSteg1')">Senere</button>
-            <button @click="userStore.bioRegister()">OK</button>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { useUserStore } from '@/stores/userStore'
-import router from '@/router'
-
-const userStore = useUserStore()
-</script>
-
-<style scoped>
-.alt-login-main {
-    max-width: 800px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.img-div {
-    display: flex;
-    justify-content: center;
-}
-
-img {
-    width: 30%;
-}
-
-img:first-child {
-    margin-right: 20px;
-}
-
-button {
-    margin: 10px;
-    width: 100px;
-    height: 40px;
-}
-</style>

src/views/BiometricLoginView.vue

+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import router from '@/router'
+import { useUserStore } from '@/stores/userStore'
+
+const route = useRoute()
+const username = route.params.username as string
+
+const removeBioCredential = () => {
+    localStorage.removeItem('spareStiUsername')
+    router.push({ name: 'login' })
+}
+
+const bioLogin = () => {
+    useUserStore().bioLogin(username)
+}
+</script>
+
+<template>
+    <div class="flex flex-col items-center h-screen gap-5 my-10">
+        <h1>Hei {{ username }}, velkommen tilbake</h1>
+        <button @click="bioLogin">Biometrisk login</button>
+        <p>Ikke deg? Eller funker ikke biometrisk innlogging?</p>
+        <button @click="removeBioCredential">Logg inn med brukernavn og passord</button>
+    </div>
+</template>
+
+<style scoped></style>