Login Component Example

Login.jsx

import { useNavigate } from "react-router";
import { fetchToken, setToken } from "./Auth";
import { validateForm } from "./FormValidation";
import { useState, useEffect } from "react";
import axios from "axios";
import Button from "react-bootstrap/Button";
import { Container, Row, Col } from "react-bootstrap";
import FormInput from "./components/FormInput";

export default function Login() {
	
  const navigate = useNavigate();
  const [state, setState] = useState();
  const [formErrors, setFormErrors] = useState([]);

  useEffect(()=>{
    if(fetchToken()){
      navigate("/profile");
    }
  })  

  const handleChange = (event) => {
    const { name, value } = event.target;
    setState((prevState) => ({ ...prevState, [name]: value }));
  };

  const login = () => {

    if (!validateForm(["username", "password"], state, setFormErrors)) {
      return false;
    }

    if (state) {
      axios
        .post("http://localhost:8008/login", {
          username: state.username,
          password: state.password,
        })
        .then(function (response) {
          if (response.data.token) {
            setToken(response.data.token);
            navigate("/profile");
          }
        })
        .catch(function (error) {
          console.log(error, "error");
        });
    }
  };
  
  return (    
          <Container>
            <Row>
              <Col xs={12} lg={4} md={{ span: 4, offset: 4 }}>
                <h1 className="mt-3">login</h1>
                <form onSubmit={(e) => e.preventDefault()}>
                  <FormInput
                    id="username"
                    label="Email"
                    formErrors={formErrors}
                    handleChange={handleChange}
                  />

                  <FormInput
                    id="password"
                    label="Password"
                    type="password"
                    formErrors={formErrors}
                    handleChange={handleChange}
                  />

                  <Button variant="primary" type="submit" onClick={login}>
                    Login
                  </Button>
                </form>
              </Col>
            </Row>
          </Container>
  );
}