{"size": 2706, "ext": "js", "max_stars_repo_path": "src/components/molecules/SignInForm/SignInForm.js", "max_stars_repo_name": "alexandervalencia/gsbc.com", "max_stars_repo_stars_event_min_datetime": "2018-05-21T16:40:31.000Z", "max_stars_repo_stars_event_max_datetime": "2020-07-03T01:21:49.000Z", "max_issues_repo_path": "src/components/molecules/SignInForm/SignInForm.js", "max_issues_repo_name": "alexandervalencia/gsbc.com", "max_issues_repo_issues_event_min_datetime": "2018-07-03T16:04:43.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T11:03:28.000Z", "max_forks_repo_path": "src/components/molecules/SignInForm/SignInForm.js", "max_forks_repo_name": "alexandervalencia/gsbc", "max_forks_repo_forks_event_min_datetime": "2017-08-14T17:53:39.000Z", "max_forks_repo_forks_event_max_datetime": "2017-12-04T21:53:06.000Z"}
{"max_stars_count": 3, "max_issues_count": 10, "max_forks_count": 2, "avg_line_length": 33.0, "max_line_length": 98, "alphanum_fraction": 0.5284552846}
import React, { useContext } from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import { Button } from 'reactstrap';
import { Link, Redirect } from 'react-router-dom';

import { UserContext } from '../../../providers/UserProvider';
import { auth } from '../../../firebase';

import * as formValidation from '../../../utils/formValidation';

const SignInForm = () => {
  const user = useContext(UserContext);

  return (
    <Formik
      initialValues={{
        password: '',
        email: '',
      }}
      onSubmit={(values, actions) => {
        actions.setStatus(undefined);
        actions.setSubmitting(true);

        auth
          .signInWithEmailAndPassword(values.email, values.password)
          .then(() => {
            actions.resetForm();
            actions.setSubmitting(false);
          })
          .catch(error => {
            if (error.code === `auth/user-not-found`) {
              actions.setStatus({ email: `Incorrect email address or unregistered user.` });
            } else if (error.code === `auth/wrong-password`) {
              actions.setStatus({ password: `Incorrect password, please try again` });
            }

            actions.setSubmitting(false);
          });
      }}
      render={({ errors, status, touched, isSubmitting }) => (
        <Form>
          <div className="form-group">
            <label htmlFor="email">Email</label>
            <Field
              className="form-control"
              name="email"
              placeholder="email"
              type="email"
              validate={formValidation.email}
            />
            <ErrorMessage className="form-text" name="email" component="div" />
          </div>
          {status && status.email && <div className="mb-3 text-danger">{status.email}</div>}
          <div className="form-group">
            <label className="d-flex" htmlFor="password">
              Password
              <Link className="ml-auto" to="/reset_password">
                Forgot My Password
              </Link>
            </label>
            <Field
              className="form-control"
              name="password"
              placeholder="password"
              type="password"
              validate={formValidation.password}
            />
            <ErrorMessage className="form-text" name="password" component="div" />
          </div>
          {status && status.password && <div className="mb-3 text-danger">{status.password}</div>}
          <Button color="primary" disabled={isSubmitting} type="submit">
            Sign In
          </Button>
          {user && <Redirect to="/" />}
        </Form>
      )}
    />
  );
};

export default SignInForm;
