Add i18n support with language switching and RTL layout capabilities

Author: ralyodio

public/i18n/en.json

@@ -38,7 +38,18 @@
     "delete_account_confirm": "Are you sure you want to delete your account? This action cannot be undone.",
     "delete_account": "Delete Account",
     "delete": "Delete",
-    "cancel": "Cancel"
+    "cancel": "Cancel",
+    "no_account": "Don't have an account?",
+    "to_get_started": "to get started.",
+    "forgot_password": "Forgot your password?",
+    "reset_password": "Reset Password",
+    "first_time_login": "If this is your first time logging in after the system update, use the default password:",
+    "password_change_prompt": "You'll be prompted to change your password after login.",
+    "check_auth_status": "Check Auth Status",
+    "create_account": "Create an Account",
+    "already_have_account": "Already have an account?",
+    "instead": "instead.",
+    "register_subscribe": "Register & Subscribe"
   },
   "subscription": {
     "active_subscription_required": "You need an active subscription to access the dashboard.",
@@ -50,7 +61,19 @@
     "copy": "Copy",
     "copied": "Copied!",
     "waiting_payment": "Waiting for payment confirmation...",
-    "payment_received": "Payment received! Redirecting to your dashboard..."
+    "payment_received": "Payment received! Redirecting to your dashboard...",
+    "plan": "Subscription Plan",
+    "monthly": "Monthly",
+    "monthly_price": "$5/month",
+    "monthly_description": "Billed monthly, cancel anytime",
+    "yearly": "Yearly",
+    "yearly_price": "$30/year",
+    "yearly_description": "Save $30 with annual billing",
+    "payment_method": "Payment Method",
+    "bitcoin": "Bitcoin",
+    "ethereum": "Ethereum",
+    "solana": "Solana",
+    "usdc": "USDC"
   },
   "common": {
     "save": "Save",
@@ -66,6 +89,22 @@
     "back": "Back",
     "next": "Next",
     "continue": "Continue",
-    "check_status": "Check Payment Status"
+    "check_status": "Check Payment Status",
+    "note": "Note"
+  },
+  "footer": {
+    "home": "Home",
+    "api_docs": "API Documentation",
+    "pricing": "Pricing",
+    "resources": "Resources",
+    "api_keys": "API Keys",
+    "github": "GitHub",
+    "support": "Support",
+    "legal": "Legal",
+    "terms": "Terms of Service",
+    "privacy": "Privacy Policy",
+    "refund": "Refund Policy",
+    "company_name": "Profullstack, Inc.",
+    "all_rights_reserved": "All rights reserved."
   }
 }

public/i18n/fr.json

@@ -38,7 +38,18 @@
     "delete_account_confirm": "Êtes-vous sûr de vouloir supprimer votre compte ? Cette action ne peut pas être annulée.",
     "delete_account": "Supprimer le compte",
     "delete": "Supprimer",
-    "cancel": "Annuler"
+    "cancel": "Annuler",
+    "no_account": "Vous n'avez pas de compte ?",
+    "to_get_started": "pour commencer.",
+    "forgot_password": "Mot de passe oublié ?",
+    "reset_password": "Réinitialiser le mot de passe",
+    "first_time_login": "Si c'est votre première connexion après la mise à jour du système, utilisez le mot de passe par défaut :",
+    "password_change_prompt": "Vous serez invité à changer votre mot de passe après la connexion.",
+    "check_auth_status": "Vérifier le statut d'authentification",
+    "create_account": "Créer un compte",
+    "already_have_account": "Vous avez déjà un compte ?",
+    "instead": "à la place.",
+    "register_subscribe": "S'inscrire et s'abonner"
   },
   "subscription": {
     "active_subscription_required": "Vous avez besoin d'un abonnement actif pour accéder au tableau de bord.",
@@ -50,7 +61,19 @@
     "copy": "Copier",
     "copied": "Copié !",
     "waiting_payment": "En attente de confirmation du paiement...",
-    "payment_received": "Paiement reçu ! Redirection vers votre tableau de bord..."
+    "payment_received": "Paiement reçu ! Redirection vers votre tableau de bord...",
+    "plan": "Plan d'abonnement",
+    "monthly": "Mensuel",
+    "monthly_price": "5$/mois",
+    "monthly_description": "Facturation mensuelle, annulation à tout moment",
+    "yearly": "Annuel",
+    "yearly_price": "30$/an",
+    "yearly_description": "Économisez 30$ avec la facturation annuelle",
+    "payment_method": "Méthode de paiement",
+    "bitcoin": "Bitcoin",
+    "ethereum": "Ethereum",
+    "solana": "Solana",
+    "usdc": "USDC"
   },
   "common": {
     "save": "Enregistrer",
@@ -66,6 +89,7 @@
     "back": "Retour",
     "next": "Suivant",
     "continue": "Continuer",
-    "check_status": "Vérifier l'état du paiement"
+    "check_status": "Vérifier l'état du paiement",
+    "note": "Remarque"
   }
 }

public/js/components/language-switcher.js

@@ -19,7 +19,22 @@ class LanguageSwitcher extends HTMLElement {
     }
 
     // Listen for language changes
-    window.addEventListener('language-changed', () => this.updateSelectedLanguage());
+    window.addEventListener('language-changed', (event) => {
+      console.log(`Language-switcher detected language change to: ${event.detail.language}`);
+      this.updateSelectedLanguage();
+    });
+    
+    // Listen for pre-navigation event to update language before transition starts
+    document.addEventListener('pre-navigation', () => {
+      console.log('Language-switcher detected pre-navigation event, updating selected language');
+      this.updateSelectedLanguage();
+    });
+    
+    // Also listen for router transitions to ensure language is preserved
+    document.addEventListener('spa-transition-end', () => {
+      console.log('Language-switcher detected route transition, updating selected language');
+      this.updateSelectedLanguage();
+    });
   }
 
   render() {
@@ -233,6 +248,7 @@ class LanguageSwitcher extends HTMLElement {
 
   updateSelectedLanguage() {
     const currentLang = localizer.getLanguage();
+    console.log(`Updating language-switcher UI to reflect current language: ${currentLang}`);
 
     // Update dropdown button text
     const currentLanguageSpan = this.shadowRoot.querySelector('.current-language');
@@ -250,6 +266,11 @@ class LanguageSwitcher extends HTMLElement {
         item.classList.remove('active');
       }
     });
+    
+    // Force translation application
+    if (window.app && window.app.translatePage) {
+      window.app.translatePage();
+    }
   }
 
   getLanguageName(langCode) {

public/js/components/pf-footer.js

@@ -9,6 +9,33 @@ class PfFooter extends HTMLElement {
 
   connectedCallback() {
     this.render();
+    this.initEventListeners();
+  }
+  
+  initEventListeners() {
+    // Listen for language changes
+    window.addEventListener('language-changed', () => {
+      console.log('pf-footer: Language changed event received');
+      this.translateElements();
+    });
+    
+    // Listen for i18n ready event
+    window.addEventListener('i18n-ready', () => {
+      console.log('pf-footer: i18n ready event received');
+      this.translateElements();
+    });
+    
+    // Listen for pre-navigation event to translate before transition starts
+    document.addEventListener('pre-navigation', () => {
+      console.log('pf-footer: Pre-navigation event received');
+      this.translateElements();
+    });
+    
+    // Listen for router transitions
+    document.addEventListener('spa-transition-end', () => {
+      console.log('pf-footer: SPA transition end event received');
+      this.translateElements();
+    });
   }
 
   render() {
@@ -83,38 +110,80 @@ class PfFooter extends HTMLElement {
       <div class="footer">
         <div class="footer-content">
           <div class="footer-section">
-            <h3>convert2doc</h3>
+            <h3 data-i18n="app_name">convert2doc</h3>
             <ul class="footer-links">
-              <li><a href="/">Home</a></li>
-              <li><a href="/api-docs">API Documentation</a></li>
-              <li><a href="/subscription">Pricing</a></li>
+              <li><a href="/" data-i18n="footer.home">Home</a></li>
+              <li><a href="/api-docs" data-i18n="footer.api_docs">API Documentation</a></li>
+              <li><a href="/subscription" data-i18n="footer.pricing">Pricing</a></li>
             </ul>
           </div>
           
           <div class="footer-section">
-            <h3>Resources</h3>
+            <h3 data-i18n="footer.resources">Resources</h3>
             <ul class="footer-links">
-              <li><a href="/api-keys">API Keys</a></li>
-              <li><a href="https://github.com/profullstack/pdf" target="_blank">GitHub</a></li>
-              <li><a href="mailto:[email protected]">Support</a></li>
+              <li><a href="/api-keys" data-i18n="footer.api_keys">API Keys</a></li>
+              <li><a href="https://github.com/profullstack/pdf" target="_blank" data-i18n="footer.github">GitHub</a></li>
+              <li><a href="mailto:[email protected]" data-i18n="footer.support">Support</a></li>
             </ul>
           </div>
           
           <div class="footer-section">
-            <h3>Legal</h3>
+            <h3 data-i18n="footer.legal">Legal</h3>
             <ul class="footer-links">
-              <li><a href="/terms">Terms of Service</a></li>
-              <li><a href="/privacy">Privacy Policy</a></li>
-              <li><a href="/refund">Refund Policy</a></li>
+              <li><a href="/terms" data-i18n="footer.terms">Terms of Service</a></li>
+              <li><a href="/privacy" data-i18n="footer.privacy">Privacy Policy</a></li>
+              <li><a href="/refund" data-i18n="footer.refund">Refund Policy</a></li>
             </ul>
           </div>
         </div>
         
         <div class="copyright">
-          &copy; ${year} Profullstack, Inc. All rights reserved.
+          &copy; ${year} <span data-i18n="footer.company_name">Profullstack, Inc.</span> <span data-i18n="footer.all_rights_reserved">All rights reserved.</span>
         </div>
       </div>
     `;
+    
+    // Translate elements after rendering
+    this.translateElements();
+  }
+  
+  /**
+   * Translate elements with data-i18n attributes in the shadow DOM
+   */
+  translateElements() {
+    console.log('pf-footer: Translating elements in shadow DOM');
+    
+    // Check if there are any elements to translate
+    const elementsToTranslate = this.shadowRoot.querySelectorAll('[data-i18n]');
+    if (elementsToTranslate.length === 0) {
+      console.log('pf-footer: No elements with data-i18n attribute found');
+      return;
+    }
+    
+    // Check if window.app._t is available (faster than importing)
+    if (window.app && window.app._t) {
+      console.log('pf-footer: Using window.app._t for translation');
+      elementsToTranslate.forEach(element => {
+        const key = element.getAttribute('data-i18n');
+        const translated = window.app._t(key);
+        element.textContent = translated;
+        console.log(`pf-footer: Translated "${key}" to "${translated}"`);
+      });
+      return;
+    }
+    
+    // Fallback to importing the translation function
+    console.log('pf-footer: Importing i18n module for translation');
+    import('../i18n.js').then(({ _t }) => {
+      elementsToTranslate.forEach(element => {
+        const key = element.getAttribute('data-i18n');
+        const translated = _t(key);
+        element.textContent = translated;
+        console.log(`pf-footer: Translated "${key}" to "${translated}"`);
+      });
+    }).catch(error => {
+      console.error('Error importing i18n module:', error);
+    });
   }
 }