WEBVTT 00:00.880 --> 00:05.950 So we have a good start on the show reset password handler, we can ensure that the URL is not been 00:05.950 --> 00:11.620 tampered with, but obviously we need to at least show the reset password page and allow the user reset 00:11.620 --> 00:12.300 the password. 00:12.310 --> 00:13.480 So let's get started doing that. 00:13.480 --> 00:15.830 And it's going to take a little while, but let's get started. 00:16.570 --> 00:22.450 So the very first thing I'll do is change this to a not if not valid, get rid of the L's. 00:23.440 --> 00:31.180 And all I'm going to do right now is just print an error message to the log after error log print line 00:33.310 --> 00:42.830 and I'll just put in a valid URL tampering detected and I'll return. 00:43.000 --> 00:46.780 Now, that's not very friendly and obviously you can do whatever you want here. 00:46.780 --> 00:50.230 Redirect the user to another page, display an error message, whatever it may be. 00:51.400 --> 00:55.140 But assuming we get past that, we actually now need to render a template. 00:55.840 --> 01:00.710 So the first thing I'll do, I know I'm going to want the email address in that form I displayed. 01:00.800 --> 01:09.790 OK, so I'll create a data variable, which is make a map string and then interface so I can store whatever 01:09.790 --> 01:13.660 I want in there and I'll put in data email. 01:14.560 --> 01:25.120 And that will be equal to the actual email, which is from our URL dot query yet. 01:25.400 --> 01:26.460 And we called it email. 01:26.470 --> 01:28.170 So that grabs it from the query parameters. 01:29.140 --> 01:33.520 Now render a template and I can just use this right here as a starting point. 01:33.520 --> 01:44.560 So I copy and paste it down here and change that to reset password which doesn't exist but were created 01:44.560 --> 01:49.810 a minute and I'll populate the data template with data equal to data. 01:51.340 --> 01:55.950 OK, so now we're going to be rendering a reset password page, which means we need the template. 01:55.960 --> 02:05.230 So let's go over to our templates folder, create a new file which I'll call reset password page go 02:05.290 --> 02:05.930 HTML. 02:07.520 --> 02:13.940 And just to say some time, I'll simply copy the forgot password page, because it'll be very similar 02:13.940 --> 02:19.400 to this and paste that in here and we'll make some changes. 02:19.460 --> 02:22.610 So to start with, this becomes reset password. 02:24.650 --> 02:27.950 And down here, we want this to be reset password 02:30.680 --> 02:35.690 and down here will change the button to reset password. 02:37.430 --> 02:42.860 Now, this will be password and the type is going to be password. 02:48.290 --> 02:57.530 And I'll copy paste it in the four label, make the ID and the name equal to password and autocomplete 02:57.530 --> 02:58.310 will become password. 02:58.310 --> 02:58.610 No. 02:59.360 --> 03:01.160 Then I'll just duplicate this entire thing 03:04.400 --> 03:06.340 and give them a place to verify. 03:06.470 --> 03:11.270 So verify a password and this becomes verified. 03:11.270 --> 03:22.160 Dasch password copied and pasted in here, pasted in here and paste it in here and everything else for 03:22.160 --> 03:23.900 that should stay pretty much the same. 03:24.530 --> 03:26.470 So now we'll come down to this bit. 03:27.940 --> 03:29.340 Show is fine. 03:30.060 --> 03:32.730 We already have the messages because we copied it, so that's fine. 03:33.310 --> 03:37.650 We'll change this to password reset. 03:39.700 --> 03:47.800 And up here, what do we call the form, let's change it from forgot form to present form copy. 03:49.710 --> 03:55.270 And this didn't work very well and should be reset for there, OK? 03:56.050 --> 03:59.670 And it looks like on the login form, that's probably the same thing, but I'll change that later on. 04:00.510 --> 04:07.140 OK, so down here, let's get down to this and we'll say document get an element, the ID reset form. 04:08.130 --> 04:15.450 And after this, before we go any further, let's make sure that we actually have. 04:17.040 --> 04:23.100 So whatever the type in the password field should match what they typed in the password field or verify 04:23.100 --> 04:23.770 password field. 04:24.210 --> 04:25.490 So we'll just put some logic in here. 04:25.890 --> 04:34.860 If document doesn't get element by ID and your password, if its value is not exactly equal to document 04:34.860 --> 04:44.830 douget element by ID, and we called it verify password value and we'll show it to. 04:48.060 --> 04:55.710 Show error and his words do not match and we don't want to go any further, so we'll return. 04:57.450 --> 04:59.720 OK, so let's try this out. 04:59.770 --> 05:01.890 Let's go to our make sure everything is stopped. 05:03.500 --> 05:05.010 Make start back. 05:07.450 --> 05:08.200 And I'll run here. 05:13.360 --> 05:19.090 So let's go back to our Web browser and clear the JavaScript console and let's start the whole process. 05:19.090 --> 05:20.320 So forgot password. 05:22.520 --> 05:26.000 My email is admin at example dot com, 05:29.330 --> 05:33.560 and that should send the link and we go to mail drop and there it is. 05:34.880 --> 05:36.170 And let's click on this. 05:38.460 --> 05:39.930 And there it is, reset password. 05:40.000 --> 05:41.980 OK, so the form is displaying properly. 05:42.960 --> 05:44.980 Now, obviously, there's a few more things to do. 05:45.030 --> 05:48.330 We haven't actually called the back end to change the password. 05:48.330 --> 05:52.860 So we'll have to implement that logic, which means we'll need to set up a root on the back end and 05:52.860 --> 05:55.540 take care of the actual resetting of the password. 05:55.620 --> 05:56.700 But this is a good start. 05:57.060 --> 05:59.990 So one last thing before I forget, let's go back to the ID. 06:02.940 --> 06:12.030 And let's how terminal and let's find Handler's API and make sure that we're actually going to send 06:12.030 --> 06:14.290 the send to the correct email address. 06:14.730 --> 06:21.000 So this should actually be payload email, because the second parameter, I think is the two. 06:21.000 --> 06:22.530 Yes, second is two. 06:23.310 --> 06:26.900 So that will allow us to actually send the email to the correct individual. 06:27.330 --> 06:29.090 And I was just an oversight on my part. 06:29.370 --> 06:33.840 So in the next lecture, we'll go back to our reset password page. 06:34.320 --> 06:37.730 And we have some work to do down here because we're not going to forgot password. 06:37.740 --> 06:41.870 We need to set up a different route and actually initiate the password reset. 06:42.150 --> 06:44.340 So we'll get started on that in the next lecture.