Azure B2C password field text and placeholder

I have selected pt-Br language customization for my signin page flow, but some elements are not translated properly (or not translated), then i uploaded an override file with email claim display name that works, but the password field (requiredField_password) is not respecting the overrided value.

Reading more about on Microsoft docs, i am not able to find any reference about change password placeholder/text, in Customize the user interface in Azure Active Directory B2C, Language customization in Azure Active Directory B2C.

This doc Localization string IDs, mentions that you can substitute the requiredField_password value only on page layout version "< 2.0.0", but i am using the new version 2.1.1.

The big question is, Is it not possible to change the password field placeholder/text to a language other than English?

Policy XML (abbreviated)

<Localization Enabled="true">
  <SupportedLanguages DefaultLanguage="pt-BR" MergeBehavior="ReplaceAll">
    <SupportedLanguage>pt-BR</SupportedLanguage>
  </SupportedLanguages>
  <LocalizedResources Id="api.signin.pt-BR.rp">
    <LocalizedStrings>
      <LocalizedString ElementType="ClaimType" ElementId="email" StringId="DisplayName">Email</LocalizedString>
      <LocalizedString ElementType="ClaimType" ElementId="email" StringId="UserHelpText">Email que pode ser usado para entrar em contato com você.</LocalizedString>
      <LocalizedString ElementType="UxElement" StringId="requiredField_password">Senha</LocalizedString>
    </LocalizedStrings>
  </LocalizedResources>
</Localization>

Solution 1:

The way I have been able to do it is only via JavaScript in my custom policy. I am using layout version 2.1.2. I created a JSON object with the languages I want, and then the translations for the IDs I want to change. I've posted an example below.

One caveat with this is you have to use a higher layout version in order to use JS as well, so be aware of that.

You can use JS via a custom UI in user flows as well, not only custom policies so hopefully that is an option for you.

translation example:

// Get the language from the browser
var language = (navigator.languages
                ? navigator.languages[0]
                : (navigator.language || navigator.userLanguage)).toLowerCase();

// create an object with the translations and languages you want to translate to
var translations = {
    "en-us": {
        "password": "Password"
    },
    "en": {
        "password": "Password"
    },
    "fr-ca": {
        "password": "Mot de passe"
    },
    "fr": {
        "password": "Mot de passe"
    },
    "pt-br": {
        "password": "Senha"
    }
};


var passwordText = "Password";
if (language in translations) {
    passwordText = translations[language]["password"];
}

// now replace the text with the translation
$("#password").ready(function() {
    $("#password").attr("placeholder", passwordText);
});

$("label[for=\"password\"").ready(function() {
    $("label[for=\"password\"").text(passwordText);
});