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/CreatorLogoEditor.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="card">
     <div class="card-title">
-      Choisissez votre Logo
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <p class="card-text">
-        Le logo doit être carré. Les dimensions recommandées sont 200 x 200 pixels.
+        {{ 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>
 
@@ -46,11 +46,11 @@
         <div class="circular-preview">
           <img
               :src="fileUrl || fallbackUrl"
-              alt="Aperçu du logo"
+              :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>
@@ -59,12 +59,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>
@@ -75,6 +75,7 @@ import {ref} from 'vue'
 import {useClient} from '@/plugins/api.js'
 import { Cropper, CircleStencil } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
+import { useTranslations } from '@/translations/translations'
 
 const props = defineProps({
   creator: {
@@ -95,6 +96,9 @@ const cropper = ref(null)
 const TARGET_WIDTH = 200
 const TARGET_HEIGHT = 200
 
+// Get translations for this component
+const t = useTranslations()
+
 const triggerFileInput = () => {
   fileInput.value.click()
 }
@@ -129,7 +133,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')
       })
   }
 }
@@ -165,7 +169,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')
   }
 }