So let's go to the design, let's hop over to not registered, create an account. It looks exactly the same almost, we've just got a couple of different things.

So the main things we're going to be doing are modifying the grid a bit, changing the text, and adding in an extra button, and then changing this a bit, so really simple stuff. Let's go ahead and start by closing the terminal here and creating or basically copying everything in signin.scss and placing it in signup.scss and even override that sign-up.

Now obviously we want to replace the sign-in instances with sign-up. OK so really simple, and straightforward.

signup.scss

.sign-up {
    grid-row: content-s/content-e;
    grid-column: s/e;

    &__page-title {

    }

    &__form {
        display: grid;
        grid-template-rows: [email-s] 64px [email-e password-s] 64px [password-e] minmax(20px, 289px) [line-s] 2px [line-e login-s] 38px [login-e];
        grid-template-columns: 1fr;
    }
}

.sign-up-form {
    & > * {
        grid-column: 1/-1;
    }
    &__email {
        grid-row: email-s/email-e;
    }
    &__password {
        margin-top: 15px;
        grid-row: password-s/password-e;
    }
    &__line {
        grid-row: line-s/line-e;
        border-top: 1px solid #ccc;
    }
    &__login {
        margin-top: 39px;
        grid-row: login-s/login-e;
    }
    &__details {
        grid-row: 1/-1;
        justify-self: end;
        align-self: start;
    }
}

Now what we need to do is go into signin.js, copy everything in here, go into signup.js and let's replace everything in here with what we just copied from signin.js and let's rename all of these sign in's to signup.

signup.js

import React, { Component } from 'react';

import SignUpForm from './signupForm';
import PageTitle from '../pageTitle';

class SignUp extends Component {

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

    render() {
        return (
            <div className='sign-up'>
                <PageTitle className='sign-up__page-title' title='Login' />
                <SignUpForm onSubmit={this.onSubmit} className='sign-up__form' />
            </div>
        )
    }
}

export default SignUp;

Now if that was confusing just look at this file it's the exact same thing as sign in except for signup okay, it's pretty straightforward what just happened here. Okay, what we want to do now is change this title to what it has in the design which is Register so change this title to register.

Okay now this isn't going to work immediately because we don't have a sign up form yet. So we're going to get an error, it's saying cannot resolve signup form.

So what we need to do is go into auth and create a new file called signupForm.js and copy everything we have in signinForm.js and throw it into signupForm.js. Okay, save that, change the class names change everything in here from signin to signup. Okay so it's just these class names actually, well so far.

signupForm.js

import React, { Component } from 'react';

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

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

import history from '../../history';

class SignUpForm extends Component {
    render() {
        const { className, handleSubmit } = this.props;
        const links = [
            {
                _id: 0,
                title: 'At least 6 characters'
            },
            {
                _id: 1,
                title: 'At least one number'
            },
            {
                _id: 2,
                title: 'At least one symbol'
            }
        ]
        return (
            <form onSubmit={handleSubmit} className={`${className} sign-up-form`}>
                <Field className='sign-up-form__email'
                type='email'
                title='Email'
                placeholder='Email'
                name='email'
                component={FormInput}/>
                <Field className='sign-up-form__password'
                type='password'
                title='Password'
                placeholder='Password'
                name='password'
                component={FormInput}/>

                <div className='sign-up-form__line'></div>
                <Field className='sign-up-form__login'
                onClick={() => history.push('/account')}
                type='submit'
                title='Create Account'
                name='login'
                component={FormButton}/>
                <Field className='sign-up-form__back'
                onClick={() => history.push('/signin')}
                type='button'
                title='Back'
                name='back'
                component={FormButton}/>
                <Details className='sign-up-form__details' title='Password Requirements' links={links}/>
            </form>
        )
    }
}

SignUpForm = reduxForm({
    form: 'SignUpForm'
})(SignUpForm);

export default SignUpForm;

Now this will work right, so go in here, sign up. We've got this okay.

So this is the sign up it's actually not the signin notice the link, it's just that we have the same exact content here. Okay so what we need to do is first change all of these from sign-in to sign-up all these classNames, let's hit command + d all the way over here, let's change all of these to sign-up and we're good.

Okay let's try this one more time, it should be good to go. The reason the styles still work is because we copied everything in signin.scss and placed it in signup.scss and changed everything. Now we're not going to leave it this way because the forms are obviously pretty different. Like they're not insanely different but there's still quite a bit different in that we have, okay I guess it's in the design, in that we have more fields and we have an extra button but it's going to require some adjustments but by copying it we can really really quickly make these adjustments without having too waste to much time.

So let's go ahead and let's go into our code and let's do this now. Okay, what we need to do is going into sign-upForm.js and we need to add in the additional forms. So what we need is name, email, password, and confirm password. Okay, we've got email, we've got password. Okay, I'm basically going to put some returns here to separate the line and login buttons from our actual inputs.

Okay, so let's copy password one time, and let's rename it to confirm-password, okay the type is still going to be password, title is going to be Confirm Password, and the placeholder is now going to be Confirm Password, the name however isn't going to be password, it's going to be confirm. Okay, that should be good.

Now what we need to do is we need to copy email one time okay and we need to replace it with name because if you remember in here its name this top one. So instead of saying email on this top one, let's just say name okay, and then the title is going to be name, and placeholder is going to be name. Okay, so pretty straight forward there, just get these all in here and we'll be good to go.

signupForm.js

import React, { Component } from 'react';

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

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

import history from '../../history';

class SignUpForm extends Component {
    render() {
        const { className, handleSubmit } = this.props;
        const info = [
            {
                _id: 0,
                title: 'At least 6 characters'
            },
            {
                _id: 1,
                title: 'At least one number'
            },
            {
                _id: 2,
                title: 'At least one symbol'
            }
        ]
        return (
            <form onSubmit={handleSubmit} className={`${className} sign-up-form`}>
                <Field className='sign-up-form__name'
                type='name'
                title='Name'
                placeholder='Name'
                name='name'
                component={FormInput}/>
                <Field className='sign-up-form__email'
                type='email'
                title='Email'
                placeholder='Email'
                name='email'
                component={FormInput}/>
                <Field className='sign-up-form__password'
                type='password'
                title='Password'
                placeholder='Password'
                name='password'
                component={FormInput}/>
                <Field className='sign-up-form__confirm'
                type='password'
                title='Confirm Password'
                placeholder='Confirm Password'
                name='confirm'
                component={FormInput}/>

                <div className='sign-up-form__line'></div>
                <Field className='sign-up-form__login'
                onClick={() => history.push('/account')}
                type='submit'
                title='Create Account'
                name='login'
                component={FormButton}/>
                <Field className='sign-up-form__back'
                onClick={() => history.push('/signin')}
                type='button'
                title='Back'
                name='back'
                component={FormButton}/>
                <Details className='sign-up-form__details' title='Password Requirements' info={info}/>
            </form>
        )
    }
}

SignUpForm = reduxForm({
    form: 'SignUpForm'
})(SignUpForm);

Okay, we've got name, email, password, confirm password, we've got our line and our login, let's go check it out. Okay yeah, we've got our extra fields, we've got name and confirmed password.

but since we didn't have these on our form before we don't have the styles for where we want them on the grid right. So they're just at the bottom.

Okay, so let's do that but we need to add in a back button as well. Now in order to get this back button in we need to actually develop or modify our component right, we need to modify our button component to take in a custom like kind of gray button or we can just create a new component to do that. So let's go ahead and do that now, let's just look at the what's going on here in the SCSS.

It looks like the colors are just a bunch of nines, and the width is about 137 pixels, heights going to be the same. So 137 pixels and a color of 9 right, so let's go into our formFields.scss and let's say gray-button and what we'll do is we will say color is, well let's see what did we want to call it? 9? So say #999, and then we'll say this is a background color, so well say background-color, you can also just say background. Background and background color do the same thing.

Okay, now what we want to do is just say the width is 137 pixels.

form-fields.scss

&__gray-button {
    background: #999;
    width: 137px;
}

Okay, now we need to apply this when we use a button because obviously this isn't being used. So let's go into our formFields.js and what we want to do is we want to basically pass in a boolean called short or something right, or gray right, and then we want to do is in this form-button we want to add in a ternary expression to say hey if short exists let's turn gray button on this.

So let's go here and let's say dollar sign brackets and we'll say short question mark and then if it's short then we'll say, we'll return form-button__gray-button if not colon we will return nothing.

<button className={'form-button__button ${short ? 'form-button__gray-button' : '' }'}>

Now the reason we are doing form-button_gray-button is because in form-fields its in .form-button &gray-button, so it's form-buttongray-button. Now the reason we don't have to put all these in is because this form-button_button exists right. These styles are going to be applied and then we're going to apply the gray button styles.

So what's going to happen is it's going to apply all these styles, it's going to be green for a split millisecond or however compiling runtime works and then the width is going to be this high and then immediately once this applies instantly it's going to override those with background and width.

So let's go to Chrome and let's try this out. Now we're not going to see anything because we're clearly not using a gray button. So what we need to do is we need to go into our application and we need to go in to signupForm.js and we need to copy our login button and give it that short property.

Let's copy it, let's replace this login with back, okay, and what we need to do is we need to change the type to just button because if we leave it as submit it's going to submit the form. We don't want it to do that, we want it to just be a button that doesn't do anything except for doing our onClick right. Okay so make sure you get this in.

signupForm.js

<Field className='sign-up-form__back'
onClick={() => console.log('tryna go back')}
type='button'
title='Back'
name='back'
component={FormButton}/>
<Details className='sign-up-form__details' title='QuickLinks' links={links}/>

And then let's go to our application in the browser and let's look at it, you'll see it says back and it's green. Hitting back doesn't do anything, hitting login however should submit our form right. It doesn't have anything unless you go to inspect it should say trying to submit yeah with our object. But when you hit back it just says trying to go back, it doesn't submit any object.

Okay, so what we need to do is we need to give it that short property so it gets our styles. Okay so let's go in here and say short is equal to true.

<Field className='sign-up-form__back'
onClick={() => console.log('tryna go back')}
type='button'
title='Back'
name='back'
short={true} //Add this line of code
component={FormButton}/>
<Details className='sign-up-form__details' title='QuickLinks' links={links}/>

And what that's going to do is it's going to go in the form-button and it's going to check short and it's going to apply gray button if it's true. Okay and you'll see now it's true.

Okay, so that's awesome, it looks good, it looks like what we have in our design. So what we need to do now is we need to basically throw these on the grid where they belong because clearly they're not in the right place. Okay so let's do that in the next video, and let's commit our code.

Terminal

git status
git add .
git commit -m "developed sign up form and modified formbutton to have short gray case"

I'll see you in the next video.

Resources

Source code