WEBVTT 00:01.260 --> 00:05.580 So let's get started with authenticating our users, and I think the simplest thing to do is to set 00:05.580 --> 00:09.310 up a login page handler and route before we go too much further. 00:09.840 --> 00:14.460 So I'm looking at the route start and go file, which, of course is in the CMD Web folder, and I'll 00:14.460 --> 00:15.840 add a route right here. 00:16.140 --> 00:22.620 So I'll call these off routes and we'll create, first of all, a route that says don't get. 00:22.620 --> 00:27.480 So it's just to get requests and it's just going to display the login page and the aura will just be 00:27.570 --> 00:33.660 slash login, which seems to make sense and will point to a non-existent handler after login page. 00:35.010 --> 00:39.110 And let's go over to our handlers and create the handler. 00:39.120 --> 00:43.710 So I'll go to the very bottom of this file getting along. 00:43.980 --> 00:50.400 We might break these up into individual files in a bit, but OK, so log in what I call the handler 00:51.690 --> 00:52.500 login page. 00:55.220 --> 01:04.520 Login page displays the login page, and it'll be a function app pointer to application and its login 01:04.520 --> 01:09.590 page and I'm just going to copy the rest of this and modify it as necessary, because this is pretty 01:09.590 --> 01:10.310 simple stuff. 01:11.000 --> 01:20.410 So we'll copy this and paste it right here and we'll make it go to a page named Login. 01:22.970 --> 01:24.490 So we have our handler. 01:24.500 --> 01:31.460 Let's go over to our templates and create a new file called Login Page Dot Go HTML. 01:33.470 --> 01:35.150 And this will use the base template. 01:35.150 --> 01:45.230 So template base and we're going to hand it data and we'll give it a title defined title, which will 01:45.230 --> 01:46.040 just be login. 01:51.380 --> 02:00.200 And now we're content to find content and just to save a bit of time, what I'll do is open up an existing 02:00.200 --> 02:02.420 form and copy the things from that. 02:02.430 --> 02:04.570 So by once, Page has a form on it. 02:05.330 --> 02:07.760 So I'll just copy this entire form and then delete the parts. 02:07.760 --> 02:19.540 I don't want to copy this back to login page and I'll paste the form in there and we'll get rid of it. 02:19.670 --> 02:21.620 We'll just leave the action empty for now. 02:23.480 --> 02:26.320 We don't need the product or hidden ID stuff. 02:28.610 --> 02:30.020 We don't need the widget name, 02:33.050 --> 02:37.670 but we will leave a title in there, we'll just call this in. 02:40.650 --> 02:44.280 And we'll make that an page two, which I think we use pretty much everywhere else. 02:46.860 --> 02:51.120 OK, we don't need first name, we don't need a last name, we do need an email, so I'll get rid of 02:51.140 --> 02:51.350 that. 02:51.360 --> 02:54.270 We're going to log in users by email and some password. 02:55.170 --> 02:56.760 So we'll just call this email. 03:00.040 --> 03:08.680 And the ID will be email and the name is email, and we'll fix the autocomplete just to be consistent 03:09.460 --> 03:11.500 and the name on card will become Password 03:14.200 --> 03:15.940 and we'll change this to password. 03:20.340 --> 03:22.230 And this will be password new. 03:25.880 --> 03:27.560 And the ID will be password. 03:31.390 --> 03:32.710 And the name will be Password. 03:36.720 --> 03:38.930 And of course, the type will be password as well. 03:41.400 --> 03:44.250 And we don't need a credit card give, so let's get rid of the. 03:47.700 --> 03:55.710 And we don't need a pay button, we'll just call this get rid of the paper JavaScript void is fine, 03:55.710 --> 03:57.980 Val is fine and we'll just call this log in. 04:00.510 --> 04:02.130 We don't need any of this stuff. 04:06.420 --> 04:12.120 OK, so there's a start now, we're referring to a JavaScript function called Vele here, so let's just 04:12.120 --> 04:13.110 create an empty function. 04:13.350 --> 04:14.710 Define James. 04:17.040 --> 04:21.600 Script function down and close it. 04:25.310 --> 04:27.640 And and, of course, the closing to. 04:30.230 --> 04:35.900 OK, so now I start my back and make start back. 04:39.010 --> 04:44.220 And then run, er, I should be able to go to log in. 04:44.310 --> 04:53.110 So let's try that a little bi web browser and reload this page and go to slash login and then we have 04:53.110 --> 04:53.730 a login for. 04:53.950 --> 04:55.380 OK, now that's great. 04:55.390 --> 04:59.890 We probably should put something maybe over here in the right hand corner that allows users to log in. 04:59.890 --> 05:03.880 And of course if they're not logged in, they'll see log in and if they're logged in, they'll see log. 05:04.060 --> 05:05.730 But we'll take care of that logic later on. 05:06.190 --> 05:09.520 Let's just go fix up our base template and that menu item. 05:09.530 --> 05:14.650 So based on layout HTML, I'll scroll all the way down here. 05:14.650 --> 05:18.940 So we have this UL, which currently displays all of our menu items. 05:18.970 --> 05:30.570 What I'll do is add another URL here and I'll give it a class equal to burden of moustache, auto and 05:30.580 --> 05:33.910 V Dash to embed M.G. zero. 05:35.020 --> 05:38.680 And of course that's pretty much identical to the classes on this one. 05:38.710 --> 05:42.130 It's just we're changing the M e which is end to M. 05:42.130 --> 05:44.460 S, which is start and actually pull to the right. 05:45.280 --> 05:46.270 So we'll close our ult 05:49.270 --> 05:50.980 and put one line in there. 05:53.190 --> 06:02.760 So lower class equals dash item, which bootstrapped expects to find our closest ally right here and 06:02.760 --> 06:15.170 we'll put in a F in here, a class equals nav dash link and we'll give it an F. equal to log in, log 06:15.410 --> 06:17.270 in and close the ally. 06:17.310 --> 06:22.640 And if I say that and go back and reload this page, I should see the log in and I do. 06:22.950 --> 06:28.940 OK, so that should take us to the login page and it does of home analog. 06:29.850 --> 06:30.270 Perfect. 06:30.910 --> 06:32.370 OK, so that's a good start. 06:32.380 --> 06:35.790 In the next lecture, it looks like I have an unclosed attack there somewhere. 06:35.910 --> 06:36.530 Yes, I do. 06:36.540 --> 06:37.020 Look at that. 06:39.150 --> 06:43.730 Slash, save and let's reload this. 06:45.420 --> 06:46.180 That looks better. 06:46.250 --> 06:47.720 OK, do something look strange there. 06:48.660 --> 06:50.520 So we have a login page. 06:50.550 --> 06:56.970 The next step is going to be to write the JavaScript that calls the back in to authenticate us and give 06:56.970 --> 06:59.880 us a token back and it'll take a few steps to make that happen. 06:59.880 --> 07:01.950 But we'll get started in the next lecture.