7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Writing the Login Template

We haven't quite set up everything we need to allow our users to log in and out. But before we complete writing all of the routes and functionality of the back end, I thought we would take a little bit of a break from that and let's write the actual HTML page that our user will see when they go to log in to our web application. Now we can see where this will be served if we go to our login.js page here. And let's begin by creating the route for it. So we can use this express router object again, because, remember, eventually this is going to be applied to our application in our server.js file. But we can say router.get and whenever we get the /login page, what are we gonna do? Well, it's pretty simple, we're just going to do response.render. And we're going to render the login template. And so this is the template that we're going to be writing in this lesson. So we know that this template will need to be named login.ejs and we know that it needs to go in the views folder. So let's create that file, views/login.ejs. Now a lot of this is going to be kind of similar to what we have in our index.ejs template. So let me go ahead and open that one up and I'm gonna copy the entire thing and let's paste that right in here. The entire head will be the same. So let's get rid of this script tag in the body. And in here is where things will be a little bit different. And let's start by creating a div with a class of container. This of course is one of the classes that the skeleton library that we're using gives us. And then inside this container we're gonna have a couple of rows. So let's create a div with a class of row, and in here we'll have an h1 and we'll just say Chirper. Let's create another row and the skeleton library is based on a 12 column system. So in here we're gonna have two other divs and they're both gonna have six columns. So we'll give them the class six and the class columns. So one of these six column divs is going to be our login form, and the other one is going to be a sign-up form. So let's do the login form first. Inside our six columns here, we'll have an h2, and we can have the text Log In. And then underneath this we have our form. And in good old-fashioned HTML form style, this will have an action, which will be /login. And it will have a method which will, of course, be post. And in here we want to have three paragraphs. The first paragraph is going to have a label of Username. Because, right after this we're going to have an input tag here. And this input tag will of course have a type of text, and it will have the name username. And let's also give it a class, and this is going to be u-full-width. And the u stands for utility, this is one of the utility classes that skeleton gives us. We want a paragraph very similar to this one underneath it. So I'll just copy and paste it and we'll change the label to Password and of course we'll change the type to be Password as well, and finally we'll change the name to be Password. And that's all we need for that. I'm gonna shorten these into one line, now that we have finished writing them. And then the last paragraph we need is for our button. So, let's add a button in here. And we'll give it the text, Log in. And this button will receive a class of button-primary. Excellent. Now everything we've done here inside of our six columns div is actually gonna be very similar for the second one. So I'm going to go ahead and copy the whole form and the h2 and let's paste it down below. Lets change the text in the h2 to be sign up instead of log in then the form action should change to /signup. Now, we do want username and password, just as we've done here. However, let me duplicate username here because we're going to want a couple of different ones up top. First of course will be their name. And let's actually call this full name. So we need to change the label and we also need to change the name of the input here. So that'll be full name, then let's copy this and let's change this to email and then in parenthesis after this let's just let them know, we'll just say will be used to get your Gravatar. This will have a type of email and a name of email. Now let's see. Full name, email. Username and password, that's good. We don't need anything other than that. And then instead of log in, this button text will be sign up. And you know what, I think that is all we need for our log in page. Now before we close this lesson, we probably want to see this in a browser. So let's go back to login.js, and let's do our exports here. And we'll say exports.routes equals the router, and this way we make our router full of these routes and millware that we're using outside of this login.js file. So now we can go over to server.js here and we can require a login, and then, just underneath our call to express static here, let's add another .use and let's use login.routes. So now, we have our routes as part of our actual express application. So if we come back to the terminal here and let's go ahead and start the server. We have an error, cannot find module cryto. Okay, it looks like if we go back to login.js, that I made a typo here, when we were asking for crypto. Let's try restarting the server again. Everything looks good. So if we go to localhost:3000/login, there you go, we can see our chirper application is showing up just fine. So we have our Log In form over here on the left, with our Username and Password. We have our Sign Up form on the right with our Full Name, Email, Username and Password. If we pop open the JavaScript console, we don't see any errors. So, I think, that means our application is coming along pretty well. So it's nice that we have these forms working here. However, right now, there's nothing behind the scenes. You might remember when we created these forms, we had the Log In form posting to /login and the sign up form posting to /signup. However, we haven't created those post routes yet. So in the next lesson we're going to look at creating those routes and building them into our application.

Back to the top