Added website image to the creator page and use type of file when uploading pictures. Restriction for .png, .jpeg, .jpg for now

src/stores/user.js

@@ -28,7 +28,7 @@ export const useUserStore = defineStore('user', () => {
             const updateProfilePictureEndpoint = haveNewProfilePicture ? `/api/UpdateMyUser/profile-picture` : `/api/UpdateMyUser/profile-picture?url=${myUserModel.storedDataUrls.profilePictureUrl}`;
             const response = await client.post(updateProfilePictureEndpoint, profilePicture, {
                 headers: {
-                    'Content-Type': 'application/octet-stream',
+                    'Content-Type': profilePicture?.type ?? "application/stream-octet",
                 }
             });
             
@@ -38,14 +38,16 @@ export const useUserStore = defineStore('user', () => {
         }
         if (typeof myUserModel.storedDataUrls.bannerPictureUrl !== "object") {
             const haveNewBannerPicture = bannerPicture !== null && bannerPicture.size !== 0;
-
+            
             const updateBannerPictureEndpoint = haveNewBannerPicture ? `/api/UpdateMyUser/banner-picture` : `/api/UpdateMyUser/banner-picture?url=${myUserModel.storedDataUrls.bannerPictureUrl}`;
             const response = await client.post(updateBannerPictureEndpoint, bannerPicture, {
                 headers: {
-                    'Content-Type': 'application/octet-stream',
+                    'Content-Type': bannerPicture?.type ?? "application/stream-octet",
                 }
             });
             
+            console.log(response);
+            
             if (haveNewBannerPicture) {
                 this.user.value.storedDataUrls.bannerPictureUrl = response.data;
             }
@@ -56,7 +58,7 @@ export const useUserStore = defineStore('user', () => {
             const updateWebsiteIconEndpoint = haveNewWebsiteIcon ? `/api/UpdateMyUser/website-icon` : `/api/UpdateMyUser/website-icon?url=${myUserModel.storedDataUrls.websiteIconUrl}`;
             const response = await client.post(updateWebsiteIconEndpoint, websiteIcon, {
                 headers: {
-                    'Content-Type': 'application/octet-stream',
+                    'Content-Type': websiteIcon?.type ?? "application/stream-octet",
                 }
             });
             

src/views/creators/CreatorBanner.vue

@@ -14,7 +14,8 @@
               :href="socialNetwork.url" target="_blank"
              class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
             <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
-            <img v-if="socialNetwork.icon.includes('tiktok')" src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
+            <img v-if="socialNetwork.icon.includes('tiktok')" :src="socialNetwork.icon" class="w-9 h-9" alt="Tiktok">
+            <img v-if="socialNetwork.icon.includes('websiteIcon')" :src="socialNetwork.icon" class="w-9 h-9" alt="Website">
           </a>
         </div>
       </div>
@@ -171,7 +172,8 @@ function GetActiveSocialNetworkUrls(){
     socialNetworks.push({icon: "mdi-youtube", url: props.creator.socialNetworks.youtubeUrl})
   }
   if (userSocialNetworks.yourWebsiteUrl !== ''){
-    socialNetworks.push({icon: "mdi-web", url: props.creator.socialNetworks.yourWebsiteUrl})
+    const websiteIconWithBackup = props.creator.storedDataUrls.websiteIconUrl === '' ? "mdi-web" : props.creator.storedDataUrls.websiteIconUrl;
+    socialNetworks.push({icon: websiteIconWithBackup, url: props.creator.socialNetworks.yourWebsiteUrl})
   }
   
   return socialNetworks;

src/views/main/ProfileBanner.vue

@@ -36,7 +36,9 @@
     <div class="px-3 py-3">
       <v-file-input
           ref="bannerImageInput"
-          v-model="bannerImage" 
+          accept=".png, .jpeg, .jpg"
+          v-model="bannerImage"
+          hint="png, jpeg or jpg"
           label="Téléverser une nouvelle bannière"
           @change="onBannerFileChange">
       </v-file-input>
@@ -57,6 +59,8 @@
       <div class="px-3">
         <v-file-input
             ref="profileImageInput"
+            accept=".png, .jpeg, .jpg"
+            hint="png, jpeg or jpg"
             v-model="profilePicture" 
             label="Téléverser une nouvelle photo de profil"
             @change="onProfileFileChange">

src/views/main/SocialLinks.vue

@@ -35,7 +35,13 @@
       <div class="flex flex-col space-y-4">
         <div class="flex items-center mb-2">
           <label class="text-lg mr-4">Icône pour votre site web *svg</label>
-          <v-file-input v-model="iconFile" label="Téléverser une icône" @change="onFileChange"></v-file-input>
+          <v-file-input 
+              v-model="iconFile"
+              accept=".png, .jpeg, .jpg"
+              hint="png, jpeg or jpg"
+              label="Téléverser une icône" 
+              @change="onFileChange">
+          </v-file-input>
         </div>
         <div v-if="iconUrl" class="flex justify-center">
           <img :src="iconUrl" alt="Icon" class="icon-preview">