SignupPage.js 6.89 KB
Newer Older
Ha YeaJin's avatar
pages    
Ha YeaJin committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import React, { useState } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css';
import { Link, Redirect } from 'react-router-dom';

function Signup() {
    //   const [state, setState] = useState(false);

    //   if (state) {
    //     return <Redirect to="/login" />;
    //   }

    return (
        <div className="d-flex flex-column justify-content-between vh-100">
            <Formik
                initialValues={{ name: '', email: '', password: '', password2: '', address: '', }}
                validationSchema={Yup.object({
                    name: Yup.string()
                        .required('이름을 입력해주세요.'),
                    email: Yup.string()
                        .email('이메일형식이 유효하지 않습니다.')
                        .required('이메일을 입력해주세요.'),
                    password: Yup.string()
                        .required('비밀번호를 입력해주세요.')
                        .min(8, '8자 이상 입력해주세요.'),
                    password2: Yup.string()
                        .required('비밀번호를 다시 입력해주세요.')
                        .min(8, '8자 이상 입력해주세요.')
                        .oneOf([Yup.ref("password"), null], '비밀번호가 일치하지 않습니다.'),
                    address: Yup.string()
                        .required('주소를 입력해주세요.')
                })}
                onSubmit={(values, { setSubmitting }) => {
                    // axios({
                    //   method: 'post',
                    //   url: '/users',
                    //   data: values,
                    // }).then(res => {
                    //   if (res.status === 404) return alert(res.data.error)
                    alert("회원가입이 완료되었습니다!")

                    //   setState(true);
                    // })
                    //   .catch(err => {
                    //     alert(err.error)
                    //   });

                    setTimeout(() => {
                        setSubmitting(false);
                    }, 400);  // finish the cycle in handler
                }}
            >
                {({
                    errors,
                    touched,
                    handleSubmit,
                    getFieldProps,  // contain values, handleChange, handleBlur
                    isSubmitting,
                }) => (
                        <div className="row justify-content-center align-items-center">
                            <form onSubmit={handleSubmit} className="col-sm-3">
                                <div className="form-group mb-4">
                                    <input
                                        className={(touched.name && errors.name ? 'form-control is-invalid' : "form-control")}
                                        type="text"
                                        name="name"
                                        {...getFieldProps('name')}
                                        placeholder="Input Name" />
                                    {touched.name && errors.name ? (
                                        <div className="invalid-feedback text-left">{errors.name}</div>
                                    ) : null}
                                </div>
                                <div className="form-group mb-4">
                                    <input
                                        className={(touched.email && errors.email ? 'form-control is-invalid' : "form-control")}
                                        type="email"
                                        name="email"
                                        {...getFieldProps('email')}
                                        placeholder="Input Email"
                                    />
                                    {touched.email && errors.email ? (
                                        <div className="invalid-feedback text-left">{errors.email}</div>
                                    ) : null}
                                </div>
                                <div className="form-group mb-4">
                                    <input
                                        className={(touched.address && errors.address ? 'form-control is-invalid' : "form-control")}
                                        type="text"
                                        name="address"
                                        {...getFieldProps('address')}
                                        placeholder="Input Address" />
                                    {touched.address && errors.address ? (
                                        <div className="invalid-feedback text-left">{errors.address}</div>
                                    ) : null}
                                </div>
                                <div className="form-group mb-4">
                                    <input
                                        className={(touched.password && errors.password ? 'form-control is-invalid' : "form-control")}
                                        type="password"
                                        name="password"
                                        {...getFieldProps('password')}
                                        placeholder="Input Password"
                                    />
                                    {touched.password && errors.password ? (
                                        <div className="invalid-feedback text-left">{errors.password}</div>
                                    ) : null}
                                </div>
                                <div className="form-group mb-4">
                                    <input
                                        className={(touched.password2 && errors.password2 ? 'form-control is-invalid' : "form-control")}
                                        type="password"
                                        name="password2"
                                        {...getFieldProps('password2')}
                                        placeholder="Input Confirm Password"
                                    />
                                    {touched.password2 && errors.password2 ? (
                                        <div className="invalid-feedback text-left">{errors.password2}</div>
                                    ) : null}
                                </div>
                                <button type="submit" className="btn btn-dark" disabled={isSubmitting}>
                                    Sign Up
                  </button>
                                <button>
                                    <Link to="/">gha</Link></button>
                            </form>
                        </div>
                    )}
            </Formik>
        </div>
    );
}


export default Signup;