Okay, now that we've dealt with the Redux functionality, our next step is to actually create the login
form that our users will use to, well, log in of course, and let's go to our features folder.
And in the account folder let's create a new file and we'll call it Login form dot TSX.
And inside this new component we will use RFC to create the boilerplate.
And inside our login form we're just going to create the components the HTML effectively for list now.
And we'll deal with the functionality soon.
So in the return statement we'll use a container that we get from UI material.
And inside our container we'll give it some properties.
We'll give it a component of paper which will give it the white background.
We'll give it a max width equal to SM, as we don't want our login form to stretch to the entire width
of the component, and we'll give it the SE property and give it some border radius of three to give
it some slightly rounded corners Inside here we'll use box and we'll give our box the display and flex,
and we'll give it the flex direction of column.
And we'll use align items of center.
And we'll give it a margin top of eight.
And at the top inside the box we'll just have an icon for lock outlines from my icons material.
And we'll give this some props.
We'll give it SE property and give it margin top of three.
And we'll give it a color of secondary.
And we need to use dot main.
In this instance of using color I appreciate it's a bit weird sometimes.
Sometimes we can use secondary.
Sometimes we have to use this secondary main and it's annoyingly inconsistent.
But inside this SE property then that's how we have to define it.
And we'll also give the font size of 40.
And then we'll use typography below this.
And for the label we'll specify.
Sign in and in the properties for the typography we'll give it a variant of H5.
Below this typography we'll have another box.
And we'll give this some properties.
We'll give it a component.
And this is what we're going.
To use for our form.
So we'll specify a form as the component.
Just a normal HTML form.
We'll give it a width of 100%.
So it takes up all of its available space inside the container.
We'll use Display Flex once again and we'll give it a flex direction of column.
And then we'll use the gap equal to three.
And we'll give it a margin above and below.
So.
Margin y in this case.
And we'll also set this equal to three.
And then inside here we can utilize.
Our inputs.
So we'll use the text field which gives us the styled input from material UI, make it self-closing
and we'll give it the properties this needs.
We'll make it full width.
We'll give it a label equal to email.
And we'll also make this one autofocus.
So when this component loads then the cursor is inside the email box.
And below this one we'll have another text field again self-closing.
And we'll use the full width again.
We'll give it a label equal to password.
And we'll give this one a type equal to password so that it hides the characters as they're being typed.
And then we'll utilize a button.
So we'll specify a button.
And inside the button we'll use sign in.
And for the button properties we'll give it a variant of contain.
And below the button we will use typography again.
And we'll give this the property and say text align is going to be center and inside the typography
we'll just say don't have an account question mark.
And then inside here we'll use typography once again.
And we'll use the components equal to link which we get from React Router Dom and say two equals and
then forward slash register.
And we'll give it a color equal to primary.
And inside the typography we'll use sign up.
So that is our login form.
And we will next head over to our routes and just double check what we have inside our routes.
Did we create one for login?
We did not.
So let's also add a route path for the login.
And we'll just use forward slash login.
And I've got my doubts about why I've been using forward slash inside these routes.
Now I'm looking at this because whilst we do need the forward slash when we use them in the two, which
we're going to use soon.
I don't think we need these forward slashes and I'm just going to remove them.
Obviously they haven't done us any harm because everything was working.
But now we've saved ten characters worth of code on our page so far.
By removing those forward slashes, we only need the forward slash when we actually use the route to
navigate to in our components, but not when we're declaring the routes like so.
And then for the login, I'm going to use the component as the login form.
And let's just go to our navbar and see what we have inside here and what we should have.
I think we enabled this earlier because we declared the routes up here, and we got the path for login
there as well.
So what this should mean if we go back to the browser, is I should be able to click login.
And let's just refresh the page and click login.
And we get taken to our sign in page.
And if we check this in dark mode great.
That looks fine as well.
And we've got the don't have an account.
Then we can sign up.
I think I should have a bit of space in between them.
The text here and the sign up, which I do not have.
So let's just add a bit of text in or a bit of space in our login form.
And I'll just use the property in this case and just give it margin left of three.
And if I go and take a look then maybe a bit too much margin there.
Let's give it two and a bit more like it.
Okay.
So now we've got our sign in form and we've got a link to go to to sign up.
But we don't have the register component yet nor any functionality inside here.
And we did take a brief look at text inputs when we were looking at search.
But as we create more significant forms, then we typically use a helper package to help us create forms
and the form functionality.
And the one that we're going to take a look at using with this is called react hook form.
And we'll start to take a look at that next.