So in a previous episode, I told you that our front-end form isn't perfect just yet because everyone could add actors right here. And we of course don't want that because we want, let's just say, only registered and logged in users to be able to add something to our site. We don't want everybody just adding stuff to our site.
So in this episode, we are going to take a look at the users plugin and we are going to protect this form so that only registered and logged in users can access this form and enter data into our database.
Installing & Configuring the Users Plugin
First of all, I just installed the users plugin. So we go to settings, updates, and plugins, and install plugins. Of course, you could make a users plugin yourself if you need something very specific, but October actually already has the users plugin. It does come out of the box with October, but it is made by the same guys that made October, so it works very well with October. So we just write user, and as you can see, you got this user, front end user management.
And now as you can see, we have this menu option right here, Users, where we will list all of our users once they're registered. And also if you go to settings, you have some user settings right here. So this plugin comes with a few options. So you have this sign in, so you can throw two attempts. You can choose the login attribute, is it going to be email or username. For the registration, you can allow user registration or disallow it. You also have this activation option, so the user might... you may want to make the users activate their account via email, or you can choose that only administrators can activate the accounts. And also you got these notifications where you can customize your email templates. So you can customize mail templates by selecting Mail Templates from the settings menu. Okay, so we are going to leave everything as it is. The registration is going to be automatic. We are not going to be sending any emails, but you can change these options as you see fit. So I'm just going to save this, although I didn't have to. And now we have our users plugin set up.
Enabling Sessions for User Management
It's a good idea when installing a new plugin to check if that plugin has some documentation. And as you can see right here, the user plugin actually has some documentation and it also gives you some functions that you can use in your templates. We are going to be using those functions today. Now, important thing here is that you understand that you can work with users only if you have sessions enabled. So if we go to our site and go to CMS, and let's say we just click on this page, if we go right here to components and now we have user components, you have three of them. So you have user management form, account, you have reset password component, and then you have this session component. So on any page that you put the session component, there the user plugin will actually work.
For example, if you want to check logged in users, so to check if the user is logged in on some page, you would have to put that session component on that page like this. And now if you click on this, you can allow users all, all just users or just guests. So this is all well and good and if we save this, now the session is going to be working on the add actors page. But this is not exactly what we want. We can check out that page right here. So if we go to themes, olympos, pages, and add actors, as you can see we have this [session] security = "all". So we are going to allow all of the users to use this page. But this is not very good practice because in most cases you don't want the session to be available on only one page, you know, or only a few pages. You want the session to be all available everywhere. So to do that, I can just copy this out and then we go to our layouts and go to our default layout. And then below the description, we are going to put the session. So since this is loaded on every page, now we have session available to us on all of the pages. And if you want to override it, then you can go to something like add actors and change this security right here, which we are going to do a little bit later.
Creating Login and Registration Pages
Okay, so now we got our session set up. Next thing I want to do, I want to create our login forms, registration forms, and let's just create a user and see how we can protect this page so it would be available to only a registered and logged in user. So first of all, let's create our login page. It's going to use the default layout. And now we can go to components and add this user management form. If we fork that code, we can see some interesting things right here. So it says if user is not logged in, then display this sign-in form and register form. Else, so if the user is logged in, check the activation, display the update form, so the form like my profile form where the user can change its full name, email address, password, and so on. And also display the activation link, so if the user wants to deactivate his account or her account, then he can use that activation link.
Now, save this. Go to October, Login. Now as you can see on this page, we have the sign-in form and register form. All of this other stuff is not displaying right now because the user is currently not registered or logged in into our site. So we can create a new user, Joe at example.com. And now we register our user. And as you can see, the user is registered and it puts him directly on this page. So we are still on the login page but the component is currently showing the profile page. So when I explained this to you, so now the user is logged in, so display this activation check and then the update form. So this is the update form for our user, and the deactivate link. So we have this deactivation account, so you can deactivate your account if you want. You can change the password, you can change your full name. And that's it.
Building Dynamic Login/Logout Navigation
So now we have this settled, let's just see how would we sign out our user. So let's go to our theme. So olympos, partials, header. In the header, we have our link. So our main menu right here. So we all only have home and movies. Let's just create a few more links. So first of all, I'm going to create a login link. Then I'm going to create add actors link, add actors. And now we want to create our sign out link. So how do we do that? Well, if you check out the documentation, you have this link right here. So signing out, the session component allows the users to sign out of their session. So we are just going to copy this, paste it right here. And now we have onLogout data request, and you have this redirect option that you can set up. So I'm going to tell it to redirect to the home page. So when someone clicks sign-out, it's going to redirect them to the home page.
If we save this, go to our page, now we have add actors, log in and sign out. Now, if I click sign out, I get logged out of this, well our website or our application. So as you can see, we have this login link right here, but we are not logged in and we have this sign out link. So what to do with that? We don't want to have a sign out link if we are not actually signed in. So to do that, you can check out the documentation again. And as you can see, you have this function if user. So this means if user is logged in, then do something, else do something else. So we can just say if user is logged in, then display the sign out link. Okay, so now we save this. If we refresh the page actually, this page, now we should have the sign out link because we are not logged in. Okay, now we log in, we sign in, and now we are on our profile page and you have this sign out link right here.
Okay, now we don't want this to be login because we are already logged in, so we can rename that. So if the user is logged in, then that page wouldn't be called log in, but it would be called something like my profile. So what I said right here, so if the user is not logged in, then display login, else display my profile. So let's just check this out. So as you can see now this page is called, actually this link is called my profile.
Customizing User Component Partials
One thing I forgot to mention. If we go to our login page, so we have this account. The account has a few options. So it has this redirect to option, which is going to redirect the user to the page when the user logs in or registers. So you can set this to be something else, not the profile page. So right now it's not redirecting anywhere, so it stays on the login page, and the login page displays the profile page. Okay? So but if you want it, you can redirect it to the home page, to the genres page, contact page, whatever you want. So keep that in mind. I'm just going to leave it as it is.
Also one more thing I want to mention. So you can split this code onto different pages. For example if you wanted to have a different register page that is not the login page, you would just create a register page and then copy this and put it on that page. Of course, you would also have to put if not user, so if the user is not logged in, then display the register form. Also, you can create a profile form if you wanted, and you can take this code and just put that code on the profile page that you created.
Also one more thing. So as you can see, these are the partials that are coming from the user plugin. You can change those partials as you like. So if you go to plugins, so plugins, rainlab, user, components, account... in the account folder, you have all of those partials. So you have this activation check. So this is that partial. Then you have the update. So this is the update form. If you want to change it, you can change it, but not here. You would copy this code and put it on your page. So don't change anything in the actual plugin because once the plugin is updated, all of this code would be changed to its default values. So you would have to copy this code and put it on your profile page for example, if you wanted to change this HTML output. And also what do we have else? So we have the deactivate link, so this is it, and you can change that code also if you need to.
Securing Pages for Logged-In Users
Okay, now that we got that settled, let's protect our add actors page. So there are two ways that we can protect add actors page or for that matter, any other page. So the first way would be if we just go to add actors and we have this active form component right here. So we can just do... so what I said right here, display this component if the user is logged in, else display this message: 'sorry you have to be logged in'. So this is the first way that you would do that. If we save it, go to our site. As you can see, I'm currently logged in, so I'm going to sign out. And if I go to add actors, now we just get 'sorry you have to be logged in'. Of course, if I log in and sign in to our website, now if I go to add actors, I get the form.
Okay, so this is the first way. You can do it like this if you want, but for me, the better way would just be doing this. So I'm just going to delete all of this right, save it. You can go right here and go to add actors. And as you can see, I have the session right here. So I'm just going to set that session to allow only users. And you have this redirect to... So if someone comes to that page and is not logged in, then redirect that user somewhere else. So for me, at least, it would be logical to redirect the user to the login form. So I'm just going to redirect it to login. And that's it. We save this. Let's just check this out. So if I go to add actors, I can access this page. But if I sign out and click add actors, it will automatically redirect me to the login page where I can log in. And as you can see, October already knows on which page you want to go. So I logged in and automatically it redirected me to the add actors page because that's the page that I want to be on.
Conclusion & Final Thoughts
So this is the way that you would use the user plugin. You also have user plus plugin, which just adds some more fields to to your users. So you can install that for yourselves if you want. Remember, everything we did here will be available for you on GitHub. The link will be in the description below. If you like this video, please give it a thumbs up. If you like the channel and the content I put out, please subscribe to my channel. If you want to ask me questions, you can do that on Twitter or on Facebook or in the comments below this video. Thank you guys for watching this episode and I will see you in the next one.
