Lock: I18N for 'change password' lock screen

[gebrits]

It seems i18N is not supported out of the box for the lock 'change password' screen.
Are there plans to support this, including just referencing a dictionary file?

[luisrudge]

How are you getting the change password screen?

[gebrits]

I'm using the Hosted Pages Password Reset.

I now realise it's not build on top of lock but uses a Auth0 provided script [https://cdn.auth0.com/js/change-password-1.1.js]. Still, it does provide a dict-property in which to hook your own dictionary.

Would be great if I could just plugin an auth0-provided dictionary (or just extend the Lock-dictionary with a couple of extra template variables to cover this screen)

[luisrudge]

As you said, this is a different project. I'm still not sure what you're asking for. You can fully customize the widget i18n entries:

new Auth0ChangePassword({
  container: "container",         // required
  email: "[email protected]",     // required, it would normally be "<%= @email %>"
  csrf_token: "some token",       // required, it would normally be "<%= @csrf_token %>"
  ticket: "some ticket",          // required, it would normally be "<%= @ticket %>"
  password_policy: "low",         // required, it would normally be "<%= @password_policy %>"
  theme: {
    icon: "//cdn.auth0.com/styleguide/1.0.0/img/badge.png",
    primaryColor: "#ea5323",
    showBadge: false //defaults to true
  },
  dict: {
    passwordPlaceholder: "your new password",
    passwordConfirmationPlaceholder: "confirm your new password",
    passwordConfirmationMatchError: "Please ensure the password and the confirmation are the same.",
    passwordStrength: {
      containsAtLeast: "Contain at least %d of the following %d types of characters:",
      identicalChars: "No more than %d identical characters in a row (e.g., \"%s\" not allowed)",
      nonEmpty: "Non-empty password required",
      numbers: "Numbers (i.e. 0-9)",
      lengthAtLeast: "At least %d characters in length",
      lowerCase: "Lower case letters (a-z)",
      shouldContain: "Should contain:",
      specialCharacters: "Special characters (e.g. !@#$%^&*)",
      upperCase: "Upper case letters (A-Z)"
    },
    successMessage: "Your password has been reset successfully.",
    configurationError: "An error ocurred. There appears to be a misconfiguration in the form.",
    networkError: "The server cannot be reached, there is a problem with the network.",
    timeoutError: "The server cannot be reached, please try again.",
    serverError: "There was an error processing the password reset.",
    headerText: "Enter a new password for<br />{email}",
    title: "Change Password",
    weakPasswordError: "Password is too weak.",
    passwordHistoryError: "Password has previously been used",
    passwordDictError: "Password is too common",
    passwordNoUserInfoError: "Password is based on user information"
  },
  successCallback: function() {
    console.log('Password changed');
  }
});

I'll close this issue because it's not a Lock issue, but let's continue the discussion here.

[benleen]

@luisrudge, I landed here as I was searching for i18n for the password reset screen.

Was there supposed to be a link on the "here" of your last comment? ;-)

[benleen]

If with "here" you meant this issue:

My question is simple. As the OP seemed to have asked initially. Is there an easily integrated i18n for the password reset screen? The dictionary is a cumbersome workaround, especially for us since we have an Auth0 appliance with multiple tenants. We have little interest in hosting our own dictionary files if we can avoid it and we're not deviating from the original wording of the screen.

The reset password screen may not be Lock, but it is the closest relative and might as well be managed by the same team imho. ;-)

[luisrudge]

It's managed by my team, that why I said we should continue the conversation in this issue. We have plans to add Lock's i18n strategy to the change password widget, but there is no ETA yet.

[cgcote]

The "lang" property documented there https://auth0.com/docs/hosted-pages/password-reset seems to indicate i18n is already implemented. Adding more details on what "lang" does exactly would be helpful!

[luisrudge]

@cgcote keep in mind lang has nothing to do with the change password widget. it's just a variable that you can use like {{lang}}, in the same way that you use {{email}} etc

[dilger]

Sorry for chiming in, but is there any chance to customize the text language of the password reset page depending on the lang (user.meta_data.lang) of the requesting user or to send a lang param through the url?

[luisrudge]

@dilger I'm not sure you have access to this kind of information from that page, to be honest. Ping our amazing support team at https://support.auth0.com and I'm sure they'll give you a better answer. You can easily customize based on the browser language though: window.navigator.language

[pierreboissinot]

Hi there, any news about i18n support ?

[luisrudge]

Not at this moment. The previous recommendation still is the best you can do today.

[olegchursin]

Hi guys, any updates on this issue?

We are building a language selector on the password reset page, storing the selected value to sessionStorage. With Lock we can simply reassign a language variable:

var language;
var browserDefaultLanguage = window.navigator.language.slice(0, 2);
var sessionLanguage = sessionStorage.getItem('selectedLanguage');

if (typeof config.dict === 'string') {
        language = config.dict;
      } else if (sessionLanguage && isLanguageSupported(sessionLanguage)) {
        language = sessionLanguage;
      } else if (isLanguageSupported(browserDefaultLanguage)) {
        language = browserDefaultLanguage;
      } else {
        language = 'en';
      }

How do we implement the same functionality here? Thanks!

[luisrudge]

You’ll have to create a dictionary yourself and use the language param to pick one set of strings som that dictionary.

Luís

---

De: Oleg Chursin [e-mail]
Enviado: Wednesday, May 1, 2019 11:26:45 AM
Para: auth0/lock
Cc: Luís Rudge; Mention
Assunto: Re: [auth0/lock] I18N for 'change password' lock screen (#1122)

Hi guys, any updates on this issue?

We are building a language selector on the password reset page, storing the selected value to localStorage. With Lock we can simply reassign a language variable. How do we implement the same functionality here? Thanks!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fauth0%2Flock%2Fissues%2F1122%23issuecomment-488296868&data=02%7C01%7C%7C54839b500e974555548d08d6ce410a62%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636923176067429003&sdata=s9cbZ1FsBt39cLQXdgI1sgrG%2BAb6ImIG1njlma8dGEA%3D&reserved=0, or mute the threadhttps://nam02.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAAHFYE2FHB76NU2N7BQC6ITPTGSCLANCNFSM4D4KQYRQ&data=02%7C01%7C%7C54839b500e974555548d08d6ce410a62%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C636923176067819313&sdata=wA4PCEvtqf4bp5bUipAiF1VqGHjxtq9JA1sIzX1fBSo%3D&reserved=0.

[olegchursin]

Thanks for a quick response, @luisrudge . That's exactly what we are currently doing. Just thought there was some progress with Auth0ChangePassword to handle i18n the same way Lock Widget does.

[conan]

I'd like this very much, it seems odd to provide internationalisation support for login but not for password reset.

[vinispag]

@cgcote keep in mind lang has nothing to do with the change password widget. it's just a variable that you can use like {{lang}}, in the same way that you use {{email}} etc

But what does this lang variable contains, and how to set this variable to a specific user?

[luisrudge]

@vinispag https://auth0.com/docs/universal-login/password-reset#custom-variables I don't think you can set it.

[vinispag]

Thanks for the quick response.

But, I don't understand, in this link you sent the variable lang is described as The user's language. But how can I use this variable? The only thing this I can print from this variable is PT-BR,PT;Q=0.9,EN-US;Q=0.8,EN;Q=0.7,ES;Q=0.6,IT;Q=0.5,DE;Q=0.4 and I don't know what this means and how to use it.

A more detailed description of this variable maybe can be useful, or if I can access some user_metadata variable should be useful as well

[luisrudge]

@vinispag this is the language header that the browser sends:

Accept-Language: pt-BR,pt;q=0.9,en-BR;q=0.8,en-US;q=0.7,en;q=0.6

You can try using navigator.language or navigator.languages as well. You can't use user_metadata fields, though.

[iandeherdt]

If you send custom mails you could append the user language to the url href={{ url }}&lang=pt. Next you can get the language from the change password widget url.