Merge branch 'refs/heads/dev' into feat/login/implement-login-functionality

# Conflicts:
#	src/assets/base.css

src/App.vue

@@ -8,6 +8,7 @@ import { RouterLink, RouterView } from 'vue-router'
         <RouterLink to="/sparemaal">Sparemål</RouterLink>
         <RouterLink to="/spareutfordringer">Spareutfordringer</RouterLink>
         <RouterLink to="/profil">Profil</RouterLink>
+        <RouterLink to="/konfigurasjonSteg1">Konfigurasjon</RouterLink>
     </nav>
 
     <main>

src/assets/base.css

@@ -4,6 +4,7 @@
     --black: #363739;
     --white: #ffffff;
     --grey: #cbcbcb;
+    --green: #95e35d;
 
     --bright: #f7da7c;
 

src/components/ContinueButtonComponent.vue

+<template>
+    <button class="continue-button" @click="onClick">Fortsett</button>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'ContinueButtonComponent',
+    emits: {
+        click: (event: Event) => true
+    },
+    setup(props, { emit }) {
+        const onClick = (event: Event) => {
+            emit('click', event)
+        }
+
+        return {
+            onClick
+        }
+    }
+})
+</script>
+
+<style>
+.continue-button {
+    @apply p-3 px-20 text-lg rounded-lg cursor-pointer transition-all font-bold
+    text-black bg-[var(--green)] hover:brightness-90 active:brightness-75;
+}
+</style>

src/router/index.ts

@@ -33,6 +33,26 @@ const router = createRouter({
             path: '/:pathMatch(.*)*',
             name: 'not-found',
             component: () => import('../views/NotFoundView.vue')
+        },
+        {
+            path: '/konfigurasjonSteg1',
+            name: 'configurations1',
+            component: () => import('../views/ConfigHabitChangeView.vue')
+        },
+        {
+            path: '/konfigurasjonSteg2',
+            name: 'configurations2',
+            component: () => import('../views/ConfigFamiliarWithSavingsView.vue')
+        },
+        {
+            path: '/konfigurasjonSteg3',
+            name: 'configurations3',
+            component: () => import('../views/ConfigSpendingItemsView.vue')
+        },
+        {
+            path: '/konfigurasjonSteg4',
+            name: 'configurations4',
+            component: () => import('../views/ConfigSpendingItemsAmountView.vue')
         }
     ]
 })

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">
+            <div
+                :class="{
+                    'border-[var(--green)] border-4': selectedOption === 'litt',
+                    'border-gray-300 border-2': selectedOption !== 'litt'
+                }"
+                class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]-500"
+                @click="selectOption('litt')"
+            >
+                <img src="@/assets/nose.png" alt="Litt kjent" class="h-16 md:h-20" />
+                <p class="mt-2 text-lg font-bold">Litt kjent</p>
+            </div>
+            <div
+                :class="{
+                    'border-[var(--green)] border-4': selectedOption === 'noe',
+                    'border-gray-300 border-2': selectedOption !== 'noe'
+                }"
+                class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+                @click="selectOption('noe')"
+            >
+                <img src="@/assets/head.png" alt="Noe kjent" class="h-16 md:h-20" />
+                <p class="mt-2 text-lg font-bold">Noe kjent</p>
+            </div>
+            <div
+                :class="{
+                    'border-[var(--green)] border-4': selectedOption === 'godt',
+                    'border-gray-300 border-2': selectedOption !== 'godt'
+                }"
+                class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+                @click="selectOption('godt')"
+            >
+                <img src="@/assets/pig.png" alt="Godt kjent" class="h-16 md:h-20" />
+                <p class="mt-2 text-lg font-bold">Godt kjent</p>
+            </div>
+        </div>
+        <ContinueButtonComponent
+            @click="onButtonClick"
+            class="px-10 py-3 text-2xl font-bold self-end"
+        ></ContinueButtonComponent>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+
+const selectedOption = ref<string | null>(null)
+
+const selectOption = (option: string) => {
+    selectedOption.value = option
+}
+
+const onButtonClick = () => {
+    router.push('/konfigurasjonSteg3')
+}
+</script>

src/views/ConfigHabitChangeView.vue

+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+
+const selectedOption = ref<string | null>(null)
+
+const selectOption = (option: string) => {
+    selectedOption.value = option
+}
+
+const onButtonClick = () => {
+    router.push('/konfigurasjonSteg2')
+}
+</script>
+
+<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 store vaneedringer er du villig til å gjøre?
+        </h1>
+        <div class="grid grid-cols-1 gap-14 mb-20 md:grid-cols-3">
+            <div
+                :class="{
+                    'border-[var(--green)] border-4': selectedOption === 'litt',
+                    'border-gray-300 border-2': selectedOption !== 'litt'
+                }"
+                class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+                @click="selectOption('litt')"
+            >
+                <img src="@/assets/litt.png" alt="litt" class="object-contain h-1/3" />
+                <p class="text-lg font-bold mt-2">Litt</p>
+            </div>
+            <div
+                :class="{
+                    'border-[var(--green)] border-4': selectedOption === 'passe',
+                    'border-gray-300 border-2': selectedOption !== 'passe'
+                }"
+                class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+                @click="selectOption('passe')"
+            >
+                <img src="@/assets/passe.png" alt="passe" class="object-contain h-1/3" />
+                <p class="text-lg font-bold mt-2">Passe</p>
+            </div>
+            <div
+                :class="{
+                    'border-[var(--green)] border-4': selectedOption === 'store',
+                    'border-gray-300 border-2': selectedOption !== 'store'
+                }"
+                class="flex flex-col items-center justify-center w-64 h-64 p-2.5 cursor-pointer transition-colors rounded-lg hover:border-[var(--green)]"
+                @click="selectOption('store')"
+            >
+                <img src="@/assets/store.png" alt="store" class="object-contain h-1/3" />
+                <p class="text-lg font-bold mt-2">Store</p>
+            </div>
+        </div>
+        <ContinueButtonComponent
+            @click="onButtonClick"
+            class="px-10 py-3 text-2xl font-bold self-end"
+        ></ContinueButtonComponent>
+    </div>
+</template>

src/views/ConfigSpendingItemsAmountView.vue

+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+
+interface Option {
+    name: string
+    amount: number | null
+}
+
+const options = ref<Option[]>([
+    { name: 'Snus', amount: null },
+    { name: 'Kaffe', amount: null },
+    { name: 'Kantina', amount: null }
+])
+
+const onButtonClick = () => {}
+</script>
+
+<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 penger per kjøp bruker du på ...</h1>
+        <div class="flex flex-col gap-2 mb-6">
+            <div
+                v-for="(option, index) in options"
+                :key="index"
+                :class="{
+                    'border-[var(--green)] border-4': option.amount !== null && option.amount >= 0,
+                    'border-gray-300 border-2': !(option.amount !== null && option.amount >= 0)
+                }"
+                class="flex justify-between items-center w-72 p-2 cursor-pointer transition-colors bg-white rounded-lg my-4"
+            >
+                <p class="text-xl font-bold">{{ option.name }}</p>
+                <div class="flex items-center">
+                    <input
+                        type="number"
+                        v-model="option.amount"
+                        class="w-20 h-10 p-1 rounded-md text-right text-lg"
+                        placeholder="Beløp"
+                        min="0"
+                    />
+                    <p class="ml-2 font-bold">kr</p>
+                </div>
+            </div>
+        </div>
+        <ContinueButtonComponent
+            @click="onButtonClick"
+            class="px-10 py-3 text-2xl self-end mt-12 mb-0"
+        ></ContinueButtonComponent>
+    </div>
+</template>

src/views/ConfigSpendingItemsView.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">Hva bruker du mye penger på?</h1>
+        <div class="flex flex-col gap-8 mb-6">
+            <div
+                v-for="(option, index) in options"
+                :key="index"
+                class="flex flex-col items-center justify-center w-72 h-18 p-2.5 cursor-pointer transition-colors bg-white rounded-lg"
+                :class="{
+                    'border-[var(--green)] border-4': option.selected,
+                    'border-gray-300 border-2': !option.selected
+                }"
+                @click="toggleOption(index)"
+            >
+                <p class="text-lg font-bold mt-2">{{ option.name }}</p>
+            </div>
+        </div>
+        <ContinueButtonComponent
+            @click="onButtonClick"
+            class="px-10 py-3 text-2xl self-end mt-16 mb-0"
+        ></ContinueButtonComponent>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+
+interface Option {
+    name: string
+    selected: boolean
+}
+
+const options = ref<Option[]>([
+    { name: 'Snus', selected: false },
+    { name: 'Kaffe', selected: false },
+    { name: 'Kantina', selected: false }
+])
+
+const toggleOption = (index: number) => {
+    options.value[index].selected = !options.value[index].selected
+}
+
+const onButtonClick = () => {
+    const selectedOptions = options.value.filter((option) => option.selected)
+    if (selectedOptions.length <= 3) {
+        const selectedOptionNames = selectedOptions.map((option) => option.name)
+        router.push('/konfigurasjonSteg4')
+    } else {
+        console.error('Please select between 1 and 3 options.')
+    }
+}
+</script>