Let’s Create a Modern Login Form on React | 01

Video Tutorial

Getting Started

So we will walk through and try to create a modern login from using React from scratch, this will give you an overview of how forms are being created on React and how everything gets tied up together in order to get to you the final result of a complete working login and register forms.

I suppose that you are already familiar with basics of React and know how to setup a React project so you can just follow along with this tutorial if you are not please make sure to watch the React Course Series first in order to understand of what we are going to do.

React Forms

Mostly when you want to deal with forms on vanilla javascript or using jquery this can take a bit of hack to run smoothly, but with React, it even makes it easier for you to make the login form very responsive.

Make sure to setup the React project that we are going to work on.

Our goal is to create a Register and Login boxes, where we will be able to toggle between both of them using specific button controllers.

So first let’s create the main App component

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoginOpen: true,
      isRegisterOpen: false
    };
  }

  render() {

    return (
      <div className="root-container">

      </div>
    );
  }
}

And also we need to render it to the DOM

reactDOM.render(
  <App />, document.getElementById("root"));

If you to implement the same styling that we are going to do, you can grab the CSS style sheet from **Here**.

Now we need to create two separate components for Login and Register Boxes and render them under the main App component (Rendering Multiple Components on React).

//Login Box
class LoginBox extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  submitLogin(e) {}

  render() {
    return (
      <div className="inner-container">
        <div className="header">
          Login
        </div>
        <div className="box">

          <div className="input-group">
            <label htmlFor="username">Username</label>
            <input
              type="text"
              name="username"
              className="login-input"
              placeholder="Username"/>
          </div>

          <div className="input-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              className="login-input"
              placeholder="Password"/>
          </div>

          <button
            type="button"
            className="login-btn"
            onClick={this
            .submitLogin
            .bind(this)}>Login</button>
        </div>
      </div>
    );
  }

}

Under the Login Component, we are rendering the login box with the input fields (username and password) and a header to show which box we are currently on Login or Register, and the submit button that has the submitLogin method being listening for the click event under the button (Submitting the form).

Make sure to use the bind when passing a class method into an event handler in order for it to know which context it’s currently on.

and the Same goes for the Register box Component, just copy past the login box with some changes.

//Register Box 
class RegisterBox extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  submitRegister(e) {}

  render() {
    return (
      <div className="inner-container">
        <div className="header">
          Register
        </div>
        <div className="box">

          <div className="input-group">
            <label htmlFor="username">Username</label>
            <input
              type="text"
              name="username"
              className="login-input"
              placeholder="Username"/>
          </div>

          <div className="input-group">
            <label htmlFor="email">Email</label>
            <input type="text" name="email" className="login-input" placeholder="Email"/>
          </div>

          <div className="input-group">
            <label htmlFor="password">Password</label>
            <input
              type="password"
              name="password"
              className="login-input"
              placeholder="Password"/>
          </div>
          <button
            type="button"
            className="login-btn"
            onClick={this
            .submitRegister
            .bind(this)}>Register</button>
        </div>
      </div>
    );
  }
}

Only make sure to add the email filed for the register box, and everything is good to go.

Now let’s render the child components (Login and Register boxes) on the main App in order for them to get rendered to the DOM.

//App Component 
...
render() {
...
     <div className="box-container">
      {this.state.isLoginOpen && <LoginBox/>}
      {this.state.isRegisterOpen && <RegisterBox/>}
     </div>
...
}

We use the two booleans (isLoginOpen and isRegisterOpen) which are defined under the component state in order to tell which one to render by using the and sign (&&) the LoginBox component is going to be rendered only if the boolean is true, and this will allow us to toggle between the register and login boxes.

Toggle Login and Register

To toggle between two components being rendered (which means render only one and hide the other) therefore we are going to create two button controllers above the actual login/register box which allow us to change between boxes.

//App Component 
render() {
...
     <div className="box-controller">
       <div
         className={"controller " + (this.state.isLoginOpen
         ? "selected-controller"
         : "")}
         onClick={this
         .showLoginBox
         .bind(this)}>
         Login
       </div>
       <div
         className={"controller " + (this.state.isRegisterOpen
         ? "selected-controller"
         : "")}
         onClick={this
         .showRegisterBox
         .bind(this)}>
         Register
       </div>
     </div>
...
}

We also assign a bottom border to the currently active box toggle button just for making it user-friendly, therefore we are using a custom selected-controller class that will be added the border of the current element and we use an inline if statement (Ternary If statement) to control their behavior.

And we use the methods showLoginBox and showRegisterBox for rendering either the login or register box.

//App
...
  showLoginBox() {
    this.setState({isLoginOpen: true, isRegisterOpen: false});
  }

  showRegisterBox() {
    this.setState({isRegisterOpen: true, isLoginOpen: false});
  }
...

We change the booleans state, by updating the component’s state.

Now try to access your login page in order to freely be able to type your username and password and or change to the registration box.

What’s Next

So this is only the first part of the tutorial, in the next one, we will finish the project by implementing form validation and guessing registered password strength.

No Comments Yet