azure-ad-b2c/html-templates

html-templates's Issues

Asterisks not shown for required fields

Self-asserted page v2.1.18 adds an asterisk for required fields. Using the Azure Blue template as a custom page, these are not shown.

Expected (as shown in non-custom page):

Consider stripping https://login.microsoft.com from templates resource urls

I think the result (local resources use domain relative paths like "/templates/src/..." is probably more useful than having absolute urls that point at "https://login.microsoft.com/template/src" and don't resolve.

Alternatively, use an absolute url that is clearly a placeholder, like https://localhost/ or https://static.contoso.com/.

The following trivial patch, and rerunning would handle this.

                     // Change the directory name for the legacy template
                     if (htmlFileURI.IndexOf("templates/") < 0)
                     {
                         reply = reply.Replace("https://login.microsoftonline.com/static/tenant/default/img/",
                                       "https://login.microsoftonline.com/static/tenant/templates/classic/img/");
                     }
                     
+                    // Use domain relative urls.
+                    reply = reply.Replace("https://login.microsoftonline.com/", "/");
+
                     // Remove the static tenant
                     reply = reply.Replace("/static/tenant/", "/");
 
                     // Add the src folder to the path
                     reply = reply.Replace("/templates/", "/templates/src/");
 
                     File.WriteAllText(localpath, reply);

Thoughts?

SelfAsserted template 2.1.7 and 2.1.8 breaks certain UI elements

Hi, when updating the DataUri urn to equal or greater than 2.1.7, the UI no longer reflects the button status, for example the Create button in Profile Creation should not be available until after successful Email Verification:

2.1.6 -

2.1.7 -

Please ADD CSS files as well

This repo misses the CSS source files for the HTLM styles. This will help understand the tagging elements and their actual command.
Please refer to https://github.com/Azure-Samples/Azure-AD-B2C-page-templates
which it has them.
Could you please add in this repo the CSS code styles as well?

How to reorder idp´s?

Hello together,

for me it is not clear how you achieve the order of the idp´s. In the documentation it is mentionend that the i can control the order of the idp´s by the policy:

When i look into the classic template it injects the social idp´s on top:

When i look into the AzureBlue template it is at the bottom:

Both templates are injected via:

When i change the order of idp´s in my policies nothing happens. But when i use the AzureBlue Template the social idp´s appearing on the bottom.

How can i reorder the social Idp´s without using AzureBlue template? I want to use my own template.

Forgot password page & Custom HTML templates.

In the forgot password page where the user sets the new password (last step), its being reverted to the MS templates instead of custom HTML templates. The custom template works all the way till that last step even for the forgot password flow( Send email, MFA code validation). Are there any logs on what is happening for it? We are using "UserFlows" for B2C. Login custom HTML template works fine and it is the same template for login/forgot password flows. It was developed using "selfAsserted.html". We are using only sign In and reset password flows.

Feature Request: Add tailwindcss support

Please add tailwindcss support.

https://tailwindcss.com/docs/installation/play-cdn

XSS vulnerability with included bootstrap v3.3.5

Was using these HTML templates as a base for my custom policies when I noticed that the bootstrap version with these base files comes with v.3.3.5, which is highlighted as a vulnerability with XSS.

See here:
https://security.snyk.io/package/npm/bootstrap/3.3.5
https://security.snyk.io/vuln/npm:bootstrap:20160627

Should probably update the version to at least v3.4.1 to help protect devs who use these base templates from XSS.

Page UI distorted after using AzureOcean temaplate html file used

Hi Team,
I have just changed image path for our custom logo files and deployed as it is html files but after using html files its UI distorted. Need help to resolve UI issues if you can provide css file it will be helpful.

Low quality HTML and CSS

I'm trying to adjust the branding of the templates for a client, but it is an extreme mess. The HTML contains too many generic classes, and using ID selectors in CSS is bad practice in general because of specificity issues.
Will this get fixed in the future?

Consider archiving the previous repository for these templates

These templates were previously available at https://github.com/Azure-Samples/Azure-AD-B2C-page-templates. This was never maintained, got out of date, and did not have an updater program that users could run to get the latest.

Please consider upating the README.md file over there to point at this repository, and then archiving that one.

Work

Required field descriptions not reflecting field name

Using the Azure Blue Template, when you do not populate a required field, it shows "password is required." or "text is required." instead of the attribute display name like it does without a custom template.

Custom page:

Not the custom page:

Required message displayed after a copy&paste

In the login page when you copy and paste an email address or a password, the required error message doesn't disapear. As you press on CTRL the message appear, but after the paste it should re-evaluate to hide the error message ?

UI 'working' spinner is never triggered

As far as I can tell, there are various actions where the UI is designed to reflect that work is going on in the background. For instance, when you press 'Send verification code' there should be an indication that server-side activity is occurring until the UI is updates with the 'Verify Code' boxes.

This spinner is written into the HTML:

<div class="working" id="email_ver_wait" aria-label="Please wait" aria-hidden="true" role="alert" aria-live="polite" style="display: none;"></div>

If you manually take out the display:none you can see that this is a dot-spinner. It gives an indication of 'activity'.

However, no version of the templates as provided actually allow this to be displayed. When (for instance) the user presses 'Send verification code' there is no indication that anything is going on for a few seconds, which leads to a bad user experience. Clearly the UI should be showing the spinner.

I've tried different versions of unifiedssp and selfasserted templates, none works I believe.

Thank you.

Error in the azure blue template css

Template https://github.com/azure-ad-b2c/html-templates/tree/main/templates/AzureBlue shifts the background image exposing an ugly white border (if your using a background image off course). Wonder how this one slipped through QA 😎

deployed:

local development:

Feedback the default tab order issue not fix in sample code | incorrect order: username >> signin button>> password

Hi Team,

The expected tab order is username >>password >> sign-in button. But if I use the sample code https://github.com/azure-ad-b2c/html-templates/blob/main/templates/AzureBlue/unified.html, the order will be username >> signin button >> password. It cannot fix by upgrading the api.signin content definition version 2.1.7.

I have test directly download the default blue ocean sign-in html 2.1.7 version by browser tool. The issue cannot reproduce. I also test directly use default ui definition without custom UI. The issue cannot reproduce either.

It seems to relate the current blue ocean html sample code is not up-to-date. https://github.com/azure-ad-b2c/html-templates/blob/main/templates/AzureBlue/unified.html

Download by browser tool.txt

All image URLs produce 404s

When trying to load the images in the example UIs, all the images do not load and produce 404 errors. Is this on purpose? Are they not deployed anywhere? If they are and those are supposed to load, please fix that. Thank you.

For an example, just try to go to https://login.microsoftonline.com/templates/src/backgrounds/1-1.png in your browser. It doesn't load.