I'm going to close my terminal and I'm going to copy city, I guess, and I'm going to paste it below change-password. Okay, I'm just going to do it with one password for now, so password.

accountInformationForm.js

<Field className='account-information-form__password'
type='password'
title='Password'
placeholder='Password'
name='password'
compont={FormInput}/>

Let's go see what the first one has on the design. Okay, so it's got Change Password okay so let's hit that and it says current password, so let's call it current password. I'm just going to call it current and then I'll say type is a password and title is current password and placeholder is current password okay and then the name is current, okay there we go.

accountInformationForm.js

<Field className='account-information-form__current'
type='password'
title='Current Password'
placeholder='Current Password'
name='current'
component={FormInput}/>

Now what we need to do is basically show this based on a piece of state. Because right now if you go to our app you can see it. Okay, so let's first align it, let's put it on the grid where it belongs. So it needs to be basically exactly where the button is. You'll see it's exactly where the button is so let's put it right there. Let's go to vs code and let's go to accountInformationForm.js and let's go to change password, I guess we never even applied it on the grid. So what we need to do is put another row and we need to call it change password start and current start and change password end and current end, and then that's going to be 64 pixels.

accountInformation.scss

grid-template-rows: [name-s street-address-s] 64px [name-e street-address-e email-s city-s] 64px [email-e city-e state-s zipcode-s] 64px [zipcode-e state-e change-password-s current-s] 64px [change-password-e current-e];

Then we're going to keep the translation of 38 pixels and then we're going to basically put and current here as well okay. And then what we'll do is say

&__change-password,
&__current {
    grid-row: change-password-s/change-password-e;
    transform: translateY(38px);
}

and then if we need this in the media query we'll use it, the change password, and current. But for now, we're just going to apply the same ones because it doesn't matter, but for the media query when we do it, we might use the other ones that's why we have them. Okay so change password start to change password end. They should be right on top of each other, except for this is in the other row, so we have to specify that they both belong in the first column.

So let's say that the grid column is start to middle.

&__change-password,
&__current {
    grid-column: s/m;
    grid-row: change-password-s/change-password-e;
    transform: translateY(38px);
}

Okay now you'll see that they are on top of each other.

So now what we need to do is hide the current password and then show it when we click that button. So let's close out form-fields.scss and let's go to accountInformationForm.js and let's say that in brackets this.state.showPasswords ?, if that's true then we will return this piece of jsx okay and if it's not true we'll just return this button. Alright, now let's tab that over and get that in.

accountInformationForm.js

{
    this.state.showPasswords ?
    <Field className='account-information-form__current'
    type='password'
    title='Current Password'
    placeholder='Current Password'
    name='current'
    component={FormInput}/>
    :
    <Field className='account-information-form__change-password'
    onClick={() => console.log('tryna show passwords')}
    type='button'
    labelTitle='Password'
    title='Change Password'
    name='change-password'
    component={LongGrayButton}/>
}

Then what we want to do is we need to provide this state, we don't currently have it. So let's go up here and let's develop a constructor let's call super and let's say this.state is equal to and then we want to say show passwords and by default this is false okay.

constructor() {
    super()

    this.state = {
        showPasswords: false
    }
}

Let me explain the flow here, this.state.showPasswords is by default false, then we're going to render our content and it's going to go down here and say okay what's this.state.showPassword? It's false by default, so it's going to render this first field and then it reached this colon and it's false, all right. So basically it's going to render this second field, the one after the colon, it's not going to render the first one because it's false. If this is true, right after this question mark it will display this first field, this is the true case.

{
    this.state.showPasswords ?
    <Field className='account-information-form__current'
    type='password'
    title='Current Password'                                                //TRUE
    placeholder='Current Password'
    name='current'
    component={FormInput}/>
    :
    <Field className='account-information-form__change-password'
    onClick={() => console.log('tryna show passwords')}
    type='button'
    labelTitle='Password'
    title='Change Password'                                                 //FALSE
    name='change-password'
    component={LongGrayButton}/>
}

So since it's false it's going to display anything after the colon which is this button. So when we go in here nothing's going to happen except for it'll show our button right. So we need to make it so when we click this button it changes this to the opposite of what it currently is. So let's go to onClick and let's say this.setState and we could get the opposite we could just say this.state.showPasswords and then say not in front of it right, then say showPasswords and set it to that.

This is going to work, let me show you, right it works. Although we don't need to do this because it's gone so we're never going to click it again until it's back and the only way it's going to be back is if showPasswords is true. So basically it's kind of writing extra code, it's kind of dumb to write it this way because the only time we're ever going to click this the button is going to be true so the only other case we can say this too is false so we might as well just set it to false.

If that didn't make sense it doesn't really matter, just understand that we need to set this to false, my bad, sorry that made it really confusing. We need to set this to true so we can show this because this is going to say okay it's true show the password.

So what we need to do now is we need to put the rest of the fields in there, the rest of the password fields and then we need to display them with that. So it should be easy we just have to align them on the grid and yeah. Now what we need to do is we need to back it up an amount of pixels because you'll see that it's down an amount of pixels right. We don't want it down an amount of pixels we want it up.

So let's go into our account-information.scss and let's change this translateY to -38 pixels not plus 38 pixels. Okay now I think that's exactly where it should be, it might be a little bit different. I think it's exactly where it should be, it really doesn't matter, it's just a tiny design thing.

So what we need to do is throw in those passwords and then align them and then put in the button, so let's do that. Okay, let's put in &__new and then let's put in &__confirm. And then let's put them on the grid so let's say that we need another 64 pixels and that's going to be new end, and new start. Then we need confirm start to confirm end and this is going to be another 60 pixels okay so just two more rows 64px and 64px to get those two other fields.

Then all we have to do is copy these paste them in and then change this to new and change this to confirm. Okay so let's just check on our grid one more time, it looks right, all right. All I added were these lines right here new and confirm with the grid column and row in there both on the left side and in their rows. Now the rows are over here which I just added that attached to 64 pixel rows and they're going to have that grid gap of 15 pixels so it's going to work automatically.

So what we needed now is we just need to create those fields. Let's go back to accountInformationForm.js and basically what we want to do is copy this field and paste it. Now it's not going to work because it's not one piece of jsx. What we need to do is either return a div or what we need to do is return an array with keys. So let me just put these in and I'll show you what I'm talking about. Okay, this one is going to be new right, let's go see what it's named actually.

So it's called New Password and Confirmed Password okay, so we're going to say this is New password. That looks alright, now this needs to be confirmed. Okay that looks good.

Now we have this error, so what we need to do is we need to either put it in a div or put it in an array. So let's put it in an array, I'll put a bracket here and I'll go up here after the question mark and put a bracket there, okay that didn't work. So what we're going to do is we're going to use a div. So go ahead and take all these fields here and put a div in here and then pasted it in okay. Now it's one element which means it will work again.

We could have also written a function and done it that way, probably a better way for logic as big as this. All right, so this shouldn't matter because we still have these tags, these classes, so it should align it the way it should be. Now actually, the thing is it might not work because it's not directly a child of the grid, but I think it will, let's try it out. Let's go to account information, and let's hit change. All right, you'll see it kind of works except for current password is not where it belongs. That could be an error with our grid, but what I want to do is, you don't have to do this part right now

Okay so I'm going to come back to this, so just watch me do this. I'm going to cut this and I'm going to pasted it over all of what we just wrote. So what I want to see is if it applies it to the grid because if it does then it's a problem with the div method I was just showing you. Okay you'll see it's in the correct place now for the most part.

So what we need to do is modify our method because this isn't working. So what we'll want to do is let's get rid of this div here, and I swear it should work with an array or a collection of arrays. Okay the reason I wasn't working is because we didn't put commas after these fields, we need commas after these fields. You're going to want to do this, okay so get rid of the div and put in brackets and then put commas after each one of these so there's two commas, one after current one after new.

accountInformationForm.js

this.state.showPasswords ?
    [
        <Field className='account-information-form__current'
        type='password'
        title='Current Password'
        placeholder='Current Password'
        name='current'
        component={FormInput}/>,
        <Field className='account-information-form__new'
        type='password'
        title='New Password'
        placeholder='New Password'
        name='new'
        component={FormInput}/>,
        <Field className='account-information-form__confirm'
        type='password'
        title='Confirm Password'
        placeholder='Confirm Password'
        name='confirm'
        component={FormInput}/>
    ]

Now this will work except for we'll get one of those key errors that we always get when we map over something and don't give it an index or an ID as the key. Okay, so look at this, and you'll see it works.

Now you see we have an error, each child in an array or iterator should have a unique key prop.

This is because it's an array now, so what we need to do is we need to say key is equal to a random number, you could even use math.random, that's a method I've seen before but since it's 3 it's so easy just to say zero and save some computing time, we don't want to compute that random function if we don't need to. And then we can just say 0 1 and 2.

accountInformationForm.js

this.state.showPasswords ?
    [
        <Field key={0} className='account-information-form__current'
        type='password'
        title='Current Password'
        placeholder='Current Password'
        name='current'
        component={FormInput}/>,
        <Field key={1} className='account-information-form__new'
        type='password'
        title='New Password'
        placeholder='New Password'
        name='new'
        component={FormInput}/>,
        <Field key={2} className='account-information-form__confirm'
        type='password'
        title='Confirm Password'
        placeholder='Confirm Password'
        name='confirm'
        component={FormInput}/>
    ]

So a little bit of a tedious thing in react is to provide keys. I'm not sure why you have to do that, I'm not sure why they don't just do that in react automatically for you. Anyway, that should work, let's go ahead and try this out, let's go to google chrome and let's hit account information, let's hit change password and you'll see we don't get that error.

Okay cool, so that works. Now you'll see new password and confirm password are a little bit too far down, but the reality is we've pulled current password up 38 pixels but we haven't done anything with these. So what we need to do it looks like in the design that it doesn't pull those up with it so we can leave those where they are, maybe pull them up a bit because it looks like they are a little closer although you'll see that it's a bigger gap than anything else.

So what we'll do is we'll go to our code and we'll go to account-information.scss and we'll say &new, &confirm. And then we'll just pull them up, okay so that should be good. Let's change this to like I don't know 38 times two thirds so about 25 pixels about, I just want to reduce that a little bit.

account-information.scss

&__new,
&__confirm {
    transform: translateY(-25px);
}

Okay, so now you'll see that it pulls it up a pretty good amount, it looks really close to our design now.

Cool, so now what we need to do is we need to add in this line and these buttons so that when we hit cancel or update it hides the fields, basically it turns it back over to true. So let's do that in the next video, I thought this would be shorter so I was going to do it in this video but let's take a break and get this all in. Make sure you've got it all in and working so we can handle that in the next video.

Okay, let's commit our code.

Terminal

git status
git add .
git commit -m "added password fields"

I'll see you in the next video.

Resources

Source code