feat(config): user can edit their configuration after registration

src/components/ModalComponent.vue

@@ -7,7 +7,7 @@
             <h2 class="title font-bold mb-4">{{ title }}</h2>
             <p class="message mb-4">{{ message }}</p>
 
-            <slot name="input"></slot>
+            <slot />
 
             <div class="buttons flex flex-col justify-center items-center gap-3 mt-3 w-full">
                 <slot name="buttons"></slot>
@@ -20,6 +20,10 @@
 defineProps({
     title: String,
     message: String,
-    isModalOpen: Boolean
+    isModalOpen: {
+        type: Boolean,
+        default: true,
+        required: false
+    }
 })
 </script>

src/router/index.ts

@@ -44,6 +44,11 @@ const router = createRouter({
             name: 'edit-profile',
             component: () => import('@/views/ManageProfileView.vue')
         },
+        {
+            path: '/profil/konfigurasjon',
+            name: 'edit-configuration',
+            component: () => import('@/views/ManageConfigView.vue')
+        },
         {
             path: '/sparemaal',
             name: 'goals',

src/stores/userStore.ts

@@ -52,8 +52,8 @@ export const useUserStore = defineStore('user', () => {
             })
     }
 
-    const login = async (username: string, password: string) => {
-        await axios
+    const login = (username: string, password: string) => {
+        axios
             .post(`http://localhost:8080/auth/login`, {
                 username: username,
                 password: password
@@ -65,14 +65,17 @@ export const useUserStore = defineStore('user', () => {
                 user.value.lastname = response.data.lastName
                 user.value.username = response.data.username
 
-                authInterceptor('/profile').then((profileResponse) => {
-                    if (profileResponse.data.hasPasskey === true) {
-                        localStorage.setItem('spareStiUsername', username)
-                    }
-                })
-
-                checkIfUserConfigured()
-
+                return authInterceptor('/profile')
+            })
+            .then((profileResponse) => {
+                if (profileResponse.data.hasPasskey === true) {
+                    localStorage.setItem('spareStiUsername', username)
+                } else {
+                    localStorage.removeItem('spareStiUsername')
+                }
+                return checkIfUserConfigured()
+            })
+            .then(() => {
                 user.value.isConfigured
                     ? router.push({ name: 'home' })
                     : router.push({ name: 'configure-biometric' })

src/types/challengeConfig.ts

+export interface ChallengeConfig {
+    experience: string
+    motivation: string
+    challengeTypeConfigs: {
+        type: string
+        generalAmount: number | null
+        specificAmount: number | null
+    }[]
+}

src/views/ManageConfigView.vue

+<script lang="ts" setup>
+import authInterceptor from '@/services/authInterceptor'
+import CardTemplate from '@/components/CardTemplate.vue'
+import type { ChallengeConfig } from '@/types/challengeConfig'
+import { onMounted, ref } from 'vue'
+import ModalComponent from '@/components/ModalComponent.vue'
+import router from '@/router'
+
+const configuration = ref<ChallengeConfig>({
+    motivation: '',
+    experience: '',
+    challengeTypeConfigs: [
+        {
+            type: 'Kaffe',
+            generalAmount: 100,
+            specificAmount: 10
+        }
+    ]
+})
+
+const error = ref<string | null>(null)
+
+const deleteChallengeType = (type: string) => {
+    if (configuration.value.challengeTypeConfigs) {
+        configuration.value.challengeTypeConfigs = configuration.value.challengeTypeConfigs.filter(
+            (item) => item.type !== type
+        )
+    }
+}
+
+const createChallengeType = () => {
+    configuration.value.challengeTypeConfigs?.push({
+        type: '',
+        specificAmount: null,
+        generalAmount: null
+    })
+}
+
+const validateAndSave = () => {
+    if (!configuration.value.motivation) {
+        return (error.value = 'Du må velge hvor store vaneendringer du er villig til å gjøre')
+    }
+
+    if (!configuration.value.experience) {
+        return (error.value = 'Du må velge hvor kjent du er med sparing fra før av')
+    }
+
+    if (configuration.value.challengeTypeConfigs.length == 0) {
+        return (error.value = 'Du må legge til minst én ting du bruker mye penger på')
+    }
+
+    if (
+        configuration.value.challengeTypeConfigs.some(
+            (item) => !item.type || !item.specificAmount || !item.generalAmount
+        )
+    ) {
+        return (error.value = 'Du må fylle ut alle feltene for ting du bruker mye penger på')
+    }
+
+    if (
+        configuration.value.challengeTypeConfigs.some(
+            (item) =>
+                (item.specificAmount && item.specificAmount < 0) ||
+                (item.generalAmount && item.generalAmount < 0)
+        )
+    ) {
+        return (error.value = 'Prisene kan ikke være negative')
+    }
+
+    saveConfiguration()
+}
+
+const saveConfiguration = () => {
+    authInterceptor
+        .put('/config/challenge', configuration.value)
+        .then(() => {
+            router.push({ name: 'profile' })
+        })
+        .catch((error) => {
+            error.value = error.response.data.message
+        })
+}
+
+onMounted(() => {
+    authInterceptor('/config/challenge')
+        .then((response) => {
+            configuration.value = response.data
+            console.log(configuration.value)
+        })
+        .catch((error) => {
+            return console.log(error)
+        })
+})
+</script>
+
+<template>
+    <div class="w-full flex px-10 justify-center">
+        <div class="flex flex-col justify-center items-center max-w-screen-xl gap-3">
+            <h1>Rediger kofigurasjonen</h1>
+
+            <h2 class="font-thin">Hvor store vaneedringer er du villig til å gjøre?</h2>
+            <div v-if="configuration" class="flex flex-row gap-5">
+                <CardTemplate
+                    :class="{ 'bg-green-500': configuration.motivation === 'VERY_LOW' }"
+                    class="cursor-pointer p-5"
+                    @click="configuration.motivation = 'VERY_LOW'"
+                >
+                    <p class="text-2xl">Litt</p>
+                </CardTemplate>
+                <CardTemplate
+                    :class="{ 'bg-green-500': configuration.motivation === 'MEDIUM' }"
+                    class="cursor-pointer p-5"
+                    @click="configuration.motivation = 'MEDIUM'"
+                >
+                    <p class="text-2xl">Passe</p>
+                </CardTemplate>
+                <CardTemplate
+                    :class="{ 'bg-green-500': configuration.motivation === 'VERY_HIGH' }"
+                    class="cursor-pointer p-5"
+                    @click="configuration.motivation = 'VERY_HIGH'"
+                >
+                    <p class="text-2xl">Store</p>
+                </CardTemplate>
+            </div>
+
+            <h2 class="font-thin">Hvor kjent er du med sparing fra før av?</h2>
+            <div v-if="configuration" class="flex flex-row gap-5">
+                <CardTemplate
+                    :class="{ 'bg-green-500': configuration.experience === 'VERY_LOW' }"
+                    class="cursor-pointer p-5"
+                    @click="configuration.experience = 'VERY_LOW'"
+                >
+                    <p class="text-2xl">Litt kjent</p>
+                </CardTemplate>
+                <CardTemplate
+                    :class="{ 'bg-green-500': configuration.experience === 'MEDIUM' }"
+                    class="cursor-pointer p-5"
+                    @click="configuration.experience = 'MEDIUM'"
+                >
+                    <p class="text-2xl">Noe kjent</p>
+                </CardTemplate>
+                <CardTemplate
+                    :class="{ 'bg-green-500': configuration.experience === 'VERY_HIGH' }"
+                    class="cursor-pointer p-5"
+                    @click="configuration.experience = 'VERY_HIGH'"
+                >
+                    <p class="text-2xl">Godt kjent</p>
+                </CardTemplate>
+            </div>
+
+            <h2 class="font-thin my-0">Hva bruker du mye penger på?</h2>
+            <div class="flex flex-col gap-4 p-4 items-center">
+                <CardTemplate
+                    v-for="(item, index) in configuration.challengeTypeConfigs"
+                    :key="index"
+                    class="flex flex-row flex-wrap justify-center gap-5 border-4 p-3"
+                >
+                    <input v-model="item.type" placeholder="Type" type="text" />
+                    <input v-model="item.specificAmount" placeholder="Pris per uke" type="number" />
+                    <input v-model="item.generalAmount" placeholder="Generell pris" type="number" />
+                    <button
+                        class="cursor-pointer bg-red-500 rounded-full w-min items-center"
+                        @click="deleteChallengeType(item.type)"
+                        v-text="'x'"
+                    />
+                </CardTemplate>
+                <button class="secondary" @click="createChallengeType" v-text="'+'" />
+            </div>
+
+            <div class="flex flex-row justify-center gap-5">
+                <button class="secondary" @click="router.back()">Avbryt</button>
+                <button class="primary" @click="validateAndSave">Lagre</button>
+            </div>
+        </div>
+
+        <ModalComponent v-if="error">
+            <p class="my-4" v-text="error" />
+            <button @click="error = null">Lukk</button>
+        </ModalComponent>
+    </div>
+</template>
+
+<style scoped></style>

src/views/ViewProfileView.vue

@@ -99,6 +99,10 @@ const openInteractiveSpare = () => {
                 </CardTemplate>
 
                 <button @click="router.push({ name: 'edit-profile' })" v-text="'Rediger bruker'" />
+                <button
+                    @click="router.push({ name: 'edit-configuration' })"
+                    v-text="'Rediger konfigurasjon'"
+                />
                 <button @click="updateBiometrics">
                     {{ profile?.hasPasskey ? 'Endre biometri' : 'Legg til biometri' }}
                 </button>