All language subtitles for 017 Logging in Users with Our API - Part 2_Downloadly.ir_en

This is part two of building our login functionality.

The first thing that I want to do in this video

is to conditionally rendering this part of the page.

So what it means is to render

these login and sign up buttons here

in case the user is not logged in,

and in case the user is in fact logged in

well, then render some kind of user menu here

and also a log out button.

That kind of rendering should of course

happen on the back end, so in one of our pug templates.

Now, how will out template actually know

if the user is logged in or not?

Actually, in order to determine that

we will have to create a new middleware function,

and really the only goal of this new middleware function

is going to be if the user is currently logged in or not.

You might think that our protect middleware

also does something similar, and actually, it is similar.

But the difference is that one

only works for protected rods, so that makes sense, right?

But our new middleware function is going to be running

for each and every single request on our rendered website.

Let's now put that in practice right here

in our authController, and since its very similar

to the protect route or actually middleware

I will go ahead and copy this one here

and then just do some modifications.

So let's copy it and paste it here

and this one is going to be called isLoggedIn.

This middleware is really only for rendered pages

so the goal here is not to protect any route

so there will never be an error in this middleware.

Let's actually quickly write that here

only for rendered pages, and there will be no errors.

Our token should come from the cookies

and not from an authorization header

because, of course, for rendered pages

we will not have the token in the header.

So again, for our entire rendered website

the token will always only be sent

using the cookie, and never the authorization header.

That one is only for the api.

And actually it doesn't need to be as complex as this,

we can simply say to execute all the code

that we have here if there is a token.

Or actually, if there is a cookie called jwt basically.

So let's remove all of this and basically put it in here.

I will remove this one and put it at the end.

And then that re-formats it.

Now this token here does not exist,

it is simply request cookies.jwt.

So this here verifies the token.

Then we also need to check if the user still exists,

and so everything from here is going to be

very similar to what we had before with the big exception

that we will not be creating any new errors.

We will simply move on to the next middleware,

but nothing will happen.

Then we also want to check if the user

recently changed their password.

And again, of so, then no error.

Now, here in the end what's going to happen

if all of this here is correct,

so if the token is verified, if the user still exists,

and if they didn't change their password,

well, in that case it means that there is a logged in user.

Put that here.

So there is a logged in user.

What we want to do in this case

is make that user accessible to our templates.

And how can we do that?

Well, that's actually something that we didn't do before

and so this is now a nice place to actually learn that.

We can do response .locals

and then put any variable in there.

And our pug templates will then get access to them.

So if I say a response .locals.user,

then inside of a template there will be

a variable called user.

So again, each and every pug template

will have access to response .locals

and whatever we put there will then be a variable

inside of these templates.

So it's a little bit like passing data into a template

using the render function.

This one we no longer need, because we will put

this current user on response .locals.

And of course, after that the next middleware is called.

And we also need to do that outside of this If,

so in case there is no cookie

then of course the next middleware

will be called right away,

because then of course there's no way

that there actually is a logged in user.

So again, if there is no cookie,

then there is no logged in user.

And so next right away, and we will not put

the current user on response .locals.

But if there is a cookie, well,

then we go through all these verification steps

and in the end if none of them called

the next middleware in the stack well,

then that means there is a logged in user.

And so therefore, we put that user into response .locals,

and like that, we then have access to that user

in our pug templates.

For example, right here in the header

which is actually where that user navigation will be.

So let's actually use that here in a second,

but before we do of course also need

that new middleware that we just created.

And so let's come here to view route,

and as I was saying in the beginning,

we want this middleware to be applied

to every single route that we have here.

So we do that a bit like we did before

with the protect middleware.

So basically putting it here before all the other routes.

And so then it will be put in the middleware stack

for each and every request that comes in.

So router.use, authController.isLoggedIn.

And let's also remove this protect

from the tour detail page

because that doesn't make any sense actually.

So now we're actually ready to use this.

So let's come here to our header and use a conditional.

Now remember how I said before

that the conditionals in pug were not very powerful

and so many times we actually use Java Script.

But for what we want to do now

they are actually good enough.

So all we want to do now is to say if user.

And for that, they work just fine for very simple stuff

simply for testing if a variable does exist or not.

So if there is a user then we want to display this

what we have here, so let's actually put that there.

So I'm copying it here,

commenting out this code

and then here, we say else.

So just like in Java Script we can say if, else.

Then here, I actually don't want my bookings,

but instead I want log out.

I'm not sure why that is there.

So it's log out, and it also has a special class

which I created to make it look special in CSS.

So nav, el, and then with the modifier, logout,

and let's also remove this href attribute from there.

Then here, we want the name of the user,

so user.name, and actually we only want the first name.

So for example, if I created an account

called Jonas Schmedtmann, so like this

then I only want to display the Jonas part here.

So let's split the name using spaces

and then only display the first element

of the resulting array.

Remember that here we can simply use Java Script like this.

Split it by a space, and then only the first element.

Then here of course we also want that picture,

so that's image /users, remember,

I believe at least.

So, here we go, users.

And then whatever comes from our database.

So user .photo,

and then we can also give it a nice alternative text

which is very important for accessibility.

Let's get it right here.

So, let's test this out now,

because I'm actually really curious to see if this works.

So just like before, let me go ahead

and actually delete the cookie here.

I'm not sure what this local storage is doing here now.

Let's remove that as well, and this cookie as well.

So let's move back to login here,

and now I'll have to retype this.

.io test, one, two, three, four.

Let's just go ahead and copy it here,

login, and indeed we are successfully logged in.

So, we get our cookie now, here we go.

But of course our user photo and name

was not immediately displayed up here,

and that is of course because

this can only happen after a reload,

because it is express who renders these pages,

so there kind of needs to be a reload.

So let's actually implement that in a second,

but for now let's see if actually we are now logged in.

So let's go to all tours here,

and now we get this error here.

Try to reload here.

Well, says it can't find it on the server.

What happens if we reload here?

Well, this one works, and you see that actually

our user menu is already here.

So we get our log out button and picture,

and of course my name.

Great.

Now let's try to basically log out

by deleting this cookie.

And in the next video we will actually implement

this exact functionality.

And if we reload now then it is back, great!

So the middleware function that we just created before

is actually doing its job.

Let's just log in as someone else here,

so let's say Laura, all right.

So Laura, and than with the same password

test one two three four, login,

it is okay, reload, and there we go.

So this is working just great.

I'm just worried about this error,

and so before we do anything else

we need to actually fix this one.

And since this error only started

once we started using this new middleware,

let's just make sure, see if it

has something to do with that.

So if we remove this middleware

let's see if this is back to working.

And yeah, it does now.

So that's a bit weird indeed.

Let's take a look if we can find some bug

in this middleware function.

What I see here right away is that we always return

each time that we call next,

but here in the next one we don't.

So that means that in case we enter this block here

the next middleware will be called,

but then again the next middleware

will be called after that.

So we probably need to return this one here as well.

But this we make sure next is only ever called once.

So let's try that, put this one here back on,

give it a save, actually scroll down here.

Yeah, that works now.

So we get our logged in user here as well now,

and so of course if we delete the cookie

basically logging the user out,

reload this now, then we're back to normal.

Next up what we wanted to fix here

is to actually get an alert here,

and also then to reload the page after some time.

Not really reloading actually,

but instead sending it back to the homepage.

So right now here this is gone,

and as I said earlier we only ever see

that user menu when we reload the page.

So that's what we will do now automatically

in our Java Script code here.

So let's get, first of all, rid of this data here.

Logging sensitive data to the console

is never a good idea,

and now let's do what I just said before.

So here we do a request, and of course

I will also show you how we can send data directly

from an htl form into our Note application.

There are two ways.

One way is to send data using

an http request like we did here.

And another one is to simply directly use an html form.

And so that one is very important as well,

and so a bit later in the section I will show you

how to do that one as well.

Anyway, let's now show that alert and reload the page.

Let's only do that in case we are really sure

that our api call was successful.

Let's say response .data,

and so that data is actually the data

that we sent as our day's response,

and so from there we can read .status,

and check if it's equal to success.

So, remember how we always set the status to success,

and now we can actually use that

in order to perform this verification.

So let's use a simple Java Script alert,

alert like this, and say logged in successfully.

Let's get rid of this, and also let's then

after one and a half seconds load the front page.

So basically, the home page.

So, window .setTimeout, then here the callback function,

and so in order to load another page

we say location .assign,

and then we simply go to the home page like this.

And we want to do it after 1500 milliseconds,

so, one and a half seconds.

Then in case we were not successful

we do actually not want to log this,

but instead we want to alert it.

So alert, and again this data here

is actually our data response.

So from here let's read the message property.

That should do the job, let's reload here.

Okay, that's not the right person.

So, instead admin at natours.io,

test one two three four five,

in order to see the error first.

And so you see, incorrect email or password,

and so of course that's because our password was wrong,

so let's get rid of that, login,

and so logged in successfully.

Now let's see what happens.

And it doesn't actually reload automatically,

because before that can happen

we need to close this window.

So once we close it should then do the reload right away.

And so there we go.

We're now at the home page, and again

with our correct user menu rendered here, perfect.

So this part is completed as well,

and now as a last step I want to improve

these alerts that the user gets.

Instead of displaying these built-in Java Script alerts.

Also, we're going to do that Java Script bundling

that I mentioned a couple of times already,

but we're going to leave all of that for the next video

because I don't want to overload each of these all too much.