Azure-Samples / active-directory-b2c-custom-policy-starterpack

Azure AD B2C now allows uploading of a Custom Policy which allows full control and customization of the Identity Experience Framework
http://aka.ms/aadb2ccustom
MIT License
334 stars 394 forks source link

Email address inputs should use type="email" #128

Open craigbrown opened 2 years ago

craigbrown commented 2 years ago

In the TrustFrameworkBase.xml files, several ClaimType items which are specifically used for email addresses are marked as being TextBox types. For example:

<ClaimType Id="signInNames.emailAddress">
  <DisplayName>Email Address</DisplayName>
  <DataType>string</DataType>
  <UserHelpText>Email address to use for signing in.</UserHelpText>
  <UserInputType>TextBox</UserInputType>
</ClaimType>

Using this claim type results in an input tag with type="text" on the sign-in page.

I believe the UserInputType for the relevant ClaimType elements (signInNames.emailAddress, email, and possibly signInName) should be changed to EmailBox instead, which will result in an input with type="email".

Apart from being more semantically accurate, this will mean mobile devices treat the email input appropriately - e.g. not auto-capitalizing the first character of the email address and not trying to auto-complete.

For browsers that don't support type="email", they will fall back to treating the input as type="text".

pedrodeniro commented 2 years ago

I've just come across this myself. Spent quite a lot of time trying to understand why the email claim input was not behaving as expected (compared to the standard user flows which are using EmailBox).

Some of our less technical minded users have been struggling with the sign up page as a result, I would just like to add some weight to this issue, it should be corrected in the TrustFrameworkBase.xml to be <UserInputType>EmailBox</UserInputType>.