login.js

import React, { useState } from "react";
import "./LoginPage.scss";
import { Form, Input, Button, Card, Checkbox, Image } from "semantic-ui-react";
import logo from "../../assets/image/logo.png";
import * as Yup from "yup";
import { Formik } from "formik";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { signIn } from "../../redux/actions/auth";

function LoginPage(props) {
  const auth = useSelector((state) => state.firebase.auth);
  const location = useLocation();
  const dispatch = useDispatch();
  const rememberMeChecked = localStorage.getItem("rememberMe") ? true : false;

  const [RememberMe, setRememberMe] = useState(rememberMeChecked);
  console.log(auth);
  const handleRememberMe = () => {
    setRememberMe(!RememberMe);
  };

  const initialEmail = localStorage.getItem("rememberMe")
    ? localStorage.getItem("rememberMe")
    : "";
  return (
    <Formik
      initialValues={{
        email: initialEmail,
        password: "",
      }}
      validationSchema={Yup.object().shape({
        email: Yup.string()
          .email("Email is invalid")
          .required("Email is required"),
        password: Yup.string()
          .min(6, "Password must be at least 6 characters")
          .required("Password is required"),
      })}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          let dataToSubmit = {
            email: values.email,
            password: values.password,
          };

          dispatch(signIn(dataToSubmit));
          props.history.push("/app/dashboard");
          window.localStorage.setItem("rememberMe", values.email);
          if (RememberMe === true) {
            window.localStorage.setItem("rememberMe", values.email);
          } else {
            localStorage.removeItem("rememberMe");
          }

          setSubmitting(false);
        }, 500);
      }}
    >
      {(props) => {
        const {
          values,
          touched,
          errors,
          handleChange,
          handleBlur,
          handleSubmit,
        } = props;

        return (
          <div className="loginpage">
            <Image src={logo} />
            <h3>Login</h3>
            <Card.Group centered className="card">
              <Form onSubmit={handleSubmit}>
                <Form.Field>
                  <label>Email</label>
                  <Input
                    id="email"
                    placeholder="Email"
                    type="text"
                    value={values.email}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                  {errors.email && touched.email && (
                    <div className="input-feedback">{errors.email}</div>
                  )}
                </Form.Field>
                <Form.Field>
                  <label>Password</label>
                  <Input
                    id="password"
                    type="password"
                    placeholder="Password"
                    value={values.password}
                    onChange={handleChange}
                    onBlur={handleBlur}
                  />
                  {errors.password && touched.password && (
                    <div className="input-feedback">{errors.password}</div>
                  )}
                </Form.Field>
                <Checkbox
                  label="Remember Me"
                  onChange={handleRememberMe}
                  checked={RememberMe}
                />
                <div className="button">
                  <Button primary color="blue">
                    Login
                  </Button>
                </div>
              </Form>
            </Card.Group>
          </div>
        );
      }}
    </Formik>
  );
}

export default LoginPage;