Adds creation of creator profile

src/stores/userStore.js

@@ -19,8 +19,18 @@ export const useUserStore = defineStore(
                 }
             })
 
-        const user = useSessionStorage('user-user', {}, {writeDefaults: false})
+        const user = useSessionStorage(
-        const creator = useSessionStorage('user-creator', {}, {writeDefaults: false})
+            'user-user',
+            {},
+            {writeDefaults: false})
+        const creator = useSessionStorage(
+            'user-creator',
+            {},
+            {writeDefaults: false})
+
+        const hasCreator = computed(() =>
+            creator.value
+            && Object.getOwnPropertyNames(creator.value).length >= 1)
         
         const alias = computed(() => {
             if (user.value) {
@@ -49,8 +59,9 @@ export const useUserStore = defineStore(
                 }
             } catch (error) {
                 user.value = undefined;
+                creator.value = undefined
             }
         }
 
-        return {user, creator, alias, portraitUrl}
+        return {user, creator, alias, hasCreator, portraitUrl, fetchCurrentUserProfile}
     })

src/views/main/Header.vue

@@ -6,7 +6,8 @@
     <div class="flex items-center">
       <v-app-bar-nav-icon @click.stop="sideBarStore.toggle()">
       </v-app-bar-nav-icon>
-      <RouterLink to="/" class="hidden md:block">
+
+      <RouterLink to="/">
         <v-img
             src="/medias/hutopy.png"
             ref="popupButtonRef"
@@ -15,14 +16,6 @@
         ></v-img>
       </RouterLink>
       
-      <RouterLink to="/" class="block md:hidden">
-        <v-img
-            src="/images/hutopymedia/icons/logohutopy.png"
-            ref="popupButtonRef"
-            alt="Hutopy Logo"
-            class="mr-2 h-10 w-10"
-        ></v-img>
-      </RouterLink>
     </div>
 
     <!-- Spacer to push the Explorer button to the center -->
@@ -50,7 +43,6 @@
     </v-btn>
 
 
-
     <!-- Spacer to keep the search bar to the right -->
     <div class="flex-grow"></div>
 
@@ -111,8 +103,8 @@
                 </router-link>
               </v-list-item>
 
-              <v-list-item v-if="userStore.creator && !Object.keys(userStore.creator).length > 0" class="nav-button">
+              <v-list-item v-if="!userStore.hasCreator" class="nav-button">
-                <router-link :to="`/@${userStore.creator.name}`">
+                <router-link to="/profile">
                   <v-btn class="w-100" variant="plain">Activer votre page</v-btn>
                 </router-link>
               </v-list-item>

src/views/profile/ProfilePage.vue

@@ -84,7 +84,6 @@ const isDown = ref(false);
 const startX = ref(0);
 const scrollLeft = ref(0);
 
-
 onMounted(() => {
   const slider = document.querySelector('.custom-scroll');
   slider.addEventListener('mousedown', (e) => {

src/views/profile/creators/ColorsPicker.vue

@@ -14,10 +14,10 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested']);
 
-const bannerTopColor = ref(props.creator.colors.bannerTop);
+const bannerTopColor = ref(props.creator.colors.bannerTop)
-const bannerBottomColor = ref(props.creator.colors.bannerBottom);
+const bannerBottomColor = ref(props.creator.colors.bannerBottom)
-const accentColor = ref(props.creator.colors.accent);
+const accentColor = ref(props.creator.colors.accent)
-const menuColor = ref(props.creator.colors.menu);
+const menuColor = ref(props.creator.colors.menu)
 
 const selectedColorName = ref(props.colorName);
 const selectedColor = computed({

src/views/profile/creators/CreateCreator.vue

@@ -1,67 +1,48 @@
 <script setup>
 import {ref} from 'vue'
 
-const props = defineProps({
+const emits = defineEmits(['requestAccept', 'requestCancel'])
-  creator: {type: Object, required: true},
-});
 
-const isDialogActive = ref(false);
+const creatorName = ref('')
 
-
+function requestCancel() {
-const cancel = () => {
+  emits('requestCancel')
-  closeDialog();
-};
-
-const closeDialog = () => {
-  isDialogActive.value = false;
 }
 
-const CreateCreator = () => {
+function requestAccept() {
+  emits('requestAccept', creatorName.value)
+}
 
-};
 </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="py-2 text-2xl font-bold flex flex-row items-center">
-      <div class="flex-grow text-center">Informations pour votre</div>
+      <div class="flex-grow text-center">Devenez Créateur</div>
-      <v-btn icon @click="cancelPost" class="ml-auto" variant="text">
+      <v-btn icon @click="requestCancel" 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"
+        v-model="creatorName"
-          label="Nom"
+        label="Nom de créateur"
         outlined
     ></v-text-field>
-    </div>
 
-    <div class="flex flex-row align-center">
+    <div class="flex flex-row justify-end gap-2">
-      <v-text-field
+      <v-btn
-          variant="outlined"
+          variant="flat"
-          v-model="Titre"
+          @click="requestCancel"
-          label="Titre"
+          :style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
-          outlined
+      >
-      ></v-text-field>
+        Annuler
-    </div>
+      </v-btn>
 
-    <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"
+          @click="requestAccept"
-          class="w-full mb-5"
           :style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
       >
         Créer

src/views/profile/creators/CreatorPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref} from 'vue'
+import {computed, ref} from 'vue'
 import {useUserStore} from "@/stores/userStore.js"
 import Socials from './Socials.vue'
 import BannerPicker from './BannerPicker.vue'
@@ -7,9 +7,17 @@ import ColorsPicker from './ColorsPicker.vue'
 import LogoPicker from "./LogoPicker.vue"
 import About from "./About.vue";
 import CreateCreator from "./CreateCreator.vue";
+import {useClient} from "@/plugins/api.js";
 
 const userStore = useUserStore()
 
+const colorBannerTop = computed(() => userStore.creator.colors.bannerTop || '#a0c0f0')
+const colorBannerBottom = computed(() => userStore.creator.colors.bannerBottom || '#a0c0f0')
+const colorAccent = computed(() => userStore.creator.colors.accent || '#a0c0f0')
+const colorMenu = computed(() => userStore.creator.colors.menu || '#a0c0f0')
+const imageBanner = computed(() => userStore.creator.images.banner || '/images/placeholders/banner.png')
+const imageLogo = computed(() => userStore.creator.images.logo || '/images/placeholders/logo.png')
+
 const dialog = ref(false);
 const currentComponent = ref('')
 const colorToEdit = ref(null)
@@ -23,6 +31,26 @@ const componentsMap = {
   CreateCreator
 };
 
+async function requestAccept(creatorName) {
+  const client = useClient()
+  const response = await client.post(
+      '/api/creators',
+      {
+        'creatorId': userStore.user.id,
+        'name': creatorName
+      })
+  if (response.status >= 200 && response.status < 300) {
+    await userStore.fetchCurrentUserProfile()
+    dialog.value = false
+  } else {
+    console.log(`An issue while creating the creator: ${response.statusText}`)
+  }
+}
+
+function requestCancel() {
+  dialog.value = false
+}
+
 const openDialog = (component, colorName = null) => {
   currentComponent.value = componentsMap[component]
   colorToEdit.value = colorName
@@ -44,8 +72,9 @@ const closeDialog = () => {
         <component :is="currentComponent"
                    :creator="userStore.creator"
                    :colorName="colorToEdit"
-                   @closeRequested="closeDialog()
+                   @closeRequested="closeDialog"
-"
+                   @requestAccept="requestAccept"
+                   @requestCancel="requestCancel"
         ></component>
       </v-card-text>
     </v-card>
@@ -58,49 +87,9 @@ const closeDialog = () => {
       Informations de votre page
     </h1>
 
-    <div v-if="userStore.creator.name == null">
+    <div v-if="userStore.hasCreator" class="w-full max-w-[800px]">
-      <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="my-10 border rounded-2xl">
-        <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">
@@ -136,14 +125,14 @@ const closeDialog = () => {
         </div>
       </div>
 
-    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="border rounded-2xl">
         <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
         <div class="flex flex-col w-full">
 
           <button
               @click="openDialog('ColorsPicker', 'bannerTop')"
               class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
-            :style="{ backgroundColor: userStore.creator.colors.bannerTop }"
+              :style="{ backgroundColor: colorBannerTop }"
           >
             <v-icon>mdi-eyedropper-variant</v-icon>
           </button>
@@ -151,7 +140,7 @@ const closeDialog = () => {
           <button>
             <img
                 @click="openDialog('BannerPicker')"
-              :src="userStore.creator.images.banner"
+                :src="imageBanner"
                 class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
                 alt="Tutorial Banner"
             >
@@ -160,7 +149,7 @@ const closeDialog = () => {
           <button
               @click="openDialog('ColorsPicker', 'bannerBottom')"
               class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
-            :style="{ backgroundColor: userStore.creator.colors.bannerBottom }"
+              :style="{ backgroundColor: colorBannerBottom }"
           >
             <v-icon>mdi-eyedropper-variant</v-icon>
           </button>
@@ -169,8 +158,8 @@ const closeDialog = () => {
             <img
                 @click="openDialog('LogoPicker')"
                 class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
-              :style="{ borderColor: userStore.creator.colors.accent }"
+                :style="{ borderColor: colorAccent }"
-              :src="userStore.creator.images.logo"
+                :src="imageLogo"
                 alt="Profile Image"
             >
           </button>
@@ -197,8 +186,7 @@ const closeDialog = () => {
         </div>
       </div>
 
-    <!-- Réseaux sociaux -->
+      <div class="mt-10 border rounded-2xl">
-    <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
 
         <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
 
@@ -289,6 +277,46 @@ const closeDialog = () => {
         </div>
       </div>
     </div>
+
+    <div v-else class="w-full max-w-[800px]">
+      <div class="my-10 border rounded-2xl">
+
+        <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">
+            <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">
+            <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>
+
   </div>
 
 </template>

src/views/profile/creators/LogoPicker.vue

@@ -11,8 +11,6 @@
     />
   </div>
 
-
-
   <v-file-input
       v-model="selectedFile"
       variant="outlined"