WEBVTT 00:01.890 --> 00:02.550 Okay. 00:03.090 --> 00:06.710 Our application has a login already done. 00:06.720 --> 00:11.190 What is missing is register and that will be very simple. 00:11.220 --> 00:13.230 Of course I will simplify everything. 00:13.230 --> 00:18.000 So what we will do for register is we will have only username and password. 00:18.030 --> 00:24.360 Normally you would like to collect maybe some other data from the user, but we'll keep it this way. 00:24.780 --> 00:29.460 So username and password, we can actually reuse whatever we have here. 00:29.460 --> 00:30.990 So how can we do that? 00:31.140 --> 00:35.670 Basically if I go to the out here, I can close the rest of it. 00:37.320 --> 00:38.220 What do we have here? 00:38.250 --> 00:41.520 We have username and password that are using state. 00:41.520 --> 00:49.740 I will have another one, so I will just duplicate it and I will store way to tell if we are in the 00:49.740 --> 00:51.810 register view or login view. 00:51.810 --> 00:52.200 So what. 00:52.200 --> 00:55.860 What I can do is I can register view. 00:58.910 --> 01:06.150 And I can also set register view and by default is false. 01:06.170 --> 01:13.630 So we will have a login view and this register view I will toggle in between register and login. 01:13.640 --> 01:18.230 So what I can do, the first thing here is we have a title login. 01:18.230 --> 01:27.200 So instead of having logging here, what I could do is I can make it dynamic and I can use our new variable 01:27.200 --> 01:28.430 register view. 01:28.430 --> 01:35.410 And if that's the true, then we will have register. 01:36.860 --> 01:39.020 Otherwise we have a login. 01:39.020 --> 01:42.560 So it depends on this variable. 01:42.560 --> 01:50.300 Here we'll have either login or register on the button here, so that will be just a title on the button. 01:50.300 --> 01:57.540 Nothing will actually change here, but we will display the appropriate label on the button. 01:57.540 --> 02:00.240 So what can we do now? 02:00.330 --> 02:07.230 So basically what we need to do is we need to make sure and we need to add an extra element on the page 02:07.230 --> 02:11.130 that will toggle in between the register and login. 02:11.130 --> 02:16.260 Normally you can do it taps or you can do buttons or you can do any layout you like. 02:16.260 --> 02:22.500 What I will do is I will display a simple text here, but as you remember, the text are not clickable. 02:22.500 --> 02:27.390 So what we need to do is we need to do a touchable opacity. 02:27.390 --> 02:30.900 So I will do touchable opacity. 02:31.890 --> 02:37.830 It's been imported here, but this is imported from React Native Gesture handler. 02:37.830 --> 02:45.750 What we want to have is a imported from React native like we have it here so I can remove this one. 02:47.530 --> 02:51.340 And then I have touchable opacity. 02:51.370 --> 02:55.120 So this this element inside can be clickable. 02:55.120 --> 03:00.040 So we can have a text here and inside text we can say, don't 03:02.620 --> 03:03.760 have an icon. 03:06.410 --> 03:07.910 Register here. 03:09.290 --> 03:09.710 Like this. 03:09.710 --> 03:12.020 And this text will be clickable. 03:12.020 --> 03:14.660 So what we can do is we can do on press. 03:16.010 --> 03:23.210 And once we click, it will trigger toggle view. 03:28.000 --> 03:28.750 Like this. 03:28.750 --> 03:31.180 So we need to create a new function. 03:34.790 --> 03:38.240 I will use arrow function as always. 03:38.540 --> 03:43.700 And then what we can do, we can have use the set register view. 03:44.390 --> 03:48.350 So set, register, view and what we will pass. 03:48.350 --> 03:50.030 So we want to toggle. 03:50.360 --> 03:57.290 So what we can do is we can actually use whatever is there and we will pass opposite. 03:57.290 --> 04:01.490 So if register view is false, we'll pass it through. 04:01.520 --> 04:03.650 If it's true, we'll pass it false. 04:04.610 --> 04:07.220 So it will kind of toggle this thing. 04:07.220 --> 04:08.780 So if we save it now. 04:10.790 --> 04:12.380 I mean, do we need to come back here? 04:12.380 --> 04:13.700 And we have a new text here. 04:13.700 --> 04:18.020 If I click on a text, we have register, click it again, we have login. 04:18.020 --> 04:21.950 So this is working fine and it's kind of toggle my view. 04:22.880 --> 04:29.540 So here what I can do is I can actually do similar things as I've done here. 04:29.540 --> 04:37.850 So I have register view and then I can do so If we have register view, then I would like to do one 04:37.850 --> 04:42.470 text and otherwise I would like to do another text. 04:42.470 --> 04:44.810 So this will be my second text. 04:46.970 --> 04:49.580 And that will be my first act. 04:49.590 --> 04:50.240 So. 05:03.250 --> 05:04.810 And we can have it like that. 05:04.810 --> 05:12.910 So already have an account, go back to login and then if you are not registered you will display this. 05:12.910 --> 05:16.420 So we can go here and test it. 05:16.420 --> 05:18.700 So we have don't have an account. 05:18.730 --> 05:21.340 It's really hard to read at this point. 05:21.370 --> 05:26.620 We'll just fix it in a second and then we have already have an account go back here and you go back 05:26.620 --> 05:27.280 to login. 05:27.280 --> 05:29.740 So this is kind of a toggling, right? 05:29.950 --> 05:35.530 And what we need to do is I will add style and we can style it a little bit. 05:35.530 --> 05:40.750 So styles and then I can do view text. 05:42.440 --> 05:46.640 And actually I can play the same style on the second one here. 05:46.640 --> 05:54.020 And what we need to do is we need to implement the this new class here. 05:54.650 --> 06:00.830 So and what we will do first thing first we will do color white. 06:00.950 --> 06:06.050 So it will be much better visible on the black screen. 06:06.500 --> 06:11.030 We can do font size, for example, 20. 06:12.620 --> 06:14.240 We can do some padding. 06:14.270 --> 06:16.430 So I will do padding top. 06:18.410 --> 06:28.760 Of 30 and then I can do padding left of ten, and then I can do. 06:30.650 --> 06:31.580 Padding. 06:31.580 --> 06:33.380 Right of ten. 06:34.010 --> 06:37.490 So let's take a look how it how it is now. 06:37.880 --> 06:41.480 So I need to come back here and don't have an account register here. 06:41.480 --> 06:43.250 So it's much more visible now. 06:43.250 --> 06:46.820 But I have an extra element here. 06:46.820 --> 06:52.520 I think I just put it somewhere here. 06:57.000 --> 07:03.300 Oh, here we have an extra element and it should be fine now. 07:03.300 --> 07:08.160 So we go, Don't have an account register here, click it and then you have already have an account. 07:08.160 --> 07:10.650 Go back to login and we are in the login. 07:10.650 --> 07:12.810 So we have that already. 07:12.810 --> 07:15.480 So it's going to very simplify user interface. 07:15.510 --> 07:19.020 It's not looking great, but it is working in the way we want to have it. 07:19.020 --> 07:23.460 So we'll be able to reuse our username and password for the two things. 07:23.460 --> 07:30.930 So we have that rich view here and we can actually use it whatever we click on the button. 07:30.930 --> 07:33.030 So we do authenticate. 07:33.150 --> 07:36.090 So what I can do is if. 07:38.210 --> 07:39.770 Not Ridge view. 07:40.280 --> 07:42.530 So it is not register view. 07:42.560 --> 07:45.290 It is a simple login. 07:45.290 --> 07:46.440 Then do something. 07:46.460 --> 07:48.800 Otherwise you can do something. 07:48.800 --> 07:49.640 Or we can do. 07:49.670 --> 07:52.090 If register view then we will do something. 07:52.100 --> 07:55.790 Otherwise it's a login view so we can actually do this. 07:55.790 --> 07:59.570 So I will take this from here and put it here. 07:59.570 --> 08:01.220 That's, that's our login. 08:01.430 --> 08:05.690 And then we need to do something also for register. 08:05.690 --> 08:09.830 So for register here I will just paste the same thing here. 08:09.920 --> 08:14.360 So you can see we have twice this and this and this one. 08:14.360 --> 08:16.850 I will change it for register. 08:16.850 --> 08:20.390 So that will be API slash users. 08:21.140 --> 08:24.980 So this will be our endpoint to register new user. 08:24.980 --> 08:32.120 What we need to do is the application Json is fine, Json stringify username and password is just fine. 08:32.150 --> 08:35.120 What we need to do is we need to change this. 08:35.120 --> 08:41.610 So what we would like to have like navigate to the movie list at this point when we register user, 08:41.610 --> 08:43.410 we don't have a token returned. 08:43.440 --> 08:49.230 So what we will need to do is we will need to login so we can still have the username and password the 08:49.230 --> 08:50.850 same way as we had it. 08:50.850 --> 08:52.740 I mean in, in the form. 08:52.920 --> 08:58.110 So when you register, but we'll switch to the login view directly from here. 08:58.110 --> 08:59.760 So we could do. 09:01.230 --> 09:02.640 Set, register, view. 09:05.120 --> 09:10.490 So instead of having this, I will use set, register view and we'll do false. 09:11.000 --> 09:14.430 So basically, whenever we register, we have a success. 09:14.450 --> 09:18.890 We will set register to false and that will come back to the login. 09:18.920 --> 09:20.390 So if I will go here. 09:22.050 --> 09:24.270 I will do registers. 09:24.270 --> 09:34.230 I would like to register new user so my new user I can do Christian two and Christian two and then I 09:34.230 --> 09:35.130 register. 09:35.310 --> 09:38.310 And at the moment I registered with this. 09:38.310 --> 09:41.670 So I will try to log in with the same credentials login. 09:42.210 --> 09:49.020 And you can see here I'm in this list, that means my user has been registered. 09:49.020 --> 09:54.900 So this is the way you can log in your users and you can also register. 09:54.900 --> 09:57.520 Of course, this is not a perfect UI. 09:57.930 --> 10:05.100 You will require something more user friendly because like if you if you switch it like this, it's 10:05.100 --> 10:10.800 kind of not properly styled, it's not properly used, but you get the idea. 10:10.800 --> 10:17.790 You can register users and then you can log in, you can adjust based on the current view. 10:17.820 --> 10:25.180 What would you like to do once you have the login, you can actually log in, get the token from the 10:25.180 --> 10:28.750 response and you can authenticate it with the rest of the app. 10:28.750 --> 10:31.990 So at this moment our application is working fine. 10:31.990 --> 10:33.550 We can actually do everything. 10:33.550 --> 10:41.590 What we could do in the web version, we can add it, we can rate it, and then we can perform all the 10:41.590 --> 10:44.680 crude methods and our application is ready. 10:44.680 --> 10:49.810 But this application is ready on both Android and also on iOS. 10:49.810 --> 10:55.750 So we've created in this course three different application and there are fully functional. 10:55.750 --> 11:02.920 Now, as I said before, I'm not going to go through releasing this application into the market because 11:02.920 --> 11:05.740 that's like a very huge separate topic. 11:05.740 --> 11:12.190 But if you want to do that, the best way will be to visit the official React Native page and you will 11:12.190 --> 11:15.580 have a tons of resources there how to perform that. 11:15.610 --> 11:22.000 It's not easy process, especially on iOS, but it's if you want to release your application, that 11:22.000 --> 11:23.650 will be your starting point.