diff options
author | Vijay A <vraravam@users.noreply.github.com> | 2021-10-06 22:59:03 +0530 |
---|---|---|
committer | Vijay A <vraravam@users.noreply.github.com> | 2021-10-06 22:59:03 +0530 |
commit | 5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216 (patch) | |
tree | 10cea6c608baea3481595ed9eb7be63ef03ca6c4 /src/components/auth/Invite.js | |
parent | Bumped up version to: 5.6.2 (hotfix) (diff) | |
parent | 5.6.3-nightly.25 [skip ci] (diff) | |
download | ferdium-app-5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216.tar.gz ferdium-app-5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216.tar.zst ferdium-app-5fd7cd12cc62ceb6c4d654b3cb3b536412ed1216.zip |
Merge branch 'nightly' into release
Diffstat (limited to 'src/components/auth/Invite.js')
-rw-r--r-- | src/components/auth/Invite.js | 62 |
1 files changed, 27 insertions, 35 deletions
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js index 4b4d63a6b..df8980314 100644 --- a/src/components/auth/Invite.js +++ b/src/components/auth/Invite.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | 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, injectIntl } from 'react-intl'; |
5 | import { Link } from 'react-router'; | 5 | import { Link } from 'react-router'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | 7 | ||
@@ -15,35 +15,34 @@ import Button from '../ui/Button'; | |||
15 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
16 | settingsHeadline: { | 16 | settingsHeadline: { |
17 | id: 'settings.invite.headline', | 17 | id: 'settings.invite.headline', |
18 | defaultMessage: '!!!Invite Friends', | 18 | defaultMessage: 'Invite Friends', |
19 | }, | 19 | }, |
20 | headline: { | 20 | headline: { |
21 | id: 'invite.headline.friends', | 21 | id: 'invite.headline.friends', |
22 | defaultMessage: '!!!Invite 3 of your friends or colleagues', | 22 | defaultMessage: 'Invite 3 of your friends or colleagues', |
23 | }, | 23 | }, |
24 | nameLabel: { | 24 | nameLabel: { |
25 | id: 'invite.name.label', | 25 | id: 'invite.name.label', |
26 | defaultMessage: '!!!Name', | 26 | defaultMessage: 'Name', |
27 | }, | 27 | }, |
28 | emailLabel: { | 28 | emailLabel: { |
29 | id: 'invite.email.label', | 29 | id: 'invite.email.label', |
30 | defaultMessage: '!!!Email address', | 30 | defaultMessage: 'Email address', |
31 | }, | 31 | }, |
32 | submitButtonLabel: { | 32 | submitButtonLabel: { |
33 | id: 'invite.submit.label', | 33 | id: 'invite.submit.label', |
34 | defaultMessage: '!!!Send invites', | 34 | defaultMessage: 'Send invites', |
35 | }, | 35 | }, |
36 | skipButtonLabel: { | 36 | skipButtonLabel: { |
37 | id: 'invite.skip.label', | 37 | id: 'invite.skip.label', |
38 | defaultMessage: '!!!I want to do this later', | 38 | defaultMessage: 'I want to do this later', |
39 | }, | 39 | }, |
40 | inviteSuccessInfo: { | 40 | inviteSuccessInfo: { |
41 | id: 'invite.successInfo', | 41 | id: 'invite.successInfo', |
42 | defaultMessage: '!!!Invitations sent successfully', | 42 | defaultMessage: 'Invitations sent successfully', |
43 | }, | 43 | }, |
44 | }); | 44 | }); |
45 | 45 | ||
46 | export default | ||
47 | @observer | 46 | @observer |
48 | class Invite extends Component { | 47 | class Invite extends Component { |
49 | static propTypes = { | 48 | static propTypes = { |
@@ -59,10 +58,6 @@ class Invite extends Component { | |||
59 | isLoadingInvite: false, | 58 | isLoadingInvite: false, |
60 | }; | 59 | }; |
61 | 60 | ||
62 | static contextTypes = { | ||
63 | intl: intlShape, | ||
64 | }; | ||
65 | |||
66 | state = { showSuccessInfo: false }; | 61 | state = { showSuccessInfo: false }; |
67 | 62 | ||
68 | componentDidMount() { | 63 | componentDidMount() { |
@@ -70,11 +65,11 @@ class Invite extends Component { | |||
70 | { | 65 | { |
71 | fields: { | 66 | fields: { |
72 | invite: [ | 67 | invite: [ |
73 | ...Array(3).fill({ | 68 | ...Array.from({ length: 3 }).fill({ |
74 | fields: { | 69 | fields: { |
75 | name: { | 70 | name: { |
76 | label: this.context.intl.formatMessage(messages.nameLabel), | 71 | label: this.props.intl.formatMessage(messages.nameLabel), |
77 | placeholder: this.context.intl.formatMessage( | 72 | placeholder: this.props.intl.formatMessage( |
78 | messages.nameLabel, | 73 | messages.nameLabel, |
79 | ), | 74 | ), |
80 | onChange: () => { | 75 | onChange: () => { |
@@ -83,8 +78,8 @@ class Invite extends Component { | |||
83 | // related: ['invite.0.email'], // path accepted but does not work | 78 | // related: ['invite.0.email'], // path accepted but does not work |
84 | }, | 79 | }, |
85 | email: { | 80 | email: { |
86 | label: this.context.intl.formatMessage(messages.emailLabel), | 81 | label: this.props.intl.formatMessage(messages.emailLabel), |
87 | placeholder: this.context.intl.formatMessage( | 82 | placeholder: this.props.intl.formatMessage( |
88 | messages.emailLabel, | 83 | messages.emailLabel, |
89 | ), | 84 | ), |
90 | onChange: () => { | 85 | onChange: () => { |
@@ -97,22 +92,22 @@ class Invite extends Component { | |||
97 | ], | 92 | ], |
98 | }, | 93 | }, |
99 | }, | 94 | }, |
100 | this.context.intl, | 95 | this.props.intl, |
101 | ); | 96 | ); |
102 | 97 | ||
103 | document.querySelector('input:first-child').focus(); | 98 | document.querySelector('input:first-child')?.focus(); |
104 | } | 99 | } |
105 | 100 | ||
106 | submit(e) { | 101 | submit(e) { |
107 | e.preventDefault(); | 102 | e.preventDefault(); |
108 | 103 | ||
109 | this.form.submit({ | 104 | this.form?.submit({ |
110 | onSuccess: (form) => { | 105 | onSuccess: form => { |
111 | this.props.onSubmit({ invites: form.values().invite }); | 106 | this.props.onSubmit({ invites: form.values().invite }); |
112 | 107 | ||
113 | this.form.clear(); | 108 | this.form?.clear(); |
114 | // this.form.$('invite.0.name').focus(); // path accepted but does not focus ;( | 109 | // this.form.$('invite.0.name').focus(); // path accepted but does not focus ;( |
115 | document.querySelector('input:first-child').focus(); | 110 | document.querySelector('input:first-child')?.focus(); |
116 | this.setState({ showSuccessInfo: true }); | 111 | this.setState({ showSuccessInfo: true }); |
117 | }, | 112 | }, |
118 | onError: () => {}, | 113 | onError: () => {}, |
@@ -121,13 +116,13 @@ class Invite extends Component { | |||
121 | 116 | ||
122 | render() { | 117 | render() { |
123 | const { form } = this; | 118 | const { form } = this; |
124 | const { intl } = this.context; | 119 | const { intl } = this.props; |
125 | const { embed, isInviteSuccessful, isLoadingInvite } = this.props; | 120 | const { embed, isInviteSuccessful, isLoadingInvite } = this.props; |
126 | 121 | ||
127 | const atLeastOneEmailAddress = form | 122 | const atLeastOneEmailAddress = form |
128 | .$('invite') | 123 | .$('invite') |
129 | .map((invite) => invite.$('email').value) | 124 | .map(invite => invite.$('email').value) |
130 | .some((emailValue) => emailValue.trim() !== ''); | 125 | .some(emailValue => emailValue.trim() !== ''); |
131 | 126 | ||
132 | const sendButtonClassName = classnames({ | 127 | const sendButtonClassName = classnames({ |
133 | auth__button: true, | 128 | auth__button: true, |
@@ -148,17 +143,14 @@ class Invite extends Component { | |||
148 | </Appear> | 143 | </Appear> |
149 | )} | 144 | )} |
150 | 145 | ||
151 | <form | 146 | <form className="franz-form auth__form" onSubmit={e => this.submit(e)}> |
152 | className="franz-form auth__form" | ||
153 | onSubmit={(e) => this.submit(e)} | ||
154 | > | ||
155 | {!embed && ( | 147 | {!embed && ( |
156 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> | 148 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
157 | )} | 149 | )} |
158 | <h1 className={embed && 'invite__embed'}> | 150 | <h1 className={embed && 'invite__embed'}> |
159 | {intl.formatMessage(messages.headline)} | 151 | {intl.formatMessage(messages.headline)} |
160 | </h1> | 152 | </h1> |
161 | {form.$('invite').map((invite) => ( | 153 | {form.$('invite').map(invite => ( |
162 | <div className="grid" key={invite.key}> | 154 | <div className="grid" key={invite.key}> |
163 | <div className="grid__row"> | 155 | <div className="grid__row"> |
164 | <Input field={invite.$('name')} showLabel={false} /> | 156 | <Input field={invite.$('name')} showLabel={false} /> |
@@ -193,9 +185,7 @@ class Invite extends Component { | |||
193 | > | 185 | > |
194 | {embed && ( | 186 | {embed && ( |
195 | <div className="settings__header"> | 187 | <div className="settings__header"> |
196 | <h1> | 188 | <h1>{this.props.intl.formatMessage(messages.settingsHeadline)}</h1> |
197 | {this.context.intl.formatMessage(messages.settingsHeadline)} | ||
198 | </h1> | ||
199 | </div> | 189 | </div> |
200 | )} | 190 | )} |
201 | {!embed ? ( | 191 | {!embed ? ( |
@@ -207,3 +197,5 @@ class Invite extends Component { | |||
207 | ); | 197 | ); |
208 | } | 198 | } |
209 | } | 199 | } |
200 | |||
201 | export default injectIntl(Invite); | ||