LoginComp.js 4.65 KB
Newer Older
Spark's avatar
Spark committed
1
import React, { useState } from 'react';
Spark's avatar
Spark committed
2
import '../App.css'
Spark's avatar
Spark committed
3
import { Form, Button, Row, Col, Card, Alert, FloatingLabel } from 'react-bootstrap';
Spark's avatar
Spark committed
4
import { LoginWithKakao } from '../utils/Oauth';
Spark's avatar
Spark committed
5
import axios from 'axios';
Spark's avatar
Spark committed
6
import { routesClient } from '../routesClient';
Spark's avatar
Spark committed
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function LoginComp() {

    const cardstyled = {
        margin: 'auto',
        padding: '1em',
        display: 'flex',
        justifyContent: 'center',
        width: '100%',
        borderWidth: '3px',
        borderRadius: '20px',
        borderColor: 'rgb(110, 189, 142)',
        color: '#04AB70'
    }

    const inboxstyled = {
        display: 'flex',
        flexDirection: 'column',
Spark's avatar
Spark committed
25
        maxWidth: '80%',
Spark's avatar
Spark committed
26
27
        justifyContent: 'center',
        margin: 'auto',
Spark's avatar
Spark committed
28
29
        padding: '0.5em',
        color: 'black'
Spark's avatar
Spark committed
30
31
    }

Spark's avatar
Spark committed
32
33
    const [alertShow, setAlertShow] = useState(false)
    const [emailAddress, setEmailAddress] = useState('')
Spark's avatar
Spark committed
34

35
    const [mailSend, setMailSend] = useState(false)
Spark's avatar
Spark committed
36
37

    function addressUrl() {
38
        const afterAt = emailAddress.split('@')[1]
39
        if (afterAt) {
40
            const newLink = 'https://www.' + afterAt;
41
            window.location.replace(newLink);
42
        }
43
44
        else if (afterAt == 'korea.ac.kr') {
            window.location.replace('https://www.gmail.com');
45
        }
Spark's avatar
Spark committed
46
    }
Spark's avatar
Spark committed
47

Spark's avatar
Spark committed
48
49
50
51
    function handleChange(event) {
        setEmailAddress(event.target.value)
    }

Spark's avatar
Spark committed
52
53
    async function handleSubmit(event) {
        event.preventDefault();
Spark's avatar
Spark committed
54
        const res = await axios.post(routesClient.login, { email: emailAddress, isOauth: false })
55
56
57
58
        console.log('mail_sending : ', res.data.contents.mail_sending)
        setMailSend(res.data.contents.mail_sending)
        setAlertShow(true)
        localStorage.setItem('login', true)
Spark's avatar
Spark committed
59
60
61
    }


Spark's avatar
Spark committed
62
63
64
    return (
        <Row className='text-center w-100 my-2'>
            <Card style={cardstyled}>
Spark's avatar
Spark committed
65
                <Card.Title id='impactTitle'>
Spark's avatar
Spark committed
66
67
                    LOGIN
                </Card.Title>
Spark's avatar
Spark committed
68
69
70
                <Card.Subtitle style={{ fontWeight: 'lighter' }}>
                    Log in with your social media account or email address
                </Card.Subtitle>
Spark's avatar
Spark committed
71
72
                <hr />
                <Card.Text>
Spark's avatar
Spark committed
73
                    <Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
74
                        {mailSend ?
Spark's avatar
Spark committed
75
76
77
78
                            <Alert show={alertShow} variant={'success'}>
                                <Col>
                                    😍 이메일 전송이 완료 되었습니다.
                                </Col>
Spark's avatar
Spark committed
79
                                <Alert.Link href="" onClick={addressUrl} target='_blank' style={{ fontSize: '0.8em' }}>
Spark's avatar
Spark committed
80
81
82
83
84
85
86
87
                                    이메일 확인 하러가기 
                                </Alert.Link>
                            </Alert>
                            :
                            <Alert show={alertShow} variant={'danger'}>
                                <Col>
                                    😭 이메일을 정확하게 적어주세요.
                                </Col>
Spark's avatar
Spark committed
88
89
90
                                <Alert.Link href="/signup" target='_blank' style={{ fontSize: '0.8em' }}>
                                    회원가입 하러가기 
                                </Alert.Link>
Spark's avatar
Spark committed
91
92
93
                            </Alert>
                        }
                    </Row>
Spark's avatar
Spark committed
94

Spark's avatar
Spark committed
95
                    <Form style={inboxstyled} onSubmit={handleSubmit}>
96
                        <FloatingLabel label="Email">
97
                            <Form.Control type="email" placeholder="Email" onChange={handleChange} required />
Spark's avatar
Spark committed
98
                        </FloatingLabel>
99
                        <Button variant='light' className='mt-3' id='formbtn' type='submit'>
Spark's avatar
Spark committed
100
101
102
                            LOGIN
                        </Button>
                    </Form>
Spark's avatar
Spark committed
103
104
105
106
107
108
109
110
111
112
113

                    <Row className='d-flex align-items-center m-2'>
                        <Col>
                            <hr />
                        </Col>
                        OR
                        <Col>
                            <hr />
                        </Col>
                    </Row>

Spark's avatar
Spark committed
114
115
116
                    <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
                        <a href="#;" onClick={LoginWithKakao} id='socialLink' >
                            {/* 세미콜론이 붙으면 최상단 이동 x */}
Spark's avatar
Spark committed
117
                            <img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
Spark's avatar
Spark committed
118
119
120
121
122
123
124
125
126
127
128
                        </a>

                    </Row>
                </Card.Text>
            </Card>

        </Row>
    )
}

export default LoginComp;