WEBVTT 1 00:00:00.560 --> 00:00:01.900 Hi and welcome back. 2 00:00:01.920 --> 00:00:06.650 Today we're going to take very little time to create this amazing log in page just 3 00:00:06.680 --> 00:00:10.260 because we have all the components for it already available for us. 4 00:00:10.290 --> 00:00:12.580 So let's just get to work directly. 5 00:00:12.610 --> 00:00:14.580 What we're going to need is our header 6 00:00:14.610 --> 00:00:20.180 component that we created together and it is going to be of type one and it is going 7 00:00:20.210 --> 00:00:25.420 to have a title that will just say welcome back. 8 00:00:25.450 --> 00:00:28.380 Okay great, we see this appear here now 9 00:00:28.400 --> 00:00:32.380 but we do need this content to be centered everything that we put here. 10 00:00:32.410 --> 00:00:37.060 So what we could do for that is apply the styles to the scroll view container. 11 00:00:37.090 --> 00:00:39.860 So let's go here and just say flex one. 12 00:00:39.890 --> 00:00:47.000 And we're going to need justify content center here because the flex direction is 13 00:00:47.030 --> 00:00:51.700 automatically set to column so we would need to use justify content. 14 00:00:51.730 --> 00:00:55.360 So now what we want to do is have some distance between these two fields. 15 00:00:55.390 --> 00:00:57.940 So let's see what that distance is. 16 00:00:57.970 --> 00:01:03.020 That is 24 and I just happen to know that there's a lot of 24 happening here. 17 00:01:03.040 --> 00:01:04.960 So what I'm going to do is actually I'm 18 00:01:04.990 --> 00:01:10.240 going to go to global styles and I'm going to say that we need a global 19 00:01:10.270 --> 00:01:16.180 style of margin bottom 24 and all it's going to do is very simple. 20 00:01:16.210 --> 00:01:21.410 It's just going to get margin bottom to vertical scale of 24. 21 00:01:21.440 --> 00:01:24.850 Let's make sure this is imported right now it is. 22 00:01:24.880 --> 00:01:27.260 And now we need to apply this style. 23 00:01:27.280 --> 00:01:31.210 So we're going to have to use the view container for that and we're going to have 24 00:01:31.240 --> 00:01:34.820 to import this view container so that we get no errors. 25 00:01:34.840 --> 00:01:36.420 And then we're going to give it a style 26 00:01:36.440 --> 00:01:39.570 and we're going to say that we're going to be using global style for that 27 00:01:39.600 --> 00:01:43.380 and we're going to apply margin bottom 24. Great. 28 00:01:43.410 --> 00:01:45.780 Now we have that spacing available 29 00:01:45.810 --> 00:01:50.140 so the same spacing is going to be needed for our input component. 30 00:01:50.160 --> 00:01:53.600 So we're just going to create a view container for this as well and we're going 31 00:01:53.630 --> 00:01:57.740 to apply the same style from here to this view container. 32 00:01:57.760 --> 00:01:59.740 And then what we want to do is just copy 33 00:01:59.770 --> 00:02:04.980 this, paste it here and then change some of the settings for our password. 34 00:02:05.010 --> 00:02:08.540 So first of all we do know that the label should be password. 35 00:02:08.570 --> 00:02:12.820 Then we don't want this text to appear here because it should be secure. 36 00:02:12.850 --> 00:02:16.500 So we're going to say secure text entry should be set to true. 37 00:02:16.530 --> 00:02:20.660 Now if we enter anything here it's going to be hidden and we don't need 38 00:02:20.680 --> 00:02:23.940 the keyboard type to be email address, it can just be default field. 39 00:02:23.970 --> 00:02:26.730 And here instead of enter your email we're 40 00:02:26.760 --> 00:02:30.780 just going to put six stars as given in our design. 41 00:02:30.810 --> 00:02:35.450 And now on change text, instead of resetting the email we need 42 00:02:35.480 --> 00:02:42.380 a set password for which we do need to create something here as a state. 43 00:02:42.410 --> 00:02:45.060 So let's say password and then set 44 00:02:45.090 --> 00:02:49.180 password and whenever we type a password here. 45 00:02:49.210 --> 00:02:52.380 Now our password will have the value 46 00:02:52.410 --> 00:02:56.420 and then we need a view container for the login button. 47 00:02:56.450 --> 00:02:58.740 So let's import the button that we 48 00:02:58.770 --> 00:03:03.740 designed together again and let's just make it say login simply. 49 00:03:03.760 --> 00:03:06.300 And it's going to do. nothing so far. 50 00:03:06.330 --> 00:03:11.100 And it's visible very well because we have margin bottom applied here already. 51 00:03:11.130 --> 00:03:12.820 And then we need this text here. 52 00:03:12.840 --> 00:03:13.900 Don't have an account. 53 00:03:13.930 --> 00:03:19.610 And it should be a button because it will redirect us to the registration page. 54 00:03:19.640 --> 00:03:25.980 So what we're going to do here is actually use pressable and we're going to have 55 00:03:26.010 --> 00:03:28.610 to import this pressable so that we get no errors. 56 00:03:28.640 --> 00:03:31.860 So let me do that very quickly. 57 00:03:31.890 --> 00:03:39.340 And then inside this pressable we're just going to put a header of type three 58 00:03:39.370 --> 00:03:45.740 and it will have a title and it's just going to say don't have an account. 59 00:03:45.770 --> 00:03:48.600 And once we build the registration page we 60 00:03:48.620 --> 00:03:50.820 can come back here to make sure that onpress 61 00:03:50.850 --> 00:03:52.478 we are redirected there. 62 00:03:52.678 --> 00:03:55.260 And now this text is showing up as black. 63 00:03:55.290 --> 00:04:01.610 So let's make sure that we use the hexadecimal value for our color 64 00:04:01.640 --> 00:04:05.980 and let's give it a string with this value given here. 65 00:04:06.000 --> 00:04:09.100 Great. And we do need margin bottom here as well. 66 00:04:09.130 --> 00:04:13.060 So let's just copy this, paste it here and great. 67 00:04:13.090 --> 00:04:14.860 Now this is almost ready. 68 00:04:14.890 --> 00:04:17.937 The only string left is that we want to center this. 69 00:04:18.137 --> 00:04:19.460 So let's apply some styles 70 00:04:19.480 --> 00:04:28.300 here and we're going to call this style registration button and let's copy this. 71 00:04:28.330 --> 00:04:29.460 Come here. 72 00:04:29.480 --> 00:04:32.540 setup up the registration button. 73 00:04:32.570 --> 00:04:37.660 And here we're just going to say that we need to align items 74 00:04:37.690 --> 00:04:42.980 as centered and now this is going to be centered and it is going to be pressable. 75 00:04:43.010 --> 00:04:45.660 And these two screens are very similar to each other. 76 00:04:45.690 --> 00:04:50.980 So that's all we are done with this and I'll see you in the next video where 77 00:04:51.010 --> 00:04:54.420 we're going to be creating the registration screen so that we can get 78 00:04:54.450 --> 00:04:58.300 state on actually registering users very soon. 79 00:04:58.320 --> 00:05:01.320 Thank you so much for watching and I'll see you in the next video.