Create a Cool Login Page with React
Tags: javascript, react, webdev, beginners
Published: 2022-01-30 10:24:14

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:

```html
<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:

```javascript
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:

```css
.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:

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

**Step 4**
Add variables and functions to handle user input:

```javascript
  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:

```javascript
<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:

```javascript
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:

```javascript
<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:

```javascript
<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:

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

  const handleMouseOut = () => {
    setHover(false);
  };
```
And styling for our button:

```javascript
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:
![login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbjrz8y2hexbqojgjhud.png)

Hope you liked this tutorial and thanks for reading!😊