Instructor: Before we get too deep
on our signup component,
let's take a second to
kind of do a little bit of design and think
through about exactly what this component needs to do.
In our signing component, the only validation or kind
of feedback we gave to the user was an error message.
If the server turned an error to us.
This time around, however, in our signup component,
there's a little bit more authentication
we need to be aware of.
So let's take a look at a diagram
that's gonna help us out a little bit.
So this is a diagram that models some
of the different authentication logic
or strategies that we need to be aware
of inside this application.
Or excuse me, this component.
So when a user enters email password
and password confirmation.
And so the key here is that there is
both a password and password confirmation.
Now you might be thinking,
Okay it's gonna be kinda the same deal
as with a sign in component.
We want to send this to the back end.
The back end's gonna authenticate this
or kind of validate it in some fashion
and then send back an error message if one exists.
Think about if you really think about it though,
we don't really need to rely
upon our server for checking to make sure
that the password and password confirmations match.
That's really a client side piece of authentication.
That's something that we can just very quickly give feedback
to the user of, Hey, your passwords don't match here.
You need to double check your password
before we're gonna try to post this to, to the API server.
So this entire layer right here is gonna be simply
client side authentication.
So on the client, we're going to make a quick check
and make sure that the two passwords are matching.
If the two passwords are not matching,
of course we're gonna show an immediate error to the user
and not send an API request to create a new account.
If the two passwords do match, however,
that's when we're gonna go down this case of okay
time to actually reach out to our API server,
make a request, and try to create a new account.
And then if that request is successful, great.
We've got a new account made, we can save the token
we get back, we can redirect the user to our feature route,
and we can change our authentication state to true.
Otherwise, just like in the sign-in component,
if we get an error message back
we need to display that error to the user.
And so we've really got two tiers
of kind of validation or error checking logic here.
We've got one tier on the client side
and we've got another tier on the server side as well.
Now we definitely could have put all this logic
onto just the server, but eh, you know
it's really nice to have some immediate client
side validation because it's always instantaneous
and the user gets that feedback right away.
One other thing to be aware of
is that this time around on our
on our server side authentication, we definitely have a kind
of different classes of error messages this time around.
We might get an error message where, hey
you didn't provide email or password
or we might get a validation message
like the email that you're trying to use already is in use.
So perhaps if someone's trying to make an account
with a duplicate email.
So we're definitely get some different types
of validation messages back
from the server this time around as well.
So with this better kind of thought process
on how we're gonna accomplish our validation,
let's get to work on our sign up component.
So in the last section we put together some
of the very scaffolding
just get something to show up on the screen.
So let's continue on this work for right now.
We definitely know that we're going to need reduxForm
and we've already imported that at the top.
So let's get started by making use
of our reduxForm helper by declaring a new form to use.
So we'll say reduxForm
and then we'll wrap sign up separately and inside
of reduxForm we'll place our form name of sign up.
And then we're also gonna need our list of fields here.
So our list of fields are gonna be our email...
Oops.
In an array, email, password,
and I'm just gonna call the last word one password
confirm, like so.
Okay, so this looks good.
This is definitely enough to get started on our form
kind of get something on the page
something we can kind of type into so to speak.
So inside of our render method,
let's start working on the actual form element.
We're gonna pull off our handle submit helper,
and then each of our fields;
email, password, password confirm.
And these are all gonna come from this.props.
It's getting to be kind of a long line there.
Then we'll replace the div that we have right now
with a form tag,
like so.
And now we can go through each
of the different fields that we're gonna have
inside of our component, inside of the signup form.
So we're gonna make a number of fieldset tags.
It's gonna be a form-group
fieldset.
And then inside of each of these we'll have a label.
And the first one is gonna be our email.
We'll have an input.
The type for this one is just gonna stay as email.
We don't need to type on this one
but we will give it a form control class name.
And as usual, this is a bootstrap class name.
Just something to make it look a little bit nicer.
And then we're going to give control over
to this input to reduxForm using the email prop helper.
Now we can just duplicate this three times, like so.
The second time we'll use it for our password.
And so we're gonna change
both the label and the password helper.
And then on the last one,
we'll change it to confirm password.
And rather than the email helper here
we're also gonna take this to be password confirm as well.
Okay, let's give this a shout out in the browser.
We now have three field sets.
Each one of them controls a different field from our form.
Let's flip back over, refresh the page.
And it looks like we've got email,
password, and confirm password.
And they're all pretty nicely styled on here.
I like how they're styled here.
So this is looking pretty good.
Let's go ahead and put on the button
and then we'll probably go ahead
and take a quick break before we start addressing some
of the authentication logic or validation logic, excuse me.
So after all the different fields that we have
we'll place a button when someone clicks on it
it should submit the form
and we'll make sure it's styled like a button.
So it'll have btn btn-primary.
And of course very classic, sign up.
And now we've got our button here
and presumably when we put something in,
we click sign up and that should go ahead and
post our information to our back end, send a request
to the server, and actually create our account.
So we haven't put in any of that logic yet
so that's something we'll take care of really quickly.
Let's also make sure both of our passwords
again are in plain text here.
Let's add on the correct types there as well
just to make sure that we don't --
aren't leaking these plain text characters so
that anyone who's looking over our user's shoulder can see.
So on both of our password inputs
we'll add on a type password.
And now if we refresh in the browser
and now we can't see the password text
which is just what we wanted.
So that's looking pretty good.
Okay, so this is good first steps.
We've got kinda the very basic scaffolding
of our form put down right here.
We have not handled anything about submitting the form
and we've also not handled anything just yet
around validation of the form contents.
So are both things we're gonna have to take care
of inside the next section.
Let's take care of it there.
I'll see you in a few.