refactor/Added reactive variables in configuration steps

src/components/Configuration/ChallangeCheckBox.vue

 <script setup lang="ts">
 
+const emit = defineEmits(['challengeChangedEvent'])
 const props = defineProps({
   id: {
     type: String,
@@ -8,14 +9,24 @@ const props = defineProps({
   text: {
     type: String,
     default: ''
+  },
+  modelValue: {
+    type: Boolean,
+    default: false
   }
 })
 
+const onChallengeChanged = (event: any) => {
+  const value = event.target.checked
+  const data = [props.text, value]
+  emit('challengeChangedEvent', data)
+}
+
 </script>
 
 <template>
   <span>
-    <input type="checkbox" class="btn-check" :id="props.id" autocomplete="off">
+    <input @change="onChallengeChanged" type="checkbox" class="btn-check" :id="props.id" autocomplete="off">
     <label class="btn btn-outline-primary align-items-center justify-content-center" :for="props.id">{{ props.text }}</label>
   </span>
 </template>

src/components/Configuration/Configuration.vue

@@ -4,24 +4,48 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useRoute } from 'vue-router'
 
+// Configuration variables
+let bankId = ref('')
+let commitment = ref('')
+let experience = ref('')
+let suitableChallenges = ref([])
+let savingGoalTitle = ref('')
+let sumToSpare = ref(0)
+let dueDate = ref(null)
 
 const router = useRouter()
-
 // The configuration steps with path and order value.
 const configurationSteps = {'/bank-id': 1, '/commitment': 2, '/experience': 3, '/suitable-challenges': 4, '/first-saving-goal': 5}
 const length = Object.keys(configurationSteps).length
 let percentage = ref(1/length);
 
-// Pushes to '/bank-id' RouterView and sets current path to this path.
+// Initially pushes to '/bank-id' RouterView and sets current path to this path.
 router.push(Object.keys(configurationSteps)[0])
 let currentRoute = useRoute()
 let currentPath = currentRoute.fullPath
 
+// Sets the current path to a new path and updates progressbar
 const onNewRouteEvent = (path) => {
   currentPath = path
   percentage.value = (1/length) * configurationSteps[path]
 }
 
+const onBankIdSelectedEvent = (value) => {
+  bankId.value = value
+}
+
+const onCommitmentSelectedEvent = (value) => {
+  commitment.value = value
+}
+
+const onExperienceSelectedEvent = (value) => {
+  experience.value = value
+}
+
+const onChallengesSelectedEvent = (value) => {
+  suitableChallenges.value = value
+}
+
 </script>
 
 <template>
@@ -30,7 +54,12 @@ const onNewRouteEvent = (path) => {
       <ProgressBar id="progressbar" :percentage="percentage"/>
     </div>
     <div class="configuration-container">
-      <RouterView @changeRouterEvent="onNewRouteEvent"/>
+      <RouterView @changeRouterEvent="onNewRouteEvent"
+                  @bankIdSelectedEvent="onBankIdSelectedEvent"
+                  @commitmentSelectedEvent="onCommitmentSelectedEvent"
+                  @experienceSelectedEvent="onExperienceSelectedEvent"
+                  @challengesSelectedEvent="onChallengesSelectedEvent"
+      />
     </div>
   </div>
 </template>

src/components/Configuration/ConfigurationSteps/BankId.vue

@@ -4,8 +4,13 @@ import { useRouter } from 'vue-router'
 import { ref } from 'vue'
 
 const formRef = ref()
+const bankIDRef = ref(false)
+const minIdRef = ref(false)
+const vippsRef = ref(false)
+
+
 const router = useRouter();
-const emit = defineEmits(['changeRouterEvent']);
+const emit = defineEmits(['changeRouterEvent', 'bankIdSelectedEvent']);
 emit('changeRouterEvent', '/bank-id');
 
 const onClick = () => {
@@ -17,6 +22,12 @@ const onClick = () => {
     return;
   }
 
+  let choice = ''
+  if (bankIDRef.value.checked) choice = 'BankId på mobil'
+  else if (minIdRef.value.checked) choice = 'MinId'
+  else if (vippsRef.value.checked) choice = 'Vipps'
+
+  emit('bankIdSelectedEvent', choice)
   router.push('/commitment')
 }
 
@@ -32,13 +43,13 @@ const onClick = () => {
 
     <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
 
-      <input type="radio" class="btn-check" name="bank-id" id="btn-check-outlined" autocomplete="off">
+      <input ref="bankIDRef" type="radio" class="btn-check" name="bank-id" id="btn-check-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">BankID på mobil</label>
 
-      <input type="radio" class="btn-check" name="bank-id" id="btn-check2-outlined" autocomplete="off">
+      <input ref="minIdRef" type="radio" class="btn-check" name="bank-id" id="btn-check2-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">MinID</label>
 
-      <input type="radio" class="btn-check" name="bank-id" id="btn-check3-outlined" autocomplete="off">
+      <input ref="vippsRef" type="radio" class="btn-check" name="bank-id" id="btn-check3-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Vipps</label>
 
     </form>

src/components/Configuration/ConfigurationSteps/Commitment.vue

@@ -4,8 +4,15 @@ import Button1 from '@/components/Buttons/Button1.vue'
 import { useRouter } from 'vue-router'
 import { ref } from 'vue'
 
-const router = useRouter();
+const emit = defineEmits(['changeRouterEvent', 'commitmentSelectedEvent'])
+emit('changeRouterEvent', '/commitment')
+
 const formRef = ref()
+const lowRef = ref('')
+const mediumRef = ref('')
+const highRef = ref('')
+const router = useRouter();
+
 const onClick = () => {
   const radios = formRef.value.querySelectorAll('input[type="radio"]');
   const checkedRadios = Array.from(radios).filter(radio => radio.checked);
@@ -14,12 +21,16 @@ const onClick = () => {
     alert('Please select an option.');
     return;
   }
+
+  let choice = '';
+  if (lowRef.value.checked) choice = 'Low'
+  else if (mediumRef.value.checked) choice = 'Medium'
+  else if (highRef.value.checked) choice = 'High'
+
+  emit('commitmentSelectedEvent', choice)
   router.push('/experience')
 }
 
-const emit = defineEmits(['changeRouterEvent'])
-emit('changeRouterEvent', '/commitment')
-
 </script>
 
 <template>
@@ -32,13 +43,13 @@ emit('changeRouterEvent', '/commitment')
 
     <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
 
-      <input type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off">
+      <input ref="lowRef" type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Low</label>
 
-      <input type="radio" class="btn-check" name="commitment" id="btn-check2-outlined" autocomplete="off">
+      <input ref="mediumRef" type="radio" class="btn-check" name="commitment" id="btn-check2-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Medium</label>
 
-      <input type="radio" class="btn-check" name="commitment" id="btn-check3-outlined" autocomplete="off">
+      <input ref="highRef" type="radio" class="btn-check" name="commitment" id="btn-check3-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">High</label>
 
     </form>

src/components/Configuration/ConfigurationSteps/Experience.vue

 <script setup lang="ts">
-
 import Button1 from '@/components/Buttons/Button1.vue'
-
 import { useRouter } from 'vue-router'
 import { ref } from 'vue'
 
 const router = useRouter();
+const emit = defineEmits(['changeRouterEvent', 'experienceSelectedEvent'])
+emit('changeRouterEvent', '/experience')
+
 const formRef = ref()
+const beginnerRef = ref('')
+const someExperienceRef = ref('')
+const expertRef = ref('')
+
 const onClick = () => {
   const radios = formRef.value.querySelectorAll('input[type="radio"]');
   const checkedRadios = Array.from(radios).filter(radio => radio.checked);
@@ -16,31 +21,34 @@ const onClick = () => {
     return;
   }
 
+  let choice = ''
+  if (beginnerRef.value.checked) choice = 'Beginner'
+  else if (someExperienceRef.value.checked) choice = 'Some experience'
+  else if (expertRef.value.checked) choice = 'Expert'
+
+  emit('experienceSelectedEvent', choice)
   router.push('/suitable-challenges')
 }
 
-const emit = defineEmits(['changeRouterEvent'])
-emit('changeRouterEvent', '/experience')
-
 </script>
 
 <template>
   <div class="container">
     <div>
       <h3 class="d-flex align-items-center justify-content-center">
-        How much experice do you have with saving money?
+        How much experience do you have with saving money?
       </h3>
     </div>
 
     <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
 
-      <input type="radio" class="btn-check" name="experience" id="btn-check-outlined" autocomplete="off">
+      <input ref="beginnerRef" type="radio" class="btn-check" name="experience" id="btn-check-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Beginner</label>
 
-      <input type="radio" class="btn-check" name="experience" id="btn-check2-outlined" autocomplete="off">
+      <input ref="someExperienceRef" type="radio" class="btn-check" name="experience" id="btn-check2-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Some experience</label>
 
-      <input type="radio" class="btn-check" name="experience" id="btn-check3-outlined" autocomplete="off">
+      <input ref="expertRef" type="radio" class="btn-check" name="experience" id="btn-check3-outlined" autocomplete="off">
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Expert</label>
     </form>
 

src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue

 <script setup lang="ts">
-
 import { useRouter } from 'vue-router'
-
-const router = useRouter();
-const onClick = () => {
-  router.push('/first-saving-goal')
-}
-
 import ChallangeCheckBox from '@/components/Configuration/ChallangeCheckBox.vue'
 import Button1 from '@/components/Buttons/Button1.vue'
+import { ref } from 'vue'
 
-const emit = defineEmits(['changeRouterEvent'])
+const emit = defineEmits(['changeRouterEvent', 'challengesSelectedEvent'])
 emit('changeRouterEvent', '/suitable-challenges')
+const router = useRouter();
 
+let chosenChallenges = ref([])
 const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
-  'Quit subscription', 'Drop car', 'Short showers', 'Exercise outside', 'Make budget', 'Others'
-]
+  'Quit subscription', 'Drop car', 'Short showers', 'Exercise outside', 'Make budget']
+
+const onChangedChallengeEvent = (value) => {
+  // if challenge is checked then add it to the chosenChallenges variable
+  if (value[1]) {
+    chosenChallenges.value.push(value[0])
+  }
+  // if challenge is unchecked then remove it from the chosenChallenges variable
+  else {
+    console.log('Reached')
+    chosenChallenges.value = chosenChallenges.value.filter(item => item !== value[0]);
+  }
+}
+
+const onClick = () => {
+  emit('challengesSelectedEvent', chosenChallenges.value)
+  router.push('/first-saving-goal')
+}
 
 </script>
 
@@ -28,7 +40,9 @@ const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
     </div>
 
     <div class="challenge-container">
-      <ChallangeCheckBox v-for="(item, index) in challenges" :id="index" :text="item"/>
+      <ChallangeCheckBox v-for="(item, index) in challenges" :id="index" :text="item"
+                         @challengeChangedEvent="onChangedChallengeEvent"
+      />
     </div>
 
     <div class="confirm-button-container">

src/components/Login/LoginForm.vue

@@ -26,6 +26,7 @@ const handlePasswordInputEvent = (newValue: any) => {
 }
 
 const handleSubmit = async () => {
+  formRef.value.classList.add("was-validated")
   const loginUserPayload: LoginRequest = {
     email: emailRef.value,
     password: passwordRef.value

src/components/SignUp/SignUpForm.vue

@@ -14,7 +14,6 @@ const formRef = ref()
 
 const handleFirstNameInputEvent = (newValue: any) => {
   firstNameRef.value = newValue
-  console.log(firstNameRef.value)
 }
 
 const handleSurnameInputEvent = (newValue: any) => {
@@ -35,8 +34,6 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
 
 const handleSubmit = () => {
   formRef.value.classList.add("was-validated")
-  alert("Expected to be transferred to initial configuration") // Todo remove this line
-  router.push("/configuration")
 }
 
 </script>

src/stores/UserStore.ts

@@ -33,6 +33,7 @@ export type UserStoreInfo = {
   email?: string;
   firstname?: string;
   lastname?: string;
+  password?: string;
   accessToken?: string;
   role?: string;
 };
@@ -42,10 +43,17 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
     email: '',
     firstname: '',
     lastname: '',
+    password: '',
     accessToken: '',
     role: '',
   }),
   actions: {
+    setPassword(password: string) {
+      this.password = password
+    },
+    resetPassword() {
+      this.password = ''
+    },
     setUserInfo(userinfo: UserStoreInfo) {
       userinfo.email && (this.$state.email = userinfo.email);
       userinfo.firstname && (this.$state.firstname = userinfo.firstname);
@@ -64,6 +72,9 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
     },
   },
   getters: {
+    getPassword(): string {
+      return this.password
+    },
     isLoggedIn(): boolean {
       return this.accessToken !== '';
     },