feat/Created configuration steps for sign up

src/App.vue

 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
+// import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
 </script>
 
 <template>

src/components/Configuration/ChallangeCheckBox.vue

+<script setup lang="ts">
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  text: {
+    type: String,
+    default: ''
+  }
+})
+
+</script>
+
+<template>
+  <span>
+    <input 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>
+
+<style scoped>
+label {
+  margin: 5px
+}
+</style>
\ No newline at end of file

src/components/Configuration/Configuration.vue

+<script setup lang="ts">
+import ProgressBar from '@/components/Configuration/ProgressBar.vue'
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+
+
+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.
+router.push(Object.keys(configurationSteps)[0])
+let currentRoute = useRoute()
+let currentPath = currentRoute.fullPath
+
+const onNewRouteEvent = (path) => {
+  currentPath = path
+  percentage.value = (1/length) * configurationSteps[path]
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <div class="progress-bar-container">
+      <ProgressBar id="progressbar" :percentage="percentage"/>
+    </div>
+    <div class="configuration-container">
+      <RouterView @changeRouterEvent="onNewRouteEvent"/>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: grid;
+  grid-template-rows: 0.5fr 2.3fr 0.2fr;
+}
+
+#progressbar {
+  padding-top: 2rem;
+}
+</style>
\ No newline at end of file

src/components/Configuration/ConfigurationSteps/BankId.vue

+<script setup lang="ts">
+import Button1 from '@/components/Buttons/Button1.vue'
+import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+
+const formRef = ref()
+const router = useRouter();
+const emit = defineEmits(['changeRouterEvent']);
+emit('changeRouterEvent', '/bank-id');
+
+const onClick = () => {
+  const radios = formRef.value.querySelectorAll('input[type="radio"]');
+  const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+  if (checkedRadios.length === 0) {
+    alert('Please select an option.');
+    return;
+  }
+
+  router.push('/commitment')
+}
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        In order to provide best advice we need to connect to your bank account
+      </h3>
+    </div>
+
+    <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">
+      <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">
+      <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">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Vipps</label>
+
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton"
+               @click="onClick"
+               button-text="Continue">
+      </button1>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

src/components/Configuration/ConfigurationSteps/Commitment.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 formRef = ref()
+const onClick = () => {
+  const radios = formRef.value.querySelectorAll('input[type="radio"]');
+  const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+  if (checkedRadios.length === 0) {
+    alert('Please select an option.');
+    return;
+  }
+  router.push('/experience')
+}
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/commitment')
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        In which degree are you willing to make changes?
+      </h3>
+    </div>
+
+    <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+
+      <input 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">
+      <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">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">High</label>
+
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

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 formRef = ref()
+const onClick = () => {
+  const radios = formRef.value.querySelectorAll('input[type="radio"]');
+  const checkedRadios = Array.from(radios).filter(radio => radio.checked);
+
+  if (checkedRadios.length === 0) {
+    alert('Please select an option.');
+    return;
+  }
+
+  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?
+      </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">
+      <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">
+      <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">
+      <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Expert</label>
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+</div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

src/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue

+<script setup lang="ts">
+import BaseInput from '@/components/InputFields/BaseInput.vue'
+import { ref } from 'vue'
+import Button1 from '@/components/Buttons/Button1.vue'
+
+import { useRouter } from 'vue-router'
+
+const router = useRouter();
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/first-saving-goal')
+
+const formRef = ref()
+const titleRef = ref()
+const sumRef = ref()
+const dateRef = ref()
+
+const onClick = () => {
+  formRef.value.classList.add("was-validated")
+}
+
+const getTodayDate = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  let month = today.getMonth() + 1;
+  let day = today.getDate();
+
+  // Ensure month and day are in double digits
+  month = month < 10 ? `0${month}` : month;
+  day = day < 10 ? `0${day}` : day;
+
+  console.log(`${year}-${month}-${day}`)
+
+  return `${year}-${month}-${day}`;
+};
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        Create your first saving goal
+      </h3>
+    </div>
+
+    <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit">
+      <BaseInput :model-value="titleRef"
+                 @input-change-event="handleEmailInputEvent"
+                 id="titleInput"
+                 input-id="title"
+                 label="Title"
+                 placeholder="Enter the title of the saving goal"/>
+      <BaseInput :model-value="sumRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="sumToSaveInput"
+                 input-id="sumToSpareInput"
+                 type="number"
+                 label="Sum to save"
+                 min="0"
+                 placeholder="Enter the sum you would like to spare"/>
+      <BaseInput :model-value="dateRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="dueDateInput"
+                 input-id="dueDate"
+                 type="date"
+                 :min="getTodayDate()"
+                 label="Due date"/>
+    </form>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

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'
+
+const emit = defineEmits(['changeRouterEvent'])
+emit('changeRouterEvent', '/suitable-challenges')
+
+const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
+  'Quit subscription', 'Drop car', 'Short showers', 'Exercise outside', 'Make budget', 'Others'
+]
+
+</script>
+
+<template>
+  <div class="container">
+    <div>
+      <h3 class="d-flex align-items-center justify-content-center">
+        Which challenges are suitable for you?
+      </h3>
+    </div>
+
+    <div class="challenge-container">
+      <ChallangeCheckBox v-for="(item, index) in challenges" :id="index" :text="item"/>
+    </div>
+
+    <div class="confirm-button-container">
+      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.challenge-container {
+  justify-self: center;
+  max-width: 500px;
+}
+
+#confirmButton {
+  margin-bottom: 2rem;
+  width: 300px;
+}
+
+.confirm-button-container {
+  display: flex;
+  justify-content: center;
+}
+</style>
\ No newline at end of file

src/components/Configuration/ProgressBar.vue

+<script setup lang="ts">
+const props = defineProps({
+  percentage: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+
+<template>
+  <div class="container">
+    <div class="progress">
+      <div id="configuration-progress"
+           class="progress-bar progress-bar-striped bg-info progress-bar-animated"
+           role="progressbar"
+           :aria-valuenow="props.percentage"
+           :style="{ width: Math.round(props.percentage*100) + '%' }"
+           aria-valuemin="0"
+           aria-valuemax="100"/>
+    </div>
+    <label class="row text-info font-bold display-5">{{ Math.round(props.percentage*100) + '%' }} Completed</label>
+  </div>
+</template>
+
+<style scoped>
+.progress {
+  height: 35px;
+  border-radius: 12px;
+}
+
+.row {
+  justify-content: center;
+}
+</style>
\ No newline at end of file

src/components/InputFields/BaseInput.vue

@@ -25,6 +25,10 @@ const props = defineProps({
   isValid: {
     type: Boolean,
     default: false
+  },
+  min: {
+    type: String,
+    required: false
   }
 });
 
@@ -41,7 +45,9 @@ const onInputEvent = (event: any) => {
            :type="props.type"
            class="form-control"
            :placeholder="props.placeholder"
-           :id="inputId" required />
+           :id="inputId" required
+           :min="min"
+    />
     <div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
     <div v-else class="valid-feedback">Valid {{ label }}</div>
   </div>

src/components/Login/LoginForm.vue

@@ -9,7 +9,6 @@ const formRef = ref()
 
 const handleEmailInputEvent = (newValue: any) => {
   emailRef.value = newValue
-  console.log(emailRef.value)
 }
 
 const handlePasswordInputEvent = (newValue: any) => {

src/components/SignUp/SignUpForm.vue

@@ -2,7 +2,9 @@
 import BaseInput from '@/components/InputFields/BaseInput.vue'
 import Button1 from '@/components/Buttons/Button1.vue'
 import { ref } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter();
 const firstNameRef = ref('')
 const surnameRef = ref('')
 const emailRef = ref('')
@@ -34,6 +36,7 @@ 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/router/index.ts

@@ -81,6 +81,38 @@ const routes = [
     name: 'sign up',
     component: () => import('@/views/Authentication/SignUpView.vue'),
   },
+  {
+    path: '/configuration',
+    name: 'configuration',
+    component: () => import('@/views/ConfigurationView.vue'),
+    children: [
+      {
+        path: '/bank-id',
+        name: 'bankId',
+        component: () => import('@/components/Configuration/ConfigurationSteps/BankId.vue'),
+      },
+      {
+        path: '/commitment',
+        name: 'commitment',
+        component: () => import('@/components/Configuration/ConfigurationSteps/Commitment.vue'),
+      },
+      {
+        path: '/experience',
+        name: 'experience',
+        component: () => import('@/components/Configuration/ConfigurationSteps/Experience.vue'),
+      },
+      {
+        path: '/suitable-challenges',
+        name: 'suitable challenges',
+        component: () => import('@/components/Configuration/ConfigurationSteps/SuitableChallenges.vue'),
+      },
+      {
+        path: '/first-saving-goal',
+        name: 'first saving goal',
+        component: () => import('@/components/Configuration/ConfigurationSteps/FirstSavingGoal.vue'),
+      }
+    ]
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: { name: 'not-found' },

src/views/BasePageView.vue

 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from 'vue-router'
 import Footer from '@/components/BaseComponents/Footer.vue'
 import Menu from '@/components/BaseComponents/Menu.vue'
 </script>

src/views/ConfigurationView.vue

+<script setup lang="ts">
+import Configuration from '@/components/Configuration/Configuration.vue'
+import Menu from '@/components/BaseComponents/Menu.vue'
+import Footer from '@/components/BaseComponents/Footer.vue'
+</script>
+
+<template>
+  <Menu/>
+  <Configuration/>
+  <Footer/>
+</template>
\ No newline at end of file