{"size": 3071, "ext": "js", "max_stars_repo_path": "client/src/pages/login/index.js", "max_stars_repo_name": "C-A-Y-D-E/anime", "max_stars_repo_stars_event_min_datetime": "2020-11-17T13:16:10.000Z", "max_stars_repo_stars_event_max_datetime": "2020-12-09T08:08:25.000Z", "max_issues_repo_path": "client/src/pages/login/index.js", "max_issues_repo_name": "C-A-Y-D-E/anime", "max_issues_repo_issues_event_min_datetime": "2020-12-09T08:05:57.000Z", "max_issues_repo_issues_event_max_datetime": "2020-12-09T09:15:02.000Z", "max_forks_repo_path": "client/src/pages/login/index.js", "max_forks_repo_name": "C-A-Y-D-E/anime", "max_forks_repo_forks_event_min_datetime": "2020-11-23T12:51:30.000Z", "max_forks_repo_forks_event_max_datetime": "2021-03-20T17:16:25.000Z"}
{"max_stars_count": 5, "max_issues_count": 1, "max_forks_count": 2, "avg_line_length": 27.6666666667, "max_line_length": 75, "alphanum_fraction": 0.522305438}
import React from "react";
import {
  FormField,
  Form,
  Label,
  Input,
  FormHeading,
  FormMain,
  Forgot,
  SignupNavigate,
  Error,
} from "./loginStyle";
import { ButtonLink, Button } from "../../globalStyles";

import { login } from "../../store/actions/user";
import { ErrorMessage, Formik, Field } from "formik";
import * as Yup from "yup";
import { useDispatch, useSelector } from "react-redux";
import { store } from "react-notifications-component";

import { Redirect } from "react-router-dom";

const Login = ({ location }) => {
  const dispatch = useDispatch();
  const { loading, isAuth, error } = useSelector((states) => states.user);
  const { state } = location;
  const loginSchema = Yup.object().shape({
    email: Yup.string()
      .email("Invalid email")
      .required("Please enter your email"),
    password: Yup.string()
      .min(8, "Must be greater than 8")
      .required("Please enter your password"),
  });
  if (isAuth) {
    return <Redirect to={state ? state.from.pathname : "/"} />;
  }
  if (error) {
    store.addNotification({
      title: "Try Again",
      message: `${error}`,
      type: "danger",
      insert: "top",
      container: "top-right",
      animationIn: ["animate__animated", "animate__fadeIn"],
      animationOut: ["animate__animated", "animate__fadeOut"],
      dismiss: {
        duration: 2000,
        onScreen: true,
      },
      slidingExit: {
        duration: 800,
        timingFunction: "ease-out",
        delay: 0,
      },
    });
  }

  return (
    <FormMain>
      <Formik
        initialValues={{
          email: "",
          password: "",
        }}
        validationSchema={loginSchema}
        onSubmit={async (values) => {
          dispatch(login(values));
        }}
      >
        {({ isSubmitting, handleSubmit }) => (
          <Form onSubmit={handleSubmit}>
            <FormHeading>Login</FormHeading>
            <FormField>
              <Label htmlFor="email">Email</Label>
              <Field name="email" as={Input} type="email" />
              <ErrorMessage name="email" component={Error} />
            </FormField>

            <FormField>
              <Label htmlFor="password">Password</Label>
              <Field name="password" as={Input} type="password" />
              <ErrorMessage name="password" component={Error} />
            </FormField>
            <Forgot to="/forgot-password">Forgot your password?</Forgot>

            <Button
              style={{
                alignSelf: "start",
              }}
              white="true"
              disabled={loading}
            >
              {loading ? "Logging..." : "Login"}
            </Button>
          </Form>
        )}
      </Formik>

      <SignupNavigate>
        <h4>Dont have an account?</h4>
        <ButtonLink to="/signup" background="true" radius="50px">
          Signup
        </ButtonLink>
      </SignupNavigate>
    </FormMain>
  );
};

export default Login;
