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/Invite.js | |
download | ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip |
initial commit
Diffstat (limited to 'src/components/auth/Invite.js')
-rw-r--r-- | src/components/auth/Invite.js | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js new file mode 100644 index 000000000..c1d815dcd --- /dev/null +++ b/src/components/auth/Invite.js | |||
@@ -0,0 +1,111 @@ | |||
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 | import { Link } from 'react-router'; | ||
6 | |||
7 | import Form from '../../lib/Form'; | ||
8 | import { email } from '../../helpers/validation-helpers'; | ||
9 | import Input from '../ui/Input'; | ||
10 | import Button from '../ui/Button'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | headline: { | ||
14 | id: 'invite.headline.friends', | ||
15 | defaultMessage: '!!!Invite 3 of your friends or colleagues', | ||
16 | }, | ||
17 | nameLabel: { | ||
18 | id: 'invite.name.label', | ||
19 | defaultMessage: '!!!Name', | ||
20 | }, | ||
21 | emailLabel: { | ||
22 | id: 'invite.email.label', | ||
23 | defaultMessage: '!!!Email address', | ||
24 | }, | ||
25 | submitButtonLabel: { | ||
26 | id: 'invite.submit.label', | ||
27 | defaultMessage: '!!!Send invites', | ||
28 | }, | ||
29 | skipButtonLabel: { | ||
30 | id: 'invite.skip.label', | ||
31 | defaultMessage: '!!!I want to do this later', | ||
32 | }, | ||
33 | }); | ||
34 | |||
35 | @observer | ||
36 | export default class Invite extends Component { | ||
37 | static propTypes = { | ||
38 | onSubmit: PropTypes.func.isRequired, | ||
39 | }; | ||
40 | |||
41 | static contextTypes = { | ||
42 | intl: intlShape, | ||
43 | }; | ||
44 | |||
45 | form = new Form({ | ||
46 | fields: { | ||
47 | invite: [...Array(3).fill({ | ||
48 | name: { | ||
49 | label: this.context.intl.formatMessage(messages.nameLabel), | ||
50 | // value: '', | ||
51 | placeholder: this.context.intl.formatMessage(messages.nameLabel), | ||
52 | }, | ||
53 | email: { | ||
54 | label: this.context.intl.formatMessage(messages.emailLabel), | ||
55 | // value: '', | ||
56 | validate: [email], | ||
57 | placeholder: this.context.intl.formatMessage(messages.emailLabel), | ||
58 | }, | ||
59 | })], | ||
60 | }, | ||
61 | }, this.context.intl); | ||
62 | |||
63 | submit(e) { | ||
64 | e.preventDefault(); | ||
65 | this.form.submit({ | ||
66 | onSuccess: (form) => { | ||
67 | this.props.onSubmit({ invites: form.values().invite }); | ||
68 | }, | ||
69 | onError: () => {}, | ||
70 | }); | ||
71 | } | ||
72 | |||
73 | render() { | ||
74 | const { form } = this; | ||
75 | const { intl } = this.context; | ||
76 | |||
77 | return ( | ||
78 | <div className="auth__container auth__container--signup"> | ||
79 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | ||
80 | <img | ||
81 | src="./assets/images/logo.svg" | ||
82 | className="auth__logo" | ||
83 | alt="" | ||
84 | /> | ||
85 | <h1> | ||
86 | {intl.formatMessage(messages.headline)} | ||
87 | </h1> | ||
88 | {form.$('invite').map(invite => ( | ||
89 | <div className="grid" key={invite.key}> | ||
90 | <div className="grid__row"> | ||
91 | <Input field={invite.$('name')} showLabel={false} /> | ||
92 | <Input field={invite.$('email')} showLabel={false} /> | ||
93 | </div> | ||
94 | </div> | ||
95 | ))} | ||
96 | <Button | ||
97 | type="submit" | ||
98 | className="auth__button" | ||
99 | label={intl.formatMessage(messages.submitButtonLabel)} | ||
100 | /> | ||
101 | <Link | ||
102 | to="/" | ||
103 | className="franz-form__button franz-form__button--secondary auth__button auth__button--skip" | ||
104 | > | ||
105 | {intl.formatMessage(messages.skipButtonLabel)} | ||
106 | </Link> | ||
107 | </form> | ||
108 | </div> | ||
109 | ); | ||
110 | } | ||
111 | } | ||