Merged PR 134: Added rules for the registerForm. Added validation on userName Fixed Selected...

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

src/views/main/Register.vue

@@ -5,7 +5,7 @@
       <div class="max-w-[700px] min-w-[300px] mt-14">
         <img class="rounded-none sm:rounded-2xl sm:w-full mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
       </div>
-      <div class="flex flex-col items-center min-w-[300px] m-12">
+      <div class="flex flex-col items-center min-w-[300px] sm:min-w-[400px] md:min-w-[500px] lg:min-w-[700px] m-12">
         <register-form></register-form>
       </div>
     </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-[300px] sm:min-w-[400px] md:min-w-[500px] lg: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) {
+function passwordRule(password) {
-  const digitRegex = /\d/;
+  if (passwordRegex.test(password)) {
-  const lowercaseRegex = /[a-z]/;
+    return true;
-  const uppercaseRegex = /[A-Z]/;
+  }
-  const nonAlphanumericRegex = /\W|_/;
+  return ERROR_MESSAGES.WEAK_PASSWORD;
-  const lengthRequirement = password.length >= 6;
-
-  return digitRegex.test(password) &&
-      lowercaseRegex.test(password) &&
-      uppercaseRegex.test(password) &&
-      nonAlphanumericRegex.test(password) &&
-      lengthRequirement;
 }
 
-function validateEmail(email) {
+function validatePasswordRule(validatePassword) {
-  const emailRegex = /.+@.+\..+/;
+  if (password.value === validatePassword) {
-  return emailRegex.test(email);
+    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;
   }

src/views/main/SelectedFooter.vue

@@ -1,9 +1,9 @@
 <template>
-  <router-link to="/">
   <div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto">
+    <router-link to="/">
     <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy">
+    </router-link>
   </div>
-  </router-link>
 
   <div class="flex flex-row justify-center space-x-10 py-10">
     <a href="https://www.facebook.com/profile.php?id=61556819217561">