feat(i18n): deprecate Spanish language support in the frontend

frontend/src/locales/es.json

@@ -1,41 +0,0 @@
-{
-  "save": "Guardar",
-  "cancel": "Cancelar",
-  "edit": "Editar",
-  "delete": "Eliminar",
-  "create": "Crear",
-  "apply": "Aplicar",
-  "preview": "Vista previa",
-  "label": "Etiqueta",
-  "confirm": "Confirmar",
-  "close": "Cerrar",
-  "accept": "Aceptar",
-  "loading": "Cargando...",
-  "error": "Error",
-  "success": "Éxito",
-  "changesSaved": "Cambios guardados con éxito",
-  "errorOccurred": "Ha ocurrido un error",
-  "name": "Nombre",
-  "email": "Correo electrónico",
-  "password": "Contraseña",
-  "description": "Descripción",
-  "title": "Título",
-  "image": "Imagen",
-  "file": "Archivo",
-  "required": "Este campo es obligatorio",
-  "invalidEmail": "Correo electrónico inválido",
-  "invalidPassword": "Contraseña inválida",
-  "facebook": "Facebook",
-  "instagram": "Instagram",
-  "linkedin": "LinkedIn",
-  "reddit": "Reddit",
-  "tiktok": "TikTok",
-  "x": "X (Twitter)",
-  "youtube": "YouTube",
-  "website": "Sitio web",
-  "errors": {
-    "unexpected": "Ha ocurrido un error inesperado",
-    "imageLoad": "Error al cargar la imagen",
-    "imageUpload": "Error al subir la imagen"
-  }
-} 

frontend/src/main.js

@@ -5,43 +5,60 @@ import { createPinia } from 'pinia';
 import 'vuetify/styles';
 import { createVuetify } from 'vuetify';
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
-import { VDialog, VApp, VBtn, VProgressLinear, VProgressCircular, VIcon, VTextField, VSnackbar, VForm, VTextarea, VAlert } from 'vuetify/components';
-import { } from 'vuetify/directives';
+import {
+    VAlert,
+    VApp,
+    VBtn,
+    VDialog,
+    VForm,
+    VIcon,
+    VProgressCircular,
+    VProgressLinear,
+    VSnackbar,
+    VTextarea,
+    VTextField,
+} from 'vuetify/components';
 import vueGoogleOauth from 'vue3-google-login';
-import { useAuthStore } from "@/stores/authStore.js";
-import { useUserProfileStore } from "@/stores/userProfileStore.js";
-import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
+import { useAuthStore } from '@/stores/authStore.js';
+import { useUserProfileStore } from '@/stores/userProfileStore.js';
+import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
 import Toast, { POSITION } from 'vue-toastification';
 import 'vue-toastification/dist/index.css';
 import './assets/main.css';
+import { createI18n } from 'vue-i18n';
+import en from '@/locales/en.json';
+import fr from '@/locales/fr.json';
 
 const vuetify = createVuetify({
     components: {
-    VDialog, VApp, VBtn, VProgressLinear, VProgressCircular, VIcon, VTextField, VSnackbar, VForm, VTextarea, VAlert
-  },
-  directives: {
+        VDialog,
+        VApp,
+        VBtn,
+        VProgressLinear,
+        VProgressCircular,
+        VIcon,
+        VTextField,
+        VSnackbar,
+        VForm,
+        VTextarea,
+        VAlert,
     },
+    directives: {},
     icons: {
         defaultSet: 'mdi',
         aliases,
-    sets: { mdi }
-  }
+        sets: { mdi },
+    },
 });
 
-import { createI18n } from 'vue-i18n'
-import en from '@/locales/en.json'
-import fr from '@/locales/fr.json'
-import es from '@/locales/es.json'
-
 const i18n = createI18n({
     legacy: false,
-  fallbackLocale: 'en',
+    fallbackLocale: 'fr',
     messages: {
         en: en,
         fr: fr,
-    es: es
-  }
-})
+    },
+});
 
 const pinia = createPinia();
 

frontend/src/stores/languageStore.js

@@ -1,31 +1,38 @@
-import { defineStore } from 'pinia'
-import { useSessionStorage } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
+import { defineStore } from 'pinia';
+import { useSessionStorage } from '@vueuse/core';
+import { useI18n } from 'vue-i18n';
 
-export const useLanguageStore = defineStore(
-    'language',
-    () => {
-        // Initialize with the stored value or default to 'fr'
-        const storedLocale = useSessionStorage('user-locale', 'fr')
+const ALLOWED_LOCALES = ['en', 'fr'];
+const DEFAULT_LOCALE = 'fr';
 
-        // Get i18n instance
-        const { locale } = useI18n()
+export const useLanguageStore = defineStore('language', () => {
+    const storedLocale = useSessionStorage('user-locale', DEFAULT_LOCALE);
 
-        // Set the initial locale from storage
-        if (locale && storedLocale.value) {
-            locale.value = storedLocale.value
+    // Get i18n instance (provided globally)
+    const { locale } = useI18n();
+
+    function sanitizeLocale(value) {
+        return ALLOWED_LOCALES.includes(value) ? value : DEFAULT_LOCALE;
+    }
+
+    // Initialize locale with a sanitized value
+    const initial = sanitizeLocale(storedLocale.value);
+    storedLocale.value = initial;
+    if (locale) {
+        locale.value = initial;
     }
 
     function setLocale(newLocale) {
+        const next = sanitizeLocale(newLocale);
         if (locale) {
-                locale.value = newLocale
+            locale.value = next;
         }
-            storedLocale.value = newLocale
+        storedLocale.value = next;
     }
 
     return {
         locale: storedLocale,
-            setLocale
-        }
-    }
-) 
+        setLocale,
+        allowedLocales: ALLOWED_LOCALES,
+    };
+});

frontend/src/views/auth/ForgotPasswordView.vue

@@ -14,27 +14,38 @@
                     <div class="card-content">
                         <div class="flex flex-col gap-4">
                             <div class="form-field">
-                <label for="email" class="form-label">{{ t('email') }}</label>
+                                <label
+                                    class="form-label"
+                                    for="email"
+                                >
+                                    {{ t('email') }}
+                                </label>
                                 <input
                                     id="email"
                                     v-model="email"
-                    type="email"
                                     class="form-input"
                                     required
+                                    type="email"
                                 />
                             </div>
 
                             <button
-                  type="submit"
-                  class="primary w-full"
                                 :disabled="isLoading"
+                                class="primary w-full"
+                                type="submit"
                             >
-                <span v-if="isLoading" class="loading-spinner mr-2"></span>
+                                <span
+                                    v-if="isLoading"
+                                    class="loading-spinner mr-2"
+                                ></span>
                                 {{ t('resetPassword') }}
                             </button>
 
                             <div class="text-center mt-4">
-                <router-link to="/login" class="text-sm text-blue-500">
+                                <router-link
+                                    class="text-sm text-blue-500"
+                                    to="/login"
+                                >
                                     {{ t('backToLogin') }}
                                 </router-link>
                             </div>
@@ -44,12 +55,18 @@
             </div>
 
             <!-- Success message -->
-      <div v-if="showSuccessMessage" class="notification success">
+            <div
+                v-if="showSuccessMessage"
+                class="notification success"
+            >
                 {{ t('resetEmailSent') }}
             </div>
 
             <!-- Error message -->
-      <div v-if="showErrorMessage" class="notification error">
+            <div
+                v-if="showErrorMessage"
+                class="notification error"
+            >
                 {{ errorMessage }}
             </div>
         </div>
@@ -57,22 +74,22 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
-import {useI18n} from 'vue-i18n';
-import {useRouter} from 'vue-router';
-import {useClient} from '@/plugins/api.js';
+    import { ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useRouter } from 'vue-router';
+    import { useClient } from '@/plugins/api.js';
 
-const {t} = useI18n();
-const router = useRouter();
-const clientApi = useClient();
+    const { t } = useI18n();
+    const router = useRouter();
+    const clientApi = useClient();
 
-const email = ref('');
-const isLoading = ref(false);
-const showSuccessMessage = ref(false);
-const showErrorMessage = ref(false);
-const errorMessage = ref('');
+    const email = ref('');
+    const isLoading = ref(false);
+    const showSuccessMessage = ref(false);
+    const showErrorMessage = ref(false);
+    const errorMessage = ref('');
 
-async function handleForgotPassword() {
+    async function handleForgotPassword() {
         // Reset notification states
         showSuccessMessage.value = false;
         showErrorMessage.value = false;
@@ -88,7 +105,7 @@ async function handleForgotPassword() {
         try {
             // Call password reset API
             await clientApi.post('api/users/forgot-password', {
-      email: email.value.trim()
+                email: email.value.trim(),
             });
 
             // Show success message
@@ -108,51 +125,53 @@ async function handleForgotPassword() {
         } finally {
             isLoading.value = false;
         }
-}
+    }
 </script>
 
 <style scoped>
-.card-content {
+    .card-content {
         @apply p-6;
-}
+    }
 
-.form-field {
+    .form-field {
         @apply flex flex-col mb-4;
-}
+    }
 
-.form-label {
+    .form-label {
         @apply block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300;
-}
+    }
 
-.form-input {
+    .form-input {
         @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg
         focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5
         dark:bg-gray-700 dark:border-gray-600 dark:text-white;
-}
+    }
 
-.primary {
+    .primary {
         @apply bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-sm px-5 py-2.5
         focus:outline-none focus:ring-4 focus:ring-blue-300 disabled:opacity-50 disabled:cursor-not-allowed;
-}
+    }
 
-.notification {
+    .notification {
         @apply fixed bottom-4 right-4 p-4 mb-4 rounded-lg text-sm;
-  animation: fade-in 0.3s ease-in, fade-out 0.3s ease-out 5s forwards;
-}
+        animation:
+            fade-in 0.3s ease-in,
+            fade-out 0.3s ease-out 5s forwards;
+    }
 
-.success {
+    .success {
         @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300;
-}
+    }
 
-.error {
+    .error {
         @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300;
-}
+    }
 
-.loading-spinner {
+    .loading-spinner {
         @apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
-}
+    }
 
-@keyframes fade-in {
+    @keyframes fade-in {
         from {
             opacity: 0;
             transform: translateY(10px);
@@ -161,16 +180,16 @@ async function handleForgotPassword() {
             opacity: 1;
             transform: translateY(0);
         }
-}
+    }
 
-@keyframes fade-out {
+    @keyframes fade-out {
         from {
             opacity: 1;
         }
         to {
             opacity: 0;
         }
-}
+    }
 </style>
 
 <i18n>
@@ -194,16 +213,6 @@ async function handleForgotPassword() {
         "resetEmailSent": "Email de réinitialisation du mot de passe envoyé. Veuillez vérifier votre boîte de réception.",
         "resetRequestFailed": "Échec de la demande de réinitialisation du mot de passe. Veuillez réessayer.",
         "emailRequired": "L'email est requis."
-  },
-  "es": {
-    "title": "¿Olvidaste tu contraseña?",
-    "description": "Por favor, introduce la dirección de correo electrónico de tu cuenta. Te enviaremos un enlace para restablecer tu contraseña.",
-    "email": "Correo electrónico",
-    "resetPassword": "Restablecer contraseña",
-    "backToLogin": "Volver al inicio de sesión",
-    "resetEmailSent": "Correo electrónico de restablecimiento de contraseña enviado. Por favor revise su bandeja de entrada.",
-    "resetRequestFailed": "No se pudo solicitar el restablecimiento de contraseña. Por favor, inténtelo de nuevo.",
-    "emailRequired": "El correo electrónico es obligatorio."
     }
 }
 </i18n>

frontend/src/views/auth/LoginView.vue

@@ -1,16 +1,20 @@
 <template>
     <div class="flex min-h-full w-full items-center justify-center p-4">
-
         <div class="flex w-full max-w-[512px] flex-col gap-10">
             <h1 class="login-text text-center text-2xl font-bold">
                 {{ t('title') }}
             </h1>
 
-
             <div class="flex flex-col gap-4">
-        <google-login :callback="googleCallback" popup-type="TOKEN">
+                <google-login
+                    :callback="googleCallback"
+                    popup-type="TOKEN"
+                >
                     <button class="secondary">
-            <v-icon class="mr-2" :icon="mdiGoogle" />
+                        <v-icon
+                            :icon="mdiGoogle"
+                            class="mr-2"
+                        />
                         {{ t('continueWithGoogle') }}
                     </button>
                 </google-login>
@@ -25,74 +29,103 @@
             <!-- Add email/password form -->
             <v-form @submit.prevent="handleLocalLogin">
                 <div class="flex flex-col gap-4">
-          <v-text-field v-model="email" :label="t('email')" type="email" required></v-text-field>
+                    <v-text-field
+                        v-model="email"
+                        :label="t('email')"
+                        required
+                        type="email"
+                    ></v-text-field>
 
-          <v-text-field v-model="password" :label="t('password')" :type="showPassword ? 'text' : 'password'" required>
+                    <v-text-field
+                        v-model="password"
+                        :label="t('password')"
+                        :type="showPassword ? 'text' : 'password'"
+                        required
+                    >
                         <template v-slot:append-inner>
-              <v-icon @click="showPassword = !showPassword" class="visibility-toggle" size="small"
-                :icon="showPassword ? mdiEyeOff : mdiEye" />
+                            <v-icon
+                                :icon="showPassword ? mdiEyeOff : mdiEye"
+                                class="visibility-toggle"
+                                size="small"
+                                @click="showPassword = !showPassword"
+                            />
                         </template>
                     </v-text-field>
 
-          <v-btn type="submit" color="primary" block>
+                    <v-btn
+                        block
+                        color="primary"
+                        type="submit"
+                    >
                         {{ t('signIn') }}
                     </v-btn>
 
                     <div class="text-center">
-            <a @click="forgotPassword" class="cursor-pointer text-sm text-blue-500">
+                        <a
+                            class="cursor-pointer text-sm text-blue-500"
+                            @click="forgotPassword"
+                        >
                             {{ t('forgotPassword') }}
                         </a>
                     </div>
 
                     <div class="mt-2 text-center">
-            <a @click="resendVerification" class="cursor-pointer text-sm text-blue-500">
+                        <a
+                            class="cursor-pointer text-sm text-blue-500"
+                            @click="resendVerification"
+                        >
                             {{ t('resendVerification') }}
                         </a>
                     </div>
 
                     <div class="mt-4 text-center">
                         {{ t('noAccount') }}
-            <router-link to="/register" class="text-blue-500">
+                        <router-link
+                            class="text-blue-500"
+                            to="/register"
+                        >
                             {{ t('register') }}
                         </router-link>
                     </div>
                 </div>
             </v-form>
-
         </div>
 
         <!-- Error notification -->
-    <v-snackbar v-model="errorSnackBar" color="error">
+        <v-snackbar
+            v-model="errorSnackBar"
+            color="error"
+        >
             {{ t('loginFailed') }}
         </v-snackbar>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { GoogleLogin } from "vue3-google-login";
-import { useAuthStore } from '@/stores/authStore.js';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { mdiGoogle, mdiEye, mdiEyeOff } from '@mdi/js';
+    import { ref } from 'vue';
+    import { GoogleLogin } from 'vue3-google-login';
+    import { useAuthStore } from '@/stores/authStore.js';
+    import { useI18n } from 'vue-i18n';
+    import { useRouter } from 'vue-router';
+    import { mdiEye, mdiEyeOff, mdiGoogle } from '@mdi/js';
 
-const { t } = useI18n();
-const router = useRouter();
-const authStore = useAuthStore();
+    const { t } = useI18n();
+    const router = useRouter();
+    const authStore = useAuthStore();
 
-const email = ref('');
-const password = ref('');
-const errorSnackBar = ref(false);
-const showPassword = ref(false);
+    const email = ref('');
+    const password = ref('');
+    const errorSnackBar = ref(false);
+    const showPassword = ref(false);
 
-const props = defineProps({
+    const props = defineProps({
         returnUrl: {
             type: String,
-    default: '/landing'
-  }
-});
+            default: '/landing',
+        },
+    });
 
-async function handleLocalLogin() {
+    async function handleLocalLogin() {
         try {
             await authStore.login(email.value, password.value);
             await router.push(props.returnUrl);
@@ -100,9 +133,9 @@ async function handleLocalLogin() {
             console.error('Login failed:', error);
             errorSnackBar.value = true;
         }
-}
+    }
 
-async function googleCallback(token) {
+    async function googleCallback(token) {
         try {
             const response = await authStore.loginWithGoogle(JSON.stringify(token));
             if (response === true) {
@@ -114,37 +147,37 @@ async function googleCallback(token) {
             console.error('Login failed:', error);
             errorSnackBar.value = true;
         }
-}
+    }
 
-function forgotPassword() {
+    function forgotPassword() {
         router.push('/forgot-password');
-}
+    }
 
-function resendVerification() {
+    function resendVerification() {
         router.push('/verify-email');
-}
+    }
 </script>
 
 <style scoped>
-.visibility-toggle {
+    .visibility-toggle {
         @apply cursor-pointer;
         @apply transition-opacity duration-300;
         @apply opacity-60 hover:opacity-100;
         @apply z-10;
-}
+    }
 
-/* Override Vuetify's default padding to accommodate our icon */
-:deep(.v-field__append-inner) {
+    /* Override Vuetify's default padding to accommodate our icon */
+    :deep(.v-field__append-inner) {
         padding-inline-start: 0;
-}
+    }
 
-/* Dark mode support if needed */
-@media (prefers-color-scheme: dark) {
+    /* Dark mode support if needed */
+    @media (prefers-color-scheme: dark) {
         .custom-divider {
             background-color: rgb(75, 85, 99);
             /* Equivalent to gray-600 */
         }
-}
+    }
 </style>
 
 <i18n>
@@ -176,20 +209,6 @@ function resendVerification() {
         "register": "S'inscrire",
         "loginFailed": "Échec de la connexion. Veuillez vérifier vos identifiants.",
         "continueWithGoogle": "Continuer avec Google"
-  },
-  "es": {
-    "title": "Iniciar sesión",
-    "alt": "Inicio de sesión",
-    "email": "Correo electrónico",
-    "password": "Contraseña",
-    "signIn": "Conéctate",
-    "forgotPassword": "¿Olvidó su contraseña?",
-    "resendVerification": "Reenviar correo de verificación",
-    "orContinueWith": "o",
-    "noAccount": "¿No tiene una cuenta?",
-    "register": "Registrarse",
-    "loginFailed": "Error de inicio de sesión. Por favor, compruebe sus credenciales.",
-    "continueWithGoogle": "Continuar con Google"
     }
 }
 </i18n>

frontend/src/views/auth/RegisterView.vue

@@ -25,8 +25,8 @@
                         {{ t('success.backToLogin') }}
                     </router-link>
                     <router-link
-                        class="text-blue-500 hover:underline"
                         :to="{ path: '/verify-email', query: { email: userEmail } }"
+                        class="text-blue-500 hover:underline"
                     >
                         {{ t('success.resendVerification') }}
                     </router-link>
@@ -232,26 +232,6 @@
             "backToLogin": "Retour à la connexion",
             "resendVerification": "Vous n'avez pas reçu l'email? Renvoyer la vérification"
         }
-    },
-    "es": {
-        "title": "Crea tu cuenta",
-        "alt": "Registro de Hutopy",
-        "name": "Nombre completo",
-        "email": "Correo electrónico",
-        "password": "Contraseña",
-        "confirmPassword": "Confirmar contraseña",
-        "passwordRequirements": "La contraseña debe tener al menos 8 caracteres",
-        "register": "Registrarse",
-        "alreadyHaveAccount": "¿Ya tienes una cuenta?",
-        "signIn": "Iniciar sesión",
-        "passwordsDoNotMatch": "Las contraseñas no coinciden",
-        "registrationFailed": "El registro falló. Por favor, inténtelo de nuevo.",
-        "success": {
-            "title": "¡Registro exitoso!",
-            "message": "Por favor revisa tu correo electrónico para verificar tu cuenta. Hemos enviado un enlace de verificación a:",
-            "backToLogin": "Volver al inicio de sesión",
-            "resendVerification": "¿No recibiste el correo? Reenviar verificación"
-        }
     }
 }
 </i18n>

frontend/src/views/auth/ResetPasswordView.vue

@@ -259,19 +259,6 @@
         "passwordTooShort": "Le mot de passe doit comporter au moins 8 caractères",
         "resetFailed": "Échec de la réinitialisation du mot de passe. Veuillez réessayer ou demander un nouveau lien de réinitialisation.",
         "invalidResetLink": "Lien de réinitialisation invalide ou expiré. Veuillez demander une nouvelle réinitialisation de mot de passe."
-    },
-    "es": {
-        "title": "Restablecer su Contraseña",
-        "newPassword": "Nueva Contraseña",
-        "confirmPassword": "Confirmar Contraseña",
-        "passwordRequirements": "La contraseña debe tener al menos 8 caracteres",
-        "resetPassword": "Restablecer Contraseña",
-        "passwordResetSuccess": "¡Su contraseña ha sido restablecida con éxito!",
-        "proceedToLogin": "Proceder al Inicio de Sesión",
-        "passwordsDoNotMatch": "Las contraseñas no coinciden",
-        "passwordTooShort": "La contraseña debe tener al menos 8 caracteres",
-        "resetFailed": "Error al restablecer la contraseña. Inténtelo de nuevo o solicite un nuevo enlace de restablecimiento.",
-        "invalidResetLink": "Enlace de restablecimiento inválido o caducado. Solicite un nuevo restablecimiento de contraseña."
     }
 }
 </i18n>

frontend/src/views/auth/VerifyEmailView.vue

@@ -2,57 +2,97 @@
     <div class="flex min-h-full w-full items-center justify-center p-4">
         <div class="flex w-full max-w-[512px] flex-col gap-10 text-center">
             <!-- Loading state while verification is in progress -->
-      <div v-if="isLoading" class="flex flex-col items-center gap-4">
-        <v-progress-circular indeterminate color="primary" size="64"></v-progress-circular>
+            <div
+                v-if="isLoading"
+                class="flex flex-col items-center gap-4"
+            >
+                <v-progress-circular
+                    color="primary"
+                    indeterminate
+                    size="64"
+                ></v-progress-circular>
                 <h2 class="text-xl font-medium">{{ t('verifying') }}</h2>
             </div>
 
             <!-- Success state -->
-      <div v-else-if="verificationSuccess" class="flex flex-col items-center gap-6">
-        <v-icon icon="mdi-check-circle" color="green" size="64"></v-icon>
+            <div
+                v-else-if="verificationSuccess"
+                class="flex flex-col items-center gap-6"
+            >
+                <v-icon
+                    color="green"
+                    icon="mdi-check-circle"
+                    size="64"
+                ></v-icon>
                 <h1 class="text-2xl font-bold text-green-600">{{ t('success.title') }}</h1>
                 <p>{{ t('success.message') }}</p>
-        <v-btn color="primary" @click="goToLogin">{{ t('success.goToLogin') }}</v-btn>
+                <v-btn
+                    color="primary"
+                    @click="goToLogin"
+                >
+                    {{ t('success.goToLogin') }}
+                </v-btn>
             </div>
 
             <!-- Error state -->
-      <div v-else class="flex flex-col items-center gap-6">
-        <v-icon icon="mdi-alert-circle" color="error" size="64"></v-icon>
+            <div
+                v-else
+                class="flex flex-col items-center gap-6"
+            >
+                <v-icon
+                    color="error"
+                    icon="mdi-alert-circle"
+                    size="64"
+                ></v-icon>
                 <h1 class="text-2xl font-bold text-red-600">{{ t('error.title') }}</h1>
                 <p>{{ errorMessage || t('error.defaultMessage') }}</p>
 
                 <div class="mt-4 flex flex-col gap-4 w-full">
-          <v-btn color="primary" @click="goToLogin">{{ t('error.goToLogin') }}</v-btn>
+                    <v-btn
+                        color="primary"
+                        @click="goToLogin"
+                    >
+                        {{ t('error.goToLogin') }}
+                    </v-btn>
                     <v-divider class="my-4"></v-divider>
 
                     <!-- Resend verification email section -->
                     <h2 class="text-xl font-medium">{{ t('resend.title') }}</h2>
-          <v-form @submit.prevent="handleResendVerification" class="w-full">
+                    <v-form
+                        class="w-full"
+                        @submit.prevent="handleResendVerification"
+                    >
                         <div class="flex flex-col gap-4">
                             <v-text-field
                                 v-model="resendEmail"
-                :label="t('resend.emailLabel')" 
-                type="email" 
-                required 
                                 :error-messages="resendEmailError"
+                                :label="t('resend.emailLabel')"
+                                required
+                                type="email"
                             ></v-text-field>
 
                             <v-btn
-                type="submit" 
-                color="secondary" 
-                block 
                                 :loading="resendLoading"
+                                block
+                                color="secondary"
+                                type="submit"
                             >
                                 {{ t('resend.button') }}
                             </v-btn>
 
                             <!-- Resend success message -->
-              <div v-if="resendSuccess" class="mt-2 p-3 bg-green-50 border border-green-200 rounded text-green-700 text-sm">
+                            <div
+                                v-if="resendSuccess"
+                                class="mt-2 p-3 bg-green-50 border border-green-200 rounded text-green-700 text-sm"
+                            >
                                 {{ t('resend.success') }}
                             </div>
 
                             <!-- Resend error message -->
-              <div v-if="resendError" class="mt-2 p-3 bg-red-50 border border-red-200 rounded text-red-700 text-sm">
+                            <div
+                                v-if="resendError"
+                                class="mt-2 p-3 bg-red-50 border border-red-200 rounded text-red-700 text-sm"
+                            >
                                 {{ resendError }}
                             </div>
                         </div>
@@ -64,29 +104,29 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useClient } from '@/plugins/api.js';
-import { useI18n } from 'vue-i18n';
-import { useRouter, useRoute } from 'vue-router';
+    import { onMounted, ref } from 'vue';
+    import { useClient } from '@/plugins/api.js';
+    import { useI18n } from 'vue-i18n';
+    import { useRoute, useRouter } from 'vue-router';
 
-const { t } = useI18n();
-const router = useRouter();
-const route = useRoute();
-const clientApi = useClient();
+    const { t } = useI18n();
+    const router = useRouter();
+    const route = useRoute();
+    const clientApi = useClient();
 
-// Verification state
-const isLoading = ref(true);
-const verificationSuccess = ref(false);
-const errorMessage = ref('');
+    // Verification state
+    const isLoading = ref(true);
+    const verificationSuccess = ref(false);
+    const errorMessage = ref('');
 
-// Resend verification state
-const resendEmail = ref('');
-const resendEmailError = ref('');
-const resendLoading = ref(false);
-const resendSuccess = ref(false);
-const resendError = ref('');
+    // Resend verification state
+    const resendEmail = ref('');
+    const resendEmailError = ref('');
+    const resendLoading = ref(false);
+    const resendSuccess = ref(false);
+    const resendError = ref('');
 
-onMounted(async () => {
+    onMounted(async () => {
         const userId = route.query.userId;
         const token = route.query.token;
 
@@ -112,9 +152,9 @@ onMounted(async () => {
         } finally {
             isLoading.value = false;
         }
-});
+    });
 
-async function handleResendVerification() {
+    async function handleResendVerification() {
         // Reset states
         resendEmailError.value = '';
         resendSuccess.value = false;
@@ -131,7 +171,7 @@ async function handleResendVerification() {
 
         try {
             await clientApi.post('/api/users/resend-verification', {
-      email: resendEmail.value.trim()
+                email: resendEmail.value.trim(),
             });
             resendSuccess.value = true;
         } catch (error) {
@@ -140,11 +180,11 @@ async function handleResendVerification() {
         } finally {
             resendLoading.value = false;
         }
-}
+    }
 
-function goToLogin() {
+    function goToLogin() {
         router.push('/login');
-}
+    }
 </script>
 
 <i18n>
@@ -192,28 +232,6 @@ function goToLogin() {
             "error": "Échec de l'envoi de l'email de vérification. Veuillez réessayer.",
             "invalidEmail": "Veuillez entrer une adresse email valide."
         }
-  },
-  "es": {
-    "verifying": "Verificando tu correo electrónico...",
-    "success": {
-      "title": "¡Correo electrónico verificado con éxito!",
-      "message": "Tu correo electrónico ha sido verificado. Ahora puedes iniciar sesión en tu cuenta.",
-      "goToLogin": "Ir al inicio de sesión"
-    },
-    "error": {
-      "title": "Falló la verificación",
-      "defaultMessage": "No pudimos verificar tu correo electrónico. El enlace puede ser inválido o estar caducado.",
-      "missingParams": "Faltan parámetros de verificación requeridos.",
-      "goToLogin": "Ir al inicio de sesión"
-    },
-    "resend": {
-      "title": "Reenviar correo de verificación",
-      "emailLabel": "Correo electrónico",
-      "button": "Reenviar correo de verificación",
-      "success": "Correo de verificación enviado con éxito. Por favor revisa tu bandeja de entrada.",
-      "error": "Error al enviar el correo de verificación. Por favor, inténtelo de nuevo.",
-      "invalidEmail": "Por favor, introduce una dirección de correo electrónico válida."
-    }
     }
 }
 </i18n>

frontend/src/views/creators/AboutCreator.vue

@@ -681,36 +681,6 @@
                 "descriptionRequired": "La description est obligatoire"
             }
         }
-    },
-    "es": {
-        "edit": "Editar",
-        "save": "Guardar",
-        "cancel": "Cancelar",
-        "creator": {
-            "sections": {
-                "about": {
-                    "title": "Acerca de",
-                    "description": "Descripción",
-                    "contactInfo": "Información de contacto",
-                    "characters": "caracteres",
-                    "formattingHint": "Consejo: ¡Usa saltos de línea y emojis para hacer tu descripción más atractiva!"
-                },
-                "photos": {
-                    "title": "Fotos",
-                    "image": "Imagen"
-                }
-            },
-            "fields": {
-                "videoUrl": "URL del video",
-                "phoneNumber": "Número de teléfono",
-                "email": "Correo electrónico"
-            },
-            "validation": {
-                "invalidYoutubeUrl": "Por favor, introduce una URL de YouTube o un ID de video válido",
-                "descriptionTooLong": "La descripción no puede exceder los 2000 caracteres",
-                "descriptionRequired": "La descripción es obligatoria"
-            }
-        }
     }
 }
 </i18n>

frontend/src/views/creators/ActualBanner.vue

@@ -1,50 +1,70 @@
 <template>
     <div class="relative">
         <!-- Banner Container with mouse events -->
-    <div class="relative overflow-y-auto rounded-b-2xl" @mouseenter="showTint = isCurrentCreator"
-      @mouseleave="showTint = false" @click="isCurrentCreator && openBannerEditor()">
-      <img class="banner aspect-[4/1] w-full object-cover"
-        :src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'" :alt="t('alt')">
+        <div
+            class="relative overflow-y-auto rounded-b-2xl"
+            @click="isCurrentCreator && openBannerEditor()"
+            @mouseenter="showTint = isCurrentCreator"
+            @mouseleave="showTint = false"
+        >
+            <img
+                :alt="t('alt')"
+                :src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'"
+                class="banner aspect-[4/1] w-full object-cover"
+            />
             <!-- Tint Effect -->
-      <div v-if="showTint" class="absolute inset-0 cursor-pointer bg-black/25">
+            <div
+                v-if="showTint"
+                class="absolute inset-0 cursor-pointer bg-black/25"
+            >
                 <!-- Top-right Icon -->
                 <div
-          class="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg">
-          <v-icon large :icon="mdiPencil" />
+                    class="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
+                >
+                    <v-icon
+                        :icon="mdiPencil"
+                        large
+                    />
                 </div>
             </div>
         </div>
     </div>
 
-  <v-dialog v-model="isDialogOpen" max-width="800px">
-    <BannerEditor :creator="brandingStore.value" @closeRequested="() => isDialogOpen = false" />
+    <v-dialog
+        v-model="isDialogOpen"
+        max-width="800px"
+    >
+        <BannerEditor
+            :creator="brandingStore.value"
+            @closeRequested="() => (isDialogOpen = false)"
+        />
     </v-dialog>
 </template>
 
 <script setup>
-import BannerEditor from "@/views/creators/BannerEditor.vue";
-import { computed, ref } from "vue";
-import { useBrandingStore } from "@/stores/brandingStore.js";
-import { useAuthStore } from "@/stores/authStore.js";
-import { useI18n } from 'vue-i18n';
-import { mdiPencil } from '@mdi/js';
+    import BannerEditor from '@/views/creators/BannerEditor.vue';
+    import { computed, ref } from 'vue';
+    import { useBrandingStore } from '@/stores/brandingStore.js';
+    import { useAuthStore } from '@/stores/authStore.js';
+    import { useI18n } from 'vue-i18n';
+    import { mdiPencil } from '@mdi/js';
 
-const authStore = useAuthStore();
-const brandingStore = useBrandingStore();
-const { t } = useI18n();
+    const authStore = useAuthStore();
+    const brandingStore = useBrandingStore();
+    const { t } = useI18n();
 
-// State
-const showTint = ref(false);
-const isDialogOpen = ref(false);
+    // State
+    const showTint = ref(false);
+    const isDialogOpen = ref(false);
 
-// Methods
-const openBannerEditor = () => {
+    // Methods
+    const openBannerEditor = () => {
         isDialogOpen.value = true;
-};
+    };
 
-const isCurrentCreator = computed(() => {
+    const isCurrentCreator = computed(() => {
         return authStore.userId === brandingStore.value.id;
-});
+    });
 </script>
 
 <style scoped></style>
@@ -56,9 +76,6 @@ const isCurrentCreator = computed(() => {
     },
     "fr": {
         "alt": "Bannière du créateur"
-  },
-  "es": {
-    "alt": "Banner del creador"
     }
 }
 </i18n>

frontend/src/views/creators/AlbumEditor.vue

@@ -1,89 +1,136 @@
 <template>
     <div class="album-editor">
-
         <h2 class="mb-4 text-xl font-semibold">
             {{ t('title') }}
         </h2>
 
         <!-- Drop zone with photos -->
-    <div class="drop-zone" @dragover.prevent @drop.prevent="handleDrop" @click="triggerFileInput">
-
+        <div
+            class="drop-zone"
+            @click="triggerFileInput"
+            @dragover.prevent
+            @drop.prevent="handleDrop"
+        >
             <!-- Upload prompt -->
             <div class="drop-zone-content">
-        <v-icon size="large" :icon="mdiPlus" />
+                <v-icon
+                    :icon="mdiPlus"
+                    size="large"
+                />
                 <span class="mt-2 text-sm">{{ t('dropzoneText') }}</span>
             </div>
 
             <!-- Hidden file input -->
-      <input type="file" ref="fileInput" @change="handleFileUpload" accept="image/*" multiple class="hidden" />
+            <input
+                ref="fileInput"
+                accept="image/*"
+                class="hidden"
+                multiple
+                type="file"
+                @change="handleFileUpload"
+            />
 
             <!-- Photos grid -->
-      <draggable v-model="localImages" class="photos-grid" item-key="id" @end="handleReorder" :filter="'.action-btn'"
-        :prevent-on-filter="false">
+            <draggable
+                v-model="localImages"
+                :filter="'.action-btn'"
+                :prevent-on-filter="false"
+                class="photos-grid"
+                item-key="id"
+                @end="handleReorder"
+            >
                 <template #item="{ element, index }">
                     <div class="photo-wrapper">
                         <div class="index-bubble">{{ index + 1 }}</div>
-            <img :src="element.image.originalUrl" :alt="'Image ' + (index + 1)" />
+                        <img
+                            :alt="'Image ' + (index + 1)"
+                            :src="element.image.originalUrl"
+                        />
                         <!-- Processing spinner overlay -->
-            <div v-if="element.isProcessing" class="loading-overlay">
-              <v-progress-circular indeterminate color="primary"></v-progress-circular>
+                        <div
+                            v-if="element.isProcessing"
+                            class="loading-overlay"
+                        >
+                            <v-progress-circular
+                                color="primary"
+                                indeterminate
+                            ></v-progress-circular>
                             <span class="mt-2 text-sm text-white">{{ t('processing') }}</span>
                         </div>
                         <!-- Upload spinner overlay -->
-            <div v-if="element.isUploading" class="loading-overlay uploading">
-              <v-progress-circular indeterminate color="secondary"></v-progress-circular>
+                        <div
+                            v-if="element.isUploading"
+                            class="loading-overlay uploading"
+                        >
+                            <v-progress-circular
+                                color="secondary"
+                                indeterminate
+                            ></v-progress-circular>
                             <span class="mt-2 text-sm text-white">{{ t('uploading') }}</span>
                         </div>
                         <!-- Left arrow -->
-            <button @click.stop="moveImage(index, 'up')" @touchstart.stop="moveImage(index, 'up')"
-              class="action-btn left-btn" :disabled="index === 0" :title="t('moveLeft')">
+                        <button
+                            :disabled="index === 0"
+                            :title="t('moveLeft')"
+                            class="action-btn left-btn"
+                            @click.stop="moveImage(index, 'up')"
+                            @touchstart.stop="moveImage(index, 'up')"
+                        >
                             <v-icon :icon="mdiArrowLeft" />
                         </button>
                         <!-- Right arrow -->
-            <button @click.stop="moveImage(index, 'down')" @touchstart.stop="moveImage(index, 'down')"
-              class="action-btn right-btn" :disabled="index === localImages.length - 1" :title="t('moveRight')">
+                        <button
+                            :disabled="index === localImages.length - 1"
+                            :title="t('moveRight')"
+                            class="action-btn right-btn"
+                            @click.stop="moveImage(index, 'down')"
+                            @touchstart.stop="moveImage(index, 'down')"
+                        >
                             <v-icon :icon="mdiArrowRight" />
                         </button>
                         <!-- Delete button -->
-            <button @click.stop="deleteImage(index)" touchstart.stop="deleteImage(index)" class="action-btn delete-btn"
-              :title="t('delete')">
+                        <button
+                            :title="t('delete')"
+                            class="action-btn delete-btn"
+                            touchstart.stop="deleteImage(index)"
+                            @click.stop="deleteImage(index)"
+                        >
                             <v-icon :icon="mdiDelete" />
                         </button>
                     </div>
                 </template>
             </draggable>
         </div>
-
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from "vue";
-import { useI18n } from 'vue-i18n';
-import { v7 } from 'uuid';
-import draggable from 'vuedraggable';
-import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from '@mdi/js';
+    import { onMounted, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { v7 } from 'uuid';
+    import draggable from 'vuedraggable';
+    import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from '@mdi/js';
 
-const props = defineProps({
+    const props = defineProps({
         images: {
             type: Array,
-    required: true
-  }
-});
+            required: true,
+        },
+    });
 
-const emit = defineEmits(['update:images']);
+    const emit = defineEmits(['update:images']);
 
-const { t } = useI18n();
-const fileInput = ref(null);
-const localImages = ref([]);
+    const { t } = useI18n();
+    const fileInput = ref(null);
+    const localImages = ref([]);
 
-onMounted(() => {
+    onMounted(() => {
         // Initialize local images with IDs and states
         localImages.value = props.images;
-});
+    });
 
-function handleFiles(files) {
-  console.log('handleFiles:', files)
+    function handleFiles(files) {
+        console.log('handleFiles:', files);
         for (const file of files) {
             if (file.type.startsWith('image/')) {
                 try {
@@ -102,7 +149,7 @@ function handleFiles(files) {
 
                     console.log('Processing image:', tempImage);
 
-        reader.onload = (e) => {
+                    reader.onload = e => {
                         console.log('Image loaded:', e);
                         const index = localImages.value.findIndex(local => local.image.id === tempImage.image.id);
                         if (index !== -1) {
@@ -117,31 +164,31 @@ function handleFiles(files) {
                 }
             }
         }
-}
-function handleDrop(event) {
+    }
+
+    function handleDrop(event) {
         console.log('Drop triggered');
         const files = Array.from(event.dataTransfer.files);
         handleFiles(files);
-}
+    }
 
-function triggerFileInput() {
+    function triggerFileInput() {
         console.log('Input triggered');
         fileInput.value.click();
-}
+    }
 
-function handleFileUpload(event) {
+    function handleFileUpload(event) {
         console.log('File input triggered');
         const files = Array.from(event.target.files);
         handleFiles(files);
         event.target.value = '';
-}
+    }
 
-function handleReorder() {
+    function handleReorder() {
         emit('update:images', localImages.value);
-}
+    }
 
-
-function moveImage(index, direction) {
+    function moveImage(index, direction) {
         const newIndex = direction === 'up' ? index - 1 : index + 1;
         if (newIndex >= 0 && newIndex < localImages.value.length) {
             const temp = localImages.value[index];
@@ -149,21 +196,20 @@ function moveImage(index, direction) {
             localImages.value[newIndex] = temp;
             emit('update:images', localImages.value);
         }
-}
+    }
 
-function deleteImage(index) {
+    function deleteImage(index) {
         localImages.value.splice(index, 1);
         emit('update:images', localImages.value);
-}
-
+    }
 </script>
 
 <style scoped>
-.album-editor {
+    .album-editor {
         @apply w-full;
-}
+    }
 
-.drop-zone {
+    .drop-zone {
         @apply w-full;
         @apply min-h-[200px];
         @apply border-2;
@@ -176,9 +222,9 @@ function deleteImage(index) {
         @apply duration-200;
         @apply overflow-visible;
         @apply bg-hSurface;
-}
+    }
 
-.drop-zone-content {
+    .drop-zone-content {
         @apply flex;
         @apply flex-col;
         @apply items-center;
@@ -186,9 +232,9 @@ function deleteImage(index) {
         @apply mb-8;
         @apply relative;
         @apply z-10;
-}
+    }
 
-.photos-grid {
+    .photos-grid {
         @apply grid;
         @apply grid-cols-2;
         @apply sm:grid-cols-3;
@@ -197,25 +243,25 @@ function deleteImage(index) {
         @apply gap-4;
         @apply w-full;
         @apply pb-1;
-}
+    }
 
-.photo-wrapper {
+    .photo-wrapper {
         @apply relative;
         @apply aspect-square;
         @apply rounded-lg;
         @apply overflow-hidden;
         @apply bg-gray-100;
         @apply cursor-pointer;
-}
+    }
 
-.photo-wrapper img {
+    .photo-wrapper img {
         @apply w-full;
         @apply h-full;
         @apply object-cover;
         @apply pointer-events-none;
-}
+    }
 
-.action-btn {
+    .action-btn {
         @apply absolute;
         @apply bg-black;
         @apply bg-opacity-50;
@@ -229,40 +275,40 @@ function deleteImage(index) {
         @apply duration-200;
         @apply opacity-0;
         @apply z-10;
-}
+    }
 
-/* Show buttons on hover for desktop */
-.action-btn {
+    /* Show buttons on hover for desktop */
+    .action-btn {
         @apply opacity-100;
-}
+    }
 
-.action-btn:disabled {
+    .action-btn:disabled {
         @apply opacity-30;
         @apply cursor-not-allowed;
         @apply bg-gray-500;
         @apply scale-90;
-}
+    }
 
-.left-btn {
+    .left-btn {
         @apply top-1/2;
         @apply -translate-y-1/2;
         @apply left-2;
-}
+    }
 
-.right-btn {
+    .right-btn {
         @apply top-1/2;
         @apply -translate-y-1/2;
         @apply right-2;
-}
+    }
 
-.delete-btn {
+    .delete-btn {
         @apply top-2;
         @apply right-2;
         @apply bg-red-500;
         @apply bg-opacity-50;
-}
+    }
 
-.index-bubble {
+    .index-bubble {
         @apply absolute;
         @apply top-2;
         @apply left-2;
@@ -278,9 +324,9 @@ function deleteImage(index) {
         @apply items-center;
         @apply justify-center;
         @apply z-10;
-}
+    }
 
-.loading-overlay {
+    .loading-overlay {
         @apply absolute;
         @apply inset-0;
         @apply flex;
@@ -290,11 +336,11 @@ function deleteImage(index) {
         @apply bg-black;
         @apply bg-opacity-50;
         @apply z-20;
-}
+    }
 
-.loading-overlay.uploading {
+    .loading-overlay.uploading {
         @apply bg-opacity-75;
-}
+    }
 </style>
 
 <i18n>
@@ -316,15 +362,6 @@ function deleteImage(index) {
         "moveLeft": "Déplacer à gauche",
         "moveRight": "Déplacer à droite",
         "delete": "Supprimer"
-  },
-  "es": {
-    "title": "Album",
-    "dropzoneText": "Suelta una foto aquí para añadirla al álbum",
-    "processing": "Procesando...",
-    "uploading": "Subiendo...",
-    "moveLeft": "Mover a la izquierda",
-    "moveRight": "Mover a la derecha",
-    "delete": "Eliminar"
     }
 }
 </i18n>

frontend/src/views/creators/AlbumView.vue

@@ -1,63 +1,70 @@
 <template>
-  <div v-if="hasImages" class="album-view">
+    <div
+        v-if="hasImages"
+        class="album-view"
+    >
         <!-- Album Display -->
         <div class="image-grid">
-      <div v-for="(url, index) in displayedImages" 
+            <div
+                v-for="(url, index) in displayedImages"
                 :key="index"
                 class="image-wrapper"
-           @click="$emit('photo-click', index)">
-        <img :src="url"
+                @click="$emit('photo-click', index)"
+            >
+                <img
                     :alt="t('creator.sections.album.image')"
-             class="image"/>
+                    :src="url"
+                    class="image"
+                />
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-// Add 'photo-click' to emits
-const emit = defineEmits(['photo-click']);
+    // Add 'photo-click' to emits
+    const emit = defineEmits(['photo-click']);
 
-import { computed, ref, onMounted, onUnmounted } from "vue";
-import { useI18n } from 'vue-i18n';
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
+    const props = defineProps({
         images: {
             type: Array,
             required: true,
-    default: () => []
-  }
-});
+            default: () => [],
+        },
+    });
 
-const { t } = useI18n();
+    const { t } = useI18n();
 
-// Add a reactive window width
-const windowWidth = ref(window.innerWidth);
+    // Add a reactive window width
+    const windowWidth = ref(window.innerWidth);
 
-// Update window width on resize
-const handleResize = () => {
+    // Update window width on resize
+    const handleResize = () => {
         windowWidth.value = window.innerWidth;
-};
+    };
 
-// Add and remove event listener
-onMounted(() => {
+    // Add and remove event listener
+    onMounted(() => {
         window.addEventListener('resize', handleResize);
-});
+    });
 
-onUnmounted(() => {
+    onUnmounted(() => {
         window.removeEventListener('resize', handleResize);
-});
+    });
 
-const hasImages = computed(() => {
+    const hasImages = computed(() => {
         return props.images.some(url => url);
-});
+    });
 
-const nonEmptyImages = computed(() => {
+    const nonEmptyImages = computed(() => {
         return props.images.filter(url => url);
-});
+    });
 
-// Show different number of images based on reactive window width
-const displayedImages = computed(() => {
+    // Show different number of images based on reactive window width
+    const displayedImages = computed(() => {
         const images = nonEmptyImages.value;
         if (windowWidth.value >= 1024) {
             return images.slice(0, 5); // 5 images on large screens
@@ -65,41 +72,40 @@ const displayedImages = computed(() => {
             return images.slice(0, 4); // 4 images on medium screens
         }
         return images.slice(0, 3); // 3 images on smaller screens
-});
+    });
 
-// Add computed property for grid columns based on number of images
-const gridColumns = computed(() => {
+    // Add computed property for grid columns based on number of images
+    const gridColumns = computed(() => {
         const count = displayedImages.value.length;
         if (count === 1) return '1fr';
         if (count === 2) return 'repeat(2, 1fr)';
         if (count === 3) return 'repeat(3, 1fr)';
         if (count === 4) return 'repeat(4, 1fr)';
         return 'repeat(5, 1fr)';
-});
+    });
 </script>
 
 <style scoped>
-.album-view {
+    .album-view {
         @apply w-full;
-}
+    }
 
-.image-grid {
+    .image-grid {
         @apply w-full grid;
         grid-template-columns: v-bind(gridColumns);
-}
+    }
 
-.image-wrapper {
+    .image-wrapper {
         @apply relative w-full aspect-square;
-}
+    }
 
-.image {
+    .image {
         width: 100%;
         height: 100%;
         object-fit: cover;
-}
-
-/* Responsive adjustments */
+    }
 
+    /* Responsive adjustments */
 </style>
 
 <i18n>
@@ -123,16 +129,6 @@ const gridColumns = computed(() => {
                 }
             }
         }
-  },
-  "es": {
-    "creator": {
-      "sections": {
-        "album": {
-          "title": "Álbum de fotos",
-          "image": "Imagen del álbum"
-        }
-      }
-    }
     }
 }
 </i18n>

frontend/src/views/creators/AlbumViewer.vue

@@ -1,114 +1,154 @@
 <template>
-  <v-dialog v-model="dialog" fullscreen :scrim="true" transition="dialog-bottom-transition"
-    @click:outside="closeViewer">
-    <div class="album-viewer" @click.self="closeViewer">
+    <v-dialog
+        v-model="dialog"
+        :scrim="true"
+        fullscreen
+        transition="dialog-bottom-transition"
+        @click:outside="closeViewer"
+    >
+        <div
+            class="album-viewer"
+            @click.self="closeViewer"
+        >
             <!-- Main image container -->
             <div class="image-container">
-        <img :src="currentImage" :alt="t('viewer.imageAlt', { index: currentIndex + 1 })" class="main-image" />
+                <img
+                    :alt="t('viewer.imageAlt', { index: currentIndex + 1 })"
+                    :src="currentImage"
+                    class="main-image"
+                />
 
                 <!-- Navigation buttons -->
-        <button class="nav-btn left-btn" @click.stop="previousImage" :disabled="currentIndex === 0"
-          :title="t('viewer.previous')">
-          <v-icon size="large" color="white" :icon="mdiChevronLeft" />
+                <button
+                    :disabled="currentIndex === 0"
+                    :title="t('viewer.previous')"
+                    class="nav-btn left-btn"
+                    @click.stop="previousImage"
+                >
+                    <v-icon
+                        :icon="mdiChevronLeft"
+                        color="white"
+                        size="large"
+                    />
                 </button>
 
-        <button class="nav-btn right-btn" @click.stop="nextImage" :disabled="currentIndex === images.length - 1"
-          :title="t('viewer.next')">
-          <v-icon size="large" color="white" :icon="mdiChevronRight" />
+                <button
+                    :disabled="currentIndex === images.length - 1"
+                    :title="t('viewer.next')"
+                    class="nav-btn right-btn"
+                    @click.stop="nextImage"
+                >
+                    <v-icon
+                        :icon="mdiChevronRight"
+                        color="white"
+                        size="large"
+                    />
                 </button>
 
                 <!-- Close button -->
-        <button class="close-btn" @click.stop="closeViewer" :title="t('viewer.close')">
-          <v-icon size="large" color="white" :icon="mdiClose" />
+                <button
+                    :title="t('viewer.close')"
+                    class="close-btn"
+                    @click.stop="closeViewer"
+                >
+                    <v-icon
+                        :icon="mdiClose"
+                        color="white"
+                        size="large"
+                    />
                 </button>
 
                 <!-- Image counter -->
-        <div class="image-counter">
-          {{ currentIndex + 1 }} / {{ images.length }}
-        </div>
+                <div class="image-counter">{{ currentIndex + 1 }} / {{ images.length }}</div>
             </div>
         </div>
     </v-dialog>
 </template>
 
 <script setup>
-import { ref, watch, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js';
+    import { computed, ref, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { mdiChevronLeft, mdiChevronRight, mdiClose } from '@mdi/js';
 
-const { t } = useI18n();
+    const { t } = useI18n();
 
-const props = defineProps({
+    const props = defineProps({
         modelValue: {
             type: Boolean,
-    required: true
+            required: true,
         },
         images: {
             type: Array,
-    required: true
+            required: true,
         },
         startIndex: {
             type: Number,
-    default: 0
-  }
-});
+            default: 0,
+        },
+    });
 
-const emit = defineEmits(['update:modelValue']);
+    const emit = defineEmits(['update:modelValue']);
 
-const dialog = ref(false);
-const currentIndex = ref(0);
+    const dialog = ref(false);
+    const currentIndex = ref(0);
 
-const currentImage = computed(() => props.images[currentIndex.value]);
+    const currentImage = computed(() => props.images[currentIndex.value]);
 
-watch(() => props.modelValue, (newVal) => {
+    watch(
+        () => props.modelValue,
+        newVal => {
             dialog.value = newVal;
             if (newVal) {
                 currentIndex.value = props.startIndex;
             }
-});
+        }
+    );
 
-watch(() => dialog.value, (newVal) => {
+    watch(
+        () => dialog.value,
+        newVal => {
             emit('update:modelValue', newVal);
-});
+        }
+    );
 
-function nextImage() {
+    function nextImage() {
         if (currentIndex.value < props.images.length - 1) {
             currentIndex.value++;
         }
-}
+    }
 
-function previousImage() {
+    function previousImage() {
         if (currentIndex.value > 0) {
             currentIndex.value--;
         }
-}
+    }
 
-function closeViewer() {
+    function closeViewer() {
         dialog.value = false;
-}
+    }
 </script>
 
 <style scoped>
-.album-viewer {
+    .album-viewer {
         @apply fixed inset-0;
         @apply flex items-center justify-center;
         @apply bg-black bg-opacity-90;
         @apply z-50;
-}
+    }
 
-.image-container {
+    .image-container {
         @apply relative;
         @apply max-w-[90vw];
         @apply max-h-[90vh];
-}
+    }
 
-.main-image {
+    .main-image {
         @apply max-w-full;
         @apply max-h-[90vh];
         @apply object-contain;
-}
+    }
 
-.nav-btn {
+    .nav-btn {
         @apply absolute top-1/2 -translate-y-1/2;
         @apply p-4;
         @apply rounded-full;
@@ -116,33 +156,33 @@ function closeViewer() {
         @apply transition-all duration-200;
         @apply hover:bg-opacity-75;
         @apply disabled:opacity-30 disabled:cursor-not-allowed;
-}
+    }
 
-.left-btn {
+    .left-btn {
         @apply left-4;
-}
+    }
 
-.right-btn {
+    .right-btn {
         @apply right-4;
-}
+    }
 
-.close-btn {
+    .close-btn {
         @apply absolute top-4 right-4;
         @apply p-2;
         @apply rounded-full;
         @apply bg-black bg-opacity-50;
         @apply transition-all duration-200;
         @apply hover:bg-opacity-75;
-}
+    }
 
-.image-counter {
+    .image-counter {
         @apply absolute bottom-4 left-1/2 -translate-x-1/2;
         @apply px-4 py-2;
         @apply bg-black bg-opacity-50;
         @apply text-white;
         @apply rounded-full;
         @apply text-sm;
-}
+    }
 </style>
 
 <i18n>
@@ -162,14 +202,6 @@ function closeViewer() {
             "close": "Fermer",
             "imageAlt": "Image {index}"
         }
-  },
-  "es": {
-    "viewer": {
-      "previous": "Imagen anterior",
-      "next": "Imagen siguiente",
-      "close": "Cerrar",
-      "imageAlt": "Imagen {index}"
-    }
     }
 }
 </i18n>

frontend/src/views/creators/BannerActions.vue

@@ -1,21 +1,21 @@
 <script setup>
-import {useBrandingStore} from '@/stores/brandingStore.js';
-import DonationButton from '@/views/creators/DonationButton.vue';
-import CreatorLogo from "@/views/creators/CreatorLogo.vue";
-import NameTitle from "@/views/creators/NameTitle.vue";
-import Linkedin from "@/views/svg/Linkedin.vue";
-import X from "@/views/svg/X.vue";
-import Facebook from "@/views/svg/Facebook.vue";
-import Instagram from "@/views/svg/Instagram.vue";
-import Tiktok from "@/views/svg/Tiktok.vue";
-import Reddit from "@/views/svg/Reddit.vue";
-import Youtube from "@/views/svg/Youtube.vue";
-import Web from "@/views/svg/Web.vue";
-import {useI18n} from 'vue-i18n'
+    import { useBrandingStore } from '@/stores/brandingStore.js';
+    import DonationButton from '@/views/creators/DonationButton.vue';
+    import CreatorLogo from '@/views/creators/CreatorLogo.vue';
+    import NameTitle from '@/views/creators/NameTitle.vue';
+    import Linkedin from '@/views/svg/Linkedin.vue';
+    import X from '@/views/svg/X.vue';
+    import Facebook from '@/views/svg/Facebook.vue';
+    import Instagram from '@/views/svg/Instagram.vue';
+    import Tiktok from '@/views/svg/Tiktok.vue';
+    import Reddit from '@/views/svg/Reddit.vue';
+    import Youtube from '@/views/svg/Youtube.vue';
+    import Web from '@/views/svg/Web.vue';
+    import { useI18n } from 'vue-i18n';
 
-const brandingStore = useBrandingStore();
-const baseURL = window.location.origin;
-const {t} = useI18n();
+    const brandingStore = useBrandingStore();
+    const baseURL = window.location.origin;
+    const { t } = useI18n();
 </script>
 
 <template>
@@ -23,16 +23,14 @@ const {t} = useI18n();
         <!-- Container principal avec le profil -->
         <div class="relative w-full">
             <div class="bg-hPrimary text-hOnPrimary relative">
-
                 <!-- Portrait that overlaps both sections -->
                 <div class="absolute left-4 -bottom-2 z-10">
-          <creator-logo/>
+                    <creator-logo />
                 </div>
 
                 <!-- Desktop version (visible only on écrans moyens et grands) -->
                 <div class="social-info">
-          <div class="w-36">
-          </div>
+                    <div class="w-36"></div>
                     <div class="flex-grow flex flex-row">
                         <div class="flex-grow">
                             <name-title></name-title>
@@ -48,92 +46,102 @@ const {t} = useI18n();
                         </div>
                     </div>
                 </div>
-
             </div>
         </div>
 
         <!-- Section pour les icônes de réseaux sociaux -->
-    <div
-        class="h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary relative"
-    >
+        <div class="h-12 flex w-full items-center justify-center bg-hSecondary text-hOnSecondary relative">
             <div class="flex flex-row gap-10">
-
-        <a v-if="brandingStore.value?.socials?.facebookUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.facebookUrl"
                     :href="brandingStore.value?.socials?.facebookUrl"
+                    :title="t('facebook')"
                     target="_blank"
-           :title="t('facebook')">
+                >
                     <facebook class="social-icon"></facebook>
                 </a>
 
-        <a v-if="brandingStore.value?.socials?.instagramUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.instagramUrl"
                     :href="brandingStore.value?.socials?.instagramUrl"
+                    :title="t('instagram')"
                     target="_blank"
-           :title="t('instagram')">
+                >
                     <instagram class="social-icon"></instagram>
                 </a>
 
-        <a v-if="brandingStore.value?.socials?.linkedInUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.linkedInUrl"
                     :href="brandingStore.value?.socials?.linkedInUrl"
+                    :title="t('linkedin')"
                     target="_blank"
-           :title="t('linkedin')">
+                >
                     <linkedin class="social-icon"></linkedin>
                 </a>
 
-        <a v-if="brandingStore.value?.socials?.redditUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.redditUrl"
                     :href="brandingStore.value?.socials?.redditUrl"
+                    :title="t('reddit')"
                     target="_blank"
-           :title="t('reddit')">
+                >
                     <reddit class="social-icon"></reddit>
                 </a>
 
-        <a v-if="brandingStore.value?.socials?.tikTokUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.tikTokUrl"
                     :href="brandingStore.value?.socials?.tikTokUrl"
+                    :title="t('tiktok')"
                     target="_blank"
-           :title="t('tiktok')">
+                >
                     <tiktok class="social-icon"></tiktok>
                 </a>
 
-        <a v-if="brandingStore.value?.socials?.xUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.xUrl"
                     :href="brandingStore.value?.socials?.xUrl"
+                    :title="t('x')"
                     target="_blank"
-           :title="t('x')">
+                >
                     <x class="social-icon"></x>
                 </a>
 
-        <a v-if="brandingStore.value?.socials?.youtubeUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.youtubeUrl"
                     :href="brandingStore.value?.socials?.youtubeUrl"
+                    :title="t('youtube')"
                     target="_blank"
-           :title="t('youtube')">
+                >
                     <youtube class="social-icon"></youtube>
                 </a>
 
-        <a v-if="brandingStore.value?.socials?.websiteUrl"
+                <a
+                    v-if="brandingStore.value?.socials?.websiteUrl"
                     :href="brandingStore.value?.socials?.websiteUrl"
+                    :title="t('website')"
                     target="_blank"
-           :title="t('website')">
+                >
                     <web class="social-icon"></web>
                 </a>
-
             </div>
-
         </div>
     </div>
 </template>
 
 <style scoped>
-.social-icon {
+    .social-icon {
         @apply w-5 h-5;
         @apply text-base;
         @apply transform transition-transform duration-200;
         @apply hover:scale-125 hover:text-fuchsia-900;
-}
+    }
 
-.social-info {
+    .social-info {
         @apply flex flex-row;
         @apply py-4 w-full;
-  @apply justify-center ;
+        @apply justify-center;
         @apply max-h-52;
-}
+    }
 </style>
 
 <i18n>
@@ -157,16 +165,6 @@ const {t} = useI18n();
         "x": "X (Twitter)",
         "youtube": "YouTube",
         "website": "Site web"
-  },
-  "es": {
-    "facebook": "Facebook",
-    "instagram": "Instagram",
-    "linkedin": "LinkedIn",
-    "reddit": "Reddit",
-    "tiktok": "TikTok",
-    "x": "X (Twitter)",
-    "youtube": "YouTube",
-    "website": "Sitio web"
     }
 }
 </i18n>

frontend/src/views/creators/BannerEditor.vue

@@ -11,10 +11,10 @@
 
             <div class="file-input-container">
                 <input
-            type="file"
                     ref="fileInput"
                     accept="image/*"
                     class="hidden"
+                    type="file"
                     @change="onFileSelected"
                 />
                 <button
@@ -25,29 +25,38 @@
                 </button>
             </div>
 
-      <div v-if="errorMessage" class="error-message">
+            <div
+                v-if="errorMessage"
+                class="error-message"
+            >
                 {{ errorMessage }}
             </div>
 
-      <div v-if="showCropper" class="cropper-wrapper">
+            <div
+                v-if="showCropper"
+                class="cropper-wrapper"
+            >
                 <Cropper
                     ref="cropper"
-          :src="fileUrl"
                     :aspect-ratio="4"
+                    :src="fileUrl"
                     :stencil-props="{
                         aspectRatio: 4,
-            class: 'banner-stencil'
+                        class: 'banner-stencil',
                     }"
                 />
             </div>
 
-      <div v-else class="image-preview-container" 
+            <div
+                v-else
+                class="image-preview-container"
                 @click="startEditing"
                 @dragover.prevent
-           @drop.prevent="handleDrop">
+                @drop.prevent="handleDrop"
+            >
                 <img
-            :src="fileUrl || fallbackUrl"
                     :alt="t('preview')"
+                    :src="fileUrl || fallbackUrl"
                     class="preview-image"
                 />
                 <div class="edit-overlay">
@@ -57,14 +66,18 @@
         </div>
 
         <div class="card-actions">
-      <button class="secondary"
+            <button
+                :disabled="isUploading"
+                class="secondary"
                 @click="cancel"
-              :disabled="isUploading">
+            >
                 {{ t('cancel') }}
             </button>
-      <button class="primary"
+            <button
+                :disabled="!selectedFile || isUploading"
+                class="primary"
                 @click="showCropper ? applyCrop() : publish()"
-              :disabled="!selectedFile || isUploading">
+            >
                 <template v-if="isUploading">
                     <span class="loading-spinner"></span>
                     {{ t('uploading') }} ({{ uploadProgress }}%)
@@ -78,162 +91,158 @@
 </template>
 
 <script setup>
-import {ref} from 'vue'
-import {useClient} from '@/plugins/api.js'
-import { Cropper } from 'vue-advanced-cropper'
-import 'vue-advanced-cropper/dist/style.css'
-import { useI18n } from 'vue-i18n'
+    import { ref } from 'vue';
+    import { useClient } from '@/plugins/api.js';
+    import { Cropper } from 'vue-advanced-cropper';
+    import 'vue-advanced-cropper/dist/style.css';
+    import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
+    const props = defineProps({
         creator: {
-    required: true
-  }
-})
+            required: true,
+        },
+    });
 
-const emits = defineEmits(['closeRequested'])
+    const emits = defineEmits(['closeRequested']);
 
-const fileInput = ref(null)
-const selectedFile = ref(null)
-const fileUrl = ref(props.creator?.bannerUrl)
-const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png'
-const errorMessage = ref('')
-const showCropper = ref(false)
-const cropper = ref(null)
-const isUploading = ref(false)
-const uploadProgress = ref(0)
+    const fileInput = ref(null);
+    const selectedFile = ref(null);
+    const fileUrl = ref(props.creator?.bannerUrl);
+    const fallbackUrl = '/images/hutopymedia/banners/hutopyul.png';
+    const errorMessage = ref('');
+    const showCropper = ref(false);
+    const cropper = ref(null);
+    const isUploading = ref(false);
+    const uploadProgress = ref(0);
 
-// Get translations for this component
-const { t } = useI18n()
+    // Get translations for this component
+    const { t } = useI18n();
 
-const triggerFileInput = () => {
+    const triggerFileInput = () => {
         if (fileInput.value) {
-    fileInput.value.value = '' // Reset the input value to ensure the change event fires
-    fileInput.value.click()
+            fileInput.value.value = ''; // Reset the input value to ensure the change event fires
+            fileInput.value.click();
         }
-}
+    };
 
-const onFileSelected = (event) => {
-  const file = event.target.files[0]
+    const onFileSelected = event => {
+        const file = event.target.files[0];
         if (file) {
-    selectedFile.value = file
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      fileUrl.value = e.target.result
-      showCropper.value = true
-    }
-    reader.readAsDataURL(file)
+            selectedFile.value = file;
+            const reader = new FileReader();
+            reader.onload = e => {
+                fileUrl.value = e.target.result;
+                showCropper.value = true;
+            };
+            reader.readAsDataURL(file);
         } else {
-    selectedFile.value = null
-    fileUrl.value = null
-    showCropper.value = false
+            selectedFile.value = null;
+            fileUrl.value = null;
+            showCropper.value = false;
         }
-}
+    };
 
-const startEditing = () => {
+    const startEditing = () => {
         if (fileUrl.value && fileUrl.value.startsWith('data:')) {
             // Only try to load the image if it's a data URL (newly selected image)
-    const blob = dataURLtoBlob(fileUrl.value)
-    selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
-    showCropper.value = true
+            const blob = dataURLtoBlob(fileUrl.value);
+            selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' });
+            showCropper.value = true;
         } else {
             // If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
-    triggerFileInput()
+            triggerFileInput();
         }
-}
+    };
 
-// Helper function to convert data URL to blob
-const dataURLtoBlob = (dataURL) => {
-  const arr = dataURL.split(',')
-  const mime = arr[0].match(/:(.*?);/)[1]
-  const bstr = atob(arr[1])
-  let n = bstr.length
-  const u8arr = new Uint8Array(n)
+    // Helper function to convert data URL to blob
+    const dataURLtoBlob = dataURL => {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
         while (n--) {
-    u8arr[n] = bstr.charCodeAt(n)
+            u8arr[n] = bstr.charCodeAt(n);
         }
-  return new Blob([u8arr], { type: mime })
-}
+        return new Blob([u8arr], { type: mime });
+    };
 
-const applyCrop = () => {
-  if (!cropper.value) return
+    const applyCrop = () => {
+        if (!cropper.value) return;
 
-  const canvas = cropper.value.getResult().canvas
-  canvas.toBlob((blob) => {
+        const canvas = cropper.value.getResult().canvas;
+        canvas.toBlob(blob => {
             const croppedFile = new File([blob], selectedFile.value.name, {
-      type: selectedFile.value.type
-    })
-    selectedFile.value = croppedFile
-    fileUrl.value = canvas.toDataURL()
-    showCropper.value = false
-  }, selectedFile.value.type)
-}
+                type: selectedFile.value.type,
+            });
+            selectedFile.value = croppedFile;
+            fileUrl.value = canvas.toDataURL();
+            showCropper.value = false;
+        }, selectedFile.value.type);
+    };
 
-const client = useClient()
-const publish = async () => {
-  if (!selectedFile.value || isUploading.value) return
+    const client = useClient();
+    const publish = async () => {
+        if (!selectedFile.value || isUploading.value) return;
 
         try {
-    isUploading.value = true
-    uploadProgress.value = 0
-    const formData = new FormData()
-    formData.append('file', selectedFile.value)
+            isUploading.value = true;
+            uploadProgress.value = 0;
+            const formData = new FormData();
+            formData.append('file', selectedFile.value);
 
-    const response = await client.post(
-        `/api/creators/${props.creator.id}/banner`,
-        formData,
-        {
-          onUploadProgress: (progressEvent) => {
-            uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-          }
-        }
-    )
+            const response = await client.post(`/api/creators/${props.creator.id}/banner`, formData, {
+                onUploadProgress: progressEvent => {
+                    uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                },
+            });
 
-    props.creator.bannerUrl = `${response.data.blobUrl}?t=${Date.now()}`
-    fileUrl.value = props.creator.bannerUrl
-    emits('closeRequested')
+            props.creator.bannerUrl = `${response.data.blobUrl}?t=${Date.now()}`;
+            fileUrl.value = props.creator.bannerUrl;
+            emits('closeRequested');
         } catch (error) {
-    console.error(error)
-    errorMessage.value = t('errors.imageUpload')
+            console.error(error);
+            errorMessage.value = t('errors.imageUpload');
         } finally {
-    isUploading.value = false
-    uploadProgress.value = 0
+            isUploading.value = false;
+            uploadProgress.value = 0;
         }
-}
+    };
 
-const cancel = () => {
-  showCropper.value = false
+    const cancel = () => {
+        showCropper.value = false;
         // Reset to original state if we were editing
         if (props.creator?.bannerUrl) {
-    fileUrl.value = props.creator.bannerUrl
-    selectedFile.value = null
+            fileUrl.value = props.creator.bannerUrl;
+            selectedFile.value = null;
         } else {
-    fileUrl.value = fallbackUrl
-    selectedFile.value = null
+            fileUrl.value = fallbackUrl;
+            selectedFile.value = null;
         }
-  emits('closeRequested')
-}
+        emits('closeRequested');
+    };
 
-// Add drop handler
-const handleDrop = (event) => {
-  const file = event.dataTransfer.files[0]
+    // Add drop handler
+    const handleDrop = event => {
+        const file = event.dataTransfer.files[0];
         if (file && file.type.startsWith('image/')) {
-    selectedFile.value = file
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      fileUrl.value = e.target.result
-      showCropper.value = true
+            selectedFile.value = file;
+            const reader = new FileReader();
+            reader.onload = e => {
+                fileUrl.value = e.target.result;
+                showCropper.value = true;
+            };
+            reader.readAsDataURL(file);
         }
-    reader.readAsDataURL(file)
-  }
-}
+    };
 </script>
 
 <style scoped>
-.card-text {
+    .card-text {
         @apply font-sans text-lg;
-}
+    }
 
-.image-preview-container {
+    .image-preview-container {
         @apply mb-5;
         @apply w-full;
         @apply flex;
@@ -249,15 +258,15 @@ const handleDrop = (event) => {
         @apply hover:border-gray-500;
         @apply transition-colors;
         @apply duration-200;
-}
+    }
 
-.preview-image {
+    .preview-image {
         @apply w-full;
         @apply aspect-[4/1];
         @apply object-cover;
-}
+    }
 
-.edit-overlay {
+    .edit-overlay {
         @apply absolute;
         @apply inset-0;
         @apply flex;
@@ -267,25 +276,25 @@ const handleDrop = (event) => {
         @apply bg-opacity-0;
         @apply transition-opacity;
         @apply duration-200;
-}
+    }
 
-.image-preview-container:hover .edit-overlay {
+    .image-preview-container:hover .edit-overlay {
         @apply bg-opacity-30;
-}
+    }
 
-.edit-text {
+    .edit-text {
         @apply text-white;
         @apply font-medium;
         @apply opacity-0;
         @apply transition-opacity;
         @apply duration-200;
-}
+    }
 
-.image-preview-container:hover .edit-text {
+    .image-preview-container:hover .edit-text {
         @apply opacity-100;
-}
+    }
 
-.cropper-wrapper {
+    .cropper-wrapper {
         @apply mb-5;
         @apply w-full;
         @apply h-[400px];
@@ -293,40 +302,40 @@ const handleDrop = (event) => {
         @apply justify-center;
         @apply items-center;
         @apply overflow-hidden;
-}
+    }
 
-.file-input-container {
+    .file-input-container {
         @apply flex;
         @apply justify-center;
         @apply items-center;
         @apply w-full;
-}
+    }
 
-.choose-file-button {
+    .choose-file-button {
         @apply px-4;
         @apply py-2;
         @apply primary;
         @apply rounded-lg;
         @apply cursor-pointer;
-}
+    }
 
-.error-message {
+    .error-message {
         @apply text-red-500;
         @apply mt-2;
         @apply text-center;
         @apply font-medium;
-}
+    }
 
-:deep(.banner-stencil) {
+    :deep(.banner-stencil) {
         @apply border-2;
         @apply border-white;
-}
+    }
 
-:deep(.cropper) {
+    :deep(.cropper) {
         @apply max-h-full;
-}
+    }
 
-.loading-spinner {
+    .loading-spinner {
         @apply inline-block;
         @apply w-4;
         @apply h-4;
@@ -336,16 +345,16 @@ const handleDrop = (event) => {
         @apply border-t-transparent;
         @apply rounded-full;
         animation: spin 1s linear infinite;
-}
+    }
 
-@keyframes spin {
+    @keyframes spin {
         from {
             transform: rotate(0deg);
         }
         to {
             transform: rotate(360deg);
         }
-}
+    }
 </style>
 
 <i18n>
@@ -363,13 +372,6 @@ const handleDrop = (event) => {
         "chooseImage": "Choisir une image",
         "clickToEdit": "Cliquez pour modifier",
         "uploading": "Téléchargement"
-  },
-  "es": {
-    "title": "Editor de banner",
-    "description": "Sube o edita tu imagen de banner de perfil. El tamaño recomendado es de 1024x256 píxeles (ratio 4:1).",
-    "chooseImage": "Elegir una imagen",
-    "clickToEdit": "Haga clic para editar",
-    "uploading": "Subiendo"
     }
 }
 </i18n>

frontend/src/views/creators/CreateCreator.vue

@@ -1,43 +1,43 @@
 <script setup>
-import {computed, ref} from 'vue'
-import {useUserProfileStore} from "@/stores/userProfileStore.js";
-import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
-import {useClient} from "@/plugins/api.js";
-import {useRouter, useRoute} from "vue-router";
-import NameEditor from "@/views/creators/NameEditor.vue";
-import { useI18n } from 'vue-i18n'
+    import { computed, ref } from 'vue';
+    import { useUserProfileStore } from '@/stores/userProfileStore.js';
+    import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+    import { useClient } from '@/plugins/api.js';
+    import { useRoute, useRouter } from 'vue-router';
+    import NameEditor from '@/views/creators/NameEditor.vue';
+    import { useI18n } from 'vue-i18n';
 
-const creatorName = ref('');
-const creatorNameReservationId = ref(undefined);
-const canSave = computed(() => creatorNameReservationId.value !== undefined)
+    const creatorName = ref('');
+    const creatorNameReservationId = ref(undefined);
+    const canSave = computed(() => creatorNameReservationId.value !== undefined);
 
-const isOperationPending = ref(false);
-const errorMessage = ref('');
+    const isOperationPending = ref(false);
+    const errorMessage = ref('');
 
-const router = useRouter();
-const route = useRoute();
-const creatorProfileStore = useCreatorProfileStore();
-const userProfileStore = useUserProfileStore();
-const { t } = useI18n();
+    const router = useRouter();
+    const route = useRoute();
+    const creatorProfileStore = useCreatorProfileStore();
+    const userProfileStore = useUserProfileStore();
+    const { t } = useI18n();
 
-function handleCreatorNameReservationIdChanged($event) {
-  creatorNameReservationId.value = $event
-}
+    function handleCreatorNameReservationIdChanged($event) {
+        creatorNameReservationId.value = $event;
+    }
 
-function cancel () {
+    function cancel() {
         // if a returnUrl query‑string was supplied, prefer it
-  const returnUrl = route.query.returnUrl
+        const returnUrl = route.query.returnUrl;
         if (typeof returnUrl === 'string' && returnUrl.length) {
-    router.push(returnUrl)
-    return
+            router.push(returnUrl);
+            return;
         }
 
         // otherwise just go back one step in history
-  router.back()
-}
+        router.back();
+    }
 
-// TODO: The `fetchCreatorProfile` function should be private (push-up to the store)!
-async function createAccount() {
+    // TODO: The `fetchCreatorProfile` function should be private (push-up to the store)!
+    async function createAccount() {
         try {
             isOperationPending.value = true;
             const client = useClient();
@@ -57,14 +57,12 @@ async function createAccount() {
         } finally {
             isOperationPending.value = false;
         }
-}
-
+    }
 </script>
 
 <template>
     <div class="container">
         <div class="card">
-
             <div class="card-title">
                 {{ t('title') }}
             </div>
@@ -80,17 +78,18 @@ async function createAccount() {
             <div class="card-actions">
                 <button
                     class="secondary"
-            @click="cancel">
+                    @click="cancel"
+                >
                     {{ t('cancel') }}
                 </button>
                 <button
-            class="primary"
                     :disabled="!canSave || isOperationPending"
-            @click="createAccount">
+                    class="primary"
+                    @click="createAccount"
+                >
                     {{ t('create') }}
                 </button>
             </div>
-
         </div>
     </div>
 
@@ -101,17 +100,13 @@ async function createAccount() {
     >
         {{ errorMessage }}
     </v-alert>
-
-
 </template>
 
 <style scoped>
-
-.container {
+    .container {
         @apply min-h-screen w-full;
         @apply flex items-center justify-center;
-}
-
+    }
 </style>
 
 <i18n>
@@ -131,14 +126,6 @@ async function createAccount() {
         "errors": {
             "unexpected": "Une erreur inattendue s'est produite"
         }
-  },
-  "es": {
-    "title": "Crea tu Hutopy",
-    "cancel": "Cancelar",
-    "create": "Crear mi página",
-    "errors": {
-      "unexpected": "Se produjo un error inesperado"
-    }
     }
 }
 </i18n>

frontend/src/views/creators/CreatorHome.vue

@@ -1,64 +1,69 @@
 <template>
     <div class="creator-home">
-
         <!-- Content sections container -->
         <div class="content-sections">
-
             <!-- Donation Section -->
-      <div v-if="brandingStore.value?.acceptDonation" class="section sm:hidden">
-        <DonationButton :creator-id="brandingStore.value?.id" :creator-name="brandingStore.value?.name"
+            <div
+                v-if="brandingStore.value?.acceptDonation"
+                class="section sm:hidden"
+            >
+                <DonationButton
+                    :creator-id="brandingStore.value?.id"
+                    :creator-name="brandingStore.value?.name"
                     :on-cancelled-url="baseURL + '/paymentfailed/' + brandingStore.value?.id"
-          :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id" />
+                    :on-success-url="baseURL + '/paymentcompleted/' + brandingStore.value?.id"
+                />
             </div>
 
             <!-- About Creator Section -->
             <div class="section">
                 <AboutCreator />
             </div>
-
         </div>
     </div>
 </template>
 
 <script setup>
-import AboutCreator from './AboutCreator.vue';
-import DonationButton from "@/views/creators/DonationButton.vue";
-import { useBrandingStore } from "@/stores/brandingStore.js";
-
-const brandingStore = useBrandingStore();
-const baseURL = window.location.origin;
+    import AboutCreator from './AboutCreator.vue';
+    import DonationButton from '@/views/creators/DonationButton.vue';
+    import { useBrandingStore } from '@/stores/brandingStore.js';
 
+    const brandingStore = useBrandingStore();
+    const baseURL = window.location.origin;
 </script>
 
 <style scoped>
-.creator-home {
+    .creator-home {
         @apply w-full;
         @apply p-5;
-}
+    }
 
-.content-sections {
+    .content-sections {
         @apply flex flex-col;
         @apply gap-5;
-}
+    }
 
-.section {
+    .section {
         @apply rounded-2xl;
         @apply shadow-2xl;
         @apply relative;
-}
+    }
 
-.section::before {
+    .section::before {
         content: '';
         @apply absolute inset-0;
         @apply rounded-2xl;
         @apply p-[1px];
-  background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
-  mask: linear-gradient(#fff 0 0) content-box,
+        background: linear-gradient(
+            135deg,
+            rgba(64, 64, 64, 1) 0%,
+            rgba(64, 64, 64, 0) 20%,
+            rgba(64, 64, 64, 0.5) 100%
+        );
+        mask:
+            linear-gradient(#fff 0 0) content-box,
             linear-gradient(#fff 0 0);
         mask-composite: exclude;
         pointer-events: none;
-}
+    }
 </style>
-
-<i18n>
-</i18n>

frontend/src/views/creators/CreatorLayout.vue

@@ -141,26 +141,6 @@
                 "goHome": "Aller à l'accueil"
             }
         }
-    },
-    "es": {
-        "creator": {
-            "layout": {
-                "deletion": {
-                    "pending": "Esta página de creador está pendiente de eliminación"
-                }
-            },
-            "notFound": {
-                "title": "Creador No Encontrado",
-                "message": "El creador '{creator}' no existe o puede haber sido eliminado.",
-                "goHome": "Ir al Inicio",
-                "goBack": "Volver"
-            },
-            "error": {
-                "title": "Algo Salió Mal",
-                "message": "Tenemos problemas para cargar esta página de creador. Por favor, inténtalo de nuevo más tarde.",
-                "goHome": "Ir al Inicio"
-            }
-        }
     }
 }
 </i18n>

frontend/src/views/creators/CreatorLogo.vue

@@ -1,63 +1,81 @@
 <template>
-  <div class="relative" @mouseenter="showTint = isCurrentCreator" @mouseleave="showTint = false"
-    @click="isCurrentCreator && openBannerEditor()">
-
+    <div
+        class="relative"
+        @click="isCurrentCreator && openBannerEditor()"
+        @mouseenter="showTint = isCurrentCreator"
+        @mouseleave="showTint = false"
+    >
         <div class="size-[110px] rounded-full border-4 border-hPrimary">
-      <img :src="brandingStore.value?.portraitUrl ?? '/images/placeholders/profile.png'" :alt="t('logoAlt')"
-        width="110px" height="110px" class="rounded-full" />
+            <img
+                :alt="t('logoAlt')"
+                :src="brandingStore.value?.portraitUrl ?? '/images/placeholders/profile.png'"
+                class="rounded-full"
+                height="110px"
+                width="110px"
+            />
         </div>
 
         <!-- Tint Effect -->
-    <div v-if="showTint" class="absolute inset-0 cursor-pointer rounded-full bg-black/25" :title="t('editLogo')">
+        <div
+            v-if="showTint"
+            :title="t('editLogo')"
+            class="absolute inset-0 cursor-pointer rounded-full bg-black/25"
+        >
             <!-- Top-right Icon -->
             <div
-        class="absolute right-0 top-0 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg">
-        <v-icon large :icon="mdiPencil" />
+                class="absolute right-0 top-0 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
+            >
+                <v-icon
+                    :icon="mdiPencil"
+                    large
+                />
+            </div>
         </div>
     </div>
 
-  </div>
-
-  <v-dialog v-model="isDialogOpen" max-width="800px">
+    <v-dialog
+        v-model="isDialogOpen"
+        max-width="800px"
+    >
         <template #default="{ close }">
-      <creator-logo-editor :creator="brandingStore?.value"
-        @closeRequested="() => isDialogOpen = false"></creator-logo-editor>
+            <creator-logo-editor
+                :creator="brandingStore?.value"
+                @closeRequested="() => (isDialogOpen = false)"
+            ></creator-logo-editor>
         </template>
     </v-dialog>
-
 </template>
 
 <script setup>
-import { useAuthStore } from "@/stores/authStore.js";
-import { useBrandingStore } from "@/stores/brandingStore.js";
-import CreatorLogoEditor from "@/views/creators/CreatorLogoEditor.vue";
-import { computed, ref } from "vue";
-import { useI18n } from 'vue-i18n'
-import { mdiPencil } from '@mdi/js';
+    import { useAuthStore } from '@/stores/authStore.js';
+    import { useBrandingStore } from '@/stores/brandingStore.js';
+    import CreatorLogoEditor from '@/views/creators/CreatorLogoEditor.vue';
+    import { computed, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { mdiPencil } from '@mdi/js';
 
-const authStore = useAuthStore();
-const brandingStore = useBrandingStore();
-const { t } = useI18n();
+    const authStore = useAuthStore();
+    const brandingStore = useBrandingStore();
+    const { t } = useI18n();
 
-// State
-const showTint = ref(false);
-const isDialogOpen = ref(false);
+    // State
+    const showTint = ref(false);
+    const isDialogOpen = ref(false);
 
-// Methods
-const openBannerEditor = () => {
+    // Methods
+    const openBannerEditor = () => {
         isDialogOpen.value = true;
-};
+    };
 
-const isCurrentCreator = computed(() => {
+    const isCurrentCreator = computed(() => {
         return authStore.userId === brandingStore.value.id;
-});
-
+    });
 </script>
 
 <style scoped>
-.logo-image {
+    .logo-image {
         @apply border-4 border-solid border-hTertiary;
-}
+    }
 </style>
 
 <i18n>
@@ -69,10 +87,6 @@ const isCurrentCreator = computed(() => {
     "fr": {
         "logoAlt": "Logo du créateur",
         "editLogo": "Modifier le logo"
-  },
-  "es": {
-    "logoAlt": "Logo del creador",
-    "editLogo": "Editar logo"
     }
 }
 </i18n>

frontend/src/views/creators/CreatorLogoEditor.vue

@@ -11,10 +11,10 @@
 
             <div class="file-input-container">
                 <input
-            type="file"
                     ref="fileInput"
                     accept="image/*"
                     class="hidden"
+                    type="file"
                     @change="onFileSelected"
                 />
                 <button
@@ -25,31 +25,40 @@
                 </button>
             </div>
 
-      <div v-if="errorMessage" class="error-message">
+            <div
+                v-if="errorMessage"
+                class="error-message"
+            >
                 {{ errorMessage }}
             </div>
 
-      <div v-if="showCropper" class="cropper-wrapper">
+            <div
+                v-if="showCropper"
+                class="cropper-wrapper"
+            >
                 <Cropper
                     ref="cropper"
-          :src="fileUrl"
                     :aspect-ratio="1"
+                    :src="fileUrl"
                     :stencil-component="CircleStencil"
                     :stencil-props="{
                         aspectRatio: 1,
-            class: 'circle-stencil'
+                        class: 'circle-stencil',
                     }"
                 />
             </div>
 
-      <div v-else class="image-preview-container" 
+            <div
+                v-else
+                class="image-preview-container"
                 @click="startEditing"
                 @dragover.prevent
-           @drop.prevent="handleDrop">
+                @drop.prevent="handleDrop"
+            >
                 <div class="circular-preview">
                     <img
-              :src="fileUrl || fallbackUrl"
                         :alt="t('preview')"
+                        :src="fileUrl || fallbackUrl"
                         class="preview-image"
                     />
                     <div class="edit-overlay">
@@ -60,14 +69,18 @@
         </div>
 
         <div class="card-actions">
-      <button class="secondary"
+            <button
+                :disabled="isUploading"
+                class="secondary"
                 @click="cancel"
-              :disabled="isUploading">
+            >
                 {{ t('cancel') }}
             </button>
-      <button class="primary"
+            <button
+                :disabled="!selectedFile || isUploading"
+                class="primary"
                 @click="showCropper ? applyCrop() : publish()"
-              :disabled="!selectedFile || isUploading">
+            >
                 <template v-if="isUploading">
                     <span class="loading-spinner"></span>
                     {{ t('uploading') }} ({{ uploadProgress }}%)
@@ -81,166 +94,162 @@
 </template>
 
 <script setup>
-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 { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+    import { useClient } from '@/plugins/api.js';
+    import { CircleStencil, Cropper } from 'vue-advanced-cropper';
+    import 'vue-advanced-cropper/dist/style.css';
+    import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
+    const props = defineProps({
         creator: {
-    required: true
-  }
-})
+            required: true,
+        },
+    });
 
-const emits = defineEmits(['closeRequested'])
+    const emits = defineEmits(['closeRequested']);
 
-const fileInput = ref(null)
-const selectedFile = ref(null)
-const fileUrl = ref(props.creator.portraitUrl)
-const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'
-const errorMessage = ref('')
-const showCropper = ref(false)
-const cropper = ref(null)
-const isUploading = ref(false)
-const uploadProgress = ref(0)
+    const fileInput = ref(null);
+    const selectedFile = ref(null);
+    const fileUrl = ref(props.creator.portraitUrl);
+    const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
+    const errorMessage = ref('');
+    const showCropper = ref(false);
+    const cropper = ref(null);
+    const isUploading = ref(false);
+    const uploadProgress = ref(0);
 
-const TARGET_WIDTH = 200
-const TARGET_HEIGHT = 200
+    const TARGET_WIDTH = 200;
+    const TARGET_HEIGHT = 200;
 
-const { t } = useI18n();
+    const { t } = useI18n();
 
-const triggerFileInput = () => {
+    const triggerFileInput = () => {
         if (fileInput.value) {
-    fileInput.value.value = '' // Reset the input value to ensure the change event fires
-    fileInput.value.click()
+            fileInput.value.value = ''; // Reset the input value to ensure the change event fires
+            fileInput.value.click();
         }
-}
+    };
 
-const onFileSelected = (event) => {
-  const file = event.target.files[0]
+    const onFileSelected = event => {
+        const file = event.target.files[0];
         if (file) {
-    selectedFile.value = file
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      fileUrl.value = e.target.result
-      showCropper.value = true
-    }
-    reader.readAsDataURL(file)
+            selectedFile.value = file;
+            const reader = new FileReader();
+            reader.onload = e => {
+                fileUrl.value = e.target.result;
+                showCropper.value = true;
+            };
+            reader.readAsDataURL(file);
         } else {
-    selectedFile.value = null
-    fileUrl.value = null
-    showCropper.value = false
+            selectedFile.value = null;
+            fileUrl.value = null;
+            showCropper.value = false;
         }
-}
+    };
 
-const startEditing = () => {
+    const startEditing = () => {
         if (fileUrl.value && fileUrl.value.startsWith('data:')) {
             // Only try to load the image if it's a data URL (newly selected image)
-    const blob = dataURLtoBlob(fileUrl.value)
-    selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' })
-    showCropper.value = true
+            const blob = dataURLtoBlob(fileUrl.value);
+            selectedFile.value = new File([blob], 'current-image.jpg', { type: 'image/jpeg' });
+            showCropper.value = true;
         } else {
             // If no image is selected, using fallback, or have an existing uploaded image, trigger the file input
-    triggerFileInput()
+            triggerFileInput();
         }
-}
+    };
 
-// Helper function to convert data URL to blob
-const dataURLtoBlob = (dataURL) => {
-  const arr = dataURL.split(',')
-  const mime = arr[0].match(/:(.*?);/)[1]
-  const bstr = atob(arr[1])
-  let n = bstr.length
-  const u8arr = new Uint8Array(n)
+    // Helper function to convert data URL to blob
+    const dataURLtoBlob = dataURL => {
+        const arr = dataURL.split(',');
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
         while (n--) {
-    u8arr[n] = bstr.charCodeAt(n)
+            u8arr[n] = bstr.charCodeAt(n);
         }
-  return new Blob([u8arr], { type: mime })
-}
+        return new Blob([u8arr], { type: mime });
+    };
 
-const applyCrop = () => {
-  if (!cropper.value) return
+    const applyCrop = () => {
+        if (!cropper.value) return;
 
-  const canvas = cropper.value.getResult().canvas
-  canvas.toBlob((blob) => {
+        const canvas = cropper.value.getResult().canvas;
+        canvas.toBlob(blob => {
             const croppedFile = new File([blob], selectedFile.value.name, {
-      type: selectedFile.value.type
-    })
-    selectedFile.value = croppedFile
-    fileUrl.value = canvas.toDataURL()
-    showCropper.value = false
-  }, selectedFile.value.type)
-}
+                type: selectedFile.value.type,
+            });
+            selectedFile.value = croppedFile;
+            fileUrl.value = canvas.toDataURL();
+            showCropper.value = false;
+        }, selectedFile.value.type);
+    };
 
-const client = useClient()
-const publish = async () => {
-  if (!selectedFile.value || isUploading.value) return
+    const client = useClient();
+    const publish = async () => {
+        if (!selectedFile.value || isUploading.value) return;
 
         try {
-    isUploading.value = true
-    uploadProgress.value = 0
-    const formData = new FormData()
-    formData.append('file', selectedFile.value)
+            isUploading.value = true;
+            uploadProgress.value = 0;
+            const formData = new FormData();
+            formData.append('file', selectedFile.value);
 
-    const response = await client.post(
-        `/api/creators/${props.creator.id}/logo`,
-        formData,
-        {
-          onUploadProgress: (progressEvent) => {
-            uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total)
-          }
-        }
-    )
+            const response = await client.post(`/api/creators/${props.creator.id}/logo`, formData, {
+                onUploadProgress: progressEvent => {
+                    uploadProgress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+                },
+            });
 
-    props.creator.portraitUrl = `${response.data.blobUrl}?t=${Date.now()}`
+            props.creator.portraitUrl = `${response.data.blobUrl}?t=${Date.now()}`;
             if (props.creator.portraitUrl) {
-      fileUrl.value = props.creator.portraitUrl
+                fileUrl.value = props.creator.portraitUrl;
             }
-    emits('closeRequested')
+            emits('closeRequested');
         } catch (error) {
-    console.error(error)
-    errorMessage.value = t('errors.imageUpload')
+            console.error(error);
+            errorMessage.value = t('errors.imageUpload');
         } finally {
-    isUploading.value = false
-    uploadProgress.value = 0
+            isUploading.value = false;
+            uploadProgress.value = 0;
         }
-}
+    };
 
-const cancel = () => {
-  showCropper.value = false
+    const cancel = () => {
+        showCropper.value = false;
         // Reset to original state if we were editing
         if (props.creator.portraitUrl) {
-    fileUrl.value = props.creator.portraitUrl
-    selectedFile.value = null
+            fileUrl.value = props.creator.portraitUrl;
+            selectedFile.value = null;
         } else {
-    fileUrl.value = fallbackUrl
-    selectedFile.value = null
+            fileUrl.value = fallbackUrl;
+            selectedFile.value = null;
         }
-  emits('closeRequested')
-}
+        emits('closeRequested');
+    };
 
-// Add drop handler
-const handleDrop = (event) => {
-  const file = event.dataTransfer.files[0]
+    // Add drop handler
+    const handleDrop = event => {
+        const file = event.dataTransfer.files[0];
         if (file && file.type.startsWith('image/')) {
-    selectedFile.value = file
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      fileUrl.value = e.target.result
-      showCropper.value = true
+            selectedFile.value = file;
+            const reader = new FileReader();
+            reader.onload = e => {
+                fileUrl.value = e.target.result;
+                showCropper.value = true;
+            };
+            reader.readAsDataURL(file);
         }
-    reader.readAsDataURL(file)
-  }
-}
+    };
 </script>
 
 <style scoped>
-.card-text {
+    .card-text {
         @apply font-sans text-lg;
-}
+    }
 
-.image-preview-container {
+    .image-preview-container {
         @apply mb-5;
         @apply w-full;
         @apply flex;
@@ -254,9 +263,9 @@ const handleDrop = (event) => {
         @apply duration-200;
         @apply rounded-lg;
         @apply p-4;
-}
+    }
 
-.circular-preview {
+    .circular-preview {
         @apply w-[200px];
         @apply h-[200px];
         @apply rounded-full;
@@ -265,15 +274,15 @@ const handleDrop = (event) => {
         @apply border-gray-200;
         @apply relative;
         @apply cursor-pointer;
-}
+    }
 
-.preview-image {
+    .preview-image {
         @apply w-full;
         @apply h-full;
         @apply object-cover;
-}
+    }
 
-.edit-overlay {
+    .edit-overlay {
         @apply absolute;
         @apply inset-0;
         @apply flex;
@@ -283,25 +292,25 @@ const handleDrop = (event) => {
         @apply bg-opacity-0;
         @apply transition-opacity;
         @apply duration-200;
-}
+    }
 
-.circular-preview:hover .edit-overlay {
+    .circular-preview:hover .edit-overlay {
         @apply bg-opacity-30;
-}
+    }
 
-.edit-text {
+    .edit-text {
         @apply text-white;
         @apply font-medium;
         @apply opacity-0;
         @apply transition-opacity;
         @apply duration-200;
-}
+    }
 
-.circular-preview:hover .edit-text {
+    .circular-preview:hover .edit-text {
         @apply opacity-100;
-}
+    }
 
-.cropper-wrapper {
+    .cropper-wrapper {
         @apply mb-5;
         @apply w-full;
         @apply h-[400px];
@@ -309,45 +318,45 @@ const handleDrop = (event) => {
         @apply justify-center;
         @apply items-center;
         @apply overflow-hidden;
-}
+    }
 
-.file-input-container {
+    .file-input-container {
         @apply flex;
         @apply justify-center;
         @apply items-center;
         @apply w-full;
-}
+    }
 
-.choose-file-button {
+    .choose-file-button {
         @apply px-4;
         @apply py-2;
         @apply primary;
         @apply rounded-lg;
         @apply cursor-pointer;
-}
+    }
 
-.error-message {
+    .error-message {
         @apply text-red-500;
         @apply mt-2;
         @apply text-center;
         @apply font-medium;
-}
+    }
 
-:deep(.circle-stencil) {
+    :deep(.circle-stencil) {
         @apply border-2;
         @apply border-white;
         @apply rounded-full;
-}
+    }
 
-:deep(.cropper) {
+    :deep(.cropper) {
         @apply max-h-full;
-}
+    }
 
-:deep(.cropper__stencil) {
+    :deep(.cropper__stencil) {
         @apply rounded-full;
-}
+    }
 
-.loading-spinner {
+    .loading-spinner {
         @apply inline-block;
         @apply w-4;
         @apply h-4;
@@ -357,16 +366,16 @@ const handleDrop = (event) => {
         @apply border-t-transparent;
         @apply rounded-full;
         animation: spin 1s linear infinite;
-}
+    }
 
-@keyframes spin {
+    @keyframes spin {
         from {
             transform: rotate(0deg);
         }
         to {
             transform: rotate(360deg);
         }
-}
+    }
 </style>
 
 <i18n>
@@ -384,14 +393,6 @@ const handleDrop = (event) => {
         "chooseImage": "Choisir une image",
         "clickToEdit": "Cliquez pour modifier",
         "uploading": "Téléchargement"
-  },
-  "es": {
-    "logoTitle": "Editar logo",
-    "logoDescription": "Elige una imagen de logo para tu página de creador. La imagen se recortará en círculo.",
-    "chooseImage": "Elegir imagen",
-    "clickToEdit": "Haz clic para editar",
-    "uploading": "Subiendo"
     }
 }
 </i18n>
-

frontend/src/views/creators/DonationButton.vue

@@ -1,5 +1,4 @@
 <template>
-
     <button
         class="secondary donation-action"
         @click="openDonationDialog()"
@@ -11,49 +10,48 @@
         ref="donationDialogRef"
         :creator-id="creatorId"
         :creator-name="creatorName"
-      :on-success-url="onSuccessUrl"
-      :on-cancelled-url="onCancelledUrl"
         :icon-color-class="iconColorClass"
+        :on-cancelled-url="onCancelledUrl"
+        :on-success-url="onSuccessUrl"
         @close="handleDialogClose"
     />
-
 </template>
 
 <script setup>
-import {ref} from 'vue';
-import {useI18n} from 'vue-i18n';
-import DonationDialog from './DonationDialog.vue';
+    import { ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import DonationDialog from './DonationDialog.vue';
 
-const {t} = useI18n();
+    const { t } = useI18n();
 
-const props = defineProps({
-  creatorId: {default: 'missing-creator-id', required: true},
-  creatorName: {default: 'missing-creator-name', required: true},
-  onSuccessUrl: {default: 'missing-on-success-u', required: true},
-  onCancelledUrl: {default: 'missing-on-cancelled-url', required: true},
-  iconColorClass: {default: 'text-black'},
-});
+    const props = defineProps({
+        creatorId: { default: 'missing-creator-id', required: true },
+        creatorName: { default: 'missing-creator-name', required: true },
+        onSuccessUrl: { default: 'missing-on-success-u', required: true },
+        onCancelledUrl: { default: 'missing-on-cancelled-url', required: true },
+        iconColorClass: { default: 'text-black' },
+    });
 
-const donationDialogRef = ref(null);
+    const donationDialogRef = ref(null);
 
-function openDonationDialog() {
+    function openDonationDialog() {
         donationDialogRef.value.openDonationDialog();
-}
+    }
 
-function handleDialogClose() {
+    function handleDialogClose() {
         // Handle any cleanup or additional logic when dialog closes
-}
+    }
 </script>
 
 <style scoped>
-.donation-action {
+    .donation-action {
         @apply bg-hutopyPrimary text-hOnPrimary;
         @apply hover:bg-hutopySecondary;
         @apply w-fit place-self-center;
         @apply h-12;
         @apply rounded-2xl w-full;
         @apply font-sans font-semibold text-lg;
-}
+    }
 </style>
 
 <i18n>
@@ -71,13 +69,6 @@ function handleDialogClose() {
                 "isupport": "Je Soutiens"
             }
         }
-  },
-  "es": {
-    "creator": {
-      "donation": {
-        "isupport": "Apoyo"
-      }
-    }
     }
 }
 </i18n>

frontend/src/views/creators/DonationForm.vue

@@ -183,24 +183,6 @@
                 }
             }
         }
-    },
-    "es": {
-        "common": {
-            "cancel": "Cancelar"
-        },
-        "creator": {
-            "donation": {
-                "isupport": "Apoyo",
-                "amount": "Cantidad ($)",
-                "message": "Mensaje (opcional)",
-                "send": "Enviar",
-                "processing": "Procesando...",
-                "errors": {
-                    "payment": "Ocurrió un error durante el procesamiento del pago",
-                    "invalidAmount": "Por favor ingrese un monto válido"
-                }
-            }
-        }
     }
 }
 </i18n>

frontend/src/views/creators/NameEditor.vue

@@ -1,49 +1,46 @@
 <script setup>
-import { ref, onMounted, onUnmounted, computed } from "vue";
-import { v7 } from "uuid";
-import { useClient } from "@/plugins/api.js";
-import { useI18n } from 'vue-i18n';
-import config from '@/config';
-import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
+    import { computed, onMounted, onUnmounted, ref } from 'vue';
+    import { v7 } from 'uuid';
+    import { useClient } from '@/plugins/api.js';
+    import { useI18n } from 'vue-i18n';
+    import config from '@/config';
+    import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
 
-const props = defineProps({
+    const props = defineProps({
         name: {
-    required: true
+            required: true,
         },
         creatorNameReservationId: {
-    required: true
+            required: true,
         },
         originalSlug: {
             type: String,
-    default: null
-  }
-});
+            default: null,
+        },
+    });
 
-const emits = defineEmits([
-  'update:name',
-  'update:creatorNameReservationId'
-]);
+    const emits = defineEmits(['update:name', 'update:creatorNameReservationId']);
 
-const name = ref(props.name);
-const { t } = useI18n();
+    const name = ref(props.name);
+    const { t } = useI18n();
 
-const isOperationPending = ref(false);
-const reservationState = ref(null);
-const validationError = ref('');
+    const isOperationPending = ref(false);
+    const reservationState = ref(null);
+    const validationError = ref('');
 
-// Use the reservationId from props if provided, otherwise generate a new one
-const reservationId = ref(props.creatorNameReservationId || v7());
+    // Use the reservationId from props if provided, otherwise generate a new one
+    const reservationId = ref(props.creatorNameReservationId || v7());
 
-// Check if the current name is the same as the original slug
-const isCurrentSlug = computed(() => {
+    // Check if the current name is the same as the original slug
+    const isCurrentSlug = computed(() => {
         return props.originalSlug && name.value === props.originalSlug;
-});
+    });
 
-// Base URL for display
-const baseUrl = computed(() => `${config.baseUrl}/@`);
+    // Base URL for display
+    const baseUrl = computed(() => `${config.baseUrl}/@`);
 
-// Validation function for the slug
-const validateSlug = (slug) => {
+    // Validation function for the slug
+    const validateSlug = slug => {
         if (!slug) {
             validationError.value = t('creator.name.errors.required');
             return false;
@@ -58,33 +55,33 @@ const validateSlug = (slug) => {
 
         validationError.value = '';
         return true;
-};
+    };
 
-// Ensure we emit the reservationId on mount if we generated a new one
-onMounted(() => {
+    // Ensure we emit the reservationId on mount if we generated a new one
+    onMounted(() => {
         if (!props.creatorNameReservationId) {
             emits('update:creatorNameReservationId', reservationId.value);
         }
 
         // If the name is the same as the original slug, set the reservation state to "reserved"
         if (isCurrentSlug.value) {
-    reservationState.value = "reserved";
+            reservationState.value = 'reserved';
         }
-});
+    });
 
-// Request handling
-let currentController = null;
-let timeout = null;
-let lastProcessedName = '';
+    // Request handling
+    let currentController = null;
+    let timeout = null;
+    let lastProcessedName = '';
 
-const cancelCurrentRequest = () => {
+    const cancelCurrentRequest = () => {
         if (currentController) {
             currentController.abort();
             currentController = null;
         }
-};
+    };
 
-const handleInput = () => {
+    const handleInput = () => {
         clearTimeout(timeout);
         timeout = setTimeout(() => {
             const currentName = name.value;
@@ -94,13 +91,13 @@ const handleInput = () => {
 
             // Validate the slug
             if (!validateSlug(currentName)) {
-      reservationState.value = "unavailable";
+                reservationState.value = 'unavailable';
                 return;
             }
 
             // If the name is the same as the original slug, set reservation state to "reserved"
             if (props.originalSlug && currentName === props.originalSlug) {
-      reservationState.value = "reserved";
+                reservationState.value = 'reserved';
                 lastProcessedName = currentName;
                 emits('update:name', currentName);
                 return;
@@ -108,11 +105,11 @@ const handleInput = () => {
 
             checkNameAvailability(currentName);
         }, 200);
-};
+    };
 
-const client = useClient();
-const checkNameAvailability = async (nameToCheck) => {
-  if (!nameToCheck || nameToCheck.trim() === "") {
+    const client = useClient();
+    const checkNameAvailability = async nameToCheck => {
+        if (!nameToCheck || nameToCheck.trim() === '') {
             reservationState.value = null;
             lastProcessedName = nameToCheck;
             return;
@@ -123,7 +120,7 @@ const checkNameAvailability = async (nameToCheck) => {
 
         try {
             isOperationPending.value = true;
-    reservationState.value = "loading";
+            reservationState.value = 'loading';
 
             // Create a new request with cancellation token
             const controller = new AbortController();
@@ -137,14 +134,14 @@ const checkNameAvailability = async (nameToCheck) => {
 
             // Only process the response if this is still the current request
             if (currentController === controller) {
-      reservationState.value = "reserved";
+                reservationState.value = 'reserved';
                 lastProcessedName = nameToCheck;
                 emits('update:name', nameToCheck);
             }
         } catch (error) {
             // Only process the error if this is still the current request and it's not an abort error
             if (currentController && error.name !== 'AbortError') {
-      reservationState.value = "unavailable";
+                reservationState.value = 'unavailable';
                 lastProcessedName = nameToCheck;
             }
         } finally {
@@ -152,29 +149,46 @@ const checkNameAvailability = async (nameToCheck) => {
                 isOperationPending.value = false;
             }
         }
-};
+    };
 
-// Cleanup on component unmount
-onUnmounted(() => {
+    // Cleanup on component unmount
+    onUnmounted(() => {
         cancelCurrentRequest();
         clearTimeout(timeout);
-});
-
+    });
 </script>
 
 <template>
-  <v-text-field variant="outlined" :label="t('creator.name.label')" v-model="name" @input="handleInput"
-    :error-messages="validationError">
+    <v-text-field
+        v-model="name"
+        :error-messages="validationError"
+        :label="t('creator.name.label')"
+        variant="outlined"
+        @input="handleInput"
+    >
         <template #prepend-inner>
             <span class="text-nowrap font-sans text-gray-400">{{ baseUrl }}</span>
         </template>
 
         <template #append-inner>
-      <v-progress-circular v-if="reservationState === 'loading'" indeterminate size="24" width="3"
-        color="grey"></v-progress-circular>
+            <v-progress-circular
+                v-if="reservationState === 'loading'"
+                color="grey"
+                indeterminate
+                size="24"
+                width="3"
+            ></v-progress-circular>
 
-      <v-icon v-else-if="reservationState === 'reserved'" color="green" :icon="mdiCheckCircle" />
-      <v-icon v-else-if="reservationState === 'unavailable'" color="red" :icon="mdiCloseCircle" />
+            <v-icon
+                v-else-if="reservationState === 'reserved'"
+                :icon="mdiCheckCircle"
+                color="green"
+            />
+            <v-icon
+                v-else-if="reservationState === 'unavailable'"
+                :icon="mdiCloseCircle"
+                color="red"
+            />
         </template>
     </v-text-field>
 </template>
@@ -204,17 +218,6 @@ onUnmounted(() => {
                 }
             }
         }
-  },
-  "es": {
-    "creator": {
-      "name": {
-        "label": "Tu identificador de creador",
-        "errors": {
-          "required": "El identificador es obligatorio",
-          "invalid": "Solo se permiten letras, números y guiones"
-        }
-      }
-    }
     }
 }
 </i18n>

frontend/src/views/creators/NameTitle.vue

@@ -4,9 +4,11 @@
             <span class="capitalize text-3xl">
                 {{ brandingStore.value.name }}
             </span>
-            <div v-show="brandingStore.value.verified"
+            <div
+                v-show="brandingStore.value.verified"
+                :title="t('verified')"
                 class="text-blue mt-1"
-                 :title="t('verified')">
+            >
                 <icon-account-verified></icon-account-verified>
             </div>
         </div>
@@ -17,12 +19,12 @@
 </template>
 
 <script setup>
-import IconAccountVerified from "@/components/icons/IconAccountVerified.vue";
-import {useBrandingStore} from "@/stores/brandingStore.js";
-import { useI18n } from 'vue-i18n';
+    import IconAccountVerified from '@/components/icons/IconAccountVerified.vue';
+    import { useBrandingStore } from '@/stores/brandingStore.js';
+    import { useI18n } from 'vue-i18n';
 
-const brandingStore = useBrandingStore();
-const { t } = useI18n();
+    const brandingStore = useBrandingStore();
+    const { t } = useI18n();
 </script>
 
 <i18n>
@@ -32,9 +34,6 @@ const { t } = useI18n();
     },
     "fr": {
         "verified": "Compte vérifié"
-  },
-  "es": {
-    "verified": "Cuenta verificada"
     }
 }
 </i18n>

frontend/src/views/creators/PaymentCompleted.vue

@@ -75,13 +75,6 @@
         "usernameDefault": "Le créateur",
         "receipt": "Un reçu a été envoyé à votre email.",
         "returnToCreator": "Retourner à la page du créateur"
-    },
-    "es": {
-        "title": "¡{creatorName} te agradece!",
-        "message": "Su pago ha sido procesado con éxito.",
-        "usernameDefault": "El creador",
-        "receipt": "Se ha enviado un recibo a su correo electrónico.",
-        "returnToCreator": "Volver a la página del creador"
     }
 }
 </i18n>

frontend/src/views/creators/PaymentFailed.vue

@@ -46,12 +46,6 @@
         "message": "Nous n'avons pas pu traiter votre paiement.",
         "retry": "Réessayer",
         "returnToCreator": "Retourner à la page du créateur"
-    },
-    "es": {
-        "title": "Pago fallido",
-        "message": "No pudimos procesar su pago.",
-        "retry": "Intentar de nuevo",
-        "returnToCreator": "Volver a la página del creador"
     }
 }
 </i18n>

frontend/src/views/main/Footer.vue

@@ -1,55 +1,76 @@
 <script setup>
-import Instagram from "@/views/svg/Instagram.vue";
-import Facebook from "@/views/svg/Facebook.vue";
-import X from "@/views/svg/X.vue";
-import { useI18n } from 'vue-i18n';
+    import Instagram from '@/views/svg/Instagram.vue';
+    import Facebook from '@/views/svg/Facebook.vue';
+    import X from '@/views/svg/X.vue';
+    import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+    const { t } = useI18n();
 </script>
 
 <template>
-
     <footer class="flex flex-col gap-10 pt-7 pb-10">
-
         <div class="footer-socials">
-      <a href="https://www.facebook.com/profile.php?id=61556819217561" target="_blank">
+            <a
+                href="https://www.facebook.com/profile.php?id=61556819217561"
+                target="_blank"
+            >
                 <facebook class="social-icon"></facebook>
             </a>
-      <a href="https://www.instagram.com/hutopy.inc/" target="_blank">
+            <a
+                href="https://www.instagram.com/hutopy.inc/"
+                target="_blank"
+            >
                 <instagram class="social-icon"></instagram>
             </a>
-      <a href="https://x.com/Hutopyinc/" target="_blank">
+            <a
+                href="https://x.com/Hutopyinc/"
+                target="_blank"
+            >
                 <x class="social-icon"></x>
             </a>
         </div>
 
         <div class="footer-links">
-      <router-link to="/documents/helpandcontact"
-                   class="link">
+            <router-link
+                class="link"
+                to="/documents/helpandcontact"
+            >
                 {{ t('footer.helpandcontact') }}
             </router-link>
-      <router-link to="/documents/faq"
-                   class="link">
+            <router-link
+                class="link"
+                to="/documents/faq"
+            >
                 {{ t('footer.faq') }}
             </router-link>
-      <router-link to="/documents/guideforcreators"
-                   class="link">
+            <router-link
+                class="link"
+                to="/documents/guideforcreators"
+            >
                 {{ t('footer.creatorguide') }}
             </router-link>
-      <router-link to="/documents/termsandconditions"
-                   class="link">
+            <router-link
+                class="link"
+                to="/documents/termsandconditions"
+            >
                 {{ t('footer.termsandconditions') }}
             </router-link>
-      <router-link to="/documents/contentpolicy"
-                   class="link">
+            <router-link
+                class="link"
+                to="/documents/contentpolicy"
+            >
                 {{ t('footer.contentpolicy') }}
             </router-link>
-      <router-link to="/documents/about"
-                   class="link">
+            <router-link
+                class="link"
+                to="/documents/about"
+            >
                 {{ t('footer.about') }}
             </router-link>
-      <router-link to="/documents/pricing"
-                   class="link">
+            <router-link
+                class="link"
+                to="/documents/pricing"
+            >
                 {{ t('footer.pricing') }}
             </router-link>
         </div>
@@ -57,39 +78,35 @@ const { t } = useI18n();
         <div class="footer-copyright">
             Hutopy &copy;{{ new Date().getFullYear() }} - {{ t('footer.allRightsReserved') }}
         </div>
-
     </footer>
-
 </template>
 
 <style scoped>
-
-.footer-socials {
+    .footer-socials {
         @apply flex flex-row justify-center;
         @apply gap-10;
-}
+    }
 
-.footer-links {
+    .footer-links {
         @apply flex flex-row flex-wrap justify-center;
         @apply gap-4 px-4;
-}
+    }
 
-.footer-copyright {
+    .footer-copyright {
         @apply flex justify-center;
         @apply text-hOnBackground tracking-widest font-sans text-sm;
-}
+    }
 
-.social-icon {
+    .social-icon {
         @apply fill-current w-6 h-6;
         @apply text-hOnBackground;
-}
+    }
 
-.link {
+    .link {
         @apply text-hOnBackground;
         @apply tracking-widest font-sans text-sm;
         @apply hover:text-gray-400;
-}
-
+    }
 </style>
 
 <i18n>
@@ -117,18 +134,6 @@ const { t } = useI18n();
             "pricing": "Tarifs",
             "allRightsReserved": "Tous Droits Réservés"
         }
-  },
-  "es": {
-    "footer": {
-      "helpandcontact": "Ayuda y Contacto",
-      "faq": "Preguntas Frecuentes",
-      "creatorguide": "Guía del Creador",
-      "termsandconditions": "Términos y Condiciones",
-      "contentpolicy": "Política de Contenido",
-      "about": "Acerca de",
-      "pricing": "Precios",
-      "allRightsReserved": "Todos los Derechos Reservados"
-    }
     }
 }
 </i18n>

frontend/src/views/main/Landing.vue

@@ -1,60 +1,70 @@
 <script setup>
-import Footer from "@/views/main/Footer.vue";
-import { useI18n } from 'vue-i18n';
+    import Footer from '@/views/main/Footer.vue';
+    import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
+    const { t } = useI18n();
 </script>
 
 <template>
     <div>
-
         <div>
             <div class="pa-4 flex flex-col justify-center md:flex-row">
                 <div class="py-6">
                     <div>
-            <img alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto"
-                 src="/images/hutopymedia/banners/hutopy.png">
+                        <img
+                            alt="Hutopy Logo"
+                            class="md:h-44 logo-image sm:h-28 sm:mx-auto"
+                            src="/images/hutopymedia/banners/hutopy.png"
+                        />
                     </div>
                 </div>
                 <div class="flex flex-col space-y-3 header-btn">
                     <v-btn
                         class="text-white w-full sm:w-auto inscription-btn-header"
-              to="/login">
+                        to="/login"
+                    >
                         {{ t('inscription') }}
                     </v-btn>
                     <v-btn
                         class="w-full sm:w-auto inscription-btn-header-outlined"
                         to="/create-creator"
-              variant="outlined">
+                        variant="outlined"
+                    >
                         {{ t('createPage') }}
                     </v-btn>
                 </div>
-
             </div>
         </div>
 
         <div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6">
             <div class="support-text text-justify md:text-left">
-        <span class="text-white"> {{ t('support') }} </span><br>
-        <span class="text-white"> {{ t('creators') }} </span><br>
-        <span class="text-white"> {{ t('projects') }} </span><br>
-        <span class="text-white"> {{ t('love') }} </span>
+                <span class="text-white">{{ t('support') }}</span>
+                <br />
+                <span class="text-white">{{ t('creators') }}</span>
+                <br />
+                <span class="text-white">{{ t('projects') }}</span>
+                <br />
+                <span class="text-white">{{ t('love') }}</span>
             </div>
-      <img alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain"
-           src="/images/hutopymedia/banners/heart.png">
+            <img
+                alt="YourHutopy"
+                class="w-48 h-48 md:w-48 md:h-48 object-contain"
+                src="/images/hutopymedia/banners/heart.png"
+            />
         </div>
 
         <div class="relative mt-10">
-
-      <div class="flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
+            <div
+                class="flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1"
+            >
                 <div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
                     <div class="text-xl mb-2 box-text">{{ t('supportText') }}</div>
                     <img
                         alt="YourHutopy"
                         class="max-h-56 mx-auto"
                         src="/images/hutopymedia/homepage/hands.png"
-          >
-          <div class="text-md text-justify px-6 ">
+                    />
+                    <div class="text-md text-justify px-6">
                         {{ t('supportDescription') }}
                     </div>
                     <!-- <v-btn>Soutenir</v-btn> -->
@@ -65,7 +75,7 @@ const { t } = useI18n();
                         alt="YourHutopy"
                         class="max-h-56 mx-auto"
                         src="/images/hutopymedia/homepage/brain.png"
-          >
+                    />
                     <div class="text-md text-justify px-6">
                         {{ t('creatorDescription') }}
                     </div>
@@ -77,16 +87,21 @@ const { t } = useI18n();
                     </v-btn>
                 </div>
             </div>
-
         </div>
 
         <div class="max-w-5xl mx-auto px-6 py-8">
             <div class="gap-8 items-start flex flex-col md:flex-row">
                 <!-- Section de texte -->
                 <div class="space-y-6">
-          <img alt="YourHutopy" class="w-full mb-6" src="/images/hutopymedia/homepage/votrehutopy.png">
+                    <img
+                        alt="YourHutopy"
+                        class="w-full mb-6"
+                        src="/images/hutopymedia/homepage/votrehutopy.png"
+                    />
                     <div class="space-y-4">
-            <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">{{ t('whatIsHutopy') }}</p>
+                        <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
+                            {{ t('whatIsHutopy') }}
+                        </p>
                         <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
                             {{ t('hutopyDescription') }}
                         </p>
@@ -106,126 +121,140 @@ const { t } = useI18n();
 
                 <!-- Section droite : 4 images -->
                 <div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
-          <div><img alt="Grinding" class="w-full h-auto object-cover rounded-2xl"
-                    src="/images/hutopymedia/homepage/grinding.png"></div>
-          <div><img alt="Microphone" class="w-full h-auto object-cover rounded-2xl"
-                    src="/images/hutopymedia/homepage/sign.png"></div>
-          <div><img alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"
-                    src="/images/hutopymedia/homepage/girlvr.png"></div>
-          <div><img alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"
-                    src="/images/hutopymedia/homepage/girlarmy.png"></div>
+                    <div>
+                        <img
+                            alt="Grinding"
+                            class="w-full h-auto object-cover rounded-2xl"
+                            src="/images/hutopymedia/homepage/grinding.png"
+                        />
+                    </div>
+                    <div>
+                        <img
+                            alt="Microphone"
+                            class="w-full h-auto object-cover rounded-2xl"
+                            src="/images/hutopymedia/homepage/sign.png"
+                        />
+                    </div>
+                    <div>
+                        <img
+                            alt="Girl VR"
+                            class="w-full h-auto object-cover rounded-2xl"
+                            src="/images/hutopymedia/homepage/girlvr.png"
+                        />
+                    </div>
+                    <div>
+                        <img
+                            alt="Girl Army"
+                            class="w-full h-auto object-cover rounded-2xl"
+                            src="/images/hutopymedia/homepage/girlarmy.png"
+                        />
+                    </div>
                 </div>
             </div>
         </div>
 
         <Footer class="mt-10"></Footer>
     </div>
-
 </template>
 
 <style scoped>
-.box-text {
-  color: #6A0164;
+    .box-text {
+        color: #6a0164;
         font-size: 30px;
         font-weight: bold;
-}
+    }
 
-.inscription-btn-header {
+    .inscription-btn-header {
         color: white;
-  background-color: #6A0164;
+        background-color: #6a0164;
         font-size: 18px;
         height: 40px;
         width: auto;
         padding: 0 32px;
         font-weight: bold;
+    }
 
-}
-
-.inscription-btn-header-outlined {
-  color: #6A0164;
+    .inscription-btn-header-outlined {
+        color: #6a0164;
         font-size: 18px;
         height: 40px;
         width: auto;
         padding: 0 32px;
         font-weight: bold;
+    }
 
-}
-
-.inscription-btn {
+    .inscription-btn {
         color: white;
-  background-color: #6A0164;
+        background-color: #6a0164;
         font-size: 18px;
         height: 40px;
         width: auto;
         padding: 0 32px;
         font-weight: bold;
         border-radius: 10px;
-}
+    }
 
-.create-btn {
-  background-color: #6A0164;
+    .create-btn {
+        background-color: #6a0164;
         font-size: 18px;
         height: 48px;
         width: auto;
         padding: 0 32px;
         font-weight: bold;
-  border-radius: 10px
-}
+        border-radius: 10px;
+    }
 
-.overlay p {
+    .overlay p {
         color: white;
         font-size: 1.5rem;
         text-align: center;
-}
+    }
 
-body {
-  background-color: #F4F4F4;
-}
+    body {
+        background-color: #f4f4f4;
+    }
 
-.support-container {
+    .support-container {
         display: flex;
         justify-content: center; /* Centre le bloc horizontalement */
         align-items: center; /* Centre le bloc verticalement (optionnel) */
+    }
 
-}
-
-.support-text {
+    .support-text {
         font-size: 2.2rem; /* Ajustez la taille du texte */
         line-height: 1.1; /* Ajustez l'espacement entre les lignes */
         text-align: left; /* Alignement du texte à gauche */
         font-weight: bold; /* Rend le texte gras */
-}
+    }
 
-.support-text .highlight {
-  color: #6A0164; /* Remplacez par la couleur souhaitée */
+    .support-text .highlight {
+        color: #6a0164; /* Remplacez par la couleur souhaitée */
         font-weight: bold; /* Mettre en gras */
-}
+    }
 
-.highlight2 {
-  color: #B81286; /* Remplacez par la couleur souhaitée */
+    .highlight2 {
+        color: #b81286; /* Remplacez par la couleur souhaitée */
+    }
 
-}
-
-.logo-image {
+    .logo-image {
         margin-left: auto;
-}
+    }
 
-@media (min-width: 640px) {
+    @media (min-width: 640px) {
         .header-btn {
             margin-top: 25px;
             margin-bottom: 25px;
         }
 
         .support-text {
-    font-size: 3.0rem; /* Ajustez la taille du texte */
+            font-size: 3rem; /* Ajustez la taille du texte */
             line-height: 1.1; /* Ajustez l'espacement entre les lignes */
             text-align: left; /* Alignement du texte à gauche */
             font-weight: bold; /* Rend le texte gras */
         }
-}
-
-@media (min-width: 768px) {
+    }
 
+    @media (min-width: 768px) {
         .header-btn {
             margin-top: 60px;
         }
@@ -234,13 +263,12 @@ body {
             margin-right: 20px;
             margin-left: 0;
         }
-}
+    }
 
-.homepagetext {
+    .homepagetext {
         color: white;
-  font-family: "Roboto", sans-serif;
-}
-
+        font-family: 'Roboto', sans-serif;
+    }
 </style>
 
 <i18n>
@@ -276,22 +304,6 @@ body {
         "whatIsHutopy": "Qu'est-ce que Hutopy ?",
         "hutopyDescription": "Hutopy est une plateforme qui connecte les créateurs avec leur audience. Nous fournissons des outils et des fonctionnalités pour aider les créateurs à monétiser leur contenu et à construire leur communauté.",
         "hutopyValues": "Nos valeurs sont centrées sur la créativité, la communauté et le soutien. Nous croyons en l'autonomisation des créateurs pour poursuivre leurs passions et construire des carrières durables."
-  },
-  "es": {
-    "inscription": "Registrarse",
-    "createPage": "Crear Página",
-    "support": "Apoyar",
-    "creators": "Creadores",
-    "projects": "Proyectos",
-    "love": "Pasión",
-    "supportText": "Apoyar",
-    "supportDescription": "Apoya a tus creadores favoritos y ayúdales a crecer. Tus contribuciones hacen una diferencia real en su viaje creativo.",
-    "create": "Crear",
-    "creatorDescription": "Crea tu propia página y comienza tu viaje creativo. Comparte tu pasión con el mundo y construye tu comunidad.",
-    "signup": "Registrarse",
-    "whatIsHutopy": "¿Qué es Hutopy?",
-    "hutopyDescription": "Hutopy es una plataforma que conecta a los creadores con su audiencia. Proporcionamos herramientas y funciones para ayudar a los creadores a monetizar su contenido y construir su comunidad.",
-    "hutopyValues": "Nuestros valores se centran en la creatividad, la comunidad y el apoyo. Creemos en empoderar a los creadores para perseguir sus pasiones y construir carreras sostenibles."
     }
 }
 </i18n>

frontend/src/views/main/SideBar.vue

@@ -16,7 +16,7 @@
     const authStore = useAuthStore();
 
     function toggleLanguage() {
-        const languages = ['fr', 'en', 'es'];
+        const languages = ['fr', 'en'];
         const currentIndex = languages.indexOf(locale.value);
         const nextIndex = (currentIndex + 1) % languages.length;
         languageStore.setLocale(languages[nextIndex]);
@@ -193,14 +193,6 @@
             "signIn": "Se Connecter",
             "signOut": "Se Déconnecter"
         }
-    },
-    "es": {
-        "sidebar": {
-            "myPage": "Mi Página",
-            "myProfile": "Mi Perfil",
-            "signIn": "Iniciar Sesión",
-            "signOut": "Cerrar Sesión"
-        }
     }
 }
 </i18n>

frontend/src/views/profile/ProfilePage.vue

@@ -948,39 +948,6 @@
         "phoneNumber": "Numéro de téléphone",
         "title": "Titre",
         "removeStripe": "Retirer Stripe"
-    },
-    "es": {
-        "personalInfo": "Información Personal",
-        "fullName": "Nombre Completo",
-        "alias": "Alias",
-        "email": "Correo Electrónico",
-        "changePassword": "Actualizar contraseña",
-        "creatorInfo": "Información del Creador",
-        "dangerZone": "Zona de Peligro",
-        "dangerZoneWarning": "Las acciones a continuación pueden tener impactos significativos en tu página de creador. Por favor, procede con precaución.",
-        "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.",
-        "deleteCreatorPage": "Eliminar Página de Creador",
-        "restoreCreatorPage": "Restaurar Página de Creador",
-        "stripeAccountId": "ID de Cuenta Stripe",
-        "socialNetworks": "Redes Sociales",
-        "handle": "Identificador del creador",
-        "qrCode": "Código QR",
-        "qrCodeDescription": "¡Imprime este código QR para compartir tu Hutopy con el mundo! Perfecto para tarjetas de presentación, redes sociales y materiales promocionales.",
-        "downloadQRCode": "Descargar Código QR",
-        "payment-information": "Información de Pago",
-        "stripeStatus": "Estado de Stripe",
-        "configured": "Configurado",
-        "notConfigured": "No Configurado",
-        "needsMoreInfo": "Requiere Más Información",
-        "pendingVerification": "Verificación Pendiente",
-        "continueStripeSetup": "Continuar Configuración de Stripe",
-        "reviewStripe": "Revisar Stripe",
-        "notSet": "No Establecido",
-        "configureStripe": "Connectar Stripe",
-        "phoneNumber": "Número de teléfono",
-        "title": "Título",
-        "removeStripe": "Eliminar Stripe"
     }
 }
 </i18n>

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

@@ -1,49 +1,47 @@
 <template>
-
     <div class="card dialog">
-
         <div class="card-title">
             {{ t('title') }}
         </div>
 
         <div class="card-content">
             <v-text-field
-          variant="outlined"
                 v-model="alias"
                 :label="t('label')"
+                variant="outlined"
             ></v-text-field>
         </div>
 
         <div class="card-actions">
-
-      <button class="secondary"
-              @click="requestClose">
+            <button
+                class="secondary"
+                @click="requestClose"
+            >
                 {{ t('cancel') }}
             </button>
 
-      <button class="primary"
-              @click="requestSave">
+            <button
+                class="primary"
+                @click="requestSave"
+            >
                 {{ t('save') }}
             </button>
-
         </div>
-
     </div>
-
 </template>
 
 <script setup>
-import {ref} from 'vue';
-import { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const props = defineProps(['alias'])
-const emit = defineEmits(['close', 'save'])
+    const { t } = useI18n();
+    const props = defineProps(['alias']);
+    const emit = defineEmits(['close', 'save']);
 
-const alias = ref(props.alias)
+    const alias = ref(props.alias);
 
-const requestClose = () => emit('close')
-const requestSave = () => emit('save', alias.value)
+    const requestClose = () => emit('close');
+    const requestSave = () => emit('save', alias.value);
 </script>
 
 <i18n>
@@ -55,12 +53,6 @@ const requestSave = () => emit('save', alias.value)
     "fr": {
         "title": "Alias",
         "label": "Votre alias"
-  },
-  "es": {
-    "title": "Alias",
-    "label": "Tu alias"
     }
 }
 </i18n>
-
-

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

@@ -1,6 +1,5 @@
 <template>
     <div class="card dialog">
-
         <div class="card-title">
             {{ t('changePassword') }}
         </div>
@@ -8,57 +7,85 @@
         <div class="card-content">
             <p class="description mb-4">{{ t('passwordDescription') }}</p>
 
-      <v-text-field v-model="newPassword" :label="t('newPassword')" :type="showNewPassword ? 'text' : 'password'"
-        variant="outlined" required :hint="t('passwordRequirements')">
+            <v-text-field
+                v-model="newPassword"
+                :hint="t('passwordRequirements')"
+                :label="t('newPassword')"
+                :type="showNewPassword ? 'text' : 'password'"
+                required
+                variant="outlined"
+            >
                 <template v-slot:append-inner>
-          <v-icon @click="showNewPassword = !showNewPassword" class="visibility-toggle" size="small"
-            :icon="showNewPassword ? mdiEyeOff : mdiEye" />
+                    <v-icon
+                        :icon="showNewPassword ? mdiEyeOff : mdiEye"
+                        class="visibility-toggle"
+                        size="small"
+                        @click="showNewPassword = !showNewPassword"
+                    />
                 </template>
             </v-text-field>
 
-      <v-text-field v-model="confirmPassword" :label="t('confirmPassword')"
-        :type="showConfirmPassword ? 'text' : 'password'" variant="outlined" required>
+            <v-text-field
+                v-model="confirmPassword"
+                :label="t('confirmPassword')"
+                :type="showConfirmPassword ? 'text' : 'password'"
+                required
+                variant="outlined"
+            >
                 <template v-slot:append-inner>
-          <v-icon @click="showConfirmPassword = !showConfirmPassword" class="visibility-toggle" size="small"
-            :icon="showNewPassword ? mdiEyeOff : mdiEye" />
+                    <v-icon
+                        :icon="showNewPassword ? mdiEyeOff : mdiEye"
+                        class="visibility-toggle"
+                        size="small"
+                        @click="showConfirmPassword = !showConfirmPassword"
+                    />
                 </template>
             </v-text-field>
 
-      <div v-if="errorMessage" class="error-message mb-4">
+            <div
+                v-if="errorMessage"
+                class="error-message mb-4"
+            >
                 {{ errorMessage }}
             </div>
 
             <div class="card-actions">
-        <button class="secondary" @click="$emit('closeRequested')">
+                <button
+                    class="secondary"
+                    @click="$emit('closeRequested')"
+                >
                     {{ t('cancel') }}
                 </button>
-        <button class="primary" @click="handleChangePassword" :disabled="isLoading">
+                <button
+                    :disabled="isLoading"
+                    class="primary"
+                    @click="handleChangePassword"
+                >
                     {{ t('save') }}
                 </button>
             </div>
         </div>
-
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { useAuthStore } from '@/stores/authStore.js';
-import { useI18n } from 'vue-i18n';
-import { mdiEye, mdiEyeOff } from '@mdi/js';
+    import { ref } from 'vue';
+    import { useAuthStore } from '@/stores/authStore.js';
+    import { useI18n } from 'vue-i18n';
+    import { mdiEye, mdiEyeOff } from '@mdi/js';
 
-const { t } = useI18n();
-const authStore = useAuthStore();
-const emit = defineEmits(['closeRequested']);
+    const { t } = useI18n();
+    const authStore = useAuthStore();
+    const emit = defineEmits(['closeRequested']);
 
-const newPassword = ref('');
-const confirmPassword = ref('');
-const isLoading = ref(false);
-const errorMessage = ref('');
-const showNewPassword = ref(false);
-const showConfirmPassword = ref(false);
+    const newPassword = ref('');
+    const confirmPassword = ref('');
+    const isLoading = ref(false);
+    const errorMessage = ref('');
+    const showNewPassword = ref(false);
+    const showConfirmPassword = ref(false);
 
-async function handleChangePassword() {
+    async function handleChangePassword() {
         // Clear previous error
         errorMessage.value = '';
 
@@ -93,30 +120,30 @@ async function handleChangePassword() {
         } finally {
             isLoading.value = false;
         }
-}
+    }
 </script>
 
 <style scoped>
-.dialog {
+    .dialog {
         @apply max-w-md mx-auto;
-}
+    }
 
-.error-message {
+    .error-message {
         @apply text-red-500 text-sm mt-2;
-}
+    }
 
-.visibility-toggle {
+    .visibility-toggle {
         @apply cursor-pointer;
         @apply transition-opacity duration-300;
         @apply opacity-60 hover:opacity-100;
         @apply absolute right-2 top-1/2 transform -translate-y-1/2;
         @apply z-10;
-}
+    }
 
-/* Override Vuetify's default padding to accommodate our icon */
-:deep(.v-field__append-inner) {
+    /* Override Vuetify's default padding to accommodate our icon */
+    :deep(.v-field__append-inner) {
         padding-inline-start: 0;
-}
+    }
 </style>
 
 <i18n>
@@ -144,18 +171,6 @@ async function handleChangePassword() {
         "passwordsDoNotMatch": "Les nouveaux mots de passe ne correspondent pas",
         "passwordTooShort": "Le mot de passe doit comporter au moins 8 caractères",
         "passwordUpdateFailed": "Échec de la mise à jour du mot de passe. Veuillez réessayer."
-  },
-  "es": {
-    "changePassword": "Actualizar contraseña",
-    "newPassword": "Nueva contraseña",
-    "confirmPassword": "Confirmar nueva contraseña",
-    "passwordRequirements": "La contraseña debe tener al menos 8 caracteres",
-    "passwordDescription": "La actualización de su contraseña le permite iniciar sesión directamente con su correo electrónico y contraseña.",
-    "save": "Guardar",
-    "cancel": "Cancelar",
-    "passwordsDoNotMatch": "Las nuevas contraseñas no coinciden",
-    "passwordTooShort": "La contraseña debe tener al menos 8 caracteres",
-    "passwordUpdateFailed": "Error al actualizar la contraseña. Por favor, inténtelo de nuevo."
     }
 }
 

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

@@ -13,12 +13,16 @@
         </div>
 
         <div class="card-actions">
-      <button class="secondary"
-              @click="cancel">
+            <button
+                class="secondary"
+                @click="cancel"
+            >
                 {{ t('cancel') }}
             </button>
-      <button class="primary"
-              @click="save">
+            <button
+                class="primary"
+                @click="save"
+            >
                 {{ t('save') }}
             </button>
         </div>
@@ -26,40 +30,38 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
-import {useClient} from "@/plugins/api.js";
-import { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+    import { useClient } from '@/plugins/api.js';
+    import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const props = defineProps({
+    const { t } = useI18n();
+    const props = defineProps({
         email: {
             required: true,
-    type: String
-  }
-});
+            type: String,
+        },
+    });
 
-const emits = defineEmits(['closeRequested']);
+    const emits = defineEmits(['closeRequested']);
 
-const email = ref(props.email);
+    const email = ref(props.email);
 
-const client = useClient();
-const save = async () => {
+    const client = useClient();
+    const save = async () => {
         try {
-    await client.post(
-        `/api/users/email`,
-        {
-          email: email.value
+            await client.post(`/api/users/email`, {
+                email: email.value,
             });
 
             emits('closeRequested');
         } catch (error) {
             console.error(error);
         }
-};
+    };
 
-const cancel = () => {
+    const cancel = () => {
         emits('closeRequested');
-};
+    };
 </script>
 
 <i18n>
@@ -71,12 +73,6 @@ const cancel = () => {
     "fr": {
         "title": "Changez votre Courriel",
         "label": "Votre email"
-  },
-  "es": {
-    "title": "Cambia tu correo electrónico",
-    "label": "Tu correo electrónico"
     }
 }
 </i18n>
-
-

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

@@ -1,16 +1,16 @@
 <script setup>
-import {ref} from 'vue';
-import { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const props = defineProps(['firstname', 'lastname'])
-const emit = defineEmits(['close', 'save'])
+    const { t } = useI18n();
+    const props = defineProps(['firstname', 'lastname']);
+    const emit = defineEmits(['close', 'save']);
 
-const firstname = ref(props.firstname)
-const lastname = ref(props.lastname)
+    const firstname = ref(props.firstname);
+    const lastname = ref(props.lastname);
 
-const requestClose = () => emit('close')
-const requestSave = () => emit('save', firstname.value, lastname.value)
+    const requestClose = () => emit('close');
+    const requestSave = () => emit('save', firstname.value, lastname.value);
 </script>
 
 <template>
@@ -21,28 +21,32 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
 
         <div class="card-content">
             <v-text-field
-          variant="outlined"
                 v-model="firstname"
                 :label="t('firstname')"
+                variant="outlined"
             ></v-text-field>
         </div>
 
         <div class="card-content">
             <v-text-field
-          variant="outlined"
                 v-model="lastname"
                 :label="t('lastname')"
+                variant="outlined"
             ></v-text-field>
         </div>
 
         <div class="card-actions">
-      <button class="secondary"
-              @click="requestClose">
+            <button
+                class="secondary"
+                @click="requestClose"
+            >
                 {{ t('cancel') }}
             </button>
 
-      <button class="primary"
-              @click="requestSave">
+            <button
+                class="primary"
+                @click="requestSave"
+            >
                 {{ t('save') }}
             </button>
         </div>
@@ -60,11 +64,6 @@ const requestSave = () => emit('save', firstname.value, lastname.value)
         "title": "Nom complet",
         "firstname": "Prénom",
         "lastname": "Nom"
-  },
-  "es": {
-    "title": "Nombre completo",
-    "firstname": "Nombre",
-    "lastname": "Apellido"
     }
 }
 </i18n>

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

@@ -4,28 +4,36 @@
         <div class="card-content">
             <v-text-field
                 v-model="email"
-          class="w-full p-2"
-          :label="t('email')"
-          type="email"
-          variant="outlined"
                 :error-messages="emailErrors"
+                :label="t('email')"
                 :rules="emailRules"
+                class="w-full p-2"
+                type="email"
                 validate-on="blur"
+                variant="outlined"
             />
 
             <v-alert
                 v-if="!!errorMessage"
+                class="mt-4"
                 outlined
                 type="error"
-          class="mt-4">
+            >
                 {{ errorMessage }}
             </v-alert>
 
             <div class="card-actions">
-        <button class="secondary" @click="$emit('closeRequested')">
+                <button
+                    class="secondary"
+                    @click="$emit('closeRequested')"
+                >
                     {{ t('cancel') }}
                 </button>
-        <button class="primary" @click="saveEmail" :disabled="!canSave || isLoading">
+                <button
+                    :disabled="!canSave || isLoading"
+                    class="primary"
+                    @click="saveEmail"
+                >
                     {{ t('save') }}
                 </button>
             </div>
@@ -34,38 +42,38 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useClient } from '@/plugins/api.js';
-import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+    import { computed, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useClient } from '@/plugins/api.js';
+    import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
 
-const { t } = useI18n();
-const client = useClient();
-const creatorProfileStore = useCreatorProfileStore();
+    const { t } = useI18n();
+    const client = useClient();
+    const creatorProfileStore = useCreatorProfileStore();
 
-const props = defineProps({
+    const props = defineProps({
         creator: {
             type: Object,
-    required: true
-  }
-});
+            required: true,
+        },
+    });
 
-const email = ref(props.creator.presentation?.email || '');
-const isLoading = ref(false);
-const errorMessage = ref('');
+    const email = ref(props.creator.presentation?.email || '');
+    const isLoading = ref(false);
+    const errorMessage = ref('');
 
-// Email validation
-const isValidEmail = (email) => {
+    // Email validation
+    const isValidEmail = email => {
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         return emailRegex.test(email);
-};
+    };
 
-const emailRules = [
+    const emailRules = [
         v => !!v || t('validation.emailRequired'),
         v => isValidEmail(v) || t('validation.emailInvalid'),
-];
+    ];
 
-const emailErrors = computed(() => {
+    const emailErrors = computed(() => {
         if (!email.value) {
             return [t('validation.emailRequired')];
         }
@@ -73,17 +81,15 @@ const emailErrors = computed(() => {
             return [t('validation.emailInvalid')];
         }
         return [];
-});
+    });
 
-const canSave = computed(() => {
-  return email.value && 
-         isValidEmail(email.value) && 
-         email.value !== (props.creator.presentation?.email || '');
-});
+    const canSave = computed(() => {
+        return email.value && isValidEmail(email.value) && email.value !== (props.creator.presentation?.email || '');
+    });
 
-async function saveEmail() {
+    async function saveEmail() {
         if (!props.creator.id) {
-    console.error("Creator ID is missing!");
+            console.error('Creator ID is missing!');
             return;
         }
 
@@ -96,12 +102,9 @@ async function saveEmail() {
             errorMessage.value = '';
 
             // Save email
-    await client.post(
-      `/api/creators/${props.creator.id}/email`,
-      {
-        email: email.value.trim()
-      }
-    );
+            await client.post(`/api/creators/${props.creator.id}/email`, {
+                email: email.value.trim(),
+            });
 
             // Refresh creator profile
             await creatorProfileStore.fetchCreatorProfile();
@@ -109,7 +112,7 @@ async function saveEmail() {
             // Close dialog
             emit('closeRequested');
         } catch (error) {
-    console.error("Error saving email:", error);
+            console.error('Error saving email:', error);
             if (error?.response?.data?.errors) {
                 errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected');
             } else {
@@ -118,15 +121,15 @@ async function saveEmail() {
         } finally {
             isLoading.value = false;
         }
-}
+    }
 
-const emit = defineEmits(['closeRequested']);
+    const emit = defineEmits(['closeRequested']);
 </script>
 
 <style scoped>
-.dialog {
+    .dialog {
         @apply max-w-md mx-auto;
-}
+    }
 </style>
 
 <i18n>
@@ -156,19 +159,6 @@ const emit = defineEmits(['closeRequested']);
         "errors": {
             "unexpected": "Une erreur inattendue s'est produite"
         }
-  },
-  "es": {
-    "changeEmail": "Cambiar correo electrónico",
-    "email": "Correo electrónico",
-    "save": "Guardar",
-    "cancel": "Cancelar",
-    "validation": {
-      "emailRequired": "El correo electrónico es obligatorio",
-      "emailInvalid": "Por favor ingrese una dirección de correo electrónico válida"
-    },
-    "errors": {
-      "unexpected": "Se produjo un error inesperado"
-    }
     }
 }
 </i18n>

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

@@ -1,40 +1,37 @@
 <script setup>
-import {ref} from 'vue';
-import {useClient} from '@/plugins/api.js';
-import { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+    import { useClient } from '@/plugins/api.js';
+    import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const props = defineProps({
+    const { t } = useI18n();
+    const props = defineProps({
         creator: {
-    required: true
-  }
-});
+            required: true,
+        },
+    });
 
-const emits = defineEmits(['closeRequested']);
+    const emits = defineEmits(['closeRequested']);
 
-const name = ref(props.creator.name);
+    const name = ref(props.creator.name);
 
-const client = useClient();
+    const client = useClient();
 
-async function save() {
+    async function save() {
         try {
-    await client.post(
-        `/api/creators/${props.creator.id}/name`,
-        {
-          name: name.value
-        }
-    );
+            await client.post(`/api/creators/${props.creator.id}/name`, {
+                name: name.value,
+            });
 
             props.creator.name = name.value;
             emits('closeRequested');
         } catch (error) {
             console.error('Error saving title:', error);
         }
-}
+    }
 
-const cancel = () => {
+    const cancel = () => {
         emits('closeRequested');
-};
+    };
 </script>
 
 <template>
@@ -52,12 +49,16 @@ const cancel = () => {
             ></v-text-field>
 
             <div class="card-actions">
-        <button class="secondary"
-                @click="cancel">
+                <button
+                    class="secondary"
+                    @click="cancel"
+                >
                     {{ t('cancel') }}
                 </button>
-        <button class="primary"
-                @click="save">
+                <button
+                    class="primary"
+                    @click="save"
+                >
                     {{ t('save') }}
                 </button>
             </div>
@@ -65,9 +66,7 @@ const cancel = () => {
     </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
 
 <i18n>
 {
@@ -78,10 +77,6 @@ const cancel = () => {
     "fr": {
         "title": "Modifier le nom",
         "label": "Votre nom"
-  },
-  "es": {
-    "title": "Cambiar nombre",
-    "label": "Tu nombre"
     }
 }
 </i18n>

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

@@ -4,32 +4,40 @@
         <div class="card-content">
             <v-text-field
                 v-model="displayPhoneNumber"
-          class="w-full p-2"
-          :label="t('phoneNumber')"
-          type="tel"
-          variant="outlined"
                 :error-messages="phoneErrors"
-          :rules="phoneRules"
-          validate-on="blur"
+                :label="t('phoneNumber')"
                 :placeholder="t('phonePlaceholder')"
+                :rules="phoneRules"
+                class="w-full p-2"
+                maxlength="14"
+                type="tel"
+                validate-on="blur"
+                variant="outlined"
                 @input="handlePhoneInput"
                 @keydown="handleKeydown"
-          maxlength="14"
             />
 
             <v-alert
                 v-if="!!errorMessage"
+                class="mt-4"
                 outlined
                 type="error"
-          class="mt-4">
+            >
                 {{ errorMessage }}
             </v-alert>
 
             <div class="card-actions">
-        <button class="secondary" @click="$emit('closeRequested')">
+                <button
+                    class="secondary"
+                    @click="$emit('closeRequested')"
+                >
                     {{ t('cancel') }}
                 </button>
-        <button class="primary" @click="savePhoneNumber" :disabled="!canSave || isLoading">
+                <button
+                    :disabled="!canSave || isLoading"
+                    class="primary"
+                    @click="savePhoneNumber"
+                >
                     {{ t('save') }}
                 </button>
             </div>
@@ -38,44 +46,44 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useClient } from '@/plugins/api.js';
-import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+    import { computed, ref, watch } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useClient } from '@/plugins/api.js';
+    import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
 
-const { t } = useI18n();
-const client = useClient();
-const creatorProfileStore = useCreatorProfileStore();
+    const { t } = useI18n();
+    const client = useClient();
+    const creatorProfileStore = useCreatorProfileStore();
 
-const props = defineProps({
+    const props = defineProps({
         creator: {
             type: Object,
-    required: true
-  }
-});
+            required: true,
+        },
+    });
 
-// Format existing phone number to display format
-const formatPhoneForDisplay = (phone) => {
+    // Format existing phone number to display format
+    const formatPhoneForDisplay = phone => {
         if (!phone) return '';
         const digits = phone.replace(/\D/g, '');
         if (digits.length === 10) {
             return `(${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6)}`;
         }
         return phone;
-};
+    };
 
-// Extract just the digits from formatted phone
-const extractDigits = (formattedPhone) => {
+    // Extract just the digits from formatted phone
+    const extractDigits = formattedPhone => {
         return formattedPhone.replace(/\D/g, '');
-};
+    };
 
-const displayPhoneNumber = ref(formatPhoneForDisplay(props.creator.presentation?.phoneNumber || ''));
-const phoneDigits = ref(extractDigits(displayPhoneNumber.value));
-const isLoading = ref(false);
-const errorMessage = ref('');
+    const displayPhoneNumber = ref(formatPhoneForDisplay(props.creator.presentation?.phoneNumber || ''));
+    const phoneDigits = ref(extractDigits(displayPhoneNumber.value));
+    const isLoading = ref(false);
+    const errorMessage = ref('');
 
-// Phone number formatting and validation
-const formatPhoneNumber = (digits) => {
+    // Phone number formatting and validation
+    const formatPhoneNumber = digits => {
         // Remove all non-digits
         const cleaned = digits.replace(/\D/g, '');
 
@@ -84,9 +92,9 @@ const formatPhoneNumber = (digits) => {
         if (cleaned.length <= 3) return `(${cleaned}`;
         if (cleaned.length <= 6) return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
         return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
-};
+    };
 
-const handlePhoneInput = (event) => {
+    const handlePhoneInput = event => {
         const input = event.target.value;
         const digits = extractDigits(input);
 
@@ -95,9 +103,9 @@ const handlePhoneInput = (event) => {
 
         phoneDigits.value = digits;
         displayPhoneNumber.value = formatPhoneNumber(digits);
-};
+    };
 
-const handleKeydown = (event) => {
+    const handleKeydown = event => {
         // Allow backspace, delete, tab, escape, enter
         if ([8, 9, 27, 13, 46].includes(event.keyCode)) return;
 
@@ -111,18 +119,18 @@ const handleKeydown = (event) => {
         if (event.keyCode < 48 || event.keyCode > 57) {
             event.preventDefault();
         }
-};
+    };
 
-// Watch for changes to phoneDigits to update display
-watch(phoneDigits, (newDigits) => {
+    // Watch for changes to phoneDigits to update display
+    watch(phoneDigits, newDigits => {
         displayPhoneNumber.value = formatPhoneNumber(newDigits);
-});
+    });
 
-const isValidPhoneNumber = (digits) => {
+    const isValidPhoneNumber = digits => {
         return digits.length === 10;
-};
+    };
 
-const phoneRules = [
+    const phoneRules = [
         v => {
             const digits = extractDigits(v);
             return digits.length > 0 || t('validation.phoneRequired');
@@ -131,9 +139,9 @@ const phoneRules = [
             const digits = extractDigits(v);
             return isValidPhoneNumber(digits) || t('validation.phoneInvalid');
         },
-];
+    ];
 
-const phoneErrors = computed(() => {
+    const phoneErrors = computed(() => {
         if (phoneDigits.value.length === 0) {
             return [t('validation.phoneRequired')];
         }
@@ -141,16 +149,18 @@ const phoneErrors = computed(() => {
             return [t('validation.phoneInvalid')];
         }
         return [];
-});
+    });
 
-const canSave = computed(() => {
-  return phoneDigits.value.length === 10 && 
-         phoneDigits.value !== extractDigits(props.creator.presentation?.phoneNumber || '');
-});
+    const canSave = computed(() => {
+        return (
+            phoneDigits.value.length === 10 &&
+            phoneDigits.value !== extractDigits(props.creator.presentation?.phoneNumber || '')
+        );
+    });
 
-async function savePhoneNumber() {
+    async function savePhoneNumber() {
         if (!props.creator.id) {
-    console.error("Creator ID is missing!");
+            console.error('Creator ID is missing!');
             return;
         }
 
@@ -165,12 +175,9 @@ async function savePhoneNumber() {
             // Save the formatted phone number
             const formattedPhone = formatPhoneNumber(phoneDigits.value);
 
-    await client.post(
-      `/api/creators/${props.creator.id}/phone`,
-      {
-        phoneNumber: formattedPhone
-      }
-    );
+            await client.post(`/api/creators/${props.creator.id}/phone`, {
+                phoneNumber: formattedPhone,
+            });
 
             // Refresh creator profile
             await creatorProfileStore.fetchCreatorProfile();
@@ -178,7 +185,7 @@ async function savePhoneNumber() {
             // Close dialog
             emit('closeRequested');
         } catch (error) {
-    console.error("Error saving phone number:", error);
+            console.error('Error saving phone number:', error);
             if (error?.response?.data?.errors) {
                 errorMessage.value = error.response.data.errors[0]?.['reason'] || t('errors.unexpected');
             } else {
@@ -187,15 +194,15 @@ async function savePhoneNumber() {
         } finally {
             isLoading.value = false;
         }
-}
+    }
 
-const emit = defineEmits(['closeRequested']);
+    const emit = defineEmits(['closeRequested']);
 </script>
 
 <style scoped>
-.dialog {
+    .dialog {
         @apply max-w-md mx-auto;
-}
+    }
 </style>
 
 <i18n>
@@ -227,20 +234,6 @@ const emit = defineEmits(['closeRequested']);
         "errors": {
             "unexpected": "Une erreur inattendue s'est produite"
         }
-  },
-  "es": {
-    "changePhoneNumber": "Cambiar número de teléfono",
-    "phoneNumber": "Número de teléfono",
-    "phonePlaceholder": "(555) 123-4567",
-    "save": "Guardar",
-    "cancel": "Cancelar",
-    "validation": {
-      "phoneRequired": "El número de teléfono es obligatorio",
-      "phoneInvalid": "Por favor ingrese un número de teléfono completo de 10 dígitos"
-    },
-    "errors": {
-      "unexpected": "Se produjo un error inesperado"
-    }
     }
 }
 </i18n>

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

@@ -1,49 +1,49 @@
 <script setup>
-import {computed, ref, watch} from 'vue';
-import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
-import {useClient} from "@/plugins/api.js";
-import NameEditor from "@/views/creators/NameEditor.vue";
-import {useI18n} from 'vue-i18n';
+    import { computed, ref, watch } from 'vue';
+    import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
+    import { useClient } from '@/plugins/api.js';
+    import NameEditor from '@/views/creators/NameEditor.vue';
+    import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
+    const props = defineProps({
         creator: {
-    required: true
-  }
-});
+            required: true,
+        },
+    });
 
-const emit = defineEmits(['closeRequested']);
+    const emit = defineEmits(['closeRequested']);
 
-const creatorProfileStore = useCreatorProfileStore();
-const client = useClient();
-const {t} = useI18n();
+    const creatorProfileStore = useCreatorProfileStore();
+    const client = useClient();
+    const { t } = useI18n();
 
-const newSlug = ref(props.creator.slug);
-const slugReservationId = ref(undefined);
-const isOperationPending = ref(false);
-const errorMessage = ref('');
-const isCurrentHandle = ref(false);
+    const newSlug = ref(props.creator.slug);
+    const slugReservationId = ref(undefined);
+    const isOperationPending = ref(false);
+    const errorMessage = ref('');
+    const isCurrentHandle = ref(false);
 
-// Watch for changes to the new slug to check if it's the same as the current one
-watch(newSlug, (newValue) => {
+    // Watch for changes to the new slug to check if it's the same as the current one
+    watch(newSlug, newValue => {
         isCurrentHandle.value = newValue === props.creator.slug;
         if (isCurrentHandle.value) {
             slugReservationId.value = undefined;
         }
-});
+    });
 
-const canSave = computed(() => slugReservationId.value !== undefined && !isCurrentHandle.value);
+    const canSave = computed(() => slugReservationId.value !== undefined && !isCurrentHandle.value);
 
-function handleSlugReservationIdChanged($event) {
+    function handleSlugReservationIdChanged($event) {
         slugReservationId.value = $event;
-}
+    }
 
-async function save() {
+    async function save() {
         try {
             isOperationPending.value = true;
             errorMessage.value = '';
 
             await client.put(`/api/creators/${props.creator.id}/slug`, {
-      slugReservationId: slugReservationId.value
+                slugReservationId: slugReservationId.value,
             });
 
             await creatorProfileStore.fetchCreatorProfile();
@@ -57,11 +57,11 @@ async function save() {
         } finally {
             isOperationPending.value = false;
         }
-}
+    }
 
-const cancel = () => {
+    const cancel = () => {
         emit('closeRequested');
-};
+    };
 </script>
 
 <template>
@@ -74,26 +74,31 @@ const cancel = () => {
             <name-editor
                 v-model:name="newSlug"
                 :creator-name-reservation-id="slugReservationId"
-          @update:creator-name-reservation-id="handleSlugReservationIdChanged"
                 :original-slug="creator.slug"
+                @update:creator-name-reservation-id="handleSlugReservationIdChanged"
             ></name-editor>
 
             <v-alert
                 v-if="!!errorMessage"
+                class="mt-4"
                 outlined
                 type="error"
-          class="mt-4">
+            >
                 {{ errorMessage }}
             </v-alert>
 
             <div class="card-actions">
-        <button class="secondary"
-                @click="cancel">
+                <button
+                    class="secondary"
+                    @click="cancel"
+                >
                     {{ t('cancel') }}
                 </button>
-        <button class="primary"
+                <button
+                    :disabled="!canSave || isOperationPending"
+                    class="primary"
                     @click="save"
-                :disabled="!canSave || isOperationPending">
+                >
                     {{ t('save') }}
                 </button>
             </div>
@@ -101,8 +106,7 @@ const cancel = () => {
     </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>
 
 <i18n>
 {
@@ -111,9 +115,6 @@ const cancel = () => {
     },
     "fr": {
         "title": "Modifier l'identifiant du créateur"
-  },
-  "es": {
-    "title": "Cambiar identificador del creador"
     }
 }
 </i18n>

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

@@ -1,24 +1,24 @@
 <script setup>
-import {useClient} from '@/plugins/api.js';
-import {ref} from 'vue';
-import { useI18n } from 'vue-i18n';
-import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
+    import { useClient } from '@/plugins/api.js';
+    import { ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useCreatorProfileStore } from '@/stores/creatorProfileStore.js';
 
-const props = defineProps({
+    const props = defineProps({
         creator: {
             required: true,
         },
-});
+    });
 
-const emits = defineEmits(['closeRequested']);
+    const emits = defineEmits(['closeRequested']);
 
-const stripeId = ref('');
-const { t } = useI18n();
-const creatorProfileStore = useCreatorProfileStore();
+    const stripeId = ref('');
+    const { t } = useI18n();
+    const creatorProfileStore = useCreatorProfileStore();
 
-const client = useClient();
+    const client = useClient();
 
-const save = async () => {
+    const save = async () => {
         try {
             await client.post(`/api/membership/stripe-account`, {
                 stripeAccountId: stripeId.value,
@@ -29,11 +29,11 @@ const save = async () => {
         } catch (error) {
             console.error('Error saving stripe id:', error);
         }
-};
+    };
 
-const cancel = () => {
+    const cancel = () => {
         emits('closeRequested');
-};
+    };
 </script>
 
 <template>
@@ -51,12 +51,16 @@ const cancel = () => {
             ></v-text-field>
 
             <div class="card-actions">
-        <button class="secondary"
-                @click="cancel">
+                <button
+                    class="secondary"
+                    @click="cancel"
+                >
                     {{ t('cancel') }}
                 </button>
-        <button class="primary"
-                @click="save">
+                <button
+                    class="primary"
+                    @click="save"
+                >
                     {{ t('save') }}
                 </button>
             </div>
@@ -64,9 +68,7 @@ const cancel = () => {
     </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
 
 <i18n>
 {
@@ -77,10 +79,6 @@ const cancel = () => {
     "fr": {
         "title": "Modifier l'ID Stripe",
         "label": "Votre ID Stripe"
-  },
-  "es": {
-    "title": "Cambiar ID de Stripe",
-    "label": "Tu ID de Stripe"
     }
 }
 </i18n>

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

@@ -1,45 +1,41 @@
 <script setup>
-import {ref} from 'vue';
-import {useClient} from '@/plugins/api.js';
-import { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+    import { useClient } from '@/plugins/api.js';
+    import { useI18n } from 'vue-i18n';
 
-const props = defineProps({
+    const props = defineProps({
         creator: {
-    required: true
-  }
-});
+            required: true,
+        },
+    });
 
-const emits = defineEmits(['closeRequested']);
+    const emits = defineEmits(['closeRequested']);
 
-const title = ref(props.creator.title);
-const { t } = useI18n();
+    const title = ref(props.creator.title);
+    const { t } = useI18n();
 
-const client = useClient();
+    const client = useClient();
 
-async function save() {
+    async function save() {
         try {
-    await client.post(
-        `/api/creators/${props.creator.id}/title`,
-        {
-          title: title.value
-        }
-    );
+            await client.post(`/api/creators/${props.creator.id}/title`, {
+                title: title.value,
+            });
 
             props.creator.title = title.value;
             emits('closeRequested');
         } catch (error) {
             console.error('Error saving title:', error);
         }
-}
+    }
 
-const cancel = () => {
+    const cancel = () => {
         emits('closeRequested');
-};
+    };
 </script>
 
 <template>
     <div class="card dialog">
-
         <div class="card-title">
             {{ t('title') }}
         </div>
@@ -53,12 +49,16 @@ const cancel = () => {
             ></v-text-field>
 
             <div class="card-actions">
-        <button class="secondary"
-                @click="cancel">
+                <button
+                    class="secondary"
+                    @click="cancel"
+                >
                     {{ t('cancel') }}
                 </button>
-        <button class="primary"
-                @click="save">
+                <button
+                    class="primary"
+                    @click="save"
+                >
                     {{ t('save') }}
                 </button>
             </div>
@@ -66,9 +66,7 @@ const cancel = () => {
     </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
 
 <i18n>
 {
@@ -79,10 +77,6 @@ const cancel = () => {
     "fr": {
         "title": "Modifier le titre",
         "label": "Votre titre"
-  },
-  "es": {
-    "title": "Cambiar título",
-    "label": "Tu título"
     }
 }
 </i18n>

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

@@ -1,87 +1,81 @@
 <script setup>
-import {ref} from 'vue'
-import {useClient} from "@/plugins/api.js";
-import X from "@/views/svg/X.vue";
-import Tiktok from "@/views/svg/Tiktok.vue";
-import Reddit from "@/views/svg/Reddit.vue";
-import Web from "@/views/svg/Web.vue";
-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 { useI18n } from 'vue-i18n';
+    import { ref } from 'vue';
+    import { useClient } from '@/plugins/api.js';
+    import X from '@/views/svg/X.vue';
+    import Tiktok from '@/views/svg/Tiktok.vue';
+    import Reddit from '@/views/svg/Reddit.vue';
+    import Web from '@/views/svg/Web.vue';
+    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 { useI18n } from 'vue-i18n';
 
-const { t } = useI18n();
-const props = defineProps({
+    const { t } = useI18n();
+    const props = defineProps({
         creator: {
-    required: true
-  }
-})
+            required: true,
+        },
+    });
 
-const emits = defineEmits(['closeRequested'])
+    const emits = defineEmits(['closeRequested']);
 
-const facebookUrl = ref(props.creator.socials.facebookUrl)
-const instagramUrl = ref(props.creator.socials.instagramUrl)
-const linkedInUrl = ref(props.creator.socials.linkedInUrl)
-const redditUrl = ref(props.creator.socials.redditUrl)
-const tikTokUrl = ref(props.creator.socials.tikTokUrl)
-const websiteUrl = ref(props.creator.socials.websiteUrl)
-const xUrl = ref(props.creator.socials.xUrl)
-const youtubeUrl = ref(props.creator.socials.youtubeUrl)
+    const facebookUrl = ref(props.creator.socials.facebookUrl);
+    const instagramUrl = ref(props.creator.socials.instagramUrl);
+    const linkedInUrl = ref(props.creator.socials.linkedInUrl);
+    const redditUrl = ref(props.creator.socials.redditUrl);
+    const tikTokUrl = ref(props.creator.socials.tikTokUrl);
+    const websiteUrl = ref(props.creator.socials.websiteUrl);
+    const xUrl = ref(props.creator.socials.xUrl);
+    const youtubeUrl = ref(props.creator.socials.youtubeUrl);
 
-const client = useClient()
-const save = async () => {
+    const client = useClient();
+    const save = async () => {
         try {
-    await client.post(
-        `/api/creators/${props.creator.id}/socials`,
-        {
-          "facebookUrl": facebookUrl.value || null,
-          "instagramUrl": instagramUrl.value || null,
-          "linkedInUrl": linkedInUrl.value || null,
-          "redditUrl": redditUrl.value || null,
-          "tikTokUrl": tikTokUrl.value || null,
-          "websiteUrl": websiteUrl.value || null,
-          "xUrl": xUrl.value || null,
-          "youtubeUrl": youtubeUrl.value || null,
-        })
+            await client.post(`/api/creators/${props.creator.id}/socials`, {
+                facebookUrl: facebookUrl.value || null,
+                instagramUrl: instagramUrl.value || null,
+                linkedInUrl: linkedInUrl.value || null,
+                redditUrl: redditUrl.value || null,
+                tikTokUrl: tikTokUrl.value || null,
+                websiteUrl: websiteUrl.value || null,
+                xUrl: xUrl.value || null,
+                youtubeUrl: youtubeUrl.value || null,
+            });
 
-    props.creator.socials.facebookUrl = facebookUrl
-    props.creator.socials.instagramUrl = instagramUrl
-    props.creator.socials.linkedInUrl = linkedInUrl
-    props.creator.socials.redditUrl = redditUrl
-    props.creator.socials.tikTokUrl = tikTokUrl
-    props.creator.socials.websiteUrl = websiteUrl
-    props.creator.socials.xUrl = xUrl
-    props.creator.socials.youtubeUrl = youtubeUrl
+            props.creator.socials.facebookUrl = facebookUrl;
+            props.creator.socials.instagramUrl = instagramUrl;
+            props.creator.socials.linkedInUrl = linkedInUrl;
+            props.creator.socials.redditUrl = redditUrl;
+            props.creator.socials.tikTokUrl = tikTokUrl;
+            props.creator.socials.websiteUrl = websiteUrl;
+            props.creator.socials.xUrl = xUrl;
+            props.creator.socials.youtubeUrl = youtubeUrl;
 
-    emits('closeRequested')
+            emits('closeRequested');
         } catch (error) {
-    console.error(error)
+            console.error(error);
         }
-}
-
-const cancel = () => {
-  emits('closeRequested')
-}
+    };
 
+    const cancel = () => {
+        emits('closeRequested');
+    };
 </script>
 
 <template>
-
     <div class="card dialog">
-
         <div class="card-title">
             {{ t('title') }}
         </div>
 
         <div class="card-content">
-
             <div class="editor-line">
                 <facebook class="social-icon"></facebook>
                 <input
                     v-model="facebookUrl"
-            class="input-field"
                     :placeholder="t('facebook')"
+                    class="input-field"
                     type="text"
                 />
             </div>
@@ -90,8 +84,8 @@ const cancel = () => {
                 <instagram class="social-icon"></instagram>
                 <input
                     v-model="instagramUrl"
-            class="input-field"
                     :placeholder="t('instagram')"
+                    class="input-field"
                     type="text"
                 />
             </div>
@@ -100,8 +94,8 @@ const cancel = () => {
                 <linkedin class="social-icon"></linkedin>
                 <input
                     v-model="linkedInUrl"
-            class="input-field"
                     :placeholder="t('linkedin')"
+                    class="input-field"
                     type="text"
                 />
             </div>
@@ -110,8 +104,8 @@ const cancel = () => {
                 <reddit class="social-icon"></reddit>
                 <input
                     v-model="redditUrl"
-            class="input-field"
                     :placeholder="t('reddit')"
+                    class="input-field"
                     type="text"
                 />
             </div>
@@ -120,8 +114,8 @@ const cancel = () => {
                 <tiktok class="social-icon"></tiktok>
                 <input
                     v-model="tikTokUrl"
-            class="input-field"
                     :placeholder="t('tiktok')"
+                    class="input-field"
                     type="text"
                 />
             </div>
@@ -130,8 +124,8 @@ const cancel = () => {
                 <web class="social-icon"></web>
                 <input
                     v-model="websiteUrl"
-            class="input-field"
                     :placeholder="t('website')"
+                    class="input-field"
                     type="text"
                 />
             </div>
@@ -140,8 +134,8 @@ const cancel = () => {
                 <x class="social-icon"></x>
                 <input
                     v-model="xUrl"
-            class="input-field"
                     :placeholder="t('x')"
+                    class="input-field"
                     type="text"
                 />
             </div>
@@ -150,49 +144,48 @@ const cancel = () => {
                 <youtube class="social-icon"></youtube>
                 <input
                     v-model="youtubeUrl"
-            class="input-field"
                     :placeholder="t('youtube')"
+                    class="input-field"
                     type="text"
                 />
             </div>
-
         </div>
 
         <div class="card-actions">
-      <button class="secondary"
-              @click="cancel">
+            <button
+                class="secondary"
+                @click="cancel"
+            >
                 {{ t('cancel') }}
             </button>
-      <button class="primary"
-              @click="save">
+            <button
+                class="primary"
+                @click="save"
+            >
                 {{ t('save') }}
             </button>
         </div>
-
     </div>
-
 </template>
 
 <style scoped>
-
-.editor-line {
+    .editor-line {
         @apply flex flex-row gap-4;
         @apply items-center;
-}
+    }
 
-.social-icon {
+    .social-icon {
         @apply w-8 h-8;
-}
+    }
 
-.input-field {
+    .input-field {
         @apply w-full p-[10px];
         @apply rounded-sm;
         @apply transition duration-200;
         @apply ring-1 ring-[#6D6C70] focus:outline-none focus:ring-hutopySecondary;
         @apply hover:ring-hutopyPrimary;
-  @apply placeholder:text-[#6D6C70]
-}
-
+        @apply placeholder:text-[#6D6C70];
+    }
 </style>
 
 <i18n>
@@ -202,9 +195,6 @@ const cancel = () => {
     },
     "fr": {
         "title": "Liens des réseaux sociaux"
-  },
-  "es": {
-    "title": "Enlaces de redes sociales"
     }
 }
 </i18n>