'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>
azureazure-ad-b2cazure-ad-b2c-custom-policy


Solution 1:[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);
});

Solution 2:[2]

@Luan. You can accomplish this by using the solution below.

<LocalizedString ElementType="ClaimType" ElementId="password" StringId="DisplayName">Senha</LocalizedString>

Just be sure you're setting the LocalizedResourcesReference in the ContentDefinition and the ContentDefinition Id "api.signuporsignin", in my case, in the OrchestrationStep as follows.

<ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
    <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.2</DataUri>
    <Metadata>
      <Item Key="TemplateId">azureBlue</Item>
    </Metadata>
    <LocalizedResourcesReferences MergeBehavior="Prepend">
      <LocalizedResourcesReference Language="pt-BR" LocalizedResourcesReferenceId="api.signin.pt-BR.rp" />
    </LocalizedResourcesReferences>
</ContentDefinition>

<UserJourneys>
<UserJourney Id="CustomSignUpSignIn">
  <OrchestrationSteps>

    <OrchestrationStep Order="1" Type="CombinedSignInAndSignUp" ContentDefinitionReferenceId="api.signuporsignin">
      <ClaimsProviderSelections>
        <ClaimsProviderSelection TargetClaimsExchangeId="GoogleExchange" />
        <ClaimsProviderSelection TargetClaimsExchangeId="AzureADCommonExchange" />
        <ClaimsProviderSelection TargetClaimsExchangeId="AppleExchange" />
        <ClaimsProviderSelection ValidationClaimsExchangeId="LocalAccountSigninEmailExchange" />
        <ClaimsProviderSelection TargetClaimsExchangeId="ForgotPasswordExchange" />
      </ClaimsProviderSelections>
      <ClaimsExchanges>
        <ClaimsExchange Id="LocalAccountSigninEmailExchange" TechnicalProfileReferenceId="SelfAsserted-LocalAccountSignin-Email" />
      </ClaimsExchanges>
    </OrchestrationStep>

Solution 3:[3]

Thanks @Luan. This is a known issue with Page Layout version 2.1.0 and later versions, which is already reported to Product Team. As a workaround, could you please try using standard user flow as it supports page layout version 1.2.0 and lower versions. Let us know if issue still persist into the lower versions.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Connor Ruggles
Solution 2 DharmanBot
Solution 3 Jit_MSFT

Related Questions