Create a Cool Login Page with React

#javascript #react #webdev #beginners

Today I wanna show you how to easily create a cool Login Page for your brand new React Startup!
Let's get cooking!😜

Step 1
Create a new React project by running following command:
npx create-react-app login-form

Then open your newly created app in your favorite IDE.

Step 2
Add this to your index.html file:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<div id="root"></div>

Step 3
Delete all the boiler-late code from the App.js file and add this code to create a new React functional component:

const LoginForm = () => {

return (
   <form class="form">
      <div style={formStyle}>
        <div style={{display: "flex", alignSelf: "flex-start", paddingBottom: 20, fontSize: 30}} class="input">
        Login
      </div>
      </div>
   </form>
);
}

Also add this to App.css file:

.form {
  flex-direction: column;
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.input {
  font-family: 'Montserrat', sans-serif;
  padding-top: 10;
}

We will use a Google font called Montserrat.

And also add a styling variable to the constants:

const formStyle = {
    flexDirection: "column",
    alignSelf: "center",
    width: "30%",
    display: "flex",
    justifyContent: "space-between",
  }

Step 4
Add variables and functions to handle user input:

  const [login, setLogin] = useState('');
  const [password, setPassword] = useState('');
  const [hover, setHover] = useState();
  const [remember, setRememeber] = useState(false);

  const handleSubmit = (event) => {
    alert('You have successfully signed in!');
    event.preventDefault();
  }

Step 5
Add the Login and Password inputs:

<label style={{color: "blue"}} class="input">
          Username or Email*:
          </label>
          <input 
            class="input"
            type="text" 
            style={inputStyle} 
            value={login} 
            onChange={(event) => setLogin(event.target.value)}
            placeholder={"your.name@email.com"}/>

<label class="input" style={{color: "blue"}}>
         Password*:
        </label>
          <input 
            class="input"
            type="password" 
            style={inputStyle} 
            value={password} 
            onChange={(event) => setPassword(event.target.value)}
            placeholder={"Min. 8 characters"}/>

We will use <label> tag to add labels for inputs. To create a password input we will specify the type of input as "password".

Also create the inputStyle variable to add stylings for our inputs:

const inputStyle = {
    padding: 8,
    borderRadius: 15,
    borderWidth: 1,
    margin: 5,
    backgroundColor: "#f5f5f5",
    borderColor: "#d2d2d4",
  }

Step 6
Also we will create a checkbox to let the user decide whether he wants to be remembered and add a Forgot Password? link:

<div style={{flexDirection: "row", display: "flex", justifyContent: "space-between", height: "100", padding: 5}}>
          <div style={{flexDirection: "row", display: "flex", justifyContent: "space-between"}}>
            <input 
              type="checkbox"
              checked={remember}
              onChange={() => setRememeber(prev => !prev)}/>
          <label>
          <div class="input" style={{fontSize: 12, justifyContent: "flex-start"}}>
            Rememeber me?
        </div>
        </label>
          </div>

          <div style={{justifyContent: "flex-end", display: "flex"}}>
            <a  href="#" class="input" style={{fontSize: 12}}>Forgot password?</a>
          </div>
        </div>

Step 7
After all we will add a submit button:

<div style={{justifyContent: "center", display: 'flex', bakgroundColor: "red", width: "100%"}}>
      <input type="submit" value="Sign In" 
        id="button"
        class="input"
        onMouseOver={handleMouseIn} onMouseOut={handleMouseOut}
          style={ hover ? hoverStyle : btnStyle}
          />

Also we need to add two functions to handle button behavior:

const handleMouseIn = () => {
    setHover(true);
  };

  const handleMouseOut = () => {
    setHover(false);
  };

And styling for our button:

const hoverStyle = {
    margin: 5, padding: 8, borderRadius: 15, width: "100%",
    backgroundColor: "white",
    color: "blue",
    borderWidth: 1,
    borderColor: "blue",
  }

  const btnStyle = {
    margin: 5, padding: 8, borderRadius: 15, width: "100%",
    backgroundColor: "blue",
    color: "white",
    borderWidth: 0
  }

That's it! After all that you should be able to see the similar page:

Hope you liked this tutorial and thanks for reading!😊

Top comments (3)

beernutz • Feb 2 '22

Minor point:

The use of "*" after each of the field names feels confusing from a user perspective. If the fields are required, do the validation and then respond with that information maybe.