refactor/fixed password validation

src/components/InputFields/BaseInput.vue

@@ -29,6 +29,10 @@ const props = defineProps({
   min: {
     type: String,
     required: false
+  },
+  pattern: {
+    type: String,
+    default: null
   }
 });
 
@@ -47,6 +51,7 @@ const onInputEvent = (event: any) => {
            :placeholder="props.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>

src/components/Login/LoginForm.vue

@@ -62,7 +62,7 @@ const handleSubmit = async () => {
     <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 :model-value="passwordRef" @input-change-event="handlePasswordInputEvent" id="passwordInput"
+      <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" />
       <p class="text-danger">{{ errorMsg }}</p>
       <button1 id="confirmButton" type="submit" @click="handleSubmit" button-text="Login"></button1>

src/components/SignUp/SignUpForm.vue

@@ -33,6 +33,14 @@ const handleConfirmPasswordInputEvent = (newValue: any) => {
 }
 
 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")
 }