diff options
author | 2018-01-30 14:35:30 +0100 | |
---|---|---|
committer | 2018-01-30 14:35:30 +0100 | |
commit | 1d3f61150112af84bde1f5e681e7994a3f9a7e91 (patch) | |
tree | c4b7cfa0d1fe014ea1197d4ab9897535b6b0fbc3 /src/components/auth/Invite.js | |
parent | ADDED invite button on settings navigation (diff) | |
download | ferdium-app-1d3f61150112af84bde1f5e681e7994a3f9a7e91.tar.gz ferdium-app-1d3f61150112af84bde1f5e681e7994a3f9a7e91.tar.zst ferdium-app-1d3f61150112af84bde1f5e681e7994a3f9a7e91.zip |
ADDED embedded invite screen in settings
reuses component `Invite`
Diffstat (limited to 'src/components/auth/Invite.js')
-rw-r--r-- | src/components/auth/Invite.js | 24 |
1 files changed, 15 insertions, 9 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index fa83837ac..14dd6483d 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { Link } from 'react-router'; |
6 | import classnames from 'classnames'; | ||
6 | 7 | ||
7 | import Form from '../../lib/Form'; | 8 | import Form from '../../lib/Form'; |
8 | import { email } from '../../helpers/validation-helpers'; | 9 | import { email } from '../../helpers/validation-helpers'; |
@@ -37,10 +38,12 @@ export default class Invite extends Component { | |||
37 | static propTypes = { | 38 | static propTypes = { |
38 | onSubmit: PropTypes.func.isRequired, | 39 | onSubmit: PropTypes.func.isRequired, |
39 | from: PropTypes.string, | 40 | from: PropTypes.string, |
41 | embed: PropTypes.bool, | ||
40 | }; | 42 | }; |
41 | 43 | ||
42 | static defaultProps = { | 44 | static defaultProps = { |
43 | from: '/', | 45 | from: '/', |
46 | embed: false, | ||
44 | }; | 47 | }; |
45 | 48 | ||
46 | static contextTypes = { | 49 | static contextTypes = { |
@@ -78,21 +81,25 @@ export default class Invite extends Component { | |||
78 | render() { | 81 | render() { |
79 | const { form } = this; | 82 | const { form } = this; |
80 | const { intl } = this.context; | 83 | const { intl } = this.context; |
81 | const { from } = this.props; | 84 | const { from, embed } = this.props; |
82 | 85 | ||
83 | const atLeastOneEmailAddress = form.$('invite') | 86 | const atLeastOneEmailAddress = form.$('invite') |
84 | .map(invite => invite.$('email').value) | 87 | .map(invite => invite.$('email').value) |
85 | .some(emailValue => emailValue.trim() !== ''); | 88 | .some(emailValue => emailValue.trim() !== ''); |
86 | 89 | ||
90 | const sendButtonClassName = classnames({ | ||
91 | auth__button: true, | ||
92 | 'invite__embed--button': embed, | ||
93 | }); | ||
94 | |||
87 | return ( | 95 | return ( |
88 | <div className="auth__container auth__container--signup"> | ||
89 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 96 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
90 | <img | 97 | {!embed && (<img |
91 | src="./assets/images/logo.svg" | 98 | src="./assets/images/logo.svg" |
92 | className="auth__logo" | 99 | className="auth__logo" |
93 | alt="" | 100 | alt="" |
94 | /> | 101 | />)} |
95 | <h1> | 102 | <h1 className={embed && 'invite__embed'}> |
96 | {intl.formatMessage(messages.headline)} | 103 | {intl.formatMessage(messages.headline)} |
97 | </h1> | 104 | </h1> |
98 | {form.$('invite').map(invite => ( | 105 | {form.$('invite').map(invite => ( |
@@ -105,18 +112,17 @@ export default class Invite extends Component { | |||
105 | ))} | 112 | ))} |
106 | <Button | 113 | <Button |
107 | type="submit" | 114 | type="submit" |
108 | className="auth__button" | 115 | className={sendButtonClassName} |
109 | disabled={!atLeastOneEmailAddress} | 116 | disabled={!atLeastOneEmailAddress} |
110 | label={intl.formatMessage(messages.submitButtonLabel)} | 117 | label={intl.formatMessage(messages.submitButtonLabel)} |
111 | /> | 118 | /> |
112 | <Link | 119 | {!embed && (<Link |
113 | to={from || '/'} | 120 | to={from || '/'} |
114 | className="franz-form__button franz-form__button--secondary auth__button auth__button--skip" | 121 | className="franz-form__button franz-form__button--secondary auth__button auth__button--skip" |
115 | > | 122 | > |
116 | {intl.formatMessage(messages.skipButtonLabel)} | 123 | {intl.formatMessage(messages.skipButtonLabel)} |
117 | </Link> | 124 | </Link>)} |
118 | </form> | 125 | </form> |
119 | </div> | ||
120 | ); | 126 | ); |
121 | } | 127 | } |
122 | } | 128 | } |