Email claim error message on sign up flow

[jonvic1891]

Hi, the flow works great… much better than the MA one. Problem is if a user enters their email address in the signup flow and then hits “go” on the keyboard it pops up an error message to the user which then makes them think something has gone wrong.

I’ve removed my email address from screen shot but there was a valid one in there.

[jonvic1891]

this error also happens when you click enter on keyboard as well

[Tvde1]

Terrible UX, I've created a hacky piece of javascript that hides the continue button, and when the claim is successfully verified, it 'clicks' continue. I wouldn't recommend using this 😬

function applyEmailVerificationAddons(emailTextbox, sendVerificationCodeButton) {
  emailTextbox.on("keydown", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    event.preventDefault();
    sendVerificationCodeButton.click();
  }
  });
}

function applyEmailVerificationConfirmationAddons(emailConfirmCodeTextbox, verifyCodeButton, verificationSuccessTextNode, continueButton) {
  if (emailConfirmCodeTextbox.length == 0) {
    return;
  }

  emailConfirmCodeTextbox.on("keydown", function(event) {
  // Number 13 is the "Enter" key on the keyboard
  if (event.keyCode === 13) {
    event.preventDefault();
    verifyCodeButton.click();
  }
  });

  let observer;

  function observeSuccessTextAppear(mutations) {
    for (let mutation of mutations) {
      if (mutation.attributeName === 'style') {
        if (verificationSuccessTextNode.style.display === 'inline') {
          if (verifyCodeButton.length) {
            let buttonDisplay = verifyCodeButton.css('display');

            if (buttonDisplay === 'none') {
              observer.disconnect();
              continueButton.click();
              continueButton.css('display', '');
            }
          }
        }
      }
    }
  }

  observer = new MutationObserver(observeSuccessTextAppear);

  observer.observe(verificationSuccessTextNode, { attributes: true, attributeFilter: ["style"] });
}

function addPasswordForgetFlowChanges(){
  let emailTextbox = $("#email");
  let sendVerificationBtn = $("#emailVerificationControl_but_send_code");

  let continueBtn = $("#continue");

  let verifyCodeInput = $("#VerificationCode");
  let verifyCodeBtn = $("#emailVerificationControl_but_verify_code");
  let verificationSuccessTextNode = document.getElementById("emailVerificationControl_success_message");

  let newPasswordInput = $("#newPassword");

  if (continueBtn.length < 1) {
    return;
  }

  applyEmailVerificationAddons(emailTextbox, sendVerificationBtn);

  applyEmailVerificationConfirmationAddons(verifyCodeInput, verifyCodeBtn, verificationSuccessTextNode, continueBtn);

  if (newPasswordInput.length === 0) {
    continueBtn.css('display', 'none');
  }
};

addPasswordForgetFlowChanges();

[JasSuri]

What page layout version are you using?

[jonvic1891]

Not sure, how do you tell. It was happening on the demo app as well. Seems like it mistakes a confirmation of the field e.g. I'm done with entering my email address, I now click enter so move me onto the next field with a full submit and obviously the whole claim isn't there at that time.

[JasSuri]

Do you have a link to this "demo flow"?

[jonvic1891]

https://b2clivedemo.b2clogin.com/b2clivedemo.onmicrosoft.com/B2C_1A_Demo_SignUp_SignIn_SplitEmailVerificationAndSignUp/oauth2/v2.0/authorize?client_id=cfaf887b-a9db-4b44-ac47-5efff4e2902c&nonce=defaultNonce&redirect_uri=https%3A%2F%2Fjwt.ms&scope=openid&response_type=id_token&prompt=login

[JasSuri]

Ok, thanks for the feedback, seems like this Continue button should be disabled until the email is verified. Even with latest page layout, the behavior is the same, therefore there is no way to change this behavior currently with the policy file itself. Using your own JS is always a solution when required. I will relay this to our UI/UX team.

[kamilzzz]

This error message is localizable so you can provide your own text, something like: "Before continuing verify your email address"