Meteor accounts.ui localization

Question

I'm learning to use meteor.

Is it possible to easily localize accounts.ui components?

Answer 1

This is a slightly hacky solution, you could remove the accounts-ui package you have and add it in manually. Find the accounts-ui branch on meteor's github repo and find all the contents in the accounts-ui package such as: login_buttons_dialogs.html, login_buttons.html, etc.

You could then edit and copy these files into your meteor project directly with the custom text in the language you would like.

Meteor hasn't implemented internationalization but its on the roadmap. What you could do is use meteorite and install a localization package such as simple-i18n in conjunction with the manually edited accounts-ui files to give your users a multi-lingual experience or simply offer accounts-ui in a different language.

Answer 2

i18n is still on the todo list of Meteor. Meanwhile, you can cook a system of your own. Se how they achieved internationalisation here for example: https://github.com/bolora/multi-page-config

Answer 3

You can consider to use meteor-accounts-ui-bootstrap-3

It supports localization:

accountsUIBootstrap3.setLanguage('ru');

Answer 4

For french:  

 /**
  * Accounts-ui ugly translation
  * TODO : use i18n solution
  */
   Template.header.rendered = function() {
     $('#login-sign-in-link').text('Connexion ▾');
     $('.login-close-text').text('Fermer');
     $('#login-username-or-email-label').text('Pseudo ou email');
     $('#login-password-label').text('Mot de passe (mdp)');
     $('#signup-link').text('Créer un compte');
     $('#forgot-password-link').text('Mdp oublié');
     $('#login-buttons-forgot-password').text('Récupération');
     $('#back-to-login-link').text('Connexion');
     $('#login-username-label').text('Pseudo');
     $('#login-buttons-open-change-password').text('Changer de mdp');
     $('#login-buttons-logout').text('Deconnexion');
     if ($('#login-buttons-password').text().indexOf('Sign in') != -1) {
       $('#login-buttons-password').text('Connexion');
     } else {
       $('#login-buttons-password').text('Créer le compte');
     }
     $('.login-button').addClass('btn btn-warning');
     $('.login-button').removeClass('login-button login-button-form-submit');
     if ($('.message.error-message').text().indexOf('Username must be at least 3 characters long') != -1) {
       $('.message.error-message').text('Le login doit faire plus de 3 caractères');
     } else if ($('.message.error-message').text().indexOf('Incorrect password') != -1 || $('.message.error-message').text().indexOf('User not found') != -1) {
       $('.message.error-message').text('login ou mot de passe incorrect');
     }
     $('#login-old-password-label').text('Mot de passe actuel');
     $('#login-buttons-do-change-password').text('Changer le mot de passe');
     $('#reset-password-new-password-label').text('Nouveau mot de passe');
     $('#login-buttons-reset-password-button').text('Changer');
     if ($('.message.info-message').text().indexOf('Email sent') != -1) $('.message.info-message').text('Email envoyé');
     $('#just-verified-dismiss-button').parent().html('Email vérifié <div class="btn btn-warning" id="just-verified-dismiss-button">Masquer</div>');
   };

Answer 5

For German, including all labels.
This is mostly adapted from Pascoual's post, however, the buttons are still formatted and some additional labels are translated...
If you find a label which still isn't translatet, please report this in a comment.

  /**
   * Accounts-ui ugly translation
   * TODO : use i18n solution
   */
Template.login.rendered = function() {
  $('#login-sign-in-link').text('Einloggen');
  $('.login-close-text').text('Schliessen');
  $('#login-username-or-email-label').text('Benutzername oder Email');
  $('#login-password-label').text('Passwort');
  $('#signup-link').text('Konto erstellen');
  $('#forgot-password-link').text('Passwort vergessen');
  $('#login-buttons-forgot-password').text('Wiederherstellen');
  $('#back-to-login-link').text('Zurück');
  $('#login-username-label').text('Benutzername');
  $('#login-buttons-open-change-password').text('Passwort ändern');
  $('#login-buttons-logout').text('Logout');
  $('#reset-password-new-password-label').text('Neues Passwort');
  $('#login-old-password-label').text('Aktuelles Passwort');
  $('#login-password-label').text('Neues Passwort');
  $('#login-buttons-do-change-password').text('Passwort ändern');
  if ($('#login-buttons-password').text().indexOf('Sign in') != -1) {
    $('#login-buttons-password').text('Einloggen');
  } else {
    $('#login-buttons-password').text('Konto erstellen');
  }

  if ($('.message.error-message').text().indexOf('Username must be at least 3 characters long') != -1) {
    $('.message.error-message').text('Benutzername muss mindestens 3 Zeichen lang sein');
  } else if ($('.message.error-message').text().indexOf('Incorrect password') != -1 || $('.message.error-message').text().indexOf('User not found') != -1) {
    $('.message.error-message').text('Benutzername oder Passwort falsch');
  }
};

Answer 6

Here is a trick I have used. Simple, but works:

Template.header.rendered = function() {
  $('#login-sign-in-link').text('Přihlásit se ▾');
  $('.login-close-text').text('Zavřít nabídku');
  $('.sign-in-text-google').text('Přihlásit se přes Google');
  $('.sign-in-text-facebook').text('Přihlásit se přes FB');
  //etc...
};