diff options
Diffstat (limited to 'src/components/auth/Signup.js')
-rw-r--r-- | src/components/auth/Signup.js | 127 |
1 files changed, 68 insertions, 59 deletions
diff --git a/src/components/auth/Signup.js b/src/components/auth/Signup.js index 6fb41a164..4d39835a2 100644 --- a/src/components/auth/Signup.js +++ b/src/components/auth/Signup.js | |||
@@ -2,7 +2,7 @@ | |||
2 | import React, { Component } from 'react'; | 2 | import React, { Component } from 'react'; |
3 | import PropTypes from 'prop-types'; | 3 | import PropTypes from 'prop-types'; |
4 | import { observer, inject } from 'mobx-react'; | 4 | import { observer, inject } from 'mobx-react'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | 6 | ||
7 | import { isDevMode, useLiveAPI } from '../../environment'; | 7 | import { isDevMode, useLiveAPI } from '../../environment'; |
8 | import Form from '../../lib/Form'; | 8 | import Form from '../../lib/Form'; |
@@ -19,63 +19,65 @@ import { termsBase } from '../../api/apiBase'; | |||
19 | const messages = defineMessages({ | 19 | const messages = defineMessages({ |
20 | headline: { | 20 | headline: { |
21 | id: 'signup.headline', | 21 | id: 'signup.headline', |
22 | defaultMessage: '!!!Sign up', | 22 | defaultMessage: 'Sign up', |
23 | }, | 23 | }, |
24 | firstnameLabel: { | 24 | firstnameLabel: { |
25 | id: 'signup.firstname.label', | 25 | id: 'signup.firstname.label', |
26 | defaultMessage: '!!!Firstname', | 26 | defaultMessage: 'Firstname', |
27 | }, | 27 | }, |
28 | lastnameLabel: { | 28 | lastnameLabel: { |
29 | id: 'signup.lastname.label', | 29 | id: 'signup.lastname.label', |
30 | defaultMessage: '!!!Lastname', | 30 | defaultMessage: 'Lastname', |
31 | }, | 31 | }, |
32 | emailLabel: { | 32 | emailLabel: { |
33 | id: 'signup.email.label', | 33 | id: 'signup.email.label', |
34 | defaultMessage: '!!!Email address', | 34 | defaultMessage: 'Email address', |
35 | }, | 35 | }, |
36 | // companyLabel: { | 36 | // companyLabel: { |
37 | // id: 'signup.company.label', | 37 | // id: 'signup.company.label', |
38 | // defaultMessage: '!!!Company', | 38 | // defaultMessage: 'Company', |
39 | // }, | 39 | // }, |
40 | passwordLabel: { | 40 | passwordLabel: { |
41 | id: 'signup.password.label', | 41 | id: 'signup.password.label', |
42 | defaultMessage: '!!!Password', | 42 | defaultMessage: 'Password', |
43 | }, | 43 | }, |
44 | legalInfo: { | 44 | legalInfo: { |
45 | id: 'signup.legal.info', | 45 | id: 'signup.legal.info', |
46 | defaultMessage: '!!!By creating a Ferdi account you accept the', | 46 | defaultMessage: 'By creating a Ferdi account you accept the', |
47 | }, | 47 | }, |
48 | terms: { | 48 | terms: { |
49 | id: 'signup.legal.terms', | 49 | id: 'signup.legal.terms', |
50 | defaultMessage: '!!!Terms of service', | 50 | defaultMessage: 'Terms of service', |
51 | }, | 51 | }, |
52 | privacy: { | 52 | privacy: { |
53 | id: 'signup.legal.privacy', | 53 | id: 'signup.legal.privacy', |
54 | defaultMessage: '!!!Privacy Statement', | 54 | defaultMessage: 'Privacy Statement', |
55 | }, | 55 | }, |
56 | submitButtonLabel: { | 56 | submitButtonLabel: { |
57 | id: 'signup.submit.label', | 57 | id: 'signup.submit.label', |
58 | defaultMessage: '!!!Create account', | 58 | defaultMessage: 'Create account', |
59 | }, | 59 | }, |
60 | loginLink: { | 60 | loginLink: { |
61 | id: 'signup.link.login', | 61 | id: 'signup.link.login', |
62 | defaultMessage: '!!!Already have an account, sign in?', | 62 | defaultMessage: 'Already have an account, sign in?', |
63 | }, | 63 | }, |
64 | changeServer: { | 64 | changeServer: { |
65 | id: 'login.changeServer', | 65 | id: 'login.changeServer', |
66 | defaultMessage: '!!!Change server', | 66 | defaultMessage: 'Change server', |
67 | }, | 67 | }, |
68 | serverless: { | 68 | serverless: { |
69 | id: 'services.serverless', | 69 | id: 'services.serverless', |
70 | defaultMessage: '!!!Use Ferdi without an Account', | 70 | defaultMessage: 'Use Ferdi without an Account', |
71 | }, | 71 | }, |
72 | emailDuplicate: { | 72 | emailDuplicate: { |
73 | id: 'signup.emailDuplicate', | 73 | id: 'signup.emailDuplicate', |
74 | defaultMessage: '!!!A user with that email address already exists', | 74 | defaultMessage: 'A user with that email address already exists', |
75 | }, | 75 | }, |
76 | }); | 76 | }); |
77 | 77 | ||
78 | export default @inject('actions') @observer class Signup extends Component { | 78 | @inject('actions') |
79 | @observer | ||
80 | class Signup extends Component { | ||
79 | static propTypes = { | 81 | static propTypes = { |
80 | onSubmit: PropTypes.func.isRequired, | 82 | onSubmit: PropTypes.func.isRequired, |
81 | isSubmitting: PropTypes.bool.isRequired, | 83 | isSubmitting: PropTypes.bool.isRequired, |
@@ -85,40 +87,39 @@ export default @inject('actions') @observer class Signup extends Component { | |||
85 | actions: PropTypes.object.isRequired, | 87 | actions: PropTypes.object.isRequired, |
86 | }; | 88 | }; |
87 | 89 | ||
88 | static contextTypes = { | 90 | form = new Form( |
89 | intl: intlShape, | 91 | { |
90 | }; | 92 | fields: { |
91 | 93 | firstname: { | |
92 | form = new Form({ | 94 | label: this.props.intl.formatMessage(messages.firstnameLabel), |
93 | fields: { | 95 | value: '', |
94 | firstname: { | 96 | validators: [required], |
95 | label: this.context.intl.formatMessage(messages.firstnameLabel), | 97 | }, |
96 | value: '', | 98 | lastname: { |
97 | validators: [required], | 99 | label: this.props.intl.formatMessage(messages.lastnameLabel), |
98 | }, | 100 | value: '', |
99 | lastname: { | 101 | validators: [required], |
100 | label: this.context.intl.formatMessage(messages.lastnameLabel), | 102 | }, |
101 | value: '', | 103 | email: { |
102 | validators: [required], | 104 | label: this.props.intl.formatMessage(messages.emailLabel), |
103 | }, | 105 | value: '', |
104 | email: { | 106 | validators: [required, email], |
105 | label: this.context.intl.formatMessage(messages.emailLabel), | 107 | }, |
106 | value: '', | 108 | password: { |
107 | validators: [required, email], | 109 | label: this.props.intl.formatMessage(messages.passwordLabel), |
108 | }, | 110 | value: '', |
109 | password: { | 111 | validators: [required, minLength(6)], |
110 | label: this.context.intl.formatMessage(messages.passwordLabel), | 112 | type: 'password', |
111 | value: '', | 113 | }, |
112 | validators: [required, minLength(6)], | ||
113 | type: 'password', | ||
114 | }, | 114 | }, |
115 | }, | 115 | }, |
116 | }, this.context.intl); | 116 | this.props.intl, |
117 | ); | ||
117 | 118 | ||
118 | submit(e) { | 119 | submit(e) { |
119 | e.preventDefault(); | 120 | e.preventDefault(); |
120 | this.form.submit({ | 121 | this.form.submit({ |
121 | onSuccess: (form) => { | 122 | onSuccess: form => { |
122 | this.props.onSubmit(form.values()); | 123 | this.props.onSubmit(form.values()); |
123 | }, | 124 | }, |
124 | onError: () => {}, | 125 | onError: () => {}, |
@@ -131,24 +132,22 @@ export default @inject('actions') @observer class Signup extends Component { | |||
131 | 132 | ||
132 | render() { | 133 | render() { |
133 | const { form } = this; | 134 | const { form } = this; |
134 | const { intl } = this.context; | 135 | const { intl } = this.props; |
135 | const { | 136 | const { isSubmitting, loginRoute, error, changeServerRoute } = this.props; |
136 | isSubmitting, loginRoute, error, changeServerRoute, | ||
137 | } = this.props; | ||
138 | 137 | ||
139 | return ( | 138 | return ( |
140 | <div className="auth__scroll-container"> | 139 | <div className="auth__scroll-container"> |
141 | <div className="auth__container auth__container--signup"> | 140 | <div className="auth__container auth__container--signup"> |
142 | <form className="franz-form auth__form" onSubmit={(e) => this.submit(e)}> | 141 | <form |
143 | <img | 142 | className="franz-form auth__form" |
144 | src="./assets/images/logo.svg" | 143 | onSubmit={e => this.submit(e)} |
145 | className="auth__logo" | 144 | > |
146 | alt="" | 145 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
147 | /> | ||
148 | <h1>{intl.formatMessage(messages.headline)}</h1> | 146 | <h1>{intl.formatMessage(messages.headline)}</h1> |
149 | {isDevMode && !useLiveAPI && ( | 147 | {isDevMode && !useLiveAPI && ( |
150 | <Infobox type="warning"> | 148 | <Infobox type="warning"> |
151 | In Dev Mode your data is not persistent. Please use the live app for accesing the production API. | 149 | In Dev Mode your data is not persistent. Please use the live app |
150 | for accesing the production API. | ||
152 | </Infobox> | 151 | </Infobox> |
153 | )} | 152 | )} |
154 | <div className="grid__row"> | 153 | <div className="grid__row"> |
@@ -162,7 +161,9 @@ export default @inject('actions') @observer class Signup extends Component { | |||
162 | scorePassword | 161 | scorePassword |
163 | /> | 162 | /> |
164 | {error.code === 'email-duplicate' && ( | 163 | {error.code === 'email-duplicate' && ( |
165 | <p className="error-message center">{intl.formatMessage(messages.emailDuplicate)}</p> | 164 | <p className="error-message center"> |
165 | {intl.formatMessage(messages.emailDuplicate)} | ||
166 | </p> | ||
166 | )} | 167 | )} |
167 | {isSubmitting ? ( | 168 | {isSubmitting ? ( |
168 | <Button | 169 | <Button |
@@ -200,12 +201,20 @@ export default @inject('actions') @observer class Signup extends Component { | |||
200 | </p> | 201 | </p> |
201 | </form> | 202 | </form> |
202 | <div className="auth__links"> | 203 | <div className="auth__links"> |
203 | <Link to={changeServerRoute}>{intl.formatMessage(messages.changeServer)}</Link> | 204 | <Link to={changeServerRoute}> |
204 | <a onClick={this.useLocalServer.bind(this)}>{intl.formatMessage(messages.serverless)}</a> | 205 | {intl.formatMessage(messages.changeServer)} |
205 | <Link to={loginRoute}>{intl.formatMessage(messages.loginLink)}</Link> | 206 | </Link> |
207 | <a onClick={this.useLocalServer.bind(this)}> | ||
208 | {intl.formatMessage(messages.serverless)} | ||
209 | </a> | ||
210 | <Link to={loginRoute}> | ||
211 | {intl.formatMessage(messages.loginLink)} | ||
212 | </Link> | ||
206 | </div> | 213 | </div> |
207 | </div> | 214 | </div> |
208 | </div> | 215 | </div> |
209 | ); | 216 | ); |
210 | } | 217 | } |
211 | } | 218 | } |
219 | |||
220 | export default injectIntl(Signup); | ||