WEBVTT 00:00.020 --> 00:04.940 Okay, now that we've dealt with the Redux functionality, our next step is to actually create the login 00:04.940 --> 00:12.800 form that our users will use to, well, log in of course, and let's go to our features folder. 00:12.800 --> 00:19.970 And in the account folder let's create a new file and we'll call it Login form dot TSX. 00:19.970 --> 00:26.480 And inside this new component we will use RFC to create the boilerplate. 00:26.480 --> 00:33.290 And inside our login form we're just going to create the components the HTML effectively for list now. 00:33.290 --> 00:36.200 And we'll deal with the functionality soon. 00:36.200 --> 00:42.080 So in the return statement we'll use a container that we get from UI material. 00:42.740 --> 00:45.860 And inside our container we'll give it some properties. 00:45.860 --> 00:50.810 We'll give it a component of paper which will give it the white background. 00:50.810 --> 00:56.840 We'll give it a max width equal to SM, as we don't want our login form to stretch to the entire width 00:56.840 --> 01:03.530 of the component, and we'll give it the SE property and give it some border radius of three to give 01:03.530 --> 01:13.800 it some slightly rounded corners Inside here we'll use box and we'll give our box the display and flex, 01:13.800 --> 01:17.580 and we'll give it the flex direction of column. 01:17.580 --> 01:21.240 And we'll use align items of center. 01:22.500 --> 01:27.960 And we'll give it a margin top of eight. 01:29.940 --> 01:39.120 And at the top inside the box we'll just have an icon for lock outlines from my icons material. 01:39.210 --> 01:40.650 And we'll give this some props. 01:40.650 --> 01:44.700 We'll give it SE property and give it margin top of three. 01:44.700 --> 01:47.730 And we'll give it a color of secondary. 01:49.440 --> 01:51.600 And we need to use dot main. 01:51.600 --> 01:56.010 In this instance of using color I appreciate it's a bit weird sometimes. 01:56.010 --> 01:57.870 Sometimes we can use secondary. 01:57.990 --> 02:04.350 Sometimes we have to use this secondary main and it's annoyingly inconsistent. 02:04.350 --> 02:08.400 But inside this SE property then that's how we have to define it. 02:08.400 --> 02:12.970 And we'll also give the font size of 40. 02:12.970 --> 02:15.880 And then we'll use typography below this. 02:16.090 --> 02:18.760 And for the label we'll specify. 02:18.790 --> 02:24.970 Sign in and in the properties for the typography we'll give it a variant of H5. 02:25.210 --> 02:28.330 Below this typography we'll have another box. 02:29.260 --> 02:31.420 And we'll give this some properties. 02:31.420 --> 02:32.530 We'll give it a component. 02:32.530 --> 02:33.550 And this is what we're going. 02:33.580 --> 02:34.930 To use for our form. 02:34.930 --> 02:37.570 So we'll specify a form as the component. 02:37.570 --> 02:39.490 Just a normal HTML form. 02:39.520 --> 02:42.520 We'll give it a width of 100%. 02:42.520 --> 02:46.450 So it takes up all of its available space inside the container. 02:46.480 --> 02:53.770 We'll use Display Flex once again and we'll give it a flex direction of column. 02:55.270 --> 02:57.880 And then we'll use the gap equal to three. 02:57.880 --> 03:00.370 And we'll give it a margin above and below. 03:00.370 --> 03:00.970 So. 03:01.000 --> 03:05.680 Margin y in this case. 03:05.740 --> 03:08.710 And we'll also set this equal to three. 03:08.740 --> 03:11.680 And then inside here we can utilize. 03:11.710 --> 03:14.290 Our inputs. 03:14.290 --> 03:22.520 So we'll use the text field which gives us the styled input from material UI, make it self-closing 03:22.520 --> 03:24.650 and we'll give it the properties this needs. 03:24.650 --> 03:26.240 We'll make it full width. 03:26.450 --> 03:29.720 We'll give it a label equal to email. 03:29.870 --> 03:32.990 And we'll also make this one autofocus. 03:32.990 --> 03:38.270 So when this component loads then the cursor is inside the email box. 03:38.390 --> 03:44.810 And below this one we'll have another text field again self-closing. 03:44.810 --> 03:47.300 And we'll use the full width again. 03:48.110 --> 03:51.440 We'll give it a label equal to password. 03:52.100 --> 03:59.240 And we'll give this one a type equal to password so that it hides the characters as they're being typed. 03:59.330 --> 04:02.570 And then we'll utilize a button. 04:03.440 --> 04:05.150 So we'll specify a button. 04:06.710 --> 04:09.980 And inside the button we'll use sign in. 04:10.670 --> 04:15.050 And for the button properties we'll give it a variant of contain. 04:15.050 --> 04:20.180 And below the button we will use typography again. 04:20.600 --> 04:29.050 And we'll give this the property and say text align is going to be center and inside the typography 04:29.080 --> 04:34.360 we'll just say don't have an account question mark. 04:34.360 --> 04:38.350 And then inside here we'll use typography once again. 04:38.350 --> 04:47.290 And we'll use the components equal to link which we get from React Router Dom and say two equals and 04:47.290 --> 04:49.150 then forward slash register. 04:50.110 --> 04:55.450 And we'll give it a color equal to primary. 04:56.590 --> 05:03.160 And inside the typography we'll use sign up. 05:04.480 --> 05:06.700 So that is our login form. 05:06.700 --> 05:13.480 And we will next head over to our routes and just double check what we have inside our routes. 05:13.480 --> 05:14.590 Did we create one for login? 05:14.590 --> 05:15.160 We did not. 05:15.160 --> 05:19.840 So let's also add a route path for the login. 05:19.840 --> 05:22.570 And we'll just use forward slash login. 05:22.720 --> 05:26.860 And I've got my doubts about why I've been using forward slash inside these routes. 05:26.890 --> 05:33.330 Now I'm looking at this because whilst we do need the forward slash when we use them in the two, which 05:33.330 --> 05:34.530 we're going to use soon. 05:34.740 --> 05:38.820 I don't think we need these forward slashes and I'm just going to remove them. 05:38.850 --> 05:42.810 Obviously they haven't done us any harm because everything was working. 05:42.960 --> 05:48.420 But now we've saved ten characters worth of code on our page so far. 05:48.420 --> 05:54.000 By removing those forward slashes, we only need the forward slash when we actually use the route to 05:54.030 --> 05:58.650 navigate to in our components, but not when we're declaring the routes like so. 05:58.680 --> 06:04.260 And then for the login, I'm going to use the component as the login form. 06:05.880 --> 06:11.580 And let's just go to our navbar and see what we have inside here and what we should have. 06:11.580 --> 06:17.430 I think we enabled this earlier because we declared the routes up here, and we got the path for login 06:17.430 --> 06:18.780 there as well. 06:18.810 --> 06:23.760 So what this should mean if we go back to the browser, is I should be able to click login. 06:24.360 --> 06:28.470 And let's just refresh the page and click login. 06:28.470 --> 06:30.540 And we get taken to our sign in page. 06:30.540 --> 06:32.940 And if we check this in dark mode great. 06:32.940 --> 06:33.990 That looks fine as well. 06:33.990 --> 06:36.330 And we've got the don't have an account. 06:36.360 --> 06:37.980 Then we can sign up. 06:38.010 --> 06:41.340 I think I should have a bit of space in between them. 06:42.570 --> 06:45.420 The text here and the sign up, which I do not have. 06:45.420 --> 06:49.920 So let's just add a bit of text in or a bit of space in our login form. 06:52.200 --> 06:57.480 And I'll just use the property in this case and just give it margin left of three. 06:57.510 --> 07:01.470 And if I go and take a look then maybe a bit too much margin there. 07:01.470 --> 07:04.050 Let's give it two and a bit more like it. 07:04.080 --> 07:04.440 Okay. 07:04.470 --> 07:08.160 So now we've got our sign in form and we've got a link to go to to sign up. 07:08.160 --> 07:13.350 But we don't have the register component yet nor any functionality inside here. 07:13.440 --> 07:17.490 And we did take a brief look at text inputs when we were looking at search. 07:17.490 --> 07:24.210 But as we create more significant forms, then we typically use a helper package to help us create forms 07:24.210 --> 07:26.130 and the form functionality. 07:26.130 --> 07:32.430 And the one that we're going to take a look at using with this is called react hook form. 07:32.430 --> 07:35.460 And we'll start to take a look at that next.