refactor/Added bank account selection to configuration steps

src/components/BaseComponents/Input/BaseInput.vue

 <script setup lang="ts">
 
+import { ref } from 'vue'
+
 const emit = defineEmits(['inputChangeEvent']);
 const props = defineProps({
   label: {
@@ -24,6 +26,10 @@ const props = defineProps({
     type: String,
     required: false
   },
+  max: {
+    type: String,
+    required: false
+  },
   pattern: {
     type: String,
     default: null
@@ -46,13 +52,16 @@ const props = defineProps({
   }
 });
 
+const formRef = ref();
+
 const onInputEvent = (event: any) => {
+  formRef.value.classList.add("was-validated")
   emit('inputChangeEvent', event.target.value)
 }
 </script>
 
 <template>
-  <div>
+  <div ref="formRef">
     <label :for="inputId" data-cy="bi-label">{{ label }}</label>
     <input :value="modelValue"
            @input="onInputEvent"
@@ -61,6 +70,7 @@ const onInputEvent = (event: any) => {
            :placeholder="placeholder"
            :id="inputId"
            :min="min"
+           :max="max"
            :pattern="pattern"
            :required="required"
            data-cy="bi-input"

src/components/Configuration/ConfigurationParent.vue

@@ -7,7 +7,7 @@ import { useRoute } from 'vue-router'
 const router = useRouter()
 
 // The configuration steps with path and order value.
-const configurationSteps = {'/commitment': 1, '/experience': 2, '/suitable-challenges': 3, '/first-saving-goal': 4, '/finished-configuration': 5}
+const configurationSteps = {'/bank-account': 1,'/commitment': 2, '/experience': 3, '/suitable-challenges': 4, '/first-saving-goal': 5, '/finished-configuration': 6}
 const length = Object.keys(configurationSteps).length
 let percentage = ref(1/length);
 

src/components/Configuration/ConfigurationSteps/BankAccount.vue

+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import BaseButton from '@/components/BaseComponents/Buttons/BaseButton.vue'
+import { ref } from 'vue'
+import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue'
+import { useConfigurationStore } from '@/stores/ConfigurationStore'
+
+const router = useRouter();
+
+const formRef = ref();
+const spendingAccount = ref<number>();
+const savingsAccount = ref<number>();
+let errorMsg = ref('');
+
+// Updates progress bar in the parent Configuration component.
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/bank-account')
+
+const handleSpendingInputEvent = (newValue: any) => {
+  spendingAccount.value = newValue
+}
+
+const handleSavingInputEvent = (newValue: any) => {
+  savingsAccount.value = newValue
+}
+const handleSubmit = () => {
+  formRef.value.classList.add("was-validated")
+  const form = formRef.value;
+  if (form.checkValidity()) {
+    useConfigurationStore().setSpendingAccount(spendingAccount.value)
+    useConfigurationStore().setSavingsAccount(savingsAccount.value)
+    router.push("/commitment")
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <h3 id="bankAccountText" class="d-flex align-items-center justify-content-center">
+      Velg forburkskonto og sparekonto
+    </h3>
+    <form ref="formRef">
+      <BaseInput data-cy="spending-account-input"
+                 :model-value="spendingAccount"
+                 @input-change-event="handleSpendingInputEvent"
+                 id="spending-account-base-input"
+                 input-id="spending-account-input"
+                 type="number"
+                 min="10000000000"
+                 max="99999999999"
+                 label="Brukskonto"
+                 placeholder="Skriv inn din brukskonto"
+                 invalid-message="Vennligst skriv inn din brukskonto (11 siffer)"/>
+
+      <BaseInput data-cy="savings-account-input"
+                 :model-value="savingsAccount"
+                 @input-change-event="handleSavingInputEvent"
+                 id="saving-account-base-input"
+                 input-id="savings-account-input"
+                 type="number"
+                 min="10000000000"
+                 max="99999999999"
+                 label="Sparekonto"
+                 placeholder="Skriv inn din sparekonto"
+                 invalid-message="Vennligst skriv inn din sparekonto (11 siffer)"/>
+    </form>
+    <div style="color: red">{{ errorMsg }}</div>
+    <div class="confirm-button-container">
+      <BaseButton id="confirmButton" @click="handleSubmit" button-text="Fortsett"></BaseButton>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin: 2rem 0 ;
+  height: 38px;
+  width: 300px;
+}
+
+#spending-account-base-input, #spending-account-base-input {
+  margin: 1rem 0;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

src/router/index.ts

@@ -139,6 +139,11 @@ const routes = [
     name: 'configuration',
     component: () => import('@/views/Configuration/ConfigurationView.vue'),
     children: [
+      {
+        path: '/bank-account',
+        name: 'bank account',
+        component: () => import('@/components/Configuration/ConfigurationSteps/BankAccount.vue'),
+      },
       {
         path: '/commitment',
         name: 'commitment',

src/stores/ConfigurationStore.ts

 import { defineStore } from 'pinia'
 export const useConfigurationStore = defineStore('ConfigurationStore', {
   state: () => ({
+    spendingAccount: 0,
+    savingsAccount: 0,
     commitment: '',
     experience: '',
     challenges: [] as Array<string>,
   }),
   actions: {
+    setSpendingAccount(newValue: number) {
+      this.spendingAccount = newValue
+    },
+    setSavingsAccount(newValue: number) {
+      this.savingsAccount = newValue
+    },
     setCommitment(commitment: string) {
       this.commitment = commitment
     },
@@ -22,6 +30,12 @@ export const useConfigurationStore = defineStore('ConfigurationStore', {
     }
   },
   getters: {
+    getSpendingAccount(): number {
+      return this.spendingAccount
+    },
+    getSavingsAccount(): number {
+      return this.savingsAccount
+    },
     getCommitment(): string {
       return this.commitment
     },