Customise UI in azure active directory b2c for custom policies

Question

I am trying to customize the UI for the azure b2c login page. In the login form I want to change the value of the placeholder for the input field, and the text value of the Sign in button from "Sign in" to "Log in".

I have changed the values in the field tag labeled as "DisplayName" in the custom policies, but the input value of placeholders remains the same.

I have changed the button's text from the custom policies by updating the custom policy tag "DisplayName" from "Contoso" to "Test Button". How can I do the same for Login Form?

        <DisplayName>Email Address</DisplayName>
        <DataType>string</DataType>
        <UserHelpText>Email address to use for signing in.</UserHelpText>
        <UserInputType>TextBox</UserInputType>

Answer 1

Microsoft give the option to customize the banner and and other text and alignment in portal itself but if you want to fully change the html login code itself. Follow this documentation for the your customized html:

1. Create your html page and store in azure blob  storage 

2. Configure cors 

3. Update user flow

4. Test user flow

5. Change the banner and logo images

https://docs.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-user-flow

Answer 2

You might want to take a look at the Localization part of the docs:

https://docs.microsoft.com/en-us/azure/active-directory-b2c/localization

Lozalization allows you to set your own content versions for various locales - both ClaimType (like email) and other UI elements, like buttons - those are changed by using a proper string ID. You will find the list of string IDs of your interest in docs as well:

https://docs.microsoft.com/en-us/azure/active-directory-b2c/localization-string-ids

If you don't plan to use more than one localization you may also use Metadata entries for respective technical profile, like this:

<Metadata>
   <Item Key="language.button_signin">Log in</Item>
</Metadata>

Answer 3

The policy should always be used to control text, labels, error messages... This is best handled through localization. For example:

     <LocalizedResources Id="api.localaccountsignup.en">
        <LocalizedStrings>
          <LocalizedString ElementType="UxElement" StringId="button_continue">Login In</LocalizedString>
        </LocalizedStrings>
     </LocalizedResources>

Refer to the Microsoft Documentation on how to add localization .

To find the string ID of an element on the page that you want to change, open the browser console window and execute window.CONTENT;

This custom advanced policy from Microsoft has a pretty thorough implementation of localization and is a good reference.