login.tsx 3.81 KB
Newer Older
1
2
3
4
5
import { Link, useNavigate } from "react-router-dom";
import React, { useState, useEffect, FormEvent } from "react";
import { LoginUser } from "../types";
import { catchErrors } from "../helpers";
import { useAuth } from "./auth.context";
Yoon, Daeki's avatar
Yoon, Daeki committed
6
import { SpinnerIcon } from "../icons";
Kim, MinGyu's avatar
처음    
Kim, MinGyu committed
7

8
9
10
11
12
13
14
15
16
17
18
19
export default function Login() {
  const [user, setUser] = useState<LoginUser>({
    email: "",
    password: "",
  });

  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [disabled, setDisabled] = useState(false);
  const [success, setSuccess] = useState(false);
  const navigate = useNavigate();
  const { login } = useAuth();
Kim, MinGyu's avatar
signup    
Kim, MinGyu committed
20

21
22
23
  useEffect(() => {
    setDisabled(!(user.email && user.password));
  }, [user]);
Kim, MinGyu's avatar
Kim, MinGyu committed
24

25
26
27
28
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = event.currentTarget;
    setUser({ ...user, [name]: value });
  }
Kim, MinGyu's avatar
Kim, MinGyu committed
29

30
31
32
33
34
  async function handleSubmit(event: FormEvent) {
    event.preventDefault();
    try {
      setError("");
      console.log("user data", user);
Kim, MinGyu's avatar
Kim, MinGyu committed
35

Yoon, Daeki's avatar
Yoon, Daeki committed
36
      setLoading(true);
37
      await login(user.email, user.password, () => {
백승민's avatar
백승민 committed
38
39
40
41
42
        if (user.email == "admin@korea.ac.kr" && user.password == "111111") {
          navigate("/admin", { replace: true })
        } else {
          navigate("/", { replace: true });
        }
43
44
45
46
47
48
49
50
51
      });
      // console.log("서버연결됬나요", res);
      // console.log("로그인");
    } catch (error) {
      console.log("에러발생");
      catchErrors(error, setError);
    } finally {
      setLoading(false);
    }
Kim, MinGyu's avatar
Kim, MinGyu committed
52
  }
53

Kim, MinGyu's avatar
Kim, MinGyu committed
54
  return (
55
56
57
58
    <div className="flex flex-col items-center my-10">
      <div className="bg-white w-1/2 md:w-1/3 my-8 text-center text-2xl">
        <Link to="/">Travel Report</Link>
      </div>
Yoon, Daeki's avatar
Yoon, Daeki committed
59
60
61
62
63
64
65
66
67
68
      <div className="flex flex-col w-full md:w-2/5 p-8 md:p-4">
        <form
          onSubmit={handleSubmit}
          className="flex flex-col md:flex-row md:justify-around border-2 border-black rounded-xl p-8 gap-y-4"
        >
          <div className="flex flex-col md:w-2/3 gap-2">
            <input
              className="placeholder:text-slate-300
                bg-white border border-slate-500 rounded-2xl
                py-3 md:py-2 pl-9 pr-3 
Kim, MinGyu's avatar
Kim, MinGyu committed
69
70
                focus:border-black
                "
Yoon, Daeki's avatar
Yoon, Daeki committed
71
72
73
74
75
              placeholder="이메일"
              type="email"
              name="email"
              onChange={handleChange}
            />
76

Yoon, Daeki's avatar
Yoon, Daeki committed
77
78
79
            <input
              className="placeholder:italic placeholder:text-slate-300
                bg-white border border-slate-500 rounded-2xl
80
                py-3 md:py-2 pl-9 pr-3 
Kim, MinGyu's avatar
Kim, MinGyu committed
81
82
                focus:border-black
                "
Yoon, Daeki's avatar
Yoon, Daeki committed
83
84
85
86
87
              placeholder="Password"
              type="password"
              name="password"
              onChange={handleChange}
            />
88
          </div>
Yoon, Daeki's avatar
Yoon, Daeki committed
89
90
91
92
93
94
95
96
97
98
          <button
            disabled={disabled}
            type="submit"
            className="my-4 md:my-0 bg-sky-600 hover:bg-sky-700 rounded-xl text-xl py-4 md:px-4"
          >
            {" "}
            {loading && (
              <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-slate" />
            )}
            로그인
99
          </button>
Yoon, Daeki's avatar
Yoon, Daeki committed
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
        </form>
        <div className="flex flex-col">
          {error && (
            <div className="mt-2 text-center text-red-500 text-sm">
              <p>{error}</p>
            </div>
          )}
          <div className="flex justify-around m-4">
            <button className="bg-white ">
              <Link to="/signup">회원가입</Link>
            </button>
            <div className="grid grid-cols-2 divide-x-2">
              <div></div>
              <div></div>
            </div>
            <button className="bg-white">
              <Link to="/forgot">비밀번호 찾기</Link>
            </button>
Kim, MinGyu's avatar
Kim, MinGyu committed
118
119
120
          </div>
        </div>
      </div>
121
    </div>
Kim, MinGyu's avatar
Kim, MinGyu committed
122
123
  );
}