So first thing we want to start off with is the change password button. You'll see in our design here, if I login and hit login, and go to account information you'll see we have a password button right.

So let's go ahead and develop another component so we can have this okay. Let's go to formFields.js and what I want to do is copy FormButton or we could even put in a custom case but it doesn't matter really, but I'll copy it, and let's put long gray button. Now what we want to do is we want to not give it the short ability and we want to get rid of this and we want to say form-button and form-button__button and then we want to say with-gray I guess, I just want to be quick here doesn't really matter what we put.

Okay so now what we want to do is apply this class and we need a label as well. So that label is going to be the same label as what we have on our form input. So what we want to do is basically take this label and we want to throw it in here above our button and then let's rename this to form button label.

Then what we want to do is we want to go to our form-fields.scss, then what we want to do is copy form button or even what we want to do is copy label form input and put it in form-button. So if it exists then yeah it's going to apply that class of font size 14 pixels and it's going to be that gray color.

So what we want to do now is we want to take this display grid with a grid gap and we want to apply it in here as well. So what we really should do is we should take this code right here cut it and we should apply it in our own. We should say .form-button-long-gray or something right and then paste that in there.

Okay, then what we'll do is copy this class name. Let's head over to formFields.js and let's just get rid of form button here and let's put form-button-long-gray. Now what we want to do is rename these obviously form-button-long-gray, and form-button-long-gray__button and then we can get rid of the with gray.

formFields.js

<div className={'${className} form-button-long-gray'}>
    <label className='form-button-long-gray__label'>{title}</label>
    <button className={'form-button-long-gray__button'}
            type={type}
            {...input}
            onClick={onClick}
    >
    {title}
    </button>
</div>

Then let's go back into form-fields.scss and let's take this button right here and let's put it in this form-button-long-gray and we should be good. We want the background color to be #999. Okay, so that's our scss form-button-long-gray, we've applied all these classes into our form-button-long-gray button. Now let's use it, let's go into account information form and what's uncomment this and let's say account information form change password.

I'll say history.push, we don't want to do that so we'll say tryna show passwords and then type is going to be of button because we don't want to submit the form and the title is going to be Change Password and the name is going to be change-password.

Okay so now what we need to do is we just need to apply this target. Let's go see what it looks like though and we need a change to form one gray button. So change it along the button and make sure you have that import in there with these, and leave formButton in here because we're going to need it.

accountInformationForm.js

import { FormInput , FormButton, LongGrayButton } from '../formFields';

<Field className='account-information-form__change-password'
onClick={() => console.log('tryna show passwords')}
type='button'
title='Change Password'
name='change-password'
component={LongGrayButton}/>

Okay, let's try this out. You'll see we have change password but the background is still green so let's go see what's going on there. I'm going to reload the page because it shouldn't be green, okay perfect.

Let's check the design, and it looks very similar. Let's indent this Change Password label a bit and yeah that's what we need to do, so it's 20 pixels if I remember. So let's go into form-fields.scss, and let's just say that the label on a button like this has a padding left of 20 pixels, and that should push that over a bit, there we go.

form-fields.scss

&__label {
    padding-left: 20px;
    font-size: 14px;
}

Now what we need to do is push it down a bit because you'll see that it goes down about halfway through this button right here. So what we need to do is, it looks like that might line up, let's check, yeah it lines up perfectly.

So basically what we need to do is put it down at the height, so we need to put it down about 38 pixels. Let's go into our code and let's just say in account-information.scss let's go down here and let's apply change password and we'll just say transform translate y 38 pixels.

account-information.scss

&__change-password {
    trnasform: translateY(38px);
}

Okay now let's see what that looks like. All right, it looks like it's where it needs to be.

This says password though, so let's rename it just to say password instead of change password, the button however still says change password. Okay so let's go back to account information form, let's make the title just password and we're good. Okay so that's how we put that in.

Now what we need to do is we need to make it so, oh wrong one. We want this to say change password we want the... I guess it uses the same one, we'll say button title is equal, or we'll call it labelTitle is password.

<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}/>

And then we'll head over into formFields.js and we'll say that this takes in a property of labelTitle instead of title, and we'll have to include that in here as well, the order doesn't matter on this constant here but I want to put it like it is or at least close enough to what we have in the kind of formation over here.

formFields.js

export class LongGrayButton extends Component {
    render() {
        const { className, labelTitle, title, type, onClick, input } = this.props;
        return (
            <div className={'${className} form-button-long-gray'}>
                <label className='form-button-long-gray__label'>{title}</label>
                <button className={'form-button-long-gray__button'}
                        type={type}
                        {...input}
                        onClick={onClick}
                >
                {title}
                </button>
            </div>
        )
    }
}

Let's check it out, and let's go to Chrome. You'll see when we hit account information it's the way it should be.

So what we need to do is we need to make it so when we hit change password it shows our password fields. So let's do that in the next video, let's go and commit our code.

Terminal

git status
git add .
git commit -m "built long gray button component and placed instance of it on account information form to create change password button"

Okay, I'll see you in the next video.

Resources

Source code