WEBVTT 00:01.170 --> 00:06.390 So it's time to write some JavaScript on the front end to allow us to actually add a new user or edit 00:06.390 --> 00:12.420 an existing user, and of course, that's all done in one dash user page go HTML and it's done down 00:12.420 --> 00:13.740 here in the JavaScript section. 00:14.490 --> 00:18.480 So in order to initiate the save, we're actually clicking this button. 00:18.480 --> 00:21.750 And right now this button save changes doesn't do anything. 00:21.840 --> 00:26.610 So we can either put it an event listener tied to this ID or we can just put it on Click Handler. 00:26.940 --> 00:32.700 So I'll put an unclick handler that just calls Val a JavaScript function that doesn't exist yet. 00:33.420 --> 00:37.860 And down here I can put it wherever I want, so I'll put it right here. 00:38.670 --> 00:39.630 Function, Val. 00:41.880 --> 00:48.840 And what this will do is say, first of all, let's get a reference to the form that form equal document 00:48.840 --> 00:50.490 douget element by ID. 00:50.490 --> 00:52.860 And I think I called this user underscore form. 00:53.490 --> 00:58.260 So that gives me a reference to the form and how we take advantage of bootstraps validation. 00:58.410 --> 00:59.340 And that's really simple. 00:59.610 --> 01:09.360 If form dot check the validity check validity is exactly equal to false and there's something wrong. 01:10.290 --> 01:15.930 So we can come up here and just say this dot event dot prevent default. 01:19.680 --> 01:21.300 Which has parentheses, of course, 01:24.720 --> 01:34.890 and this dark event does stop propagation, and there's a parentheses, not early brackets, I must 01:34.890 --> 01:36.060 need coffee at this point. 01:38.310 --> 01:48.890 And next we say formed our class list, don't add and we want to add was validated and return. 01:49.290 --> 01:50.190 Something's gone wrong. 01:50.730 --> 01:53.340 Otherwise formed a class list. 01:54.480 --> 01:57.390 That ad was validated. 01:59.670 --> 02:05.040 Now, of course, we also want to make sure that password and verify password are exactly the same. 02:05.160 --> 02:12.170 So we can just say if document don't get element by ID and the first one is password value. 02:12.540 --> 02:20.190 If that's not exactly equal to document, don't get element by ID verify password 02:22.880 --> 02:30.150 dot value and we want to stop them, but we want to tell them we're wrong. 02:30.730 --> 02:40.650 We're already using Sweedler so we can just fire a dialogue, swoll or fire and just say passwords do 02:40.650 --> 02:43.770 not match 02:47.220 --> 02:47.820 and return. 02:50.990 --> 02:55.880 Otherwise, at this point, we want to fire off some Jason to our back in route we just created, so 02:55.880 --> 03:02.480 we'll create a payload that payload people and we put on all the things that we need. 03:02.630 --> 03:05.960 So we're going to need the ID for that needs to be in the form of an ant. 03:06.050 --> 03:09.550 So per cent ID based here. 03:10.940 --> 03:12.470 And it's not a semicolon, it's a comma. 03:13.070 --> 03:17.830 And we also want the first name and that's going to be equal to document. 03:17.830 --> 03:25.520 Don't get element by ID first underscored name value and we want the last name and the email so I'll 03:25.520 --> 03:26.630 duplicate that twice. 03:27.170 --> 03:28.730 Changed this one to the last name. 03:30.510 --> 03:31.580 That one to email. 03:34.070 --> 03:35.270 And this will be last name. 03:39.640 --> 03:43.450 And this will be email and we want the password. 03:48.580 --> 03:54.100 And of course, these names I'd first name, last name, email and password must exactly correspond 03:54.100 --> 03:58.510 to the Jason value in the model's user type. 03:59.290 --> 04:01.390 So this is password and this is password. 04:04.980 --> 04:12.360 Now we'll create some request options, so constant request options that will be equal to a JavaScript 04:12.360 --> 04:17.150 object with the standard stuff and I can just copy and paste the ones from here to save some time. 04:17.820 --> 04:20.960 So copy that, paste it in here. 04:21.150 --> 04:27.000 And of course, we also want the body and body, which should be at this level. 04:27.000 --> 04:34.560 Lordi is equal to Jason Dot String Afie payload. 04:36.120 --> 04:46.800 And finally we call fetch so fetch using dot api from the data pass to every template slash api slash 04:46.830 --> 04:56.070 admin slash all dash users slash edit slash plus the idea and the request options. 04:57.060 --> 05:03.670 Then we call them and turn our response into JSON response. 05:03.670 --> 05:04.400 Dart Jason. 05:06.810 --> 05:12.090 Then at this point we're just going to run a function pass at the value. 05:12.090 --> 05:15.900 We just got converted from a response and we'll do something. 05:16.230 --> 05:21.270 So we'll say if DataDot error, if there's an error then we need to do something. 05:21.450 --> 05:22.980 Otherwise everything went well. 05:23.820 --> 05:30.600 Now if everything went well, all I'm going to do is just to say location dot atrip equals and take 05:30.600 --> 05:35.070 them to slash admin, slash all the users and that should be sufficient. 05:36.870 --> 05:38.110 But something went wrong. 05:38.280 --> 05:39.010 What do I do? 05:39.030 --> 05:46.860 Well, again, I'm just going to say swoll dot fire error with whatever error message you choose to 05:46.860 --> 05:51.030 pass, plus DataDot message. 05:53.550 --> 05:56.780 OK, so in theory this should all work. 05:57.360 --> 05:59.430 Let's start our application. 06:00.000 --> 06:02.340 So I'll clear the screen, maybe start. 06:06.800 --> 06:11.510 And go back to my Web browser and I'll go to Woodmen. 06:13.030 --> 06:13.840 All users. 06:15.300 --> 06:20.760 Click on this one, opened the JavaScript console in case there is an error, and I'll change this from 06:20.760 --> 06:24.660 admin user to Treb Solar and click save. 06:26.800 --> 06:28.000 And it changed my name. 06:28.030 --> 06:28.570 Perfect. 06:28.600 --> 06:40.090 Let's try adding a user so I will add Jack Nimble Jack at nimble dot com with the password. 06:40.540 --> 06:41.920 Very secret. 06:42.610 --> 06:43.840 Very secret. 06:44.080 --> 06:45.220 I hope I typed the same. 06:45.230 --> 06:46.210 We're about to find out. 06:46.540 --> 06:47.560 Safe changes. 06:49.290 --> 06:55.980 And I have an error in my skill syntax, and it's somewhere at sea at lying to. 06:57.130 --> 06:58.940 So it must be on the insert users. 06:58.960 --> 07:09.400 So let's go have a look at that and we're going to go to Models Dargo, which is down here, and we'll 07:09.400 --> 07:12.760 look for ad user, so. 07:12.820 --> 07:13.840 And user. 07:16.470 --> 07:21.780 And there it is, insert first name, last name, email, password created and I'm missing in parentheses, 07:21.900 --> 07:24.770 which was very sloppy, but this is the first time we've called that. 07:25.350 --> 07:27.810 So let's say make stop. 07:29.250 --> 07:30.030 Make start. 07:33.650 --> 07:44.360 And we'll go back to our Web browser and we'll reload this and say, Jack, nimble Jack at nimble dot 07:44.360 --> 07:48.770 com password is very secret, which I just misspelled. 07:50.570 --> 07:55.670 Very secret, very secret and safe changes. 07:55.880 --> 07:56.840 See what else we got wrong. 07:58.970 --> 08:06.710 That actually looks pretty good, so let's log out and log in as Jack at nimble dot com. 08:07.130 --> 08:11.660 We are a, c, c, r, e, t log in. 08:14.170 --> 08:14.950 And that looks good. 08:14.980 --> 08:19.840 I'm logged in, I have admitting privileges, so I should be able to go to all users and there they 08:19.840 --> 08:20.110 are. 08:20.140 --> 08:24.820 When I look at myself, I should not see a delete button and I do not. 08:25.420 --> 08:29.190 But when I look at Trevor, I should see it and I do. 08:29.560 --> 08:32.470 So everything seems to be working pretty well, but we're not quite done. 08:32.470 --> 08:37.660 We still need to have the ability to delete a user and we have the button, but it doesn't actually 08:37.660 --> 08:38.550 do anything yet. 08:38.590 --> 08:40.720 So we'll take care of that in the next lecture.