WEBVTT 00:01.820 --> 00:07.520 So we have the list of users displaying correctly, and now it's time to work on the ad or edit a user 00:07.520 --> 00:07.850 form. 00:08.060 --> 00:10.010 And right now it just looks like this. 00:10.520 --> 00:15.310 We just have an empty screen with nothing more than a title and a horizontal rule. 00:15.320 --> 00:16.790 And clearly, we need a form here. 00:16.790 --> 00:19.490 So let's build a form back to our editor. 00:19.490 --> 00:25.430 And I'm looking at one dash user, dot page go HTML and right here in the content section. 00:25.490 --> 00:26.330 Let's create a form. 00:26.570 --> 00:31.190 So form method equals post, which doesn't matter because we're not actually going to post this form. 00:31.200 --> 00:42.200 But anyway, we'll put an empty action in there and we'll give it a name, user form and an ID user 00:42.200 --> 00:46.670 form and we'll also give it a class 00:49.220 --> 00:50.930 and we'll put it needs validation 00:54.560 --> 00:55.610 and we'll use bootstraps. 00:55.610 --> 01:04.760 Validation, of course, will set out complete equal to off and no validate equals nothing. 01:05.540 --> 01:06.560 And we'll close the formal. 01:08.000 --> 01:11.510 And of course, we don't need very much information in here, but we need the first name. 01:11.810 --> 01:21.410 So div class equals m b three to give some merging on the bottom and closer and we'll have a label 01:24.140 --> 01:30.620 for equals first underscore name class equals form label 01:34.880 --> 01:38.810 and we'll give it the label of first name and close the label 01:42.410 --> 01:49.160 and our input input type equals text class equals form. 01:49.160 --> 01:50.090 Dust control 01:53.870 --> 01:59.540 idea equals first underscore name mean equals first underscore name 02:02.360 --> 02:03.530 and we'll make that required 02:07.220 --> 02:13.520 and we'll set autocomplete equal to first underscore named. 02:16.520 --> 02:17.630 So there's our first input. 02:17.630 --> 02:22.400 So let's copy and paste it for last name 02:29.390 --> 02:36.800 and change the ID and the name and the first part of autocomplete label. 02:39.050 --> 02:40.190 Now we'll paste it again. 02:40.770 --> 02:45.170 Let me copy this, paste it here. 02:45.530 --> 02:48.410 Let's put a space in there to an indent everything a little bit. 02:51.350 --> 02:55.430 And this will be for email and the label is email 02:59.360 --> 03:00.830 and the idea is email. 03:02.360 --> 03:03.800 And the last name is email. 03:06.610 --> 03:08.370 And we'll make this email new. 03:09.600 --> 03:16.330 We'll make the type of email now, we'll do one for password and revalidate password. 03:17.740 --> 03:19.060 Let's give ourselves some room. 03:19.930 --> 03:22.140 So password and validate password. 03:23.260 --> 03:24.400 And this will be password. 03:26.200 --> 03:32.430 We'll copy and paste it and pasted it. 03:32.480 --> 03:36.100 Make this password and let's make that a capital E on email. 03:36.100 --> 03:37.030 So we're consistent. 03:38.230 --> 03:46.790 The type is password and password now and we'll make that not required. 03:47.260 --> 03:52.360 So basically when we're editing a user, if we don't enter the password and verify password, then we're 03:52.360 --> 03:53.400 not changing the password. 03:53.440 --> 03:54.340 Otherwise we are. 03:55.300 --> 04:04.360 So we'll get rid of that and the same thing down here and we'll make this password or verify password. 04:05.830 --> 04:19.690 Now, copy and paste it in here and make this password and verify password, verify password and verify 04:19.810 --> 04:20.370 password. 04:21.640 --> 04:22.710 So I have error running. 04:22.930 --> 04:27.070 Let's make sure everything is compiling properly and it looks like it's OK. 04:27.130 --> 04:27.910 Let's try this. 04:27.910 --> 04:29.440 Let's try reloading that page. 04:31.170 --> 04:37.020 OK, so we need some buttons now, so let's scroll down at the bottom of our form before the closing 04:37.020 --> 04:44.910 form tag and we'll put a horizontal ruling and I'll put three buttons in and I'm going to put two on 04:44.910 --> 04:47.880 the left and one on the right and the two on the left are easy. 04:47.890 --> 04:54.690 So we'll go div class equals float, start and close at the end. 04:56.040 --> 04:59.670 And the first one will be a button that allows us to save our changes. 04:59.690 --> 05:08.760 And so a class equals button button primary, a travel set to JavaScript 05:12.840 --> 05:14.670 void with the zero. 05:14.830 --> 05:24.720 So it doesn't do anything and we'll give it an ID equal to save BTM and save changes 05:29.220 --> 05:40.800 and we'll duplicate this and I'll make this HSF equal to slash admin, slash all dash users and make 05:40.800 --> 05:42.120 this the cancel button 05:45.510 --> 05:51.750 cancel and we'll make that instead of putting primary we'll make a button warning. 05:55.980 --> 05:59.310 Now I want one on the right and it's going to be a delete button. 05:59.490 --> 06:07.350 Div class equals bloat and I'm close to give and we'll copy this. 06:11.110 --> 06:22.960 And paste it in here and make it button danger and we'll change this to say delete ETM and make this 06:22.960 --> 06:23.230 delete. 06:25.210 --> 06:26.620 OK, let's see how that looks 06:29.470 --> 06:29.960 perfect. 06:31.060 --> 06:36.790 So obviously, once we load this form, if we're going to have a new user, we'll leave this empty. 06:37.240 --> 06:42.280 If we're going to have an existing user, we'll call the back end with the idea of the user in question, 06:42.280 --> 06:43.270 which we can get right from. 06:43.270 --> 06:48.160 The URL will populate first name, last name and email and will leave these two empty. 06:48.610 --> 06:53.140 Now, if it's a new user will hide this button because you can't delete a new user. 06:53.500 --> 06:55.290 But if it's not a new user, then will unhide. 06:55.990 --> 06:57.710 And that should all be pretty straightforward. 06:57.850 --> 07:01.840 So we'll get started on editing an existing user in the next lecture.