Added setup for handling form-validation

package-lock.json

@@ -11,6 +11,7 @@
         "@popperjs/core": "^2.11.8",
         "axios": "^1.6.8",
         "bootstrap": "^5.3.3",
+        "install": "^0.13.0",
         "js-cookie": "^3.0.5",
         "oh-vue-icons": "^1.0.0-rc3",
         "pinia": "^2.1.7",
@@ -5018,6 +5019,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/install/-/install-0.13.0.tgz",
+      "integrity": "sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/is-ci": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "@popperjs/core": "^2.11.8",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",
+    "install": "^0.13.0",
     "js-cookie": "^3.0.5",
     "oh-vue-icons": "^1.0.0-rc3",
     "pinia": "^2.1.7",

src/components/UpdateUserComponents/UpdateUserLayout.vue

 <script setup lang="ts">
+import BaseInput from "@/components/InputFields/BaseInput.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
+}
+
+
+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 = () => {
+  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');
+  }
+
+  formRef.value.classList.add("was-validated")
+}
 
 </script>
 
@@ -11,27 +53,67 @@
         <p class="h2">Username</p>
       </div>
       <div class="col-md-10">
-        <form>
+        <form class="needs-validation" novalidate>
           <div class="row">
             <div class="form-group col-md-6">
-              <label for="inputEmail4">First Name</label>
+              <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"/>
+              <label for="inputFirstName" class="form-label">First Name</label>
               <input type="text" class="form-control" id="inputFirstName" placeholder="ex: Brian">
             </div>
             <div class="form-group col-md-6">
+              <BaseInput :model-value="surnameRef.value"
+                         @input-change-event="handleSurnameInputEvent"
+                         ref="surnameRef"
+                         id="surnameInput"
+                         input-id="surname"
+                         type="text"
+                         label="Surname"
+                         placeholder="Enter your surname"/>
               <label for="inputPassword4">Last Name</label>
               <input type="text" class="form-control" id="inputLastName" placeholder="ex: Cox">
             </div>
           </div>
           <div class="form-group col-md-6">
+            <BaseInput :model-value="emailRef.value"
+                       @input-change-event="handleEmailInputEvent"
+                       ref="emailRef"
+                       id="emailInput"
+                       input-id="email"
+                       type="email"
+                       label="Email"
+                       placeholder="Enter your email"/>
             <label for="inputAddress">Email</label>
             <input type="email" class="form-control" id="inputMail" placeholder="ex: briancox@mail.com">
           </div>
           <div class="row">
             <div class="form-group col-md-6">
+              <BaseInput :model-value="passwordRef.value"
+                         @input-change-event="handlePasswordInputEvent"
+                         ref="passwordRef"
+                         id="passwordInput"
+                         input-id="password"
+                         type="password"
+                         label="Password"
+                         placeholder="Enter password"/>
               <label for="inputEmail4">Password</label>
               <input type="password" class="form-control" id="inputPassword" placeholder="Password with capital letter, number and a special character">
             </div>
             <div class="form-group col-md-6">
+              <BaseInput :model-value="confirmPasswordRef.value"
+                         @input-change-event="handleConfirmPasswordInputEvent"
+                         ref="confirmPasswordRef"
+                         id="confirmPasswordInput"
+                         input-id="confirmPassword"
+                         type="password"
+                         label="Confirm Password"
+                         placeholder="Confirm password"/>
               <label for="inputPassword4">Confirmed Password</label>
               <input type="password" class="form-control" id="inputPasswordConfirmed" placeholder="Repeat password">
             </div>