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

src/router/router.js

@@ -10,6 +10,7 @@ import LoginView from '../views/LoginView.vue'
 import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'
 import Join from '../views/main/Join.vue'
+import Register from '../views/main/Register.vue'
 import Home from '../views/main/Home.vue'
 import Wallet from '../views/main/Wallet.vue'
 import Profile from '../views/main/Profile.vue'
@@ -93,6 +94,12 @@ const routes = [
         component: Join,
         meta: { hideSideBar: true }
     },
+    {
+        path: '/register',
+        name: 'register',
+        component: Register,
+        meta: { hideSideBar: true }
+    },
     {
         path: '/signup',
         name: 'signup',

src/views/creators/CreatorBanner.vue

@@ -27,7 +27,7 @@
       <div>
         <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
              :src="creator.storedDataUrls.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png'"
-             alt="Profile Banner" style="max-height: 550px">
+             alt="Profile Banner" style="max-height: 425px">
       </div>
     </div>
   </div>
@@ -52,8 +52,8 @@
 
         <!-- User Info -->
         <div class="mt-2 flex flex-col items-center lg:items-start lg:ml-64">
-          <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24">
+          <div class="text-3xl font-bold text-center lg:text-left md:mt-24 lg:mt-0 sm:mt-24 mt-24 text-white cap ">
-            <p :style="{ color: creator.profileColors.accent }">{{ creator.firstName }} {{ creator.lastName }}</p>
+            <p class="capitalize">{{creator.name}}</p>
           </div>
           <div class="text-2xl text-center lg:text-left">
             <p :style="{ color: creator.profileColors.accent }">{{ creator.occupation }}</p>
@@ -62,8 +62,7 @@
         </div>
 
         <!-- Buttons -->
-        <div
+        <div class="flex flex-wrap items-center  mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4">
-            class="flex flex-wrap items-center justify-center mt-2 sm:mt-8 md:mt-4 lg:mt-0 lg:ml-auto space-x-2 sm:space-x-4 ml-">
           <AboutYou :creator="creator"></AboutYou>
 
           <subscribe-button :creator="creator"></subscribe-button>

src/views/creators/SubscribeButton.vue

@@ -23,7 +23,7 @@ function unsubscribeFromCreator() {
 <template>
   
   <template v-if="isSubscribe">
-    <v-btn class="action"
+    <v-btn class="action mr-4"
            @click="subscribeToCreator()"
            style="transition: background-color 0.3s ease;">
       S'ABONNER
@@ -31,7 +31,7 @@ function unsubscribeFromCreator() {
   </template>
   
   <template v-else>
-    <v-btn class="action"
+    <v-btn class="action mr-4"
            @click="unsubscribeFromCreator()"
            style="transition: background-color 0.3s ease;">
       SE DESABONNER
@@ -43,7 +43,11 @@ function unsubscribeFromCreator() {
 <style scoped>
 
 .action {
-  @apply py-2 px-4 rounded bg-gray-100 hover:bg-gray-300
+    @apply py-2  px-4 rounded bg-gray-100 hover:bg-gray-300
-}
+ }
+
+
+
+
 
 </style>

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>