From 6c23fe005cca3aad602ef17098074804d4d18eee Mon Sep 17 00:00:00 2001
From: Dominic Villemure <doumvil@hotmail.com>
Date: Wed, 10 Jul 2024 01:36:41 -0400
Subject: [PATCH] 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                   | 10 ++++++----
 src/views/creators/CreatorBanner.vue |  6 ++++--
 src/views/main/ProfileBanner.vue     |  6 +++++-
 src/views/main/SocialLinks.vue       |  8 +++++++-
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/stores/user.js b/src/stores/user.js
index 1b45f26..be2b170 100644
--- a/src/stores/user.js
+++ b/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",
                 }
             });
             
diff --git a/src/views/creators/CreatorBanner.vue b/src/views/creators/CreatorBanner.vue
index c82955e..6330906 100644
--- a/src/views/creators/CreatorBanner.vue
+++ b/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;
diff --git a/src/views/main/ProfileBanner.vue b/src/views/main/ProfileBanner.vue
index 7526195..535a0db 100644
--- a/src/views/main/ProfileBanner.vue
+++ b/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">
diff --git a/src/views/main/SocialLinks.vue b/src/views/main/SocialLinks.vue
index 6b472e5..f61320d 100644
--- a/src/views/main/SocialLinks.vue
+++ b/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">