Add localization support for various components, including dialogs and views, in English, Spanish, and French. Implemented translations for user profile management, payment processes, and creator functionalities. Updated existing components to utilize the new translation system.

frontend/src/views/creators/BannerEditor.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="card">
     <div class="card-title">
-      Choisissez votre Bannière
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <p class="card-text">
-        La bannière doit avoir un ratio de 3:1. Les dimensions cibles sont 960 x 320.
+        {{ t('description') }}
       </p>
       
       <div class="file-input-container">
@@ -21,7 +21,7 @@
             class="choose-file-button"
             @click="triggerFileInput"
         >
-          Choisir une image...
+          {{ t('chooseImage') }}
         </button>
       </div>
 
@@ -44,11 +44,11 @@
       <div v-else class="image-preview-container" @click="startEditing">
         <img
             :src="fileUrl || fallbackUrl"
-            alt="Aperçu de la bannière"
+            :alt="t('preview')"
             class="preview-image"
         />
         <div class="edit-overlay">
-          <span class="edit-text">Cliquez pour modifier</span>
+          <span class="edit-text">{{ t('clickToEdit') }}</span>
         </div>
       </div>
     </div>
@@ -56,12 +56,12 @@
     <div class="card-actions">
       <button class="secondary"
               @click="cancel">
-        Annuler
+        {{ t('cancel') }}
       </button>
       <button class="primary"
               @click="showCropper ? applyCrop() : publish()"
               :disabled="!selectedFile">
-        {{ showCropper ? 'Appliquer' : 'Enregistrer' }}
+        {{ showCropper ? t('apply') : t('save') }}
       </button>
     </div>
   </div>
@@ -72,6 +72,7 @@ import {ref} from 'vue'
 import {useClient} from '@/plugins/api.js'
 import { Cropper } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
+import { useTranslations } from '@/translations/translations'
 
 const props = defineProps({
   creator: {
@@ -92,6 +93,9 @@ const cropper = ref(null)
 const TARGET_WIDTH = 960
 const TARGET_HEIGHT = 320
 
+// Get translations for this component
+const t = useTranslations()
+
 const triggerFileInput = () => {
   fileInput.value.click()
 }
@@ -126,7 +130,7 @@ const startEditing = () => {
       })
       .catch(error => {
         console.error('Error loading image for editing:', error)
-        errorMessage.value = 'Une erreur est survenue lors du chargement de l\'image'
+        errorMessage.value = t('errors.imageLoad')
       })
   }
 }
@@ -162,7 +166,7 @@ const publish = async () => {
     emits('closeRequested')
   } catch (error) {
     console.error(error)
-    errorMessage.value = 'Une erreur est survenue lors de l\'envoi de l\'image'
+    errorMessage.value = t('errors.imageUpload')
   }
 }