Merge remote-tracking branch 'origin/dev' into enhancement/wcag

# Conflicts:
#	src/views/ConfigAccountNumberView.vue
#	src/views/ConfigFamiliarWithSavingsView.vue
#	src/views/ConfigHabitChangeView.vue
#	src/views/ConfigSpendingItemsAmountView.vue
#	src/views/ConfigSpendingItemsTotalAmountView.vue
#	src/views/ConfigSpendingItemsView.vue

src/App.vue

@@ -110,7 +110,7 @@ const helpMessages = computed(() => {
         messages.push(
             'Du kan også se hvor mye du har spart av utfordringen din, og hvor mye du har igjen'
         )
-    } else if (route.path.startsWith('/sparemaal/rediger')) {
+    } else if (route.path.startsWith('/sparemaal/rediger/ny')) {
         messages.push('Her kan du opprette et nytt sparemål 🌸')
         messages.push(
             'Tittel er navnet på sparemålet, og beskrivelse er en kort forklaring på hva sparemålet går ut på.'
@@ -120,7 +120,7 @@ const helpMessages = computed(() => {
         )
         messages.push('Forfallsdato er datoen du ønsker å ha nådd sparemålet ditt.')
         messages.push('Lykke til med sparingen! 🌴')
-    } else if (route.path.startsWith('/spareutfordring/rediger')) {
+    } else if (route.path.startsWith('/spareutfordringer/ny')) {
         messages.push('Her kan du opprette en ny utfordring ☕️')
         messages.push(
             'Tittel er navnet på utfordringen, og beskrivelse er en kort forklaring på hva utfordringen går ut på.'

src/assets/logo.svg

-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/components/ButtonAddGoalOrChallenge.vue

 <template>
     <button
-        class="primary w-full max-w-60 py-2 flex items-center justify-start pl-4 space-x-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 shadow-md text-xs md:text-sm lg:text-base"
+        class="primary w-full max-w-64 py-2 flex items-center justify-start pl-4 space-x-2 focus:outline-none focus:ring-2 focus:ring-opacity-50 shadow-md text-xs md:text-sm lg:text-base"
         @click="routeToGoalOrChallenge"
     >
         <svg

src/components/ButtonDisplayStreak.vue

@@ -21,12 +21,9 @@
             >
                 <span class="text-xs md:text-2xl font-bold text-black"
                     >{{ currentStreak
-                    }}{{
-                        currentStreak === 1 ? ' utfodring fullført' : ' utfodringer fullført'
-                    }}
-                    streak</span
-                >
-                <p class="text-black text-xs md:text-1xl md:font-bold">
+                    }}{{ currentStreak === 1 ? ' utfordring fullført' : ' utfordringer fullført' }}
+                </span>
+                <p class="text-black text-xs md:text-1xl md:font-bold my-2">
                     {{
                         currentStreak! > 0
                             ? 'Bra jobba du har fullført ' + currentStreak + ' utfordringer på rad!'

src/components/CardChallengeSavingsPath.vue

@@ -33,7 +33,7 @@
                 @click="editChallenge(challenge)"
                 :data-cy="'challenge-icon-' + challenge.id"
                 :src="challengeImageUrl"
-                class="max-w-12 max-h-12 md:max-h-8 md:max-w-8 lg:max-w-10 lg:max-h-10 cursor-pointer hover:scale-125 rounded-sm"
+                class="max-w-8 max-h-12 md:max-h-8 md:max-w-8 lg:max-w-10 lg:max-h-10 cursor-pointer hover:scale-125 rounded-sm"
                 :alt="challenge.title"
             />
             <!-- Progress Bar, if the challenge is not complete -->
@@ -45,7 +45,7 @@
                     <div class="flex flex-col">
                         <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                             <div
-                                class="bg-green-600 h-2.5 rounded-full"
+                                class="bg-lime-400 h-2.5 rounded-full"
                                 data-cy="challenge-progress"
                                 :style="{
                                     width: (challenge.saved / challenge.target) * 100 + '%'
@@ -55,16 +55,15 @@
                         <div class="text-center text-nowrap text-xs md:text-base">
                             {{ challenge.saved }}kr / {{ challenge.target }}kr
                         </div>
+                        <button
+                            @click="incrementSaved(challenge)"
+                            :data-cy="'increment-challenge' + challenge.id"
+                            type="button"
+                            class="primary text-xs ml-2 z-10 relative"
+                        >
+                            + {{ challenge.perPurchase }}kr på {{ challenge.title }}
+                        </button>
                     </div>
-
-                    <button
-                        @click="incrementSaved(challenge)"
-                        :data-cy="'increment-challenge' + challenge.id"
-                        type="button"
-                        class="inline-block mb-2 ml-2 h-7 w-8 rounded-full p-1 uppercase leading-normal transition duration-150 ease-in-out focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
-                    >
-                        +
-                    </button>
                 </div>
             </div>
             <span v-else class="text-center text-xs md:text-base"
@@ -112,7 +111,6 @@ const getChallengeIcon = async (challengeId: number) => {
         })
         challengeImageUrl.value = URL.createObjectURL(imageResponse.data)
     } catch (error) {
-        console.error('Failed to load challenge icon:', error)
         challengeImageUrl.value = '/src/assets/star.png' // Fallback on error
     }
 }

src/components/FormLogin.vue

@@ -84,7 +84,7 @@ watch(
                     placeholder="Skriv inn passord"
                 />
                 <button
-                    class="absolute right-0 top-1 bg-transparent hover:bg-transparent"
+                    class="absolute right-0 top-1 bg-transparent hover:bg-transparent mr-4 mt-1"
                     @click="toggleShowPassword"
                 >
                     {{ showPassword ? '🔓' : '🔒' }}

src/components/FormRegister.vue

@@ -12,6 +12,7 @@ const confirm = ref<string>('')
 
 const showPassword = ref<boolean>(false)
 const errorMessage = ref<string>('')
+const passwordValidations = ref<string[]>([])
 
 const userStore = useUserStore()
 
@@ -42,6 +43,39 @@ const toggleShowPassword = () => {
     showPassword.value = !showPassword.value
 }
 
+const validatePassword = () => {
+    const messages = []
+    const lengthValid = password.value.length >= 8 && password.value.length <= 30
+    const numberValid = /[0-9]/.test(password.value)
+    const lowercaseValid = /[a-zæøå]/.test(password.value)
+    const uppercaseValid = /[ÆØÅA-Z]/.test(password.value)
+    const specialCharacterValid = /[@#$%^&+=!]/.test(password.value)
+    const noSpacesValid = !/\s/.test(password.value)
+
+    if (!lengthValid) {
+        messages.push('Må være mellom 8 og 30 karakterer. ')
+    }
+    if (!numberValid) {
+        messages.push('Må inneholde minst ett tall. ')
+    }
+    if (!lowercaseValid) {
+        messages.push('Må inneholde minst én liten bokstav. ')
+    }
+    if (!uppercaseValid) {
+        messages.push('Må inneholde minst én stor bokstav. ')
+    }
+    if (!specialCharacterValid) {
+        messages.push('Må inneholde minst ett spesialtegn (@#$%^&+=!). ')
+    }
+    if (!noSpacesValid) {
+        messages.push('Må ikke inneholde mellomrom. ')
+    }
+
+    passwordValidations.value = messages
+}
+
+watch(password, validatePassword)
+
 watch(
     () => userStore.errorMessage,
     (newValue: string) => {
@@ -56,7 +90,7 @@ watch(
             <div class="flex flex-row justify-between mx-4">
                 <p>Fornavn*</p>
                 <ToolTip
-                    :message="'Must include only letters, spaces, commas, apostrophes, periods, and hyphens. 1-30 characters long'"
+                    :message="'Må kun inneholde bokstaver, mellomrom, komma, apostrof, punktum, og bindestrek. 1-30 karakterer langt'"
                 />
             </div>
             <input
@@ -71,7 +105,7 @@ watch(
             <div class="flex flex-row justify-between mx-4">
                 <p>Etternavn*</p>
                 <ToolTip
-                    :message="'Must include only letters, spaces, commas, apostrophes, periods, and hyphens. 1-30 characters long'"
+                    :message="'Må kun inneholde bokstaver, mellomrom, komma, apostrof, punktum, og bindestrek. 1-30 karakterer langt'"
                 />
             </div>
             <input
@@ -86,7 +120,7 @@ watch(
             <div class="flex flex-row justify-between mx-4">
                 <p>E-post*</p>
                 <ToolTip
-                    :message="'Valid email: Starts with Norwegian letters, numbers, or special characters. Includes \@\ followed by a domain. Ends with 2-7 letters.'"
+                    :message="'Gyldig email: Må starte med norske bokstaver, tall, eller spesielle karakterer. Inkluderer \@\ fulgt av et domene. Ender med 2-7 bokstaver.'"
                 />
             </div>
             <input
@@ -101,7 +135,7 @@ watch(
             <div class="flex flex-row justify-between mx-4">
                 <p>Brukernavn*</p>
                 <ToolTip
-                    :message="'Must start with a letter and can include numbers and underscores. 3-30 characters long.'"
+                    :message="'Må starte med en bokstav og kan inneholde tall og understrek. 3-30 karakterer langt.'"
                 />
             </div>
             <input
@@ -116,7 +150,7 @@ watch(
             <div class="flex flex-row justify-between mx-4">
                 <p>Passord*</p>
                 <ToolTip
-                    :message="'Must be at least 8 characters, including at least one number, one lowercase letter, one uppercase letter, one special character (@#$%^&+=!), and no spaces.'"
+                    :message="'Må være minst 8 karakterer, inkludert et tall, en liten bokstav, en stor bokstav, et spesialtegn (@#$%^&+=!), og ingen mellomrom.'"
                 />
             </div>
             <div class="relative">
@@ -129,7 +163,7 @@ watch(
                     :class="{ 'border-2 border-lime-400': isPasswordValid }"
                 />
                 <button
-                    class="absolute right-0 top-1 bg-transparent hover:bg-transparent"
+                    class="absolute right-0 top-1 bg-transparent hover:bg-transparent mr-4 mt-1"
                     @click="toggleShowPassword"
                 >
                     {{ showPassword ? '🔓' : '🔒' }}
@@ -145,6 +179,11 @@ watch(
                 placeholder="Bekreft passord"
                 type="password"
             />
+            <div class="ml-4">
+                <p class="text-sm">
+                    <span v-for="message in passwordValidations" :key="message">{{ message }}</span>
+                </p>
+            </div>
         </div>
         <div class="flex flex-row gap-5">
             <button
@@ -155,7 +194,6 @@ watch(
             >
                 Registrer deg
             </button>
-            <p>{{ errorMessage }}</p>
         </div>
     </div>
 </template>

src/components/GeneratedChallengesModal.vue

@@ -4,7 +4,7 @@
         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">
+            <button @click="closeModal" class="absolute top-0 right-0 m-2 primary">
                 <svg
                     xmlns="http://www.w3.org/2000/svg"
                     class="h-6 w-6"
@@ -61,7 +61,7 @@
                             >
                             <button
                                 @click="acceptChallenge(challenge)"
-                                class="text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0"
+                                class="font-bold py-1 px-4 mt-[-14px] sm:mt-0 primary"
                             >
                                 Godta
                             </button>

src/components/HelpComponent.vue

 <template>
-    <div class="fixed bottom-5 right-5 hover:cursor-pointer z-50" @click="isModalOpen = true">
+    <div class="fixed bottom-10 right-10 hover:cursor-pointer z-50" @click="isModalOpen = true">
         <img
             alt="Hjelp"
-            class="h-10 transition-transform duration-300 ease-in-out hover:scale-110"
+            class="h-12 transition-transform duration-300 ease-in-out hover:scale-110"
             src="@/assets/hjelp.png"
         />
     </div>
     <ModalComponent v-if="isModalOpen" @close="isModalOpen = false">
         <InteractiveSpare
             :speech="speech"
-            :png-size="15"
+            :png-size="12"
             direction="right"
             @emit:close="isModalOpen = false"
         />

src/components/ImgGifTemplate.vue

@@ -4,7 +4,7 @@
             v-if="index % 6 === modValue"
             :src="url"
             alt="could not load"
-            class="min-w-24 w-full h-auto min-h-24 max-w-32 max-h-32 md:min-h-32 md:max-h-44 md:min-w-32 md:max-w-44 border-2 rounded-lg border-stale-400 shadow-md shadow-black"
+            class="min-w-24 w-full h-auto min-h-24 max-w-32 max-h-32 md:min-h-32 md:max-h-44 md:min-w-32 md:max-w-44 rounded-lg border-stale-400 shadow-md shadow-gray-500"
         />
     </div>
 </template>

src/components/SavingsPath.vue

@@ -12,7 +12,7 @@
         </div>
         <button
             v-if="!allChallengesCompleted()"
-            class="h-auto w-auto absolute flex text-center self-end mr-10 md:mr-20 text-wrap shadow-sm shadow-black sm:top-50 sm:text-xs sm:mr-20 lg:mr-32 top-60 z-50 p-2 text-xs md:text-sm"
+            class="h-auto w-auto absolute flex text-center self-end mr-10 md:mr-20 text-wrap border-2 border-gray-200 rounded-xl shadow-black sm:top-50 sm:text-xs sm:mr-20 lg:mr-32 top-60 z-50 p-2 text-xs md:text-sm hover:scale-105"
             @click="scrollToFirstUncompleted"
             v-show="!isAtFirstUncompleted"
         >
@@ -22,11 +22,11 @@
         <div
             v-if="challengesLocal"
             ref="containerRef"
-            class="container relative pt-6 w-4/5 bg-cover bg-[center] md:[background-position: center;] mx-auto md:w-4/5 no-scrollbar h-full max-h-[60vh] md:max-h-[60vh] md:min-w-2/5 overflow-y-auto border-2 border-transparent rounded-xl bg-white shadow-lg shadow-slate-400"
-            style="background-image: url('src/assets/backgroundSavingsPath.png')"
+            class="container relative pt-6 w-4/5 bg-cover bg-[center] md:[background-position: center;] mx-auto md:w-4/5 no-scrollbar h-full max-h-[60vh] md:max-h-[60vh] md:min-w-2/5 overflow-y-auto border-transparent rounded-lg bg-white shadow-md shadow-slate-400"
+            style="background-image: url('src/assets/bakgrunn.png')"
         >
             <div>
-                <img src="@/assets/start.png" alt="Spare" class="md:w-1/6 md:h-auto h-20" />
+                <img src="@/assets/start-sign.png" alt="Spare" class="md:w-1/6 md:h-auto h-20" />
             </div>
 
             <div
@@ -41,7 +41,7 @@
                         'justify-center mx-auto md:justify-between': index % 2 === 1,
                         'justify-center md:justify-between mx-auto': index % 2 === 0
                     }"
-                    class="flex flex-row w-full md:w-4/5 justify-start gap-4 md:gap-8"
+                    class="flex flex-row w-full md:w-4/5 justify-start gap-4 md:gap-8 h-auto"
                 >
                     <div class="flex">
                         <img-gif-template
@@ -97,22 +97,24 @@
                     v-if="index === challengesLocal.length - 1 && index % 2 === 0"
                     class="flex flex-row mt-2"
                 >
-                    <button class="text-2xl ml-48" @click="addSpareUtfordring">+</button>
+                    <button class="text-2xl ml-48 mr-2 primary" @click="addSpareUtfordring">
+                        +
+                    </button>
                     <p class="">Legg til <br />Spareutfordring</p>
                 </div>
                 <div
                     v-else-if="index === challengesLocal.length - 1 && index % 2 !== 0"
                     class="mr-20 flex flex-row"
                 >
-                    <button class="text-2xl ml-10 rounded-full" @click="addSpareUtfordring">
+                    <button class="text-2xl ml-10 rounded-full primary" @click="addSpareUtfordring">
                         +
                     </button>
-                    <p class="">Legg til <br />Spareutfordring</p>
+                    <p class="pl-2">Legg til <br />Spareutfordring</p>
                 </div>
                 <!-- Finish line -->
             </div>
             <img
-                src="@/assets/finishLine.png"
+                src="@/assets/finishline2.png"
                 class="w-full max-h-auto mx-auto mt-4"
                 alt="Finish Line"
             />

src/components/SpareComponent.vue

@@ -8,7 +8,10 @@
                 'flex-row-reverse': imageDirection === 'left'
             }"
         >
-            <a @click="isModalOpen = true" class="hover:bg-transparent z-20">
+            <a
+                @click="isModalOpen = true"
+                class="hover:bg-transparent hover:p-0 hover:scale-105 z-20"
+            >
                 <img
                     alt="Spare"
                     class="md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"

src/components/__tests__/ButtonDisplayStreakTest.spec.ts

+import { describe, expect, it, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ButtonComponent from '@/components/ButtonDisplayStreak.vue'
+
+describe('ButtonComponent', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+    })
+
+    it('renders correctly', () => {
+        const wrapper = mount(ButtonComponent, {
+            props: {
+                buttonText: 'Click me',
+                type: 'goal'
+            }
+        })
+        expect(wrapper.exists()).toBe(true)
+    })
+})

src/views/ConfigAccountNumberView.vue

@@ -47,8 +47,9 @@
                     ]"
                     class="w-60"
                 ></SpareComponent>
-                <p class="text-xs">Trykk på meg for hjelp ❗️</p>
+                <p class="text-xs animate-bounce">Trykk på meg for hjelp ❗️</p>
             </div>
+            <p class="mt-10">Husk at du kan endre dette senere!</p>
             <ContinueButtonComponent
                 @click="onButtonClick"
                 :disabled="!isFormValid"

src/views/ConfigFamiliarWithSavingsView.vue

@@ -7,7 +7,7 @@
                     'border-[var(--green)] border-4': selectedOption === 'litt',
                     'border-gray-300 border-2': selectedOption !== 'litt'
                 }"
-                class="flex flex-col items-center justify-center w-40 h-40 p-2 sm:w-64 sm:h-64 transition-colors rounded-lg cursor-pointer hover:border-[var(--green)]"
+                class="flex flex-col items-center justify-center w-32 h-32 p-2 sm:w-60 sm:h-60 transition-colors rounded-lg cursor-pointer hover:border-[var(--green)]"
                 @click="selectOption('litt')"
             >
                 <img src="@/assets/nose.png" alt="Pig nose" class="h-12 sm:h-1/3" />
@@ -18,7 +18,7 @@
                     'border-[var(--green)] border-4': selectedOption === 'noe',
                     'border-gray-300 border-2': selectedOption !== 'noe'
                 }"
-                class="flex flex-col items-center justify-center w-40 h-40 p-2 sm:w-64 sm:h-64 transition-colors rounded-lg cursor-pointer hover:border-[var(--green)]"
+                class="flex flex-col items-center justify-center w-32 h-32 p-2 sm:w-60 sm:h-60 transition-colors rounded-lg cursor-pointer hover:border-[var(--green)]"
                 @click="selectOption('noe')"
             >
                 <img src="@/assets/head.png" alt="Pig face" class="h-12 sm:h-1/3" />
@@ -29,7 +29,7 @@
                     'border-[var(--green)] border-4': selectedOption === 'godt',
                     'border-gray-300 border-2': selectedOption !== 'godt'
                 }"
-                class="flex flex-col items-center justify-center w-40 h-40 p-2 sm:w-64 sm:h-64 transition-colors rounded-lg cursor-pointer hover:border-[var(--green)]"
+                class="flex flex-col items-center justify-center w-32 h-32 p-2 sm:w-60 sm:h-60 transition-colors rounded-lg cursor-pointer hover:border-[var(--green)]"
                 @click="selectOption('godt')"
             >
                 <img src="@/assets/pig.png" alt="Whole pig" class="h-12 sm:h-1/3" />
@@ -49,6 +49,7 @@
                 ></SpareComponent>
                 <p class="text-xs">Trykk på meg for hjelp ❗️</p>
             </div>
+            <p class="mb-4 md:mb-10">Husk at du kan endre dette senere!</p>
             <ContinueButtonComponent
                 :disabled="selectedOption === null"
                 class="px-10 py-3 text-2xl self-end"