Is hutopy finally trilangual

frontend/src/views/profile/ProfilePage.vue

@@ -18,9 +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";
+import { useI18n } from 'vue-i18n';
 
-const t = useTranslations();
+const { t } = useI18n();
 const userProfileStore = useUserProfileStore()
 
 // ### Fullname
@@ -134,14 +134,14 @@ const closeDialog = () => {
       <div class="card">
 
         <div class="card-title">
-          {{ t('personal.informations') }}
+          {{ t('personalInfo') }}
         </div>
 
         <div class="content">
           <button
               class="action"
               @click="openEditFullname">
-            <span class="label">{{ t('personal.fullname') }}</span>
+            <span class="label">{{ t('fullName') }}</span>
             <span class="value">{{ userProfileStore.fullname }}</span>
             <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
           </button>
@@ -149,7 +149,7 @@ const closeDialog = () => {
           <button
               class="action"
               @click="openEditAlias">
-            <span class="label">{{ t('personal.alias') }}</span>
+            <span class="label">{{ t('alias') }}</span>
             <span class="value">{{ userProfileStore.user.alias }}</span>
             <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
           </button>
@@ -160,12 +160,12 @@ const closeDialog = () => {
       <div class="card">
 
         <div class="card-title">
-          {{ t('personal.contact') }}
+          {{ t('contactInfo') }}
         </div>
 
         <div class="content">
           <button class="action" @click="openDialog('EmailDialog')">
-            <span class="label">{{ t('personal.email') }}</span>
+            <span class="label">{{ t('email') }}</span>
             <span class="value">{{ userProfileStore.user.email }}</span>
             <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
           </button>
@@ -176,33 +176,33 @@ const closeDialog = () => {
       <template v-if="creatorProfileStore.creator !== undefined">
         <div class="card">
           <div class="card-title">
-            {{ t('creator.informations') }}
+            {{ t('creatorInfo') }}
           </div>
           <div class="content">
 
             <!-- NAME -->
             <button class="action"  @click="openDialog('ChangeNameDialog')">
-              <span class="label">{{ t('creator.name') }}</span>
+              <span class="label">{{ t('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('creator.slug') }}</span>
+              <span class="label">{{ t('username') }}</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('creator.title') }}</span>
+              <span class="label">{{ t('title') }}</span>
               <span class="value">{{ creatorProfileStore.creator.title }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
 
             <!-- STRIPE -->
             <button class="action" @click="openDialog('ChangeStripeIdDialog')">
-              <span class="label">{{ t('creator.stripeAccountId') }}</span>
+              <span class="label">{{ t('stripeAccountId') }}</span>
               <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
@@ -212,7 +212,7 @@ const closeDialog = () => {
 
         <div class="card">
           <div class="card-title">
-            {{ t('creator.socialnetwork') }}
+            {{ t('socialNetworks') }}
           </div>
 
           <div>
@@ -248,7 +248,7 @@ const closeDialog = () => {
               <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
               <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
             </button>
-
+            
             <button class="action" @click="openDialog('SocialsDialog')">
               <span class="label">
                 <tiktok class="social-icon"></tiktok>
@@ -285,20 +285,20 @@ const closeDialog = () => {
         </div>
 
         <div class="card">
-          <div class="card-title">{{ t('danger.title') }}</div>
+          <div class="card-title">{{ t('dangerZone') }}</div>
           <div class="content">
             <p>
-              {{ t('danger.warning') }}
+              {{ t('deleteWarning') }}
             </p>
             <button v-if="!creatorProfileStore.creator.isDeleted"
                     class="danger-action"
                     @click="creatorProfileStore.removeCreatorPage()">
-              {{ t('danger.delete') }}
+              {{ t('deleteCreatorPage') }}
             </button>
             <button v-else
                     class="safe-action"
                     @click="creatorProfileStore.restoreCreatorPage()">
-              {{ t('danger.restore') }}
+              {{ t('restoreCreatorPage') }}
             </button>
           </div>
         </div>
@@ -309,7 +309,6 @@ const closeDialog = () => {
 </template>
 
 <style scoped>
-
 .card {
   @apply bg-hBackground rounded-lg p-4 w-full max-w-2xl;
 }
@@ -355,4 +354,42 @@ const closeDialog = () => {
   @apply mt-4;
   @apply bg-green-800 hover:bg-green-700 active:bg-green-600;
 }
-</style>
+</style>
+
+<i18n>
+{
+  "en": {
+    "personalInfo": "Personal Information",
+    "fullName": "Full Name",
+    "alias": "Alias",
+    "contactInfo": "Contact Information",
+    "email": "Email",
+    "creatorInfo": "Creator Information",
+    "dangerZone": "Danger Zone",
+    "deleteWarning": "Are you sure you want to delete your creator page? This action cannot be undone.",
+    "restoreWarning": "Are you sure you want to restore your creator page? This will make your page visible again."
+  },
+  "fr": {
+    "personalInfo": "Informations Personnelles",
+    "fullName": "Nom Complet",
+    "alias": "Alias",
+    "contactInfo": "Informations de Contact",
+    "email": "Email",
+    "creatorInfo": "Informations du Créateur",
+    "dangerZone": "Zone de Danger",
+    "deleteWarning": "Êtes-vous sûr de vouloir supprimer votre page de créateur ? Cette action est irréversible.",
+    "restoreWarning": "Êtes-vous sûr de vouloir restaurer votre page de créateur ? Cela rendra votre page à nouveau visible."
+  },
+  "es": {
+    "personalInfo": "Información Personal",
+    "fullName": "Nombre Completo",
+    "alias": "Alias",
+    "contactInfo": "Información de Contacto",
+    "email": "Correo Electrónico",
+    "creatorInfo": "Información del Creador",
+    "dangerZone": "Zona de Peligro",
+    "deleteWarning": "¿Estás seguro de que quieres eliminar tu página de creador? Esta acción no se puede deshacer.",
+    "restoreWarning": "¿Estás seguro de que quieres restaurar tu página de creador? Esto hará que tu página sea visible nuevamente."
+  }
+}
+</i18n>