How to add JavaScript event handlers for action completion in B2C emailVerificationControl?

Question

I am using emailVerificationControl and want to add JavaScript callbacks on SendCode and VerifyCode actions successful completion events. E.g. when user clicked but_send_code or but_verify_code, control is updated and shows success_send_code_msg and success_verify_code_msg respectively.

I want to write some event handlers to show/hide some other elements on these events.
How can I do it?

Btw, I’ve asked chatGPT, but it wasn’t able to give me solution, only general advice https://chat.openai.com/share/2a434eea-5e8c-4005-b6fa-f0b301dede08.
I want to solve the problem described in How in B2C sign-up Email Verification control “Verify Code” button to open Registration page

Answer 1

I’ve implemented some hack to automatically redirect to registration page after verification code validation, but it uses not documented control ids, that can be broken by Azure AD B2C in future releases.

//button class="verifyCode" id="emailVerificationControl_but_verify_code" type="button" aria-label="Verify" aria-hidden="false" style="display: inline;">Verify</button>
 $('#emailVerificationControl_but_verify_code').on('click', function (e) {
     //from https://stackoverflow.com/questions/3138756/calling-a-function-every-60-seconds/62934493#62934493
     let isVerifySuccess = false;
     const timer = setInterval(function () {
         isVerifySuccess = checkIfVerifySuccess();
         console.debug('#emailVerificationControl_but_verify_code click isVerifySuccess:', isVerifySuccess);
         if (isVerifySuccess) {
             clearInterval(timer);
         }
     }, 1000);
 });
 //  IfVerifySuccess,redirect to registration
 function checkIfVerifySuccess() {
     const verifySuccessCtl = document.getElementById('emailVerificationControl_success_message'); //see verify-page
     const isVerifyPage = verifySuccessCtl && verifySuccessCtl.style && verifySuccessCtl.style.display.indexOf('inline') >= 0;
     //<div id="emailVerificationControl_success_message" aria-hidden="false" role="alert" aria-label="E-mail address verified. You can now continue." style="display: inline;">E-mail address verified. You can now continue.</div>
     const isVerifySuccess = verifySuccessCtl.innerText.indexOf('E-mail address verified') >= 0;
     console.debug('isVerifyPage:', isVerifyPage, 'isVerifySuccess:', isVerifySuccess, 'sendSuccessCtl:', verifySuccessCtl);
     if (isVerifySuccess) {
         console.debug('checkIfVerifySuccess: redirect to registration');
         $('#attributeVerification .buttons #continue').click();
     }
     return isVerifySuccess;
 }

And similar logic to handle send code success

$('#emailVerificationControl_but_send_code').on('click', function (e) {
     //from https://stackoverflow.com/questions/3138756/calling-a-function-every-60-seconds/62934493#62934493
     let isVerifyCodePage = false;
     const timer = setInterval(function () {
         isVerifyCodePage = showSignUpPage();
         console.debug('emailVerificationControl_but_send_code click isVerifyCodePage:', isVerifyCodePage);
         if (isVerifyCodePage) {
             //console.debug('emailVerificationControl_but_send_code click clearInterval:', timer);
             clearInterval(timer);
         }
     }, 1000);
});
function showSignUpPage() {
 console.debug('showSignUpPage Sign-up ');
 const sendSuccessCtl = document.getElementById('emailVerificationControl_success_message'); //see verify-page
 const isVerifyPage = sendSuccessCtl && sendSuccessCtl.style && sendSuccessCtl.style.display.indexOf('inline') >= 0;
 console.debug('isVerifyPage:', isVerifyPage, 'sendSuccessCtl.style.display:', sendSuccessCtl.style.display, 'sendSuccessCtl:', sendSuccessCtl);
 if (!isVerifyPage) {
     togglePageControls('verify-page', 'none');
     togglePageControls('email-page', 'block');
    
 } else {
     togglePageControls('verify-page', 'block');
     togglePageControls('email-page', ');

 }
 return isVerifyPage;

}

My colleague suggested to use MutationObserver instead of poll every second, but we haven't tried them yet.