WEBVTT 00:01.720 --> 00:07.060 In this section of the course, we want to set up some protected routes for admin users only. 00:07.150 --> 00:08.890 So right now I'm not logged in. 00:08.890 --> 00:11.680 So I have this logging link up here, which takes me to this page. 00:11.680 --> 00:12.610 And if I do log in, 00:17.800 --> 00:20.890 if I set a password three last time, let's find out. 00:21.740 --> 00:28.230 Yes, I now get this change to a log out link and I can see the virtual terminal. 00:28.240 --> 00:33.700 But of course, there's more things we want to do with our fictitious widget sales website. 00:33.730 --> 00:36.520 We want to be able to look at people who have bought things. 00:36.520 --> 00:40.570 We want to be able to look at people who subscribe to our bronze plan. 00:40.750 --> 00:43.930 And we want to be able to offer refunds when necessary. 00:43.930 --> 00:47.160 And of course, to do that, we only want authenticated users to do it. 00:47.350 --> 00:50.540 So we're going to make some changes to our code this time right now. 00:50.590 --> 00:58.630 This log in or log out and this virtual terminal over here, there are only visible and accessible based 00:58.630 --> 01:01.750 upon the presence of a token stored in local storage. 01:02.980 --> 01:04.120 And we can make that much better. 01:04.330 --> 01:13.000 So let's go to our coat and let's look first of all, at base level over here, base layout go up at 01:13.000 --> 01:14.340 the very bottom of this. 01:14.350 --> 01:20.110 We have this ad event listener and these two variables to determine whether or not something is visible, 01:20.120 --> 01:23.010 those log in, log out and the virtual terminal. 01:23.020 --> 01:24.280 And I'm not going to use those anymore. 01:24.280 --> 01:26.410 So I'm going to delete that code entirely. 01:27.250 --> 01:32.280 And instead I'm going to take advantage of something that's available to every page of our site. 01:32.470 --> 01:39.630 So if we go back to rendered Orrego, which is in the CMD Web package, we have this template data structure. 01:39.640 --> 01:44.220 And one of the things that's passed to every single page is this value. 01:44.230 --> 01:46.750 This field is authenticated, which is an input. 01:47.590 --> 01:53.080 So I'm going to assume that if that's set to zero, the user is not authenticated and if it's set to 01:53.080 --> 01:55.290 one, the user is authenticated. 01:55.300 --> 01:58.070 And of course, we can make that determination really easily. 01:59.110 --> 02:02.100 Let's scroll down to where we add the default data right here. 02:03.250 --> 02:06.610 So this is run before any page on the site is rendered. 02:06.610 --> 02:11.970 And all we have to do is check to see if the value of idea exists in the session. 02:12.010 --> 02:15.070 So we say if after a session 02:17.800 --> 02:23.320 exists and we give it the context and we have that because we have the request available to us in this 02:23.320 --> 02:28.750 function or that context, and we're looking for user uppercase, i. 02:28.750 --> 02:36.970 D If that exists, then we'll say TRD dot is authenticated equals one, otherwise it's going to be set 02:36.970 --> 02:38.040 to zero by default. 02:38.050 --> 02:42.600 But if you want to be really secure, really feel good about yourself, you can always put Elz. 02:45.810 --> 02:49.910 CDR is authenticated equal zero. 02:50.650 --> 02:57.980 OK, so there it is now that's going to be available to us when we render things, including base layer. 02:58.330 --> 02:59.960 So I just deleted that JavaScript. 02:59.980 --> 03:02.110 I still want to log out function obviously. 03:02.620 --> 03:09.510 But up here in the menu we can make some determinations to the start with this part right here. 03:09.550 --> 03:18.040 We can make that a lot simpler simply by putting a check and saying if this is authenticated, aitutaki 03:18.040 --> 03:29.110 and that was misspelled, that one, if that equals one, then we're going to show something else and 03:29.110 --> 03:39.430 we'll show something else and we'll just have this over and removed none because we don't want it to 03:39.430 --> 03:40.120 be hidden. 03:41.140 --> 03:46.390 And I'll copy this whole thing, because that's going to be what people see if they're not authenticated 03:46.600 --> 03:47.950 and pasted in right here. 03:49.570 --> 03:56.710 And I'll just change this one to Laura and change the URL to logo. 03:58.240 --> 04:03.700 And now if someone's authenticated the C logo and if someone's not authenticated, they see log in. 04:04.630 --> 04:05.790 And that's exactly what I want. 04:06.130 --> 04:09.120 And of course, we still have this virtual terminal thing. 04:09.140 --> 04:14.120 What we can do up here is say finding something that's a dropdown. 04:14.140 --> 04:17.320 So this, for example, this is a dropdown. 04:17.320 --> 04:23.440 And what I'll do is put an admin menu that's only available to authenticated users right here, right 04:23.440 --> 04:26.910 beside the product's virtual terminal will go away in a minute. 04:26.920 --> 04:28.180 So we'll create one for products. 04:29.230 --> 04:30.880 So I'll copy this entire thing. 04:30.880 --> 04:32.920 That's a dropdown just as a starting point. 04:33.250 --> 04:39.340 Coffee, then I'll come down here, a live virtual terminal there for the moment and I'll do that check 04:39.340 --> 04:39.700 again. 04:39.880 --> 04:48.880 If Equal Dot is authenticated one, then they're going to see what's inside this if statement, otherwise 04:48.880 --> 04:49.300 or not. 04:50.710 --> 04:56.410 So I'll paste in that dropdown as a starting point and we'll change this to admin. 04:59.650 --> 05:02.610 And we want the admin user to have access to certain things. 05:02.920 --> 05:04.840 For example, we want this. 05:04.840 --> 05:06.070 We want a virtual terminal. 05:06.080 --> 05:11.860 So I'll copy virtual terminal over here, change this to virtual terminal 05:15.490 --> 05:22.970 and fix the URL, which is slash admin, slash virtual dash terminal. 05:23.830 --> 05:27.830 OK, so there's the first thing we're going to want other things as well. 05:27.850 --> 05:31.840 So what I'm going to do just to make it a little more visually attractive is I'll put another Elyon 05:31.840 --> 05:40.660 here and we'll give it an hour with a class of dropdown divider, which comes straight from bootstrap 05:42.010 --> 05:42.970 and close the line. 05:43.720 --> 05:48.040 And let's assume that another thing we're going to want to be able to do is to look at all sales. 05:48.250 --> 05:50.780 This would be sales of individual widgets, OK? 05:51.130 --> 05:58.000 And I'll put in a path that doesn't exist yet, slash admin, slash all dash sales, for example, and 05:58.000 --> 06:00.400 I'll duplicate that and say all subscriptions 06:04.390 --> 06:07.330 or subscriptions. 06:09.070 --> 06:15.040 OK, and then maybe just because I can, I'll put the divider here again and give them another way of 06:15.040 --> 06:18.190 logging out so they don't have to go way over to the right hand side of the screen. 06:19.540 --> 06:26.770 And I'll just copy this one pasted in here and call it logout. 06:27.310 --> 06:29.650 So they have two ways of looking at nothing wrong with that. 06:30.340 --> 06:33.830 And the password for the path for that is just log out. 06:34.540 --> 06:39.550 So let's open our terminal and make stock make start. 06:42.390 --> 06:50.130 Let's see what it looks like, so me go back to my Web browser and refresh this page and it still says 06:50.130 --> 06:54.660 log out here as it should, and I have this drop down menu and I should be able to get to the virtual 06:54.660 --> 06:57.030 terminal from here as perfect. 06:57.450 --> 06:58.890 And I can also log out from here. 07:00.080 --> 07:06.060 OK, so the next step is to go create some pages, some Stubbe pages, handlers, routes and so forth 07:06.450 --> 07:10.290 for these two new items, for all sales and all subscriptions. 07:10.620 --> 07:15.480 And of course, we're going to build the front end pages using our front end logic and our front end 07:15.480 --> 07:16.200 application. 07:16.470 --> 07:21.720 And we'll do all of the backend things such as fetching the list of all sales, getting an individual 07:21.720 --> 07:23.250 sale, refunding a sale. 07:23.460 --> 07:28.620 We'll do that by calling the backend from our front end and we'll get started on that in the next lecture.