Section 2 (Lesson 7/8): Now that we’ve finished our comprehensive journey through design, responsiveness, logic, form validation, and workflow setup, this lesson covers how to create a seamless login page in Bubble. Leveraging the work done on the signup page, we'll show you how to efficiently replicate and adapt those elements to construct your login page, thanks to Bubble's flexibility and ease of use.

What you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

In the previous few lessons, we did some fantastic work. We did the design with the responsive design. We did the logic, form validation, and we started to look at workflows. The beautiful thing about Bubble is now we can simply copy and paste this page and just refactor it slightly for the login page. So let's do that.

Let's head over to the Edit option at the top and choose "Clone this page." Now we're going to type "log-in" and Create. There it is. Page log-in. Identical.

Let's bring up the Property Editor for this page, and let's just make sure, first of all, that we change the page title to "Log in." Now, let's adapt a few things. Let's start on the left-hand side. So "Welcome to Workplace," maybe we just say, "Welcome back to Workplace. We're excited to help you find your next career." Fine.

On the right-hand side, instead of "Create an account," let's say, "Welcome back." And again, it's up to you what you want to type here. I suggest following along for now, but when you get to build your app, maybe you just want to say "Log in," maybe you want to say, give them some other message. Entirely up to you.

In the subtitle, we can just say, "Go ahead and log in below." Okay, so we have a bit of a responsive design problem. I'm going to click on Group Container, head over to the Layout tab, and I'm going to uncheck "Fit width to content." With that unchecked, it would want to span the full available space, which is wider than 380, but we set a max width of 380 to prevent that from happening. We can now delete this group, okay, so go ahead and select "Group Buttons," and then on the Property Editor, on the Appearance tab, we can choose delete. We can delete "Input Type your company name" as well. On the Appearance tab, delete. And we can remove this checkbox. Delete.

On the "Sign up" button, we can say "Log in," and we can actually remove these conditions on the Conditionals tab because we don't have the two conditions we're trying to meet, which is the custom state and the checkbox. We can adapt this link at the bottom to say, "Don't have an account? Sign up." And now we can set the destination to the sign-up page.

So something we need here is a way for someone to reset their password. But we need to drop in some text that someone can click to then show a popup. I'm going to choose my text element, and I'm going to drop it between these two inputs, and I'll show you why in a second. For now, just type the words, "Forgot your password?" Then choose Body Small, and then on the Layout tab, just remove the fixed width, the min width, and the min height. Fixed width, min width, min height, and then close it down so it fits width to the text (click "Fit width to content"). And now choose "Next," and that's exactly where we want it positioned. Nice and neat.

Okay, now we need to design our popup! So let's go ahead and choose Popup from the containers. Click it once, and then click it once again on the screen. On the Appearance tab, let's go edit the style of this popup. So the background color is going to be our white primary contrast. I'm fine with the gray-out color with this current selection of 60%, it looks pretty good. It's still a border of solid and then choose our border color, just out of screen. Now, I'll choose a roundness of 12. So you may have noticed that I'm using roundness either 8 for inputs and buttons, and then 12 for elements that are slightly larger, like popups or larger groups. And I'm going to choose to not have outset on this popup. Just a creative choice. Over in the Layout tab, I'm going to choose 24 pixels of padding all the way around.

Let's head back to the Design tab. The Container Layout will be top to bottom, therefore it's a column. We do need some gap spacing. For this, we're going to choose 32. And instead of a fixed width, because it needs to also work on a mobile phone, I'm going to choose a max width. 380, again, another number that you'll see me use often, but no min width. I want it to be able to squeeze down to fit in whatever space it needs to, which would be 375. Let's leave the min height in for now, or if you don't have, add 320, just some space to work within. When we're done, we will remove the min height because "Fit height to content" will determine dynamically how tall this should be.

Let's rename the popup to "Popup Password reset." Let's grab some text. Drop it in. Let's say, "Forgot Password." Let's give this a heading style of Heading 5. Over on the Layout tab, remove the fixed width, remove the min width, and remove the min height. That might already be happening for you. You just need to match what I'm doing in terms of these values not having any values, just being set back to zero. On the Appearance tab, I just want to center-align this text.

Let's grab some more text, drop it beneath. Let's just type a little message here, a little subtitle. So "Type your email below and we'll send you a password reset link." Let's choose Body Small. On the Layout tab, put this in the center. Uncheck fixed width, remove min width, remove min height. And the other thing we need to do is just center-align this text.

So if you wanted to, you could create another style here that is, or you could have two Body Small styles, Body Small L, for Body Small left-aligned, and Body Small C, for Body Small centered. That's entirely up to you. I prefer to keep my style slightly simpler, but if you find yourself using the center design a lot in your app, feel free to set up a new style for that.

Now, I'm going to group these two. Actually, before we group these two, let's actually drop in an X here in the corner. So let's grab a Material icon, just draw a small shape beneath "Forgot password." Type in the word "close," and I'm choosing the second option. For the color, we're going to use this new charcoal color that we set up. I'm going to remove the roundness. And on the Layout tab, I'm going to choose 24 by 24. Now, I'm going to go and set this as a style. I'm going to choose Style Attribute, create a new style, just call this "Default." And then Create.

Now, we need to position this X icon just over here in the corner. Okay, so what I'm going to do first is highlight "Forgot Password," head over to the Layout tab, and check the box to "Fit width to content." That puts it on the left. Now, with this text highlighted, I'm going to hold shift, highlight the X, then right-click and choose "Group elements in" an "Align-to-Parent container." Aha, interesting. We're going to call this "Group Title and icon." We're going to remove the min width, remove the "Fit width to content," and remove min height. Because now, if we got password highlighted, we can put it in the center, which it currently is, and this X, we can move it to the right-hand side, like so.

We do need to group these two together now. So this new group you created, "Group Title and icon," plus the subtitle, right-click, "Group elements in" a "Column container" because they're too far apart. I'm going to call this "Group Header" because it has multiple elements. And now I'm going to apply a gap spacing of 12. Well, let's use 8 rather.

Okay, now we need to get an input in here because we're collecting an email address. So here's the input. I'm going to drop it on the page. Gap spacing does its thing. Let's change the content format to email and make sure that "This input should not be empty" is checked. Perfect. Now we're going to say "Type your email." And then let's just sort out the responsive design. So no fixed width, no min width, and the height will be 44.

Last thing we need to do is the button. So find yourself a button element, drop it beneath the input, and let's say "Send email." Notice how I'm giving instruction in these buttons. On the Layout tab, remove the fixed width and the min width and set the height to 44.

Okay, so we've got some space left over here in this popup, some vertical height, and that's because we have the min height set to 320. Just remove it. Nice and neat.

Let's sort out the workflows now. So first of all, let's just do the right thing and make sure we don't forget about this material close. I know it's not as exciting, but it needs to be done. Okay, so we're going to highlight the X, "Start/Edit workflow," and the first thing I'm going to do is say "Reset inputs." And this is a default workflow step that Bubble will just reset whatever data is in there, whatever email address is in there. It's nice to, when a user reopens a popup later on, just for that to be nice and clean, to be empty. And because it's in the same popup, Bubble knows that that is the input we're talking about. If it had multiple inputs, Bubble would reset them all. Then we're going to hide the popup "Popup Password reset." That's all we need to do.

Now, in terms of changing the password, let's set up the workflow. So we're going to add a workflow. Let's choose "Send password reset email." Bubble is saying, "where do we send this email to?" And it's called "Input Email password reset's value." So this is being sent by Bubble themselves. And you can change this (Subject): "Your password reset request from Workplace."

Now, because we aren't on our own custom domain, this is going to be sent basically from one of Bubble's domains, and that will become clear when a user receives the email. And then you are welcome to change whatever you like here, you can also bring up the Rich Text Editor to write your own message, or you can write straight in this box.

Okay, now Bubble will insert the link at the bottom of this email. We can't see it, but they will do it. And later on, if you do get to the stage If you're going to want to deploy your app, you can also do something that sends a token to your own transactional service provider to then be able to set up your own custom reset workflows because this is just a plain text email. I like mine to be HTML formatted, so I use an external service for that. But we'll keep it simple because we're at the testing phase, we just want to make sure that it works.

So we're going to send the password reset email, and then think, logically, I guarantee that you've changed the password within the last 30 days. Correct me if I'm wrong. But what happens after you send an email reset, whether it's on a page or a popup? Usually, if we get some feedback or if it's in a popup, well, that would close. It wouldn't just remain the same. So we do need to reset inputs and then close the popup. Okay? So we're going to reset inputs. I'm typing "reset" to now filter the options here: "Reset relevant inputs." And for the next step, I'm going to go down to Element Actions, I'm going to choose "Hide" and then select the popup.

Back in the Design tab, on the "Forgot your password?" text, let's add a workflow. So you can see that we can add workflows to anything. Buttons, groups, text elements, images, whatever we like. If you see the "Add workflow" button, we can attach a workflow to it.

I'm going to add a workflow, and this will simply be Element Actions --> Show, and then I'm going to choose my popup. There it is there. Let's see what the design looks like on the frontend. Okay, looking good. So I'm going to type my email. We can see that the button is currently disabled. And it's enabled. Fantastic. What about forgot your password? Let's click that. Beautiful. Button's also disabled. When we type in our email, the button will become enabled. And we can close this popup.

Back in the Design tab, let's just finish off this lesson by looking at the log in workflow. So back on the "Log in" button, let's edit the workflow. Currently, it says "Sign the user up." We're going to delete that. That was copied over from our sign-up page. We're going to choose Account --> Log the user in, and then simply match up the data the Bubble requires. I'm going to filter with email for my input email, the value of that email, and the password: Input password's value.

Now, if we say "Stay logged in," as long as the cookies aren't cleared, Bubble actually keeps them logged in for an entire year. If we say logged in no, "Stay logged in" no, well, then they will remain logged in just for 24 hours, at which point they'll be automatically logged out. I'm going to say "no" to remember an email. If I was going to say "yes" to this option, then I'd make sure that the user knows, and we use a checkbox to set up that logic.

What happens in real life? What happened today when you logged into your email, you logged in somewhere? There was a login page or a login screen. After logging in successfully, it navigated you to another page, didn't it? So we don't have any other pages to navigate to. So we're going to stop here for this lesson and when we get back, we're going to actually look at, or later on, we're going to start building out a Company page, a Candidate page, and even an Admin page. So when it gets to logging in, we're actually sending them to their relevant dashboards or their relevant pages. Okay.

Let's go back to the design one more time, have another look. So "Welcome back to Workplace." Welcome back. Go ahead. Okay, Looking pretty good. Here's our link with our sign-up destination. Let's go to the sign-up page now, just before we finish this lesson, and let's click the link at the bottom of the sign-up page and then choose "Log in."

Now, can you build the sign-up and log-in page on a single page? The answer is yes, you can. I prefer mine to be separated for various reasons, but it's absolutely fine for you to use custom states and custom views to apply the same the same logic so that a user can either sign up or log in and remain on the same page. Again, that's just a creative choice.

Okay, so that's the sign up and log in pages 99% complete. What I would like to do is actually in the next lesson, get someone signed up to test the process, and then get someone to log in to test the process and reset their password. We also need to look at the password reset page for that. I'll see you in the next lesson, which is the last one in the section.