So the first thing we want to do is close all of our tabs here, make sure our project is running. And let's head over to the account.js component. All right so we have it showing us our component based on whichever one's active right. So what we want to do is we want to be able to use account information okay, so you get the idea you click on Account Information or project and it will show you the account information tab okay.

So with that being said let's go ahead and let's enter this component. Okay, so we're in the account information component right. And we want to give this a class name of account-information, right. Now let's just go reference our purchaseHistory.js just to see kind of what we did.

All right, so nothing too crazy. We got the title in there so we're going to want to do the same thing. So basically we need to import the page title component so let's import that case with ../pageTitle. Now we just want to use it in here so let's say page title and then we'll say className is account-information and the title is going to be account information. So really simple and thanks to our component here we have that in there with all the padding and everything and it's really easy to use okay. So again really simple just an import and a line of code and we have that look.

So next thing we need to do is build the form okay so we've got that page title in there now we just need the form with that underline. Okay, now just to give you an overview of how this works. Basically there's these all of these fields right, there's no buttons initially except for Change Password okay.

So this is the only one, and then when you click that it shows these fields all right, and then it shows these two buttons, and then when you hit update it will navigate us elsewhere or it will just close change password and update our information. Okay so that's what update does. And then when we hit cancel, it's going to close it but it's not going to update our information okay. So they do the same thing except for update is actually going to hit the server and update our information.

Okay so let's go ahead and let's reference our sign up component because we're going to be doing the same thing just with different fields, okay. So let's go to signin.js and you can see we have connect right, we have our actions and we're setting the header and navbar links and then we have our page title like we've already put in our account information and then we have the form right. So we need to create another component called account form.

Now let's just go back to our design real quick and what I want to do is look at the links up here, you'll see they are still the same. So what I want to do is we don't want to do what we're doing in signin where we're setting it, okay, we don't want to do this in our account information forum.

//NOT THIS
componentDidMount() {
    this.props.setHeaderLinks({});
    this.props.setNavbarLinks({});
}

Okay we want to leave our links, so we're not going to manage the links, we're not going to set them. Okay, so we don't need all this information, we don't need these two imports we don't need this. Really all we need is this onSubmit function and a form component. So let's go ahead and copy this submit function from our signin.js and let's go to our accountInformation.js and paste that above our render function, or you can just type it out, I really like copying and pasting but feel free to do whatever you want. So onSubmit equals fields console log fields.

accountInformation.js

onSubmit = (fields) => {
    console.log(fields);
}

All right, next thing we're going to need is a signin form component, okay well not a signin from component but a form component. So I'm just going to copy this and I'm gonna paste it in our component here, and obviously we want to rename it to account information. Everything else is the same except for the class name we want to change that to account-information__form right, so there we go.

accountInformation.js

render() {
    return (
        <div className='account-information'>
            <PageTitle className='account-information' title='Account Information'/>
            <AccountInformationForm onSubmit={this.onSubmit} className='account-information__form' />
        </div>
    )
}

Now what we need to do is create this component and put all the fields in it. So let's start off by creating it, let's go into account and let's say accountInformationForm.js. All right, now this is going to be very similar to our in form, so let's just cut down the time required to develop this by going into our signinForm.js and just copying everything in here in signinForm.js and placing it in accountInformationForm.js.

Now this isn't going to work obviously because everything is named differently but we can fix this. So the first thing I'm looking at are the links okay, what are these links? Okay, they are the quick links. Alright in our design we don't have quick links on the account information so let's get rid of that, let's get rid of all of these links and let's get rid of this details component.

Okay and then let's go up here and get rid of the import to details, and we're good there. Okay, the next thing we need to do is we need to rename everything in here from signinForm to accountInformationForm. So I'm just going to select that and hit command + d until it selects all of them and I'm just going to type in accountInformationForm.

Now what we need to do is we need to rename these classes but let's just leave that for now and see what this looks like in the browser after we import it into our accountInformation.js component. Okay, so lets say import accountInformationForm from ./accountInformationForm.

So I've imported it, we're using it, and that component is right here. All right let's try it out now, and you'll see we have an e-mail and a password and that's about it, we have a login button and nothing's really looking like it should right?

But we're off to a really good start. Let's see what happens when we hit login, all right nothing happens. Let's inspect the element and you'll see it logs our e-mail and password that we have in there. So basically it's just logging our field, so whatever fields we put in here and then we hit login, it's going to print those out because if you remember it's hitting this handle submit which is a prop which goes back to our accountInformation which is then provided in onSubmit and it console.logs our fields okay so really nice redux form stuff that's handled for us basically.

Okay, so what we want to do is we want to replace all these fields with the correct fields, okay? So let's commit our code and do that in the next video.

Terminal

git status
git add .
git commit -m "built account information from from signinform as a template"

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

Resources

Source code