diff options
Diffstat (limited to 'src/containers/settings/EditServiceScreen.js')
-rw-r--r-- | src/containers/settings/EditServiceScreen.js | 121 |
1 files changed, 67 insertions, 54 deletions
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index c880e97ae..12e7b9e95 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js | |||
@@ -1,7 +1,7 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { inject, observer } from 'mobx-react'; | 3 | import { inject, observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, injectIntl } from 'react-intl'; |
5 | 5 | ||
6 | import { RouterStore } from 'mobx-react-router'; | 6 | import { RouterStore } from 'mobx-react-router'; |
7 | import UserStore from '../../stores/UserStore'; | 7 | import UserStore from '../../stores/UserStore'; |
@@ -27,87 +27,85 @@ import globalMessages from '../../i18n/globalMessages'; | |||
27 | const messages = defineMessages({ | 27 | const messages = defineMessages({ |
28 | name: { | 28 | name: { |
29 | id: 'settings.service.form.name', | 29 | id: 'settings.service.form.name', |
30 | defaultMessage: '!!!Name', | 30 | defaultMessage: 'Name', |
31 | }, | 31 | }, |
32 | enableService: { | 32 | enableService: { |
33 | id: 'settings.service.form.enableService', | 33 | id: 'settings.service.form.enableService', |
34 | defaultMessage: '!!!Enable service', | 34 | defaultMessage: 'Enable service', |
35 | }, | 35 | }, |
36 | enableHibernation: { | 36 | enableHibernation: { |
37 | id: 'settings.service.form.enableHibernation', | 37 | id: 'settings.service.form.enableHibernation', |
38 | defaultMessage: '!!!Enable hibernation', | 38 | defaultMessage: 'Enable hibernation', |
39 | }, | 39 | }, |
40 | enableNotification: { | 40 | enableNotification: { |
41 | id: 'settings.service.form.enableNotification', | 41 | id: 'settings.service.form.enableNotification', |
42 | defaultMessage: '!!!Enable Notifications', | 42 | defaultMessage: 'Enable Notifications', |
43 | }, | 43 | }, |
44 | enableBadge: { | 44 | enableBadge: { |
45 | id: 'settings.service.form.enableBadge', | 45 | id: 'settings.service.form.enableBadge', |
46 | defaultMessage: '!!!Show unread message badges', | 46 | defaultMessage: 'Show unread message badges', |
47 | }, | 47 | }, |
48 | enableAudio: { | 48 | enableAudio: { |
49 | id: 'settings.service.form.enableAudio', | 49 | id: 'settings.service.form.enableAudio', |
50 | defaultMessage: '!!!Enable audio', | 50 | defaultMessage: 'Enable audio', |
51 | }, | 51 | }, |
52 | team: { | 52 | team: { |
53 | id: 'settings.service.form.team', | 53 | id: 'settings.service.form.team', |
54 | defaultMessage: '!!!Team', | 54 | defaultMessage: 'Team', |
55 | }, | 55 | }, |
56 | customUrl: { | 56 | customUrl: { |
57 | id: 'settings.service.form.customUrl', | 57 | id: 'settings.service.form.customUrl', |
58 | defaultMessage: '!!!Service URL', | 58 | defaultMessage: 'Service URL', |
59 | }, | 59 | }, |
60 | indirectMessages: { | 60 | indirectMessages: { |
61 | id: 'settings.service.form.indirectMessages', | 61 | id: 'settings.service.form.indirectMessages', |
62 | defaultMessage: '!!!Show message badge for all new messages', | 62 | defaultMessage: 'Show message badge for all new messages', |
63 | }, | 63 | }, |
64 | icon: { | 64 | icon: { |
65 | id: 'settings.service.form.icon', | 65 | id: 'settings.service.form.icon', |
66 | defaultMessage: '!!!Custom icon', | 66 | defaultMessage: 'Custom icon', |
67 | }, | 67 | }, |
68 | enableDarkMode: { | 68 | enableDarkMode: { |
69 | id: 'settings.service.form.enableDarkMode', | 69 | id: 'settings.service.form.enableDarkMode', |
70 | defaultMessage: '!!!Enable Dark Mode', | 70 | defaultMessage: 'Enable Dark Mode', |
71 | }, | 71 | }, |
72 | darkReaderBrightness: { | 72 | darkReaderBrightness: { |
73 | id: 'settings.service.form.darkReaderBrightness', | 73 | id: 'settings.service.form.darkReaderBrightness', |
74 | defaultMessage: '!!!Dark Reader Brightness', | 74 | defaultMessage: 'Dark Reader Brightness', |
75 | }, | 75 | }, |
76 | darkReaderContrast: { | 76 | darkReaderContrast: { |
77 | id: 'settings.service.form.darkReaderContrast', | 77 | id: 'settings.service.form.darkReaderContrast', |
78 | defaultMessage: '!!!Dark Reader Contrast', | 78 | defaultMessage: 'Dark Reader Contrast', |
79 | }, | 79 | }, |
80 | darkReaderSepia: { | 80 | darkReaderSepia: { |
81 | id: 'settings.service.form.darkReaderSepia', | 81 | id: 'settings.service.form.darkReaderSepia', |
82 | defaultMessage: '!!!Dark Reader Sepia', | 82 | defaultMessage: 'Dark Reader Sepia', |
83 | }, | 83 | }, |
84 | enableProxy: { | 84 | enableProxy: { |
85 | id: 'settings.service.form.proxy.isEnabled', | 85 | id: 'settings.service.form.proxy.isEnabled', |
86 | defaultMessage: '!!!Use Proxy', | 86 | defaultMessage: 'Use Proxy', |
87 | }, | 87 | }, |
88 | proxyHost: { | 88 | proxyHost: { |
89 | id: 'settings.service.form.proxy.host', | 89 | id: 'settings.service.form.proxy.host', |
90 | defaultMessage: '!!!Proxy Host/IP', | 90 | defaultMessage: 'Proxy Host/IP', |
91 | }, | 91 | }, |
92 | proxyPort: { | 92 | proxyPort: { |
93 | id: 'settings.service.form.proxy.port', | 93 | id: 'settings.service.form.proxy.port', |
94 | defaultMessage: '!!!Port', | 94 | defaultMessage: 'Port', |
95 | }, | 95 | }, |
96 | proxyUser: { | 96 | proxyUser: { |
97 | id: 'settings.service.form.proxy.user', | 97 | id: 'settings.service.form.proxy.user', |
98 | defaultMessage: '!!!User', | 98 | defaultMessage: 'User', |
99 | }, | 99 | }, |
100 | proxyPassword: { | 100 | proxyPassword: { |
101 | id: 'settings.service.form.proxy.password', | 101 | id: 'settings.service.form.proxy.password', |
102 | defaultMessage: '!!!Password', | 102 | defaultMessage: 'Password', |
103 | }, | 103 | }, |
104 | }); | 104 | }); |
105 | 105 | ||
106 | export default @inject('stores', 'actions') @observer class EditServiceScreen extends Component { | 106 | @inject('stores', 'actions') |
107 | static contextTypes = { | 107 | @observer |
108 | intl: intlShape, | 108 | class EditServiceScreen extends Component { |
109 | }; | ||
110 | |||
111 | onSubmit(data) { | 109 | onSubmit(data) { |
112 | const { action } = this.props.router.params; | 110 | const { action } = this.props.router.params; |
113 | const { recipes, services } = this.props.stores; | 111 | const { recipes, services } = this.props.stores; |
@@ -132,27 +130,31 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
132 | } | 130 | } |
133 | 131 | ||
134 | prepareForm(recipe, service, proxy) { | 132 | prepareForm(recipe, service, proxy) { |
135 | const { | 133 | const { intl } = this.props; |
136 | intl, | ||
137 | } = this.context; | ||
138 | 134 | ||
139 | const { | 135 | const { stores, router } = this.props; |
140 | stores, | ||
141 | router, | ||
142 | } = this.props; | ||
143 | 136 | ||
144 | const { action } = router.params; | 137 | const { action } = router.params; |
145 | 138 | ||
146 | let defaultSpellcheckerLanguage = SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; | 139 | let defaultSpellcheckerLanguage = |
140 | SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; | ||
147 | 141 | ||
148 | if (stores.settings.app.spellcheckerLanguage === 'automatic') { | 142 | if (stores.settings.app.spellcheckerLanguage === 'automatic') { |
149 | defaultSpellcheckerLanguage = intl.formatMessage(globalMessages.spellcheckerAutomaticDetectionShort); | 143 | defaultSpellcheckerLanguage = intl.formatMessage( |
144 | globalMessages.spellcheckerAutomaticDetectionShort, | ||
145 | ); | ||
150 | } | 146 | } |
151 | 147 | ||
152 | const spellcheckerLanguage = getSelectOptions({ | 148 | const spellcheckerLanguage = getSelectOptions({ |
153 | locales: SPELLCHECKER_LOCALES, | 149 | locales: SPELLCHECKER_LOCALES, |
154 | resetToDefaultText: intl.formatMessage(globalMessages.spellcheckerSystemDefault, { default: defaultSpellcheckerLanguage }), | 150 | resetToDefaultText: intl.formatMessage( |
155 | automaticDetectionText: stores.settings.app.spellcheckerLanguage !== 'automatic' ? intl.formatMessage(globalMessages.spellcheckerAutomaticDetection) : '', | 151 | globalMessages.spellcheckerSystemDefault, |
152 | { default: defaultSpellcheckerLanguage }, | ||
153 | ), | ||
154 | automaticDetectionText: | ||
155 | stores.settings.app.spellcheckerLanguage !== 'automatic' | ||
156 | ? intl.formatMessage(globalMessages.spellcheckerAutomaticDetection) | ||
157 | : '', | ||
156 | }); | 158 | }); |
157 | 159 | ||
158 | const config = { | 160 | const config = { |
@@ -169,7 +171,10 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
169 | }, | 171 | }, |
170 | isHibernationEnabled: { | 172 | isHibernationEnabled: { |
171 | label: intl.formatMessage(messages.enableHibernation), | 173 | label: intl.formatMessage(messages.enableHibernation), |
172 | value: action !== 'edit' ? recipe.autoHibernate : service.isHibernationEnabled, | 174 | value: |
175 | action !== 'edit' | ||
176 | ? recipe.autoHibernate | ||
177 | : service.isHibernationEnabled, | ||
173 | default: true, | 178 | default: true, |
174 | }, | 179 | }, |
175 | isNotificationEnabled: { | 180 | isNotificationEnabled: { |
@@ -200,17 +205,23 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
200 | }, | 205 | }, |
201 | darkReaderBrightness: { | 206 | darkReaderBrightness: { |
202 | label: intl.formatMessage(messages.darkReaderBrightness), | 207 | label: intl.formatMessage(messages.darkReaderBrightness), |
203 | value: service.darkReaderSettings ? service.darkReaderSettings.brightness : undefined, | 208 | value: service.darkReaderSettings |
209 | ? service.darkReaderSettings.brightness | ||
210 | : undefined, | ||
204 | default: 100, | 211 | default: 100, |
205 | }, | 212 | }, |
206 | darkReaderContrast: { | 213 | darkReaderContrast: { |
207 | label: intl.formatMessage(messages.darkReaderContrast), | 214 | label: intl.formatMessage(messages.darkReaderContrast), |
208 | value: service.darkReaderSettings ? service.darkReaderSettings.contrast : undefined, | 215 | value: service.darkReaderSettings |
216 | ? service.darkReaderSettings.contrast | ||
217 | : undefined, | ||
209 | default: 90, | 218 | default: 90, |
210 | }, | 219 | }, |
211 | darkReaderSepia: { | 220 | darkReaderSepia: { |
212 | label: intl.formatMessage(messages.darkReaderSepia), | 221 | label: intl.formatMessage(messages.darkReaderSepia), |
213 | value: service.darkReaderSettings ? service.darkReaderSettings.sepia : undefined, | 222 | value: service.darkReaderSettings |
223 | ? service.darkReaderSettings.sepia | ||
224 | : undefined, | ||
214 | default: 10, | 225 | default: 10, |
215 | }, | 226 | }, |
216 | spellcheckerLanguage: { | 227 | spellcheckerLanguage: { |
@@ -252,7 +263,10 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
252 | // More fine grained and use case specific validation rules | 263 | // More fine grained and use case specific validation rules |
253 | if (recipe.hasTeamId && recipe.hasCustomUrl) { | 264 | if (recipe.hasTeamId && recipe.hasCustomUrl) { |
254 | config.fields.team.validators = [oneRequired(['team', 'customUrl'])]; | 265 | config.fields.team.validators = [oneRequired(['team', 'customUrl'])]; |
255 | config.fields.customUrl.validators = [url, oneRequired(['team', 'customUrl'])]; | 266 | config.fields.customUrl.validators = [ |
267 | url, | ||
268 | oneRequired(['team', 'customUrl']), | ||
269 | ]; | ||
256 | } | 270 | } |
257 | 271 | ||
258 | // If a service can be hosted and has a teamId or customUrl | 272 | // If a service can be hosted and has a teamId or customUrl |
@@ -344,9 +358,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
344 | } | 358 | } |
345 | 359 | ||
346 | render() { | 360 | render() { |
347 | const { | 361 | const { recipes, services, user } = this.props.stores; |
348 | recipes, services, user, | ||
349 | } = this.props.stores; | ||
350 | const { action } = this.props.router.params; | 362 | const { action } = this.props.router.params; |
351 | 363 | ||
352 | let recipe; | 364 | let recipe; |
@@ -358,9 +370,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
358 | 370 | ||
359 | // TODO: render error message when recipe is `null` | 371 | // TODO: render error message when recipe is `null` |
360 | if (!recipe) { | 372 | if (!recipe) { |
361 | return ( | 373 | return <ServiceError />; |
362 | <ServiceError /> | ||
363 | ); | ||
364 | } | 374 | } |
365 | } else { | 375 | } else { |
366 | service = services.activeSettings; | 376 | service = services.activeSettings; |
@@ -372,13 +382,11 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
372 | } | 382 | } |
373 | 383 | ||
374 | if (isLoading) { | 384 | if (isLoading) { |
375 | return (<div>Loading...</div>); | 385 | return <div>Loading...</div>; |
376 | } | 386 | } |
377 | 387 | ||
378 | if (!recipe) { | 388 | if (!recipe) { |
379 | return ( | 389 | return <div>something went wrong</div>; |
380 | <div>something went wrong</div> | ||
381 | ); | ||
382 | } | 390 | } |
383 | 391 | ||
384 | const form = this.prepareForm(recipe, service, proxyFeature); | 392 | const form = this.prepareForm(recipe, service, proxyFeature); |
@@ -392,11 +400,14 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
392 | user={user.data} | 400 | user={user.data} |
393 | form={form} | 401 | form={form} |
394 | status={services.actionStatus} | 402 | status={services.actionStatus} |
395 | isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting} | 403 | isSaving={ |
404 | services.updateServiceRequest.isExecuting || | ||
405 | services.createServiceRequest.isExecuting | ||
406 | } | ||
396 | isDeleting={services.deleteServiceRequest.isExecuting} | 407 | isDeleting={services.deleteServiceRequest.isExecuting} |
397 | onSubmit={(d) => this.onSubmit(d)} | 408 | onSubmit={d => this.onSubmit(d)} |
398 | onDelete={() => this.deleteService()} | 409 | onDelete={() => this.deleteService()} |
399 | openRecipeFile={(file) => this.openRecipeFile(file)} | 410 | openRecipeFile={file => this.openRecipeFile(file)} |
400 | isProxyFeatureEnabled={proxyFeature.isEnabled} | 411 | isProxyFeatureEnabled={proxyFeature.isEnabled} |
401 | /> | 412 | /> |
402 | </ErrorBoundary> | 413 | </ErrorBoundary> |
@@ -417,3 +428,5 @@ EditServiceScreen.wrappedComponent.propTypes = { | |||
417 | service: PropTypes.instanceOf(ServicesStore).isRequired, | 428 | service: PropTypes.instanceOf(ServicesStore).isRequired, |
418 | }).isRequired, | 429 | }).isRequired, |
419 | }; | 430 | }; |
431 | |||
432 | export default injectIntl(EditServiceScreen); | ||