diff options
Diffstat (limited to 'src/components/auth/Signup.tsx')
-rw-r--r-- | src/components/auth/Signup.tsx | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/src/components/auth/Signup.tsx b/src/components/auth/Signup.tsx new file mode 100644 index 000000000..af14430aa --- /dev/null +++ b/src/components/auth/Signup.tsx | |||
@@ -0,0 +1,209 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { observer, inject } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
4 | import { mdiArrowLeftCircle } from '@mdi/js'; | ||
5 | import { noop } from 'lodash'; | ||
6 | import Form from '../../lib/Form'; | ||
7 | import { required, email, minLength } from '../../helpers/validation-helpers'; | ||
8 | import Input from '../ui/input/index'; | ||
9 | import Button from '../ui/button'; | ||
10 | import Link from '../ui/Link'; | ||
11 | import Icon from '../ui/icon'; | ||
12 | import { serverBase } from '../../api/apiBase'; | ||
13 | import { H1 } from '../ui/headline'; | ||
14 | import { GlobalError } from '../../@types/ferdium-components.types'; | ||
15 | import { Actions } from '../../actions/lib/actions'; | ||
16 | |||
17 | const messages = defineMessages({ | ||
18 | headline: { | ||
19 | id: 'signup.headline', | ||
20 | defaultMessage: 'Sign up', | ||
21 | }, | ||
22 | firstnameLabel: { | ||
23 | id: 'signup.firstname.label', | ||
24 | defaultMessage: 'First Name', | ||
25 | }, | ||
26 | lastnameLabel: { | ||
27 | id: 'signup.lastname.label', | ||
28 | defaultMessage: 'Last Name', | ||
29 | }, | ||
30 | emailLabel: { | ||
31 | id: 'signup.email.label', | ||
32 | defaultMessage: 'Email address', | ||
33 | }, | ||
34 | companyLabel: { | ||
35 | id: 'signup.company.label', | ||
36 | defaultMessage: 'Company', | ||
37 | }, | ||
38 | passwordLabel: { | ||
39 | id: 'signup.password.label', | ||
40 | defaultMessage: 'Password', | ||
41 | }, | ||
42 | legalInfo: { | ||
43 | id: 'signup.legal.info', | ||
44 | defaultMessage: 'By creating a Ferdium account you accept the', | ||
45 | }, | ||
46 | terms: { | ||
47 | id: 'signup.legal.terms', | ||
48 | defaultMessage: 'Terms of service', | ||
49 | }, | ||
50 | privacy: { | ||
51 | id: 'signup.legal.privacy', | ||
52 | defaultMessage: 'Privacy Statement', | ||
53 | }, | ||
54 | submitButtonLabel: { | ||
55 | id: 'signup.submit.label', | ||
56 | defaultMessage: 'Create account', | ||
57 | }, | ||
58 | loginLink: { | ||
59 | id: 'signup.link.login', | ||
60 | defaultMessage: 'Already have an account, sign in?', | ||
61 | }, | ||
62 | emailDuplicate: { | ||
63 | id: 'signup.emailDuplicate', | ||
64 | defaultMessage: 'A user with that email address already exists', | ||
65 | }, | ||
66 | }); | ||
67 | |||
68 | interface IProps extends WrappedComponentProps { | ||
69 | onSubmit: (...args: any[]) => void; | ||
70 | isSubmitting: boolean; | ||
71 | loginRoute: string; | ||
72 | error: GlobalError; | ||
73 | actions?: Actions; | ||
74 | } | ||
75 | |||
76 | @inject('actions') | ||
77 | @observer | ||
78 | class Signup extends Component<IProps> { | ||
79 | form: Form; | ||
80 | |||
81 | constructor(props: IProps) { | ||
82 | super(props); | ||
83 | |||
84 | this.form = new Form({ | ||
85 | fields: { | ||
86 | firstname: { | ||
87 | label: this.props.intl.formatMessage(messages.firstnameLabel), | ||
88 | value: '', | ||
89 | validators: [required], | ||
90 | }, | ||
91 | lastname: { | ||
92 | label: this.props.intl.formatMessage(messages.lastnameLabel), | ||
93 | value: '', | ||
94 | validators: [required], | ||
95 | }, | ||
96 | email: { | ||
97 | label: this.props.intl.formatMessage(messages.emailLabel), | ||
98 | value: '', | ||
99 | validators: [required, email], | ||
100 | }, | ||
101 | password: { | ||
102 | label: this.props.intl.formatMessage(messages.passwordLabel), | ||
103 | value: '', | ||
104 | validators: [required, minLength(6)], | ||
105 | type: 'password', | ||
106 | }, | ||
107 | }, | ||
108 | }); | ||
109 | } | ||
110 | |||
111 | submit(e) { | ||
112 | e.preventDefault(); | ||
113 | this.form.submit({ | ||
114 | onSuccess: form => { | ||
115 | this.props.onSubmit(form.values()); | ||
116 | }, | ||
117 | onError: () => {}, | ||
118 | }); | ||
119 | } | ||
120 | |||
121 | render() { | ||
122 | const { form } = this; | ||
123 | const { intl } = this.props; | ||
124 | const { isSubmitting, loginRoute, error } = this.props; | ||
125 | |||
126 | return ( | ||
127 | <div className="auth__scroll-container"> | ||
128 | <div className="auth__container auth__container--signup"> | ||
129 | <form | ||
130 | className="franz-form auth__form" | ||
131 | onSubmit={e => this.submit(e)} | ||
132 | > | ||
133 | <Link to="/auth/welcome"> | ||
134 | <img | ||
135 | src="./assets/images/logo.svg" | ||
136 | className="auth__logo" | ||
137 | alt="" | ||
138 | /> | ||
139 | </Link> | ||
140 | <H1>{intl.formatMessage(messages.headline)}</H1> | ||
141 | <div className="grid__row"> | ||
142 | <Input {...form.$('firstname').bind()} focus /> | ||
143 | <Input {...form.$('lastname').bind()} /> | ||
144 | </div> | ||
145 | <Input {...form.$('email').bind()} /> | ||
146 | <Input | ||
147 | {...form.$('password').bind()} | ||
148 | showPasswordToggle | ||
149 | scorePassword | ||
150 | /> | ||
151 | {error.code === 'email-duplicate' && ( | ||
152 | <p className="error-message center"> | ||
153 | {intl.formatMessage(messages.emailDuplicate)} | ||
154 | </p> | ||
155 | )} | ||
156 | {isSubmitting ? ( | ||
157 | <Button | ||
158 | className="auth__button is-loading" | ||
159 | label={`${intl.formatMessage(messages.submitButtonLabel)} ...`} | ||
160 | loaded={false} | ||
161 | disabled | ||
162 | onClick={noop} | ||
163 | /> | ||
164 | ) : ( | ||
165 | <Button | ||
166 | type="submit" | ||
167 | className="auth__button" | ||
168 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
169 | onClick={noop} | ||
170 | /> | ||
171 | )} | ||
172 | <p className="legal"> | ||
173 | {intl.formatMessage(messages.legalInfo)} | ||
174 | <br /> | ||
175 | <Link | ||
176 | to={`${serverBase()}/terms`} | ||
177 | target="_blank" | ||
178 | className="link" | ||
179 | > | ||
180 | {intl.formatMessage(messages.terms)} | ||
181 | </Link> | ||
182 | & | ||
183 | <Link | ||
184 | to={`${serverBase()}/privacy`} | ||
185 | target="_blank" | ||
186 | className="link" | ||
187 | > | ||
188 | {intl.formatMessage(messages.privacy)} | ||
189 | </Link> | ||
190 | . | ||
191 | </p> | ||
192 | </form> | ||
193 | <div className="auth__links"> | ||
194 | <Link to={loginRoute}> | ||
195 | {intl.formatMessage(messages.loginLink)} | ||
196 | </Link> | ||
197 | </div> | ||
198 | <div className="auth__help"> | ||
199 | <Link to="/auth/welcome"> | ||
200 | <Icon icon={mdiArrowLeftCircle} size={1.5} /> | ||
201 | </Link> | ||
202 | </div> | ||
203 | </div> | ||
204 | </div> | ||
205 | ); | ||
206 | } | ||
207 | } | ||
208 | |||
209 | export default injectIntl(Signup); | ||