Adds creation of creator profile

src/stores/userStore.js

@@ -17,11 +17,21 @@ export const useUserStore = defineStore(
                     user.value = undefined
                     creator.value = undefined
                 }
-            })       
+            })
-        
-        const user = useSessionStorage('user-user', {}, {writeDefaults: false})
-        const creator = useSessionStorage('user-creator', {}, {writeDefaults: false})
 
+        const user = useSessionStorage(
+            '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) {
                 return user.value.alias || `${user.value.firstName || ''} ${user.value.lastName || ''}`.trim() || 'Anonyme'
@@ -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"
@@ -14,15 +15,7 @@
             class="mr-2 h-10 w-20"
         ></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 -->
@@ -49,7 +42,6 @@
       <v-icon>mdi-earth</v-icon>
     </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>
@@ -141,11 +133,11 @@
 </template>
 
 <script setup>
-import { ref, onBeforeUnmount, onBeforeMount } from "vue";
+import {ref, onBeforeUnmount, onBeforeMount} from "vue";
-import { useRouter } from 'vue-router';
+import {useRouter} from 'vue-router';
-import { useSideBarStore } from '@/stores/sideBarStore.js';
+import {useSideBarStore} from '@/stores/sideBarStore.js';
-import { useUserStore } from "@/stores/userStore.js";
+import {useUserStore} from "@/stores/userStore.js";
-import { useAuthStore } from "@/stores/authStore.js";
+import {useAuthStore} from "@/stores/authStore.js";
 
 const authStore = useAuthStore()
 const userStore = useUserStore()

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
-      <v-text-field
+        variant="outlined"
-          variant="outlined"
+        v-model="creatorName"
-          v-model="Nom"
+        label="Nom de créateur"
-          label="Nom"
+        outlined
-          outlined
+    ></v-text-field>
-      ></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,28 +72,220 @@ const closeDialog = () => {
         <component :is="currentComponent"
                    :creator="userStore.creator"
                    :colorName="colorToEdit"
-                   @closeRequested="closeDialog()
+                   @closeRequested="closeDialog"
-"
+                   @requestAccept="requestAccept"
+                   @requestCancel="requestCancel"
         ></component>
       </v-card-text>
     </v-card>
   </v-dialog>
 
-<!--  Lorsque l'utilisateur n'a pas de creator name-->
+  <!--  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 v-if="userStore.hasCreator" class="w-full max-w-[800px]">
-      <div class="my-10 border rounded-2xl w-full max-w-[800px]">
+
+      <div class="my-10 border rounded-2xl">
+
+        <div class="py-5 uppercase ml-4">Informations</div>
+        <div class="flex flex-col w-full">
+          <button
+
+              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</span>
+            <span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
+            <span class="flex-none">  
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('About')"
+              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">{{ userStore.creator.about.title }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('About')"
+              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">{{ userStore.creator.about.description }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+        </div>
+      </div>
+
+      <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: colorBannerTop }"
+          >
+            <v-icon>mdi-eyedropper-variant</v-icon>
+          </button>
+
+          <button>
+            <img
+                @click="openDialog('BannerPicker')"
+                :src="imageBanner"
+                class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+                alt="Tutorial Banner"
+            >
+          </button>
+
+          <button
+              @click="openDialog('ColorsPicker', 'bannerBottom')"
+              class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
+              :style="{ backgroundColor: colorBannerBottom }"
+          >
+            <v-icon>mdi-eyedropper-variant</v-icon>
+          </button>
+
+          <button class="flex justify-center my-5">
+            <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: colorAccent }"
+                :src="imageLogo"
+                alt="Profile Image"
+            >
+          </button>
+
+          <button
+              @click="openDialog('ColorsPicker', 'accent')"
+              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="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
+            <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
+            <span class="flex-none">
+        <v-icon>mdi-eyedropper-variant</v-icon>
+          </span>
+          </button>
+
+          <button
+              @click="openDialog('ColorsPicker', 'menu')"
+              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="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
+            <span class="flex-auto text-left pr-6">Couleur des entêtes de menus</span>
+            <span class="flex-none">
+           <v-icon>mdi-eyedropper-variant</v-icon>
+          </span>
+          </button>
+        </div>
+      </div>
+
+      <div class="mt-10 border rounded-2xl">
+
+        <div class="py-5 uppercase ml-4">Réseaux Sociaux</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">
+            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <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">
+            <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <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">
+          <span class="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px"
+                                                                   height="23px"></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
+            <span class="flex-none">          
+                        <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <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 ">
+            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <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 ">
+          <span class="flex-none pa-2 min-w-32 text-left"> 
+            <img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
+          </span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <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 ">
+            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <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 ">
+            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+          <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 rounded-b-2xl  ">
+            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
+            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
+            <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+          </button>
+
+        </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 w-full">
+              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">  
@@ -75,7 +295,7 @@ const closeDialog = () => {
 
           <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">
+              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">
@@ -94,201 +314,9 @@ const closeDialog = () => {
           </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
-       
-            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</span>
-          <span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
-          <span class="flex-none">  
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-        
-        <button
-            @click="openDialog('About')"
-            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">{{ userStore.creator.about.title }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('About')"
-            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">{{ userStore.creator.about.description }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-      </div>
     </div>
 
-    <div class="border rounded-2xl w-full max-w-[800px]">
-      <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 }"
-        >
-          <v-icon>mdi-eyedropper-variant</v-icon>
-        </button>
-
-        <button>
-          <img
-              @click="openDialog('BannerPicker')"
-              :src="userStore.creator.images.banner"
-              class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
-              alt="Tutorial Banner"
-          >
-        </button>
-
-        <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 }"
-        >
-          <v-icon>mdi-eyedropper-variant</v-icon>
-        </button>
-
-        <button class="flex justify-center my-5">
-          <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 }"
-              :src="userStore.creator.images.logo"
-              alt="Profile Image"
-          >
-        </button>
-
-        <button
-            @click="openDialog('ColorsPicker', 'accent')"
-            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="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
-          <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
-          <span class="flex-none">
-        <v-icon>mdi-eyedropper-variant</v-icon>
-          </span>
-        </button>
-
-        <button
-            @click="openDialog('ColorsPicker', 'menu')"
-            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="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
-          <span class="flex-auto text-left pr-6">Couleur des entêtes de menus</span>
-          <span class="flex-none">
-           <v-icon>mdi-eyedropper-variant</v-icon>
-          </span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Réseaux sociaux -->
-    <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
-
-      <div class="py-5 uppercase ml-4">Réseaux Sociaux</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">
-          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <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">
-          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <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">
-          <span class="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px"
-                                                                   height="23px"></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
-          <span class="flex-none">          
-                        <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <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 ">
-          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <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 ">
-          <span class="flex-none pa-2 min-w-32 text-left"> 
-            <img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
-          </span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <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 ">
-          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <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 ">
-          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
-          <span class="flex-none">
-            <v-icon>mdi-chevron-right</v-icon>
-          </span>
-        </button>
-
-        <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 rounded-b-2xl  ">
-          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
-          <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</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"