diff options
Diffstat (limited to 'src/components/settings/services/EditServiceForm.js')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 50 |
1 files changed, 48 insertions, 2 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index f6f2df2f3..d16ec35b8 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -15,6 +15,8 @@ import Toggle from '../../ui/Toggle'; | |||
15 | import Button from '../../ui/Button'; | 15 | import Button from '../../ui/Button'; |
16 | import ImageUpload from '../../ui/ImageUpload'; | 16 | import ImageUpload from '../../ui/ImageUpload'; |
17 | 17 | ||
18 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | ||
19 | |||
18 | const messages = defineMessages({ | 20 | const messages = defineMessages({ |
19 | saveService: { | 21 | saveService: { |
20 | id: 'settings.service.form.saveButton', | 22 | id: 'settings.service.form.saveButton', |
@@ -92,10 +94,17 @@ const messages = defineMessages({ | |||
92 | id: 'settings.service.form.iconUpload', | 94 | id: 'settings.service.form.iconUpload', |
93 | defaultMessage: '!!!Drop your image, or click here', | 95 | defaultMessage: '!!!Drop your image, or click here', |
94 | }, | 96 | }, |
97 | headlineProxy: { | ||
98 | id: 'settings.service.form.proxy.headline', | ||
99 | defaultMessage: '!!!Proxy Settings', | ||
100 | }, | ||
101 | proxyInfo: { | ||
102 | id: 'settings.service.form.proxy.info', | ||
103 | defaultMessage: '!!!Proxy settings will not be synchronized with the Franz servers.', | ||
104 | }, | ||
95 | }); | 105 | }); |
96 | 106 | ||
97 | @observer | 107 | export default @observer class EditServiceForm extends Component { |
98 | export default class EditServiceForm extends Component { | ||
99 | static propTypes = { | 108 | static propTypes = { |
100 | recipe: PropTypes.instanceOf(Recipe).isRequired, | 109 | recipe: PropTypes.instanceOf(Recipe).isRequired, |
101 | service(props, propName) { | 110 | service(props, propName) { |
@@ -113,6 +122,8 @@ export default class EditServiceForm extends Component { | |||
113 | onDelete: PropTypes.func.isRequired, | 122 | onDelete: PropTypes.func.isRequired, |
114 | isSaving: PropTypes.bool.isRequired, | 123 | isSaving: PropTypes.bool.isRequired, |
115 | isDeleting: PropTypes.bool.isRequired, | 124 | isDeleting: PropTypes.bool.isRequired, |
125 | isProxyFeatureEnabled: PropTypes.bool.isRequired, | ||
126 | isProxyFeaturePremiumFeature: PropTypes.bool.isRequired, | ||
116 | }; | 127 | }; |
117 | 128 | ||
118 | static defaultProps = { | 129 | static defaultProps = { |
@@ -173,6 +184,8 @@ export default class EditServiceForm extends Component { | |||
173 | isSaving, | 184 | isSaving, |
174 | isDeleting, | 185 | isDeleting, |
175 | onDelete, | 186 | onDelete, |
187 | isProxyFeatureEnabled, | ||
188 | isProxyFeaturePremiumFeature, | ||
176 | } = this.props; | 189 | } = this.props; |
177 | const { intl } = this.context; | 190 | const { intl } = this.context; |
178 | 191 | ||
@@ -202,6 +215,8 @@ export default class EditServiceForm extends Component { | |||
202 | activeTabIndex = 2; | 215 | activeTabIndex = 2; |
203 | } | 216 | } |
204 | 217 | ||
218 | const requiresUserInput = !recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl); | ||
219 | |||
205 | return ( | 220 | return ( |
206 | <div className="settings__main"> | 221 | <div className="settings__main"> |
207 | <div className="settings__header"> | 222 | <div className="settings__header"> |
@@ -303,6 +318,9 @@ export default class EditServiceForm extends Component { | |||
303 | 318 | ||
304 | <div className="settings__settings-group"> | 319 | <div className="settings__settings-group"> |
305 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> | 320 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> |
321 | {recipe.hasDarkMode && ( | ||
322 | <Toggle field={form.$('isDarkModeEnabled')} /> | ||
323 | )} | ||
306 | <Toggle field={form.$('isEnabled')} /> | 324 | <Toggle field={form.$('isEnabled')} /> |
307 | </div> | 325 | </div> |
308 | </div> | 326 | </div> |
@@ -314,6 +332,33 @@ export default class EditServiceForm extends Component { | |||
314 | /> | 332 | /> |
315 | </div> | 333 | </div> |
316 | </div> | 334 | </div> |
335 | |||
336 | {isProxyFeatureEnabled && ( | ||
337 | <PremiumFeatureContainer condition={isProxyFeaturePremiumFeature}> | ||
338 | <div className="settings__settings-group"> | ||
339 | <h3> | ||
340 | {intl.formatMessage(messages.headlineProxy)} | ||
341 | <span className="badge badge--success">beta</span> | ||
342 | </h3> | ||
343 | <Toggle field={form.$('proxy.isEnabled')} /> | ||
344 | {form.$('proxy.isEnabled').value && ( | ||
345 | <div> | ||
346 | <Input field={form.$('proxy.host')} /> | ||
347 | <Input field={form.$('proxy.user')} /> | ||
348 | <Input | ||
349 | field={form.$('proxy.password')} | ||
350 | showPasswordToggle | ||
351 | /> | ||
352 | <p> | ||
353 | <span className="mdi mdi-information" /> | ||
354 | {intl.formatMessage(messages.proxyInfo)} | ||
355 | </p> | ||
356 | </div> | ||
357 | )} | ||
358 | </div> | ||
359 | </PremiumFeatureContainer> | ||
360 | )} | ||
361 | |||
317 | {recipe.message && ( | 362 | {recipe.message && ( |
318 | <p className="settings__message"> | 363 | <p className="settings__message"> |
319 | <span className="mdi mdi-information" /> | 364 | <span className="mdi mdi-information" /> |
@@ -340,6 +385,7 @@ export default class EditServiceForm extends Component { | |||
340 | type="submit" | 385 | type="submit" |
341 | label={intl.formatMessage(messages.saveService)} | 386 | label={intl.formatMessage(messages.saveService)} |
342 | htmlForm="form" | 387 | htmlForm="form" |
388 | disabled={action !== 'edit' && form.isPristine && requiresUserInput} | ||
343 | /> | 389 | /> |
344 | )} | 390 | )} |
345 | </div> | 391 | </div> |