Fixed validation and added the initial information of user to form

src/components/UpdateUserComponents/UpdateUserLayout.vue

 <script setup lang="ts">
 import BaseInput from "@/components/InputFields/BaseInput.vue";
-import {ref} from "vue";
+import {onMounted, ref} from "vue";
+import {AuthenticationService, LeaderboardService, UserControllerService} from "@/api";
 
-const firstNameRef = ref('')
+
+
+
+
+const firstNameRef = ref()
 const surnameRef = ref('')
 const emailRef = ref('')
 const passwordRef = ref('')
@@ -10,6 +15,26 @@ const confirmPasswordRef = ref('')
 const formRef = ref()
 let samePasswords = ref(true)
 
+
+async function setupForm() {
+  try {
+    let response = await UserControllerService.getUser();
+    console.log(response.firstName)
+
+    firstNameRef.value = response.firstName;
+    if (response.lastName != null) {
+      surnameRef.value = response.lastName;
+    }
+    if (response.email != null) {
+      emailRef.value = response.email
+    }
+  }catch (err){
+    console.error(err)
+  }
+}
+
+
+
 const handleFirstNameInputEvent = (newValue: any) => {
   firstNameRef.value = newValue
 }
@@ -34,21 +59,28 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
 const handleSubmit = async () => {
   console.log(firstNameRef.value)
 
+  let isValid
+
   samePasswords.value = (passwordRef.value === confirmPasswordRef.value)
   console.log(samePasswords.value)
+  formRef.value.classList.add("was-validated")
   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")
+    // Check if the form is valid
+    if (form.checkValidity()) {
+      if(samePasswords.value){
+        console.log('Form is valid');
+      }
+    } else {
+      console.log('Form is not valid');
+    }
+
 }
+onMounted(()=>{
+  setupForm()
+})
 
 
 
@@ -63,77 +95,79 @@ const handleSubmit = async () => {
         <p class="h2">Username</p>
       </div>
       <div class="col-md-10">
-        <form @submit.prevent="handleSubmit">
+        <form ref="formRef" @submit.prevent="handleSubmit" id="newForm">
           <div class="row">
-            <div class="form-group col-md-6">
+            <div class="form-group col-md-6" >
              <!-- <label for="inputFirstName" class="form-label">First Name</label>
               <input type="text" class="form-control" id="inputFirstName" placeholder="ex: Brian">-->
-              <BaseInput :model-value="firstNameRef.value"
+              <BaseInput :model-value="firstNameRef"
                   @input-change-event="handleFirstNameInputEvent"
-                         ref="firstNameRef"
-                         id="firstNameInput-change"
-                         input-id="first-name"
+                         id="firstNameInputChange"
+                         input-id="first-name-new"
                          type="text"
                          label="First name"
                          placeholder="Enter your first name"
-                         invalid-message="Please enter your first name"/>
+                         invalid-message="Please enter your first name"
+
+              />
             </div>
             <div class="form-group col-md-6">
              <!-- <label for="inputPassword4">Last Name</label>
               <input type="text" class="form-control" id="inputLastName" placeholder="ex: Cox">-->
-              <BaseInput :model-value="surnameRef.value"
+              <BaseInput :model-value="surnameRef"
                          @input-change-event="handleSurnameInputEvent"
-                         ref="surnameRef"
                          id="surnameInput-change"
-                         input-id="surname"
+                         input-id="surname-new"
                          type="text"
                          label="Surname"
                          placeholder="Enter your surname"
-                         invalid-message="Please enter your surname"/>
+                         invalid-message="Please enter your surname"
+                          />
             </div>
           </div>
           <div class="form-group col-md-6">
            <!-- <label for="inputAddress">Email</label>
             <input type="email" class="form-control" id="inputMail" placeholder="ex: briancox@mail.com">-->
-            <BaseInput :model-value="emailRef.value"
+            <BaseInput :model-value="emailRef"
                        @input-change-event="handleEmailInputEvent"
-                       ref="emailRef"
                        id="emailInput-change"
-                       input-id="email"
+                       input-id="email-new"
                        type="email"
                        label="Email"
                        placeholder="Enter your email"
-                       invalid-message="Invalid email"/>
+                       invalid-message="Invalid email"
+                       />
           </div>
           <div class="row">
             <div class="form-group col-md-6">
              <!-- <label for="inputPassword">Password</label>
               <input type="password" class="form-control" id="inputPassword" placeholder="Password with capital letter, number and a special character">-->
-              <BaseInput :model-value="passwordRef.value"
+              <BaseInput :model-value="passwordRef"
                          @input-change-event="handlePasswordInputEvent"
-                         ref="passwordRef"
                          id="passwordInput-change"
-                         input-id="password"
+                         input-id="password-new"
                          type="password"
                          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
                          label="Password"
                          placeholder="Enter password"
-                         invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"/>
+                         invalid-message="Password must be between 4 and 16 characters and contain one capital letter, small letter and a number"
+                         />
             </div>
             <div class="form-group col-md-6">
              <!-- <label for="inputPasswordConfirmed">Confirmed Password</label>
               <input type="password" class="form-control" id="inputPasswordConfirmed" placeholder="Repeat password">-->
-              <BaseInput :modelValue="confirmPasswordRef.value"
+              <BaseInput :modelValue="confirmPasswordRef"
                          @input-change-event="handleConfirmPasswordInputEvent"
-                         ref="confirmPasswordRef"
                          id="confirmPasswordInput-change"
-                         input-id="confirmPassword"
+                         input-id="confirmPassword-new"
                          type="password"
                          pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}"
                          label="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>
+                         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>
             </div>
           </div>
           <button type="submit" @click="handleSubmit" class="btn btn-primary">Change settings</button>