1 00:00:01,750 --> 00:00:05,683 ‫This is part two of building our login functionality. 2 00:00:07,280 --> 00:00:09,600 ‫The first thing that I want to do in this video 3 00:00:09,600 --> 00:00:14,160 ‫is to conditionally rendering this part of the page. 4 00:00:14,160 --> 00:00:16,390 ‫So what it means is to render 5 00:00:16,390 --> 00:00:18,570 ‫these login and sign up buttons here 6 00:00:18,570 --> 00:00:21,010 ‫in case the user is not logged in, 7 00:00:21,010 --> 00:00:23,470 ‫and in case the user is in fact logged in 8 00:00:23,470 --> 00:00:27,450 ‫well, then render some kind of user menu here 9 00:00:27,450 --> 00:00:29,543 ‫and also a log out button. 10 00:00:30,720 --> 00:00:32,650 ‫That kind of rendering should of course 11 00:00:32,650 --> 00:00:36,720 ‫happen on the back end, so in one of our pug templates. 12 00:00:36,720 --> 00:00:39,420 ‫Now, how will out template actually know 13 00:00:39,420 --> 00:00:41,603 ‫if the user is logged in or not? 14 00:00:42,510 --> 00:00:44,600 ‫Actually, in order to determine that 15 00:00:44,600 --> 00:00:47,550 ‫we will have to create a new middleware function, 16 00:00:47,550 --> 00:00:50,970 ‫and really the only goal of this new middleware function 17 00:00:50,970 --> 00:00:54,813 ‫is going to be if the user is currently logged in or not. 18 00:00:55,720 --> 00:00:58,790 ‫You might think that our protect middleware 19 00:00:58,790 --> 00:01:02,080 ‫also does something similar, and actually, it is similar. 20 00:01:02,080 --> 00:01:03,590 ‫But the difference is that one 21 00:01:03,590 --> 00:01:07,720 ‫only works for protected rods, so that makes sense, right? 22 00:01:07,720 --> 00:01:10,370 ‫But our new middleware function is going to be running 23 00:01:10,370 --> 00:01:14,003 ‫for each and every single request on our rendered website. 24 00:01:17,060 --> 00:01:19,710 ‫Let's now put that in practice right here 25 00:01:19,710 --> 00:01:23,170 ‫in our authController, and since its very similar 26 00:01:23,170 --> 00:01:26,430 ‫to the protect route or actually middleware 27 00:01:26,430 --> 00:01:29,450 ‫I will go ahead and copy this one here 28 00:01:29,450 --> 00:01:31,483 ‫and then just do some modifications. 29 00:01:34,250 --> 00:01:37,240 ‫So let's copy it and paste it here 30 00:01:37,240 --> 00:01:39,860 ‫and this one is going to be called isLoggedIn. 31 00:01:43,210 --> 00:01:46,900 ‫This middleware is really only for rendered pages 32 00:01:46,900 --> 00:01:50,510 ‫so the goal here is not to protect any route 33 00:01:50,510 --> 00:01:53,593 ‫so there will never be an error in this middleware. 34 00:01:55,200 --> 00:01:57,370 ‫Let's actually quickly write that here 35 00:01:58,550 --> 00:02:03,550 ‫only for rendered pages, and there will be no errors. 36 00:02:08,360 --> 00:02:11,560 ‫Our token should come from the cookies 37 00:02:11,560 --> 00:02:13,640 ‫and not from an authorization header 38 00:02:13,640 --> 00:02:16,230 ‫because, of course, for rendered pages 39 00:02:16,230 --> 00:02:19,133 ‫we will not have the token in the header. 40 00:02:20,050 --> 00:02:23,220 ‫So again, for our entire rendered website 41 00:02:23,220 --> 00:02:25,800 ‫the token will always only be sent 42 00:02:25,800 --> 00:02:29,000 ‫using the cookie, and never the authorization header. 43 00:02:29,000 --> 00:02:32,143 ‫That one is only for the api. 44 00:02:33,070 --> 00:02:36,320 ‫And actually it doesn't need to be as complex as this, 45 00:02:36,320 --> 00:02:38,790 ‫we can simply say to execute all the code 46 00:02:38,790 --> 00:02:42,030 ‫that we have here if there is a token. 47 00:02:42,030 --> 00:02:46,083 ‫Or actually, if there is a cookie called jwt basically. 48 00:02:49,680 --> 00:02:54,460 ‫So let's remove all of this and basically put it in here. 49 00:02:54,460 --> 00:02:57,303 ‫I will remove this one and put it at the end. 50 00:03:02,780 --> 00:03:04,373 ‫And then that re-formats it. 51 00:03:08,630 --> 00:03:10,900 ‫Now this token here does not exist, 52 00:03:10,900 --> 00:03:13,907 ‫it is simply request cookies.jwt. 53 00:03:20,000 --> 00:03:22,743 ‫So this here verifies the token. 54 00:03:28,060 --> 00:03:31,320 ‫Then we also need to check if the user still exists, 55 00:03:31,320 --> 00:03:33,290 ‫and so everything from here is going to be 56 00:03:33,290 --> 00:03:36,513 ‫very similar to what we had before with the big exception 57 00:03:36,513 --> 00:03:39,533 ‫that we will not be creating any new errors. 58 00:03:41,500 --> 00:03:43,780 ‫We will simply move on to the next middleware, 59 00:03:43,780 --> 00:03:45,123 ‫but nothing will happen. 60 00:03:47,540 --> 00:03:49,530 ‫Then we also want to check if the user 61 00:03:49,530 --> 00:03:51,910 ‫recently changed their password. 62 00:03:51,910 --> 00:03:55,113 ‫And again, of so, then no error. 63 00:03:56,210 --> 00:03:58,410 ‫Now, here in the end what's going to happen 64 00:03:58,410 --> 00:04:00,420 ‫if all of this here is correct, 65 00:04:00,420 --> 00:04:03,920 ‫so if the token is verified, if the user still exists, 66 00:04:03,920 --> 00:04:06,400 ‫and if they didn't change their password, 67 00:04:06,400 --> 00:04:09,673 ‫well, in that case it means that there is a logged in user. 68 00:04:11,800 --> 00:04:12,713 ‫Put that here. 69 00:04:17,810 --> 00:04:20,440 ‫So there is a logged in user. 70 00:04:20,440 --> 00:04:22,130 ‫What we want to do in this case 71 00:04:22,130 --> 00:04:25,320 ‫is make that user accessible to our templates. 72 00:04:25,320 --> 00:04:26,950 ‫And how can we do that? 73 00:04:26,950 --> 00:04:29,960 ‫Well, that's actually something that we didn't do before 74 00:04:29,960 --> 00:04:33,283 ‫and so this is now a nice place to actually learn that. 75 00:04:34,970 --> 00:04:38,340 ‫We can do response .locals 76 00:04:38,340 --> 00:04:40,500 ‫and then put any variable in there. 77 00:04:40,500 --> 00:04:43,650 ‫And our pug templates will then get access to them. 78 00:04:43,650 --> 00:04:46,920 ‫So if I say a response .locals.user, 79 00:04:46,920 --> 00:04:49,000 ‫then inside of a template there will be 80 00:04:49,000 --> 00:04:50,963 ‫a variable called user. 81 00:04:52,320 --> 00:04:55,060 ‫So again, each and every pug template 82 00:04:55,060 --> 00:04:59,410 ‫will have access to response .locals 83 00:04:59,410 --> 00:05:02,060 ‫and whatever we put there will then be a variable 84 00:05:02,060 --> 00:05:04,300 ‫inside of these templates. 85 00:05:04,300 --> 00:05:07,350 ‫So it's a little bit like passing data into a template 86 00:05:07,350 --> 00:05:08,713 ‫using the render function. 87 00:05:11,870 --> 00:05:14,400 ‫This one we no longer need, because we will put 88 00:05:14,400 --> 00:05:17,593 ‫this current user on response .locals. 89 00:05:20,710 --> 00:05:24,450 ‫And of course, after that the next middleware is called. 90 00:05:24,450 --> 00:05:27,833 ‫And we also need to do that outside of this If, 91 00:05:30,930 --> 00:05:32,660 ‫so in case there is no cookie 92 00:05:32,660 --> 00:05:34,180 ‫then of course the next middleware 93 00:05:34,180 --> 00:05:35,900 ‫will be called right away, 94 00:05:35,900 --> 00:05:38,380 ‫because then of course there's no way 95 00:05:38,380 --> 00:05:41,010 ‫that there actually is a logged in user. 96 00:05:41,010 --> 00:05:44,260 ‫So again, if there is no cookie, 97 00:05:44,260 --> 00:05:46,170 ‫then there is no logged in user. 98 00:05:46,170 --> 00:05:49,050 ‫And so next right away, and we will not put 99 00:05:49,050 --> 00:05:52,283 ‫the current user on response .locals. 100 00:05:53,410 --> 00:05:55,240 ‫But if there is a cookie, well, 101 00:05:55,240 --> 00:05:58,180 ‫then we go through all these verification steps 102 00:05:58,180 --> 00:06:00,400 ‫and in the end if none of them called 103 00:06:00,400 --> 00:06:02,530 ‫the next middleware in the stack well, 104 00:06:02,530 --> 00:06:05,620 ‫then that means there is a logged in user. 105 00:06:05,620 --> 00:06:09,510 ‫And so therefore, we put that user into response .locals, 106 00:06:09,510 --> 00:06:12,190 ‫and like that, we then have access to that user 107 00:06:12,190 --> 00:06:13,573 ‫in our pug templates. 108 00:06:15,090 --> 00:06:19,230 ‫For example, right here in the header 109 00:06:19,230 --> 00:06:22,493 ‫which is actually where that user navigation will be. 110 00:06:23,810 --> 00:06:25,990 ‫So let's actually use that here in a second, 111 00:06:25,990 --> 00:06:29,380 ‫but before we do of course also need 112 00:06:29,380 --> 00:06:31,733 ‫that new middleware that we just created. 113 00:06:32,950 --> 00:06:35,563 ‫And so let's come here to view route, 114 00:06:37,320 --> 00:06:39,210 ‫and as I was saying in the beginning, 115 00:06:39,210 --> 00:06:41,240 ‫we want this middleware to be applied 116 00:06:41,240 --> 00:06:43,710 ‫to every single route that we have here. 117 00:06:43,710 --> 00:06:45,840 ‫So we do that a bit like we did before 118 00:06:45,840 --> 00:06:48,210 ‫with the protect middleware. 119 00:06:48,210 --> 00:06:51,330 ‫So basically putting it here before all the other routes. 120 00:06:51,330 --> 00:06:54,020 ‫And so then it will be put in the middleware stack 121 00:06:54,020 --> 00:06:56,403 ‫for each and every request that comes in. 122 00:06:57,820 --> 00:07:02,820 ‫So router.use, authController.isLoggedIn. 123 00:07:07,250 --> 00:07:10,140 ‫And let's also remove this protect 124 00:07:10,140 --> 00:07:12,180 ‫from the tour detail page 125 00:07:12,180 --> 00:07:14,803 ‫because that doesn't make any sense actually. 126 00:07:15,690 --> 00:07:18,433 ‫So now we're actually ready to use this. 127 00:07:19,290 --> 00:07:23,103 ‫So let's come here to our header and use a conditional. 128 00:07:24,420 --> 00:07:25,500 ‫Now remember how I said before 129 00:07:25,500 --> 00:07:29,260 ‫that the conditionals in pug were not very powerful 130 00:07:29,260 --> 00:07:32,570 ‫and so many times we actually use Java Script. 131 00:07:32,570 --> 00:07:34,340 ‫But for what we want to do now 132 00:07:34,340 --> 00:07:36,270 ‫they are actually good enough. 133 00:07:36,270 --> 00:07:40,793 ‫So all we want to do now is to say if user. 134 00:07:42,020 --> 00:07:46,980 ‫And for that, they work just fine for very simple stuff 135 00:07:46,980 --> 00:07:50,063 ‫simply for testing if a variable does exist or not. 136 00:07:52,273 --> 00:07:56,380 ‫So if there is a user then we want to display this 137 00:07:56,380 --> 00:07:59,853 ‫what we have here, so let's actually put that there. 138 00:08:00,940 --> 00:08:02,433 ‫So I'm copying it here, 139 00:08:05,000 --> 00:08:06,410 ‫commenting out this code 140 00:08:09,150 --> 00:08:13,560 ‫and then here, we say else. 141 00:08:13,560 --> 00:08:17,670 ‫So just like in Java Script we can say if, else. 142 00:08:17,670 --> 00:08:20,300 ‫Then here, I actually don't want my bookings, 143 00:08:20,300 --> 00:08:22,580 ‫but instead I want log out. 144 00:08:22,580 --> 00:08:24,173 ‫I'm not sure why that is there. 145 00:08:25,490 --> 00:08:29,000 ‫So it's log out, and it also has a special class 146 00:08:29,980 --> 00:08:33,313 ‫which I created to make it look special in CSS. 147 00:08:34,180 --> 00:08:39,180 ‫So nav, el, and then with the modifier, logout, 148 00:08:40,860 --> 00:08:44,713 ‫and let's also remove this href attribute from there. 149 00:08:47,270 --> 00:08:49,743 ‫Then here, we want the name of the user, 150 00:08:53,010 --> 00:08:57,040 ‫so user.name, and actually we only want the first name. 151 00:08:57,040 --> 00:08:59,990 ‫So for example, if I created an account 152 00:08:59,990 --> 00:09:04,650 ‫called Jonas Schmedtmann, so like this 153 00:09:04,650 --> 00:09:07,293 ‫then I only want to display the Jonas part here. 154 00:09:08,530 --> 00:09:11,810 ‫So let's split the name using spaces 155 00:09:11,810 --> 00:09:14,030 ‫and then only display the first element 156 00:09:14,030 --> 00:09:15,623 ‫of the resulting array. 157 00:09:18,330 --> 00:09:21,280 ‫Remember that here we can simply use Java Script like this. 158 00:09:22,610 --> 00:09:26,513 ‫Split it by a space, and then only the first element. 159 00:09:28,330 --> 00:09:31,593 ‫Then here of course we also want that picture, 160 00:09:33,430 --> 00:09:37,300 ‫so that's image /users, remember, 161 00:09:37,300 --> 00:09:38,313 ‫I believe at least. 162 00:09:41,930 --> 00:09:43,377 ‫So, here we go, users. 163 00:09:46,660 --> 00:09:49,683 ‫And then whatever comes from our database. 164 00:09:53,220 --> 00:09:56,747 ‫So user .photo, 165 00:09:56,747 --> 00:10:00,880 ‫and then we can also give it a nice alternative text 166 00:10:00,880 --> 00:10:03,737 ‫which is very important for accessibility. 167 00:10:03,737 --> 00:10:05,723 ‫Let's get it right here. 168 00:10:12,070 --> 00:10:14,040 ‫So, let's test this out now, 169 00:10:14,040 --> 00:10:18,113 ‫because I'm actually really curious to see if this works. 170 00:10:19,780 --> 00:10:22,180 ‫So just like before, let me go ahead 171 00:10:22,180 --> 00:10:24,393 ‫and actually delete the cookie here. 172 00:10:25,610 --> 00:10:28,900 ‫I'm not sure what this local storage is doing here now. 173 00:10:28,900 --> 00:10:33,163 ‫Let's remove that as well, and this cookie as well. 174 00:10:35,030 --> 00:10:38,460 ‫So let's move back to login here, 175 00:10:38,460 --> 00:10:40,903 ‫and now I'll have to retype this. 176 00:10:44,217 --> 00:10:48,260 ‫.io test, one, two, three, four. 177 00:10:48,260 --> 00:10:50,940 ‫Let's just go ahead and copy it here, 178 00:10:50,940 --> 00:10:55,420 ‫login, and indeed we are successfully logged in. 179 00:10:55,420 --> 00:10:59,040 ‫So, we get our cookie now, here we go. 180 00:10:59,040 --> 00:11:01,820 ‫But of course our user photo and name 181 00:11:01,820 --> 00:11:04,470 ‫was not immediately displayed up here, 182 00:11:04,470 --> 00:11:06,210 ‫and that is of course because 183 00:11:06,210 --> 00:11:08,450 ‫this can only happen after a reload, 184 00:11:08,450 --> 00:11:11,470 ‫because it is express who renders these pages, 185 00:11:11,470 --> 00:11:13,443 ‫so there kind of needs to be a reload. 186 00:11:15,120 --> 00:11:17,460 ‫So let's actually implement that in a second, 187 00:11:17,460 --> 00:11:22,160 ‫but for now let's see if actually we are now logged in. 188 00:11:22,160 --> 00:11:25,400 ‫So let's go to all tours here, 189 00:11:25,400 --> 00:11:28,180 ‫and now we get this error here. 190 00:11:28,180 --> 00:11:29,373 ‫Try to reload here. 191 00:11:30,490 --> 00:11:33,630 ‫Well, says it can't find it on the server. 192 00:11:33,630 --> 00:11:35,633 ‫What happens if we reload here? 193 00:11:37,400 --> 00:11:39,936 ‫Well, this one works, and you see that actually 194 00:11:39,936 --> 00:11:42,910 ‫our user menu is already here. 195 00:11:42,910 --> 00:11:46,220 ‫So we get our log out button and picture, 196 00:11:46,220 --> 00:11:48,490 ‫and of course my name. 197 00:11:48,490 --> 00:11:49,870 ‫Great. 198 00:11:49,870 --> 00:11:51,890 ‫Now let's try to basically log out 199 00:11:51,890 --> 00:11:53,670 ‫by deleting this cookie. 200 00:11:53,670 --> 00:11:55,900 ‫And in the next video we will actually implement 201 00:11:55,900 --> 00:11:57,433 ‫this exact functionality. 202 00:11:59,530 --> 00:12:03,160 ‫And if we reload now then it is back, great! 203 00:12:03,160 --> 00:12:05,840 ‫So the middleware function that we just created before 204 00:12:05,840 --> 00:12:07,663 ‫is actually doing its job. 205 00:12:08,500 --> 00:12:12,440 ‫Let's just log in as someone else here, 206 00:12:12,440 --> 00:12:15,713 ‫so let's say Laura, all right. 207 00:12:17,870 --> 00:12:20,930 ‫So Laura, and than with the same password 208 00:12:20,930 --> 00:12:25,190 ‫test one two three four, login, 209 00:12:25,190 --> 00:12:29,690 ‫it is okay, reload, and there we go. 210 00:12:29,690 --> 00:12:31,680 ‫So this is working just great. 211 00:12:31,680 --> 00:12:33,900 ‫I'm just worried about this error, 212 00:12:33,900 --> 00:12:35,580 ‫and so before we do anything else 213 00:12:35,580 --> 00:12:37,890 ‫we need to actually fix this one. 214 00:12:37,890 --> 00:12:40,000 ‫And since this error only started 215 00:12:40,000 --> 00:12:43,060 ‫once we started using this new middleware, 216 00:12:43,060 --> 00:12:45,520 ‫let's just make sure, see if it 217 00:12:45,520 --> 00:12:47,020 ‫has something to do with that. 218 00:12:48,110 --> 00:12:50,530 ‫So if we remove this middleware 219 00:12:50,530 --> 00:12:52,853 ‫let's see if this is back to working. 220 00:12:54,860 --> 00:12:56,570 ‫And yeah, it does now. 221 00:12:56,570 --> 00:12:58,253 ‫So that's a bit weird indeed. 222 00:12:59,218 --> 00:13:02,790 ‫Let's take a look if we can find some bug 223 00:13:02,790 --> 00:13:05,023 ‫in this middleware function. 224 00:13:09,560 --> 00:13:13,890 ‫What I see here right away is that we always return 225 00:13:13,890 --> 00:13:15,760 ‫each time that we call next, 226 00:13:15,760 --> 00:13:18,360 ‫but here in the next one we don't. 227 00:13:18,360 --> 00:13:22,540 ‫So that means that in case we enter this block here 228 00:13:22,540 --> 00:13:24,490 ‫the next middleware will be called, 229 00:13:24,490 --> 00:13:27,060 ‫but then again the next middleware 230 00:13:27,060 --> 00:13:28,633 ‫will be called after that. 231 00:13:30,630 --> 00:13:34,823 ‫So we probably need to return this one here as well. 232 00:13:36,040 --> 00:13:40,223 ‫But this we make sure next is only ever called once. 233 00:13:41,670 --> 00:13:45,430 ‫So let's try that, put this one here back on, 234 00:13:45,430 --> 00:13:48,713 ‫give it a save, actually scroll down here. 235 00:13:53,460 --> 00:13:54,510 ‫Yeah, that works now. 236 00:13:55,840 --> 00:13:59,490 ‫So we get our logged in user here as well now, 237 00:13:59,490 --> 00:14:03,610 ‫and so of course if we delete the cookie 238 00:14:03,610 --> 00:14:05,330 ‫basically logging the user out, 239 00:14:05,330 --> 00:14:09,283 ‫reload this now, then we're back to normal. 240 00:14:12,366 --> 00:14:14,430 ‫Next up what we wanted to fix here 241 00:14:14,430 --> 00:14:16,930 ‫is to actually get an alert here, 242 00:14:16,930 --> 00:14:20,133 ‫and also then to reload the page after some time. 243 00:14:21,620 --> 00:14:23,400 ‫Not really reloading actually, 244 00:14:23,400 --> 00:14:26,343 ‫but instead sending it back to the homepage. 245 00:14:28,570 --> 00:14:30,410 ‫So right now here this is gone, 246 00:14:30,410 --> 00:14:33,330 ‫and as I said earlier we only ever see 247 00:14:33,330 --> 00:14:36,230 ‫that user menu when we reload the page. 248 00:14:36,230 --> 00:14:38,800 ‫So that's what we will do now automatically 249 00:14:38,800 --> 00:14:40,293 ‫in our Java Script code here. 250 00:14:41,882 --> 00:14:45,280 ‫So let's get, first of all, rid of this data here. 251 00:14:46,350 --> 00:14:48,340 ‫Logging sensitive data to the console 252 00:14:48,340 --> 00:14:50,140 ‫is never a good idea, 253 00:14:50,140 --> 00:14:53,403 ‫and now let's do what I just said before. 254 00:14:54,250 --> 00:14:58,220 ‫So here we do a request, and of course 255 00:14:58,220 --> 00:15:01,220 ‫I will also show you how we can send data directly 256 00:15:01,220 --> 00:15:04,503 ‫from an htl form into our Note application. 257 00:15:06,430 --> 00:15:07,410 ‫There are two ways. 258 00:15:07,410 --> 00:15:09,260 ‫One way is to send data using 259 00:15:09,260 --> 00:15:11,750 ‫an http request like we did here. 260 00:15:11,750 --> 00:15:15,940 ‫And another one is to simply directly use an html form. 261 00:15:15,940 --> 00:15:17,960 ‫And so that one is very important as well, 262 00:15:17,960 --> 00:15:21,130 ‫and so a bit later in the section I will show you 263 00:15:21,130 --> 00:15:23,090 ‫how to do that one as well. 264 00:15:23,090 --> 00:15:27,200 ‫Anyway, let's now show that alert and reload the page. 265 00:15:27,200 --> 00:15:30,320 ‫Let's only do that in case we are really sure 266 00:15:30,320 --> 00:15:32,870 ‫that our api call was successful. 267 00:15:32,870 --> 00:15:36,290 ‫Let's say response .data, 268 00:15:36,290 --> 00:15:38,600 ‫and so that data is actually the data 269 00:15:38,600 --> 00:15:41,220 ‫that we sent as our day's response, 270 00:15:41,220 --> 00:15:44,693 ‫and so from there we can read .status, 271 00:15:44,693 --> 00:15:47,483 ‫and check if it's equal to success. 272 00:15:50,439 --> 00:15:53,920 ‫So, remember how we always set the status to success, 273 00:15:53,920 --> 00:15:55,900 ‫and now we can actually use that 274 00:15:55,900 --> 00:15:58,093 ‫in order to perform this verification. 275 00:15:59,038 --> 00:16:02,147 ‫So let's use a simple Java Script alert, 276 00:16:02,147 --> 00:16:07,147 ‫alert like this, and say logged in successfully. 277 00:16:14,120 --> 00:16:17,950 ‫Let's get rid of this, and also let's then 278 00:16:17,950 --> 00:16:21,330 ‫after one and a half seconds load the front page. 279 00:16:21,330 --> 00:16:22,730 ‫So basically, the home page. 280 00:16:23,640 --> 00:16:28,640 ‫So, window .setTimeout, then here the callback function, 281 00:16:31,100 --> 00:16:33,400 ‫and so in order to load another page 282 00:16:33,400 --> 00:16:36,633 ‫we say location .assign, 283 00:16:37,700 --> 00:16:41,563 ‫and then we simply go to the home page like this. 284 00:16:43,690 --> 00:16:47,120 ‫And we want to do it after 1500 milliseconds, 285 00:16:47,120 --> 00:16:49,023 ‫so, one and a half seconds. 286 00:16:49,990 --> 00:16:52,780 ‫Then in case we were not successful 287 00:16:52,780 --> 00:16:55,950 ‫we do actually not want to log this, 288 00:16:55,950 --> 00:16:57,553 ‫but instead we want to alert it. 289 00:16:59,600 --> 00:17:02,350 ‫So alert, and again this data here 290 00:17:02,350 --> 00:17:04,533 ‫is actually our data response. 291 00:17:05,793 --> 00:17:08,403 ‫So from here let's read the message property. 292 00:17:14,680 --> 00:17:17,313 ‫That should do the job, let's reload here. 293 00:17:19,930 --> 00:17:21,853 ‫Okay, that's not the right person. 294 00:17:22,830 --> 00:17:27,413 ‫So, instead admin at natours.io, 295 00:17:29,230 --> 00:17:31,770 ‫test one two three four five, 296 00:17:31,770 --> 00:17:34,270 ‫in order to see the error first. 297 00:17:34,270 --> 00:17:37,490 ‫And so you see, incorrect email or password, 298 00:17:37,490 --> 00:17:40,783 ‫and so of course that's because our password was wrong, 299 00:17:41,960 --> 00:17:44,750 ‫so let's get rid of that, login, 300 00:17:44,750 --> 00:17:46,630 ‫and so logged in successfully. 301 00:17:46,630 --> 00:17:48,710 ‫Now let's see what happens. 302 00:17:48,710 --> 00:17:51,310 ‫And it doesn't actually reload automatically, 303 00:17:51,310 --> 00:17:52,970 ‫because before that can happen 304 00:17:52,970 --> 00:17:54,700 ‫we need to close this window. 305 00:17:54,700 --> 00:17:57,963 ‫So once we close it should then do the reload right away. 306 00:18:00,690 --> 00:18:01,973 ‫And so there we go. 307 00:18:02,950 --> 00:18:05,810 ‫We're now at the home page, and again 308 00:18:05,810 --> 00:18:10,213 ‫with our correct user menu rendered here, perfect. 309 00:18:11,990 --> 00:18:14,530 ‫So this part is completed as well, 310 00:18:14,530 --> 00:18:17,020 ‫and now as a last step I want to improve 311 00:18:17,020 --> 00:18:19,060 ‫these alerts that the user gets. 312 00:18:19,060 --> 00:18:22,333 ‫Instead of displaying these built-in Java Script alerts. 313 00:18:23,230 --> 00:18:26,050 ‫Also, we're going to do that Java Script bundling 314 00:18:26,050 --> 00:18:28,490 ‫that I mentioned a couple of times already, 315 00:18:28,490 --> 00:18:31,320 ‫but we're going to leave all of that for the next video 316 00:18:31,320 --> 00:18:34,490 ‫because I don't want to overload each of these all too much.