All right, So now we want to create our login screen or sign in screen.
Ultimately, this link right here will take us to it.
Now we're going to have a couple forms, the login form, the register, and I believe a couple others.
So I want to actually create a form container component that we can wrap these forms in.
That'll give it a, you know, it'll make it less wide.
So it should only be probably like from here to here.
So let's create that first.
So I'm going to go to front end components and we're going to create a new component called form container.
Form container JS.
And I'm going to bring in a couple things from React Bootstrap.
So let's import.
We want the container.
I don't know why that's not working.
Container And then we also want the row and column so row and call.
All right now.
What I want as a rapper here.
A rapping element is the container.
So let's add that.
And then inside the container we're going to have the row.
So let's say row.
Oops.
Row.
We're going to give it a class name of justify content center.
So on medium screens, it will justify the content to the center.
All right.
And then let's in the row, we're going to have our column.
And our column is going to on extra small screens, just be stacked.
So it'll take up all all the 12 units on medium screens.
It'll take up half.
Okay, So let's come over here.
And now we just want to put in the children, which is going to be passed in as a prop.
So up here.
Let's pass in here.
We want to destructure and say children.
So now we can just wrap whatever we want in this form container component.
So we'll save that.
And now let's go to actually we have to create a new screen.
So in screens we're going to create a login screen dot js.
Okay.
And let's see, we're going to bring in a couple of things.
It's going to be a form.
So we need we're going to use component state.
So let's bring in use state.
Let's bring in link because I want to have a link to the registration form as well.
So we'll say import link and that's going to be from.
React Router dom.
Okay.
And then we're going to bring in a couple of things from React Bootstrap.
We want the form, the button, the row and the column.
And we also want to import our form container that we just created.
Now let's create our component level state.
So we'll say we want email and password, we'll have the default will just be an empty string.
We're going to have a submit handler as well.
And.
For now, we'll just go ahead and console log submit.
Now, as far as the output here, the return, let's do the form container.
Okay.
So form container that's going to wrap everything inside that.
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
handler.
And then inside that we're going to have a form group.
So let's say form dot group and we're going to give it yeah, we'll give it a control ID of email.
And let's also give it a class.
Yeah, we'll go right here and let's say class name and we're going to do MY3.
So that will give it some margin on the top and bottom.
And let's see, we shouldn't have to form groups here.
This one should actually just be form.
Okay, So in the form group, we're going to have a label.
This is going to be for the email address.
Then we'll have our form control and that's going to have a couple attributes.
So the type is going to be email.
The placeholder, enter email value will be our our email and our state, and then we'll have an on
change that's going to call, set, email to update that piece of state.
And then we want to basically do the same thing for the password.
So I'll go ahead and grab the form group.
And we'll paste that in and we're just going to change this.
Let's see that, that, that, that, that and that to password accept set password should have an uppercase
P And of course we don't want password address, so we'll get rid of that and.
Make that uppercase type is going to be password value is going to be password from our state, and
then that should do it.
Now under the last form group here, we want our button.
So that's going to be a button.
With the type of submit.
The variant is going to be primary class name.
I'm just I'm actually going to do margin top to.
And then we want an area where we can have a link if, you know, if they want to register, if they
don't have an account.
So let's go below the form still within the form container and let's add a row, the class of pi.
And I just want to close that.
So and then inside the row, we'll have a column and that column, actually, we don't need any props
on that and we'll just say new.
Customer and then we'll have a space and just do a link to the register page, which is going to be
slash register.
And that should do it for now.
This isn't going to work.
It's just going to console log if we submit it, but at least we have the screen.
So let's go ahead and add the route.
So we're going to go to our index.js and our front end and we're going to bring in the login screen.
And then we're going to put that right in here.
So slash login will load the login screen component.
So now let's come over here and click sign in.
And now we have our sign in page.
And of course, right now, if we.
If we go ahead and actually let's see this here.
So if you're seeing this, you probably have LastPass installed.
See how I have these icons right here?
These LastPass icons, for some reason this happens.
So I'm just going to disable that.
Let's see if you go to manage extensions and I'm going to search for last.
So if I disable that.
And reload.
We shouldn't see that issue anymore.
So let's just put whatever in here and we should just see a console log of submit.
And that's all I want to do in this video.
So we have the screen and then we also have our action set up.
We just need to basically dispatch that and send this information.
So that's what we're going to do in the next video.