WEBVTT 00:02.070 --> 00:07.590 So this time around, I want to look at our login screen and I want to address something that is a common 00:07.590 --> 00:10.950 occurrence, a user forgets his or her password. 00:11.550 --> 00:16.320 And what we're going to do this time around is start the process of implementing password resets. 00:17.010 --> 00:19.020 So password resets are pretty straightforward. 00:19.020 --> 00:22.980 We can't send users a password because we don't store the password in the database. 00:22.980 --> 00:24.920 We just story hash of the password. 00:24.930 --> 00:27.430 And that's really good security practice. 00:28.020 --> 00:33.450 So what we'll do instead is add a link right here below the login button that just says forgot password. 00:33.460 --> 00:37.320 That'll take them to a page where they can enter their password they submitted. 00:37.560 --> 00:40.680 And we'll have that submission take place using fetch calling. 00:40.680 --> 00:47.190 The backend API will verify that we have that email address somewhere in the database and then we'll 00:47.190 --> 00:52.620 generate and send a one time use email that with an expiry date. 00:52.620 --> 00:57.430 So it expires after, say, 60 Minutes and the user can then click on that link in their email. 00:57.450 --> 01:00.330 They'll be taken to a page where they can reset their password. 01:00.720 --> 01:02.510 So it'll take a few steps to make this happen. 01:02.520 --> 01:03.460 But let's get started. 01:03.750 --> 01:05.120 So I want to go back to my idea. 01:06.480 --> 01:10.260 And because I'm going to be making changes to this page, I'm going to stop everything. 01:10.640 --> 01:13.410 Stop, start just the back end. 01:13.530 --> 01:16.410 So make start to underscore back. 01:19.540 --> 01:25.570 And it's going and now on air, so I can make changes really quickly and just refresh my Web page to 01:25.570 --> 01:26.850 see how the changes look. 01:27.730 --> 01:35.440 So I'm in the login page time out and underneath this, where we have our A graph that links to the 01:35.440 --> 01:42.490 valve function, I'll create a little paragraph tag and I'll give it a class of, say, margin talk 01:42.490 --> 01:47.920 to and I'll close that and I'll put a link in here. 01:48.460 --> 01:55.090 Very simple one and I'll make it small, small a equals and we'll go to a route that doesn't exist yet 01:55.090 --> 01:56.170 called Forgot 01:58.630 --> 02:03.460 Password and we'll just say forgot password 02:06.880 --> 02:10.940 and close that and save it and go back and see how it looks. 02:11.140 --> 02:13.860 So I refresh this page that looks great. 02:14.110 --> 02:18.590 So of course we need to create that route and the associated page on the front end. 02:18.610 --> 02:19.360 So let's go do that. 02:20.470 --> 02:21.640 So back to our ID. 02:21.640 --> 02:29.320 The first thing I'll do is go to my roots, which are right here, somewhere there, and I'll create 02:29.320 --> 02:35.380 a new route and I'll put it right here in the Roots and it will be a get root and get request to slash 02:35.650 --> 02:41.320 forgot the password and that will go to something that doesn't exist yet. 02:42.230 --> 02:44.950 App Dot forgot password. 02:45.590 --> 02:46.950 So let's go create that handler. 02:47.140 --> 02:52.360 So we'll open up our handlers and at the very bottom of this file will create a function. 02:55.920 --> 03:05.700 Funk with a receiver of application, pointed out application, and it's called Forgot Password, it's 03:05.910 --> 03:09.660 right there and give it its to require parameters. 03:21.720 --> 03:26.880 And all this is going to do is render a page so I can just come up here and find one that renders a 03:26.880 --> 03:27.990 page like this. 03:28.140 --> 03:34.590 Copy it, come all the way down here, paste it in, make sure that it has no template data. 03:34.590 --> 03:42.030 It doesn't and we're going to say render the forgot password page that doesn't exist. 03:42.040 --> 03:43.980 So let's go to our templates and create it. 03:45.050 --> 03:52.100 A file called Forgot Password Page Dot and go HTML. 03:52.990 --> 03:53.370 OK. 03:55.210 --> 04:01.330 This is going to be a pretty simple template, it'll use our base template, so template base and we'll 04:01.330 --> 04:02.990 hand it data even though it doesn't have any. 04:03.010 --> 04:12.110 We might at some point in the future give it a title defined title, and that's just going to be forgot 04:12.220 --> 04:12.900 password. 04:13.930 --> 04:15.010 We'll close that off, 04:18.910 --> 04:19.920 then we'll have some content. 04:20.740 --> 04:25.000 So define content and we'll close that off. 04:25.000 --> 04:28.900 So I don't forget now I'm going to make this a little narrower. 04:28.900 --> 04:39.100 So I'll put it in its own relative class equals row and then div class equals call and six to take up 04:39.100 --> 04:43.630 half of the available width of the page and then offset it in the three. 04:43.630 --> 04:50.590 So it's centered and close those two divs do it. 04:51.250 --> 04:55.300 Now this is going to be a form and it's going to be almost identical to our login form. 04:55.330 --> 04:56.220 It's just going to be shorter. 04:56.230 --> 04:58.330 So let's go copy our login for the whole thing. 04:59.170 --> 05:08.320 So form right up to here, including the alert div, so I'll copy that from login page dutko HTML and 05:08.520 --> 05:12.340 then I'll just paste it in here and make whatever changes we have to make. 05:13.480 --> 05:15.690 So to start with, let's format a little bit better. 05:18.810 --> 05:23.490 And this forum closes that form, so let's move everything over one 05:26.550 --> 05:29.730 and let's move everything inside of that div over one. 05:30.420 --> 05:32.910 OK, so this is not going to have an action. 05:32.940 --> 05:37.020 We're not going to be calling the front end at all here just to render this page. 05:37.470 --> 05:39.000 We're not going to call it login form. 05:39.000 --> 05:40.620 We'll call it, say, forgot form 05:44.700 --> 05:46.350 both the name and the ID. 05:47.730 --> 05:51.210 We don't need this class charged form, which I don't believe does anything anyway. 05:51.210 --> 05:52.020 But that's OK. 05:52.620 --> 05:59.660 We'll change the title to Forgot Password and you can put instructions under that if you want to. 05:59.670 --> 06:00.470 I'm not going to bother. 06:01.380 --> 06:02.670 We're not going to need a password. 06:02.670 --> 06:05.400 We just need the place to type in their email. 06:05.520 --> 06:08.010 OK, so we don't need this. 06:08.100 --> 06:10.840 Obviously we don't need a link to ourself so that can go away. 06:11.790 --> 06:13.010 All right, let's see how that looks. 06:13.020 --> 06:17.670 So let's go back and try all we have to restart our application. 06:17.670 --> 06:20.490 Of course, I think I'm going to make sure. 06:20.820 --> 06:22.170 Yeah, if you're confused. 06:22.170 --> 06:23.640 So I'll just run Aragón. 06:26.850 --> 06:32.340 Here goes now let's relive this and see how this looks, a reload this page to make sure it's current 06:32.490 --> 06:35.020 click on Forgot Password and there it is. 06:35.040 --> 06:35.810 So we have our phone. 06:36.210 --> 06:36.570 All right. 06:36.630 --> 06:40.620 Now, we need some JavaScript, first of all, to validate to make sure that they enter an email or 06:40.620 --> 06:41.640 enter something in here. 06:41.940 --> 06:44.550 And then we have to call a back end API root. 06:44.550 --> 06:46.590 That doesn't exist yet, but we can do that easily enough. 06:46.620 --> 06:47.790 Let's get started anyway. 06:48.690 --> 06:53.520 So back over to Visual Studio count and I'll hide my terminal window and we're going to have a JavaScript 06:53.520 --> 06:53.910 section. 06:54.090 --> 06:57.000 So define jazz. 06:57.300 --> 07:00.120 And that's what it's called in our template, our base template. 07:00.600 --> 07:07.100 And we're going to have some script tags in here, script and a closing script tag. 07:09.420 --> 07:14.970 Now, a lot of what's going to take place here will be identical to what takes place in login page in 07:14.970 --> 07:17.380 terms of the kinds of things we're using in JavaScript. 07:17.400 --> 07:21.750 So, for example, we're going to want this login messages. 07:21.750 --> 07:25.360 We're going to want show error and show show success, and we're going to want to function. 07:26.100 --> 07:28.230 So let's just copy the whole thing. 07:29.070 --> 07:31.040 And this starts with that. 07:31.080 --> 07:38.340 So this is right up to here to the whole contents of the script, and we'll just change it and make 07:38.340 --> 07:40.400 it simpler because not as much is going on here. 07:40.410 --> 07:43.530 So let's play starting now. 07:44.280 --> 07:46.930 We don't have a log in messages, do we? 07:46.980 --> 07:51.210 We do, but I'm going to call it messages instead, which I think is a better name because we're not 07:51.210 --> 07:52.230 actually logging in here. 07:52.230 --> 07:58.860 So we'll change the idea of the alert to messages, which means I can come down here and change this 07:58.860 --> 08:00.060 to messages. 08:00.060 --> 08:06.540 I can change them all at once by saying change all occurrences to messages. 08:07.170 --> 08:07.980 That looks better. 08:08.050 --> 08:10.650 OK, and there's a little formatting issue here. 08:10.650 --> 08:17.160 So let's move this over a little bit and come down to Val. 08:17.820 --> 08:19.530 So we didn't call it a login form. 08:19.680 --> 08:21.590 We called it forgot form. 08:24.150 --> 08:26.970 So that gives me a reference to the form and we do our validation. 08:26.970 --> 08:27.480 Great. 08:27.690 --> 08:31.340 We are going to create a payload, but we don't have a password so we can get rid of that. 08:33.570 --> 08:36.840 And down here, I request options are going to be post. 08:36.840 --> 08:38.400 We're going to string a fire our payload. 08:38.410 --> 08:39.530 So that doesn't change. 08:39.930 --> 08:41.410 Now we're going to call a different route. 08:42.510 --> 08:49.530 What I'm going to call is API forgot dush password. 08:50.220 --> 08:56.640 OK, so assuming that route exists and it doesn't yet, but when it does, we're going to get data back. 08:56.640 --> 09:00.510 We convert it to Jason and then we go to data and all of this. 09:00.510 --> 09:08.490 So we're not going to be sending anything in local storage here and we're not going to submit the form 09:08.490 --> 09:09.440 so that can go away. 09:10.560 --> 09:11.840 We are going to show success. 09:11.850 --> 09:12.900 So what are we saying? 09:12.900 --> 09:14.040 And show success? 09:14.820 --> 09:16.320 We're saying log successful. 09:16.350 --> 09:17.310 That's not a good message. 09:17.310 --> 09:22.670 Let's change it to password reset email set. 09:24.060 --> 09:27.150 And I think the rest of that is going to stay pretty much the same. 09:27.590 --> 09:36.090 OK, so now obviously, although this actually is probably the final form of the JavaScript for this 09:36.090 --> 09:42.570 page, we still have to go setup that route API slash forgot password and do something in there. 09:43.170 --> 09:46.140 So we'll get started on that in the next lecture.