All language subtitles for 017 Sign Up Component_en

OK, so now that we have our ability to store users, let's actually create our sign up.

We'll go back to our components and we will make our sign up component.

So let's just add the regular files like we always do, sign up component and sign up dot Stiles.

Sarsae.

We are importing react.

And we are going to import our form input.

Because we need our form input.

And we also need our custom button.

And we also need our off.

As well as our create user profile document.

From Firebase.

Because we are creating and authenticating new users.

Now, let's bring in our stylesheet.

And create a stateful class.

Because just like our Sinon, we need to store what the user is typing into our form inputs, so we're

going to have our component.

And we are going to do.

This state is equal to a display name.

Of empty string.

Email.

And then confirm password.

All of empty strength, that's what the user is going to type in to those fields.

Now, what we'll do is we will in our render.

Ranadive, we've got to return and put this in the return.

So we'll have our Divx.

That'll have our class name of sign up.

And inside will be an H2.

With the class name of title.

And it will say I already or so I do not have a account.

And then our span will be.

Sign up with.

Your email and password.

And then we'll have a form.

And just like our son and for form, it's pretty much going to be very similar, right?

Class name, sign up.

Form.

And our on submit will be this function that we will call handle submit, which we haven't written yet,

but we will later.

We need form inputs and we're going to need four of them.

But for now, for this first one, it will be a type of text because this will be the display name.

Name, display, name.

Value, and then we got a D structure off those four values.

From our state.

We need display in an email.

Password and confirm password.

So the value of Passan will be display name.

On change will be a method to handle change that we also need to write.

And then the label will be display name.

And this will be required.

So we just need to duplicate this four times.

Except the second type will be e-mail, because imports have their own e-mail where they require you

to have the at symbol in it in order for it to be a valid email string.

This will be email.

This will also be email.

And the second and third one will be password, and they will automatically hide.

The actual.

Text as the user types in.

And the same for this one.

So we'll call this confirm password.

Confirm password.

Now, if we are missing oh, so we got to make sure that these form inputs are all closing properly.

We need our final custom button.

To be typesof.

Because we just need to trigger the summit.

And then inside, we will say.

Sign up.

And now that we have our component, let's just export default.

And let's write those functions.

Let's start with Handal submit.

Now, handle submit will be an async function that gets the event.

And what we will do is prevent the default submitting, right?

We want to prevent the default action of that a form submit action.

And what we want to do here is we want to do almost the same thing we're doing with our objects when

we had a Google authentication action happen.

Right.

So similar to our apgar's, except this time we are manually creating it.

So how does that work?

Well, first we are going to check if password and the confirm password don't match, because if they

don't match, then we don't want to proceed.

So we want to just alert that passwords don't match.

Let's just use a double quotes here.

And then we will return from this whole function because we don't want to do anything else if their

passwords don't match, we want them to fix that.

Then we are going to do a try catch block.

And inside of our tri, we're going to use a new auth method that comes with that odd library, and

what we're going to say is we're going to get yuzu, right?

We're going to destructo to the user off the return of the wait for off dot create user with email and

password.

So this one creates, as we read right there in that little dropdown, creates a new user account associated

with the specific email address and password.

Right now, once this is successful, the user gets assigned to our application from the authentication

and then it gives us back a user auth object.

But that user off object is on the key user, which is why we want to do that structure that way.

So create user with email and password and then we'll pass it.

The email and password that we have just this structure off our state.

Once we get that back, we want to run our create user profile document method with the user and the

display name value, which chozen as an object right where the name goes to the value.

And then if there's an error, we want to console error the error.

So if anything happens in that process, whether it can't fetch it or it can't create it, we want to

throw an error.

If this succeeds right, then we want to reset our state.

So we're going to wait for this to finish.

And when it does, then we will run this set state and we want to set our state equal to.

Our initial state where everything is empty.

And now.

After this, we want to write our handle change and our handle change method is going to look almost

identical to our Sinon one.

We are just going to structure off of the event the name and the value from the target.

And then we're just going to set St..

And dynamically set the name Valette to the value value.

And this has to be an object.

OK, now that our sign up component is finished, let's just apply the styles.

So what we'll do is very similar to Sinon.

We'll say display flex flex direction of column, because we want all those elements vertically aligned.

Right.

And then we'll set the width to three, 80 pixels.

And then on the title will set a margin of 10 pixels, top bottom and zero pixels left and right.

And now let's bring our sign up component into our sign it and sign up page.