Login.js 4.06 KB
Newer Older
이재연's avatar
이재연 committed
1
import React, { useState } from 'react';
2
import { Link, Redirect } from 'react-router-dom';
이재연's avatar
이재연 committed
3
4
5
6
import { Form, Col, Container, Button, Row, Alert } from 'react-bootstrap';
import axios from 'axios'
import catchErrors from '../utils/catchErrors'
import { handleLogin } from '../utils/auth'
이재연's avatar
logsign    
이재연 committed
7

이재연's avatar
이재연 committed
8

이재연's avatar
이재연 committed
9
10
11
12
13
14
const INIT_USER = {
    id: '',
    password: ''
}

function Login() {
이재연's avatar
이재연 committed
15

이재연's avatar
이재연 committed
16
17
18
19
20
    const [validated, setValidated] = useState(false);
    const [user, setUser] = useState(INIT_USER)
    const [error, setError] = useState('')
    const [success, setSuccess] = useState(false)

이재연's avatar
이재연 committed
21
22
23
24
25
    function handleChange(event) {
        const { name, value } = event.target
        setUser({ ...user, [name]: value })

    }
이재연's avatar
이재연 committed
26

이재연's avatar
이재연 committed
27
28
29
30
31
32
    async function handleSubmit(event) {
        event.preventDefault()
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
이재연's avatar
이재연 committed
33
34
        }
        setValidated(true);
이재연's avatar
이재연 committed
35
36
        try {
            setError('')
이재연's avatar
이재연 committed
37
            const response=await axios.post('/api/auth/login', user)
이재연's avatar
0115    
이재연 committed
38
            handleLogin(response.data)
이재연's avatar
이재연 committed
39
40
41
42
            setSuccess(true)
        } catch (error) {
            catchErrors(error, setError)
        }
이재연's avatar
이재연 committed
43
    }
이재연's avatar
이재연 committed
44

이재연's avatar
이재연 committed
45
46
    if (success) {
        alert('로그인 되었습니다.')
이재연's avatar
이재연 committed
47
        window.location.href='/'
이재연's avatar
이재연 committed
48
    }
이재연's avatar
이재연 committed
49
50
51



이재연's avatar
이재연 committed
52
    return (
이재연's avatar
이재연 committed
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
        <Container className="my-5">
            <Row className="justify-content-center">
                <Col md={5} xs={10} className="border" style={{ background: '#F7F3F3' }}>
                    <h3 className="text-center mt-5">Login</h3>
                    {error && <Alert variant='danger'>
                        {error}
                    </Alert>}
                    <Form noValidate validated={validated}
                        onSubmit={handleSubmit}
                        className="p-5">
                        <Form.Group controlId="formBasicId">
                            <Form.Row>
                                <Col sm={4} xs={6} as={Form.Label} for="id"> 아이디</Col>
                                <Col sm={8} xs={12} as={Form.Control}
                                    required
                                    type="text"
                                    name="id"
                                    placeholder="ID"
                                    value={user.id}
                                    onChange={handleChange}
                                    style={{ width: '160px' }}>
                                </Col>
                                <Form.Control.Feedback className="text-center" type="invalid"> 아이디를 입력하세요.</Form.Control.Feedback>
                            </Form.Row>
                        </Form.Group>
이재연's avatar
logsign    
이재연 committed
78

이재연's avatar
이재연 committed
79
80
81
82
83
84
85
86
87
88
89
90
91
                        <Form.Group controlId="formBasicPassword">
                            <Form.Row>
                                <Col sm={4} xs={6} as={Form.Label} for="password">비밀번호</Col>
                                <Col sm={8} xs={12} as={Form.Control}
                                    type="password"
                                    name="password"
                                    value={user.password}
                                    placeholder="Password"
                                    onChange={handleChange}
                                    style={{ width: '160px' }}
                                    required />
                                <Form.Control.Feedback className="text-center" type="invalid">
                                    비밀번호를 입력하세요.
이재연's avatar
이재연 committed
92
                                    </Form.Control.Feedback>
이재연's avatar
이재연 committed
93
94
95
96
97
98
99
100
101
102
                            </Form.Row>
                        </Form.Group>
                        <Button style={{ background: '#91877F', borderColor: '#91877F' }} type="submit" block>Login</Button>
                        <div className="loginLine">
                            <Link to="/signup" style={{ color: '#91877F' }}>회원이 아니십니까?</Link>
                        </div>
                    </Form>
                </Col>
            </Row>
        </Container>
이재연's avatar
이재연 committed
103
104
    )

Kim, Subin's avatar
Kim, Subin committed
105
106
107
}

export default Login