I have added a new window to create a new user.

src/views/main/Join.vue

@@ -142,9 +142,6 @@
     </div>
   </div>
 
-
-
-
   <v-dialog v-model="showModal" max-width="600">
     <v-card>
       <v-card-title class="text-center" style="margin-top: 30px; margin-bottom: 40px;">
@@ -159,21 +156,15 @@
       <v-card-actions class="justify-end" style="margin-right: 20px;">
         <v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
       </v-card-actions>
-
     </v-card>
   </v-dialog>
-
-
-
 </template>
 
-
 <script setup>
 import { useClient } from "@/plugins/api.js";
 import { ref } from 'vue';
 
 const client = useClient();
-
 const showModal = ref(false);
 const name = ref("");
 const emailAddress = ref("");

src/views/main/Register.vue

@@ -0,0 +1,24 @@
+<template>
+  <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]">
+        <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">
+        <register-form></register-form>
+      </div>
+    </div>
+  </div>
+  <selected-footer></selected-footer>
+</template>
+
+<script setup>
+import SelectedFooter from "@/views/main/SelectedFooter.vue";
+import RegisterForm from "@/views/main/RegisterForm.vue";
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+
+</script>

src/views/main/RegisterForm.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div class="flex flex-col items-center min-w-[300px] 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">
+        <div class="flex flex-wrap justify-between gap-4 mb-4">
+          <v-text-field
+              v-model="firstName"
+              label="Prénom"
+              variant="outlined"
+              dense
+              prepend-inner-icon="mdi-account"
+              color="transparent"
+              class="text-black flex-grow min-w-[250px]"
+          ></v-text-field>
+          <v-text-field
+              v-model="lastName"
+              label="Nom"
+              variant="outlined"
+              dense
+              prepend-inner-icon="mdi-account"
+              color="transparent"
+              class="text-black flex-grow min-w-[250px]"
+          ></v-text-field>
+        </div>
+        <v-text-field
+            v-model="email"
+            label="Courriel"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-email"
+            color="transparent"
+            class="text-black mb-4"
+        ></v-text-field>
+        <v-text-field
+            v-model="password"
+            label="Mot de passe"
+            :type="showPassword ? 'text' : 'password'"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-lock"
+            append-inner-icon="mdi-eye"
+            @click:append-inner="showPassword = !showPassword"
+            color="transparent"
+            class="text-black mb-4"
+        ></v-text-field>
+        <v-text-field
+            v-model="confirmPassword"
+            label="Confirmer mot de passe"
+            :type="showPassword ? 'text' : 'password'"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-lock"
+            append-inner-icon="mdi-eye"
+            @click:append-inner="showPassword = !showPassword"
+            color="transparent"
+            class="text-black mb-4"
+        ></v-text-field>
+        <v-btn
+            class="w-full text-center text-white"
+            :style="{ backgroundColor: '#A30E79' }"
+            @click="createUser"
+        >
+          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>
+
+</template>
+
+<script setup>
+import { useClient } from "@/plugins/api.js";
+import {ref} from 'vue';
+
+const client = useClient();
+const firstName = ref('');
+const lastName = ref('');
+const email = ref('');
+const password = ref('');
+const confirmPassword = ref('');
+const showPassword = ref(false);
+const errorSnackBar = ref(false);
+
+
+async function createUser() {
+  try{
+    const userInformation ={
+      FirstName: firstName.value,
+      LastName: lastName.value,
+      EmailAddress: email.value,
+      UserName: userName.value,
+      Password: password.value,      
+    };
+    
+    await client.post('/api/Users', userInformation);
+        
+  }catch (error) {
+    console.log(error);
+}
+}
+
+
+
+</script>
+
+<style scoped>
+
+</style>