Merged PR 100: Added website image to the creator page and file type into main

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/octet-stream",
                 }
             });
             
@@ -38,11 +38,11 @@ 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 ?? "octet-stream",
                 }
             });
             
@@ -56,7 +56,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/octet-stream",
                 }
             });
             

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">