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/profile/ProfilePage.en.json

@@ -0,0 +1,22 @@
+{
+  "personal": {
+    "informations": "Personal Information",
+    "fullname": "Full Name",
+    "alias": "Alias",
+    "contact": "Contact Details",
+    "email": "Email"
+  },
+  "creator": {
+    "informations": "Creator Information",
+    "name": "Name",
+    "slug": "URL",
+    "title": "Title",
+    "socialnetwork": "Social Networks"
+  },
+  "danger": {
+    "title": "Danger Zone",
+    "warning": "CAUTION: This will delete your creator page and suspend all tips and donations.",
+    "delete": "DELETE PAGE",
+    "restore": "RESTORE PAGE"
+  }
+} 

frontend/src/views/profile/ProfilePage.es.json

@@ -0,0 +1,22 @@
+{
+  "personal": {
+    "informations": "Información personal",
+    "fullname": "Nombre completo",
+    "alias": "Alias",
+    "contact": "Detalles de contacto",
+    "email": "Correo electrónico"
+  },
+  "creator": {
+    "informations": "Información del creador",
+    "name": "Nombre",
+    "slug": "URL",
+    "title": "Título",
+    "socialnetwork": "Redes sociales"
+  },
+  "danger": {
+    "title": "Zona de peligro",
+    "warning": "PRECAUCIÓN: Esto eliminará tu página de creador y suspenderá todos los propinas y donaciones.",
+    "delete": "ELIMINAR PÁGINA",
+    "restore": "RESTAURAR PÁGINA"
+  }
+} 

frontend/src/views/profile/ProfilePage.fr.json

@@ -0,0 +1,22 @@
+{
+  "personal": {
+    "informations": "Informations personnelles",
+    "fullname": "Nom complet",
+    "alias": "Pseudonyme",
+    "contact": "Coordonnées",
+    "email": "Email"
+  },
+  "creator": {
+    "informations": "Informations du créateur",
+    "name": "Nom",
+    "slug": "URL",
+    "title": "Titre",
+    "socialnetwork": "Réseaux sociaux"
+  },
+  "danger": {
+    "title": "Zone de danger",
+    "warning": "ATTENTION : Cela supprimera votre page de créateur et suspendra tous les pourboires et dons.",
+    "delete": "SUPPRIMER LA PAGE",
+    "restore": "RESTAURER LA PAGE"
+  }
+} 

frontend/src/views/profile/ProfilePage.vue

@@ -18,7 +18,9 @@ import Linkedin from "@/views/svg/Linkedin.vue";
 import Tiktok from "@/views/svg/Tiktok.vue";
 import Instagram from "@/views/svg/Instagram.vue";
 import Facebook from "@/views/svg/Facebook.vue";
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const userProfileStore = useUserProfileStore()
 
 // ### Fullname
@@ -131,14 +133,14 @@ const closeDialog = () => {
       <div class="card">
 
         <div class="card-title">
-          {{ $t('personnalinformation.informations') }}
+          {{ t('personal.informations') }}
         </div>
 
         <div class="content">
           <button
               class="action"
               @click="openEditFullname">
-            <span class="label">{{ $t('personnalinformation.fullname') }}</span>
+            <span class="label">{{ t('personal.fullname') }}</span>
             <span class="value">{{ userProfileStore.fullname }}</span>
             <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
           </button>
@@ -146,7 +148,7 @@ const closeDialog = () => {
           <button
               class="action"
               @click="openEditAlias">
-            <span class="label">{{ $t('personnalinformation.alias') }}</span>
+            <span class="label">{{ t('personal.alias') }}</span>
             <span class="value">{{ userProfileStore.user.alias }}</span>
             <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
           </button>
@@ -157,12 +159,12 @@ const closeDialog = () => {
       <div class="card">
 
         <div class="card-title">
-          {{ $t('personnalinformation.contactdetails') }}
+          {{ t('personal.contact') }}
         </div>
 
         <div class="content">
           <button class="action" @click="openDialog('EmailDialog')">
-            <span class="label">{{ $t('personnalinformation.email') }}</span>
+            <span class="label">{{ t('personal.email') }}</span>
             <span class="value">{{ userProfileStore.user.email }}</span>
             <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
           </button>
@@ -173,26 +175,26 @@ const closeDialog = () => {
       <template v-if="creatorProfileStore.creator !== undefined">
         <div class="card">
           <div class="card-title">
-            {{ $t('creatorinfopage.informations') }}
+            {{ t('creator.informations') }}
           </div>
           <div class="content">
 
             <!-- NAME -->
             <button class="action"  @click="openDialog('ChangeNameDialog')">
-              <span class="label">{{ $t('creatorinfopage.name') }}</span>
+              <span class="label">{{ t('creator.name') }}</span>
               <span class="value">{{ creatorProfileStore.creator.name }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
             
             <button class="action" @click="openDialog('ChangeSlugDialog')">
-              <span class="label">{{ $t('creatorinfopage.slug') }}</span>
+              <span class="label">{{ t('creator.slug') }}</span>
               <span class="value">@{{ creatorProfileStore.creator.slug }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
 
             <!-- TITLE -->
             <button class="action" @click="openDialog('ChangeTitleDialog')">
-              <span class="label">{{ $t('creatorinfopage.title') }}</span>
+              <span class="label">{{ t('creator.title') }}</span>
               <span class="value">{{ creatorProfileStore.creator.title }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
@@ -209,7 +211,7 @@ const closeDialog = () => {
 
         <div class="card">
           <div class="card-title">
-            {{ $t('creatorinfopage.socialnetwork') }}
+            {{ t('creator.socialnetwork') }}
           </div>
 
           <div>
@@ -282,20 +284,20 @@ const closeDialog = () => {
         </div>
 
         <div class="card">
-          <div class="card-title">Danger Zone</div>
+          <div class="card-title">{{ t('danger.title') }}</div>
           <div class="content">
             <p>
-              CAUTION: This will delete your creator page and suspend all tips and donations.
+              {{ t('danger.warning') }}
             </p>
             <button v-if="!creatorProfileStore.creator.isDeleted"
                     class="danger-action"
                     @click="creatorProfileStore.removeCreatorPage()">
-              DELETE PAGE
+              {{ t('danger.delete') }}
             </button>
             <button v-else
                     class="safe-action"
                     @click="creatorProfileStore.restoreCreatorPage()">
-              RESTORE PAGE
+              {{ t('danger.restore') }}
             </button>
           </div>
         </div>
@@ -307,12 +309,38 @@ const closeDialog = () => {
 
 <style scoped>
 
+.card {
+  @apply bg-hBackground rounded-lg p-4 w-full max-w-2xl;
+}
+
+.card-title {
+  @apply text-hOnBackground text-lg font-bold mb-4;
+}
+
+.content {
+  @apply flex flex-col gap-2;
+}
+
 .action {
-  @apply p-2 flex items-center w-full mb-2;
-  @apply font-sans text-base;
-  @apply rounded-md;
-  @apply transition duration-200 ease-in-out;
-  @apply hover:bg-hutopyPrimary active:bg-hutopySecondary;
+  @apply flex flex-row items-center justify-between w-full p-2 rounded-lg;
+  @apply hover:bg-hSurface;
+}
+
+.label {
+  @apply text-hOnBackground;
+}
+
+.value {
+  @apply text-hOnBackground opacity-70;
+}
+
+.chevron {
+  @apply text-hOnBackground opacity-70;
+}
+
+.social-icon {
+  @apply fill-current w-6 h-6;
+  @apply text-hOnBackground;
 }
 
 .danger-action {
@@ -326,22 +354,4 @@ const closeDialog = () => {
   @apply mt-4;
   @apply bg-green-800 hover:bg-green-700 active:bg-green-600;
 }
-
-.label {
-  @apply flex-none min-w-40 text-left;
-}
-
-.social-icon {
-  @apply w-6 h-6;
-}
-
-.value {
-  @apply flex-auto text-left pr-6;
-  @apply break-words overflow-auto;
-}
-
-.chevron {
-  @apply flex-none;
-}
-
 </style>

frontend/src/views/profile/account/AddressDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Address",
+  "label": "Your address"
+} 

frontend/src/views/profile/account/AddressDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Dirección",
+  "label": "Tu dirección"
+} 

frontend/src/views/profile/account/AddressDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Adresse",
+  "label": "Votre adresse"
+} 

frontend/src/views/profile/account/AddressDialog.vue

@@ -1,31 +1,33 @@
 <template>
-  <v-card>
-    <v-card-title>
-      Adresse
-    </v-card-title>
+  <div class="card dialog">
+    <div class="card-title">
+      {{ t('title') }}
+    </div>
 
-    <div class="m-4">
+    <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="address"
-          label="Votre adresse"
+          :label="t('label')"
       ></v-text-field>
     </div>
 
-    <v-card-actions>
-      <v-btn variant="plain" @click="requestClose">
-        Annuler
-      </v-btn>
-      <v-btn color="#A6147D" @click="requestSave">
-        Enregistrer
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    <div class="card-actions">
+      <button class="secondary" @click="requestClose">
+        {{ t('cancel') }}
+      </button>
+      <button class="primary" @click="requestSave">
+        {{ t('save') }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import {ref} from 'vue';
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps(['address'])
 const emit = defineEmits(['close', 'save'])
 

frontend/src/views/profile/account/AliasDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Alias",
+  "label": "Your alias"
+} 

frontend/src/views/profile/account/AliasDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Alias",
+  "label": "Tu alias"
+} 

frontend/src/views/profile/account/AliasDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Pseudonyme",
+  "label": "Votre pseudonyme"
+} 

frontend/src/views/profile/account/AliasDialog.vue

@@ -3,14 +3,14 @@
   <div class="card dialog">
 
     <div class="card-title">
-      {{ $t('personnalinformation.alias') }}
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="alias"
-          :label="$t('personnalinformation.alias')"
+          :label="t('label')"
       ></v-text-field>
     </div>
 
@@ -18,12 +18,12 @@
 
       <button class="secondary"
               @click="requestClose">
-        Annuler
+        {{ t('cancel') }}
       </button>
 
       <button class="primary"
               @click="requestSave">
-        Enregistrer
+        {{ t('save') }}
       </button>
 
     </div>
@@ -34,7 +34,9 @@
 
 <script setup>
 import {ref} from 'vue';
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps(['alias'])
 const emit = defineEmits(['close', 'save'])
 

frontend/src/views/profile/account/BirthdayDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Birthday",
+  "label": "Your birthday"
+} 

frontend/src/views/profile/account/BirthdayDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Fecha de nacimiento",
+  "label": "Tu fecha de nacimiento"
+} 

frontend/src/views/profile/account/BirthdayDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Date de naissance",
+  "label": "Votre date de naissance"
+} 

frontend/src/views/profile/account/BirthdayDialog.vue

@@ -1,31 +1,33 @@
 <template>
-  <v-card>
-    <v-card-title>
-      Date de naissance
-    </v-card-title>
+  <div class="card dialog">
+    <div class="card-title">
+      {{ t('title') }}
+    </div>
 
-    <div class="m-4">
+    <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="birthDate"
-          label="AAAA-MM-JJ"
+          :label="t('label')"
       ></v-text-field>
     </div>
 
-    <v-card-actions>
-      <v-btn variant="plain" @click="requestClose">
-        Annuler
-      </v-btn>
-      <v-btn color="#A6147D" @click="requestSave">
-        Enregistrer
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    <div class="card-actions">
+      <button class="secondary" @click="requestClose">
+        {{ t('cancel') }}
+      </button>
+      <button class="primary" @click="requestSave">
+        {{ t('save') }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import {ref} from 'vue';
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps(['birthDate'])
 const emit = defineEmits(['close', 'save'])
 

frontend/src/views/profile/account/EmailDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Email",
+  "label": "Your email"
+} 

frontend/src/views/profile/account/EmailDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Correo electrónico",
+  "label": "Tu correo electrónico"
+} 

frontend/src/views/profile/account/EmailDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Email",
+  "label": "Votre email"
+} 

frontend/src/views/profile/account/EmailDialog.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="card dialog">
     <div class="card-title">
-      Courriel
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <v-text-field
           v-model="email"
-          label="Votre courriel"
+          :label="t('label')"
           variant="outlined"
       ></v-text-field>
     </div>
@@ -15,11 +15,11 @@
     <div class="card-actions">
       <button class="secondary"
               @click="cancel">
-        Annuler
+        {{ t('cancel') }}
       </button>
       <button class="primary"
               @click="save">
-        Enregistrer
+        {{ t('save') }}
       </button>
     </div>
   </div>
@@ -28,7 +28,9 @@
 <script setup>
 import {ref} from 'vue';
 import {useClient} from "@/plugins/api.js";
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps({
   creator: {
     required: true

frontend/src/views/profile/account/FullnameDialog.en.json

@@ -0,0 +1,5 @@
+{
+  "title": "Full Name",
+  "firstname": "First Name",
+  "lastname": "Last Name"
+} 

frontend/src/views/profile/account/FullnameDialog.es.json

@@ -0,0 +1,5 @@
+{
+  "title": "Nombre completo",
+  "firstname": "Nombre",
+  "lastname": "Apellido"
+} 

frontend/src/views/profile/account/FullnameDialog.fr.json

@@ -0,0 +1,5 @@
+{
+  "title": "Nom complet",
+  "firstname": "Prénom",
+  "lastname": "Nom"
+} 

frontend/src/views/profile/account/FullnameDialog.vue

@@ -1,6 +1,8 @@
 <script setup>
 import {ref} from 'vue';
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps(['firstname', 'lastname'])
 const emit = defineEmits(['close', 'save'])
 
@@ -12,18 +14,16 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
 </script>
 
 <template>
-
   <div class="card dialog">
-
-  <div class="card-title">
-      {{ $t('personnalinformation.fullname') }}
+    <div class="card-title">
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="firstname"
-          :label="$t('personnalinformation.firstname')"
+          :label="t('firstname')"
       ></v-text-field>
     </div>
 
@@ -31,23 +31,20 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
       <v-text-field
           variant="outlined"
           v-model="lastname"
-          :label="$t('personnalinformation.lastname')"
+          :label="t('lastname')"
       ></v-text-field>
     </div>
 
     <div class="card-actions">
-
       <button class="secondary"
               @click="requestClose">
-        Annuler
+        {{ t('cancel') }}
       </button>
 
       <button class="primary"
               @click="requestSave">
-        Enregistrer
+        {{ t('save') }}
       </button>
-
     </div>
-
   </div>
 </template>

frontend/src/views/profile/account/PhoneDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Phone Number",
+  "label": "Your phone number"
+} 

frontend/src/views/profile/account/PhoneDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Número de teléfono",
+  "label": "Tu número de teléfono"
+} 

frontend/src/views/profile/account/PhoneDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Numéro de téléphone",
+  "label": "Votre numéro de téléphone"
+} 

frontend/src/views/profile/account/PhoneDialog.vue

@@ -1,32 +1,33 @@
 <template>
-  <v-card>
-    <v-card-title>
-      Numéro de téléphone
-    </v-card-title>
+  <div class="card dialog">
+    <div class="card-title">
+      {{ t('title') }}
+    </div>
 
-    <div class="m-4">
+    <div class="card-content">
       <v-text-field
           variant="outlined"
           v-model="phone"
-          label="Votre numéro de téléphone"
+          :label="t('label')"
       ></v-text-field>
     </div>
 
-    <v-card-actions>
-      <v-btn variant="plain" @click="requestClose">
-        Annuler
-      </v-btn>
-      <v-btn color="#A6147D" @click="requestSave">
-        Enregistrer
-      </v-btn>
-    </v-card-actions>
-  
-  </v-card>
+    <div class="card-actions">
+      <button class="secondary" @click="requestClose">
+        {{ t('cancel') }}
+      </button>
+      <button class="primary" @click="requestSave">
+        {{ t('save') }}
+      </button>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import {ref} from 'vue';
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps(['phone'])
 const emit = defineEmits(['close', 'save'])
 

frontend/src/views/profile/account/PortraitDialog.en.json

@@ -0,0 +1,5 @@
+{
+  "title": "Portrait",
+  "label": "Select an image",
+  "preview": "Portrait preview"
+} 

frontend/src/views/profile/account/PortraitDialog.es.json

@@ -0,0 +1,5 @@
+{
+  "title": "Retrato",
+  "label": "Selecciona una imagen",
+  "preview": "Vista previa del retrato"
+} 

frontend/src/views/profile/account/PortraitDialog.fr.json

@@ -0,0 +1,5 @@
+{
+  "title": "Portrait",
+  "label": "Sélectionnez une image",
+  "preview": "Aperçu du portrait"
+} 

frontend/src/views/profile/account/PortraitDialog.vue

@@ -1,14 +1,14 @@
 <template>
-  <v-card>
-    <v-card-title>
-      Portrait
-    </v-card-title>
+  <div class="card dialog">
+    <div class="card-title">
+      {{ t('title') }}
+    </div>
 
-    <div class="m-4">
+    <div class="card-content">
       <img
           :src="portraitData"
           class="mb-5 w-full transition duration-200 ease-in-out transform"
-          alt="Aperçu de la bannière"
+          :alt="t('preview')"
       />
 
       <v-file-input
@@ -16,25 +16,27 @@
           v-model="selectedFile"
           variant="outlined"
           accept="image/*"
-          label="Votre bannière"
+          :label="t('label')"
       ></v-file-input>
     </div>
 
-    <v-card-actions>
-      <v-btn variant="plain" @click="requestClose">
-        Annuler
-      </v-btn>
-      <v-btn color="#A6147D" @click="requestSave">
-        Enregistrer
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    <div class="card-actions">
+      <button class="secondary" @click="requestClose">
+        {{ t('cancel') }}
+      </button>
+      <button class="primary" @click="requestSave">
+        {{ t('save') }}
+      </button>
+    </div>
+  </div>
 </template>
 
 
 <script setup>
 import {ref} from 'vue';
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps(['portraitUrl'])
 const emit = defineEmits(['close', 'save'])
 

frontend/src/views/profile/account/SocialsDialog.en.json

@@ -0,0 +1,8 @@
+{
+  "title": "Social Networks",
+  "facebook": "Facebook URL",
+  "instagram": "Instagram URL",
+  "twitter": "Twitter URL",
+  "youtube": "YouTube URL",
+  "tiktok": "TikTok URL"
+} 

frontend/src/views/profile/account/SocialsDialog.es.json

@@ -0,0 +1,8 @@
+{
+  "title": "Redes sociales",
+  "facebook": "URL de Facebook",
+  "instagram": "URL de Instagram",
+  "twitter": "URL de Twitter",
+  "youtube": "URL de YouTube",
+  "tiktok": "URL de TikTok"
+} 

frontend/src/views/profile/account/SocialsDialog.fr.json

@@ -0,0 +1,8 @@
+{
+  "title": "Réseaux sociaux",
+  "facebook": "URL Facebook",
+  "instagram": "URL Instagram",
+  "twitter": "URL Twitter",
+  "youtube": "URL YouTube",
+  "tiktok": "URL TikTok"
+} 

frontend/src/views/profile/account/SocialsDialog.vue

@@ -0,0 +1,72 @@
+<template>
+  <v-card>
+    <v-card-title>
+      {{ t('title') }}
+    </v-card-title>
+
+    <div class="m-4">
+      <v-text-field
+          variant="outlined"
+          v-model="facebookUrl"
+          :label="t('facebook')"
+      ></v-text-field>
+
+      <v-text-field
+          variant="outlined"
+          v-model="instagramUrl"
+          :label="t('instagram')"
+      ></v-text-field>
+
+      <v-text-field
+          variant="outlined"
+          v-model="twitterUrl"
+          :label="t('twitter')"
+      ></v-text-field>
+
+      <v-text-field
+          variant="outlined"
+          v-model="youtubeUrl"
+          :label="t('youtube')"
+      ></v-text-field>
+
+      <v-text-field
+          variant="outlined"
+          v-model="tiktokUrl"
+          :label="t('tiktok')"
+      ></v-text-field>
+    </div>
+
+    <v-card-actions>
+      <v-btn variant="plain" @click="requestClose">
+        {{ t('cancel') }}
+      </v-btn>
+      <v-btn color="#A6147D" @click="requestSave">
+        {{ t('save') }}
+      </v-btn>
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script setup>
+import {ref} from 'vue';
+import { useTranslations } from "@/translations/translations";
+
+const t = useTranslations();
+const props = defineProps(['socials'])
+const emit = defineEmits(['close', 'save'])
+
+const facebookUrl = ref(props.socials?.facebookUrl || '')
+const instagramUrl = ref(props.socials?.instagramUrl || '')
+const twitterUrl = ref(props.socials?.twitterUrl || '')
+const youtubeUrl = ref(props.socials?.youtubeUrl || '')
+const tiktokUrl = ref(props.socials?.tiktokUrl || '')
+
+const requestClose = () => emit('close')
+const requestSave = () => emit('save', {
+  facebookUrl: facebookUrl.value,
+  instagramUrl: instagramUrl.value,
+  twitterUrl: twitterUrl.value,
+  youtubeUrl: youtubeUrl.value,
+  tiktokUrl: tiktokUrl.value
+})
+</script> 

frontend/src/views/profile/creators/ChangeNameDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Change Name",
+  "label": "Your name"
+} 

frontend/src/views/profile/creators/ChangeNameDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Cambiar Nombre",
+  "label": "Tu nombre"
+} 

frontend/src/views/profile/creators/ChangeNameDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Modifier le Nom",
+  "label": "Votre nom"
+} 

frontend/src/views/profile/creators/ChangeNameDialog.vue

@@ -1,7 +1,9 @@
 <script setup>
 import {ref} from 'vue';
 import {useClient} from '@/plugins/api.js';
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps({
   creator: {
     required: true
@@ -37,15 +39,14 @@ const cancel = () => {
 
 <template>
   <div class="card dialog">
-
     <div class="card-title">
-      Modifier le Nom
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <v-text-field
           v-model="name"
-          label="Name"
+          :label="t('label')"
           outlined
           variant="outlined"
       ></v-text-field>
@@ -53,11 +54,11 @@ const cancel = () => {
       <div class="card-actions">
         <button class="secondary"
                 @click="cancel">
-          Annuler
+          {{ t('cancel') }}
         </button>
         <button class="primary"
                 @click="save">
-          Enregistrer
+          {{ t('save') }}
         </button>
       </div>
     </div>

frontend/src/views/profile/creators/ChangeSlugDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Change URL",
+  "label": "Your URL"
+} 

frontend/src/views/profile/creators/ChangeSlugDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Cambiar URL",
+  "label": "Tu URL"
+} 

frontend/src/views/profile/creators/ChangeSlugDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Modifier l'URL",
+  "label": "Votre URL"
+} 

frontend/src/views/profile/creators/ChangeSlugDialog.vue

@@ -3,6 +3,7 @@ import {computed, ref} from 'vue';
 import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
 import { useClient } from "@/plugins/api.js";
 import NameEditor from "@/views/creators/NameEditor.vue";
+import { useTranslations } from '@/translations/translations';
 
 const props = defineProps({
   creator: {
@@ -14,6 +15,7 @@ const emit = defineEmits(['closeRequested']);
 
 const creatorProfileStore = useCreatorProfileStore();
 const client = useClient();
+const t = useTranslations();
 
 const newSlug = ref('');
 const slugReservationId = ref(undefined);
@@ -56,12 +58,12 @@ const cancel = () => {
 <template>
   <div class="card dialog">
     <div class="card-title">
-      Modifier l'URL
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <p class="mb-4">
-        L'adresse actuelle de votre page est : <strong>@{{ creator.slug }}</strong>
+        {{ t('label') }} <strong>@{{ creator.slug }}</strong>
       </p>
       
       <name-editor
@@ -81,12 +83,12 @@ const cancel = () => {
       <div class="card-actions">
         <button class="secondary"
                 @click="cancel">
-          Annuler
+          {{ t('cancel') }}
         </button>
         <button class="primary"
                 @click="save"
                 :disabled="!canSave || isOperationPending">
-          Enregistrer
+          {{ t('save') }}
         </button>
       </div>
     </div>

frontend/src/views/profile/creators/ChangeStripeIdDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Change Stripe ID",
+  "label": "Your Stripe ID"
+} 

frontend/src/views/profile/creators/ChangeStripeIdDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Cambiar ID de Stripe",
+  "label": "Tu ID de Stripe"
+} 

frontend/src/views/profile/creators/ChangeStripeIdDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Modifier l'ID Stripe",
+  "label": "Votre ID Stripe"
+} 

frontend/src/views/profile/creators/ChangeStripeIdDialog.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {useClient} from '@/plugins/api.js';
 import {ref} from 'vue';
+import { useTranslations } from '@/translations/translations';
 
 const props = defineProps({
   creator: {
@@ -11,6 +12,7 @@ const props = defineProps({
 const emits = defineEmits(['closeRequested']);
 
 const stripeId = ref(props.creator.stripeId);
+const t = useTranslations();
 
 const client = useClient();
 
@@ -35,13 +37,13 @@ const cancel = () => {
 <template>
   <div class="card dialog">
     <div class="card-title">
-      Modifier le Stripe ID
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <v-text-field
           v-model="stripeId"
-          label="Stripe Id"
+          :label="t('label')"
           outlined
           variant="outlined"
       ></v-text-field>
@@ -49,11 +51,11 @@ const cancel = () => {
       <div class="card-actions">
         <button class="secondary"
                 @click="cancel">
-          Annuler
+          {{ t('cancel') }}
         </button>
         <button class="primary"
                 @click="save">
-          Enregistrer
+          {{ t('save') }}
         </button>
       </div>
     </div>

frontend/src/views/profile/creators/ChangeTitleDialog.en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Change Title",
+  "label": "Your title"
+} 

frontend/src/views/profile/creators/ChangeTitleDialog.es.json

@@ -0,0 +1,4 @@
+{
+  "title": "Cambiar Título",
+  "label": "Tu título"
+} 

frontend/src/views/profile/creators/ChangeTitleDialog.fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Modifier le Titre",
+  "label": "Votre titre"
+} 

frontend/src/views/profile/creators/ChangeTitleDialog.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {ref} from 'vue';
 import {useClient} from '@/plugins/api.js';
+import { useTranslations } from '@/translations/translations';
 
 const props = defineProps({
   creator: {
@@ -11,6 +12,7 @@ const props = defineProps({
 const emits = defineEmits(['closeRequested']);
 
 const title = ref(props.creator.title);
+const t = useTranslations();
 
 const client = useClient();
 
@@ -39,13 +41,13 @@ const cancel = () => {
   <div class="card dialog">
 
     <div class="card-title">
-      Modifier le Titre
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
       <v-text-field
           v-model="title"
-          label="Titre"
+          :label="t('label')"
           outlined
           variant="outlined"
       ></v-text-field>
@@ -53,11 +55,11 @@ const cancel = () => {
       <div class="card-actions">
         <button class="secondary"
                 @click="cancel">
-          Annuler
+          {{ t('cancel') }}
         </button>
         <button class="primary"
                 @click="save">
-          Enregistrer
+          {{ t('save') }}
         </button>
       </div>
     </div>

frontend/src/views/profile/creators/SocialsDialog.en.json

@@ -0,0 +1,11 @@
+{
+  "title": "Social Networks",
+  "facebook": "Facebook Link",
+  "instagram": "Instagram Link",
+  "linkedin": "LinkedIn Link",
+  "reddit": "Reddit Link",
+  "tiktok": "TikTok Link",
+  "website": "Website Link",
+  "x": "X Link",
+  "youtube": "YouTube Link"
+} 

frontend/src/views/profile/creators/SocialsDialog.es.json

@@ -0,0 +1,11 @@
+{
+  "title": "Redes Sociales",
+  "facebook": "Enlace de Facebook",
+  "instagram": "Enlace de Instagram",
+  "linkedin": "Enlace de LinkedIn",
+  "reddit": "Enlace de Reddit",
+  "tiktok": "Enlace de TikTok",
+  "website": "Enlace del sitio web",
+  "x": "Enlace de X",
+  "youtube": "Enlace de Youtube"
+} 

frontend/src/views/profile/creators/SocialsDialog.fr.json

@@ -0,0 +1,11 @@
+{
+  "title": "Réseaux Sociaux",
+  "facebook": "Lien Facebook",
+  "instagram": "Lien Instagram",
+  "linkedin": "Lien LinkedIn",
+  "reddit": "Lien Reddit",
+  "tiktok": "Lien TikTok",
+  "website": "Lien site web",
+  "x": "Lien X",
+  "youtube": "Lien Youtube"
+} 

frontend/src/views/profile/creators/SocialsDialog.vue

@@ -9,7 +9,9 @@ import Youtube from "@/views/svg/Youtube.vue";
 import Linkedin from "@/views/svg/Linkedin.vue";
 import Instagram from "@/views/svg/Instagram.vue";
 import Facebook from "@/views/svg/Facebook.vue";
+import { useTranslations } from "@/translations/translations";
 
+const t = useTranslations();
 const props = defineProps({
   creator: {
     required: true
@@ -69,7 +71,7 @@ const cancel = () => {
   <div class="card dialog">
 
     <div class="card-title">
-      Reseaux Sociaux
+      {{ t('title') }}
     </div>
 
     <div class="card-content">
@@ -79,7 +81,7 @@ const cancel = () => {
         <input
             v-model="facebookUrl"
             class="input-field"
-            placeholder="Lien Facebook"
+            :placeholder="t('facebook')"
             type="text"
         />
       </div>
@@ -89,7 +91,7 @@ const cancel = () => {
         <input
             v-model="instagramUrl"
             class="input-field"
-            placeholder="Lien Instagram"
+            :placeholder="t('instagram')"
             type="text"
         />
       </div>
@@ -99,7 +101,7 @@ const cancel = () => {
         <input
             v-model="linkedInUrl"
             class="input-field"
-            placeholder="Lien LinkedIn"
+            :placeholder="t('linkedin')"
             type="text"
         />
       </div>
@@ -109,7 +111,7 @@ const cancel = () => {
         <input
             v-model="redditUrl"
             class="input-field"
-            placeholder="Lien Reddit"
+            :placeholder="t('reddit')"
             type="text"
         />
       </div>
@@ -119,7 +121,7 @@ const cancel = () => {
         <input
             v-model="tikTokUrl"
             class="input-field"
-            placeholder="Lien TikTok"
+            :placeholder="t('tiktok')"
             type="text"
         />
       </div>
@@ -129,7 +131,7 @@ const cancel = () => {
         <input
             v-model="websiteUrl"
             class="input-field"
-            placeholder="Lien site web"
+            :placeholder="t('website')"
             type="text"
         />
       </div>
@@ -139,7 +141,7 @@ const cancel = () => {
         <input
             v-model="xUrl"
             class="input-field"
-            placeholder="Lien X"
+            :placeholder="t('x')"
             type="text"
         />
       </div>
@@ -149,7 +151,7 @@ const cancel = () => {
         <input
             v-model="youtubeUrl"
             class="input-field"
-            placeholder="Lien Youtube"
+            :placeholder="t('youtube')"
             type="text"
         />
       </div>
@@ -159,11 +161,11 @@ const cancel = () => {
     <div class="card-actions">
       <button class="secondary"
               @click="cancel">
-        Annuler
+        {{ t('cancel') }}
       </button>
       <button class="primary"
               @click="save">
-        Enregistrer
+        {{ t('save') }}
       </button>
     </div>