Not at all, this is the part I am most hesitant about as well. I could use some help here.

The reason why I am doing all this juggling with class names is for Firefox's password manager to work, the password field must be in the DOM before DOMContentLoaded. The password field cannot be removed and re-added. So, instead of using a dynamically written template, I always have the password field in the DOM and use classes to show/hide various elements.

"requiredEmail" is used if a user is currently authenticated to the "assertion" level, then they chose an email address that is vouched for by the fallback identity provider. At this point, the user must enter in their Persona password. I wasn't quite sure what to call this.

So, isRequiredEmail is shown to users who are following the above path, isNotRequiredEmail is shown to all others.

When the user is viewing the "isRequiredEmail" flow, the "forgot your password?" text is shown above the password input box instead of next to the "sign in" button. Next to the sign in button, a "cancel" button is shown which allows the user to go back to the email picker.

requiredEmail is a bad name. Is there a better name? Is there a better approach? I'd like the intention to be crystal clear before merging, I don't want to remove 900 LOC with the intention of clarifying things only to have them still be super confusing.