1 00:00:00,140 --> 00:00:04,970 All right, So now we want to create our login screen or sign in screen. 2 00:00:05,330 --> 00:00:08,510 Ultimately, this link right here will take us to it. 3 00:00:08,540 --> 00:00:15,410 Now we're going to have a couple forms, the login form, the register, and I believe a couple others. 4 00:00:15,410 --> 00:00:20,590 So I want to actually create a form container component that we can wrap these forms in. 5 00:00:20,630 --> 00:00:24,680 That'll give it a, you know, it'll make it less wide. 6 00:00:24,680 --> 00:00:28,040 So it should only be probably like from here to here. 7 00:00:28,040 --> 00:00:29,930 So let's create that first. 8 00:00:29,930 --> 00:00:36,020 So I'm going to go to front end components and we're going to create a new component called form container. 9 00:00:38,400 --> 00:00:40,260 Form container JS. 10 00:00:42,940 --> 00:00:46,660 And I'm going to bring in a couple things from React Bootstrap. 11 00:00:46,660 --> 00:00:48,460 So let's import. 12 00:00:48,490 --> 00:00:50,770 We want the container. 13 00:00:54,130 --> 00:00:55,360 I don't know why that's not working. 14 00:00:55,360 --> 00:01:02,920 Container And then we also want the row and column so row and call. 15 00:01:03,610 --> 00:01:04,810 All right now. 16 00:01:05,960 --> 00:01:09,050 What I want as a rapper here. 17 00:01:09,080 --> 00:01:11,660 A rapping element is the container. 18 00:01:11,810 --> 00:01:13,400 So let's add that. 19 00:01:13,400 --> 00:01:17,450 And then inside the container we're going to have the row. 20 00:01:17,480 --> 00:01:19,340 So let's say row. 21 00:01:19,380 --> 00:01:19,910 Oops. 22 00:01:20,250 --> 00:01:21,050 Row. 23 00:01:21,620 --> 00:01:25,850 We're going to give it a class name of justify content center. 24 00:01:25,850 --> 00:01:30,020 So on medium screens, it will justify the content to the center. 25 00:01:32,510 --> 00:01:32,930 All right. 26 00:01:32,930 --> 00:01:37,670 And then let's in the row, we're going to have our column. 27 00:01:38,440 --> 00:01:43,090 And our column is going to on extra small screens, just be stacked. 28 00:01:43,090 --> 00:01:48,010 So it'll take up all all the 12 units on medium screens. 29 00:01:48,010 --> 00:01:49,450 It'll take up half. 30 00:01:49,870 --> 00:01:51,520 Okay, So let's come over here. 31 00:01:51,520 --> 00:01:57,820 And now we just want to put in the children, which is going to be passed in as a prop. 32 00:01:57,820 --> 00:01:59,200 So up here. 33 00:02:01,000 --> 00:02:02,020 Let's pass in here. 34 00:02:02,020 --> 00:02:05,080 We want to destructure and say children. 35 00:02:05,080 --> 00:02:09,970 So now we can just wrap whatever we want in this form container component. 36 00:02:09,970 --> 00:02:11,320 So we'll save that. 37 00:02:11,320 --> 00:02:15,820 And now let's go to actually we have to create a new screen. 38 00:02:15,820 --> 00:02:20,620 So in screens we're going to create a login screen dot js. 39 00:02:23,780 --> 00:02:24,410 Okay. 40 00:02:24,410 --> 00:02:27,410 And let's see, we're going to bring in a couple of things. 41 00:02:27,830 --> 00:02:29,060 It's going to be a form. 42 00:02:29,060 --> 00:02:31,820 So we need we're going to use component state. 43 00:02:31,820 --> 00:02:33,800 So let's bring in use state. 44 00:02:35,090 --> 00:02:41,770 Let's bring in link because I want to have a link to the registration form as well. 45 00:02:41,780 --> 00:02:45,980 So we'll say import link and that's going to be from. 46 00:02:46,810 --> 00:02:49,810 React Router dom. 47 00:02:51,130 --> 00:02:51,580 Okay. 48 00:02:51,580 --> 00:02:55,390 And then we're going to bring in a couple of things from React Bootstrap. 49 00:02:55,390 --> 00:02:58,450 We want the form, the button, the row and the column. 50 00:02:58,450 --> 00:03:02,500 And we also want to import our form container that we just created. 51 00:03:04,740 --> 00:03:07,620 Now let's create our component level state. 52 00:03:07,620 --> 00:03:14,360 So we'll say we want email and password, we'll have the default will just be an empty string. 53 00:03:14,370 --> 00:03:16,890 We're going to have a submit handler as well. 54 00:03:16,890 --> 00:03:17,940 And. 55 00:03:18,700 --> 00:03:22,090 For now, we'll just go ahead and console log submit. 56 00:03:22,570 --> 00:03:29,830 Now, as far as the output here, the return, let's do the form container. 57 00:03:30,260 --> 00:03:30,570 Okay. 58 00:03:30,580 --> 00:03:34,780 So form container that's going to wrap everything inside that. 59 00:03:34,780 --> 00:03:40,420 I'm going to have an H one that says sign in and then we're going to have our form that has our submit 60 00:03:40,450 --> 00:03:41,290 handler. 61 00:03:42,470 --> 00:03:46,490 And then inside that we're going to have a form group. 62 00:03:46,700 --> 00:03:53,990 So let's say form dot group and we're going to give it yeah, we'll give it a control ID of email. 63 00:03:56,480 --> 00:03:59,390 And let's also give it a class. 64 00:04:00,250 --> 00:04:05,530 Yeah, we'll go right here and let's say class name and we're going to do MY3. 65 00:04:05,530 --> 00:04:08,410 So that will give it some margin on the top and bottom. 66 00:04:08,770 --> 00:04:11,830 And let's see, we shouldn't have to form groups here. 67 00:04:11,830 --> 00:04:14,050 This one should actually just be form. 68 00:04:15,960 --> 00:04:19,410 Okay, So in the form group, we're going to have a label. 69 00:04:19,410 --> 00:04:21,360 This is going to be for the email address. 70 00:04:21,360 --> 00:04:24,720 Then we'll have our form control and that's going to have a couple attributes. 71 00:04:24,720 --> 00:04:26,700 So the type is going to be email. 72 00:04:26,730 --> 00:04:33,170 The placeholder, enter email value will be our our email and our state, and then we'll have an on 73 00:04:33,180 --> 00:04:37,650 change that's going to call, set, email to update that piece of state. 74 00:04:38,350 --> 00:04:41,470 And then we want to basically do the same thing for the password. 75 00:04:41,470 --> 00:04:43,800 So I'll go ahead and grab the form group. 76 00:04:44,610 --> 00:04:48,720 And we'll paste that in and we're just going to change this. 77 00:04:49,150 --> 00:04:58,020 Let's see that, that, that, that, that and that to password accept set password should have an uppercase 78 00:04:58,050 --> 00:05:04,800 P And of course we don't want password address, so we'll get rid of that and. 79 00:05:05,950 --> 00:05:13,840 Make that uppercase type is going to be password value is going to be password from our state, and 80 00:05:13,840 --> 00:05:14,950 then that should do it. 81 00:05:14,950 --> 00:05:18,580 Now under the last form group here, we want our button. 82 00:05:18,580 --> 00:05:21,070 So that's going to be a button. 83 00:05:22,360 --> 00:05:23,800 With the type of submit. 84 00:05:23,800 --> 00:05:26,650 The variant is going to be primary class name. 85 00:05:26,650 --> 00:05:30,190 I'm just I'm actually going to do margin top to. 86 00:05:32,230 --> 00:05:38,800 And then we want an area where we can have a link if, you know, if they want to register, if they 87 00:05:38,800 --> 00:05:39,670 don't have an account. 88 00:05:39,670 --> 00:05:47,250 So let's go below the form still within the form container and let's add a row, the class of pi. 89 00:05:47,530 --> 00:05:49,840 And I just want to close that. 90 00:05:50,770 --> 00:06:00,130 So and then inside the row, we'll have a column and that column, actually, we don't need any props 91 00:06:00,130 --> 00:06:02,890 on that and we'll just say new. 92 00:06:03,650 --> 00:06:12,140 Customer and then we'll have a space and just do a link to the register page, which is going to be 93 00:06:12,140 --> 00:06:13,400 slash register. 94 00:06:14,450 --> 00:06:15,680 And that should do it for now. 95 00:06:15,680 --> 00:06:16,700 This isn't going to work. 96 00:06:16,700 --> 00:06:20,240 It's just going to console log if we submit it, but at least we have the screen. 97 00:06:20,240 --> 00:06:22,070 So let's go ahead and add the route. 98 00:06:22,070 --> 00:06:27,650 So we're going to go to our index.js and our front end and we're going to bring in the login screen. 99 00:06:30,420 --> 00:06:34,980 And then we're going to put that right in here. 100 00:06:35,220 --> 00:06:39,960 So slash login will load the login screen component. 101 00:06:40,510 --> 00:06:43,180 So now let's come over here and click sign in. 102 00:06:43,180 --> 00:06:46,110 And now we have our sign in page. 103 00:06:46,120 --> 00:06:48,730 And of course, right now, if we. 104 00:06:51,220 --> 00:06:54,780 If we go ahead and actually let's see this here. 105 00:06:54,790 --> 00:06:58,060 So if you're seeing this, you probably have LastPass installed. 106 00:06:58,090 --> 00:07:00,010 See how I have these icons right here? 107 00:07:00,040 --> 00:07:03,010 These LastPass icons, for some reason this happens. 108 00:07:03,010 --> 00:07:05,440 So I'm just going to disable that. 109 00:07:05,860 --> 00:07:11,910 Let's see if you go to manage extensions and I'm going to search for last. 110 00:07:11,920 --> 00:07:13,870 So if I disable that. 111 00:07:14,700 --> 00:07:15,990 And reload. 112 00:07:15,990 --> 00:07:18,120 We shouldn't see that issue anymore. 113 00:07:18,790 --> 00:07:23,560 So let's just put whatever in here and we should just see a console log of submit. 114 00:07:23,560 --> 00:07:25,600 And that's all I want to do in this video. 115 00:07:25,600 --> 00:07:30,250 So we have the screen and then we also have our action set up. 116 00:07:30,250 --> 00:07:33,850 We just need to basically dispatch that and send this information. 117 00:07:33,850 --> 00:07:35,770 So that's what we're going to do in the next video.