Add Password verification and email format verification

src/views/main/Register.vue

@@ -2,7 +2,7 @@
   <div class="hidden sm:block" style="height: 40px"></div>
   <div>
     <div class="flex flex-col lg:flex-row items-center justify-center">
-      <div class="max-w-[700px] min-w-[300px]">
+      <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">
@@ -17,7 +17,6 @@
 import SelectedFooter from "@/views/main/SelectedFooter.vue";
 import RegisterForm from "@/views/main/RegisterForm.vue";
 import { useRouter } from 'vue-router';
-
 const router = useRouter();
 
 

src/views/main/RegisterForm.vue

@@ -4,6 +4,15 @@
       <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">
+        <v-text-field
+            v-model="userName"
+            label="Username"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-account"
+            color="transparent"
+            class="text-black mb-4"
+        ></v-text-field>
         <div class="flex flex-wrap justify-between gap-4 mb-4">
           <v-text-field
               v-model="firstName"
@@ -25,13 +34,15 @@
           ></v-text-field>
         </div>
         <v-text-field
-            v-model="email"
+            v-model="emailAddress"
             label="Courriel"
             variant="outlined"
             dense
             prepend-inner-icon="mdi-email"
             color="transparent"
             class="text-black mb-4"
+            :error="emailError"
+            :error-messages="emailErrorMessage"
         ></v-text-field>
         <v-text-field
             v-model="password"
@@ -41,7 +52,7 @@
             dense
             prepend-inner-icon="mdi-lock"
             append-inner-icon="mdi-eye"
-            @click:append-inner="showPassword = !showPassword"
+            @click:append-inner="togglePasswordVisibility"
             color="transparent"
             class="text-black mb-4"
         ></v-text-field>
@@ -53,62 +64,133 @@
             dense
             prepend-inner-icon="mdi-lock"
             append-inner-icon="mdi-eye"
-            @click:append-inner="showPassword = !showPassword"
+            @click:append-inner="togglePasswordVisibility"
             color="transparent"
             class="text-black mb-4"
         ></v-text-field>
         <v-btn
             class="w-full text-center text-white"
             :style="{ backgroundColor: '#A30E79' }"
-            @click="createUser"
+            @click="validateForm"
         >
           Connecter
         </v-btn>
-        <div v-if="errorSnackBar" class="mb-4 text-red-600">
-          Nom d'utilisateur ou mot de passe invalide.
-          <button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
-        </div>
-      </div>
       </div>
     </div>
 
+    <!-- Modal for errors -->
+    <v-dialog v-model="errorDialog" max-width="500px">
+      <v-card>
+        <v-card-title class="headline">Erreur</v-card-title>
+        <v-card-text>{{ errorMessage }}</v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="primary" text @click="closeErrorDialog">Fermer</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useClient } from "@/plugins/api.js";
-import {ref} from 'vue';
 
+const router = useRouter();
 const client = useClient();
+
 const firstName = ref('');
 const lastName = ref('');
-const email = ref('');
+const emailAddress = ref('');
 const password = ref('');
 const confirmPassword = ref('');
+const userName = ref('');
 const showPassword = ref(false);
-const errorSnackBar = ref(false);
+const errorDialog = ref(false);
+const errorMessage = ref('');
 
+const emailError = ref(false);
+const emailErrorMessage = ref('');
+
+// 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.',
+  GENERIC_ERROR: 'Une erreur est survenue. Veuillez réessayer.',
+};
+
+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 validateEmail(email) {
+  const emailRegex = /.+@.+\..+/;
+  return emailRegex.test(email);
+}
+
+function validateForm() {
+  emailError.value = false;
+  emailErrorMessage.value = '';
+
+  if (!validateEmail(emailAddress.value)) {
+    emailError.value = true;
+    emailErrorMessage.value = ERROR_MESSAGES.INVALID_EMAIL;
+    return;
+  }
+
+  if (password.value !== confirmPassword.value) {
+    showErrorDialog(ERROR_MESSAGES.PASSWORD_MISMATCH);
+    return;
+  }
+
+  if (!validatePassword(password.value)) {
+    showErrorDialog(ERROR_MESSAGES.WEAK_PASSWORD);
+    return;
+  }
+
+  createUser();
+}
+
+function showErrorDialog(message) {
+  errorMessage.value = message;
+  errorDialog.value = true;
+}
+
+function closeErrorDialog() {
+  errorDialog.value = false;
+}
 
 async function createUser() {
-  try{
+  try {
-    const userInformation ={
+    const userInformation = {
       FirstName: firstName.value,
       LastName: lastName.value,
-      EmailAddress: email.value,
+      EmailAddress: emailAddress.value,
       UserName: userName.value,
       Password: password.value,
     };
 
     await client.post('/api/Users', userInformation);
-        
+    router.push('/login');
-  }catch (error) {
+  } catch (error) {
     console.log(error);
+    showErrorDialog(ERROR_MESSAGES.GENERIC_ERROR);
+  }
 }
-}
-
-
-
 </script>
-
-<style scoped>
-
-</style>