MFA page: How to disable continue button only when the verification code has been sent

[pd-sgdev1]

Hi,

I would like to disable the Continue button while the e-mail verification code has not been sent (user has not clicked on the Send verification code button) - is that possible?

If you could lead me to an example or something similar, that would be great.

Thanks

[bolt-io]

Hi @pd-sgdev1 - Which page layout version are you using? If I recall correctly there was a bug in one of them that did not disable that button by default but this should be fixed in the latest version (urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.8)

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

[yogikale]

I have updated datauri to urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.8 but still its taking time and user can click on continue button.. There should be loading dialog box with disable screen activity just like "Please wait loading information"

[Soggywaters]

Any updates to this?

[Soggywaters]

I have a simple solution that uses JQuery:

$("#continue").hide();
var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutationRecord) {
        $("#continue").show();
    });
});
var target = document.getElementById('email_success');
observer.observe(target, { attributes: true, attributeFilter: ['style'] });

What this is doing:

1. First, it's hiding the Continue button.
2. Then, it's using Javascript's MutationObserver to observe when the style attribute of div tag for the email_success label change. This will only change once a user has successfully verified their email with the emailed code.
3. Reveal the Continue button.

The email_success div tag is the ID of the div tag for a successfully verified code label. I think it changes based on the outclaim name in your b2c policy.

It's not a very pretty way but it works for me. If they end up changing their UI for the self assertion, then this might break. I'm using urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.9 UI format. And if it isn't obvious - I could have only done this via a custom UI by adding the above code in a <Script> tag at the bottom of my HTML for this page. I still think Microsoft should update this to be an option within the B2C custom policies.