-
Notifications
You must be signed in to change notification settings - Fork 2
/
UserRegister.js
155 lines (137 loc) · 3.51 KB
/
UserRegister.js
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import React from 'react'
import PropTypes from 'prop-types'
import { routerShape } from 'found/lib/PropTypes'
import { createFragmentContainer, graphql } from 'react-relay'
import Formsy from 'formsy-react'
import Wrapper from './Wrapper'
import FormWrapper from './FormWrapper'
import TextInput from '../../components/Input/FormsyText'
import Button from '../../components/Button'
import {
register as registerUser,
loginWithFacebookRoute,
} from '../../auth'
import { ERRORS } from '../../../config'
class RegisterPage extends React.Component {
static propTypes = {
router: routerShape.isRequired,
viewer: PropTypes.shape({
isLoggedIn: PropTypes.bool,
}).isRequired,
}
constructor() {
super()
this.state = {
canSubmit: false,
}
}
setFormElement = (element) => {
this.formElement = element
}
enableButton = () => {
this.setState({
canSubmit: true,
})
}
disableButton = () => {
this.setState({
canSubmit: false,
})
}
register = ({ email, password, firstName, lastName }) => {
registerUser({ email, password, firstName, lastName })
.then((error) => {
if (error) {
console.error(ERRORS[error.name])
} else {
this.props.router.replace('/')
}
})
}
render() {
const { viewer, router } = this.props
if (viewer.isLoggedIn) {
router.push('/')
return <div />
}
return (
<Wrapper>
<h2>Register</h2>
<FormWrapper>
<Button
label="Register with facebook"
href={loginWithFacebookRoute}
style={{ marginTop: 20 }}
external
fullWidth
secondary
/>
<Formsy.Form
ref={this.setFormElement}
onValid={this.enableButton}
onInvalid={this.disableButton}
onSubmit={this.register}
>
<TextInput
name="email"
label="E-Mail"
validations="isEmail"
validationError="Please enter a valid email address"
fullWidth
required
/>
<TextInput
name="password"
type="password"
label="Passwort"
validations="minLength:5"
validationError="Please enter at least 5 characters"
fullWidth
required
/>
<TextInput
name="firstName"
label="First Name"
validations="isWords"
validationError="Please enter your first name"
fullWidth
required
/>
<TextInput
name="lastName"
label="Last Name"
validations="isWords"
validationError="Please enter your last name"
fullWidth
required
/>
<Button
type="submit"
label="Register"
style={{ marginTop: 20 }}
disabled={!this.state.canSubmit}
fullWidth
secondary
/>
</Formsy.Form>
<Button
label="Login"
style={{ marginTop: 20 }}
to="/login"
fullWidth
primary
/>
</FormWrapper>
</Wrapper>
)
}
}
const container = createFragmentContainer(
RegisterPage,
graphql`
fragment UserRegister_viewer on Viewer {
isLoggedIn
}
`,
)
export default container