WEBVTT 00:02.070 --> 00:07.890 So we made a bit of progress with the log in functionality, and now I want to make a few changes to 00:07.890 --> 00:10.040 what happens after user logs in. 00:10.620 --> 00:13.560 So the first thing I want to take care of is this logging link. 00:13.680 --> 00:19.250 Once I'm logged in, that should say log out and I should actually log me out in the same way. 00:19.260 --> 00:23.640 I don't think everyone should have access to this menu item, virtual terminal. 00:23.940 --> 00:25.860 So let's started making some of those changes. 00:26.070 --> 00:33.780 So I'm going to go back to my idea and I'm going to, first of all, go to base layout, go HTML. 00:33.780 --> 00:39.420 And I'm going there because I want the functionality I'm about to write to appear on every page of the 00:39.420 --> 00:39.760 site. 00:40.260 --> 00:45.380 So down here at the bottom, just before this block, Gispert, I'm going to put it in another script 00:45.690 --> 00:46.630 just before this. 00:46.650 --> 00:50.780 So what's in between these two tags is available on every page of the site. 00:51.480 --> 00:58.770 And the first thing I'm going to do is I'm going to get a reference to that log in link right here and 00:58.770 --> 01:00.410 also to the virtual terminal. 01:00.420 --> 01:04.050 So I'll give the elai for the virtual terminal, which is on the line. 01:04.050 --> 01:05.160 Twenty nine in my code. 01:05.160 --> 01:07.740 And this is the draw or the menu at the top of the screen. 01:08.250 --> 01:10.860 I'm going to give this an ID and I'll call it VTE Dash. 01:13.080 --> 01:20.160 And in the same way, I'll come down to the log in its ally and I'll give it the idea of log in Daschle. 01:21.120 --> 01:25.020 So now I have an ID, which means I have a means of getting a reference to both of those. 01:26.690 --> 01:32.190 So back there, these new these two new scripts tags I just put in, I'll get a reference to the log 01:32.190 --> 01:39.660 and log in length equal document element by ID and I called it logging link. 01:40.950 --> 01:45.960 Then I'll duplicate that and do the same thing for the virtual terminal and I'll call that Betty Link 01:47.700 --> 01:48.800 VTE Daschle. 01:49.860 --> 01:55.350 So now that I have those references, I'll just write a standard eventless for when the DOM content 01:55.350 --> 01:57.180 has been loaded and do something with those. 01:57.540 --> 02:00.930 So document not add event listener 02:03.840 --> 02:06.690 and the condition is dom content loaded. 02:06.790 --> 02:10.050 In other words, the page is loaded, will execute this function. 02:12.850 --> 02:17.830 And I what I'm going to do in here is check local storage and see if there's an entry in there for the 02:17.830 --> 02:25.930 current site named if local storage, the get item and token. 02:28.290 --> 02:34.170 If that's not exactly equal to null, then there's an entry in there now, that token might have expired, 02:34.170 --> 02:36.090 but we're not going to worry about that right now. 02:38.610 --> 02:39.150 Else, 02:42.830 --> 02:48.680 so in the first case, we have a token so that user might be logged in, they probably are. 02:48.680 --> 02:53.560 As a matter of fact, they have we they have a token in their local storage and there's an expiry there. 02:53.600 --> 02:59.230 And I'm going to do right now is just test for the existence of that token so that local storage does 02:59.240 --> 03:00.020 get item. 03:00.290 --> 03:05.900 If it can't find an item in local storage for the current site named Tolkan, it will return null. 03:06.800 --> 03:11.780 So I'm going to assume for the moment that we actually have a logged in user. 03:11.810 --> 03:14.480 So I'll display for the log link. 03:15.110 --> 03:19.460 I'm going to change its content, enter HTML. 03:20.660 --> 03:25.790 I'm going to make that equal to and I'll put it in single quotes because I'm going to copy and paste 03:25.790 --> 03:26.270 it in a moment. 03:26.780 --> 03:30.230 I will copy all of this. 03:31.680 --> 03:40.380 And paste that in here, and that will change whatever is up there right now to log in, OK, otherwise 03:41.190 --> 03:42.000 log EnLink 03:45.330 --> 03:48.240 HTML is going to be equal to the same thing. 03:48.760 --> 03:54.690 OK, now we obviously don't want users who are logged in to see log in, so let's change that to log 03:54.690 --> 04:04.110 in and let's get rid of the link here to log in and just make that hash back so nothing happens when 04:04.110 --> 04:04.730 you click on it. 04:05.280 --> 04:07.530 And I'm also going to put an unclick handler here. 04:07.650 --> 04:12.980 Unclick will be equal to log a function that doesn't exist yet. 04:13.160 --> 04:13.990 We're about to read it. 04:15.270 --> 04:22.830 The only other thing I want to do here is initially I'm going to make both the logging link and the 04:23.250 --> 04:24.580 virtual terminal link. 04:24.750 --> 04:29.070 I'm going to make those hidden by giving the class details onto that. 04:29.400 --> 04:37.500 And in fact, I'm going to move virtual terminal from where it is to be after this one just so there's 04:37.500 --> 04:39.510 no screen jump when things take place. 04:39.540 --> 04:42.270 So that will initially be hidden in the same way. 04:42.270 --> 04:45.300 I want the login link to be hidden as well. 04:45.310 --> 04:46.650 So we'll give it the class of. 04:49.700 --> 04:56.000 And down here, after I make this determination as to whether or not a user is logged in at that point, 04:56.330 --> 05:02.630 I can simply say logging class list. 05:04.810 --> 05:12.760 Don't remove and I'm going to remove DNA to hide it, in other words, and then the same thing here, 05:12.760 --> 05:25.060 if someone is logged in, I'm going to go to Vrchlický class list, not remove DNA. 05:26.570 --> 05:35.110 OK, now, after this event, listener, let's write that function log out that we referred to back 05:35.110 --> 05:36.360 on line seventy one. 05:36.370 --> 05:38.380 So function log. 05:44.710 --> 05:49.000 And all I have to do here is get rid of those items from local storage and redirect you somewhere. 05:49.010 --> 05:52.450 So I'll say local storage, the remove item. 05:55.160 --> 06:02.420 And I'm going to remove token and duplicate that and remove the token expiry as well, 06:06.350 --> 06:13.280 and then I'll redirect them back to the login screen location that is going to be equal to slash login. 06:15.690 --> 06:19.090 OK, so let's give this a try and see how it works. 06:19.100 --> 06:21.440 So I'll stop my application, make stop. 06:22.340 --> 06:23.560 I'll start my application. 06:23.580 --> 06:24.140 Make start. 06:28.360 --> 06:29.470 Everything seems to be running. 06:29.530 --> 06:31.890 Let's go back to our Web browser and see what we got wrong. 06:33.070 --> 06:34.200 So I go to the home page. 06:34.710 --> 06:40.300 OK, virtual terminal is hidden and it says log in, because apparently I don't have anything in local 06:40.300 --> 06:42.020 storage that's named token. 06:42.790 --> 06:43.530 So let's log in. 06:44.320 --> 06:49.370 I will login as that mean example, dot com and password. 06:49.900 --> 06:55.270 Now, when I log in here, this should stay log because although we're changing local storage and all 06:55.450 --> 07:00.400 that sort of thing, we're not actually going to fire that dumb content loaded. 07:00.410 --> 07:04.750 That's now part of our base template because we don't do a redirect here. 07:04.960 --> 07:07.000 At least we can check this and then go somewhere else. 07:07.000 --> 07:07.930 So click login. 07:09.400 --> 07:09.760 All right. 07:09.760 --> 07:10.510 We've logged in. 07:10.600 --> 07:15.700 Now, if I go to the homepage, I should see virtual terminal over here and that should change the logo. 07:18.110 --> 07:18.890 And there it is. 07:18.950 --> 07:22.650 And if I log out, it should take me back to the login screen. 07:22.760 --> 07:25.790 This should say log in again and that should disappear. 07:26.060 --> 07:28.040 So let's try that one up. 07:29.640 --> 07:31.240 OK, that seemed to work pretty well. 07:31.610 --> 07:40.190 So let's go back to our idea and find the log in page and let's find the part where we've actually authenticated. 07:40.640 --> 07:46.700 And here after we've if data error is exactly the faults that we've logged in, we set our local storage 07:46.700 --> 07:47.090 items. 07:47.660 --> 07:53.410 Let's just to a location of equals, take them to the home page. 07:54.490 --> 07:58.370 And now if I start my application and start it. 08:03.100 --> 08:08.560 It should be much clearer what happened, what's happening to the end user, so I'll refresh this page 08:08.560 --> 08:11.470 to make sure I have a current version and log in with valid credentials. 08:11.530 --> 08:18.760 I mean, at example, dot com password, and we should be redirected to the homepage, see a virtual 08:18.760 --> 08:19.330 terminal. 08:19.330 --> 08:21.220 And this should now say Loga. 08:21.370 --> 08:21.970 Let's find out. 08:24.540 --> 08:25.390 That's perfect. 08:25.830 --> 08:33.460 Now, naturally, this is the illusion of security, that virtual terminal page really needs to be protected. 08:33.510 --> 08:37.230 And if I go to it right now, you can see that it's Yoro is right there. 08:37.260 --> 08:38.460 So I'm going to copy that URL. 08:39.480 --> 08:46.700 I'm going to log and now I'm going to try to go to that virtual terminal just by pasting in the euro. 08:47.130 --> 08:53.130 And of course, once I get return, it'll still show the page because there's no real authentication 08:53.130 --> 08:53.940 taking place here. 08:54.090 --> 08:57.680 There is authentication, but we're not doing anything without authentication. 08:58.080 --> 09:06.240 So what we need to do next is to change this virtual terminal page so that when we request that page, 09:06.570 --> 09:08.910 we actually verify that we're allowed to be there. 09:09.150 --> 09:15.900 So we need to somehow send that token information to the back and verify that we're allowed to be there 09:15.900 --> 09:21.120 and then display the page if we are and if not, perhaps take the user to the login page so we get started 09:21.120 --> 09:22.380 on that in the next lecture.