All language subtitles for 015 Building the Login Screen_Downloadly.ir_en

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.