Original subtitles

Now that we have our header, the next thing we're going to build is our Sinon page.

Now, if we look at our finished application and we look at the Sinon page, we see that there is a

sign up section and a sign in section there, quite similar with their own custom form input component

and a custom button component.

So before we attach any of the functionality to this component, let's take a look at what functionality

we have available so we can actually sign in using an e-mail and password and that Sinon is going to

be based off of the accounts that we're signing up using this form.

So if a new user signs up using this form, we are able to sign in with that account.

Alternatively, if this step is too extensive, then we can just sign in with Google.

And by using signing with Google, we load any Gmail accounts that the user is currently logged into,

or they can add another Gmail account and log in that way and authenticate into our application with

very minimal effort.

So let's begin.

How do we build this?

Well, first, let's just set up the page.

So let's go back to our application and let's build a sign in and sign up page.

So let's create our folder, sign in and sign.

Let's copy that text, because we are going to have to write this twice to our component, such as sex.

And then also styles SACE now.

We just have to import in all of the usual things that we always have to, including our stylesheet.

And then we are going to use a functional component here.

And the reason we're going to use a functional component and not a stateful class component is because

we're going to keep all of that on our sign in and sign up components, respectively, and then we will

just.

Right sign in front of.

For default.

As for our component.

So.

And now it into our abcess.

Oh, these are leftovers that we don't need from our import.

So let's.

Pages and now.

Let's.

Duplicate this route for Sinon using our new component.

Now, if we navigate to.

In.

We see our page.

So now let's build our sign in component first before we build our sign up component.

Now, the reason we're going to build our Cylon component first is because we're going to set up our

fire based data base in the next section and that is what we're going to use in order to handle any

of our authentication, as well as signing up users.

So Sinon is easier to explain if we do it with Firebase first and I'll show you why.

So let's first just make our files.

Son and Styles that says.

And for our Sinon, we are going to use.

A class component because we have to store what the user's typing in, so let's do a class sign in a

react component.

And in our constructor, we are going to need.

Access to state and our state, what we're going to store is an empty string for email and an empty

string for a password.

In our render, we are going to return a div that contains our entire Sinon component.

And in it will be an H2 for the title.

So here we're going to say I already have an account.

And then let's use a span for our subtext where we will say sign in with your email and password.

Awesome.

Now, for actual form, we're going to use a native form element.

And in it, so we have custom components here that we're not going to use yet, we're going to code

those out later.

But first, I'm just going to put in an input with a name of email and value of email.

This state email.

And then I'm going to set required to be true.

And then we're going to add a label that says email and we're going to repeat this twice so that this

one will say password.

This one's type will be email as well, and this one's type.

We'll be password.

And then at the end, we will have a input with the type of submit.

And here we will all set the value to be.

Submit for let's export this as the default.

So this is all just very basic setup for now, right?

We don't actually have any of the bindings to the code, but what we're going to need to add is we are

going to add on our form and on submit function.

That calls our method handle submit.

Which for now will simply prevent the default submit action from firing because we want full control.

Over exactly what this summit is going to do.

But for now, what we'll do is we will prevent it and then we will clear out our fields.

So we'll set our email and our password back to an empty string.

And that's what we will pass here.

Handles it, and as for our actual imports, what we're going to do is we are going to set a on change

value to point to are on Handal also our handle change.

Function, which also, again, takes an event, except for this, we are going to pull both the value

and the name off of our event target.

The event target will end up being our input element itself, and we want the name value that we just

set as well as the.

Actual value on that target that they've just typed in and what we're going to do is we're going to

dynamically set our state so that it.

Sets that name, so it'll render whatever that value that comes in will be.

If name is password, it will say password and the point to the value that they typed in and then the

same will apply for email, if it's the email, then this event, Target's name will be email, and

then that value will be what they're typing in there.

So this way we can pass the same function.

Inju.

The same input.

And this is awesome.

Because we don't have the right separate functions that do pretty much the same thing by dynamically

setting our property value.

Now, let's impart this into our Sinon page.

Sign in from.

Opponents.

Sign in and let's just render this out and take a look awesome.

So there we go.

There's our form.

We had our submit form.

It clears the field exactly what we're looking for.

OK, now let's actually style this and attach the functionality.