diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-07-02 19:49:55 -0600 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-07-03 07:19:55 +0530 |
commit | 33123c354b79f7951423dd75097b11e7eb075f99 (patch) | |
tree | 29f6e857f02d0e0fc67d89a657a54a865ed5538a /src/components/auth/Invite.js | |
parent | Minor refactoring to move all runtime configs from 'config.js' into 'environm... (diff) | |
download | ferdium-app-33123c354b79f7951423dd75097b11e7eb075f99.tar.gz ferdium-app-33123c354b79f7951423dd75097b11e7eb075f99.tar.zst ferdium-app-33123c354b79f7951423dd75097b11e7eb075f99.zip |
Upgrade various dependencies to latest part 2 (#1557)
* Upgrade various dependencies to latest, remove unnecessary electron-hunspell
- upgrade eslint and friends to latest
- remove deprecated 'node-sass' in favor of 'sass'
- disable new rules from 'eslint-config-airbnb' that are conflicting with current code style
- add workspace config for 'vscode' that silences 'experimentalDecorator' warning and forces 'prettier' to single quote
* Run yarn lint to autofix with new ruleset and worked down lint issues to zero
Diffstat (limited to 'src/components/auth/Invite.js')
-rw-r--r-- | src/components/auth/Invite.js | 105 |
1 files changed, 61 insertions, 44 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index fd957ee73..4b4d63a6b 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -43,7 +43,9 @@ const messages = defineMessages({ | |||
43 | }, | 43 | }, |
44 | }); | 44 | }); |
45 | 45 | ||
46 | export default @observer class Invite extends Component { | 46 | export default |
47 | @observer | ||
48 | class Invite extends Component { | ||
47 | static propTypes = { | 49 | static propTypes = { |
48 | onSubmit: PropTypes.func.isRequired, | 50 | onSubmit: PropTypes.func.isRequired, |
49 | embed: PropTypes.bool, | 51 | embed: PropTypes.bool, |
@@ -63,36 +65,41 @@ export default @observer class Invite extends Component { | |||
63 | 65 | ||
64 | state = { showSuccessInfo: false }; | 66 | state = { showSuccessInfo: false }; |
65 | 67 | ||
66 | componentWillMount() { | 68 | componentDidMount() { |
67 | const handlers = { | 69 | this.form = new Form( |
68 | onChange: () => { | 70 | { |
69 | this.setState({ showSuccessInfo: false }); | 71 | fields: { |
70 | }, | 72 | invite: [ |
71 | }; | 73 | ...Array(3).fill({ |
72 | 74 | fields: { | |
73 | this.form = new Form({ | 75 | name: { |
74 | fields: { | 76 | label: this.context.intl.formatMessage(messages.nameLabel), |
75 | invite: [...Array(3).fill({ | 77 | placeholder: this.context.intl.formatMessage( |
76 | fields: { | 78 | messages.nameLabel, |
77 | name: { | 79 | ), |
78 | label: this.context.intl.formatMessage(messages.nameLabel), | 80 | onChange: () => { |
79 | placeholder: this.context.intl.formatMessage(messages.nameLabel), | 81 | this.setState({ showSuccessInfo: false }); |
80 | handlers, | 82 | }, |
81 | // related: ['invite.0.email'], // path accepted but does not work | 83 | // related: ['invite.0.email'], // path accepted but does not work |
82 | }, | 84 | }, |
83 | email: { | 85 | email: { |
84 | label: this.context.intl.formatMessage(messages.emailLabel), | 86 | label: this.context.intl.formatMessage(messages.emailLabel), |
85 | placeholder: this.context.intl.formatMessage(messages.emailLabel), | 87 | placeholder: this.context.intl.formatMessage( |
86 | handlers, | 88 | messages.emailLabel, |
87 | validators: [email], | 89 | ), |
88 | }, | 90 | onChange: () => { |
89 | }, | 91 | this.setState({ showSuccessInfo: false }); |
90 | })], | 92 | }, |
93 | validators: [email], | ||
94 | }, | ||
95 | }, | ||
96 | }), | ||
97 | ], | ||
98 | }, | ||
91 | }, | 99 | }, |
92 | }, this.context.intl); | 100 | this.context.intl, |
93 | } | 101 | ); |
94 | 102 | ||
95 | componentDidMount() { | ||
96 | document.querySelector('input:first-child').focus(); | 103 | document.querySelector('input:first-child').focus(); |
97 | } | 104 | } |
98 | 105 | ||
@@ -117,9 +124,10 @@ export default @observer class Invite extends Component { | |||
117 | const { intl } = this.context; | 124 | const { intl } = this.context; |
118 | const { embed, isInviteSuccessful, isLoadingInvite } = this.props; | 125 | const { embed, isInviteSuccessful, isLoadingInvite } = this.props; |
119 | 126 | ||
120 | const atLeastOneEmailAddress = form.$('invite') | 127 | const atLeastOneEmailAddress = form |
121 | .map(invite => invite.$('email').value) | 128 | .$('invite') |
122 | .some(emailValue => emailValue.trim() !== ''); | 129 | .map((invite) => invite.$('email').value) |
130 | .some((emailValue) => emailValue.trim() !== ''); | ||
123 | 131 | ||
124 | const sendButtonClassName = classnames({ | 132 | const sendButtonClassName = classnames({ |
125 | auth__button: true, | 133 | auth__button: true, |
@@ -127,7 +135,7 @@ export default @observer class Invite extends Component { | |||
127 | }); | 135 | }); |
128 | 136 | ||
129 | const renderForm = ( | 137 | const renderForm = ( |
130 | <Fragment> | 138 | <> |
131 | {this.state.showSuccessInfo && isInviteSuccessful && ( | 139 | {this.state.showSuccessInfo && isInviteSuccessful && ( |
132 | <Appear> | 140 | <Appear> |
133 | <Infobox | 141 | <Infobox |
@@ -140,18 +148,17 @@ export default @observer class Invite extends Component { | |||
140 | </Appear> | 148 | </Appear> |
141 | )} | 149 | )} |
142 | 150 | ||
143 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> | 151 | <form |
152 | className="franz-form auth__form" | ||
153 | onSubmit={(e) => this.submit(e)} | ||
154 | > | ||
144 | {!embed && ( | 155 | {!embed && ( |
145 | <img | 156 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
146 | src="./assets/images/logo.svg" | ||
147 | className="auth__logo" | ||
148 | alt="" | ||
149 | /> | ||
150 | )} | 157 | )} |
151 | <h1 className={embed && 'invite__embed'}> | 158 | <h1 className={embed && 'invite__embed'}> |
152 | {intl.formatMessage(messages.headline)} | 159 | {intl.formatMessage(messages.headline)} |
153 | </h1> | 160 | </h1> |
154 | {form.$('invite').map(invite => ( | 161 | {form.$('invite').map((invite) => ( |
155 | <div className="grid" key={invite.key}> | 162 | <div className="grid" key={invite.key}> |
156 | <div className="grid__row"> | 163 | <div className="grid__row"> |
157 | <Input field={invite.$('name')} showLabel={false} /> | 164 | <Input field={invite.$('name')} showLabel={false} /> |
@@ -175,17 +182,27 @@ export default @observer class Invite extends Component { | |||
175 | </Link> | 182 | </Link> |
176 | )} | 183 | )} |
177 | </form> | 184 | </form> |
178 | </Fragment> | 185 | </> |
179 | ); | 186 | ); |
180 | 187 | ||
181 | return ( | 188 | return ( |
182 | <div className={!embed ? 'auth__container auth__container--signup' : 'settings__main'}> | 189 | <div |
190 | className={ | ||
191 | !embed ? 'auth__container auth__container--signup' : 'settings__main' | ||
192 | } | ||
193 | > | ||
183 | {embed && ( | 194 | {embed && ( |
184 | <div className="settings__header"> | 195 | <div className="settings__header"> |
185 | <h1>{this.context.intl.formatMessage(messages.settingsHeadline)}</h1> | 196 | <h1> |
197 | {this.context.intl.formatMessage(messages.settingsHeadline)} | ||
198 | </h1> | ||
186 | </div> | 199 | </div> |
187 | )} | 200 | )} |
188 | {!embed ? <div>{renderForm}</div> : <div className="settings__body invite__form">{renderForm}</div>} | 201 | {!embed ? ( |
202 | <div>{renderForm}</div> | ||
203 | ) : ( | ||
204 | <div className="settings__body invite__form">{renderForm}</div> | ||
205 | )} | ||
189 | </div> | 206 | </div> |
190 | ); | 207 | ); |
191 | } | 208 | } |