In the last section we finished up the input component and we also do this smaller factor on our blog
and form.
So now we make reference to this dot state DOT email to get the current e-mail address that's in that
input.
We could have again just as easily let this thing as text and we could text here absolutely no issue.
However I find it a lot more clear to make sure that my property names match up to the actual meaning
of the property as well.
So in this case this piece of state right here contains the e-mail address so this does state that e-mail
makes a lot more sense than this start state text.
OK.
We're going to move forward now and we are going to focus on hooking up the password input.
So we've already got her e-mail but we also need to receive a password as well.
And that's the purpose of this card section component that we placed right here.
It was going to wrap the password input so we're going to use the same strategy as we did with the e-mail.
We're going to initialize a piece of state called password that is going to hold the password that's
sitting inside the input.
We will then create a new input tag and place it inside of this existing card section.
So let's go ahead and get started.
First we will start off by initializing another piece of state called Password.
And it's just that easy.
Next we'll go on down to the dangling card section that we've got and I'm going to turn this into a
expanded tag and then side if you will place the input.
So we'll say input and then I will make it a multi line tag like so I know that we're gonna need to
pass a lot of props.
I'll give it a placeholder of lower case password again.
I'd like to make sure that the placeholders that I have for my inputs kind of look like what the user
might enter into that field.
So in the case of the e-mail having a placeholder like user ID email that makes sense for the password.
And you know the password is different for every one song and put lowercase password.
Just to kind of make people think OK you know this is my password whatever.
Next we will tell this input what its value is supposed to be.
So we'll say hey your value is going to be this state DOT password.
And then we will add on the onchange text event handler so on change text and remember we pass this
thing a function and whatever we pass to it will be text that the user just entered.
So enter in password as the argument whenever the thing gets called We will update our password piece
of state.
So again I want to point out and I know that I point this out all the time but honestly it leads to
a lot of confusion.
Just remember that the argument that I receive here I'm I'm calling it password but it is the text that
the user just entered.
So I can call this password I can call it text I can call it new update whatever I want to call it.
I choose to call it password.
Just make sure that it's really clear hey this is the password that the user just typed in.
Now the very last thing that we need to do is make sure we pass in a label as well.
So I'm going to add in a label property and for this I'll just say keep it nice and simple just say
password.
That's all we really need here.
All right.
So let's test out the simulator.
I will refresh and all right here's our password field.
So let's now test it out and click in and start typing out my secret.
Oh wait a minute.
Oh.
Our password is being answered in plain text right here which is definitely not the intent.
We definitely don't want to make sure we don't want our password to be available in plain text where
say anyone looking over this person's shoulder is going to be able to see that the entered password
here.
So we need to make sure instead that the paths are going to show up as like stars or something to the
user after they enter.
Fortunately that text input tag that we've been using as kind of the primitive behind the input component
supports secure text entry or kind of password input.
All we have to do is pass a prop to our text input tag.
By the way I'm in my input component right now so I'll pass an additional proc to the textbook input
here and tell it hey you are made for showing a password please.
Surely your characters with an asterisk or something like that just to obstruct anyone from looking
over this person's shoulder.
So to do so all we have to do is add in a nother property called Secure text entry.
If we pass in secure text entry of true then the password will be basically the input is going to be
obstructed or it's the obfuscated.
Now you'll notice that yes Lintas complain here.
It says value must be omitted for boolean attributes.
So what this means to say is you'll notice that I am passing in a prompt secure a text entry of true.
This is a little bit of a gotcha with GSX.
Now let me love you very clear.
This is valid.
GSX that we have right here but by convention whenever we have a boolean property so we're just passing
something as true.
In this case you are just flat out true.
We can take a little bit of a shortcut by just listing the property.
So just by listing secure text entry This means that we're going to pass in true or false whatever it
might be.
Now we do want to make sure that our input is not always showing a secure Test century.
We want to be able to be customized by the parent component.
So the parents decide you know what yes I do want this thing to be hidden or I want it to be or not
hidden by want this to be a secure Test century or do you not want it to be.
So to make sure that's the case we will add in another prop short and put it will take secure text entry.
So we're asking it the exact same thing now that we are going to use some prop here.
OK.
Now we do in fact have to you assign this to a prop so I'm going to assign it the proper security next
century.
So now if inside of our component when we create an input tag if we pass in secure text entry of True
that will be passed to our tag as true.
And if we pass false or undefined first security next century the thing is not going to consider itself
to be a password input.
So now all we have to do is flip back over to our blog and forum and we're going to decide of our two
inputs which one needs to be secure next century.
So the email one probably doesn't need security next century like we just want the user to see what
that thing looks like or you know what the actual value is that they've entered.
So on this one we will not enter in any property whatsoever.
So when the input is created it's going to consider secure text entry to be undefined.
So we're going to pass undefined to this product right here and undefine with GSX is basically the same
thing is false.
So it's going to think that OK.
Must not want secure text entry.
But in the case of our password field we do want that secure text entry want to pass in secure text
entry.
True.
So to do that we can just say secure text entry and again by just listing this prop it will show up
inside of the input as being a value.
True like just listing it means it's going to show up as the value true inside of this component.
So now when we render this input input secure text entry is going to come in as true.
We're going to pass true to the text input and boom there you go.
OK let's test something a simulator.
Now I'll refresh and I'll put in my user G-mail dot com.
OK it looks good and my password and perfect so it's nicely obfuscated.
Nice round dot.
So anyone looking over our user shoulder is not going to be able to see this person's password in plain
text.
OK.
This looks fantastic.
I think we're just about done with the form.
The last thing we need to do is check to see whether or not the users email and passer is correct.
Like you know whether or not they actually entered the correct logon information.
So let's continue the next section and start.
Focus on doing the actual authentication part of our application.