Merge branch 'dev' of...

Merge branch 'dev' of https://gitlab.stud.idi.ntnu.no/idatt2106-gruppe-2/idatt2106_2024_02_frontend into enhancement/43/fix-confirmation-on-sent-email

src/App.vue

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

src/components/ModalEditAvatar.vue

+<template>
+    <button @click="openModal" class="text-nowrap">Endre avatar</button>
+    <div
+        v-if="isModalOpen"
+        class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+    >
+        <div class="bg-white p-6 rounded-lg shadow-lg max-w-[80vh] h-auto w-full text-center">
+            <h2 class="title">Endre avatar</h2>
+            <div class="avatar-container flex flex-row justify-between items-center my-8">
+                <button @click="cycleArray('prev')">◀</button>
+                <div class="flex flex-row items-center justify-around">
+                    <img :src="previousAvatar" alt="avatar" class="avatar h-16 w-16" />
+                    <div class="border-4 rounded-full border-green-600 p-8 mx-4">
+                        <img :src="currentAvatar" alt="avatar" class="avatar h-40 w-40" />
+                    </div>
+                    <img :src="nextAvatar" alt="avatar" class="avatar h-16 w-16" />
+                </div>
+                <button @click="cycleArray('next')">▶</button>
+            </div>
+            <button @click="saveAvatar" class="save-button">Lagre</button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const isModalOpen = ref(false)
+const avatars = [
+    'src/assets/coffee.png',
+    'src/assets/head.png',
+    'src/assets/nose.png',
+    'src/assets/penger.png',
+    'src/assets/pig.png'
+]
+let currentAvatarIndex = 0
+
+const openModal = () => {
+    isModalOpen.value = !isModalOpen.value
+}
+
+const nextAvatar = ref(avatars[(currentAvatarIndex + 1) % avatars.length])
+const currentAvatar = ref(avatars[currentAvatarIndex])
+const previousAvatar = ref(avatars[(currentAvatarIndex - 1 + avatars.length) % avatars.length])
+
+const cycleArray = (direction: string) => {
+    if (direction === 'prev') {
+        currentAvatarIndex = (currentAvatarIndex - 1 + avatars.length) % avatars.length
+        console.log(currentAvatarIndex)
+        currentAvatar.value = avatars[currentAvatarIndex]
+        previousAvatar.value = avatars[(currentAvatarIndex - 1 + avatars.length) % avatars.length]
+        nextAvatar.value = avatars[(currentAvatarIndex + 1) % avatars.length]
+    } else {
+        currentAvatarIndex = (currentAvatarIndex + 1) % avatars.length
+        currentAvatar.value = avatars[currentAvatarIndex]
+        previousAvatar.value = avatars[(currentAvatarIndex - 1 + avatars.length) % avatars.length]
+        nextAvatar.value = avatars[(currentAvatarIndex + 1) % avatars.length]
+    }
+}
+
+const saveAvatar = () => {
+    localStorage.setItem('avatar', currentAvatar.value)
+    isModalOpen.value = false
+}
+</script>

src/router/index.ts

@@ -98,6 +98,11 @@ const router = createRouter({
             name: 'configurations5',
             component: () => import('@/views/ConfigSpendingItemsTotalAmountView.vue')
         },
+        {
+            path: '/konfigurasjonSteg6',
+            name: 'configurations6',
+            component: () => import('@/views/ConfigAccountNumberView.vue')
+        },
         {
             path: '/forsteSparemaal',
             name: 'firstSavingGoal',

src/stores/accountStore.ts

+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import authInterceptor from '@/services/authInterceptor'
+import axios, { 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 authInterceptor from '@/services/authInterceptor'
-import axios from 'axios'
+import axios, { AxiosError } from 'axios'
 
 export const useUserConfigStore = defineStore('userConfig', {
     state: () => ({
@@ -11,7 +12,8 @@ export const useUserConfigStore = defineStore('userConfig', {
             type: string
             specificAmount: number
             generalAmount: number
-        }[]
+        }[],
+        errorMessage: ref<string>('')
     }),
     actions: {
         setExperience(value: string) {
@@ -23,23 +25,28 @@ export const useUserConfigStore = defineStore('userConfig', {
         addChallengeTypeConfig(type: string, specificAmount: number, generalAmount: number) {
             this.challengeTypeConfigs.push({ type, specificAmount, generalAmount })
         },
-        async postUserConfig() {
+        postUserConfig() {
             const payload = {
                 experience: this.experience,
                 motivation: this.motivation,
                 challengeTypeConfigs: Array.from(this.challengeTypeConfigs)
             }
 
-            try {
-                const response = await authInterceptor.post('/config/challenge', payload)
-                console.log('Success:', response.data)
-            } catch (error: unknown) {
-                if (axios.isAxiosError(error)) {
-                    console.error('Axios error:', error.response?.data || error.message)
-                } else {
-                    console.error('An unexpected error occurred:', error)
-                }
-            }
+            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)
+                })
         }
     }
 })

src/views/ConfigAccountNumberView.vue

+<template>
+    <div
+        class="flex flex-col items-center justify-center min-h-screen md:pt-10 pt-4 pb-24 text-center"
+    >
+        <h1 class="mb-8 lg:mb-12 text-4xl font-bold">
+            Legg til kontonummer for sparekonto og brukskonto
+        </h1>
+        <div
+            class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
+        >
+            <div class="w-full mb-4">
+                <label for="savingsAccount" class="block text-lg font-bold mb-2">Sparekonto</label>
+                <input
+                    id="savingsAccount"
+                    v-model="savingsAccount"
+                    @input="restrictToNumbers($event as InputEvent, 'savings')"
+                    @focus="removeFormatting('savings')"
+                    @blur="applyFormatting('savings')"
+                    class="w-full h-11 px-3 rounded-md text-xl focus:outline-none transition-colors border-2 border-gray-300"
+                    type="text"
+                    placeholder="Skriv inn ditt kontonummer..."
+                />
+            </div>
+            <div class="w-full mb-4">
+                <label for="spendingAccount" class="block text-lg font-bold mb-2">Brukskonto</label>
+                <input
+                    id="spendingAccount"
+                    v-model="spendingAccount"
+                    @input="restrictToNumbers($event as InputEvent, 'spending')"
+                    @focus="removeFormatting('spending')"
+                    @blur="applyFormatting('spending')"
+                    class="w-full h-11 px-3 rounded-md text-xl focus:outline-none transition-colors border-2 border-gray-300"
+                    type="text"
+                    placeholder="Skriv inn ditt kontonummer..."
+                />
+            </div>
+        </div>
+        <div class="absolute bottom-36 right-2">
+            <ContinueButtonComponent
+                @click="onButtonClick"
+                :disabled="!isFormValid"
+                class="px-10 py-3 text-2xl font-bold mb-4 mr-2"
+            ></ContinueButtonComponent>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useAccountStore } from '@/stores/accountStore'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+
+const MAX_DIGITS = 11
+const accountStore = useAccountStore()
+
+const spendingAccount = ref('')
+const savingsAccount = ref('')
+
+const isFormValid = computed(() => {
+    return (
+        spendingAccount.value.replace(/\./g, '').length === MAX_DIGITS &&
+        savingsAccount.value.replace(/\./g, '').length === MAX_DIGITS
+    )
+})
+
+async function onButtonClick() {
+    const savingAccountNumber = savingsAccount.value.replace(/\./g, '')
+    const spendingAccountNumber = spendingAccount.value.replace(/\./g, '')
+
+    await accountStore.postAccount('SAVING', savingAccountNumber, 0)
+
+    await accountStore.postAccount('SPENDING', spendingAccountNumber, 0)
+
+    await router.push({ name: 'home' })
+}
+
+function restrictToNumbers(event: InputEvent, type: string) {
+    const inputValue = (event.target as HTMLInputElement)?.value
+    if (inputValue !== undefined) {
+        const sanitizedValue = inputValue.replace(/\D/g, '')
+        const truncatedValue = sanitizedValue.slice(0, MAX_DIGITS)
+        if (type === 'spending') {
+            spendingAccount.value = truncatedValue
+        } else {
+            savingsAccount.value = truncatedValue
+        }
+    }
+}
+
+function applyFormatting(type: string) {
+    if (type === 'spending') {
+        spendingAccount.value = formatAccount(spendingAccount.value)
+    } else {
+        savingsAccount.value = formatAccount(savingsAccount.value)
+    }
+}
+
+function removeFormatting(type: string) {
+    if (type === 'spending') {
+        spendingAccount.value = removeFormat(spendingAccount.value)
+    } else {
+        savingsAccount.value = removeFormat(savingsAccount.value)
+    }
+}
+
+function formatAccount(value: string): string {
+    return value.replace(/\D/g, '').replace(/^(.{4})(.{2})(.*)$/, '$1.$2.$3')
+}
+
+function removeFormat(value: string): string {
+    return value.replace(/\./g, '')
+}
+</script>

src/views/ConfigFamiliarWithSavingsView.vue

 <template>
     <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
-        <h1 class="mb-16 text-4xl font-bold lg:mb-20">Hvor kjent er du med sparing fra før?</h1>
-        <div class="grid grid-cols-1 gap-14 mb-20 md:grid-cols-3">
+        <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
+            Hvor kjent er du med sparing fra før?
+        </h1>
+        <div class="grid grid-cols-1 gap-8 mb-16 sm:gap-14 sm:mb-20 md:grid-cols-3">
             <div
                 :class="{
                     'border-[var(--green)] border-4': selectedOption === 'litt',
@@ -39,7 +41,7 @@
         <ContinueButtonComponent
             :disabled="selectedOption === null"
             @click="onButtonClick"
-            class="px-10 py-3 text-2xl self-end mb-4 mt-0"
+            class="px-10 py-3 text-2xl self-end"
         ></ContinueButtonComponent>
     </div>
 </template>
@@ -67,8 +69,6 @@ const selectOption = (option: string) => {
         case 'godt':
             experienceValue = 'VERY_HIGH'
             break
-        default:
-            experienceValue = 'VERY_LOW'
     }
 
     userConfigStore.setExperience(experienceValue)
@@ -76,7 +76,7 @@ const selectOption = (option: string) => {
 
 const onButtonClick = () => {
     if (selectedOption.value) {
-        router.push('/konfigurasjonSteg3')
+        router.push({ name: 'configurations3' })
     } else {
         console.error('No option selected')
     }

src/views/ConfigHabitChangeView.vue

@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
 import router from '@/router'
 import { useUserConfigStore } from '@/stores/userConfigStore'
@@ -69,8 +69,6 @@ const selectOption = (option: string) => {
         case 'store':
             motivationValue = 'VERY_HIGH'
             break
-        default:
-            motivationValue = 'VERY_LOW'
     }
 
     userConfigStore.setMotivation(motivationValue)
@@ -78,7 +76,7 @@ const selectOption = (option: string) => {
 
 const onButtonClick = () => {
     if (selectedOption.value) {
-        router.push('/konfigurasjonSteg2')
+        router.push({ name: 'configurations2' })
     } else {
         console.error('No option selected')
     }

src/views/ConfigSpendingItemsAmountView.vue

 <template>
     <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center relative">
-        <h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du per kjøp på ...</h1>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
-            <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
+        <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
+            Hvor mye bruker du per kjøp på ...
+        </h1>
+        <div class="w-full flex justify-center">
+            <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
                 <div
-                    v-for="(option, index) in options.slice(0, 6)"
-                    :key="`option-${index}`"
-                    class="w-full my-4"
+                    v-if="showFirstBox"
+                    class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+                    :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+                    :style="{ minWidth: '400px', maxWidth: '400px' }"
                 >
-                    <div class="flex justify-between items-center">
-                        <p class="text-xl font-bold mr-4">{{ option.type }}</p>
-                        <div class="flex items-center w-2/3">
-                            <input
-                                v-model="amounts[index]"
-                                @input="filterAmount(index, $event)"
-                                class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
-                                :class="{
-                                    'border-gray-300': !amounts[index],
-                                    'border-[var(--green)]': amounts[index]
-                                }"
-                            />
-                            <p class="text-xl font-bold ml-2">kr</p>
+                    <div
+                        v-for="(option, index) in firstBoxOptions"
+                        :key="`first-option-${index}`"
+                        class="w-full my-4"
+                    >
+                        <div class="flex justify-between items-center">
+                            <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+                            <div class="flex items-center w-2/3">
+                                <input
+                                    v-model="amounts[index]"
+                                    @input="filterAmount(index, $event)"
+                                    class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+                                    :class="{
+                                        'border-gray-300': !amounts[index],
+                                        'border-[var(--green)]': amounts[index]
+                                    }"
+                                />
+                                <p class="text-xl font-bold ml-2">kr</p>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
                 <div
-                    v-for="(option, index) in options.slice(6, 12)"
-                    :key="`option-${index}`"
-                    class="w-full my-4"
+                    v-if="showSecondBox"
+                    class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+                    :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+                    :style="{ minWidth: '400px', maxWidth: '400px' }"
                 >
-                    <div class="flex justify-between items-center">
-                        <p class="text-xl font-bold mr-4">{{ option.type }}</p>
-                        <div class="flex items-center w-2/3">
-                            <input
-                                v-model="amounts[index + 6]"
-                                @input="filterAmount(index + 6, $event)"
-                                class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
-                                :class="{
-                                    'border-gray-300': !amounts[index + 6],
-                                    'border-[var(--green)]': amounts[index + 6]
-                                }"
-                            />
-                            <p class="text-xl font-bold ml-2">kr</p>
+                    <div
+                        v-for="(option, index) in secondBoxOptions"
+                        :key="`second-option-${index}`"
+                        class="w-full my-4"
+                    >
+                        <div class="flex justify-between items-center">
+                            <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+                            <div class="flex items-center w-2/3">
+                                <input
+                                    v-model="amounts[index + firstBoxOptions.length]"
+                                    @input="filterAmount(index + firstBoxOptions.length, $event)"
+                                    class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+                                    :class="{
+                                        'border-gray-300': !amounts[index + firstBoxOptions.length],
+                                        'border-[var(--green)]':
+                                            amounts[index + firstBoxOptions.length]
+                                    }"
+                                />
+                                <p class="text-xl font-bold ml-2">kr</p>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="absolute bottom-36 right-4">
+        <div class="w-full text-right">
             <ContinueButtonComponent
                 @click="onButtonClick"
                 :disabled="!isAllAmountsFilled"
-                class="px-10 py-3 text-2xl font-bold mb-4"
+                class="px-10 py-3 text-2xl font-bold mb-20 mt-10 sm:mb-12 sm:mt-10"
             ></ContinueButtonComponent>
         </div>
     </div>
@@ -77,7 +92,7 @@ const onButtonClick = () => {
         userConfigStore.challengeTypeConfigs[index].specificAmount =
             parseFloat(amounts.value[index]) || 0
     })
-    router.push('/konfigurasjonSteg5')
+    router.push({ name: 'configurations5' })
 }
 
 const filterAmount = (index: number, event: Event) => {
@@ -86,4 +101,10 @@ const filterAmount = (index: number, event: Event) => {
     filteredValue = filteredValue.replace(/(,.*?),/g, '$1').replace(/,+/g, ',')
     amounts.value[index] = filteredValue
 }
+
+const firstBoxOptions = computed(() => options.value.slice(0, 6))
+const secondBoxOptions = computed(() => (options.value.length > 6 ? options.value.slice(6) : []))
+
+const showFirstBox = computed(() => options.value.length > 0)
+const showSecondBox = computed(() => options.value.length > 6)
 </script>

src/views/ConfigSpendingItemsTotalAmountView.vue

 <template>
-    <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
-        <h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du totalt per uke på ...</h1>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
-            <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
+    <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center relative">
+        <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">
+            Hvor mye bruker du per uke på ...
+        </h1>
+        <div class="w-full flex justify-center">
+            <div :class="[showSecondBox ? 'md:grid md:grid-cols-2 md:gap-4 sm:gap-8 mb-6' : '']">
                 <div
-                    v-for="(option, index) in options.slice(0, 6)"
-                    :key="`option-${index}`"
-                    class="w-full my-4"
+                    v-if="showFirstBox"
+                    class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+                    :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+                    :style="{ minWidth: '400px', maxWidth: '400px' }"
                 >
-                    <div class="flex justify-between items-center">
-                        <p class="text-xl font-bold mr-4">{{ option.type }}</p>
-                        <div class="flex items-center w-2/3">
-                            <input
-                                type="text"
-                                v-model="amounts[index]"
-                                @input="($event) => filterAmount(index, $event)"
-                                class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
-                                :class="{
-                                    'border-gray-300': !amounts[index],
-                                    'border-[var(--green)]': amounts[index]
-                                }"
-                            />
-                            <p class="text-xl font-bold ml-2">kr</p>
+                    <div
+                        v-for="(option, index) in firstBoxOptions"
+                        :key="`first-option-${index}`"
+                        class="w-full my-4"
+                    >
+                        <div class="flex justify-between items-center">
+                            <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+                            <div class="flex items-center w-2/3">
+                                <input
+                                    v-model="amounts[index]"
+                                    @input="filterAmount(index, $event)"
+                                    class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+                                    :class="{
+                                        'border-gray-300': !amounts[index],
+                                        'border-[var(--green)]': amounts[index]
+                                    }"
+                                />
+                                <p class="text-xl font-bold ml-2">kr</p>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
                 <div
-                    v-for="(option, index) in options.slice(6, 12)"
-                    :key="`option-${index}`"
-                    class="w-full my-4"
+                    v-if="showSecondBox"
+                    class="flex flex-col items-center bg-white rounded-lg p-4 sm:p-8 shadow-lg"
+                    :class="showSecondBox ? 'w-full' : 'w-full md:w-1/2 mx-auto'"
+                    :style="{ minWidth: '400px', maxWidth: '400px' }"
                 >
-                    <div class="flex justify-between items-center">
-                        <p class="text-xl font-bold mr-4">{{ option.type }}</p>
-                        <div class="flex items-center w-2/3">
-                            <input
-                                type="text"
-                                v-model="amounts[index + 6]"
-                                @input="($event) => filterAmount(index + 6, $event)"
-                                class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
-                                :class="{
-                                    'border-gray-300': !amounts[index + 6],
-                                    'border-[var(--green)]': amounts[index + 6]
-                                }"
-                            />
-                            <p class="text-xl font-bold ml-2">kr</p>
+                    <div
+                        v-for="(option, index) in secondBoxOptions"
+                        :key="`second-option-${index}`"
+                        class="w-full my-4"
+                    >
+                        <div class="flex justify-between items-center">
+                            <p class="text-xl font-bold mr-4">{{ option.type }}</p>
+                            <div class="flex items-center w-2/3">
+                                <input
+                                    v-model="amounts[index + firstBoxOptions.length]"
+                                    @input="filterAmount(index + firstBoxOptions.length, $event)"
+                                    class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
+                                    :class="{
+                                        'border-gray-300': !amounts[index + firstBoxOptions.length],
+                                        'border-[var(--green)]':
+                                            amounts[index + firstBoxOptions.length]
+                                    }"
+                                />
+                                <p class="text-xl font-bold ml-2">kr</p>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="absolute bottom-24 right-4">
+        <div class="w-full text-right">
             <ContinueButtonComponent
                 @click="onButtonClick"
                 :disabled="!isAllAmountsFilled"
-                class="px-10 py-3 text-2xl font-bold mb-4"
+                class="px-10 py-3 text-2xl font-bold mb-20 mt-10 sm:mb-12 sm:mt-10"
             ></ContinueButtonComponent>
         </div>
     </div>
@@ -80,8 +93,8 @@ const onButtonClick = async () => {
             parseFloat(amounts.value[index]) || 0
     })
 
-    await userConfigStore.postUserConfig()
-    router.push('/hjem')
+    userConfigStore.postUserConfig()
+    await router.push({ name: 'configurations6' })
 }
 
 const filterAmount = (index: number, event: Event) => {
@@ -90,4 +103,10 @@ const filterAmount = (index: number, event: Event) => {
     filteredValue = filteredValue.replace(/(,.*?),/g, '$1').replace(/,+/g, ',')
     amounts.value[index] = filteredValue
 }
+
+const firstBoxOptions = computed(() => options.value.slice(0, 6))
+const secondBoxOptions = computed(() => (options.value.length > 6 ? options.value.slice(6) : []))
+
+const showFirstBox = computed(() => options.value.length > 0)
+const showSecondBox = computed(() => options.value.length > 6)
 </script>

src/views/ConfigSpendingItemsView.vue

 <template>
     <div class="flex flex-col items-center justify-center min-h-screen text-center">
-        <h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hva bruker du mye penger på?</h1>
+        <h1 class="mb-8 text-2xl font-bold sm:mb-16 sm:text-4xl">Hva bruker du mye penger på?</h1>
         <div class="flex flex-wrap justify-center gap-8 mb-8">
             <div
-                class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
+                class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
             >
                 <div
                     v-for="buttonText in [
@@ -32,7 +32,7 @@
                 </div>
             </div>
             <div
-                class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
+                class="flex flex-col items-center justify-center bg-white rounded-lg sm:p-8 shadow-lg sm:w-full md:w-[45%]"
             >
                 <div
                     v-for="(option, index) in customOptions"
@@ -41,18 +41,23 @@
                 >
                     <input
                         v-model="customOptions[index]"
-                        class="w-full md:w-64 h-11 px-3 rounded-md text-xl focus:outline-none transition-colors border-2 border-gray-300"
+                        :class="[
+                            'w-full md:w-64 h-11 px-3 rounded-md text-xl focus:outline-none transition-colors border-2',
+                            customOptions[index].trim() !== ''
+                                ? 'border-[var(--green)]'
+                                : 'border-gray-300'
+                        ]"
                         type="text"
                         :placeholder="'Annet ' + ' ...'"
                     />
                 </div>
             </div>
         </div>
-        <div class="w-full text-right mb-0 mt-0" style="position: relative; top: -92px; right: 8px">
+        <div class="w-full text-right">
             <ContinueButtonComponent
                 @click="onButtonClick"
                 :disabled="!isFormValid"
-                class="px-10 py-3 text-2xl font-bold mb-4 mr-2"
+                class="px-10 py-3 text-2xl font-bold mt-36 mr-4 sm:mb-12 sm:mt-10"
             ></ContinueButtonComponent>
         </div>
     </div>
@@ -68,24 +73,27 @@ const userConfigStore = useUserConfigStore()
 const selectedOptions = ref<string[]>([])
 const customOptions = ref(['', '', '', '', '', ''])
 
-const toggleOption = (option: string, isCustom: boolean = false) => {
-    if (!isCustom) {
-        const index = selectedOptions.value.indexOf(option)
-        if (index === -1) {
-            selectedOptions.value.push(option)
-        } else {
-            selectedOptions.value.splice(index, 1)
-        }
+const toggleOption = (option: string) => {
+    const index = selectedOptions.value.indexOf(option)
+    if (index === -1) {
+        selectedOptions.value.push(option)
+    } else {
+        selectedOptions.value.splice(index, 1)
     }
 }
 
 const isFormValid = computed(() => {
     const predefinedSelected = selectedOptions.value.length > 0
     const customFilled = customOptions.value.some((option) => option.trim() !== '')
-    return predefinedSelected || (customFilled && predefinedSelected)
+    return predefinedSelected || customFilled
 })
 
 const onButtonClick = () => {
+    if (!isFormValid.value) {
+        console.error('Form is not valid')
+        return
+    }
+
     const predefinedChallengeTypes = selectedOptions.value.map((option) => ({
         type: option,
         specificAmount: 0,
@@ -101,7 +109,6 @@ const onButtonClick = () => {
         }))
 
     userConfigStore.challengeTypeConfigs = [...predefinedChallengeTypes, ...customChallengeTypes]
-    console.log('Selected Challenge Types:', userConfigStore.challengeTypeConfigs)
-    router.push('/konfigurasjonSteg4')
+    router.push({ name: 'configurations4' })
 }
 </script>

src/views/ResetPasswordView.vue

@@ -91,16 +91,11 @@ const canResetPassword = computed(() => {
 const resetPassword = async () => {
     isModalOpen.value = true
 
-    const resetPasswordDTO = {
-        resetID: resetID.value,
-        userID: userID.value,
-        newPassword: newPassword.value
-    }
     try {
         await axios.post('http://localhost:8080/forgotPassword/resetPassword', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(resetPasswordDTO)
+            resetID: resetID.value,
+            userID: userID.value,
+            newPassword: newPassword.value
         })
     } catch (error) {
         const err = error as Error