feat: Add creator profile and about section improvements

frontend/src/views/creators/AboutCreator.vue

@@ -0,0 +1,647 @@
+<template>
+  <div class="p-4 relative" 
+       @mouseenter="showEditButtons = isLoggedIn && creatorProfileStore.creator?.id === brandingStore.value.id"
+       @mouseleave="showEditButtons = false">
+    
+    <!-- Edit buttons with absolute positioning -->
+    <div v-if="showEditButtons || isEditMode"
+         class="absolute top-4 right-4 flex gap-2">
+
+      <!-- Edit button with pencil icon -->
+      <button
+          v-if="!isEditMode"
+          class="w-12 h-12 bg-hutopyPrimary rounded-full flex items-center justify-center shadow-lg"
+          @click="toggleEditMode()"
+          :title="t('common.edit')"
+      >
+        <v-icon large>mdi-pencil</v-icon>
+      </button>
+
+      <!-- Save button -->
+      <button
+          v-if="isEditMode"
+          class="w-12 h-12 bg-hutopyPrimary rounded-full flex items-center justify-center shadow-lg"
+          @click="saveChanges()"
+          :title="t('common.save')"
+      >
+        <v-icon large>mdi-check</v-icon>
+      </button>
+
+      <!-- Cancel button -->
+      <button
+          v-if="isEditMode"
+          class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center shadow-lg"
+          @click="cancelEdit"
+          :title="t('common.cancel')"
+      >
+        <v-icon large>mdi-close</v-icon>
+      </button>
+    </div>
+
+    <!-- MainPage -->
+    <div class="flex flex-col mt-4">
+
+      <h1 class="flex justify-start text-2xl font-bold text-center">{{ t('creator.sections.about.title') }}</h1>
+
+      <div>
+        <!-- Main image  Bloc D'information-->
+        <div class="py-4">
+
+          <div v-if="!isEditMode">
+            <p v-if="mainImageText" class="text-lg text-justify">
+              {{ mainImageText }}
+            </p>
+          </div>
+          <v-textarea v-if="isEditMode" v-model="editableMainImageText" class="w-full p-2 py-6 " :label="t('creator.sections.about.description')"
+                      variant="outlined"></v-textarea>
+
+          <div class="flex flex-row items-center space-x-4">
+            <!--          image principale-->
+            <div v-if="!isEditMode" class="flex justify-center items-center w-1/2">
+              <img
+                  v-if="mainImageUrl"
+                  :src="mainImageUrl"
+                  :alt="t('creator.sections.about.mainImage')"
+                  class="max-w-full h-auto cursor-pointer"/>
+            </div>
+            <div v-if="isEditMode" class="relative flex justify-center">
+              <label>
+                <input class="hidden" type="file" @change="updateImage('mainImageUrl', $event)"/>
+                <img :src="mainImageUrl || fallbackImage"
+                     :alt="t('creator.sections.about.mainImage')"
+                     class=" max-w-full h-auto cursor-pointer max-h-96"/>
+              </label>
+              <button v-if="isEditMode"
+                      class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600"
+                      @click="deleteImage('mainImageUrl')">
+                {{ t('common.delete') }}
+              </button>
+            </div>
+
+            <div class="w-1/2 flex flex-col justify-center">
+              <h2 v-if="videoSubtitleMain" class="text-xl font-semibold text-center">
+                {{ t('creator.sections.support.title') }}
+              </h2>
+
+              <div v-if="!isEditMode">
+                <p v-if="mainVideoText" class="text-lg text-justify">
+                  {{ mainVideoText }}
+                </p>
+              </div>
+
+              <div v-if="isEditMode">
+                <v-textarea
+                    v-model="editableMainVideoText"
+                    class="p-2 rounded-md mt-4"
+                    :label="t('creator.sections.support.description')"
+                    rows="10"
+                    variant="outlined"
+                ></v-textarea>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <div v-if="!isEditMode" class="py-5 text-lg font-bold">
+              {{ videoSubtitle }}
+            </div>
+            <div v-if="isEditMode">
+              <v-text-field
+                  v-model="editableVideoSubtitle"
+                  class="w-full p-2"
+                  :label="t('creator.sections.support.subtitle')"
+                  variant="outlined"
+              ></v-text-field>
+            </div>
+
+            <v-textarea v-if="isEditMode"
+                v-model="editableVideoText"
+                class="w-full p-2"
+                :label="t('creator.sections.support.description')"
+                variant="outlined"
+            ></v-textarea>
+          </div>
+        </div>
+
+        <!--      media-->
+        <div v-if="!isEditMode">
+          <div v-if="videoUrlMain" class="video-container">
+            <iframe
+                :src="videoUrlMain"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen
+                class="video-frame"
+                title="YouTube video player">
+            </iframe>
+          </div>
+        </div>
+
+        <div v-if="isEditMode">
+          <v-text-field
+              v-model="editableVideoUrlMain"
+              class="w-full p-2 rounded-md"
+              :label="t('creator.fields.videoUrl')"
+              type="text"
+              variant="outlined"
+          />
+        </div>
+
+        <!-- Images  -->
+
+        <div v-if="!isEditMode">
+          <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText ">
+            <!--        images-->
+            <div class="py-2">
+              <div>
+                <!-- Affichage des images -->
+                <div class="flex  gap-2">
+                  <!-- Première image -->
+                  <div v-if="image1Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image1Url"
+                         :alt="t('creator.sections.about.image1')"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
+
+                  <!-- Deuxième image -->
+                  <div v-if="image2Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image2Url"
+                         :alt="t('creator.sections.about.image2')"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
+
+                  <!-- Troisième image -->
+                  <div v-if="image3Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image3Url"
+                         :alt="t('creator.sections.about.image3')"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
+
+                  <!-- Quatrième image -->
+                  <div v-if="image4Url" class="relative w-full sm:flex-1 ">
+                    <img :src="image4Url"
+                         :alt="t('creator.sections.about.image4')"
+                         class="rounded-md max-w-full h-auto cursor-pointer"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="isEditMode" class="rounded-2xl">
+          <!--images-->
+          <div class=" text-2xl pa-2">{{ t('creator.sections.about.images') }}</div>
+          <div class="pa-2 grid grid-cols-1 gap-4 md:grid-cols-4">
+            <!-- Première image -->
+            <div class="relative">
+              <label>
+                <input class="hidden" type="file" @change="updateImage('image1Url', $event)"/>
+                <img :src="image1Url || fallbackImage"
+                     :alt="t('creator.sections.about.image1')"
+                     class="rounded-md max-w-full h-auto cursor-pointer"/>
+              </label>
+              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
+                      @click="deleteImage('image1Url')">
+                {{ t('common.delete') }}
+              </button>
+            </div>
+
+            <!-- Deuxième image -->
+            <div class="relative">
+              <label>
+                <input class="hidden" type="file" @change="updateImage('image2Url', $event)"/>
+                <img :src="image2Url || fallbackImage"
+                     :alt="t('creator.sections.about.image2')"
+                     class="rounded-md max-w-full h-auto cursor-pointer"/>
+              </label>
+              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
+                      @click="deleteImage('image2Url')">
+                {{ t('common.delete') }}
+              </button>
+            </div>
+
+            <!-- Troisième image -->
+            <div class="relative">
+              <label>
+                <input class="hidden" type="file" @change="updateImage('image3Url', $event)"/>
+                <img :src="image3Url || fallbackImage"
+                     :alt="t('creator.sections.about.image3')"
+                     class="rounded-md max-w-full h-auto cursor-pointer"/>
+              </label>
+              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
+                      @click="deleteImage('image3Url')">
+                {{ t('common.delete') }}
+              </button>
+            </div>
+
+            <!-- Quatrième image -->
+            <div class="relative">
+              <label>
+                <input class="hidden" type="file" @change="updateImage('image4Url', $event)"/>
+                <img :src="image4Url || fallbackImage"
+                     :alt="t('creator.sections.about.image4')"
+                     class="rounded-md max-w-full h-auto cursor-pointer"/>
+              </label>
+              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
+                      @click="deleteImage('image4Url')">
+                {{ t('common.delete') }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Description-->
+          <div class="text-2xl pa-2">{{ t('creator.sections.about.description') }}</div>
+        </div>
+
+        <!--Edit-->
+        <div v-if="isEditMode">
+          <v-text-field
+              v-model="editablePhoneNumber"
+              class="w-full p-2"
+              :label="t('creator.fields.phoneNumber')"
+              variant="outlined"
+          ></v-text-field>
+
+          <v-text-field
+              v-model="editableEmail"
+              class="w-full p-2"
+              :label="t('creator.fields.email')"
+              variant="outlined"
+          ></v-text-field>
+        </div>
+
+        <!-- Contact Info-->
+        <div v-if="!isEditMode && phoneNumber || email">
+
+          <div class="my-10 flex flex-row">
+
+            <div v-if="phoneNumber" class="flex items-center space-x-2 w-1/2 justify-center">
+              <i class="mdi mdi-phone-outline text-2xl"></i>
+              <span>{{ phoneNumber }}</span>
+            </div>
+
+            <!-- Affichage de l'email -->
+            <div v-if="email" class="flex items-center space-x-2 w-1/2 justify-center">
+              <i class="mdi mdi-email-outline text-2xl"></i>
+              <a :href="`mailto:${email}`" class="no-underline text-current">
+                {{ email }}
+              </a>
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {useClient} from "@/plugins/api.js";
+import {useBrandingStore} from "@/stores/brandingStore.js";
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
+import {useAuthStore} from "@/stores/authStore.js";
+import {useI18n} from 'vue-i18n';
+
+const { t } = useI18n();
+const authStore = useAuthStore();
+const creatorProfileStore = useCreatorProfileStore();
+const brandingStore = useBrandingStore();
+const client = useClient();
+
+const isLoading = ref(true);
+const isLoggedIn = true;
+const isEditMode = ref(false);
+const showEditButtons = ref(false);
+
+const fallbackImage = "/medias/emptyimage.png";
+
+// Variables réactives pour les données
+const mainTitle = ref("");
+const mainImageUrl = ref("");
+const mainImageText = ref("");
+const mainVideoText = ref("");
+const imagesSubtitle = ref("");
+const image1Url = ref("");
+const image2Url = ref("");
+const image3Url = ref("");
+const image4Url = ref("");
+const imagesText = ref("");
+const videoSubtitle = ref("");
+const videoSubtitleMain = ref("");
+const videoUrlMain = ref("");
+const phoneNumber = ref("");
+const email = ref("");
+
+// Editable fields
+const editableMainTitle = ref("");
+const editableMainImageText = ref("");
+const editableMainVideoText = ref("");
+const editableImagesText = ref("");
+const editableVideoSubtitle = ref("");
+const editableVideoUrlMain = ref("");
+const editablePhoneNumber = ref("");
+const editableEmail = ref("");
+
+const editableImages = ref([null, null, null, null]);
+
+// Activer/désactiver le mode édition
+function toggleEditMode() {
+  isEditMode.value = !isEditMode.value;
+  if (isEditMode.value) {
+    // Charger les valeurs pour l'édition
+    editableMainTitle.value = mainTitle.value;
+    editableMainImageText.value = mainImageText.value;
+    editableMainVideoText.value = mainVideoText.value;
+    editableImagesText.value = imagesText.value;
+    editableVideoSubtitle.value = videoSubtitle.value;
+    editableVideoUrlMain.value = videoUrlMain.value;
+    editablePhoneNumber.value = phoneNumber.value;
+    editableEmail.value = email.value;
+  } else {
+    // Sauvegarder les modifications
+    mainTitle.value = editableMainTitle.value;
+    mainImageText.value = editableMainImageText.value;
+    mainVideoText.value = editableMainVideoText.value;
+    imagesText.value = editableImagesText.value;
+    videoSubtitle.value = editableVideoSubtitle.value;
+    videoUrlMain.value = editableVideoUrlMain.value;
+    phoneNumber.value = editablePhoneNumber.value;
+    email.value = editableEmail.value;
+
+    // Réinitialisation des images supprimées à des strings vides si nécessaire
+    if (mainImageUrl.value === null) mainImageUrl.value = "";
+    if (image1Url.value === null) image1Url.value = "";
+    if (image2Url.value === null) image2Url.value = "";
+    if (image3Url.value === null) image3Url.value = "";
+    if (image4Url.value === null) image4Url.value = "";
+  }
+}
+
+// Supprimer une image
+function deleteImage(field) {
+  switch (field) {
+    case "mainImageUrl":
+      mainImageUrl.value = ""; // Remplace par un string vide
+      break;
+    case "image1Url":
+      image1Url.value = ""; // Remplace par un string vide
+      break;
+    case "image2Url":
+      image2Url.value = ""; // Remplace par un string vide
+      break;
+    case "image3Url":
+      image3Url.value = ""; // Remplace par un string vide
+      break;
+    case "image4Url":
+      image4Url.value = ""; // Remplace par un string vide
+      break;
+  }
+}
+
+// Mettre à jour une image
+function updateImage(field, event) {
+  const file = event.target.files[0];
+  if (file) {
+    switch (field) {
+      case "mainImageUrl":
+        editableImages.value[0] = file;
+        mainImageUrl.value = URL.createObjectURL(file);
+        break;
+      case "image1Url":
+        editableImages.value[1] = file;
+        image1Url.value = URL.createObjectURL(file);
+        break;
+      case "image2Url":
+        editableImages.value[2] = file;
+        image2Url.value = URL.createObjectURL(file);
+        break;
+      case "image3Url":
+        editableImages.value[3] = file;
+        image3Url.value = URL.createObjectURL(file);
+        break;
+      case "image4Url":
+        editableImages.value[4] = file;
+        image4Url.value = URL.createObjectURL(file);
+        break;
+    }
+  }
+}
+
+// Charger les données au montage
+onMounted(() => {
+  if (brandingStore.presentationInfos === undefined) return;
+
+  mainTitle.value = brandingStore.presentationInfos.title;
+  mainImageUrl.value = brandingStore.presentationInfos.mainImageUrl;
+  mainImageText.value = brandingStore.presentationInfos.mainImageText;
+  mainVideoText.value = brandingStore.presentationInfos.mainVideoText;
+  imagesSubtitle.value = brandingStore.presentationInfos.imagesSubtitle;
+  image1Url.value = brandingStore.presentationInfos.image1Url;
+  image2Url.value = brandingStore.presentationInfos.image2Url;
+  image3Url.value = brandingStore.presentationInfos.image3Url;
+  image4Url.value = brandingStore.presentationInfos.image4Url;
+  imagesText.value = brandingStore.presentationInfos.imagesText;
+  videoSubtitle.value = brandingStore.presentationInfos.videoSubtitle;
+  videoSubtitleMain.value = brandingStore.presentationInfos.videoSubtitleMain;
+  videoUrlMain.value = brandingStore.presentationInfos.videoUrlMain;
+  phoneNumber.value = brandingStore.presentationInfos.phoneNumber;
+  email.value = brandingStore.presentationInfos.email;
+});
+
+async function saveChanges() {
+  if (!creatorProfileStore.creator.id) {
+    console.error("L'ID du créateur est manquant !");
+    return;
+  }
+
+  const formData = new FormData();
+
+  // Ajout des champs textuels
+  formData.append("PhoneNumber", editablePhoneNumber.value || "");
+  formData.append("Email", editableEmail.value || "");
+  formData.append("Title", editableMainTitle.value || "");
+  formData.append("MainImageText", editableMainImageText.value || "");
+  formData.append("MainVideoText", editableMainVideoText.value || "");
+  formData.append("ImagesText", editableImagesText.value || "");
+  formData.append("VideoSubtitle", editableVideoSubtitle.value || "");
+  formData.append("VideoUrlMain", editableVideoUrlMain.value || "");
+
+  // Ajout des URLs d'images supprimées
+  formData.append("MainImageUrl", mainImageUrl.value || ""); // Peut contenir un string vide
+  formData.append("Image1Url", image1Url.value || "");
+  formData.append("Image2Url", image2Url.value || "");
+  formData.append("Image3Url", image3Url.value || "");
+  formData.append("Image4Url", image4Url.value || "");
+
+  // Ajout des fichiers d'images téléversées
+  if (editableImages.value[0]) formData.append("MainImage", editableImages.value[0]);
+  if (editableImages.value[1]) formData.append("Image1", editableImages.value[1]);
+  if (editableImages.value[2]) formData.append("Image2", editableImages.value[2]);
+  if (editableImages.value[3]) formData.append("Image3", editableImages.value[3]);
+  if (editableImages.value[4]) formData.append("Image4", editableImages.value[4]);
+
+  try {
+    isLoading.value = true;
+
+    const response = await client.post(
+        `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
+        formData,
+        {headers: {"Content-Type": "multipart/form-data"}}
+    );
+
+    // Mettre à jour les valeurs locales pour refléter les changements
+    mainTitle.value = editableMainTitle.value;
+    mainImageText.value = editableMainImageText.value;
+    mainVideoText.value = editableMainVideoText.value;
+    imagesText.value = editableImagesText.value;
+    videoSubtitle.value = editableVideoSubtitle.value;
+    videoUrlMain.value = editableVideoUrlMain.value;
+    phoneNumber.value = editablePhoneNumber.value;
+    email.value = editableEmail.value;
+
+    console.log("Données sauvegardées :", response.data);
+
+    isEditMode.value = false;
+
+  } catch (error) {
+    console.error("Erreur lors de la sauvegarde :", error);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+function cancelEdit() {
+  // Restaurer les valeurs d'origine
+  editableMainTitle.value = mainTitle.value;
+  editableMainImageText.value = mainImageText.value;
+  editableMainVideoText.value = mainVideoText.value;
+  editableImagesText.value = imagesText.value;
+  editableVideoSubtitle.value = videoSubtitle.value;
+  editableVideoUrlMain.value = videoUrlMain.value;
+  editablePhoneNumber.value = phoneNumber.value;
+  editableEmail.value = email.value;
+
+  // Désactiver le mode édition
+  isEditMode.value = false;
+}
+</script>
+
+<style scoped>
+.video-container {
+  position: relative;
+  width: 100%;
+  padding-top: 56.25%; /* Ratio 16:9 (9/16 = 0.5625) */
+}
+
+.video-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 0.5rem; /* Pour les bords arrondis */
+}
+</style>
+
+<i18n>
+{
+  "en": {
+    "common": {
+      "save": "Save",
+      "edit": "Edit",
+      "cancel": "Cancel",
+      "delete": "Delete"
+    },
+    "creator": {
+      "sections": {
+        "about": {
+          "title": "About",
+          "description": "Description",
+          "mainImage": "Main image",
+          "image1": "Image 1",
+          "image2": "Image 2",
+          "image3": "Image 3",
+          "image4": "Image 4",
+          "images": "Images"
+        },
+        "support": {
+          "title": "Support",
+          "description": "Description",
+          "subtitle": "Subtitle"
+        }
+      },
+      "fields": {
+        "videoUrl": "Video URL",
+        "phoneNumber": "Phone Number",
+        "email": "Email"
+      }
+    }
+  },
+  "fr": {
+    "common": {
+      "save": "Enregistrer",
+      "edit": "Modifier",
+      "cancel": "Annuler",
+      "delete": "Supprimer"
+    },
+    "creator": {
+      "sections": {
+        "about": {
+          "title": "À propos",
+          "description": "Description",
+          "mainImage": "Image principale",
+          "image1": "Image 1",
+          "image2": "Image 2",
+          "image3": "Image 3",
+          "image4": "Image 4",
+          "images": "Images"
+        },
+        "support": {
+          "title": "Support",
+          "description": "Description",
+          "subtitle": "Sous-titre"
+        }
+      },
+      "fields": {
+        "videoUrl": "URL de la vidéo",
+        "phoneNumber": "Numéro de téléphone",
+        "email": "Email"
+      }
+    }
+  },
+  "es": {
+    "common": {
+      "save": "Guardar",
+      "edit": "Editar",
+      "cancel": "Cancelar",
+      "delete": "Eliminar"
+    },
+    "creator": {
+      "sections": {
+        "about": {
+          "title": "Acerca de",
+          "description": "Descripción",
+          "mainImage": "Imagen principal",
+          "image1": "Imagen 1",
+          "image2": "Imagen 2",
+          "image3": "Imagen 3",
+          "image4": "Imagen 4",
+          "images": "Imágenes"
+        },
+        "support": {
+          "title": "Soporte",
+          "description": "Descripción",
+          "subtitle": "Subtítulo"
+        }
+      },
+      "fields": {
+        "videoUrl": "URL del video",
+        "phoneNumber": "Número de teléfono",
+        "email": "Correo electrónico"
+      }
+    }
+  }
+}
+</i18n> 

frontend/src/views/creators/Banner.vue

@@ -1,17 +0,0 @@
-<template>
-  <!-- PC -->
-  <div class="px-4 pb-4">
-    <div class="relative">
-
-      <actual-banner></actual-banner>
-      <banner-actions></banner-actions>
-
-    </div>
-
-  </div>
-</template>
-
-<script setup>
-import ActualBanner from "@/views/creators/ActualBanner.vue";
-import BannerActions from "@/views/creators/BannerActions.vue";
-</script>

frontend/src/views/creators/CreatorHome.vue

@@ -1,627 +1,92 @@
 <template>
-  <div class="p-4">
+  <div class="creator-home">
-    <div v-if="creatorProfileStore.creator?.id === brandingStore.value.id"
-         class="flex justify-end">
     
-      <!-- Bouton principal : Éditer ou Enregistrer -->
+    <!-- Content sections container -->
-      <button
+    <div class="content-sections">
-          v-if="isLoggedIn"
-          class="primary"
-          @click="isEditMode ? saveChanges() : toggleEditMode()"
-      >
-        {{ isEditMode ? t('common.save') : t('common.edit') }}
-      </button>
 
-      <button
+      <!-- Donation Section -->
-          v-if="isEditMode && isLoggedIn"
+      <div class="section sm:hidden">
-          class="secondary"
+        <DonationButton
-          @click="cancelEdit"
+            v-if="brandingStore.value?.acceptDonation"
-      >
+            :creator-id="brandingStore.value?.id"
-        {{ t('common.cancel') }}
+            :creator-name="brandingStore.value?.name"
-      </button>
+            :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
-    </div>
+            :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
-
-    <!-- MainPage -->
-    <div class="flex flex-col mt-4">
-
-      <h1 class="flex justify-start text-2xl font-bold text-center mb-4">{{ t('creator.sections.about.title') }}</h1>
-
-      <div>
-        <!-- Main image  Bloc D'information-->
-        <div class="py-4">
-
-          <div v-if="!isEditMode">
-            <p v-if="mainImageText" class="text-lg text-justify">
-              {{ mainImageText }}
-            </p>
-          </div>
-          <v-textarea v-if="isEditMode" v-model="editableMainImageText" class="w-full p-2 py-6 " :label="t('creator.sections.about.description')"
-                      variant="outlined"></v-textarea>
-
-          <div class="flex flex-row items-center space-x-4">
-            <!--          image principale-->
-            <div v-if="!isEditMode" class="flex justify-center items-center w-1/2">
-              <img
-                  v-if="mainImageUrl"
-                  :src="mainImageUrl"
-                  :alt="t('creator.sections.about.mainImage')"
-                  class="max-w-full h-auto cursor-pointer"/>
-            </div>
-            <div v-if="isEditMode" class="relative flex justify-center">
-              <label>
-                <input class="hidden" type="file" @change="updateImage('mainImageUrl', $event)"/>
-                <img :src="mainImageUrl || fallbackImage"
-                     :alt="t('creator.sections.about.mainImage')"
-                     class=" max-w-full h-auto cursor-pointer max-h-96"/>
-              </label>
-              <button v-if="isEditMode"
-                      class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600"
-                      @click="deleteImage('mainImageUrl')">
-                {{ t('common.delete') }}
-              </button>
-            </div>
-
-            <div class="w-1/2 flex flex-col justify-center">
-              <h2 v-if="videoSubtitleMain" class="text-xl font-semibold text-center">
-                {{ t('creator.sections.support.title') }}
-              </h2>
-
-              <div v-if="!isEditMode">
-                <p v-if="mainVideoText" class="text-lg text-justify">
-                  {{ mainVideoText }}
-                </p>
-              </div>
-
-              <div v-if="isEditMode">
-                <v-textarea
-                    v-model="editableMainVideoText"
-                    class="p-2 rounded-md mt-4"
-                    :label="t('creator.sections.support.description')"
-                    rows="10"
-                    variant="outlined"
-                ></v-textarea>
-              </div>
-            </div>
-          </div>
-
-          <div>
-            <div v-if="!isEditMode" class="py-5 text-lg font-bold">
-              {{ videoSubtitle }}
-            </div>
-            <div v-if="isEditMode">
-              <v-text-field
-                  v-model="editableVideoSubtitle"
-                  class="w-full p-2"
-                  :label="t('creator.sections.support.subtitle')"
-                  variant="outlined"
-              ></v-text-field>
-            </div>
-
-            <v-textarea v-if="isEditMode"
-                v-model="editableVideoText"
-                class="w-full p-2"
-                :label="t('creator.sections.support.description')"
-                variant="outlined"
-            ></v-textarea>
-          </div>
-        </div>
-
-        <!--      media-->
-        <div v-if="!isEditMode">
-          <div v-if="videoUrlMain" class="video-container">
-            <iframe
-                :src="videoUrlMain"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen
-                class="video-frame"
-                title="YouTube video player">
-            </iframe>
-          </div>
-        </div>
-
-        <div v-if="isEditMode">
-          <v-text-field
-              v-model="editableVideoUrlMain"
-              class="w-full p-2 rounded-md"
-              :label="t('creator.fields.videoUrl')"
-              type="text"
-              variant="outlined"
         />
       </div>
       
-        <!-- Images  -->
+      <!-- About Creator Section -->
-
+      <div class="section">
-        <div v-if="!isEditMode">
+        <AboutCreator />
-          <div v-if="imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText ">
-            <!--        images-->
-            <div class="py-2">
-              <div>
-                <!-- Affichage des images -->
-                <div class="flex  gap-2">
-                  <!-- Première image -->
-                  <div v-if="image1Url" class="relative w-full sm:flex-1 ">
-                    <img :src="image1Url"
-                         :alt="t('creator.sections.about.image1')"
-                         class="rounded-md max-w-full h-auto cursor-pointer"/>
       </div>
 
-                  <!-- Deuxième image -->
-                  <div v-if="image2Url" class="relative w-full sm:flex-1 ">
-                    <img :src="image2Url"
-                         :alt="t('creator.sections.about.image2')"
-                         class="rounded-md max-w-full h-auto cursor-pointer"/>
-                  </div>
-
-                  <!-- Troisième image -->
-                  <div v-if="image3Url" class="relative w-full sm:flex-1 ">
-                    <img :src="image3Url"
-                         :alt="t('creator.sections.about.image3')"
-                         class="rounded-md max-w-full h-auto cursor-pointer"/>
-                  </div>
-
-                  <!-- Quatrième image -->
-                  <div v-if="image4Url" class="relative w-full sm:flex-1 ">
-                    <img :src="image4Url"
-                         :alt="t('creator.sections.about.image4')"
-                         class="rounded-md max-w-full h-auto cursor-pointer"/>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="isEditMode" class="rounded-2xl">
-          <!--images-->
-          <div class=" text-2xl pa-2">{{ t('creator.sections.about.images') }}</div>
-          <div class="pa-2 grid grid-cols-1 gap-4 md:grid-cols-4">
-            <!-- Première image -->
-            <div class="relative">
-              <label>
-                <input class="hidden" type="file" @change="updateImage('image1Url', $event)"/>
-                <img :src="image1Url || fallbackImage"
-                     :alt="t('creator.sections.about.image1')"
-                     class="rounded-md max-w-full h-auto cursor-pointer"/>
-              </label>
-              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
-                      @click="deleteImage('image1Url')">
-                {{ t('common.delete') }}
-              </button>
-            </div>
-
-            <!-- Deuxième image -->
-            <div class="relative">
-              <label>
-                <input class="hidden" type="file" @change="updateImage('image2Url', $event)"/>
-                <img :src="image2Url || fallbackImage"
-                     :alt="t('creator.sections.about.image2')"
-                     class="rounded-md max-w-full h-auto cursor-pointer"/>
-              </label>
-              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
-                      @click="deleteImage('image2Url')">
-                {{ t('common.delete') }}
-              </button>
-            </div>
-
-            <!-- Troisième image -->
-            <div class="relative">
-              <label>
-                <input class="hidden" type="file" @change="updateImage('image3Url', $event)"/>
-                <img :src="image3Url || fallbackImage"
-                     :alt="t('creator.sections.about.image3')"
-                     class="rounded-md max-w-full h-auto cursor-pointer"/>
-              </label>
-              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
-                      @click="deleteImage('image3Url')">
-                {{ t('common.delete') }}
-              </button>
-            </div>
-
-            <!-- Quatrième image -->
-            <div class="relative">
-              <label>
-                <input class="hidden" type="file" @change="updateImage('image4Url', $event)"/>
-                <img :src="image4Url || fallbackImage"
-                     :alt="t('creator.sections.about.image4')"
-                     class="rounded-md max-w-full h-auto cursor-pointer"/>
-              </label>
-              <button class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"
-                      @click="deleteImage('image4Url')">
-                {{ t('common.delete') }}
-              </button>
-            </div>
-          </div>
-
-          <!-- Description-->
-          <div class="text-2xl pa-2">{{ t('creator.sections.about.description') }}</div>
-        </div>
-
-        <!--Edit-->
-        <div v-if="isEditMode">
-          <v-text-field
-              v-model="editablePhoneNumber"
-              class="w-full p-2"
-              :label="t('creator.fields.phoneNumber')"
-              variant="outlined"
-          ></v-text-field>
-
-          <v-text-field
-              v-model="editableEmail"
-              class="w-full p-2"
-              :label="t('creator.fields.email')"
-              variant="outlined"
-          ></v-text-field>
-        </div>
-
-        <!-- Contact Info-->
-        <div v-if="!isEditMode && phoneNumber || email">
-
-          <div class="my-10 flex flex-row">
-
-            <div v-if="phoneNumber" class="flex items-center space-x-2 w-1/2 justify-center">
-              <i class="mdi mdi-phone-outline text-2xl"></i>
-              <span>{{ phoneNumber }}</span>
-            </div>
-
-            <!-- Affichage de l'email -->
-            <div v-if="email" class="flex items-center space-x-2 w-1/2 justify-center">
-              <i class="mdi mdi-email-outline text-2xl"></i>
-              <a :href="`mailto:${email}`" class="no-underline text-current">
-                {{ email }}
-              </a>
-            </div>
-
-          </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
+import AboutCreator from './AboutCreator.vue';
-import {useClient} from "@/plugins/api.js";
+import { ref } from 'vue';
+import DonationButton from "@/views/creators/DonationButton.vue";
 import {useBrandingStore} from "@/stores/brandingStore.js";
-import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
-import {useAuthStore} from "@/stores/authStore.js";
-import {useI18n} from 'vue-i18n';
 
-const { t } = useI18n();
-const authStore = useAuthStore();
-const creatorProfileStore = useCreatorProfileStore();
 const brandingStore = useBrandingStore();
-const client = useClient();
+const baseURL = window.location.origin;
 
-const isLoading = ref(true);
-const isLoggedIn = true;
-const isEditMode = ref(false);
-
-const fallbackImage = "/medias/emptyimage.png";
-
-// Variables réactives pour les données
-const mainTitle = ref("");
-const mainImageUrl = ref("");
-const mainImageText = ref("");
-const mainVideoText = ref("");
-const imagesSubtitle = ref("");
-const image1Url = ref("");
-const image2Url = ref("");
-const image3Url = ref("");
-const image4Url = ref("");
-const imagesText = ref("");
-const videoSubtitle = ref("");
-const videoSubtitleMain = ref("");
-const videoUrlMain = ref("");
-const phoneNumber = ref("");
-const email = ref("");
-
-// Editable fields
-const editableMainTitle = ref("");
-const editableMainImageText = ref("");
-const editableMainVideoText = ref("");
-const editableImagesText = ref("");
-const editableVideoSubtitle = ref("");
-const editableVideoUrlMain = ref("");
-const editablePhoneNumber = ref("");
-const editableEmail = ref("");
-
-const editableImages = ref([null, null, null, null]);
-
-// Activer/désactiver le mode édition
-function toggleEditMode() {
-  isEditMode.value = !isEditMode.value;
-  if (isEditMode.value) {
-    // Charger les valeurs pour l'édition
-    editableMainTitle.value = mainTitle.value;
-    editableMainImageText.value = mainImageText.value;
-    editableMainVideoText.value = mainVideoText.value;
-    editableImagesText.value = imagesText.value;
-    editableVideoSubtitle.value = videoSubtitle.value;
-    editableVideoUrlMain.value = videoUrlMain.value;
-    editablePhoneNumber.value = phoneNumber.value;
-    editableEmail.value = email.value;
-  } else {
-    // Sauvegarder les modifications
-    mainTitle.value = editableMainTitle.value;
-    mainImageText.value = editableMainImageText.value;
-    mainVideoText.value = editableMainVideoText.value;
-    imagesText.value = editableImagesText.value;
-    videoSubtitle.value = editableVideoSubtitle.value;
-    videoUrlMain.value = editableVideoUrlMain.value;
-    phoneNumber.value = editablePhoneNumber.value;
-    email.value = editableEmail.value;
-
-    // Réinitialisation des images supprimées à des strings vides si nécessaire
-    if (mainImageUrl.value === null) mainImageUrl.value = "";
-    if (image1Url.value === null) image1Url.value = "";
-    if (image2Url.value === null) image2Url.value = "";
-    if (image3Url.value === null) image3Url.value = "";
-    if (image4Url.value === null) image4Url.value = "";
-  }
-}
-
-// Supprimer une image
-function deleteImage(field) {
-  switch (field) {
-    case "mainImageUrl":
-      mainImageUrl.value = ""; // Remplace par un string vide
-      break;
-    case "image1Url":
-      image1Url.value = ""; // Remplace par un string vide
-      break;
-    case "image2Url":
-      image2Url.value = ""; // Remplace par un string vide
-      break;
-    case "image3Url":
-      image3Url.value = ""; // Remplace par un string vide
-      break;
-    case "image4Url":
-      image4Url.value = ""; // Remplace par un string vide
-      break;
-  }
-}
-
-// Mettre à jour une image
-function updateImage(field, event) {
-  const file = event.target.files[0];
-  if (file) {
-    switch (field) {
-      case "mainImageUrl":
-        editableImages.value[0] = file;
-        mainImageUrl.value = URL.createObjectURL(file);
-        break;
-      case "image1Url":
-        editableImages.value[1] = file;
-        image1Url.value = URL.createObjectURL(file);
-        break;
-      case "image2Url":
-        editableImages.value[2] = file;
-        image2Url.value = URL.createObjectURL(file);
-        break;
-      case "image3Url":
-        editableImages.value[3] = file;
-        image3Url.value = URL.createObjectURL(file);
-        break;
-      case "image4Url":
-        editableImages.value[4] = file;
-        image4Url.value = URL.createObjectURL(file);
-        break;
-    }
-  }
-}
-
-// Charger les données au montage
-onMounted(() => {
-  if (brandingStore.presentationInfos === undefined) return;
-
-  mainTitle.value = brandingStore.presentationInfos.title;
-  mainImageUrl.value = brandingStore.presentationInfos.mainImageUrl;
-  mainImageText.value = brandingStore.presentationInfos.mainImageText;
-  mainVideoText.value = brandingStore.presentationInfos.mainVideoText;
-  imagesSubtitle.value = brandingStore.presentationInfos.imagesSubtitle;
-  image1Url.value = brandingStore.presentationInfos.image1Url;
-  image2Url.value = brandingStore.presentationInfos.image2Url;
-  image3Url.value = brandingStore.presentationInfos.image3Url;
-  image4Url.value = brandingStore.presentationInfos.image4Url;
-  imagesText.value = brandingStore.presentationInfos.imagesText;
-  videoSubtitle.value = brandingStore.presentationInfos.videoSubtitle;
-  videoSubtitleMain.value = brandingStore.presentationInfos.videoSubtitleMain;
-  videoUrlMain.value = brandingStore.presentationInfos.videoUrlMain;
-  phoneNumber.value = brandingStore.presentationInfos.phoneNumber;
-  email.value = brandingStore.presentationInfos.email;
-});
-
-async function saveChanges() {
-  if (!creatorProfileStore.creator.id) {
-    console.error("L'ID du créateur est manquant !");
-    return;
-  }
-
-  const formData = new FormData();
-
-  // Ajout des champs textuels
-  formData.append("PhoneNumber", editablePhoneNumber.value || "");
-  formData.append("Email", editableEmail.value || "");
-  formData.append("Title", editableMainTitle.value || "");
-  formData.append("MainImageText", editableMainImageText.value || "");
-  formData.append("MainVideoText", editableMainVideoText.value || "");
-  formData.append("ImagesText", editableImagesText.value || "");
-  formData.append("VideoSubtitle", editableVideoSubtitle.value || "");
-  formData.append("VideoUrlMain", editableVideoUrlMain.value || "");
-
-  // Ajout des URLs d'images supprimées
-  formData.append("MainImageUrl", mainImageUrl.value || ""); // Peut contenir un string vide
-  formData.append("Image1Url", image1Url.value || "");
-  formData.append("Image2Url", image2Url.value || "");
-  formData.append("Image3Url", image3Url.value || "");
-  formData.append("Image4Url", image4Url.value || "");
-
-  // Ajout des fichiers d'images téléversées
-  if (editableImages.value[0]) formData.append("MainImage", editableImages.value[0]);
-  if (editableImages.value[1]) formData.append("Image1", editableImages.value[1]);
-  if (editableImages.value[2]) formData.append("Image2", editableImages.value[2]);
-  if (editableImages.value[3]) formData.append("Image3", editableImages.value[3]);
-  if (editableImages.value[4]) formData.append("Image4", editableImages.value[4]);
-
-  try {
-    isLoading.value = true;
-
-    const response = await client.post(
-        `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
-        formData,
-        {headers: {"Content-Type": "multipart/form-data"}}
-    );
-
-    // Mettre à jour les valeurs locales pour refléter les changements
-    mainTitle.value = editableMainTitle.value;
-    mainImageText.value = editableMainImageText.value;
-    mainVideoText.value = editableMainVideoText.value;
-    imagesText.value = editableImagesText.value;
-    videoSubtitle.value = editableVideoSubtitle.value;
-    videoUrlMain.value = editableVideoUrlMain.value;
-    phoneNumber.value = editablePhoneNumber.value;
-    email.value = editableEmail.value;
-
-    console.log("Données sauvegardées :", response.data);
-
-    isEditMode.value = false;
-
-  } catch (error) {
-    console.error("Erreur lors de la sauvegarde :", error);
-  } finally {
-    isLoading.value = false;
-  }
-}
-
-function cancelEdit() {
-  // Restaurer les valeurs d'origine
-  editableMainTitle.value = mainTitle.value;
-  editableMainImageText.value = mainImageText.value;
-  editableMainVideoText.value = mainVideoText.value;
-  editableImagesText.value = imagesText.value;
-  editableVideoSubtitle.value = videoSubtitle.value;
-  editableVideoUrlMain.value = videoUrlMain.value;
-  editablePhoneNumber.value = phoneNumber.value;
-  editableEmail.value = email.value;
-
-  // Désactiver le mode édition
-  isEditMode.value = false;
-}
 </script>
 
 <style scoped>
-.video-container {
+.creator-home {
-  position: relative;
+  @apply w-full;
-  width: 100%;
+  @apply p-5;
-  padding-top: 56.25%; /* Ratio 16:9 (9/16 = 0.5625) */
 }
 
-.video-frame {
+.content-sections {
-  position: absolute;
+  @apply flex flex-col;
-  top: 0;
+  @apply gap-5;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: 0;
-  border-radius: 0.5rem; /* Pour les bords arrondis */
 }
+
+.section {
+  @apply rounded-2xl;
+  @apply shadow-2xl;
+  @apply relative;
+}
+
+.section::before {
+  content: '';
+  @apply absolute inset-0;
+  @apply rounded-2xl;
+  @apply p-[1px];
+  background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
+  mask: 
+    linear-gradient(#fff 0 0) content-box, 
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
 </style>
 
 <i18n>
 {
   "en": {
-    "common": {
-      "save": "Save",
-      "edit": "Edit",
-      "cancel": "Cancel",
-      "delete": "Delete"
-    },
     "creator": {
-      "sections": {
+      "home": {
-        "about": {
+        "title": "Creator Home"
-          "title": "About",
-          "description": "Description",
-          "mainImage": "Main image",
-          "image1": "Image 1",
-          "image2": "Image 2",
-          "image3": "Image 3",
-          "image4": "Image 4",
-          "images": "Images"
-        },
-        "support": {
-          "title": "Support",
-          "description": "Description",
-          "subtitle": "Subtitle"
-        }
-      },
-      "fields": {
-        "videoUrl": "Video URL",
-        "phoneNumber": "Phone Number",
-        "email": "Email"
       }
     }
   },
   "fr": {
-    "common": {
-      "save": "Enregistrer",
-      "edit": "Modifier",
-      "cancel": "Annuler",
-      "delete": "Supprimer"
-    },
     "creator": {
-      "sections": {
+      "home": {
-        "about": {
+        "title": "Accueil du Créateur"
-          "title": "À propos",
-          "description": "Description",
-          "mainImage": "Image principale",
-          "image1": "Image 1",
-          "image2": "Image 2",
-          "image3": "Image 3",
-          "image4": "Image 4",
-          "images": "Images"
-        },
-        "support": {
-          "title": "Support",
-          "description": "Description",
-          "subtitle": "Sous-titre"
-        }
-      },
-      "fields": {
-        "videoUrl": "URL de la vidéo",
-        "phoneNumber": "Numéro de téléphone",
-        "email": "Email"
       }
     }
   },
   "es": {
-    "common": {
-      "save": "Guardar",
-      "edit": "Editar",
-      "cancel": "Cancelar",
-      "delete": "Eliminar"
-    },
     "creator": {
-      "sections": {
+      "home": {
-        "about": {
+        "title": "Inicio del Creador"
-          "title": "Acerca de",
-          "description": "Descripción",
-          "mainImage": "Imagen principal",
-          "image1": "Imagen 1",
-          "image2": "Imagen 2",
-          "image3": "Imagen 3",
-          "image4": "Imagen 4",
-          "images": "Imágenes"
-        },
-        "support": {
-          "title": "Soporte",
-          "description": "Descripción",
-          "subtitle": "Subtítulo"
-        }
-      },
-      "fields": {
-        "videoUrl": "URL del video",
-        "phoneNumber": "Número de teléfono",
-        "email": "Correo electrónico"
       }
     }
   }

frontend/src/views/creators/CreatorLayout.vue

@@ -1,9 +1,10 @@
 <script async setup>
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import {onMounted} from "vue";
-import Banner from "@/views/creators/Banner.vue";
 import Footer from "@/views/main/Footer.vue";
 import { useI18n } from 'vue-i18n';
+import ActualBanner from "@/views/creators/ActualBanner.vue";
+import BannerActions from "@/views/creators/BannerActions.vue";
 
 const brandingStore = useBrandingStore();
 const creatorName = window.location.pathname.split('/@').pop();
@@ -23,11 +24,13 @@ onMounted(async () => {
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
     <div v-else>
+    
       <div v-if="brandingStore.value.isDeleted" 
           class="bg-red-500 p-2 m-4 text-center font-semibold">
         {{ t('creator.layout.deletion.pending') }}
       </div>
-      <banner></banner>
+      <actual-banner></actual-banner>
+      <banner-actions></banner-actions>
       <router-view></router-view>
       <Footer></Footer>
     </div>

frontend/src/views/creators/CreatorLogo.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="rounded-full relative"
+  <div class="relative"
        @mouseenter="showTint = isCurrentCreator"
        @mouseleave="showTint = false"
        @click="isCurrentCreator && openBannerEditor()"
   >
 
+    <div class="rounded-full border-4 border-hPrimary w-[110px] h-[110px]">
       <img
-        class="shadow-2xl object-cover rounded-full border-solid border-hSecondary border-102 w-[100px] h-[100px] sm:w-[150px] sm:h-[150px] md:w-[200px] md:h-[200px] logo-image"
           :src="brandingStore.value.images?.logo ?? '/images/placeholders/profile.png'"
           :alt="t('logoAlt')"
+          width="110px"
+          height="110px"
+          class="rounded-full"
       />
+    </div>
 
     <!-- Tint Effect -->
     <div
@@ -19,7 +23,7 @@
     >
       <!-- Top-right Icon -->
       <div
-          class="absolute top-4 right-4 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg"
+          class="absolute top-0 right-0 w-12 h-12 bg-hutopyPrimary rounded-full flex items-center justify-center shadow-lg"
       >
         <v-icon large>mdi-pencil</v-icon>
       </div>
@@ -66,7 +70,7 @@ const isCurrentCreator = computed(() => {
 
 <style scoped>
 .logo-image {
-  @apply border-b-4 border-t-4 border-solid border-hTertiary;
+  @apply border-4 border-solid border-hTertiary;
 }
 
 </style>

frontend/src/views/creators/CreatorLogoEditor.vue

@@ -58,13 +58,20 @@
 
     <div class="card-actions">
       <button class="secondary"
-              @click="cancel">
+              @click="cancel"
+              :disabled="isUploading">
         {{ t('cancel') }}
       </button>
       <button class="primary"
               @click="showCropper ? applyCrop() : publish()"
-              :disabled="!selectedFile">
+              :disabled="!selectedFile || isUploading">
+        <template v-if="isUploading">
+          <span class="loading-spinner"></span>
+          {{ t('uploading') }} ({{ uploadProgress }}%)
+        </template>
+        <template v-else>
           {{ showCropper ? t('apply') : t('save') }}
+        </template>
       </button>
     </div>
   </div>
@@ -92,6 +99,8 @@ const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHut
 const errorMessage = ref('')
 const showCropper = ref(false)
 const cropper = ref(null)
+const isUploading = ref(false)
+const uploadProgress = ref(0)
 
 const TARGET_WIDTH = 200
 const TARGET_HEIGHT = 200
@@ -153,15 +162,22 @@ const applyCrop = () => {
 
 const client = useClient()
 const publish = async () => {
-  if (!selectedFile.value) return
+  if (!selectedFile.value || isUploading.value) return
 
   try {
+    isUploading.value = true
+    uploadProgress.value = 0
     const formData = new FormData()
     formData.append('file', selectedFile.value)
 
     const response = await client.post(
         `/api/creators/${props.creator.id}/logo`,
-        formData
+        formData,
+        {
+          onUploadProgress: (progressEvent) => {
+            uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
+          }
+        }
     )
 
     props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`
@@ -169,6 +185,9 @@ const publish = async () => {
   } catch (error) {
     console.error(error)
     errorMessage.value = t('errors.imageUpload')
+  } finally {
+    isUploading.value = false
+    uploadProgress.value = 0
   }
 }
 
@@ -289,6 +308,27 @@ const cancel = () => {
 :deep(.cropper__stencil) {
   @apply rounded-full;
 }
+
+.loading-spinner {
+  @apply inline-block;
+  @apply w-4;
+  @apply h-4;
+  @apply mr-2;
+  @apply border-2;
+  @apply border-white;
+  @apply border-t-transparent;
+  @apply rounded-full;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
 
 <i18n>
@@ -297,19 +337,22 @@ const cancel = () => {
     "logoTitle": "Edit Logo",
     "logoDescription": "Choose a logo image for your creator page. The image will be cropped to a circle.",
     "chooseImage": "Choose Image",
-    "clickToEdit": "Click to edit"
+    "clickToEdit": "Click to edit",
+    "uploading": "Uploading"
   },
   "fr": {
     "logoTitle": "Modifier le logo",
     "logoDescription": "Choisissez une image de logo pour votre page de créateur. L'image sera recadrée en cercle.",
     "chooseImage": "Choisir une image",
-    "clickToEdit": "Cliquez pour modifier"
+    "clickToEdit": "Cliquez pour modifier",
+    "uploading": "Téléchargement"
   },
   "es": {
     "logoTitle": "Editar logo",
     "logoDescription": "Elige una imagen de logo para tu página de creador. La imagen se recortará en círculo.",
     "chooseImage": "Elegir imagen",
-    "clickToEdit": "Haz clic para editar"
+    "clickToEdit": "Haz clic para editar",
+    "uploading": "Subiendo"
   }
 }
 </i18n>

frontend/src/views/creators/DonationButton.vue

@@ -0,0 +1,83 @@
+<template>
+
+  <button
+      class="secondary donation-action"
+      @click="openDonationDialog()"
+  >
+    {{ t('creator.donation.isupport') }}
+  </button>
+
+  <donation-dialog
+      ref="donationDialogRef"
+      :creator-id="creatorId"
+      :creator-name="creatorName"
+      :on-success-url="onSuccessUrl"
+      :on-cancelled-url="onCancelledUrl"
+      :icon-color-class="iconColorClass"
+      @close="handleDialogClose"
+  />
+
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import {useI18n} from 'vue-i18n';
+import DonationDialog from './DonationDialog.vue';
+
+const {t} = useI18n();
+
+const props = defineProps({
+  creatorId: {default: 'missing-creator-id', required: true},
+  creatorName: {default: 'missing-creator-name', required: true},
+  onSuccessUrl: {default: 'missing-on-success-u', required: true},
+  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
+  iconColorClass: {default: 'text-black'},
+});
+
+const donationDialogRef = ref(null);
+
+function openDonationDialog() {
+  donationDialogRef.value.openDonationDialog();
+}
+
+function handleDialogClose() {
+  // Handle any cleanup or additional logic when dialog closes
+}
+</script>
+
+<style scoped>
+.donation-action {
+  @apply bg-hutopyPrimary text-hOnPrimary;
+  @apply hover:bg-hutopySecondary;
+  @apply w-fit place-self-center;
+  @apply h-12;
+  @apply rounded-2xl w-full;
+  @apply font-sans font-semibold text-lg;
+}
+</style>
+
+<i18n>
+{
+  "en": {
+    "creator": {
+      "donation": {
+        "isupport": "I Support"
+      }
+    }
+  },
+  "fr": {
+    "creator": {
+      "donation": {
+        "isupport": "Je Soutiens"
+      }
+    }
+  },
+  "es": {
+    "creator": {
+      "donation": {
+        "isupport": "Apoyo"
+      }
+    }
+  }
+}
+</i18n>

frontend/src/views/creators/DonationDialog.vue

@@ -1,60 +1,10 @@
-<template>
+<template>
-  <button
-      class="secondary donation-action"
-      @click="openDonationDialog()"
-  >
-    {{ t('creator.donation.isupport') }}
-  </button>
-
   <v-dialog v-model="donationModal">
-    <div class="card">
+    <DonationForm
-      <div class="card-title">
+        :show-cancel-button="showCancelButton"
-        {{ t('creator.donation.isupport') }}
+        @cancel="closeDonationDialog"
-      </div>
+        @submit="handleSubmit"
-
+    />
-      <div class="card-content">
-        <v-text-field
-            v-model="tipAmountInDollars"
-            type="number"
-            autofocus
-            placeholder="0"
-            :min="0"
-            class="p-2"
-            :label="t('creator.donation.amount')"
-            density="comfortable"
-            variant="outlined"
-            hide-details
-            clearable
-            inputmode="numeric"
-            @keydown="preventNonNumeric"
-            prepend-inner-icon="mdi-currency-usd"
-        ></v-text-field>
-
-        <v-textarea
-            v-model="tipMessage"
-            :label="t('creator.donation.message')"
-            class="p-2"
-            density="comfortable"
-            variant="outlined"
-            hide-details
-            clearable
-        ></v-textarea>
-      </div>
-
-      <div class="card-actions">
-
-        <button class="secondary"
-                @click="closeDonationDialog()">
-          {{ t('common.cancel') }}
-        </button>
-
-        <button class="primary"
-                @click="goPay()">
-          {{ t('creator.donation.send') }}
-        </button>
-
-      </div>
-    </div>
   </v-dialog>
 
   <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
@@ -69,7 +19,6 @@
           <v-btn
               block
               class="ma-auto"
-              style="width: 200px"
               @click="closeDialog()"
           >{{ t('common.cancel') }}
           </v-btn>
@@ -81,12 +30,11 @@
 
 <script setup>
 import {useClient} from '@/plugins/api.js';
-import {useBrandingStore} from '@/stores/brandingStore.js';
 import {loadStripe} from '@stripe/stripe-js';
 import {onMounted, ref} from 'vue';
 import { useI18n } from 'vue-i18n';
+import DonationForm from './DonationForm.vue';
 
-const brandingStore = useBrandingStore();
 const { t } = useI18n();
 
 const props = defineProps({
@@ -95,25 +43,18 @@ const props = defineProps({
   onSuccessUrl: {default: 'missing-on-success-u', required: true},
   onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
   iconColorClass: {default: 'text-black'},
+  showCancelButton: {
+    type: Boolean,
+    default: true
+  }
 });
 
+const emit = defineEmits(['close']);
+
 const errorMessage = ref('');
-
 const donationModal = ref(false);
-
-function openDonationDialog() {
-  donationModal.value = true;
-}
-
-function closeDonationDialog() {
-  donationModal.value = false;
-}
-
 const isPaymentDialogActive = ref(false);
 
-const tipAmountInDollars = ref('');
-const tipMessage = ref('');
-
 let stripe = null;
 let checkout;
 
@@ -121,14 +62,23 @@ onMounted(async () => {
   stripe = await loadStripe(import.meta.env.VITE_STRIPE_API_KEY);
 });
 
-async function createCheckoutSession() {
+function openDonationDialog() {
+  donationModal.value = true;
+}
+
+function closeDonationDialog() {
+  donationModal.value = false;
+  emit('close');
+}
+
+async function createCheckoutSession(amount, message) {
   const client = useClient();
   try {
     let clientSecret = await client.post(`/api/tips`, {
       creatorId: props.creatorId,
-      amount: tipAmountInDollars.value * 100,
+      amount: amount * 100,
       currency: 'CAD',
-      message: tipMessage.value,
+      message: message,
       checkoutSuccessUrl: props.onSuccessUrl,
       checkoutCancelledUrl: props.onCancelledUrl,
     });
@@ -149,33 +99,21 @@ function closeDialog() {
   }
 }
 
-async function goPay() {
+async function handleSubmit({ amount, message }) {
   isPaymentDialogActive.value = true;
 
-  const response = await createCheckoutSession();
+  const response = await createCheckoutSession(amount, message);
 
   // Redirect to the Stripe Checkout page
   window.location.href = response.stripeCheckoutUrl;
 }
 
-function preventNonNumeric(event) {
+defineExpose({
-  const key = event.key;
+  openDonationDialog
-  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+});
-
-  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
-    event.preventDefault();
-  }
-}
 </script>
 
 <style scoped>
-
-.donation-action {
-  @apply bg-hutopyPrimary text-hOnPrimary;
-  @apply hover:bg-hutopySecondary;
-  @apply w-fit;
-}
-
 .error-message {
   color: white;
   background-color: red;
@@ -194,10 +132,6 @@ function preventNonNumeric(event) {
     },
     "creator": {
       "donation": {
-        "isupport": "I Support",
-        "amount": "Amount ($)",
-        "message": "Message (optional)",
-        "send": "Send",
         "errors": {
           "payment": "An error occurred during payment processing"
         }
@@ -210,10 +144,6 @@ function preventNonNumeric(event) {
     },
     "creator": {
       "donation": {
-        "isupport": "Je Soutiens",
-        "amount": "Montant ($)",
-        "message": "Message (optionnel)",
-        "send": "Envoyer",
         "errors": {
           "payment": "Une erreur s'est produite lors du traitement du paiement"
         }
@@ -226,10 +156,6 @@ function preventNonNumeric(event) {
     },
     "creator": {
       "donation": {
-        "isupport": "Apoyo",
-        "amount": "Cantidad ($)",
-        "message": "Mensaje (opcional)",
-        "send": "Enviar",
         "errors": {
           "payment": "Ocurrió un error durante el procesamiento del pago"
         }

frontend/src/views/creators/DonationForm.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="card bg-hSurface text-hOnSurface">
+    <div class="card-title">
+      {{ t('creator.donation.isupport') }}
+    </div>
+
+    <div class="card-content">
+      <v-text-field
+          v-model="tipAmountInDollars"
+          type="number"
+          autofocus
+          placeholder="0"
+          :min="0"
+          class="p-2"
+          :label="t('creator.donation.amount')"
+          density="comfortable"
+          variant="outlined"
+          hide-details
+          clearable
+          inputmode="numeric"
+          @keydown="preventNonNumeric"
+          prepend-inner-icon="mdi-currency-usd"
+      ></v-text-field>
+
+      <v-textarea
+          v-model="tipMessage"
+          :label="t('creator.donation.message')"
+          class="p-2"
+          rows="2"
+          density="compact"
+          variant="outlined"
+          hide-details
+          clearable
+          auto-grow
+      ></v-textarea>
+    </div>
+
+    <div class="card-actions">
+      <button v-if="showCancelButton" 
+              class="secondary"
+              @click="$emit('cancel')">
+        {{ t('common.cancel') }}
+      </button>
+
+      <button class="primary"
+              @click="$emit('submit', { amount: tipAmountInDollars, message: tipMessage })">
+        {{ t('creator.donation.send') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+  showCancelButton: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const emit = defineEmits(['cancel', 'submit']);
+
+const tipAmountInDollars = ref('');
+const tipMessage = ref('');
+
+function preventNonNumeric(event) {
+  const key = event.key;
+  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
+    event.preventDefault();
+  }
+}
+</script>
+
+<i18n>
+{
+  "en": {
+    "common": {
+      "cancel": "Cancel"
+    },
+    "creator": {
+      "donation": {
+        "isupport": "I Support",
+        "amount": "Amount ($)",
+        "message": "Message (optional)",
+        "send": "Send"
+      }
+    }
+  },
+  "fr": {
+    "common": {
+      "cancel": "Annuler"
+    },
+    "creator": {
+      "donation": {
+        "isupport": "Je Soutiens",
+        "amount": "Montant ($)",
+        "message": "Message (optionnel)",
+        "send": "Envoyer"
+      }
+    }
+  },
+  "es": {
+    "common": {
+      "cancel": "Cancelar"
+    },
+    "creator": {
+      "donation": {
+        "isupport": "Apoyo",
+        "amount": "Cantidad ($)",
+        "message": "Mensaje (opcional)",
+        "send": "Enviar"
+      }
+    }
+  }
+}
+</i18n>