Let's go into our application and let's copy this field here.

Paste it here, and instead of saying password let's say login. The title is going to have a capital L, and there's no placeholder because this is going to be a button. Then we need to say that the component is FormButton.

signinForm.js

<form className={`${className} sign-in-form`}>
    <Field className='sign-in-form__email'
    type='email'
    title='Email'
    placeholder='Email'
    name='email'
    component={FormInput}/>
    <Field className='sign-in-form__password'
    type='password'
    title='Password'
    placeholder='Password'
    name='password'
    component={FormInput}/>
    <Field className='sign-in-form__login'
    type='login'
    title='Login'
    name='login'
    component={FormButton}/>
</form>

Now, let's throw this import in at the top here from formFields.

signinForm.js

import { reduxForm, Field } from 'redux-form';

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

Now, let's think about what we need in this component. Obviously, we have the title. We're going to need an onClick event listener, and to change the type. So let's say:

signinForm.js

    <Field className='sign-in-form__login'
    onClick={() => console.log('tryna submit')}
    type='submit'
    title='Login'
    name='login'
    component={FormButton}/>
</form>

Now, we want the className. That should be good for now. We're going to have to make some modifications later on most likely to accommodate the different buttons, but let's go and actually create this component so we don't get an error.

Let's go to formFields.js, let's copy this entire class here, and let's rename it to FormButton.

We're no longer accepting a placeholder, but we are accepting an onClick event listener. We also need to get rid of this input and replace it with a button. After we close off the button, we want to put in the title. So let's say:

formFields.js

export class FormButton extends Component {
    render() {
        const { className, title, type, onClick, input } = this.props;
        return (
            <div className={`${className} form-button`}>
                <button className={`form-button__button`}
                        type={type}
                        {...input}
                        onClick={onClick}
                >
                {title}
                </button>
            </div>
        )
    }
}

That should be good. Let's go ahead and try it out, and see if everything's compiling. You'll see we have log in, you submit, and it submits. You also know it says tryna to submit right there. Let's see, log in for a brief second, then reload and you'll see we have our data up here.

Let's go ahead and utilize Redux-Form and be the handleSubmit functionality to actually do something with this data and not have a reload the page when we log in. Let's get out of formFields.js, and in signinForm.js we want to take out another property. Let's say:

signinForm.js

class SignInForm extends Component {
    render() {
        const { className, handleSubmit } = this.props;
        return (
            <form onSubmit={handleSubmit} className={`${className} sign-in-form`}>

Now, we need to do is go back to signin.js and we need to pass that in. So let's say:

signin.js

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

    render() {
        return (
            <div className='sign-in'>
                <SignInForm onSubmit={this.onSubmit} className='sign-in__form' />
            </div>
        )
    }
}

Now, with Redux-Form magic, it's going to basically console.log our fields, so it should have our username and password. All I did since we last checked the browser is I added this function with fields, I'm console.logging the fields, and I have this onSubmit property that takes in this onSubmit function.

Let's go back in to signinForm.js, and I provided onSubmit to the form, passed in handleSubmit, and I say constant handleSubmit is equal to this.props. Let's check it out in the browser, and it looks like we have no errors. Let's go ahead and hit log in.

You'll see that it does not reload the page because Redux-Form prevents that behind the scenes. Then it prints out our e-mail and our password in an object. This is good because now we use this information to hit our back-end to sign us in. So that sets everything up here.

We haven't developed it, we haven't created any accounts, we haven't pulled down any server stuff, so what we want to do in the next video is style all this, and then move on to the sign up. Then, once we have all of these forms built for sign in and sign up, we will handle the back-end.

Let's go ahead and commit our code. Let's say:

Terminal

git status
git add .
git commit -m "built formButton component in formfields.js and added submit/login button to signinform"

I'll see you in the next video, where we will hop into those styles and then move on into the sign up.

Resources

• Source Code