diff options
author | 2018-02-02 19:46:20 +0100 | |
---|---|---|
committer | 2018-02-02 19:46:20 +0100 | |
commit | cb45601e87c6af08fc8336da13ac6a0bb38b8484 (patch) | |
tree | 9d0d1b2a148a9b245b2aa2e95bf667e7370b12cf /src/components/auth/Invite.js | |
parent | got server callback and infobox working (diff) | |
download | ferdium-app-cb45601e87c6af08fc8336da13ac6a0bb38b8484.tar.gz ferdium-app-cb45601e87c6af08fc8336da13ac6a0bb38b8484.tar.zst ferdium-app-cb45601e87c6af08fc8336da13ac6a0bb38b8484.zip |
finished embedded invite functionality
ADDED internationalization
ADDED loading indicator in send button
REMOVED query param `from`
Diffstat (limited to 'src/components/auth/Invite.js')
-rw-r--r-- | src/components/auth/Invite.js | 28 |
1 files changed, 14 insertions, 14 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index dbbe58900..9f85c3152 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -33,6 +33,10 @@ const messages = defineMessages({ | |||
33 | id: 'invite.skip.label', | 33 | id: 'invite.skip.label', |
34 | defaultMessage: '!!!I want to do this later', | 34 | defaultMessage: '!!!I want to do this later', |
35 | }, | 35 | }, |
36 | inviteSuccessInfo: { | ||
37 | id: 'invite.successInfo', | ||
38 | defaultMessage: '!!!Invitations sent successfully', | ||
39 | } | ||
36 | }); | 40 | }); |
37 | 41 | ||
38 | @observer | 42 | @observer |
@@ -52,11 +56,11 @@ export default class Invite extends Component { | |||
52 | intl: intlShape, | 56 | intl: intlShape, |
53 | }; | 57 | }; |
54 | 58 | ||
55 | state = { showSuccessMessage: false }; | 59 | state = { showSuccessInfo: false }; |
56 | 60 | ||
57 | handlers = { | 61 | handlers = { |
58 | onChange: (field) => { | 62 | onChange: (field) => { |
59 | this.setState({ showSuccessMessage: false }) | 63 | this.setState({ showSuccessInfo: false }) |
60 | } | 64 | } |
61 | }; | 65 | }; |
62 | 66 | ||
@@ -83,20 +87,15 @@ export default class Invite extends Component { | |||
83 | 87 | ||
84 | submit(e) { | 88 | submit(e) { |
85 | e.preventDefault(); | 89 | e.preventDefault(); |
86 | 90 | ||
87 | const from = this.props.from; | ||
88 | |||
89 | this.form.submit({ | 91 | this.form.submit({ |
90 | onSuccess: (form) => { | 92 | onSuccess: (form) => { |
91 | this.props.onSubmit({ | 93 | this.props.onSubmit({ invites: form.values().invite }); |
92 | invites: form.values().invite, | ||
93 | from | ||
94 | }); | ||
95 | 94 | ||
96 | this.form.clear() | 95 | this.form.clear() |
97 | // this.form.$('invite.0.name').focus() // path accepted but does not focus ;( | 96 | // this.form.$('invite.0.name').focus() // path accepted but does not focus ;( |
98 | document.querySelector('input:first-child').focus() | 97 | document.querySelector('input:first-child').focus() |
99 | this.setState({ showSuccessMessage: true }) | 98 | this.setState({ showSuccessInfo: true }) |
100 | }, | 99 | }, |
101 | onError: () => {}, | 100 | onError: () => {}, |
102 | }); | 101 | }); |
@@ -105,7 +104,7 @@ export default class Invite extends Component { | |||
105 | render() { | 104 | render() { |
106 | const { form } = this; | 105 | const { form } = this; |
107 | const { intl } = this.context; | 106 | const { intl } = this.context; |
108 | const { from, embed, success, isInviteSuccessful } = this.props; | 107 | const { embed, isInviteSuccessful, isLoadingInvite } = this.props; |
109 | 108 | ||
110 | const atLeastOneEmailAddress = form.$('invite') | 109 | const atLeastOneEmailAddress = form.$('invite') |
111 | .map(invite => invite.$('email').value) | 110 | .map(invite => invite.$('email').value) |
@@ -118,13 +117,13 @@ export default class Invite extends Component { | |||
118 | 117 | ||
119 | return ( | 118 | return ( |
120 | <div> | 119 | <div> |
121 | {this.state.showSuccessMessage && isInviteSuccessful && (<Appear> | 120 | {this.state.showSuccessInfo && isInviteSuccessful && (<Appear> |
122 | <Infobox | 121 | <Infobox |
123 | type="success" | 122 | type="success" |
124 | icon="checkbox-marked-circle-outline" | 123 | icon="checkbox-marked-circle-outline" |
125 | dismissable | 124 | dismissable |
126 | > | 125 | > |
127 | Great Success! | 126 | {intl.formatMessage(messages.inviteSuccessInfo)} |
128 | </Infobox> | 127 | </Infobox> |
129 | </Appear>)} | 128 | </Appear>)} |
130 | 129 | ||
@@ -150,9 +149,10 @@ export default class Invite extends Component { | |||
150 | className={sendButtonClassName} | 149 | className={sendButtonClassName} |
151 | disabled={!atLeastOneEmailAddress} | 150 | disabled={!atLeastOneEmailAddress} |
152 | label={intl.formatMessage(messages.submitButtonLabel)} | 151 | label={intl.formatMessage(messages.submitButtonLabel)} |
152 | loaded={!isLoadingInvite} | ||
153 | /> | 153 | /> |
154 | {!embed && (<Link | 154 | {!embed && (<Link |
155 | to={from || '/'} | 155 | to="/" |
156 | className="franz-form__button franz-form__button--secondary auth__button auth__button--skip" | 156 | className="franz-form__button franz-form__button--secondary auth__button auth__button--skip" |
157 | > | 157 | > |
158 | {intl.formatMessage(messages.skipButtonLabel)} | 158 | {intl.formatMessage(messages.skipButtonLabel)} |