Password reset: login page workflow with custom states
In this Bubble.io tutorial video we show how to use custom states to create a password reset form which optimises user experience and won't frustrate your users.
Forgot your password? Learn how to create a user-friendly reset workflow without asking for redundant information. Enhance your login process with this tutorial.
Custom states for seamless UX: Discover how to use custom states to adapt your login form dynamically. Master custom states to create intuitive user experiences.
Streamline password resets: Implement a workflow that hides unnecessary fields and provides clear feedback. Learn to optimize your app's user management features.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.