WEBVTT 00:01.250 --> 00:01.940 Okay. 00:02.120 --> 00:06.200 What do we have in our application is we have a login and it's working fine. 00:06.200 --> 00:09.020 So we prove that it's working fine and we get back the token. 00:09.020 --> 00:11.330 But we don't have a way to register users. 00:11.330 --> 00:16.370 And what we'll do in this video is to enable a registering in our application. 00:16.370 --> 00:20.450 So let's go back here and we could create a new component. 00:20.450 --> 00:23.480 And but let's reuse what we already have. 00:23.480 --> 00:25.310 So we have that authentication component. 00:25.340 --> 00:27.440 Here we have username and password. 00:27.500 --> 00:30.530 We will use the same thing for registering. 00:30.530 --> 00:33.920 So we can kind of reuse a little bit of what we have here. 00:33.920 --> 00:36.530 So here we'll create a new state. 00:36.530 --> 00:39.290 So I will duplicate this line. 00:39.290 --> 00:44.600 And what I want to do is is login view. 00:44.630 --> 00:47.450 So we'll have a method here. 00:47.480 --> 00:50.870 And I will create set its login view. 00:50.870 --> 00:53.780 And I will make it to true. 00:53.780 --> 00:59.030 So basically I will have this variable here that will be either true or false. 00:59.030 --> 00:59.900 So it's a boolean. 00:59.900 --> 01:04.730 Then we based on that we can toggle in Toggling between register and login. 01:04.730 --> 01:12.920 So I will go by copy that and I will go back here and let's say we will have here h1. 01:12.920 --> 01:16.310 And in that h1 we will have login. 01:16.310 --> 01:22.160 So basically we want to show it login but only want to show it login when it's login view. 01:22.280 --> 01:27.050 So if login view will do that otherwise we'll do something else. 01:27.050 --> 01:33.110 So what we want to do let's say we want to show register like that. 01:33.110 --> 01:40.760 So if I will save it now and I go here you see I have the login and there is a little bit of this mismatch. 01:40.760 --> 01:45.320 So we need to work a little bit with styling because it's really hard to see. 01:45.320 --> 01:49.700 And so what I will do is I will create a div here. 01:49.700 --> 01:53.360 So we'll wrap everything inside in that div. 01:55.670 --> 02:00.080 And I will move this to the right. 02:00.080 --> 02:01.250 So we have that. 02:04.130 --> 02:09.090 Div here and I will put that outside of my grid one. 02:09.090 --> 02:12.570 So we will have that H1 here inside the grid. 02:12.570 --> 02:16.470 So I will have that log in here and then we'll have a grid there. 02:16.470 --> 02:18.990 So we have that log in here. 02:18.990 --> 02:25.140 And if that will be that variable will be false if we will switch it to false. 02:25.140 --> 02:26.550 So how can we do that. 02:26.550 --> 02:28.740 Of course millions of ways to do it. 02:28.740 --> 02:40.710 So what I will do is I will have a paragraph here and I will put you don't have an account register 02:40.710 --> 02:41.400 here. 02:42.090 --> 02:46.170 And and I can make it clickable. 02:46.200 --> 02:48.720 Any element it can be a button if you want. 02:48.750 --> 02:52.890 Like um I want to show you how it works in a different element. 02:52.920 --> 02:56.670 So on click and that's going to be arrow function. 02:56.670 --> 03:04.950 And I will use method that we have here which is set is login view. 03:04.950 --> 03:09.600 And we can pass here False. 03:09.630 --> 03:13.140 So basically whatever we click on this will make it to false. 03:13.140 --> 03:18.030 If I will go here and if I will click on this one, you see that it has been changed. 03:18.930 --> 03:22.350 And quickly I will add some padding to my element here. 03:22.350 --> 03:29.610 So it will be easier to see if we'll have padding let's say of 12 maybe. 03:30.060 --> 03:34.050 And so it will be easier to see it are not going to be asked to the edge. 03:34.050 --> 03:37.380 So when we click on here we change this to register. 03:37.410 --> 03:41.310 So basically what we can do is we can have two of those. 03:41.310 --> 03:43.470 And I will have another one to true. 03:43.470 --> 03:46.200 So we will basically toggle in between them. 03:46.200 --> 03:47.520 And I can say. 03:49.980 --> 03:56.130 Already have an account login here. 03:56.460 --> 03:58.110 So basically you will have two of them. 03:58.110 --> 04:00.300 And we can do the same thing as we've done it here. 04:00.300 --> 04:06.510 So basically if we have a login view then it will display one. 04:06.690 --> 04:11.370 Otherwise we will display the the other one. 04:11.460 --> 04:17.940 So if I will save it now I have that already have an account login here and refresh it. 04:17.970 --> 04:19.050 We have that login. 04:19.080 --> 04:21.090 You don't have an account register here. 04:21.090 --> 04:23.550 So I will click it and then I have register. 04:23.580 --> 04:25.620 I already have an account login here. 04:25.620 --> 04:30.090 And you see I can click on this change the way we have it. 04:30.120 --> 04:31.800 Also we have that button here. 04:34.920 --> 04:38.970 And we can do a similar thing as we've done before. 04:38.970 --> 04:41.880 So login here I will duplicate it. 04:41.910 --> 04:45.540 I will put a colon here and just close the curly braces. 04:45.540 --> 04:48.750 So the first one if we have a login then we'll do login. 04:48.750 --> 04:53.760 And then I will have another one register and we will register. 04:53.760 --> 04:57.120 We don't have that method yet so I need to click on this. 04:57.120 --> 05:04.110 And the same way as we have this I can duplicate this and I will have register user. 05:04.680 --> 05:11.610 So what we need to have is maybe we can have a register method just not to have it confused here. 05:11.610 --> 05:14.860 And we need to register user in our API. 05:14.890 --> 05:22.060 So at the moment what I will do is I will say register here and we will need to create that method there. 05:22.090 --> 05:26.350 So I will go to API service and it will be similar to what we've done here. 05:26.350 --> 05:31.120 So I will duplicate this and I will change this. 05:31.120 --> 05:32.680 To register user. 05:32.680 --> 05:37.510 What we need to send is we need to send body because we need to use username and password. 05:37.510 --> 05:39.190 And in the URL. 05:39.190 --> 05:46.690 What I want to do is not API but not out but API slash users slash. 05:46.720 --> 05:49.540 And then we'll send whatever we eat there in the body. 05:49.540 --> 05:51.730 So we have that method to register. 05:52.270 --> 05:55.000 If I will go here, this is what I will call. 05:55.000 --> 06:01.690 So if we click on this button here when it's register then it will. 06:01.690 --> 06:03.280 This save function will be trigger. 06:03.280 --> 06:05.620 We will have this function async. 06:05.650 --> 06:08.140 This will be sent to username password. 06:08.140 --> 06:17.440 And if we have a response then we will console log let's say response for now and we'll see what's coming 06:17.440 --> 06:18.640 back to us. 06:19.780 --> 06:22.150 So I'm on the login. 06:22.150 --> 06:25.210 I can register here on register. 06:25.210 --> 06:29.710 So at the moment this is register mode I'll put my username password. 06:32.470 --> 06:33.850 Christian two Christian two. 06:33.880 --> 06:36.130 And I will click register first thing first. 06:36.160 --> 06:38.830 Well I see the console log here. 06:38.830 --> 06:42.880 This is already registered and I have ID five coming from my database. 06:42.880 --> 06:45.100 And I can see here the users. 06:45.130 --> 06:46.660 And this is what I sent. 06:46.660 --> 06:49.900 So API users post and it has been created. 06:49.900 --> 06:53.140 And I see what I've sent and also what is going back. 06:53.140 --> 06:56.470 So this is coming back from database I see ID five. 06:56.500 --> 07:05.260 But instead of logging that here to console, what I could do is I could automatically log in that user 07:05.260 --> 07:07.270 and have that token saved there. 07:07.270 --> 07:09.550 So basically we have that method here method. 07:09.550 --> 07:12.580 Here we use the username and password for login. 07:12.580 --> 07:16.690 So basically if we have that information there we could all trigger that. 07:16.690 --> 07:17.380 From here. 07:17.380 --> 07:19.750 We don't need to pass anything here. 07:19.750 --> 07:21.160 We will just register. 07:21.160 --> 07:25.870 So if we have a response, we know that we've registered a user and we'll use the same credentials to 07:25.900 --> 07:26.410 login. 07:26.410 --> 07:29.380 And the token is supposed to come back to us. 07:29.380 --> 07:33.400 So if I will do it again and then I will I can clean it. 07:33.400 --> 07:36.670 You see if I will go to our application. 07:36.670 --> 07:39.040 And I don't have any, any token yet. 07:39.040 --> 07:42.040 So if I will use another one. 07:42.040 --> 07:48.340 So let's say three and then three here if I will register. 07:48.370 --> 07:51.760 Now you see token is here. 07:51.760 --> 08:00.550 So if I will go to network and I have that users, this is where I created my user. 08:00.550 --> 08:02.830 And then I authenticate it and I got the token. 08:02.830 --> 08:05.920 This is different token than it was for my previous user. 08:05.920 --> 08:11.890 So if I refresh the page now I'm in the movies with as a new user and it's done. 08:11.890 --> 08:15.100 So we have successfully created. 08:15.250 --> 08:16.630 If I will remove it here. 08:16.630 --> 08:25.820 So once again application and I can right click clear and then refresh it here and back again here. 08:25.820 --> 08:29.720 But you have two ways to reuse the same form. 08:29.720 --> 08:33.200 So I can either do register or login here. 08:33.200 --> 08:34.940 This is not styled properly. 08:34.940 --> 08:42.650 And then we also need to make sure that whenever we actually login will be redirected to a proper page. 08:42.680 --> 08:44.570 And we can do that here. 08:44.570 --> 08:49.940 So if we go in and out and we know that you will login, we set that token. 08:49.940 --> 08:53.480 What we can also do is we can navigate to movies. 08:53.480 --> 08:56.420 So this is what we will do here. 08:56.450 --> 09:00.320 I will put that in the multi-line. 09:00.320 --> 09:03.680 And we set the token and we navigate to the movies there. 09:03.680 --> 09:12.620 So if I will go here and if I will log in now Christian and login I'm already here. 09:13.010 --> 09:17.450 So this is, this is already a redirecting. 09:17.450 --> 09:21.950 So we have a fully functional login and register in our application now.