Rey's Blog

[Instagram Clone]React_Login Page

Rey Jang's photo
Rey Jang

Table of contents

JSX code for Login Form

Rules

  1. 'class' attributes ➡️ 'className'
  2. End self-closing tags
  3. Edit image paths
const Login = () => {
(...)
  return (
    <>
      <div className="login-container">
        <h1>Westagram</h1>
        <form>
          <input
            type="text"
            placeholder="Phone number, username or email address"
            className="login-input"
            id="id"
          />
          <input
            type="password"
            placeholder="Password"
            className="login-input"
            id="pw"
          />
          <button type="submit"> Log In </button>
        </form>
        <div className="divider">OR</div>
        <div className="fb-wrapper">
          <div className="fb">
            <a href="https://facebook.com">
              <img src="/images/sooyeonJang/facebook.png" alt="facebook-logo" />
              Log in with Facebook
            </a>
          </div>
        </div>
        <div className="forgot-wrapper">
          <div className="forgot">
            <a href="https://www.instagram.com/accounts/password/reset/">
              Forgotten your password?
            </a>
          </div>
        </div>
      </div>
      <div className="sign-up">
        <p>
          Don't have an account?{' '}
          <a href="https://www.instagram.com/accounts/emailsignup/">Sign up</a>
        </p>
      </div>
    </>
  );
};


Save User Inputs

import React, { useState } from 'react'; 
//import useState Hook from React to add states to function components.

const Login = () => {
(...)
  const [id, setId] = useState('');
  const [pw, setPw] = useState('');
(...)
};


Add Functions to Handle Form Submit

const Login = () => {
(...)
  function handleIdInput(e) {
    setId(e.target.value);
  }

  function handlePwInput(e) {
    setPw(e.target.value);
  }

  return (
    <>
(...)
        <form>
          <input
            onChange={handleIdInput}
            type="text"
            placeholder="Phone number, username or email address"
            className="login-input"
            id="id"
          />
          <input
            onChange={handlePwInput}
            type="password"
            placeholder="Password"
            className="login-input"
            id="pw"
          />
(...)
 );
};


ID&Password Validation

const Login = () => {
(...)
  const isValidEmail = id.includes('@') && id.includes('.');
  const isValidPassword = pw.length >= 5;

  const isValidLogin = isValidEmail && isValidPassword;
(...)

  return (
    <>
(...)
        <form>
          <input
            onChange={handleIdInput}
            type="text"
            placeholder="Phone number, username or email address"
            className="login-input"
            id="id"
          />
          <input
            onChange={handlePwInput}
            type="password"
            placeholder="Password"
            className="login-input"
            id="pw"
          />
          <button
            className={
              isValidLogin ? 'login-btn-activated' : 'login-btn-deactivated'
            } 
            type="submit"
          >
            Log In
          </button>
        </form>
(...)
  );
};

☝️SCSS

.login-btn-deactivated {
  display: block;
  box-sizing: border-box;
  background-color: rgba(56, 151, 240, 0.3);
  border-style: none;
  border-radius: 5px;
  width: 320px;
  padding: 8px;
  margin: 0 auto;
  color: $white;
}

.login-btn-activated {
  display: block;
  box-sizing: border-box;
  background-color: rgba(56, 151, 240);
  border-style: none;
  border-radius: 5px;
  width: 320px;
  padding: 8px;
  margin: 0 auto;
  color: $white;
}


Navigate to the Main page

(...)
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate('/main-sy');
  };
(...)
  return (
(...)
          <button
            className={
              isValidLogin ? 'login-btn-activated' : 'login-btn-deactivated'
            }
            type="submit"
            onClick={goToMain}
          >
            Log In
          </button>
        </form>
(...)
  );
};



Full Code🔻

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import './Login.scss'; //link css
import { useNavigate } from 'react-router-dom';

const Login = () => {
  const navigate = useNavigate();

  const goToMain = () => {
    navigate('/main-sy');
  };

  const [id, setId] = useState('');
  const [pw, setPw] = useState('');

  const isValidEmail = id.includes('@') && id.includes('.');
  const isValidPassword = pw.length >= 5;

  const isValidLogin = isValidEmail && isValidPassword;

  function handleIdInput(e) {
    setId(e.target.value);
  }

  function handlePwInput(e) {
    setPw(e.target.value);
  }

  return (
    <>
      <div className="login-container">
        <h1>Westagram</h1>
        <form>
          <input
            onChange={handleIdInput}
            type="text"
            placeholder="Phone number, username or email address"
            className="login-input"
            id="id"
          />
          <input
            onChange={handlePwInput}
            type="password"
            placeholder="Password"
            className="login-input"
            id="pw"
            onkeydown="activateBtn()"
          />
          <button
            className={
              isValidLogin ? 'login-btn-activated' : 'login-btn-deactivated'
            }
            type="submit"
            onClick={goToMain}
          >
            Log In
          </button>
        </form>
        <div className="divider">OR</div>
        <div className="fb-wrapper">
          <div className="fb">
            <a href="https://facebook.com">
              <img src="/images/sooyeonJang/facebook.png" alt="facebook-logo" />
              Log in with Facebook
            </a>
          </div>
        </div>
        <div className="forgot-wrapper">
          <div className="forgot">
            <a href="https://www.instagram.com/accounts/password/reset/">
              Forgotten your password?
            </a>
          </div>
        </div>
      </div>
      <div className="sign-up">
        <p>
          Don't have an account?{' '}
          <a href="https://www.instagram.com/accounts/emailsignup/">Sign up</a>
        </p>
      </div>
    </>
  );
};

export default Login;
React