Creating the Login Field Component and Text Link Component

Welcome back to the course. In this video we are going to finish putting out a couple more components. We're going to build out the Login component, and the text links components. Then we will throw in the spacing and go on from there.

Let's go into formFields.js, And let's copy this entire component and paste it after the first class. Let's call it FormButton. This is where we're going to build our login and submit buttons. Next, we're going to change all of our form-inputs into form-button. and then we're not going to want a title, since we just want to have a button. We also have to fix a mistake in our classNames for the div tags.

formFields.js

import React, { Component } from 'react';


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


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

Excellent. Now we have this button class.

So let's go into our sign in form and where we're seeing { FormInput } we can basically put a comma there, like we're dealing with redux form, and say { FormInput, FormButton } which is really kind of cool doing this. Now what we can do is provide another field

signinForm.js

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

import { FormTitle } from "../formTitle";
import { FormInput, FormButton } 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}
        />
        <Field
          className="sign-in-form__login"
          name="login"
          type="submit"
          title="Login"
          component={FormButton}
        />
      </form>
    );
  }
}

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

export default SigninForm;

That should be good. It's still won't look anything like our design but we will have a button. So let's look at this. We have login button now and it submits all of the parameters up in the url bar.

Let's go and style it now and we can do that by basically going in form-fields.scss and saying .form-button. I'm also going to put comments above each section of code in here that say // INPUT and // BUTTON.

form-fields.scss

// BUTTON

.form-button {
    &__button {

    }
}

Now what we can do is give it a border and some other things.
There's a reason we're doing this with rem units, and if we were to go to our base.scss and change the master font size to 80.5% instead of 62.5%, everything's going to increase in size together, now. So it's kind of cool how it works. So it's actually really a cool approach which is going to apply it to everything. And so basically we can adjust the size based on what we want later on saying, "Hey this might be too big" or "Our application may be too small."

Big

large

Small

large

So basically it gives you more control over your application. Anyways, back to form-fields.scss

form-fields.scss

// BUTTON

.form-button {
    &__button {
      height: 4rem;
      width: 21.6rem;
      border-radius: 2rem;
      background-color: $color-red-BA;

      color: white;
      font-size: 2.2rem;
      font-weight: 500;
      line-height: 2.8rem;
      text-align: center;
    }
}

Here's how it looks

large

Looks good in here. Now let's go ahead and add in the last component which is basically just going to be a link. It's going to be from react-router-dom. You'll see in our design that we have links right here with some very simple styles. So we're going to make a quick functional component because we're still going to use them. So I mean we could even just have it out of a className and then not have it be a component, but let's build a component just in case we'll be make things easier later on if we want to change anything.

So let's go into components and let's make a new file named textLink.js. OK now lets import React components.

textLink.js

import React, { Component } from 'react';

class TextLink extends Component {
    render() {
        return (
            <div className='text-link'>

            </div>
        )
    }
}

export default TextLink;

So if I go over to the design and click on this and hit not a member I have access to these styles.

In our textLink.js we don't want to make it a div, actually, we want to make it a link. So let's import link from react-router-dom. Then we have to provide a path, using props.

textLink.js

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class TextLink extends Component {
    render() {
        const { to, text } = this.props;

        return (
            <Link to={to} className='text-link'>
                {text}
            </Link>
        )
    }
}

export default TextLink;

Let's go ahead and throw a couple of these on the screen. Let's go to our signinForm.js and at the bottom of this form we just say <TextLink/>
and make sure we import it with import TextLink from "../textLink";

And what we want to put in here is:

signinForm.js

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

import { FormTitle } from "../formTitle";
import { FormInput, FormButton } from "../formFields";
import TextLink from "../textLink";

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}
        />
        <Field
          className="sign-in-form__login"
          name="login"
          type="submit"
          title="Login"
          component={FormButton}
        />
        <TextLink to='/forgot' text='Forgot Password'/>
        <TextLink to='/signup' text='Not a member? Register here'/>
      </form>
    );
  }
}

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

export default SigninForm;

And it should be up and running. 'Not a member?' brings the sign up page, while 'Forgot password' brings us to a page We don't have yet, and it doesn't have it in the design, but we'll probably implement this anyway.

Let's go ahead and add the styles. So style and create a new file and call it text-link.scss. In text-link.scss we'll add the following styles.

text-link.scss

.text-link {
  font-size: 1.4rem;
  line-height: 1.7rem;
}

By setting those global styles in our base.scss it's made things a lot easier. Let's look in our browser to see what we have. Looks all right although it looks like they're not applying because we haven't imported it so lets import it in main.scss.

All right so let's get rid of that decoration color with text-decoration-line: none;. Now, what we need to do is have them side by side, not one above the other. To do this let's go into to signinForm.js and basically we want to wrap these in a div with a className of sign-in-form__text-links.

large

Now we can give it some padding.

text-link.scss

.text-link {
  font-size: 1.4rem;
  line-height: 1.7rem;
  text-decoration-line: none;
  margin: 0 38px;
}

Looks good. Now let's add in some height to each of these and then end this video. It's been pretty long. Let's go into signin.scss

signin.scss

.sign-in-form {
    display: grid;
    justify-items: center;
    &__title {
        width: 100%;
        margin-top: 6.6rem;
    }
    &__email {
        margin-top: 7.7rem;
    }
    &__password {
        margin-top: 4rem;
    }
    &__login {
        margin-top: 8.8rem;
    }
    &__text-links {
        margin-top: 5.2rem;
    }
}

Let's go ahead and in the next video, we'll build out the form. It's going to be a lot quicker since we have built out this form already.

git status
git add .
git commit -m "login Field component, text-link component, and remaining signin styles"

See you in the next video.

Resources

Code at this stage