Added rules for the registerForm. Added validation on userName Fixed SelectedFooter routerLink around a div

src/views/main/RegisterForm.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="flex flex-col items-center min-w-[300px] m-4">
+    <div class="flex flex-col items-center min-w-[700px] m-4">
       <h1 class="text-center text-2xl font-bold mb-5">Inscription</h1>
       <div class="w-full h-0.5 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>
       <div class="w-full">
@@ -12,6 +12,7 @@
             prepend-inner-icon="mdi-account"
             color="transparent"
             class="text-black mb-4"
+            :rules="[userNameRule]"
         ></v-text-field>
         <div class="flex flex-wrap justify-between gap-4 mb-4">
           <v-text-field
@@ -43,6 +44,7 @@
             class="text-black mb-4"
             :error="emailError"
             :error-messages="emailErrorMessage"
+            :rules="[emailRule]"
         ></v-text-field>
         <v-text-field
             v-model="password"
@@ -55,6 +57,7 @@
             @click:append-inner="togglePasswordVisibility"
             color="transparent"
             class="text-black mb-4"
+            :rules="[passwordRule]"
         ></v-text-field>
         <v-text-field
             v-model="confirmPassword"
@@ -67,6 +70,7 @@
             @click:append-inner="togglePasswordVisibility"
             color="transparent"
             class="text-black mb-4"
+            :rules="[validatePasswordRule]"
         ></v-text-field>
         <v-btn
             class="w-full text-center text-white"
@@ -112,53 +116,73 @@ const errorMessage = ref('');
 const emailError = ref(false);
 const emailErrorMessage = ref('');
 
+// Validation regex
+const userNameRegex = /^[a-zA-Z0-9]+$/;
+const emailRegex = /.+@.+\..+/;
+const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_]).{6,}$/;
+
 // Messages d'erreur
 const ERROR_MESSAGES = {
   INVALID_EMAIL: 'E-mail doit être valide',
   PASSWORD_MISMATCH: 'Les mots de passe ne correspondent pas.',
-  WEAK_PASSWORD: 'Le mot de passe doit contenir au moins 6 caractères, un chiffre, une lettre minuscule, une lettre majuscule et un caractère non-alphanumérique.',
+  WEAK_PASSWORD: 'Doit contenir 6 caractères, un chiffre, une lettre minuscule, majuscule et un caractère non-alphanumérique.',
   GENERIC_ERROR: 'Une erreur est survenue. Veuillez réessayer.',
+  INVALID_USERNAME: "Le nom d'utilisateur ne doit contenir que des lettres sans accent et/ou des chiffres.",
 };
 
 function togglePasswordVisibility() {
   showPassword.value = !showPassword.value;
 }
 
-function validatePassword(password) {
-  const digitRegex = /\d/;
-  const lowercaseRegex = /[a-z]/;
-  const uppercaseRegex = /[A-Z]/;
-  const nonAlphanumericRegex = /\W|_/;
-  const lengthRequirement = password.length >= 6;
-
-  return digitRegex.test(password) &&
-      lowercaseRegex.test(password) &&
-      uppercaseRegex.test(password) &&
-      nonAlphanumericRegex.test(password) &&
-      lengthRequirement;
+function passwordRule(password) {
+  if (passwordRegex.test(password)) {
+    return true;
+  }
+  return ERROR_MESSAGES.WEAK_PASSWORD;
 }
 
-function validateEmail(email) {
-  const emailRegex = /.+@.+\..+/;
-  return emailRegex.test(email);
+function validatePasswordRule(validatePassword) {
+  if (password.value === validatePassword) {
+    return true;
+  }
+  return ERROR_MESSAGES.PASSWORD_MISMATCH;
+}
+
+function emailRule(email) {
+  if (emailRegex.test(email)) {
+    return true;
+  }
+  return ERROR_MESSAGES.INVALID_EMAIL
+}
+
+function userNameRule(userName) {
+  if (userNameRegex.test(userName)){
+    return true
+  }
+  return ERROR_MESSAGES.INVALID_USERNAME;
 }
 
 function validateForm() {
   emailError.value = false;
   emailErrorMessage.value = '';
 
-  if (!validateEmail(emailAddress.value)) {
+  if (!emailRegex.test(emailAddress.value)) {
     emailError.value = true;
     emailErrorMessage.value = ERROR_MESSAGES.INVALID_EMAIL;
     return;
   }
+  
+  if (!userNameRegex.test(userName.value)){
+    showErrorDialog(ERROR_MESSAGES.INVALID_EMAIL);
+    return;
+  }
 
   if (password.value !== confirmPassword.value) {
     showErrorDialog(ERROR_MESSAGES.PASSWORD_MISMATCH);
     return;
   }
 
-  if (!validatePassword(password.value)) {
+  if (!passwordRegex.test(password.value)) {
     showErrorDialog(ERROR_MESSAGES.WEAK_PASSWORD);
     return;
   }