LoginForm.js 2.64 KB
Newer Older
1
import { useState } from 'react';
2
import { Redirect, Link } from "react-router-dom";
3
import { Formik } from 'formik';
4
import { useAuth } from "../../utils/context.js";
5
import * as Yup from 'yup';
6
import catchErrors from "../../utils/catchErrors.js";
Choi Ga Young's avatar
Choi Ga Young committed
7
import styles from "./form.module.scss";
8
9

const LoginForm = () => {
10
  const { login } = useAuth();
11
12
13
14
15
16
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState("");

  if (success) {
    return <Redirect to="/home" />;
  }
17
  return (
Kim, Subin's avatar
Kim, Subin committed
18
    <>
19
20
21
22
23
24
25
26
27
28
29
      <Formik
        initialValues={{
          userId: '',
          password: '',
        }}
        validationSchema={Yup.object({
          userId: Yup.string()
            .required('아이디를 입력해주세요.'),
          password: Yup.string()
            .required('비밀번호를 입력해주세요.'),
        })}
Choi Ga Young's avatar
Choi Ga Young committed
30
        onSubmit={async (values, { setSubmitting, resetForm }) => {
31
          try {
32
            console.log('login values', values)
33
            setError("")
34
35
            const result = await login(values)
            if (result) {
36
37
38
39
              setSuccess(true)
            }
          } catch (error) {
            catchErrors(error, setError)
Choi Ga Young's avatar
Choi Ga Young committed
40
            resetForm();
41
          }
42
43
44
45
46
47
          setTimeout(() => {
            setSubmitting(false);
          }, 400);
        }}
      >
        {formik => (
Kim, Subin's avatar
Kim, Subin committed
48
49
          <form onSubmit={formik.handleSubmit} className="m-5">
            <div className="mb-3">
50
              <input type="text" name="userId"
Choi Ga Young's avatar
Choi Ga Young committed
51
                className={`form-control shadow-none rounded-0 ${styles.textInput}`}
52
53
54
                placeholder="아이디"
                {...formik.getFieldProps('userId')} />
              {formik.touched.userId && formik.errors.userId ? (
55
                <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.userId}</div>
56
57
58
59
              ) : null}
            </div>
            <div className="mb-3">
              <input type="password" name="password"
Choi Ga Young's avatar
Choi Ga Young committed
60
                className={`form-control shadow-none rounded-0 ${styles.textInput}`}
61
62
63
                placeholder="비밀번호"
                {...formik.getFieldProps('password')} />
              {formik.touched.password && formik.errors.password ? (
64
                <div className="text-danger mt-1" style={{ fontSize: "10px" }}>{formik.errors.password}</div>
65
66
67
68
69
70
71
72
73
              ) : null}
            </div>
            <div className="d-grid gap-2 mt-5">
              <button type="submit" className="btn btn-crimson">로그인</button>
              <Link className="btn btn-crimson" to="/signup">회원가입</Link>
            </div>
          </form>
        )}
      </Formik>
Kim, Subin's avatar
Kim, Subin committed
74
    </>
75
76
77
78
79
  );
}

export default LoginForm;