WEBVTT 00:01.410 --> 00:06.930 So right now, I am logged in as admin at example, dot com, and what we want to do this time around 00:06.930 --> 00:09.500 is to implement the delete user functionality. 00:09.510 --> 00:15.690 But before I do that, I'm going to open an incognito or private window and I want to go to localhost 00:16.620 --> 00:20.300 four thousand and I will log in as Jack nimble. 00:20.520 --> 00:27.030 So Jack and nimble dot com password, very secret and log in. 00:28.740 --> 00:34.100 So in this window I'm logged in as Jack Nimble and it's a private window, as you can see up here. 00:34.110 --> 00:39.360 So the session for this window is completely different from the session for this window where I'm logged 00:39.360 --> 00:41.330 in as admin on that example dot com. 00:42.030 --> 00:44.420 So I'm logged in twice, one in each window. 00:44.580 --> 00:51.510 And let's go over to our code and let's find one user page go HTML. 00:51.510 --> 00:54.150 And we already have a listener for the delete button. 00:55.220 --> 01:00.230 Right here, but all we're doing is, of course, saying console dialog would delete user I.D., so 01:00.230 --> 01:03.620 let's get rid of that and let's put in the appropriate check. 01:04.070 --> 01:10.850 So we'll check to make sure that they confirm this, if result is confirmed, I believe is the syntax 01:13.460 --> 01:14.900 and we'll try to delete the user. 01:15.620 --> 01:18.610 So the logic for that from the front end will be pretty simple. 01:18.740 --> 01:20.300 We'll create some request options. 01:20.300 --> 01:29.530 So const request options equals and I'll just copy the ones from above to save some typing right here. 01:30.200 --> 01:34.880 So will be post and headers will be exactly the same and there'll be nobody here. 01:35.090 --> 01:39.430 OK, so I mean this over. 01:40.460 --> 01:45.590 So we have our request options and we'll write the fetch statement, then we'll go put in the root and 01:45.590 --> 01:46.070 the handler. 01:46.370 --> 01:57.650 OK, so the statement will be we're going to fetch from or to appear like that slash admin, slash all 01:57.650 --> 02:05.990 users, all the users, and then I'll call it delete and then I'll put the ID at the end of that and 02:05.990 --> 02:13.400 we'll have to request options and we'll have a then and we'll convert our response into JSON as usual, 02:17.960 --> 02:28.790 and then we'll run a function with our data and we'll check Finnair if data error and we'll do something 02:30.200 --> 02:33.920 else, we'll do something else. 02:33.980 --> 02:35.350 And something else is very simple. 02:35.900 --> 02:38.400 Location equals slash. 02:38.420 --> 02:44.690 It means all those users just take the user back to that page, all users page. 02:44.750 --> 02:53.420 But if there's an error, then we'll just fire that swoll dot fire error with whatever error message 02:53.420 --> 02:53.720 we got. 02:53.720 --> 02:55.260 That data dot message. 02:56.870 --> 03:00.710 OK, so that's the front end code and that all looks pretty accurate. 03:00.740 --> 03:03.630 We might have a typo in there somewhere, but we'll find out before too long. 03:04.130 --> 03:08.390 So let's go to our Roots Dash API and we'll add a root to delete a user. 03:08.390 --> 03:18.320 So duplicate this route and change it to delete so and then the ID and we'll make this delete user and 03:18.320 --> 03:21.730 we'll go create that function over in handler's dash API. 03:22.940 --> 03:24.380 So it's a very simple function. 03:24.380 --> 03:29.420 And to say some typing, I'll come up to this one, which is one user and I'll copy that. 03:33.040 --> 03:41.380 And go to the bottom of this file and paste it in there and rename it to delete user when I did that, 03:41.380 --> 03:45.580 because we need to get the ID, which we have right here, and then we're going to call or we're going 03:45.580 --> 03:53.530 to get one return value from Abu DB dot delete user and handed the user ID. 03:54.250 --> 03:59.860 And down here we need to write back a response so I can just copy all of this from the previous function 04:00.640 --> 04:01.780 and paste it in here. 04:03.490 --> 04:08.090 And you would think once I restart the application that this will be perfect. 04:08.110 --> 04:08.800 Let's find out. 04:08.830 --> 04:10.030 Let's see if we have any mistakes. 04:10.030 --> 04:13.530 So I'll say mixed up, mixed start. 04:14.950 --> 04:16.900 And remember, I'm logged in as two users. 04:18.060 --> 04:24.630 So I'll go back to my Web browser right now, I'm not in the private window, so I'm met, I'm this 04:24.630 --> 04:29.460 person and Minett example, dot com and you can verify that by clicking on it and there's no delete 04:29.460 --> 04:29.760 button. 04:30.300 --> 04:31.500 So I'll cancel of that. 04:32.010 --> 04:37.150 Now we'll go over to Jack Nimble and I shall delete this user delete. 04:37.890 --> 04:39.990 Are you sure you won't be able to undo this? 04:39.990 --> 04:40.650 Delete the user. 04:40.680 --> 04:41.610 Let's see if we got it right. 04:43.400 --> 04:49.340 And it looks like we didn't, so I must have a typo in there somewhere expected nonwhite space character 04:49.340 --> 04:53.480 after Jason data and learn one column, five of the Jason data. 04:53.510 --> 04:54.470 So let's see what we got wrong. 04:54.500 --> 04:56.660 Let's go see if there's an entry in our look. 04:58.610 --> 04:59.360 Nothing there. 04:59.420 --> 05:01.730 Let's see what we got back from our network. 05:03.020 --> 05:04.410 So I'll just try this again. 05:04.430 --> 05:06.530 Delete, delete. 05:07.640 --> 05:09.580 And I have a four oh four. 05:09.620 --> 05:12.650 So it looks like I have a mistake, which is. 05:14.560 --> 05:21.580 The request is nothing, the response is 404 page not found and what did I actually request here? 05:21.640 --> 05:22.350 Let's find out. 05:22.380 --> 05:24.220 It's usually a JavaScript error with me. 05:26.600 --> 05:29.450 And it looks like the initiator is a fair statement. 05:29.480 --> 05:31.020 OK, that narrows it down. 05:31.040 --> 05:38.740 So let's go back down to our first statement and see what we got wrong here. 05:38.750 --> 05:47.750 And one user by French statement says, slash admin, slash all the users, fetch API, slash API, 05:49.160 --> 05:50.000 slash admin. 05:50.030 --> 05:50.970 All right, let's try that again. 05:52.820 --> 05:56.170 So mixed up start. 05:57.260 --> 06:00.570 I'm sure you all saw me leave that out and you laughed at me, but that's OK. 06:00.590 --> 06:08.600 I've been left out before and I go back to my Web browser, reload this page, go to the console, cleared 06:08.600 --> 06:10.190 out, OK? 06:10.220 --> 06:12.110 And now I'll try deleting Jack nimble. 06:13.460 --> 06:14.420 So Jack nimble. 06:15.450 --> 06:17.820 No, no, rose in ResultSet. 06:18.450 --> 06:20.470 All right, let's go back here. 06:21.360 --> 06:22.900 Third time is the charm. 06:22.920 --> 06:31.740 If you look at this, I left the slash off of delete and you laughed at me even more mixed up Mixter. 06:36.040 --> 06:41.560 And I'll go back to my front end, where I'm logged in as admin at example, dot com and just to make 06:41.560 --> 06:42.800 sure that user is still there. 06:42.820 --> 06:43.920 I'll go to all users. 06:44.440 --> 06:45.270 There is Jack. 06:46.090 --> 06:47.320 Third time's the charm. 06:47.320 --> 06:50.630 Let's delete this person and Jack is gone. 06:50.860 --> 06:51.400 Perfect. 06:51.750 --> 06:54.180 OK, so Jack has been deleted from the database. 06:54.720 --> 06:57.040 Now let me switch to my other window. 06:57.250 --> 07:02.980 I'm still logged in as Jack and let me go to the admin page menu and choose all users. 07:03.790 --> 07:06.520 First of all, there appear to be no users here. 07:08.290 --> 07:11.500 Let's go to say all sales. 07:12.690 --> 07:17.940 Now, I'm not getting any data, and that's good, but I'm still able to navigate through all of these 07:17.940 --> 07:19.540 things and that's not so good. 07:19.890 --> 07:25.860 So it looks like I have to have some means of ensuring that this user is actually logged out of the 07:25.860 --> 07:29.300 system entirely, because I can still navigate and see things here. 07:29.850 --> 07:32.990 And that's a bit of a problem. 07:33.000 --> 07:36.220 I'm not getting any data, but I shouldn't even be able to see these pages. 07:36.540 --> 07:37.770 So how are we going to figure that out? 07:37.890 --> 07:40.620 Well, we'll take care of that in the next lesson.