Refactor/changed validation in SignUp (currently is gonna fail)

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/ConfigurationSteps/SuitableChallenges.vue

@@ -22,6 +22,7 @@ const onChangedChallengeEvent = (value) => {
     console.log('Reached')
     chosenChallenges.value = chosenChallenges.value.filter(item => item !== value[0]);
   }
+  console.log(chosenChallenges.value)
 }
 
 const onClick = () => {

src/components/InputFields/BaseInput.vue

@@ -22,10 +22,6 @@ const props = defineProps({
     type: String,
     default: ""
   },
-  isValid: {
-    type: Boolean,
-    default: false
-  },
   min: {
     type: String,
     required: false
@@ -33,6 +29,14 @@ const props = defineProps({
   pattern: {
     type: String,
     default: null
+  },
+  validMessage: {
+    type: String,
+    default: ''
+  },
+  invalidMessage: {
+    type: String,
+    default: ''
   }
 });
 
@@ -44,17 +48,16 @@ const onInputEvent = (event: any) => {
 <template>
   <div>
     <label :for="inputId">{{ label }}</label>
-    <input :value="props.modelValue"
+    <input :value="modelValue"
            @input="onInputEvent"
-           :type="props.type"
+           :type="type"
            class="form-control"
-           :placeholder="props.placeholder"
+           :placeholder="placeholder"
            :id="inputId" required
            :min="min"
-           :pattern="pattern"
-    />
-    <div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
-    <div v-else class="valid-feedback">Valid {{ label }}</div>
+           :pattern="pattern"/>
+    <div class="valid-feedback">{{ validMessage }}</div>
+    <div class="invalid-feedback">{{ invalidMessage }}</div>
   </div>
 </template>
 

src/components/Login/LoginForm.vue

@@ -8,8 +8,8 @@ import { useRouter, useRoute } from 'vue-router';
 import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
 import { useErrorStore } from '@/stores/ErrorStore';
 
-const emailRef = ref()
-const passwordRef = ref()
+const emailRef = ref('')
+const passwordRef = ref('')
 const formRef = ref()
 let errorMsg = ref('');
 
@@ -19,13 +19,18 @@ const userStore = useUserInfoStore();
 
 const handleEmailInputEvent = (newValue: any) => {
   emailRef.value = newValue
+  console.log(emailRef.value)
 }
 
 const handlePasswordInputEvent = (newValue: any) => {
   passwordRef.value = newValue
+  console.log(passwordRef.value)
 }
 
 const handleSubmit = async () => {
+  console.log(emailRef.value)
+  console.log(passwordRef.value)
+
   formRef.value.classList.add("was-validated")
   const loginUserPayload: LoginRequest = {
     email: emailRef.value,
@@ -60,10 +65,30 @@ const handleSubmit = async () => {
 <template>
   <div class="container-fluid">
     <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit" novalidate>
-      <BaseInput :model-value="emailRef" @input-change-event="handleEmailInputEvent" id="emailInput" input-id="email"
-        type="email" label="Email" placeholder="Enter your email" />
-      <BaseInput pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" :model-value="passwordRef" @input-change-event="handlePasswordInputEvent" id="passwordInput"
-        input-id="password" type="password" label="Password" placeholder="Enter password" />
+
+      <BaseInput :model-value="emailRef"
+                 @input-change-event="handleEmailInputEvent"
+                 id="emailInput"
+                 input-id="email"
+                 type="email"
+                 label="Email"
+                 placeholder="Enter your email"
+                 valid-message="Valid email"
+                 invalid-message="Invalid email"
+      />
+
+      <BaseInput :model-value="passwordRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="passwordInput"
+                 input-id="password"
+                 type="password"
+                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
+                 label="Password"
+                 placeholder="Enter password"
+                 valid-message="Valid password"
+                 invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"
+      />
+
       <p class="text-danger">{{ errorMsg }}</p>
       <button1 id="confirmButton" type="submit" @click="handleSubmit" button-text="Login"></button1>
     </form>

src/components/SignUp/SignUpForm.vue

@@ -5,15 +5,18 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter();
+
 const firstNameRef = ref('')
 const surnameRef = ref('')
 const emailRef = ref('')
 const passwordRef = ref('')
 const confirmPasswordRef = ref('')
 const formRef = ref()
+let samePasswords = ref(true)
 
 const handleFirstNameInputEvent = (newValue: any) => {
   firstNameRef.value = newValue
+  console.log(firstNameRef.value)
 }
 
 const handleSurnameInputEvent = (newValue: any) => {
@@ -26,21 +29,30 @@ const handleEmailInputEvent = (newValue: any) => {
 
 const handlePasswordInputEvent = (newValue: any) => {
   passwordRef.value = newValue
+  console.log(passwordRef.value)
 }
 
 const handleConfirmPasswordInputEvent = (newValue: any) => {
   confirmPasswordRef.value = newValue
+  console.log(confirmPasswordRef.value)
 }
 
-const handleSubmit = () => {
+const handleSubmit = async () => {
+  console.log(firstNameRef.value)
+
+  samePasswords.value = (passwordRef.value === confirmPasswordRef.value)
+  console.log(samePasswords.value)
   const form = formRef.value;
 
   // Check if the form is valid
   if (form.checkValidity()) {
     // Form is valid, submit the form or perform other actions
     console.log('Form is valid');
+  } else {
+    console.log('Form is not valid');
   }
 
+
   formRef.value.classList.add("was-validated")
 }
 
@@ -49,46 +61,54 @@ const handleSubmit = () => {
 <template>
   <div class="container">
     <form ref="formRef" id="signUpForm" @submit.prevent="handleSubmit">
-      <BaseInput :model-value="firstNameRef.value"
+      <BaseInput :model-value="firstNameRef"
                  @input-change-event="handleFirstNameInputEvent"
                  ref="firstNameRef"
                  id="firstNameInput"
                  input-id="first-name"
                  type="text"
                  label="First name"
-                 placeholder="Enter your first name"/>
-      <BaseInput :model-value="surnameRef.value"
+                 placeholder="Enter your first name"
+                 invalid-message="Please enter your first name"/>
+      <BaseInput :model-value="surnameRef"
                  @input-change-event="handleSurnameInputEvent"
                  ref="surnameRef"
                  id="surnameInput"
                  input-id="surname"
                  type="text"
                  label="Surname"
-                 placeholder="Enter your surname"/>
-      <BaseInput :model-value="emailRef.value"
+                 placeholder="Enter your surname"
+                 invalid-message="Please enter your surname"/>
+      <BaseInput :model-value="emailRef"
                  @input-change-event="handleEmailInputEvent"
                  ref="emailRef"
                  id="emailInput"
                  input-id="email"
                  type="email"
                  label="Email"
-                 placeholder="Enter your email"/>
-      <BaseInput :model-value="passwordRef.value"
+                 placeholder="Enter your email"
+                 invalid-message="Invalid email"/>
+      <BaseInput :model-value="passwordRef"
                  @input-change-event="handlePasswordInputEvent"
                  ref="passwordRef"
                  id="passwordInput"
                  input-id="password"
                  type="password"
+                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
                  label="Password"
-                 placeholder="Enter password"/>
-      <BaseInput :model-value="confirmPasswordRef.value"
+                 placeholder="Enter password"
+                 invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+      <BaseInput :modelValue="confirmPasswordRef"
                  @input-change-event="handleConfirmPasswordInputEvent"
                  ref="confirmPasswordRef"
                  id="confirmPasswordInput"
                  input-id="confirmPassword"
                  type="password"
+                 pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
                  label="Confirm Password"
-                 placeholder="Confirm password"/>
+                 placeholder="Confirm password"
+                 invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+      <p v-if="samePasswords" class="text-danger">The passwords are not identical</p>
       <button1 id="confirmButton" @click="handleSubmit" button-text="Sign up"></button1>
     </form>
   </div>