CODEWITHSUNDEEP
azureazure-ad-b2cazure-ad-b2c-custom-policy
Luan de Faria Bon
Luan de Faria Bon

Reputation: 53

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>

Upvotes: 0

Views: 1771

Answers (3)

Gabriel Taranto
Gabriel Taranto

Reputation: 11

@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>

Upvotes: 1

Connor Ruggles
Connor Ruggles

Reputation: 51

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

Upvotes: 1

Jit_MSFT
Jit_MSFT

Reputation: 144

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.

Upvotes: 0

Related Questions