diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-10-13 12:29:40 +0200 |
commit | 58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch) | |
tree | 1211600c2a5d3b5f81c435c6896618111a611720 /src/components/auth/Signup.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/auth/Signup.js')
-rw-r--r-- | src/components/auth/Signup.js | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js new file mode 100644 index 000000000..71ca16111 --- /dev/null +++ b/src/components/auth/Signup.js | |||
@@ -0,0 +1,206 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | |||
6 | import Form from '../../lib/Form'; | ||
7 | import { required, email, minLength } from '../../helpers/validation-helpers'; | ||
8 | import Input from '../ui/Input'; | ||
9 | import Radio from '../ui/Radio'; | ||
10 | import Button from '../ui/Button'; | ||
11 | import Link from '../ui/Link'; | ||
12 | |||
13 | import { globalError as globalErrorPropType } from '../../prop-types'; | ||
14 | |||
15 | const messages = defineMessages({ | ||
16 | headline: { | ||
17 | id: 'signup.headline', | ||
18 | defaultMessage: '!!!Sign up', | ||
19 | }, | ||
20 | firstnameLabel: { | ||
21 | id: 'signup.firstname.label', | ||
22 | defaultMessage: '!!!Firstname', | ||
23 | }, | ||
24 | lastnameLabel: { | ||
25 | id: 'signup.lastname.label', | ||
26 | defaultMessage: '!!!Lastname', | ||
27 | }, | ||
28 | emailLabel: { | ||
29 | id: 'signup.email.label', | ||
30 | defaultMessage: '!!!Email address', | ||
31 | }, | ||
32 | companyLabel: { | ||
33 | id: 'signup.company.label', | ||
34 | defaultMessage: '!!!Company', | ||
35 | }, | ||
36 | passwordLabel: { | ||
37 | id: 'signup.password.label', | ||
38 | defaultMessage: '!!!Password', | ||
39 | }, | ||
40 | legalInfo: { | ||
41 | id: 'signup.legal.info', | ||
42 | defaultMessage: '!!!By creating a Franz account you accept the', | ||
43 | }, | ||
44 | terms: { | ||
45 | id: 'signup.legal.terms', | ||
46 | defaultMessage: '!!!Terms of service', | ||
47 | }, | ||
48 | privacy: { | ||
49 | id: 'signup.legal.privacy', | ||
50 | defaultMessage: '!!!Privacy Statement', | ||
51 | }, | ||
52 | submitButtonLabel: { | ||
53 | id: 'signup.submit.label', | ||
54 | defaultMessage: '!!!Create account', | ||
55 | }, | ||
56 | loginLink: { | ||
57 | id: 'signup.link.login', | ||
58 | defaultMessage: '!!!Already have an account, sign in?', | ||
59 | }, | ||
60 | emailDuplicate: { | ||
61 | id: 'signup.emailDuplicate', | ||
62 | defaultMessage: '!!!A user with that email address already exists', | ||
63 | }, | ||
64 | }); | ||
65 | |||
66 | @observer | ||
67 | export default class Signup extends Component { | ||
68 | static propTypes = { | ||
69 | onSubmit: PropTypes.func.isRequired, | ||
70 | isSubmitting: PropTypes.bool.isRequired, | ||
71 | loginRoute: PropTypes.string.isRequired, | ||
72 | error: globalErrorPropType.isRequired, | ||
73 | }; | ||
74 | |||
75 | static contextTypes = { | ||
76 | intl: intlShape, | ||
77 | }; | ||
78 | |||
79 | form = new Form({ | ||
80 | fields: { | ||
81 | accountType: { | ||
82 | value: 'individual', | ||
83 | validate: [required], | ||
84 | options: [{ | ||
85 | value: 'individual', | ||
86 | label: 'Individual', | ||
87 | }, { | ||
88 | value: 'non-profit', | ||
89 | label: 'Non-Profit', | ||
90 | }, { | ||
91 | value: 'company', | ||
92 | label: 'Company', | ||
93 | }], | ||
94 | }, | ||
95 | firstname: { | ||
96 | label: this.context.intl.formatMessage(messages.firstnameLabel), | ||
97 | value: '', | ||
98 | validate: [required], | ||
99 | }, | ||
100 | lastname: { | ||
101 | label: this.context.intl.formatMessage(messages.lastnameLabel), | ||
102 | value: '', | ||
103 | validate: [required], | ||
104 | }, | ||
105 | email: { | ||
106 | label: this.context.intl.formatMessage(messages.emailLabel), | ||
107 | value: '', | ||
108 | validate: [required, email], | ||
109 | }, | ||
110 | organization: { | ||
111 | label: this.context.intl.formatMessage(messages.companyLabel), | ||
112 | value: '', // TODO: make required when accountType: company | ||
113 | }, | ||
114 | password: { | ||
115 | label: this.context.intl.formatMessage(messages.passwordLabel), | ||
116 | value: '', | ||
117 | validate: [required, minLength(6)], | ||
118 | type: 'password', | ||
119 | }, | ||
120 | }, | ||
121 | }, this.context.intl); | ||
122 | |||
123 | submit(e) { | ||
124 | e.preventDefault(); | ||
125 | this.form.submit({ | ||
126 | onSuccess: (form) => { | ||
127 | this.props.onSubmit(form.values()); | ||
128 | }, | ||
129 | onError: () => {}, | ||
130 | }); | ||
131 | } | ||
132 | |||
133 | render() { | ||
134 | const { form } = this; | ||
135 | const { intl } = this.context; | ||
136 | const { isSubmitting, loginRoute, error } = this.props; | ||
137 | |||
138 | return ( | ||
139 | <div className="auth__scroll-container"> | ||
140 | <div className="auth__container auth__container--signup"> | ||
141 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
142 | <img | ||
143 | src="./assets/images/logo.svg" | ||
144 | className="auth__logo" | ||
145 | alt="" | ||
146 | /> | ||
147 | <h1>{intl.formatMessage(messages.headline)}</h1> | ||
148 | <Radio field={form.$('accountType')} showLabel={false} /> | ||
149 | <div className="grid__row"> | ||
150 | <Input field={form.$('firstname')} focus /> | ||
151 | <Input field={form.$('lastname')} /> | ||
152 | </div> | ||
153 | <Input field={form.$('email')} /> | ||
154 | <Input | ||
155 | field={form.$('password')} | ||
156 | showPasswordToggle | ||
157 | scorePassword | ||
158 | /> | ||
159 | {form.$('accountType').value === 'company' && ( | ||
160 | <Input field={form.$('organization')} /> | ||
161 | )} | ||
162 | {error.code === 'email-duplicate' && ( | ||
163 | <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p> | ||
164 | )} | ||
165 | {isSubmitting ? ( | ||
166 | <Button | ||
167 | className="auth__button is-loading" | ||
168 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | ||
169 | loaded={false} | ||
170 | disabled | ||
171 | /> | ||
172 | ) : ( | ||
173 | <Button | ||
174 | type="submit" | ||
175 | className="auth__button" | ||
176 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
177 | /> | ||
178 | )} | ||
179 | <p className="legal"> | ||
180 | {intl.formatMessage(messages.legalInfo)} | ||
181 | <br /> | ||
182 | <Link | ||
183 | to="http://meetfranz.com/terms" | ||
184 | target="_blank" | ||
185 | className="link" | ||
186 | > | ||
187 | {intl.formatMessage(messages.terms)} | ||
188 | </Link> | ||
189 | & | ||
190 | <Link | ||
191 | to="http://meetfranz.com/privacy" | ||
192 | target="_blank" | ||
193 | className="link" | ||
194 | > | ||
195 | {intl.formatMessage(messages.privacy)} | ||
196 | </Link>. | ||
197 | </p> | ||
198 | </form> | ||
199 | <div className="auth__links"> | ||
200 | <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link> | ||
201 | </div> | ||
202 | </div> | ||
203 | </div> | ||
204 | ); | ||
205 | } | ||
206 | } | ||