Change Password Widget Language

This article details how to set the language of the change password widget in the classic universal login experience.

• Change Password Widget 
• Classic Universal Login

There is no option for setting the language directly. Create translations and pass them to the widget using the `dict` option as explained in the following article: https://auth0.com/docs/customize/internationalization-and-localization/password-options-translation 

From the default template:

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

You can use the `lang` custom variable (https://auth0.com/docs/customize/universal-login-pages/customize-password-reset-page#custom-variables) to determine the user's language and specify the appropriate translations.

Example:

    const translations = {
     'en-US': {
        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."
     }
    }
    const lang = "{{lang}}".split(';')[0]; // e.g., en-US;q=0.5 -> en-US
    const dict = translations.hasOwnProperty(lang) ? translations[lang] : translations['en-US']; // fallback to US if no translations found for language

    new Auth0ChangePassword({
      container:         "change-password-widget-container",                // required
      email:             "{{email | escape}}",                              // DO NOT CHANGE THIS
      csrf_token:        "{{csrf_token}}",                                  // DO NOT CHANGE THIS
      ticket:            "{{ticket}}",                                      // DO NOT CHANGE THIS
      password_policy:   "{{password_policy}}",                             // DO NOT CHANGE THIS
      password_complexity_options:  {{password_complexity_options}},        // DO NOT CHANGE THIS
      theme: {
        icon: "{{tenant.picture_url | default: '//cdn.auth0.com/styleguide/1.0.0/img/badge.png'}}",
        primaryColor: "{{tenant.colors.primary | default: '#ea5323'}}"
      },
      dict,
    });