Added information to create your page.

src/views/Profile/Dialogs/PageInformations/CreateCreator.vue

@@ -0,0 +1,71 @@
+<script setup>
+import {ref} from 'vue'
+
+const props = defineProps({
+  creator: {type: Object, required: true},
+});
+
+const isDialogActive = ref(false);
+
+
+const cancel = () => {
+  closeDialog();
+};
+
+const closeDialog = () => {
+  isDialogActive.value = false;
+}
+
+const CreateCreator = () => {
+
+};
+</script>
+
+<template>
+  <div class="text-center">
+    <div class="py-4 text-2xl font-bold border-b mb-2 flex flex-row items-center">
+      <div class="flex-grow text-center">Informations pour votre</div>
+      <v-btn icon @click="cancelPost" class="ml-auto" variant="text">
+        <v-icon>mdi-close</v-icon>
+      </v-btn>
+    </div>
+
+    <div class="flex flex-row align-center">
+      <v-text-field
+          variant="outlined"
+          v-model="Nom"
+          label="Nom"
+          outlined
+      ></v-text-field>
+    </div>
+
+    <div class="flex flex-row align-center">
+      <v-text-field
+          variant="outlined"
+          v-model="Titre"
+          label="Titre"
+          outlined
+      ></v-text-field>
+    </div>
+
+    <div class="flex flex-row align-center">
+      <v-textarea
+          variant="outlined"
+          v-model="Description"
+          label="Description"
+          outlined
+      ></v-textarea>
+    </div>
+
+    <div class="flex justify-end space-x-4">
+      <v-btn
+          variant="outlined"
+          @click="CreateCreator"
+          class="w-full mb-5"
+          :style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
+      >
+        Créer
+      </v-btn>
+    </div>
+  </div>
+</template>

src/views/Profile/PageInformations.vue

@@ -6,6 +6,7 @@ import BannerPicker from '@/views/Profile/Dialogs/PageInformations/BannerPicker.
 import ColorsPicker from '@/views/Profile/Dialogs/PageInformations/ColorsPicker.vue'
 import LogoPicker from "@/views/Profile/Dialogs/PageInformations/LogoPicker.vue"
 import About from "@/views/Profile/Dialogs/PageInformations/About.vue";
+import CreateCreator from "@/views/Profile/Dialogs/PageInformations/CreateCreator.vue";
 
 const userStore = useUserStore()
 
@@ -18,7 +19,8 @@ const componentsMap = {
   LogoPicker,
   Socials,
   ColorsPicker,
-  About
+  About,
+  CreateCreator
 };
 
 const openDialog = (component, colorName = null) => {
@@ -37,30 +39,71 @@ const closeDialog = () => {
 <template>
 
   <v-dialog v-model="dialog" max-width="800px">
-    <v-card>
+    <v-card :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }">
       <v-card-text>
         <component :is="currentComponent"
                    :creator="userStore.creator"
                    :colorName="colorToEdit"
-                   @closeRequested="closeDialog()"
+                   @closeRequested="closeDialog()
+"
         ></component>
       </v-card-text>
     </v-card>
   </v-dialog>
 
+<!--  Lorsque l'utilisateur n'a pas de creator name-->
   <div class="flex flex-col items-center w-full">
     <h1 class="uppercase pb-5 text-2xl">
       <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
       Informations de votre page
     </h1>
 
+    <div v-if="userStore.creator.name == null">
+      <div class="my-10 border rounded-2xl w-full max-w-[800px]">
+
+        <div class="py-5 uppercase ml-4 px-4">Informations pour pour votre page</div>
+        <div class="flex flex-col w-full">
+          <button
+              @click="openDialog('CreateCreator')"
+              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+            <span class="flex-none pa-2 min-w-32 text-left">Nom  (Unique) </span>
+            <span class="flex-auto text-left pr-6">Vous devez vous assurer de choisir un nom unique ou d'utiliser votre propre nom. Cela est important car c'est votre nom de marque, celui que vous allez présenter aux gens. Par exemple, notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour notre page officielle sur la plateforme.</span>
+            <span class="flex-none">  
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('CreateCreator')"
+              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+            <span class="flex-none pa-2 min-w-32 text-left">Titre</span>
+            <span class="flex-auto text-left pr-6">Le titre doit refléter ce que vous souhaitez mettre en avant sur la plateforme, ce que vous voulez présenter comme contenu ou la raison de votre présence sur la plateforme. Par exemple, des artistes pourraient écrire chanteur, danseur, peintre ou autre. Une entreprise pourrait indiquer son activité. Dans notre cas, pour Hutopy, c'est 'Créer un monde meilleur'. </span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('CreateCreator')"
+              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
+            <span class="pa-2 min-w-32 text-left">Description</span>
+            <span class="flex-auto text-left pr-6">Pour la description, c'est un espace où vous pouvez écrire ce que vous souhaitez : décrire votre page, le service que vous offrez, la raison de votre présence sur la plateforme, votre historique... Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici afin de créer une plateforme sur laquelle les gens pourront s'exprimer et créer, tout en étant respectés et non exploités. </span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+        </div>
+      </div>
+      
+    </div>
+    
+<!--    Si la personne a une creator name-->
+  <div v-if="userStore.creator.name != null">
     <!-- Nom de la page créateur -->
     <div class="my-10 border rounded-2xl w-full max-w-[800px]">
 
       <div class="py-5 uppercase ml-4">Informations</div>
-
       <div class="flex flex-col w-full">
-
         <button
             @click="openDialog('Socials')"
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
@@ -90,7 +133,6 @@ const closeDialog = () => {
             <v-icon>mdi-chevron-right</v-icon>
           </span>
         </button>
-
       </div>
     </div>
 
@@ -247,6 +289,7 @@ const closeDialog = () => {
       </div>
     </div>
   </div>
+  </div>
 
 </template>
 

src/views/main/Header.vue

@@ -83,6 +83,12 @@
                 </router-link>
               </v-list-item>
 
+              <v-list-item v-if="userStore.creator && !Object.keys(userStore.creator).length > 0" class="nav-button">
+                <router-link :to="`/@${userStore.creator.name}`">
+                  <v-btn class="w-100 " variant="plain">Activer votre page </v-btn>
+                </router-link>
+              </v-list-item>
+
               <v-list-item class="nav-button">
                 <v-list-item-title>
                   <v-btn to="/profile" class="w-100" variant="plain">Mon profil</v-btn>