WEBVTT 00:01.320 --> 00:01.920 Okay. 00:02.310 --> 00:07.200 In our application we have a full chroot now so we can create new records. 00:07.200 --> 00:13.170 We can get a list of the records, we can update the records and we can remove the records. 00:13.170 --> 00:15.990 So all the chroot options are available now. 00:15.990 --> 00:18.960 But the missing part is actually this token. 00:18.960 --> 00:25.620 At the moment what we have is we have that static token, but we need to enable user first to log in, 00:25.710 --> 00:30.390 retrieve that token, and then we can use it as a dynamic token from here. 00:30.390 --> 00:36.600 So first thing first, what we need to do is basically we will need to I will make a little bit more 00:36.600 --> 00:37.080 space. 00:37.080 --> 00:44.970 We need to create a new component and that component will be a login or we can do out an authentication 00:44.970 --> 00:45.600 component. 00:45.600 --> 00:47.580 So Jas here. 00:47.580 --> 00:55.380 And what I could do is I could for speed things up, I could select all in edit because we'll reuse 00:55.380 --> 01:04.330 whatever we have in the edit and we can use it inside our our new component authorization here. 01:04.330 --> 01:12.970 So what I will do is what I'm interested in is actually a few pieces here. 01:12.970 --> 01:16.810 So we had in the edit title and description. 01:16.810 --> 01:31.000 What we will have here is we'll have username like this, so username and then we will use an empty 01:31.030 --> 01:36.370 string and then we'll also have password like this. 01:41.470 --> 01:45.010 And then it's going to be empty like like this. 01:45.010 --> 01:47.260 So save movie here. 01:47.260 --> 01:54.340 What we can have is authenticate method and I will just remove all of it. 01:54.340 --> 01:55.630 I will just clean it up. 01:55.630 --> 02:04.240 I will have one option that will kind of reuse because all of the fetch methods are very similar how 02:04.240 --> 02:05.080 we use it. 02:05.110 --> 02:11.950 So at the moment what I will do is I will just comment it out to get it away from here and then we'll 02:11.950 --> 02:13.510 come back to this later on. 02:13.510 --> 02:21.460 So we have here username and that's going to be username. 02:23.140 --> 02:31.500 And then set also username and that's going to be value username. 02:31.510 --> 02:33.430 So there is a lot of typing. 02:33.430 --> 02:40.600 What I can do is I can just copy the password and do the same with this here. 02:40.600 --> 02:42.370 So label will be password. 02:42.370 --> 02:45.010 Then we'll use the placeholder password. 02:45.010 --> 02:51.460 If that will be empty, it will be display, then we'll accept 02:53.200 --> 02:57.670 password here and then value will be password. 02:57.670 --> 03:05.590 And then on on press, what we'll do is we'll have out. 03:07.620 --> 03:11.040 Function here and then we can have a title. 03:11.830 --> 03:13.140 Let's say 03:16.710 --> 03:21.720 we can have a static one log in like this. 03:21.750 --> 03:26.370 We don't need to have any navigation here like this one. 03:26.520 --> 03:36.990 So what we can have is we can have log in and then we can remove the this one. 03:39.810 --> 03:42.690 And let's do a little bit of clean up here. 03:42.690 --> 03:50.190 So the container, what we have in here, we have the container, we have labels and we have inputs. 03:50.190 --> 03:53.130 So I will leave the container labeled and input. 03:53.130 --> 03:55.230 So all of this can stay. 03:55.230 --> 04:00.810 So I will save it now, but it doesn't really matter at this point because we haven't added yet to our 04:00.810 --> 04:01.920 app.js. 04:01.920 --> 04:08.910 So what I need to do is actually this is added navigation, so we need to correct it as well. 04:08.910 --> 04:14.790 So this is not added, this is our authentication component. 04:14.790 --> 04:16.350 So I will save it here. 04:17.370 --> 04:21.060 And this will navigation options will be on authentication. 04:21.060 --> 04:30.120 And now once we have the authentication, what I can go do is I will actually duplicate this and authentication 04:30.120 --> 04:35.820 will be our first component authentication and that's going to be authentication. 04:35.820 --> 04:37.710 So we have a new component here. 04:37.710 --> 04:40.870 I will save it and let's come back here. 04:43.480 --> 04:50.110 And you can see here at the beginning we are in the login, so we have username and then we have a password 04:50.110 --> 04:57.220 and then we can click login and then we can login our user and we can get the token from the request 04:57.220 --> 05:02.080 and move back to the movie list when we are authenticated. 05:02.080 --> 05:09.790 But we need to also work with a few other things here to make it happen and we'll do that in the next 05:09.790 --> 05:10.420 video.