WEBVTT 00:01.680 --> 00:07.020 So we've managed to call the back end API and get a user, but of course there are cases where we don't 00:07.020 --> 00:07.830 want to do that. 00:07.980 --> 00:10.130 If we do, we want to populate the form. 00:10.140 --> 00:11.760 But if we don't, we want to leave it empty. 00:11.790 --> 00:17.050 So let's make some changes to the JavaScript here on one dash user page HTML. 00:17.850 --> 00:24.450 The first thing I'll do is move these two things token and let the outside of the document add event 00:24.450 --> 00:26.760 listeners, because I'm going to need those in other places. 00:27.270 --> 00:32.410 So if we put them right here, then they're available everywhere in our JavaScript. 00:32.820 --> 00:34.200 So that's the first thing I'll do. 00:34.590 --> 00:39.300 The second thing I'm going to do is I know I'm going to want to hide that delete button or unhide it 00:39.480 --> 00:42.550 depending on whether or not I'm adding a user or editing user. 00:42.570 --> 00:43.760 So let's get a reference to it. 00:44.460 --> 00:49.020 Let's delve equal document and get element by ID. 00:51.510 --> 00:56.510 And I'm looking for the elite bit like that. 00:56.760 --> 00:57.920 Now I have a reference to. 00:58.840 --> 01:03.880 So we have our Idy now here in the document, an event listener, the first thing we're going to do 01:04.420 --> 01:11.170 is make a decision if it is not exactly equal to zero, which is what it will be. 01:11.170 --> 01:14.290 If we're adding a user, then I'll execute that statement. 01:15.430 --> 01:16.540 Otherwise I won't. 01:17.020 --> 01:17.920 So that's easy enough. 01:18.520 --> 01:23.800 The second thing I'll do is come up here to this delete button and initially I have it hidden by giving 01:23.800 --> 01:24.460 it the class of. 01:27.910 --> 01:28.870 And down here. 01:30.050 --> 01:40.340 Just before I make my call to fetch, I'll say Delbert's the class list to remove the daschner and I 01:40.340 --> 01:43.220 will unhide it when we're editing an existing user. 01:43.730 --> 01:44.720 So that's easy enough. 01:44.930 --> 01:48.530 We're also going to want that delete button to actually do something. 01:48.540 --> 01:54.830 So let's add an event listener here outside of the document add event listener will at another event 01:54.830 --> 02:01.490 listener for the delay button delay button add event listener and we want it to be click and when somebody 02:01.490 --> 02:03.140 clicks on it will execute this function. 02:04.400 --> 02:05.600 Let's give ourselves some room. 02:07.130 --> 02:11.710 And what we can do, of course, is use that same logic we did on the sales page. 02:11.720 --> 02:18.890 So let's go over here to the sales page HTML, which is right there, sales up page Ducos HTML. 02:19.400 --> 02:25.030 And I'll copy this reference to Sweedler and I'll use the same logic for a confirmation button. 02:25.580 --> 02:32.870 So back on one user page at the top of the JavaScript, outside of the script tag, I'll import Sweedler, 02:33.680 --> 02:40.160 then I'll go back to school page and we'll find the part where we actually deleted with the fired Oswal. 02:41.670 --> 02:49.290 Right here, so copy this, the whole thing, and just change it as necessary, so I've copied it. 02:49.440 --> 02:55.920 I'll go back to one user page and I'll find where I have my event listener and I'll just fire the same 02:55.920 --> 02:56.330 code. 02:56.730 --> 02:58.410 But of course, we're not going to call Fetcher. 02:58.920 --> 02:59.730 We'll call it different. 03:00.070 --> 03:01.260 So delete that for now. 03:02.360 --> 03:10.340 And I'll ask you to delete everything inside this last then clause and I'll just write console that 03:10.340 --> 03:20.330 log would delete user ID and then just put it either, OK, and I'll change the name of the button. 03:22.020 --> 03:28.770 Here to delete user. 03:29.770 --> 03:32.000 OK, so now we have a listener. 03:32.530 --> 03:38.140 Now we have this working, but here we want to actually populate the information and we only have three 03:38.140 --> 03:38.910 things to worry about. 03:39.230 --> 03:41.100 Document, don't get element variety. 03:41.170 --> 03:44.050 And what this will do, of course, is populate the form with information. 03:44.440 --> 03:52.360 First, underscore name value equals from data dot first thing and duplicate that twice. 03:53.350 --> 04:04.360 Like this one last name, like this one email and change the IDs to email and last. 04:06.490 --> 04:08.910 But of course I only want to do that if I actually have data. 04:09.070 --> 04:12.100 So I'll say if data. 04:15.910 --> 04:19.180 And closed my statement and then I did these three things. 04:20.170 --> 04:25.030 OK, now obviously you can add some extra error checking here, put a message if the user isn't found 04:25.030 --> 04:27.700 from the database or whatever it may be, but that's trivial. 04:27.700 --> 04:29.510 And I'll leave that as an exercise for you. 04:30.160 --> 04:35.320 So if we did everything right, I should be able to start my application and test it out a start. 04:37.170 --> 04:37.750 That was good. 04:38.400 --> 04:41.190 Let's go back to our Web browser and I need to log in. 04:41.190 --> 04:52.230 So let's log in the example dot com password and log in and let's go to the admin, all users. 04:52.650 --> 04:56.700 And the first thing I'll do is try to add a user, but I'll open the JavaScript console in case I have 04:56.700 --> 04:57.360 a typo. 04:57.390 --> 05:01.560 OK, so adding users should give me a blank form with no delete button. 05:03.180 --> 05:09.030 And it does and there are no errors, so let's cancel this and go back, and now I'll click on the one 05:09.030 --> 05:13.320 user in the database and you'll see immediately if this works that there's a bit of a problem. 05:14.770 --> 05:21.220 I still have this all worked, I have my admin, my user, my email address, but I shouldn't be able 05:21.220 --> 05:22.590 to delete myself. 05:22.630 --> 05:26.350 I am the currently logged in user because there's only one user in the database. 05:26.560 --> 05:30.580 So the delete button will actually do anything except pop the pop a dialogue. 05:31.150 --> 05:36.190 And that worked fine, but I shouldn't be able to delete myself. 05:36.350 --> 05:38.420 That's generally considered bad practice. 05:38.680 --> 05:43.230 You might say to yourself, what are the chances that a user is going to delete him or herself? 05:43.840 --> 05:49.810 Well, in my experience, the chances are pretty good users will do whatever they can, given the opportunity. 05:49.810 --> 05:55.480 And as good computer scientists, we're pessimists, we assume worst case scenario. 05:55.480 --> 05:58.270 So we're going to have to figure out how to make this go away. 05:59.270 --> 06:05.180 Now, that actually should be a pretty simple exercise, and what I'm going to do is ask you to go back 06:05.180 --> 06:13.010 and look at both the front end and back end code and somehow determine whether or not the user I'm currently 06:13.010 --> 06:15.520 looking at is the currently logged in user. 06:15.530 --> 06:16.340 And I'll give you a hint. 06:16.620 --> 06:21.590 You should look at the front end session and how we determine whether or not someone is actually logged 06:21.590 --> 06:21.850 in. 06:22.430 --> 06:25.510 So I'm going to leave that as a bit of a challenge for you. 06:25.580 --> 06:31.130 How can you hide this delete button for the currently logged in user if he or she is looking at their 06:31.130 --> 06:32.620 own record in the database? 06:33.320 --> 06:37.670 So given that a world in the next lecture, I'll show you how I did it and we'll move on to actually 06:37.670 --> 06:42.020 writing the code that allows us to add a user or to edit the user.