refactor/Added create goal form in configuration path

src/components/Configuration/ChallangeCheckBox.vue

@@ -10,6 +10,10 @@ const props = defineProps({
     type: String,
     default: ''
   },
+  enumValue: {
+    type: String,
+    default: ''
+  },
   modelValue: {
     type: Boolean,
     default: false
@@ -24,21 +28,24 @@ const props = defineProps({
  */
 const onChallengeChanged = (event: any) => {
   const value = event.target.checked
-  const data = [props.text, value]
+  const data = [props.enumValue, value]
   emit('challengeChangedEvent', data)
 }
 
 </script>
 
 <template>
-  <span>
+  <div class="col-auto">
     <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>
+  </div>
 </template>
 
 <style scoped>
 label {
   margin: 5px
 }
+div.col-auto {
+  padding: 0;
+}
 </style>
\ No newline at end of file

src/components/Configuration/Configuration.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}
+const configurationSteps = {'/commitment': 1, '/experience': 2, '/suitable-challenges': 3, '/first-saving-goal': 4, '/finished-configuration': 5}
 const length = Object.keys(configurationSteps).length
 let percentage = ref(1/length);
 

src/components/Configuration/ConfigurationSteps/Commitment.vue

@@ -23,7 +23,7 @@ let errorMsg = ref();
  * and navigates to the '/experience' route. If form validation fails, displays
  * an error message prompting the user to select an option before continuing.
  */
-const onClick = () => {
+const handleSubmit = () => {
   const form = formRef.value;
   if (form.checkValidity()) {
     let choice = '';
@@ -45,7 +45,7 @@ const onClick = () => {
     <h3 id="commitmentText" class="align-items-center justify-content-center">
       In which degree are you willing to make changes?
     </h3>
-    <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+    <form class="btn-group-vertical" ref="formRef">
 
       <input ref="lowRef" type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off" required>
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Low</label>
@@ -59,7 +59,7 @@ const onClick = () => {
     </form>
     <p class="text-danger">{{ errorMsg }}</p>
     <div class="confirm-button-container">
-      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Continue"></button1>
     </div>
   </div>
 </template>

src/components/Configuration/ConfigurationSteps/Experience.vue

@@ -23,7 +23,7 @@ let errorMsg = ref();
  * and navigates to the '/suitable challenges' route. If form validation fails, displays
  * an error message prompting the user to select an option before continuing.
  */
-const onClick = () => {
+const handleSubmit = () => {
   const form = formRef.value;
   if (form.checkValidity()) {
     let choice = ''
@@ -48,7 +48,7 @@ const onClick = () => {
       </h3>
     </div>
 
-    <form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
+    <form class="btn-group-vertical" ref="formRef">
 
       <input ref="beginnerRef" type="radio" class="btn-check" name="experience" id="btn-check-outlined" autocomplete="off" required>
       <label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Beginner</label>
@@ -61,7 +61,7 @@ const onClick = () => {
     </form>
     <p class="text-danger">{{ errorMsg }}</p>
     <div class="confirm-button-container">
-      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Continue"/>
     </div>
 </div>
 </template>

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 formRef = ref<any>()
+const titleRef = ref<string>()
+let descriptionRef = ref<string>()
+const sumRef = ref<number>()
+const dateRef = ref<string>()
 
-const onClick = () => {
+const handleSubmit = () => {
   formRef.value.classList.add("was-validated")
+  const form = formRef.value
+  if (!form.checkValidity()) {
+    return;
+  }
+
+  // TODO integrate user creation and goal creation with backend.
+
 }
 
 const getTodayDate = () => {
   const today = new Date();
   const year = today.getFullYear();
-  let month = today.getMonth() + 1;
-  let day = today.getDate();
-
+  let month: string | number = today.getMonth() + 1;
+  let day: string | number = 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}`;
 };
- */
+
+const handleTitleInputEvent = (newTitle: string) => {
+  titleRef.value = newTitle;
+}
+
+const handleDateInputEvent = (newDate: string) => {
+  dateRef.value = newDate;
+}
+
+const handleSumInputEvent = (newSum: number) => {
+  sumRef.value = newSum;
+}
+
 </script>
 
 <template>
-  <!--
+
   <div class="container">
     <div>
       <h3 class="d-flex align-items-center justify-content-center">
-        Create your first saving goal
+        Now it remains only one step
       </h3>
+      <h5 class="d-flex align-items-center justify-content-center">
+        Create your first saving goal
+      </h5>
     </div>
 
-    <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit">
+    <form ref="formRef" id="loginForm">
       <BaseInput :model-value="titleRef"
-                 @input-change-event="handleEmailInputEvent"
+                 @input-change-event="handleTitleInputEvent"
                  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"/>
+      <div>
+        <label for="description">Description</label>
+        <textarea v-model="descriptionRef"
+                  type="text"
+                  maxlength="150"
+                  class="form-control"
+                  placeholder="Enter description of the saving goal here (optional)"
+                  id="description"/>
+      </div>
       <BaseInput :model-value="dateRef"
-                 @input-change-event="handlePasswordInputEvent"
+                 @input-change-event="handleDateInputEvent"
                  id="dueDateInput"
                  input-id="dueDate"
                  type="date"
                  :min="getTodayDate()"
                  label="Due date"/>
+      <BaseInput :model-value="sumRef"
+                 @input-change-event="handleSumInputEvent"
+                 id="sumToSaveInput"
+                 input-id="sumToSpareInput"
+                 type="number"
+                 label="Sum to save"
+                 min="0"
+                 placeholder="Enter the sum you would like to spare (kr)"/>
     </form>
 
     <div class="confirm-button-container">
-      <button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
+      <button1 id="confirmButton" @click="handleSubmit" button-text="Continue"></button1>
     </div>
   </div>
-  -->
+
 </template>
 
 <style scoped>
-/*
+
+#description {
+  resize: none;
+  height: auto;
+}
+
 #confirmButton {
+  margin-top: 1rem;
   margin-bottom: 2rem;
   width: 300px;
 }
@@ -88,5 +119,5 @@ const getTodayDate = () => {
   display: flex;
   justify-content: center;
 }
-*/
+
 </style>
\ No newline at end of file