refactor/Added validation display for login and sign up

src/components/InputFields/BaseInput.vue

 <script setup lang="ts">
 
+const emit = defineEmits(['inputChangeEvent']);
 const props = defineProps({
   label: {
     type: String,
@@ -16,19 +17,33 @@ const props = defineProps({
   inputId: {
     type: String,
     required: true
+  },
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  isValid: {
+    type: Boolean,
+    default: false
   }
 });
+
+const onInputEvent = (event: any) => {
+  emit('inputChangeEvent', event.target.value)
+}
 </script>
 
 <template>
   <div>
     <label :for="inputId">{{ label }}</label>
-    <input :type="props.type"
+    <input :value="props.modelValue"
+           @input="onInputEvent"
+           :type="props.type"
            class="form-control"
            :placeholder="props.placeholder"
            :id="inputId" required />
-    <div class="invalid-feedback">Invalid {{ label }}</div>
-    <div class="valid-feedback">Correct {{ label }}</div>
+    <div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div>
+    <div v-else class="valid-feedback">Valid {{ label }}</div>
   </div>
 </template>
 

src/components/Login/LoginForm.vue

 <script setup lang="ts">
 import BaseInput from '@/components/InputFields/BaseInput.vue'
 import Button1 from '@/components/Buttons/Button1.vue'
+import { ref } from 'vue'
+
+const emailRef = ref()
+const passwordRef = ref()
+const formRef = ref()
+
+const handleEmailInputEvent = (newValue: any) => {
+  emailRef.value = newValue
+  console.log(emailRef.value)
+}
+
+const handlePasswordInputEvent = (newValue: any) => {
+  passwordRef.value = newValue
+}
 
 const handleSubmit = () => {
+  formRef.value.classList.add("was-validated")
   alert("Expected to be logged in when backend are finished") // Todo remove this line
 }
+
 </script>
 
 <template>
   <div class="container-fluid">
-    <form id="loginForm" @submit.prevent="handleSubmit">
-      <BaseInput id="emailInput"
+    <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit">
+      <BaseInput :model-value="emailRef"
+                 @input-change-event="handleEmailInputEvent"
+                 id="emailInput"
                  input-id="email"
-                 type="text"
+                 type="email"
                  label="Email"
                  placeholder="Enter your email"/>
-      <BaseInput id="passwordInput"
+      <BaseInput :model-value="passwordRef"
+                 @input-change-event="handlePasswordInputEvent"
+                 id="passwordInput"
                  input-id="password"
                  type="password"
                  label="Password"
                  placeholder="Enter password"/>
-      <button1 id="confirmButton" @click="handleSubmit" button-text="Login"></button1>
+      <button1 id="confirmButton" type="submit" @click="handleSubmit" button-text="Login"></button1>
     </form>
   </div>
 </template>

src/components/SignUp/SignUpForm.vue

 <script setup lang="ts">
 import BaseInput from '@/components/InputFields/BaseInput.vue'
 import Button1 from '@/components/Buttons/Button1.vue'
+import { ref } from 'vue'
+
+const firstNameRef = ref('')
+const surnameRef = ref('')
+const emailRef = ref('')
+const passwordRef = ref('')
+const confirmPasswordRef = ref('')
+const formRef = ref()
+
+const handleFirstNameInputEvent = (newValue: any) => {
+  firstNameRef.value = newValue
+  console.log(firstNameRef.value)
+}
+
+const handleSurnameInputEvent = (newValue: any) => {
+  surnameRef.value = newValue
+}
+
+const handleEmailInputEvent = (newValue: any) => {
+  emailRef.value = newValue
+}
+
+const handlePasswordInputEvent = (newValue: any) => {
+  passwordRef.value = newValue
+}
+
+const handleConfirmPasswordInputEvent = (newValue: any) => {
+  confirmPasswordRef.value = newValue
+}
 
 const handleSubmit = () => {
+  formRef.value.classList.add("was-validated")
   alert("Expected to be transferred to initial configuration") // Todo remove this line
 }
 
@@ -10,28 +40,43 @@ const handleSubmit = () => {
 
 <template>
   <div class="container">
-    <form id="signUpForm" @submit.prevent="handleSubmit">
-      <BaseInput id="firstNameInput"
+    <form ref="formRef" id="signUpForm" @submit.prevent="handleSubmit">
+      <BaseInput :model-value="firstNameRef.value"
+                 @input-change-event="handleFirstNameInputEvent"
+                 ref="firstNameRef"
+                 id="firstNameInput"
                  input-id="first-name"
                  type="text"
                  label="First name"
                  placeholder="Enter your first name"/>
-      <BaseInput id="surnameInput"
+      <BaseInput :model-value="surnameRef.value"
+                 @input-change-event="handleSurnameInputEvent"
+                 ref="surnameRef"
+                 id="surnameInput"
                  input-id="surname"
                  type="text"
                  label="Surname"
                  placeholder="Enter your surname"/>
-      <BaseInput id="emailInput"
+      <BaseInput :model-value="emailRef.value"
+                 @input-change-event="handleEmailInputEvent"
+                 ref="emailRef"
+                 id="emailInput"
                  input-id="email"
-                 type="text"
+                 type="email"
                  label="Email"
                  placeholder="Enter your email"/>
-      <BaseInput id="passwordInput"
+      <BaseInput :model-value="passwordRef.value"
+                 @input-change-event="handlePasswordInputEvent"
+                 ref="passwordRef"
+                 id="passwordInput"
                  input-id="password"
                  type="password"
                  label="Password"
                  placeholder="Enter password"/>
-      <BaseInput id="confirmPasswordInput"
+      <BaseInput :model-value="confirmPasswordRef.value"
+                 @input-change-event="handleConfirmPasswordInputEvent"
+                 ref="confirmPasswordRef"
+                 id="confirmPasswordInput"
                  input-id="confirmPassword"
                  type="password"
                  label="Confirm Password"