Login.js 2.84 KB
Newer Older
seoyeon's avatar
0726    
seoyeon committed
1
2
3
4
import { useEffect, useState } from 'react'
import { Redirect } from 'react-router-dom'
import userApi from '../apis/user.api'
import catchErrors from "../context/catchError";
seoyeon's avatar
seoyeon committed
5
import { handleLogin } from '../context/auth';
Kim, Chaerin's avatar
Kim, Chaerin committed
6
const INIT_USER = {
seoyeon's avatar
0726    
seoyeon committed
7
8
9
  email: '',
  password: '',
}
Kim, Chaerin's avatar
Kim, Chaerin committed
10

Kim, Chaerin's avatar
Kim, Chaerin committed
11
const Login = () => {
seoyeon's avatar
0726    
seoyeon committed
12
13
14
15
16
  // const { loading, login, catchErrorAuth } = useAuth()
  const [user, setUser] = useState(INIT_USER)
  const [disabled, setDisabled] = useState(true)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState(false)
Kim, Chaerin's avatar
Kim, Chaerin committed
17
18

  useEffect(() => {
seoyeon's avatar
0726    
seoyeon committed
19
20
21
    const isUser = Object.values(user).every((el) => Boolean(el))
    isUser ? setDisabled(false) : setDisabled(true)
  }, [user])
Kim, Chaerin's avatar
Kim, Chaerin committed
22
23

  function handleChange(event) {
seoyeon's avatar
0726    
seoyeon committed
24
25
    const { name, value } = event.target
    setUser({ ...user, [name]: value })
Kim, Chaerin's avatar
Kim, Chaerin committed
26
27
  }

Kim, Chaerin's avatar
.    
Kim, Chaerin committed
28
  async function handleSubmit(e) {
seoyeon's avatar
0726    
seoyeon committed
29
    e.preventDefault()
seoyeon's avatar
0724    
seoyeon committed
30
    console.log('로그인')
Kim, Chaerin's avatar
Kim, Chaerin committed
31
32
33
    try {
      // setLoading(true);
      // setError("");
seoyeon's avatar
0726    
seoyeon committed
34
35
      const data = await userApi.login(user)
      console.log(data)
seoyeon's avatar
seoyeon committed
36
      handleLogin(data.id)
seoyeon's avatar
0726    
seoyeon committed
37
      setSuccess(true)
Kim, Chaerin's avatar
Kim, Chaerin committed
38
    } catch (error) {
seoyeon's avatar
0726    
seoyeon committed
39
40
      console.log('error in login', error)
      catchErrors(error, setError)
Kim, Chaerin's avatar
Kim, Chaerin committed
41
42
43
44
    } finally {
      // setLoading(false);
    }
  }
seoyeon's avatar
0716    
seoyeon committed
45
46
  if (success) {
    alert('로그인 되었습니다')
seoyeon's avatar
0726    
seoyeon committed
47
    return <Redirect to="/user" />
seoyeon's avatar
0716    
seoyeon committed
48
49
  }

seoyeon's avatar
0726    
seoyeon committed
50
  const { email, password } = user
Kim, Chaerin's avatar
Kim, Chaerin committed
51
52
53

  return (
    <div className="modal-content">
seoyeon's avatar
0726    
seoyeon committed
54
      {error && <div className="alert alert-danger">{error}</div>}
Kim, Chaerin's avatar
Kim, Chaerin committed
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
      <form onSubmit={handleSubmit}>
        <div className="modal-header">
          <h5 className="modal-title" id="loginModalLabel">
            로그인
          </h5>
          <button
            type="button"
            className="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div className="modal-body">
          <div>
            <label>아이디</label>
            <input
              className="form-control"
Kim, Chaerin's avatar
Kim, Chaerin committed
72
              id="email"
Kim, Chaerin's avatar
Kim, Chaerin committed
73
              type="text"
Kim, Chaerin's avatar
Kim, Chaerin committed
74
              name="email"
Kim, Chaerin's avatar
Kim, Chaerin committed
75
              placeholder="아이디를 입력하세요"
Kim, Chaerin's avatar
Kim, Chaerin committed
76
              value={email}
Kim, Chaerin's avatar
Kim, Chaerin committed
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
              onChange={handleChange}
            />
          </div>
          <div>
            <label>비밀번호</label>
            <input
              className="form-control"
              id="password"
              type="password"
              name="password"
              placeholder="비밀번호를 입력하세요"
              value={password}
              onChange={handleChange}
            />
          </div>
        </div>
        <div className="modal-footer">
seoyeon's avatar
0726    
seoyeon committed
94
95
96
97
98
99
          <button
            type="submit"
            className="btn btn-primary"
            disabled={disabled}
            data-bs-dismiss="modal"
          >
Kim, Chaerin's avatar
Kim, Chaerin committed
100
101
            로그인
          </button>
Kim, Chaerin's avatar
Kim, Chaerin committed
102
        </div>
Kim, Chaerin's avatar
Kim, Chaerin committed
103
104
      </form>
    </div>
seoyeon's avatar
0726    
seoyeon committed
105
106
  )
}
Kim, Chaerin's avatar
Kim, Chaerin committed
107

seoyeon's avatar
0726    
seoyeon committed
108
export default Login