‫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.