‫Over the next couple of lectures
‫we will add the login functionality to our website.
‫And in this lecture,
‫we will start by actually rendering out
‫the login screen to make it easy
‫for users to login.
‫Once more, I actually want this to be a challenge for you
‫so that you can actually practice some of the skills
‫that you've been learning.
‫What I want you to do is to create a
‫slash login route.
‫Then create a controller,
‫and, of course, a template.
‫And that template is really easy.
‫It's just some static html and we don't need
‫to pass any variables into it.
‫There's a template for that, actually,
‫here in the template folder.
‫So that should be, then, really easy for you to complete.
‫So pause this video and come back once you're ready.
‫Okay, welcome back.
‫I hope you completed this challenge successfully.
‫So here is my take on it.
‫Router dot get
‫the route is
‫slash login
‫and then we use controller dot get
‫login form.
‫So that's the route handler that I'm going to create next.
‫Export dot get login form
‫response
‫and here we don't need any more than just the
‫request and response.
‫Actually up here I'm seeing
‫that we're missing the next.
‫Always, when we have async functions wrapped in
‫catchAsync we should always specify next.
‫But here, all we really need to do
‫is to now render a login template.
‫So we didn't create that template just yet.
‫But, it's going to be called login.
‫So, let's say res dot status
‫200,
‫render template called
‫login.
‫Then as with all our other pages,
‫we actually want to give it a custom title.
‫For that we've always passed in an object
‫with the title property.
‫Right?
‫So the base template will then read that title
‫and put it in the title html element.
‫In this case, the title is simply
‫log into your account.
‫And that's it for the route handler.
‫Now let's go 'head,
‫open the login template,
‫select all, ‫copy all,
‫close it and create the new view in here.
‫Call, of course, login dot pug.
‫Then, pasting that code here,
‫and now comes again that trick where we extend
‫our base template.
‫This one extends to base file extend don't forget
‫that in here we need to create a block with the
‫exact same name as we have in the base file.
‫So that is content.
‫And with this we're actually done,
‫I believe.
‫Of course, we need to indent to make it a child
‫off this block.
‫But, that's actually it.
‫Now, just one more thing that we need to do
‫is to actually set a link to the login page
‫so that we can actually access that.
‫Right now, the login and sign up buttons are actually
‫using the button element.
‫But like this, we cannot really specify
‫the href attribute.
‫So let's change them actually to a real link.
‫And in here, we can specify the href.
‫So this one simply points to login.
‫And a second one here,
‫the sign up we will actually not implement
‫so you can implement this on your own
‫if you feel like it.
‫So basically a sign up form.
‫But, since all that,
‫so the whole process of signing up is going to be
‫very similar to logging in,
‫I decided not to include that here in this section
‫because that would just be a lot of duplicate content
‫and I don't want to make the course unnecessary long.
‫Give this a safe,
‫I don't know if this now restarts the server,
‫actually it doesn't,
‫so let's save one of these java script files.
‫Now
‫this is our reference website.
‫Remember, that's what we want,
‫is this one.
‫Let's come to all tours
‫and now let's try our login route.
‫And, indeed, here goes our form.
‫Great.
‫Now here we can put in some email
‫let's say admin
‫dot naders
‫dot io.
‫And you see that it nicely formats
‫this input here whether the email address
‫is actually valid or not.
‫For example, if I don't have the extension here correct,
‫then it will become orange
‫telling me that something is wrong.
‫And the same thing for the password.
‫As long as I have less than eight characters,
‫this will always be red,
‫basically telling me that there's an error.
‫That now that I have eight characters,
‫it turns green.
‫And if you're interested in how to do this
‫kind of magic with css,
‫then please feel free to check out the css file that I coded
‫just for this course.
‫Anyways, of course, clicking this button here now
‫does absolutely anything, right?
‫So in the next video, we will actually really
‫start to implement the login functionality
‫actually by doing a request to our api end point
‫that we already created.