CODE EXAMPLE FOR JAVA

Login form

import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Helmet } from "react-helmet";
import BgImage from "./BgImage";
import toast, { Toaster } from "react-hot-toast";
import { useNavigate } from "react-router-dom";
import { postLogin } from "../../store/asyncMethods/authMethods";

const Signup = () => {
  const [state, setState] = useState({
    email: "",
    password: "",
  });
  const { loading, loginErrors, user } = useSelector(
    (state) => state.AuthReducer
  );
  const dispatch = useDispatch();
  const HandleInput = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };
  const Submit = async (e) => {
    e.preventDefault();
    dispatch(postLogin(state));
  };
  const navigate = useNavigate();
  useEffect(() => {
    if (loginErrors.length > 0) {
      toast.error(loginErrors);
    }
    if (user) {
      navigate("/");
    }
  }, [loginErrors, user]);
  return (
    <>
      <Helmet>
        <title>Login</title>
      </Helmet>
      <div className="row mt-80">
        <div className="col-8">
          <BgImage />
          <Toaster
            position="top-right"
            reverseOrder={false}
            toastOptions={{
              style: {
                fontSize: "14px",
              },
            }}
          />
        </div>
        <div className="col-4">
          <div className="account">
            <div className="account__section">
              <form onSubmit={Submit}>
                <div className="group">
                  <h3 className="form-heading">Login</h3>
                </div>
                <div className="group">
                  <input
                    type="email"
                    name="email"
                    className="group__control"
                    placeholder="Enter Email"
                    value={state.email}
                    onChange={HandleInput}
                  />
                </div>
                <div className="group">
                  <input
                    type="password"
                    name="password"
                    className="group__control"
                    placeholder="Enter Password"
                    value={state.password}
                    onChange={HandleInput}
                  />
                </div>
                <div className="group">
                  <input
                    type="submit"
                    className="btn btn-default btn-block"
                    value={loading ? "Login..." : "Login"}
                  />
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default Signup;