Okay.
And once we're done with the register page.
Up next, let's work on the logging page.
And since we already created a form component, this should be much faster.
First, let's start with spring cleaning.
So again, I want to remove all of the tabs because it's getting really busy.
I also want to collapse all of the folders and all that and we're looking for the pages.
And more specifically, we want to grab the login one.
So in here in the browser we can simply navigate this is what we should see.
We're looking for two things from the components logo and form row.
Again, I'll try to use the auto import, but since we also need a wrapper, I think that's the one
I'll copy and paste as side note can actually copy and paste both of them.
But like I said, I'll try to rely on auto import.
So log in one over here, copy and paste the same wrapper.
And then when it comes to return.
Instead of the div.
We're going to go here with a wrapper.
And then inside of the wrapper.
Let's start with the form.
That's our component.
No action here, but we do want to add a class name.
This is a global class, a form one, and then let's go with login one.
As you can imagine, pretty much most of it is going to be exactly the same.
The difference, of course, is that in this case, we're working on the login page and right above
the heading for let's add a logo.
A logo here, and for some reason it's not importing.
That's not nice.
Notice if we all have some kind of error inside of the page, which in this case React is complaining
that, well, it doesn't have access to the logo.
We'll have this screen again.
The error that we currently have is not 404.
And since we have the check in the error page and since we only return the not found if the error is
404, therefore we have right now the something went wrong.
And notice again it's a reference error logo is not defined.
So you know what?
I'm not going to waste my time too much and I'm just going to import.
So I'm just going to copy and paste.
Yep.
Everything is correct.
And now let's set up a few form rows right after the heading four.
So we'll go over here with form row.
Then type in this case is going to be equal to an email.
Then we want to go name and we'll set it equal to email as well.
And then we have default value and this one will be again equal to that.
John At gmail.com.
So.
John At gmail.com.
Let's close this component.
Then we want to go with another form row and this is going to be for the password.
So let's copy this one.
And let's just change these values.
So instead of email, it's going to be password.
Then name is going to be equal also to a password.
And as far as default value, we're going to go with secret one, two, three, and then we'll have
two buttons.
One is going to be for submit and one is going to be for the demo user.
So eventually there's also going to be functionality to just navigate around the application without
the register or login.
So for that we want to go with button.
Who out here type is equal to a submit.
Then as far as the classes, we're going to go with BTN and then BTN hyphen block and then inside of
the button we're just going to type submit.
Then let's copy and paste.
Now, this is not going to be type submit.
Make sure you set this equal to a button.
Then BTN and BTN block stays the same.
We just need to change the text.
So in this case, we'll say explore the app.
Let's save this.
Okay, beautiful.
And then at the very end we'll have the same.
Paragraph like we have in the register, and I think it's just going to be faster if I navigate back
here.
Copy.
And of course, we'll just have to change the values.
So in this case, I'm going to say not a member yet.
So let me just remove the first one.
And I'm going to add here yet.
And of course, we want to navigate to a register.
And change this text as well.
So in this case, we'll set it equal to register.
And with this in place, we are ready to set up the optional CSS for the login and register page.