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

@@ -9,7 +9,7 @@
           class="primary"
           @click="isEditMode ? saveChanges() : toggleEditMode()"
       >
-        {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
+        {{ isEditMode ? t('save') : t('edit') }}
       </button>
 
       <button
@@ -17,14 +17,14 @@
           class="secondary"
           @click="cancelEdit"
       >
-        Annuler
+        {{ t('cancel') }}
       </button>
     </div>
 
     <!-- MainPage -->
     <div class="flex flex-col mt-4">
 
-      <h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1>
+      <h1 class="flex justify-start text-2xl font-bold text-center mb-4">{{ t('sections.about.title') }}</h1>
 
       <div>
         <!-- Main image  Bloc D'information-->
@@ -35,7 +35,7 @@
               {{ mainImageText }}
             </p>
           </div>
-          <v-textarea v-if="isEditMode" v-model="editableMainImageText" class="w-full p-2 py-6 " label="Description"
+          <v-textarea v-if="isEditMode" v-model="editableMainImageText" class="w-full p-2 py-6 " :label="t('sections.about.description')"
                       variant="outlined"></v-textarea>
 
           <div class="flex flex-row items-center space-x-4">
@@ -44,26 +44,26 @@
               <img
                   v-if="mainImageUrl"
                   :src="mainImageUrl"
-                  alt="Image principale"
+                  :alt="t('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="Image principale"
+                     :alt="t('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')">
-                X
+                {{ t('delete') }}
               </button>
             </div>
 
             <div class="w-1/2 flex flex-col justify-center">
               <h2 v-if="videoSubtitleMain" class="text-xl font-semibold text-center">
-                Pourquoi nous supporter
+                {{ t('sections.support.title') }}
               </h2>
 
               <div v-if="!isEditMode">
@@ -76,7 +76,7 @@
                 <v-textarea
                     v-model="editableMainVideoText"
                     class="p-2 rounded-md mt-4"
-                    label="Description"
+                    :label="t('sections.support.description')"
                     rows="10"
                     variant="outlined"
                 ></v-textarea>
@@ -92,23 +92,17 @@
               <v-text-field
                   v-model="editableVideoSubtitle"
                   class="w-full p-2"
-                  label="Titre"
+                  :label="t('sections.support.subtitle')"
                   variant="outlined"
               ></v-text-field>
             </div>
 
             <v-textarea v-if="isEditMode"
-                        v-model="editableImagesText"
-                        class="w-full p-2 border rounded-md"
-                        rows="10"
-                        variant="outlined">
-            </v-textarea>
-
-            <div v-if="!isEditMode">
-              <p v-if="imagesText" class="text-lg text-justify">
-                {{ imagesText }}
-              </p>
-            </div>
+                v-model="editableVideoText"
+                class="w-full p-2"
+                :label="t('sections.support.description')"
+                variant="outlined"
+            ></v-textarea>
           </div>
         </div>
 
@@ -127,10 +121,9 @@
 
         <div v-if="isEditMode">
           <v-text-field
-              v-if="isEditMode"
               v-model="editableVideoUrlMain"
               class="w-full p-2 rounded-md"
-              label="URL Video"
+              :label="t('fields.videoUrl')"
               type="text"
               variant="outlined"
           />
@@ -248,14 +241,14 @@
           <v-text-field
               v-model="editablePhoneNumber"
               class="w-full p-2"
-              label="Numéro de Téléphone"
+              :label="t('fields.phoneNumber')"
               variant="outlined"
           ></v-text-field>
 
           <v-text-field
               v-model="editableEmail"
               class="w-full p-2"
-              label="Adresse Email"
+              :label="t('fields.email')"
               variant="outlined"
           ></v-text-field>
         </div>
@@ -290,9 +283,13 @@ 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 {useTranslations} from '@/translations/translations'
 
 const creatorProfileStore = useCreatorProfileStore();
 const brandingStore = useBrandingStore();
+const authStore = useAuthStore();
+const t = useTranslations();
 const client = useClient();
 
 const isLoading = ref(true);