Meteor accounts.ui localization

Question

I'm learning to use meteor.

Is it possible to easily localize accounts.ui components?

Answer 1

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...
};

Answer 2

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 3

For portuguese (PT-BR)

Template.layout.rendered = function() {
  $('#login-sign-in-link').text('Login ▾');
  $('.login-close-text').text('Fechar');
  $('#login-username-or-email-label').text('Nome de usuário ou e-mail');
  $('#login-password-label').text('Senha');
  $('#signup-link').text('Criar uma conta');
  $('#forgot-password-link').text('Esqueceu a senha?');
  $('#login-buttons-forgot-password').text('Recuperar');
  $('#back-to-login-link').text('Login');
  $('#login-username-label').text('Usuário para login');
  $('#login-buttons-open-change-password').text('Alterar senha');
  $('#login-buttons-logout').text('Logout');
  if ($('#login-buttons-password').text().indexOf('Sign in') != -1) {
    $('#login-buttons-password').text('Login');
  } else {
    $('#login-buttons-password').text('Criar conta');
  }
  $('.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('Usuário deve ter pelo menos 3 caracteres');
  } else if ($('.message.error-message').text().indexOf('Incorrect password') != -1 || $('.message.error-message').text().indexOf('User not found') != -1) {
    $('.message.error-message').text('Usuário/senha errado(s)');
  }
  $('#login-old-password-label').text('Senha atual');
  $('#login-buttons-do-change-password').text('Alterar a senha');
  $('#reset-password-new-password-label').text('Nova senha');
  $('#login-buttons-reset-password-button').text('Alterar');
  if ($('.message.info-message').text().indexOf('Email sent') != -1) $('.message.info-message').text('E-mail enviado');
  $('#just-verified-dismiss-button').parent().html('Email verificado <div class="btn btn-warning" id="just-verified-dismiss-button">Ocultar</div>');
};

WATCH OUT BOYS!
The CLOSE in the $('.login-close-text') is the VERB... TO CLOSE
It does not mean "NEAR" as I may have read in some answers above.

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

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 6

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 7

The simplest way is to user accounts-tap package: https://atmospherejs.com/softwarerero/accounts-t9n

It is based on tapi18n, you have just to add the following configuration on client side :

T9n.setLanguage('<yourLanguage>')

Answer 8

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

It supports localization:

accountsUIBootstrap3.setLanguage('ru');