On this Craft Cms lesson we review the login & reset syntax and apply it to our own templates.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
All right guys. So for the login template, it's pretty much the same thing. We can copy over the login form that Craft provides. And you'll notice that there's a lot less text and variables. The only difference is now the action input also has a different URL. So it's taking us to log in. So this is the script that is going to take the user and take them inside a session.
We can redirect the user to the homepage, or we could send them to an account profile. So that's like where they can edit their information. Just the same concept here. The username in this instance, we can see here is using the name login name, and this is just me pulling it from over here, which is the actual log in variable that they use. And we could even have a variable where Craft remembers that username, that you've inputted previously from the previous form, but for now just wanted to keep it simple. The password is password, and then also it has like a simple variable to output the errors.
So I've done that over here. You have the, if there's any error messages, please use this to output the errors. And this is just the class we created in Webflow. One thing to note is that I did clean it up a little bit. So notice the login is different. Then the sign up. What I did is I just removed that block so that I kept this a little bit different from that layout.
I use the same exact template the only thing I did was remove the class on the primary wrapper. So if we see here, sign up uses this class called signup box. That's what adds that nice background to it. All right and also you want to make sure you add in those links for signing up. If you want to create an account and forgot a password.
So you can redirect them to a reset template. So again, following the same idea, we're extending the clean layout and for the reset again, this is always important to have the token. The action input is going to send that user to request a password reset. And then we can redirect the user to wherever we want after they've done that.
For the reset password if I open up that layout, it's pretty much the same thing. Just change the title and add it the username or email the user can add in whatever they used to create that. When you click submit what's Craft is going to do is send them a template. One of these templates for when someone forgets their password.
So it's pretty straightforward, guys. I didn't want to take too long on this lesson because I know that we're recycling a lot of the template code. And there's really not much to it. And that's why I love Craft. Now one really cool trick though, is creating routes or redirections. So these routes can be something like, for example, if I wanted to just go to sign up instead of having to write accounts slash sign up, we can create a simple redirect to that entry template. And the way we do that is under settings, then click the routes icon. And over here, you can see some of the ones that I've already created. So any time I want to go to sign up. If URI looks like this, then I want you to load this template.
If the URI looks like this, which is just adding the account, please use this template. And that's it. And finally, what we want to do is now that we have both sign up and login pages ready, if we go over to the movies, we can see that that movie's page is public. And we don't want that. We actually want it so that only users logged in can see this content.
And you guys, this is so easy to do with Craft. All we have to do is add a simple tag called require login. That's it. If I were to open up this page in a incognito window, what it's going to do, it's going to redirect me to the log-in page. And so if we look at the documentation here, the required log-in what it's doing, it's just going to redirect you to a login URL.
And if that doesn't exist or hasn't been rerouted, it's going to just output a 404 error. So it's always good that we have this little routes happening so that whenever a user is trying to log in under a public access, we can redirect them to whichever page we want. All right guys, this is it.
And let's continue over to our custom profile template.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS