It's still good practice to go through because one of the very first things, whenever you're tasked with building out a new application, one of the first things you're most likely gonna build-out is the authentication form. And if you have some type of design implementation that you have to build out, then being able to practice this kind of layout can be very helpful.

So let's get started with this. You can see right now, we are just using the vanilla, just regular HTML style.

So we're going to not use those anymore. If you open up your login component, we can talk about the structure that we wanna use here. So right now we have this form, it doesn't have a class at all, and then we have input tags, and then a button. So what I'd like to do is give this entire form a wrapper, so I'm gonna say className equals auth-form-wrapper. And then inside of here, in each one of these inputs, what I'd like to do is give it a form group class.

Because what I'm envisioning here is that we're going to have the email on one line, and it's gonna use our nice, cool, underlined kind of format, and then the password's going to be right below that. And then to the left of each one of the inputs, I'd like to have a nice icon, I think that would look really cool. And then we'll have the button stretching from side to side down below with our nice teal color.

So in order to do that with our icon and then our input right next to it, the easiest way, and the most effective way is to be able to create a form group class that both of those items can reside in. So inside of our form, now I wanna create a div for each one of the input, and this is where we're going to place our class name of form-group. And then we'll have the input, but before we have the input, we'll import FontAwesome.

So if you do not have FontAwesome installed quite yet on the login, make sure that you bring that in. So I'm gonna say FontAwesomeIcon, and as usual, I'm going to have to look up exactly what the import statement is. So I'll copy that, and let's import that at the very top.

login.js

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

So we have FontAwesomeIcon, and that's pulled in from fortawesome, and for right now inside of FontAwesome, let's just bring in that same envelope class, that envelope icon that we brought in before. So I'm gonna say icon equals envelope, and then close that off.

<form onSubmit={this.handleSubmit} className="auth-form-wrapper">
  <div className="form-group">
    <FontAwesomeIcon icon="envelope" />
    <input
      type="email"
      name="email"
      placeholder="Your email"
      value={this.state.email}
      onChange={this.handleChange}
    />
  </div>

Hit save and let's just make sure that we have our icon there, and yes, so we have our icon, and it is right next to the email, so that is looking good.

Let's do the same thing, let's add our structure for the password. So I'm gonna copy this form group code here. And then for the password, let's also close off that div wrapper, hit save, we will change this envelope here in a moment, and that looks really good.

So at least we have our layout, and then for the button, we can get rid of this wrapper div, we're just gonna let the button stay by itself, and that's perfect. So we have all of the HTML code or JSX code that we're going to have to implement already done.

Let's bring in the correct icon for our password, and if you open up icons, there is one I always use for passwords, and it's called lock. So you can say faLock, and also add it to the library, hit save.

icon.js

import {
  faTrash,
  faSignOutAlt,
  faEdit,
  faSpinner,
  faPlusCircle,
  faPhone,
  faEnvelope,
  faMapMarkedAlt,
  faLock
} from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";

const Icons = () => {
  return library.add(
    faTrash,
    faSignOutAlt,
    faEdit,
    faSpinner,
    faPlusCircle,
    faPhone,
    faEnvelope,
    faMapMarkedAlt,
    faLock
  );
};

export default Icons;

Now inside of the form itself, instead of saying envelope, you can just say lock.

login.js

          <div className="form-group">
            <FontAwesomeIcon icon="lock" />
            <input
              type="password"
              name="password"
              placeholder="Your password"
              value={this.state.password}
              onChange={this.handleChange}
            />
          </div>

          <button type="submit">Login</button>
        </form>
      </div>
    );
  }
}

Test this out, verify that it's working, and yes, now we have the email address and the icon for passwords.

So that's looking pretty good from a structural perspective, now let's actually add the styles themselves. We have an auth-form-wrapper, and then a form-group that we need to style. So I'm gonna copy this name, and let's open up the auth style file that we've already created, and we're going to embed the styles inside of our right column class.

So inside of the right column, I'm going to pull in this auth-form-wrapper, and then we're gonna use a few of the mixins we've already created. We've created a grid mixin for using the CSS grid, and then we've created an input mixin for our nice styled input. So we can bring in both of these, so I'll say include input-element, and call that with parens at the end. And then include base-grid, and call that one, hit save

auth.scss

.right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $offwhite;

    .auth-form-wrapper {
      @include input-element();
      @include base-grid();
    }
  }
}

Now if you come back, you can see that that is starting to look a little bit better. We now at lease have our better-looking inputs, we're no longer using the regular HTML ones, and our button is now stretching from side to side, so so far so good.

Now with all of that in place, let's also add a little bit of padding, and let's also add a little bit of grid-gap. So I'm going to say grid-gap, and for this let's give 42 pixels, and also say padding of 42 pixels, and let's see what this gives us. Okay, that looks good, it's actually a little bit too much grid-gap I think, let's shrink that down to let's say 21 pixels, there we go.

auth.scss

  .right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $offwhite;

    .auth-form-wrapper {
      @include input-element();
      @include base-grid();
      grid-gap: 21px;
      padding: 42px;
    }
  }
}

Okay, that's looking better, and we can always adjust it after we have taken care of our form-group class.

So now let's come down, and let's create a form-group class, and we're gonna use flexbox in this case. So I'll say display flex, and then we don't need to add a justify-content because, by default, we want the items to be placed right next to each other which is exactly what flexbox does automatically. So we can just say display flex, and if you hit save, you'll see now, they're right next to each other, so far that's looking good.

So now that we have that, let's update the styles on our icons. So the way you can do this, we haven't done this a lot in this course, I'm not even sure if we've tried this yet, but you can style your icons not just with using them and treating them as text, you also, if you need to select them specifically, you can call SVG because the icon at the end of the day is an SVG.

If you inspected the HTML, you would see it is an SVG icon. So you can select SVG, and here I'm going to give a font size of 2em, a color of teal, and then let's also add a little bit of margin-right so that it has some space there, of 15 pixels, hit save.

.form-group {
  display: flex;

  svg {
    font-size: 2em;
    color: $teal;
    margin-right: 15px;
  }
}

There we go, now we have a form, this is looking really good.

The last thing that we need to add is the styles for our login button. And so for that, we've already built those out, we just need to add them. So we'll give our button a className of btn, hit save,

login.js

<button className="btn" type="submit">
  Login
</button>

and as soon as it refreshes, you will see we have a really nice login button.

Let's test to make sure everything's still working, hit login, and it's there. So hopefully that was a good exercise, it was more practice on combining CSS grid, and flexbox to build your layouts. I think we have a great looking site, it's functioning perfectly, everything is there that we wanted to build in, and you have learned a lot about react.

We're not quite done yet, in the next guide, we have one of the most exciting parts of this entire course which is we're gonna take all of this project, and we're going to deploy it to the web. Now I will give you a few prerequisites at the beginning of the next course, but I'll give you a preview of them now so that you don't even start that guide until you're done.

You need to make sure that you have a Heroku account setup, so go to Heroku.com. It's free to signup, they do have paid options, and if you use it a lot, then you'd have to actually pay for it. But Heroku's a great tool for deploying your applications so that they're live on the web.

So Heroku's what we're going to use in the next guide, make sure you've signed up for an account, and then you also need to have a GitHub account. Now you should've already gone through my GitHub course, or my Git course, and you should already have this account. But you're going to have to have both of those in order to complete the next guide.

So great job going through this entire course, and in the next guide, we are gonna get our project live on the web.

Resources

• Source code