All right welcome back. Let's go ahead and finish developing this application.

So let's go into formFields.js and let's put in a couple more things. We want input and we want type. All right, now what we have to do is provide a placeholder and let's just put these down inside of input. I'm to put this on a new line and say type={type}, and put a spread operator and get all of those values, and placeholder={placeholder}.

formFields.js

import React, { Component } from 'react';


export class FormInput extends Component {
    render() {
        const { className, title, input, type, placeholder } = this.props;
        return (
            <div>
                <label className='form-input__title'>{title}</label>
                <input
                    className={`${className} form-input`}
                    type={type}
                    {...input}
                    placeholder={placeholder}    
                />
            </div>
        )
    }
}

Then we have to provide a couple of these into wherever we're using form input. So we're going to head over to signinForm.js and I am going to say in field placeholder='Email'. If you hit option + shift + f in VS Code, it will format your file for you, and put your code on new lines. So again that's options option + shift + f only in VS Code. Not sure if that extension exists in Atom, but if it does try it out. See if it works.

That's pretty good. I'm going to take the component, and I'm going to put it down farther.

signinForm.js

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

import { FormTitle } from "../formTitle";
import { FormInput } from "../formFields";

class SigninForm extends Component {
  render() {
    return (
      <form className="sign-in-form">
        <FormTitle className="sign-in-form__title" text="Login" />
        <Field
          className="sign-in-form__email"
          placeholder="Email"
          name="email"
          type="email"
          component={FormInput}
        />
      </form>
    );
  }
}

SigninForm = reduxForm({
  form: "signin"
})(SigninForm);

Let's go to our browser and see what it looks like. Looks good. And now in our Redux Devtools it says signin, values, and email. So we have values along with our field. We have fields, now we have values, and then we have a touched value. If we reload the page, and then we click the form, touched is going is going to be true.

Let's go into our code here in signinForm.js and let's do something with the title. We didn't provide the title, so let's say title="Email" let's go check design after this reloads. You'll see that the form says email because we provided a label that takes the title in.

Let's check the design and we'll see. It seems our placeholders are different, the design says 'Enter Email'. That's why we have a separate title and placeholder, even though they say the same thing is because it may not be the same. Let's change what we put in to Enter Email, which is what it said. We've entered email. So that's what that is.

Now it's put in the password field. Let's put in the password by copying the entire email field, pasting it, and then replacing all the e-mail instances with password. And since it's going to take in to type it will automatically make it a type of password.

signinForm.js

import React, { Component } from "react";
import { reduxForm, Field } from "redux-form";

import { FormTitle } from "../formTitle";
import { FormInput } from "../formFields";

class SigninForm extends Component {
  render() {
    return (
      <form className="sign-in-form">
        <FormTitle className="sign-in-form__title" text="Login" />
        <Field
          className="sign-in-form__email"
          placeholder="Enter Email"
          name="email"
          type="email"
          title="Email"
          component={FormInput}
        />
        <Field
          className="sign-in-form__password"
          placeholder="Enter Password"
          name="password"
          type="password"
          title="Password"
          component={FormInput}
        />
      </form>
    );
  }
}

SigninForm = reduxForm({
  form: "signin"
})(SigninForm);

So that's nice. Let's check it out now. And we have a password and e-mail. Everything's good. Now let's go ahead and throw in some styles into this so we have password and title, which will be for our grid. So let's open up signin.scss right now and add .sign-in-form, and call email, password, and title inside of it.

signin.scss

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

.sign-in-form {

    &__title {

    }
    &__email {

    }
    &__password {

    }
}

Now this is going to be grid styles and since we have a whole separate component in formFields for form input, we're just going to apply the visuals, other than the grid, to the form input.

So it's go to style and let's create a new file. Let's just call it form-Fields.scss. This will contain whatever we put in formFields.js,such as the form input component. Let's right .form-input and in here we will be applying form input styles.

Let's go ahead and check out the title. So if you go to formFields.js we have a label and an input along with the div tag of course. Let's add in some classNames for the elements.

formFields.js

import React, { Component } from 'react';


export class FormInput extends Component {
    render() {
        const { className, title, input, type, placeholder } = this.props;
        return (
            <div className='form-input'>
                <label className='form-input__title'>{title}</label>
                <input
                    className={`${className} form-input__input`}
                    type={type}
                    {...input}
                    placeholder={placeholder}    
                />
            </div>
        )
    }
}

Let's go back to our SCSS and call title and input. So we're going to have a grid and we're going to have styles, so let's put those in real quick.

form-fields.scss

.form-input {
  &__title {
    color: $color-red-BA;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.3rem;
  }
  &__input {
    height: 4rem;
    width: 50rem;
    border: 1px solid $color-grey-E6;
    border-radius: .5rem;
    padding-left: 2rem;
  }
}

We've got to import this, so let's just make sure that we are importing it into our main.scss.

main.scss

// BASE
@import 'variables';
@import 'base';

// HEADER
@import 'header';

// AUTH
@import 'signin';
@import 'signup';

// HELPERS
@import 'form-title';
@import 'form-fields';

Let's try that out and you'll see what looks like in our design. Now I'm going to look at it one more time. Looks like the font size isn't quite right so I'm going to head back to form-fields.scss

form-fields.scss

  &__input {
    height: 4rem;
    width: 50rem;
    border: 1px solid $color-grey-E6;
    border-radius: .5rem;
    padding-left: 2rem;
    font-size: 1.6rem;
    font-weight:500;
  }
}

All right, that's good. Now what we need to do is provide a grid so it's not displaying like this, we need it to be equal width for the email and password forms. Then we'll throw in the rest of our items, then our grid. All right so let's go into our code. First, we'll make a section in the file for our grid properties, then we can start putting in the grid.

form-fields.scss

.form-input {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;

  &__title {
    grid-row: 1/-1;
    grid-column: 1/2;  
  }
  &__input {
    grid-row: 1/-1;
    grid-column: 2/3;
  }
}
.form-input {
  &__title {
    color: $color-red-BA;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 2.3rem;
  }
  &__input {
    height: 4rem;
    width: 50rem;
    border: 1px solid $color-grey-E6;
    border-radius: .5rem;
    padding-left: 2rem;
  }
}

This isn't going to look right, since it's going to make everything the same width at first.

All right. Looks like that so all we have to do is basically just say we want the lable to be worth about one third of the input or something like that. Let's get the exact ratio by going into inspect mode on the design here. basically we want the label to be about 21% the width of the row, compared to the input.

Now go into your code and where we want to do is we can just say.

form-fields.scss

.form-input {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 129px 500px;

All right let's go to our application and that looks pretty nice. Now we'll go to Firefox and inspect the element to the grid. lets go and select our first input. You'll see that email's near the top because it's 500 pixels high. The title is not big so it's not going to look like it's in the center. So let's go ahead and center it by going to our code and align-items: center; to center them. Now we don't want to do justify: center; to center this entire thing because that will center email, then password, and then these. We don't want emails to be in the center or password, we want these to be where they are, instead we want the entire thing to be in the center of our screen.

So for me, I want this entire thing to be centered, but right now it looks like it's going the entire width of our screen. We could do a couple things we can say width: 629px; because that's how big it is. And that's going to cut down the width a little bit. It's not going to center it but it's going to cut down the width. And then we need to place it in the center by saying justify-content: center.

form-fields.scss

.form-input {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 129px 500px;

  align-items: center;
  width: 629px;
  justify-content: center;

Looks like it didn't work, but that's because form-input is technically not on the grid yet. We haven't actually built our grid for signin yet. We just have it ready to build the grid. So it's go into signin.scss

let's go ahead and look at our grid. And we can see that it's in a grid and filling up the entire thing. So that should be good. Now what we need to do is basically just say justify-items: center; on all other items in the signin form grid. So let's go to our code and let's say justify-items: center;.

signin.scss

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

.sign-in-form {
    display: grid;
    justify-items: center;

    &__title {

    }
    &__email {

    }
    &__password {

    }
}

Now this is going to mess up our title a bit. Everything else going to be good. OK. So that's all centered except for our title is not centered. You also see that the bottom of our title no longer extends all the way it's really tiny. We can fix this by going into our title here and adding width: 100% and then going in to actually get that fixed. And I thought we were going to add one more property. But that works great.

All right. So that does that. Now what we're going to have to do is add in a few more items like the login, the forgot password, and already have an account button or a sign in button and then we need to style those and then we need add in some spacing between all of these items to make it look good.

In the next video we will handle these three buttons down here and the spacing between all these items will finish off the layout here and move on to the sign up grid. And it will be a lot quicker now that we built all these components that's how this app is going to go, once we have most of these built, since all these screens have quite a bit of similar attributes similar components even way down here in components. It's going to kind of have a snowball effect and things will take off again once we build more things.

So let's commit our code.

git status
git add .
git commit -m "styled form fields"
git push origins master

I'll see you in the next video.

Resources

Code at this stage