diff options
Diffstat (limited to 'src/containers/settings/EditServiceScreen.js')
-rw-r--r-- | src/containers/settings/EditServiceScreen.js | 135 |
1 files changed, 81 insertions, 54 deletions
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index c880e97ae..dee7e7cff 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,89 @@ 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: 'Custom server', |
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 | }, | ||
84 | onlyShowFavoritesInUnreadCount: { | ||
85 | id: 'settings.service.form.onlyShowFavoritesInUnreadCount', | ||
86 | defaultMessage: 'Only show Favorites in unread count', | ||
83 | }, | 87 | }, |
84 | enableProxy: { | 88 | enableProxy: { |
85 | id: 'settings.service.form.proxy.isEnabled', | 89 | id: 'settings.service.form.proxy.isEnabled', |
86 | defaultMessage: '!!!Use Proxy', | 90 | defaultMessage: 'Use Proxy', |
87 | }, | 91 | }, |
88 | proxyHost: { | 92 | proxyHost: { |
89 | id: 'settings.service.form.proxy.host', | 93 | id: 'settings.service.form.proxy.host', |
90 | defaultMessage: '!!!Proxy Host/IP', | 94 | defaultMessage: 'Proxy Host/IP', |
91 | }, | 95 | }, |
92 | proxyPort: { | 96 | proxyPort: { |
93 | id: 'settings.service.form.proxy.port', | 97 | id: 'settings.service.form.proxy.port', |
94 | defaultMessage: '!!!Port', | 98 | defaultMessage: 'Port', |
95 | }, | 99 | }, |
96 | proxyUser: { | 100 | proxyUser: { |
97 | id: 'settings.service.form.proxy.user', | 101 | id: 'settings.service.form.proxy.user', |
98 | defaultMessage: '!!!User', | 102 | defaultMessage: 'User (optional)', |
99 | }, | 103 | }, |
100 | proxyPassword: { | 104 | proxyPassword: { |
101 | id: 'settings.service.form.proxy.password', | 105 | id: 'settings.service.form.proxy.password', |
102 | defaultMessage: '!!!Password', | 106 | defaultMessage: 'Password (optional)', |
103 | }, | 107 | }, |
104 | }); | 108 | }); |
105 | 109 | ||
106 | export default @inject('stores', 'actions') @observer class EditServiceScreen extends Component { | 110 | @inject('stores', 'actions') |
107 | static contextTypes = { | 111 | @observer |
108 | intl: intlShape, | 112 | class EditServiceScreen extends Component { |
109 | }; | ||
110 | |||
111 | onSubmit(data) { | 113 | onSubmit(data) { |
112 | const { action } = this.props.router.params; | 114 | const { action } = this.props.router.params; |
113 | const { recipes, services } = this.props.stores; | 115 | const { recipes, services } = this.props.stores; |
@@ -132,27 +134,31 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
132 | } | 134 | } |
133 | 135 | ||
134 | prepareForm(recipe, service, proxy) { | 136 | prepareForm(recipe, service, proxy) { |
135 | const { | 137 | const { intl } = this.props; |
136 | intl, | ||
137 | } = this.context; | ||
138 | 138 | ||
139 | const { | 139 | const { stores, router } = this.props; |
140 | stores, | ||
141 | router, | ||
142 | } = this.props; | ||
143 | 140 | ||
144 | const { action } = router.params; | 141 | const { action } = router.params; |
145 | 142 | ||
146 | let defaultSpellcheckerLanguage = SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; | 143 | let defaultSpellcheckerLanguage = |
144 | SPELLCHECKER_LOCALES[stores.settings.app.spellcheckerLanguage]; | ||
147 | 145 | ||
148 | if (stores.settings.app.spellcheckerLanguage === 'automatic') { | 146 | if (stores.settings.app.spellcheckerLanguage === 'automatic') { |
149 | defaultSpellcheckerLanguage = intl.formatMessage(globalMessages.spellcheckerAutomaticDetectionShort); | 147 | defaultSpellcheckerLanguage = intl.formatMessage( |
148 | globalMessages.spellcheckerAutomaticDetectionShort, | ||
149 | ); | ||
150 | } | 150 | } |
151 | 151 | ||
152 | const spellcheckerLanguage = getSelectOptions({ | 152 | const spellcheckerLanguage = getSelectOptions({ |
153 | locales: SPELLCHECKER_LOCALES, | 153 | locales: SPELLCHECKER_LOCALES, |
154 | resetToDefaultText: intl.formatMessage(globalMessages.spellcheckerSystemDefault, { default: defaultSpellcheckerLanguage }), | 154 | resetToDefaultText: intl.formatMessage( |
155 | automaticDetectionText: stores.settings.app.spellcheckerLanguage !== 'automatic' ? intl.formatMessage(globalMessages.spellcheckerAutomaticDetection) : '', | 155 | globalMessages.spellcheckerSystemDefault, |
156 | { default: defaultSpellcheckerLanguage }, | ||
157 | ), | ||
158 | automaticDetectionText: | ||
159 | stores.settings.app.spellcheckerLanguage !== 'automatic' | ||
160 | ? intl.formatMessage(globalMessages.spellcheckerAutomaticDetection) | ||
161 | : '', | ||
156 | }); | 162 | }); |
157 | 163 | ||
158 | const config = { | 164 | const config = { |
@@ -169,7 +175,10 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
169 | }, | 175 | }, |
170 | isHibernationEnabled: { | 176 | isHibernationEnabled: { |
171 | label: intl.formatMessage(messages.enableHibernation), | 177 | label: intl.formatMessage(messages.enableHibernation), |
172 | value: action !== 'edit' ? recipe.autoHibernate : service.isHibernationEnabled, | 178 | value: |
179 | action !== 'edit' | ||
180 | ? recipe.autoHibernate | ||
181 | : service.isHibernationEnabled, | ||
173 | default: true, | 182 | default: true, |
174 | }, | 183 | }, |
175 | isNotificationEnabled: { | 184 | isNotificationEnabled: { |
@@ -200,17 +209,23 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
200 | }, | 209 | }, |
201 | darkReaderBrightness: { | 210 | darkReaderBrightness: { |
202 | label: intl.formatMessage(messages.darkReaderBrightness), | 211 | label: intl.formatMessage(messages.darkReaderBrightness), |
203 | value: service.darkReaderSettings ? service.darkReaderSettings.brightness : undefined, | 212 | value: service.darkReaderSettings |
213 | ? service.darkReaderSettings.brightness | ||
214 | : undefined, | ||
204 | default: 100, | 215 | default: 100, |
205 | }, | 216 | }, |
206 | darkReaderContrast: { | 217 | darkReaderContrast: { |
207 | label: intl.formatMessage(messages.darkReaderContrast), | 218 | label: intl.formatMessage(messages.darkReaderContrast), |
208 | value: service.darkReaderSettings ? service.darkReaderSettings.contrast : undefined, | 219 | value: service.darkReaderSettings |
220 | ? service.darkReaderSettings.contrast | ||
221 | : undefined, | ||
209 | default: 90, | 222 | default: 90, |
210 | }, | 223 | }, |
211 | darkReaderSepia: { | 224 | darkReaderSepia: { |
212 | label: intl.formatMessage(messages.darkReaderSepia), | 225 | label: intl.formatMessage(messages.darkReaderSepia), |
213 | value: service.darkReaderSettings ? service.darkReaderSettings.sepia : undefined, | 226 | value: service.darkReaderSettings |
227 | ? service.darkReaderSettings.sepia | ||
228 | : undefined, | ||
214 | default: 10, | 229 | default: 10, |
215 | }, | 230 | }, |
216 | spellcheckerLanguage: { | 231 | spellcheckerLanguage: { |
@@ -252,7 +267,10 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
252 | // More fine grained and use case specific validation rules | 267 | // More fine grained and use case specific validation rules |
253 | if (recipe.hasTeamId && recipe.hasCustomUrl) { | 268 | if (recipe.hasTeamId && recipe.hasCustomUrl) { |
254 | config.fields.team.validators = [oneRequired(['team', 'customUrl'])]; | 269 | config.fields.team.validators = [oneRequired(['team', 'customUrl'])]; |
255 | config.fields.customUrl.validators = [url, oneRequired(['team', 'customUrl'])]; | 270 | config.fields.customUrl.validators = [ |
271 | url, | ||
272 | oneRequired(['team', 'customUrl']), | ||
273 | ]; | ||
256 | } | 274 | } |
257 | 275 | ||
258 | // If a service can be hosted and has a teamId or customUrl | 276 | // If a service can be hosted and has a teamId or customUrl |
@@ -275,6 +293,16 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
275 | }); | 293 | }); |
276 | } | 294 | } |
277 | 295 | ||
296 | if (recipe.allowFavoritesDelineationInUnreadCount) { | ||
297 | Object.assign(config.fields, { | ||
298 | onlyShowFavoritesInUnreadCount: { | ||
299 | label: intl.formatMessage(messages.onlyShowFavoritesInUnreadCount), | ||
300 | value: service.onlyShowFavoritesInUnreadCount, | ||
301 | default: false, | ||
302 | }, | ||
303 | }); | ||
304 | } | ||
305 | |||
278 | if (proxy.isEnabled) { | 306 | if (proxy.isEnabled) { |
279 | const serviceProxyConfig = stores.settings.proxy[service.id] || {}; | 307 | const serviceProxyConfig = stores.settings.proxy[service.id] || {}; |
280 | 308 | ||
@@ -344,9 +372,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
344 | } | 372 | } |
345 | 373 | ||
346 | render() { | 374 | render() { |
347 | const { | 375 | const { recipes, services, user } = this.props.stores; |
348 | recipes, services, user, | ||
349 | } = this.props.stores; | ||
350 | const { action } = this.props.router.params; | 376 | const { action } = this.props.router.params; |
351 | 377 | ||
352 | let recipe; | 378 | let recipe; |
@@ -358,9 +384,7 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
358 | 384 | ||
359 | // TODO: render error message when recipe is `null` | 385 | // TODO: render error message when recipe is `null` |
360 | if (!recipe) { | 386 | if (!recipe) { |
361 | return ( | 387 | return <ServiceError />; |
362 | <ServiceError /> | ||
363 | ); | ||
364 | } | 388 | } |
365 | } else { | 389 | } else { |
366 | service = services.activeSettings; | 390 | service = services.activeSettings; |
@@ -372,13 +396,11 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
372 | } | 396 | } |
373 | 397 | ||
374 | if (isLoading) { | 398 | if (isLoading) { |
375 | return (<div>Loading...</div>); | 399 | return <div>Loading...</div>; |
376 | } | 400 | } |
377 | 401 | ||
378 | if (!recipe) { | 402 | if (!recipe) { |
379 | return ( | 403 | return <div>something went wrong</div>; |
380 | <div>something went wrong</div> | ||
381 | ); | ||
382 | } | 404 | } |
383 | 405 | ||
384 | const form = this.prepareForm(recipe, service, proxyFeature); | 406 | const form = this.prepareForm(recipe, service, proxyFeature); |
@@ -392,11 +414,14 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex | |||
392 | user={user.data} | 414 | user={user.data} |
393 | form={form} | 415 | form={form} |
394 | status={services.actionStatus} | 416 | status={services.actionStatus} |
395 | isSaving={services.updateServiceRequest.isExecuting || services.createServiceRequest.isExecuting} | 417 | isSaving={ |
418 | services.updateServiceRequest.isExecuting || | ||
419 | services.createServiceRequest.isExecuting | ||
420 | } | ||
396 | isDeleting={services.deleteServiceRequest.isExecuting} | 421 | isDeleting={services.deleteServiceRequest.isExecuting} |
397 | onSubmit={(d) => this.onSubmit(d)} | 422 | onSubmit={d => this.onSubmit(d)} |
398 | onDelete={() => this.deleteService()} | 423 | onDelete={() => this.deleteService()} |
399 | openRecipeFile={(file) => this.openRecipeFile(file)} | 424 | openRecipeFile={file => this.openRecipeFile(file)} |
400 | isProxyFeatureEnabled={proxyFeature.isEnabled} | 425 | isProxyFeatureEnabled={proxyFeature.isEnabled} |
401 | /> | 426 | /> |
402 | </ErrorBoundary> | 427 | </ErrorBoundary> |
@@ -417,3 +442,5 @@ EditServiceScreen.wrappedComponent.propTypes = { | |||
417 | service: PropTypes.instanceOf(ServicesStore).isRequired, | 442 | service: PropTypes.instanceOf(ServicesStore).isRequired, |
418 | }).isRequired, | 443 | }).isRequired, |
419 | }; | 444 | }; |
445 | |||
446 | export default injectIntl(EditServiceScreen); | ||