Login.tsx 2.7 KB
Newer Older
Yoon, Daeki's avatar
Yoon, Daeki committed
1
import React, { ChangeEvent, FormEvent, useState } from "react";
2
import { useLocation, useNavigate } from "react-router-dom";
Yoon, Daeki's avatar
Yoon, Daeki committed
3
4
5
import { catchErrors } from "../helpers";
import { SpinnerIcon } from "../icons";
import { useAuth } from "./auth.context";
6

7
8
9
10
interface LocationState {
  state: { from: string };
}

Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
11
export const Login = () => {
Yoon, Daeki's avatar
Yoon, Daeki committed
12
13
14
15
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [loginData, setLoginData] = useState({ email: "", password: "" });
  const navigate = useNavigate();
16
  const location = useLocation() as LocationState;
Yoon, Daeki's avatar
Yoon, Daeki committed
17
  const { login } = useAuth();
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
18

Yoon, Daeki's avatar
Yoon, Daeki committed
19
  const from = location.state?.from || "/";
20

Yoon, Daeki's avatar
Yoon, Daeki committed
21
22
23
24
  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    const { name, value } = e.currentTarget;
    setLoginData({ ...loginData, [name]: value });
  }
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
25

Yoon, Daeki's avatar
Yoon, Daeki committed
26
27
28
29
30
  async function handleSubmit(e: FormEvent) {
    e.preventDefault();
    const { email, password } = loginData;
    try {
      setLoading(true);
31
      await login(email, password, () => navigate(from, { replace: true }));
Yoon, Daeki's avatar
Yoon, Daeki committed
32
33
34
35
36
    } catch (error) {
      setLoading(false);
      catchErrors(error, setError);
    }
  }
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
37
38

  return (
Lee SeoYeon's avatar
0708    
Lee SeoYeon committed
39
40
41
    <div className="flex flex-col items-center mt-5">
      <div className="text-2xl mt-5">로그인</div>
      <form onSubmit={handleSubmit} className="flex flex-col mt-3 w-80">
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
42
43
44
45
        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
          이메일
        </label>
        <input
Yoon, Daeki's avatar
Yoon, Daeki committed
46
          onChange={handleChange}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
47
          className="shadow appearance-none border rounded  py-2 px-3 text-gray-70"
Yoon, Daeki's avatar
Yoon, Daeki committed
48
          name="email"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
49
          type="email"
Yoon, Daeki's avatar
Yoon, Daeki committed
50
          autoComplete="username"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
51
          placeholder="이메일을 입력하세요"
Yoon, Daeki's avatar
Yoon, Daeki committed
52
          value={loginData.email}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
53
54
55
56
57
58
        />

        <label className="block text-gray-700 text-sm font-bold mb-2 mt-3">
          비밀번호
        </label>
        <input
Yoon, Daeki's avatar
Yoon, Daeki committed
59
          onChange={handleChange}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
60
          className="shadow appearance-none border rounded py-2 px-3 text-gray-70"
Yoon, Daeki's avatar
Yoon, Daeki committed
61
          name="password"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
62
          type="password"
Yoon, Daeki's avatar
Yoon, Daeki committed
63
          autoComplete="current-password"
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
64
          placeholder="비밀번호를 입력하세요"
Yoon, Daeki's avatar
Yoon, Daeki committed
65
          value={loginData.password}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
66
        />
Yoon, Daeki's avatar
Yoon, Daeki committed
67
68
69
70
71
        {error && (
          <div className="text-red-500 text-sm mb-6">
            <p>{error}</p>
          </div>
        )}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
72
        <div className="text-center">
Yoon, Daeki's avatar
Yoon, Daeki committed
73
74
75
          <button
            type="submit"
            disabled={loading ? true : false}
Lee SeoYeon's avatar
0708    
Lee SeoYeon committed
76
            className="bg-themeColor text-white border rounded w-100 py-2 px-3 mt-5"
Yoon, Daeki's avatar
Yoon, Daeki committed
77
78
79
80
          >
            {loading && (
              <SpinnerIcon className="animate-spin h-5 w-5 mr-1 text-white" />
            )}
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
81
82
83
            로그인
          </button>
        </div>
Yoon, Daeki's avatar
Yoon, Daeki committed
84
      </form>
Jiwon Yoon's avatar
Jiwon Yoon committed
85
    </div>
Lee SeoYeon's avatar
0704    
Lee SeoYeon committed
86
87
  );
};