diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-09-13 14:45:46 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-13 14:45:46 +0200 |
commit | 537697a6e9757f118d09d9e76362ba1ff617e2c6 (patch) | |
tree | bc55447115e385137684e84697a8c15d2199b8d5 /src/components/settings/services/EditServiceForm.js | |
parent | Bumped up version to: 5.6.3-nightly.0 [skip ci] (diff) | |
download | ferdium-app-537697a6e9757f118d09d9e76362ba1ff617e2c6.tar.gz ferdium-app-537697a6e9757f118d09d9e76362ba1ff617e2c6.tar.zst ferdium-app-537697a6e9757f118d09d9e76362ba1ff617e2c6.zip |
chore: upgrade intl dependencies (#1920)
Diffstat (limited to 'src/components/settings/services/EditServiceForm.js')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 157 |
1 files changed, 89 insertions, 68 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index c41cdd56a..3fbb57cbb 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -2,7 +2,7 @@ import React, { Component } 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 { Link } from 'react-router'; | 4 | import { Link } from 'react-router'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | 5 | import { defineMessages, injectIntl } from 'react-intl'; |
6 | import normalizeUrl from 'normalize-url'; | 6 | import normalizeUrl from 'normalize-url'; |
7 | 7 | ||
8 | import Form from '../../../lib/Form'; | 8 | import Form from '../../../lib/Form'; |
@@ -22,111 +22,117 @@ import globalMessages from '../../../i18n/globalMessages'; | |||
22 | const messages = defineMessages({ | 22 | const messages = defineMessages({ |
23 | saveService: { | 23 | saveService: { |
24 | id: 'settings.service.form.saveButton', | 24 | id: 'settings.service.form.saveButton', |
25 | defaultMessage: '!!!Save service', | 25 | defaultMessage: 'Save service', |
26 | }, | 26 | }, |
27 | deleteService: { | 27 | deleteService: { |
28 | id: 'settings.service.form.deleteButton', | 28 | id: 'settings.service.form.deleteButton', |
29 | defaultMessage: '!!!Delete Service', | 29 | defaultMessage: 'Delete Service', |
30 | }, | 30 | }, |
31 | openDarkmodeCss: { | 31 | openDarkmodeCss: { |
32 | id: 'settings.service.form.openDarkmodeCss', | 32 | id: 'settings.service.form.openDarkmodeCss', |
33 | defaultMessage: '!!!Open darkmode.css', | 33 | defaultMessage: 'Open darkmode.css', |
34 | }, | 34 | }, |
35 | openUserCss: { | 35 | openUserCss: { |
36 | id: 'settings.service.form.openUserCss', | 36 | id: 'settings.service.form.openUserCss', |
37 | defaultMessage: '!!!Open user.css', | 37 | defaultMessage: 'Open user.css', |
38 | }, | 38 | }, |
39 | openUserJs: { | 39 | openUserJs: { |
40 | id: 'settings.service.form.openUserJs', | 40 | id: 'settings.service.form.openUserJs', |
41 | defaultMessage: '!!!Open user.js', | 41 | defaultMessage: 'Open user.js', |
42 | }, | 42 | }, |
43 | recipeFileInfo: { | 43 | recipeFileInfo: { |
44 | id: 'settings.service.form.recipeFileInfo', | 44 | id: 'settings.service.form.recipeFileInfo', |
45 | defaultMessage: '!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.', | 45 | defaultMessage: |
46 | 'Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.', | ||
46 | }, | 47 | }, |
47 | availableServices: { | 48 | availableServices: { |
48 | id: 'settings.service.form.availableServices', | 49 | id: 'settings.service.form.availableServices', |
49 | defaultMessage: '!!!Available services', | 50 | defaultMessage: 'Available services', |
50 | }, | 51 | }, |
51 | yourServices: { | 52 | yourServices: { |
52 | id: 'settings.service.form.yourServices', | 53 | id: 'settings.service.form.yourServices', |
53 | defaultMessage: '!!!Your services', | 54 | defaultMessage: 'Your services', |
54 | }, | 55 | }, |
55 | addServiceHeadline: { | 56 | addServiceHeadline: { |
56 | id: 'settings.service.form.addServiceHeadline', | 57 | id: 'settings.service.form.addServiceHeadline', |
57 | defaultMessage: '!!!Add {name}', | 58 | defaultMessage: 'Add {name}', |
58 | }, | 59 | }, |
59 | editServiceHeadline: { | 60 | editServiceHeadline: { |
60 | id: 'settings.service.form.editServiceHeadline', | 61 | id: 'settings.service.form.editServiceHeadline', |
61 | defaultMessage: '!!!Edit {name}', | 62 | defaultMessage: 'Edit {name}', |
62 | }, | 63 | }, |
63 | tabHosted: { | 64 | tabHosted: { |
64 | id: 'settings.service.form.tabHosted', | 65 | id: 'settings.service.form.tabHosted', |
65 | defaultMessage: '!!!Hosted', | 66 | defaultMessage: 'Hosted', |
66 | }, | 67 | }, |
67 | tabOnPremise: { | 68 | tabOnPremise: { |
68 | id: 'settings.service.form.tabOnPremise', | 69 | id: 'settings.service.form.tabOnPremise', |
69 | defaultMessage: '!!!Self hosted ⭐️', | 70 | defaultMessage: 'Self hosted ⭐️', |
70 | }, | 71 | }, |
71 | useHostedService: { | 72 | useHostedService: { |
72 | id: 'settings.service.form.useHostedService', | 73 | id: 'settings.service.form.useHostedService', |
73 | defaultMessage: '!!!Use the hosted {name} service.', | 74 | defaultMessage: 'Use the hosted {name} service.', |
74 | }, | 75 | }, |
75 | customUrlValidationError: { | 76 | customUrlValidationError: { |
76 | id: 'settings.service.form.customUrlValidationError', | 77 | id: 'settings.service.form.customUrlValidationError', |
77 | defaultMessage: '!!!Could not validate custom {name} server.', | 78 | defaultMessage: 'Could not validate custom {name} server.', |
78 | }, | 79 | }, |
79 | indirectMessageInfo: { | 80 | indirectMessageInfo: { |
80 | id: 'settings.service.form.indirectMessageInfo', | 81 | id: 'settings.service.form.indirectMessageInfo', |
81 | defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', | 82 | defaultMessage: |
83 | 'You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', | ||
82 | }, | 84 | }, |
83 | isMutedInfo: { | 85 | isMutedInfo: { |
84 | id: 'settings.service.form.isMutedInfo', | 86 | id: 'settings.service.form.isMutedInfo', |
85 | defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted', | 87 | defaultMessage: |
88 | 'When disabled, all notification sounds and audio playback are muted', | ||
86 | }, | 89 | }, |
87 | isHibernationEnabledInfo: { | 90 | isHibernationEnabledInfo: { |
88 | id: 'settings.service.form.isHibernatedEnabledInfo', | 91 | id: 'settings.service.form.isHibernatedEnabledInfo', |
89 | defaultMessage: '!!!When enabled, a service will be shut down after a period of time to save system resources.', | 92 | defaultMessage: |
93 | 'When enabled, a service will be shut down after a period of time to save system resources.', | ||
90 | }, | 94 | }, |
91 | headlineNotifications: { | 95 | headlineNotifications: { |
92 | id: 'settings.service.form.headlineNotifications', | 96 | id: 'settings.service.form.headlineNotifications', |
93 | defaultMessage: '!!!Notifications', | 97 | defaultMessage: 'Notifications', |
94 | }, | 98 | }, |
95 | headlineBadges: { | 99 | headlineBadges: { |
96 | id: 'settings.service.form.headlineBadges', | 100 | id: 'settings.service.form.headlineBadges', |
97 | defaultMessage: '!!!Unread message badges', | 101 | defaultMessage: 'Unread message badges', |
98 | }, | 102 | }, |
99 | headlineGeneral: { | 103 | headlineGeneral: { |
100 | id: 'settings.service.form.headlineGeneral', | 104 | id: 'settings.service.form.headlineGeneral', |
101 | defaultMessage: '!!!General', | 105 | defaultMessage: 'General', |
102 | }, | 106 | }, |
103 | headlineDarkReaderSettings: { | 107 | headlineDarkReaderSettings: { |
104 | id: 'settings.service.form.headlineDarkReaderSettings', | 108 | id: 'settings.service.form.headlineDarkReaderSettings', |
105 | defaultMessage: '!!!Dark Reader Settings', | 109 | defaultMessage: 'Dark Reader Settings', |
106 | }, | 110 | }, |
107 | iconDelete: { | 111 | iconDelete: { |
108 | id: 'settings.service.form.iconDelete', | 112 | id: 'settings.service.form.iconDelete', |
109 | defaultMessage: '!!!Delete', | 113 | defaultMessage: 'Delete', |
110 | }, | 114 | }, |
111 | iconUpload: { | 115 | iconUpload: { |
112 | id: 'settings.service.form.iconUpload', | 116 | id: 'settings.service.form.iconUpload', |
113 | defaultMessage: '!!!Drop your image, or click here', | 117 | defaultMessage: 'Drop your image, or click here', |
114 | }, | 118 | }, |
115 | headlineProxy: { | 119 | headlineProxy: { |
116 | id: 'settings.service.form.proxy.headline', | 120 | id: 'settings.service.form.proxy.headline', |
117 | defaultMessage: '!!!HTTP/HTTPS Proxy Settings', | 121 | defaultMessage: 'HTTP/HTTPS Proxy Settings', |
118 | }, | 122 | }, |
119 | proxyRestartInfo: { | 123 | proxyRestartInfo: { |
120 | id: 'settings.service.form.proxy.restartInfo', | 124 | id: 'settings.service.form.proxy.restartInfo', |
121 | defaultMessage: '!!!Please restart Ferdi after changing proxy Settings.', | 125 | defaultMessage: 'Please restart Ferdi after changing proxy Settings.', |
122 | }, | 126 | }, |
123 | proxyInfo: { | 127 | proxyInfo: { |
124 | id: 'settings.service.form.proxy.info', | 128 | id: 'settings.service.form.proxy.info', |
125 | defaultMessage: '!!!Proxy settings will not be synchronized with the Ferdi servers.', | 129 | defaultMessage: |
130 | 'Proxy settings will not be synchronized with the Ferdi servers.', | ||
126 | }, | 131 | }, |
127 | }); | 132 | }); |
128 | 133 | ||
129 | export default @observer class EditServiceForm extends Component { | 134 | @observer |
135 | class EditServiceForm extends Component { | ||
130 | static propTypes = { | 136 | static propTypes = { |
131 | recipe: PropTypes.instanceOf(Recipe).isRequired, | 137 | recipe: PropTypes.instanceOf(Recipe).isRequired, |
132 | service(props, propName) { | 138 | service(props, propName) { |
@@ -151,20 +157,16 @@ export default @observer class EditServiceForm extends Component { | |||
151 | service: {}, | 157 | service: {}, |
152 | }; | 158 | }; |
153 | 159 | ||
154 | static contextTypes = { | ||
155 | intl: intlShape, | ||
156 | }; | ||
157 | |||
158 | state = { | 160 | state = { |
159 | isValidatingCustomUrl: false, | 161 | isValidatingCustomUrl: false, |
160 | } | 162 | }; |
161 | 163 | ||
162 | submit(e) { | 164 | submit(e) { |
163 | const { recipe } = this.props; | 165 | const { recipe } = this.props; |
164 | 166 | ||
165 | e.preventDefault(); | 167 | e.preventDefault(); |
166 | this.props.form.submit({ | 168 | this.props.form.submit({ |
167 | onSuccess: async (form) => { | 169 | onSuccess: async form => { |
168 | const values = form.values(); | 170 | const values = form.values(); |
169 | let isValid = true; | 171 | let isValid = true; |
170 | 172 | ||
@@ -176,7 +178,10 @@ export default @observer class EditServiceForm extends Component { | |||
176 | if (recipe.validateUrl && values.customUrl) { | 178 | if (recipe.validateUrl && values.customUrl) { |
177 | this.setState({ isValidatingCustomUrl: true }); | 179 | this.setState({ isValidatingCustomUrl: true }); |
178 | try { | 180 | try { |
179 | values.customUrl = normalizeUrl(values.customUrl, { stripWWW: false, removeTrailingSlash: false }); | 181 | values.customUrl = normalizeUrl(values.customUrl, { |
182 | stripWWW: false, | ||
183 | removeTrailingSlash: false, | ||
184 | }); | ||
180 | isValid = await recipe.validateUrl(values.customUrl); | 185 | isValid = await recipe.validateUrl(values.customUrl); |
181 | } catch (err) { | 186 | } catch (err) { |
182 | console.warn('ValidateURL', err); | 187 | console.warn('ValidateURL', err); |
@@ -208,7 +213,7 @@ export default @observer class EditServiceForm extends Component { | |||
208 | openRecipeFile, | 213 | openRecipeFile, |
209 | isProxyFeatureEnabled, | 214 | isProxyFeatureEnabled, |
210 | } = this.props; | 215 | } = this.props; |
211 | const { intl } = this.context; | 216 | const { intl } = this.props; |
212 | 217 | ||
213 | const { isValidatingCustomUrl } = this.state; | 218 | const { isValidatingCustomUrl } = this.state; |
214 | 219 | ||
@@ -236,7 +241,8 @@ export default @observer class EditServiceForm extends Component { | |||
236 | activeTabIndex = 2; | 241 | activeTabIndex = 2; |
237 | } | 242 | } |
238 | 243 | ||
239 | const requiresUserInput = !recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl); | 244 | const requiresUserInput = |
245 | !recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl); | ||
240 | 246 | ||
241 | return ( | 247 | return ( |
242 | <div className="settings__main"> | 248 | <div className="settings__main"> |
@@ -254,29 +260,27 @@ export default @observer class EditServiceForm extends Component { | |||
254 | </span> | 260 | </span> |
255 | <span className="separator" /> | 261 | <span className="separator" /> |
256 | <span className="settings__header-item"> | 262 | <span className="settings__header-item"> |
257 | {action === 'add' ? ( | 263 | {action === 'add' |
258 | intl.formatMessage(messages.addServiceHeadline, { | 264 | ? intl.formatMessage(messages.addServiceHeadline, { |
259 | name: recipe.name, | 265 | name: recipe.name, |
260 | }) | 266 | }) |
261 | ) : ( | 267 | : intl.formatMessage(messages.editServiceHeadline, { |
262 | intl.formatMessage(messages.editServiceHeadline, { | ||
263 | name: service.name !== '' ? service.name : recipe.name, | 268 | name: service.name !== '' ? service.name : recipe.name, |
264 | }) | 269 | })} |
265 | )} | ||
266 | </span> | 270 | </span> |
267 | </div> | 271 | </div> |
268 | <div className="settings__body"> | 272 | <div className="settings__body"> |
269 | <form onSubmit={(e) => this.submit(e)} id="form"> | 273 | <form onSubmit={e => this.submit(e)} id="form"> |
270 | <div className="service-name"> | 274 | <div className="service-name"> |
271 | <Input field={form.$('name')} focus /> | 275 | <Input field={form.$('name')} focus /> |
272 | </div> | 276 | </div> |
273 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 277 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
274 | <Tabs | 278 | <Tabs active={activeTabIndex}> |
275 | active={activeTabIndex} | ||
276 | > | ||
277 | {recipe.hasHostedOption && ( | 279 | {recipe.hasHostedOption && ( |
278 | <TabItem title={recipe.name}> | 280 | <TabItem title={recipe.name}> |
279 | {intl.formatMessage(messages.useHostedService, { name: recipe.name })} | 281 | {intl.formatMessage(messages.useHostedService, { |
282 | name: recipe.name, | ||
283 | })} | ||
280 | </TabItem> | 284 | </TabItem> |
281 | )} | 285 | )} |
282 | {recipe.hasTeamId && ( | 286 | {recipe.hasTeamId && ( |
@@ -293,7 +297,9 @@ export default @observer class EditServiceForm extends Component { | |||
293 | <Input field={form.$('customUrl')} /> | 297 | <Input field={form.$('customUrl')} /> |
294 | {form.error === 'url-validation-error' && ( | 298 | {form.error === 'url-validation-error' && ( |
295 | <p className="franz-form__error"> | 299 | <p className="franz-form__error"> |
296 | {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })} | 300 | {intl.formatMessage(messages.customUrlValidationError, { |
301 | name: recipe.name, | ||
302 | })} | ||
297 | </p> | 303 | </p> |
298 | )} | 304 | )} |
299 | </TabItem> | 305 | </TabItem> |
@@ -326,13 +332,16 @@ export default @observer class EditServiceForm extends Component { | |||
326 | <div className="settings__settings-group"> | 332 | <div className="settings__settings-group"> |
327 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> | 333 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> |
328 | <Toggle field={form.$('isBadgeEnabled')} /> | 334 | <Toggle field={form.$('isBadgeEnabled')} /> |
329 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( | 335 | {recipe.hasIndirectMessages && |
330 | <> | 336 | form.$('isBadgeEnabled').value && ( |
331 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> | 337 | <> |
332 | <p className="settings__help indented__help"> | 338 | <Toggle |
333 | {intl.formatMessage(messages.indirectMessageInfo)} | 339 | field={form.$('isIndirectMessageBadgeEnabled')} |
334 | </p> | 340 | /> |
335 | </> | 341 | <p className="settings__help indented__help"> |
342 | {intl.formatMessage(messages.indirectMessageInfo)} | ||
343 | </p> | ||
344 | </> | ||
336 | )} | 345 | )} |
337 | </div> | 346 | </div> |
338 | 347 | ||
@@ -344,15 +353,18 @@ export default @observer class EditServiceForm extends Component { | |||
344 | {intl.formatMessage(messages.isHibernationEnabledInfo)} | 353 | {intl.formatMessage(messages.isHibernationEnabledInfo)} |
345 | </p> | 354 | </p> |
346 | <Toggle field={form.$('isDarkModeEnabled')} /> | 355 | <Toggle field={form.$('isDarkModeEnabled')} /> |
347 | {form.$('isDarkModeEnabled').value | 356 | {form.$('isDarkModeEnabled').value && ( |
348 | && ( | 357 | <> |
349 | <> | 358 | <h3> |
350 | <h3>{intl.formatMessage(messages.headlineDarkReaderSettings)}</h3> | 359 | {intl.formatMessage( |
351 | <Slider field={form.$('darkReaderBrightness')} /> | 360 | messages.headlineDarkReaderSettings, |
352 | <Slider field={form.$('darkReaderContrast')} /> | 361 | )} |
353 | <Slider field={form.$('darkReaderSepia')} /> | 362 | </h3> |
354 | </> | 363 | <Slider field={form.$('darkReaderBrightness')} /> |
355 | )} | 364 | <Slider field={form.$('darkReaderContrast')} /> |
365 | <Slider field={form.$('darkReaderSepia')} /> | ||
366 | </> | ||
367 | )} | ||
356 | </div> | 368 | </div> |
357 | </div> | 369 | </div> |
358 | <div className="service-icon"> | 370 | <div className="service-icon"> |
@@ -381,7 +393,10 @@ export default @observer class EditServiceForm extends Component { | |||
381 | <> | 393 | <> |
382 | <div className="grid"> | 394 | <div className="grid"> |
383 | <div className="grid__row"> | 395 | <div className="grid__row"> |
384 | <Input field={form.$('proxy.host')} className="proxyHost" /> | 396 | <Input |
397 | field={form.$('proxy.host')} | ||
398 | className="proxyHost" | ||
399 | /> | ||
385 | <Input field={form.$('proxy.port')} /> | 400 | <Input field={form.$('proxy.port')} /> |
386 | </div> | 401 | </div> |
387 | </div> | 402 | </div> |
@@ -409,7 +424,9 @@ export default @observer class EditServiceForm extends Component { | |||
409 | 424 | ||
410 | <div className="user-agent"> | 425 | <div className="user-agent"> |
411 | <Input field={form.$('userAgentPref')} /> | 426 | <Input field={form.$('userAgentPref')} /> |
412 | <p className="settings__help">{intl.formatMessage(globalMessages.userAgentHelp)}</p> | 427 | <p className="settings__help"> |
428 | {intl.formatMessage(globalMessages.userAgentHelp)} | ||
429 | </p> | ||
413 | </div> | 430 | </div> |
414 | </form> | 431 | </form> |
415 | 432 | ||
@@ -464,7 +481,9 @@ export default @observer class EditServiceForm extends Component { | |||
464 | type="submit" | 481 | type="submit" |
465 | label={intl.formatMessage(messages.saveService)} | 482 | label={intl.formatMessage(messages.saveService)} |
466 | htmlForm="form" | 483 | htmlForm="form" |
467 | disabled={action !== 'edit' && (form.isPristine && requiresUserInput)} | 484 | disabled={ |
485 | action !== 'edit' && form.isPristine && requiresUserInput | ||
486 | } | ||
468 | /> | 487 | /> |
469 | )} | 488 | )} |
470 | </div> | 489 | </div> |
@@ -472,3 +491,5 @@ export default @observer class EditServiceForm extends Component { | |||
472 | ); | 491 | ); |
473 | } | 492 | } |
474 | } | 493 | } |
494 | |||
495 | export default injectIntl(EditServiceForm); | ||