SignupComp.js 5.17 KB
Newer Older
1
import React, { useEffect, 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
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function SignupComp() {

    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
24
        maxWidth: '80%',
Spark's avatar
Spark committed
25
26
        justifyContent: 'center',
        margin: 'auto',
Spark's avatar
Spark committed
27
28
        padding: '0.5em',
        color: 'black'
Spark's avatar
Spark committed
29
30
31
    }

    const initValues = {
Spark's avatar
Spark committed
32
        nick_name: '',
Spark's avatar
Spark committed
33
        email: ''
Spark's avatar
Spark committed
34
35
36
    }

    const [formValues, setFormValues] = useState(initValues)
Spark's avatar
Spark committed
37
38
39
40

    const [userExist, setUserExist] = useState(false)
    const [alertShow, setAlertShow] = useState(false)

Spark's avatar
Spark committed
41
42
43
    function handleChange(event) {
        const { name, value } = event.target
        setFormValues({ ...formValues, [name]: value })
Spark's avatar
Spark committed
44
    }
Spark's avatar
Spark committed
45
46
47

    async function handleSubmit(event) {
        event.preventDefault();
48
49
50
        const res = await axios.post("/api/signup", formValues)
        console.log('existing_user : ', res.data.contents.existing_user)
        setUserExist(res.data.contents.existing_user)
51
        setAlertShow(true)
52
    }
53

54
55
56
57
    useEffect(() => {
        async function test() {
            const res = await axios.get('/api/signup')
            console.log(res.contents)
58
        }
59
60
        test()
    }, [])
61
62


Spark's avatar
Spark committed
63
    return (
Spark's avatar
Spark committed
64

Spark's avatar
Spark committed
65
66
        <Row className='text-center w-100 my-2'>
            <Card style={cardstyled}>
Spark's avatar
Spark committed
67
                <Card.Title id='impactTitle'>
Spark's avatar
Spark committed
68
69
70
71
72
73
74
                    Create an Account
                </Card.Title>
                <Card.Subtitle style={{ fontWeight: 'lighter' }}>
                    Sign up with your social media account or email address
                </Card.Subtitle>
                <hr />
                <Card.Text>
Spark's avatar
Spark committed
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
                    <Row className='m-auto d-flex justify-content-center' style={{ width: '80%' }}>
                        {!userExist ?
                            <Alert show={alertShow} variant={'success'}>
                                <Col>
                                    😊 계정 생성이 완료 되었습니다.
                                </Col>
                                <Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
                                    로그인 하러가기 
                                </Alert.Link>
                            </Alert>
                            :
                            <Alert show={alertShow} variant={'danger'}>
                                <Col>
                                    🤔 이미 존재하는 계정입니다.
                                </Col>
                                <Alert.Link href='/login' style={{ fontSize: '0.8em' }}>
                                    로그인 하러가기 
                                </Alert.Link>
                            </Alert>
                        }
                    </Row>
Spark's avatar
Spark committed
96

Spark's avatar
Spark committed
97
98
                    <Form style={inboxstyled} onSubmit={handleSubmit}>
                        <FloatingLabel
Spark's avatar
Spark committed
99
                            label="Nickname"
Spark's avatar
Spark committed
100
101
102
103
                            className='mb-3'
                        >
                            <Form.Control
                                type="text"
Spark's avatar
Spark committed
104
105
                                name="nick_name"
                                placeholder="Nickname"
Spark's avatar
Spark committed
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
                                onChange={handleChange}
                                required
                            />
                        </FloatingLabel>
                        <FloatingLabel
                            label="Email Address"
                        >
                            <Form.Control
                                type="email"
                                name="email"
                                placeholder="Email Address"
                                onChange={handleChange}
                                required
                            />
                        </FloatingLabel>

122
                        <Button variant='light' className='mt-3' id='formbtn' type='submit'>
Spark's avatar
Spark committed
123
124
125
126
                            Sign Up
                        </Button>
                    </Form>

Spark's avatar
Spark committed
127
128
129
130
131
132
133
134
135
                    <Row className='d-flex align-items-center m-2'>
                        <Col>
                            <hr />
                        </Col>
                        OR
                        <Col>
                            <hr />
                        </Col>
                    </Row>
Spark's avatar
Spark committed
136
137

                    <Row style={{ margin: 'auto', marginBottom: '5px', display: 'flex', justifyContent: 'center' }}>
Spark's avatar
Spark committed
138
139
                        <a href="#;" onClick={LoginWithKakao} id='socialLink' >
                            <img src='http://image.kmib.co.kr/online_image/2020/0626/611514110014734788_1.jpg' id='logpng' alt='KAKAO' />
Spark's avatar
Spark committed
140
141
142
143
144
145
146
147
148
                        </a>
                    </Row>
                </Card.Text>
            </Card>
        </Row>
    )
}

export default SignupComp;