How fields change in Default Login/Sign Up Popup

As a newbie to Bubble, I just spent a frustrating hour trying to figure out how the default Login/Sign Up form works in terms of showing and hiding certain fields and buttons. Finally figured it out so thought to share it for other new users with the same confusion:

You’ll see in the workflows that clicking on the “Switch to Login” and “Switch to Sign up” buttons changes a custom State, called “mode”, of the popup from “signup” to “login” and vice-versa.

The fields and buttons that become visible or no longer visible are all grouped into two groups called “Group Sign up” and “Group Log in”. You can find these groups in the Elements Tree of the UI Builder. If you take a look at the Conditional settings of these groups, you’ll see that the Group is set to visible or not visible, depending on the State of the form.

Hope that helps other newbies!