Password reset: login page workflow with custom states

Creating a Forgotten Password Workflow

In this video, I demonstrate how to create a forgotten password workflow and the UI elements required on an existing login page. We're going to approach this in a way that strives to be really friendly to the user without asking them to re-enter additional bits of information or re-enter previously-entered bits of information such as the email address.

Setting Up the Login Form

We have the login form here, and I'm going to set up a series of workflows that use custom states in order for when this button is clicked to hide password and then use the email address that's already been entered and perhaps also check that that's valid and change the action of this button.

Using Custom States

So let's go into it. I'm going to use the parent group here, I'll just call this container as a place to store my custom state. We'll call it "forgotten password" and then this is going to be a yes/no or a boolean and the default is going to be no. So when the page loads, it won't be activated.

Setting Up the Workflow

Then we set up a workflow of this button, this piece of text, and turn it effectively into a button for the container forgotten password is yes. We want to hide the password field because we want the form to be adapted so that it only has an email field now.

Using Conditional Statements

In here, we say collapse when hidden. We can even animate it and we'll just go for a conditional statement here. So the container password forgotten is yes and then this element is visible, and we leave it unchecked because then it says the element isn't visible if this statement is correct.

Adjusting the Button

We then need to adjust our button here to say it's the same thing when a container forgotten password. One of the reasons I'm using conditional statements here rather than show hide workflows in the workflow editor is one thing is just personal preference, but also I think that it limits the number of steps you need to take.

Implementing the Login Workflow

Now let's work on our workflow. I've not set up the default login one, so let's quickly do that. Login user email address password. And then we'll say only when container forgotten password is no.

Creating the Password Reset Workflow

Then we can duplicate this because we're going to do the invert of it. This time we're going to say when the button is clicked to do a send password reset email and the email is going to be sent to the input email address.

Setting Up Email Integration

If you have set up your own transactional email provider and you're not using the Bubble's built-in provider, you can tick this box and add your own transactional email send action here. For this demonstration, we're just going to have it send the template here and assume that you've got the email integration in the settings domain tab.

Improving User Experience

I'd then suggest that we hide the button. That way they can't keep clicking it over and over again. I think we've incorporated two features here that makes the process easier for users because there are two things that frustrate me with some websites' UI for password reset.

Adding a Confirmation Message

Let's add in a little message. We'll just put that right at the bottom: "Please check your inbox". We'll make it collapse on height and not visible on page load, but we will add it in here element show text.

Conclusion

We cut down the number of steps that the user has to take and we give a clear message of what they should expect having taken the action. They can't keep spamming themselves because we've removed the button, and we've shown the email address that the password reset has been sent to.