diff options
author | 2018-01-29 12:33:52 +0100 | |
---|---|---|
committer | 2018-01-29 12:33:52 +0100 | |
commit | 54f63bb93fe742c1d01c95febee303392c0a290a (patch) | |
tree | da9748af37cfa6f00294592f1a6e6cd770aff3a5 /src/components/auth/Invite.js | |
parent | return to account screen from invite screen (diff) | |
parent | alternative UX implementation of check for email address count > 0 (diff) | |
download | ferdium-app-54f63bb93fe742c1d01c95febee303392c0a290a.tar.gz ferdium-app-54f63bb93fe742c1d01c95febee303392c0a290a.tar.zst ferdium-app-54f63bb93fe742c1d01c95febee303392c0a290a.zip |
Merge branch 'fix-invite-screen' into feature/invite-button
Diffstat (limited to 'src/components/auth/Invite.js')
-rw-r--r-- | src/components/auth/Invite.js | 48 |
1 files changed, 37 insertions, 11 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index d4d789781..1fe594d73 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -30,6 +30,10 @@ const messages = defineMessages({ | |||
30 | id: 'invite.skip.label', | 30 | id: 'invite.skip.label', |
31 | defaultMessage: '!!!I want to do this later', | 31 | defaultMessage: '!!!I want to do this later', |
32 | }, | 32 | }, |
33 | noEmailAddresses: { | ||
34 | id: 'invite.error.noEmails', | ||
35 | defaultMessage: '!!!At least one email address is required', | ||
36 | } | ||
33 | }); | 37 | }); |
34 | 38 | ||
35 | @observer | 39 | @observer |
@@ -45,17 +49,17 @@ export default class Invite extends Component { | |||
45 | form = new Form({ | 49 | form = new Form({ |
46 | fields: { | 50 | fields: { |
47 | invite: [...Array(3).fill({ | 51 | invite: [...Array(3).fill({ |
48 | name: { | 52 | fields: { |
49 | label: this.context.intl.formatMessage(messages.nameLabel), | 53 | name: { |
50 | // value: '', | 54 | label: this.context.intl.formatMessage(messages.nameLabel), |
51 | placeholder: this.context.intl.formatMessage(messages.nameLabel), | 55 | placeholder: this.context.intl.formatMessage(messages.nameLabel), |
52 | }, | 56 | }, |
53 | email: { | 57 | email: { |
54 | label: this.context.intl.formatMessage(messages.emailLabel), | 58 | label: this.context.intl.formatMessage(messages.emailLabel), |
55 | // value: '', | 59 | placeholder: this.context.intl.formatMessage(messages.emailLabel), |
56 | validate: [email], | 60 | validators: [email], |
57 | placeholder: this.context.intl.formatMessage(messages.emailLabel), | 61 | } |
58 | }, | 62 | } |
59 | })], | 63 | })], |
60 | }, | 64 | }, |
61 | }, this.context.intl); | 65 | }, this.context.intl); |
@@ -64,10 +68,22 @@ export default class Invite extends Component { | |||
64 | e.preventDefault(); | 68 | e.preventDefault(); |
65 | this.form.submit({ | 69 | this.form.submit({ |
66 | onSuccess: (form) => { | 70 | onSuccess: (form) => { |
71 | |||
67 | this.props.onSubmit({ | 72 | this.props.onSubmit({ |
68 | invites: form.values().invite, | 73 | invites: form.values().invite, |
69 | from: this.props.from | 74 | from: this.props.from |
70 | }); | 75 | }); |
76 | |||
77 | const atLeastOneEmailAddress = form.$('invite') | ||
78 | .map(invite => {return invite.$('email').value}) | ||
79 | .some(email => email.trim() !== '') | ||
80 | |||
81 | if (!atLeastOneEmailAddress) { | ||
82 | form.invalidate('no-email-addresses') | ||
83 | return | ||
84 | } | ||
85 | |||
86 | this.props.onSubmit({ invites: form.values().invite }); | ||
71 | }, | 87 | }, |
72 | onError: () => {}, | 88 | onError: () => {}, |
73 | }); | 89 | }); |
@@ -78,6 +94,10 @@ export default class Invite extends Component { | |||
78 | const { intl } = this.context; | 94 | const { intl } = this.context; |
79 | const { from } = this.props; | 95 | const { from } = this.props; |
80 | 96 | ||
97 | const atLeastOneEmailAddress = form.$('invite') | ||
98 | .map(invite => {return invite.$('email').value}) | ||
99 | .some(email => email.trim() !== '') | ||
100 | |||
81 | return ( | 101 | return ( |
82 | <div className="auth__container auth__container--signup"> | 102 | <div className="auth__container auth__container--signup"> |
83 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 103 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
@@ -97,9 +117,15 @@ export default class Invite extends Component { | |||
97 | </div> | 117 | </div> |
98 | </div> | 118 | </div> |
99 | ))} | 119 | ))} |
120 | {form.error === 'no-email-addresses' && ( | ||
121 | <p className="franz-form__error invite-form__error"> | ||
122 | {intl.formatMessage(messages.noEmailAddresses)} | ||
123 | </p> | ||
124 | )} | ||
100 | <Button | 125 | <Button |
101 | type="submit" | 126 | type="submit" |
102 | className="auth__button" | 127 | className="auth__button" |
128 | disabled={!atLeastOneEmailAddress} | ||
103 | label={intl.formatMessage(messages.submitButtonLabel)} | 129 | label={intl.formatMessage(messages.submitButtonLabel)} |
104 | /> | 130 | /> |
105 | <Link | 131 | <Link |