feat(App): Add proxy support for services

Author: adlk

src/api/LocalApi.js

@@ -4,12 +4,12 @@ export default class LocalApi {
     this.local = local;
   }
 
-  getAppSettings() {
-    return this.local.getAppSettings();
+  getAppSettings(type) {
+    return this.local.getAppSettings(type);
   }
 
-  updateAppSettings(data) {
-    return this.local.updateAppSettings(data);
+  updateAppSettings(type, data) {
+    return this.local.updateAppSettings(type, data);
   }
 
   getAppCacheSize() {

src/api/server/LocalApi.js

@@ -9,20 +9,23 @@ const { session } = remote;
 
 export default class LocalApi {
   // Settings
-  getAppSettings() {
+  getAppSettings(type) {
     return new Promise((resolve) => {
-      ipcRenderer.once('appSettings', (event, data) => {
-        debug('LocalApi::getAppSettings resolves', data);
-        resolve(data);
+      ipcRenderer.once('appSettings', (event, resp) => {
+        debug('LocalApi::getAppSettings resolves', resp.type, resp.data);
+        resolve(resp);
       });
 
-      ipcRenderer.send('getAppSettings');
+      ipcRenderer.send('getAppSettings', type);
     });
   }
 
-  async updateAppSettings(data) {
-    debug('LocalApi::updateAppSettings resolves', data);
-    ipcRenderer.send('updateAppSettings', data);
+  async updateAppSettings(type, data) {
+    debug('LocalApi::updateAppSettings resolves', type, data);
+    ipcRenderer.send('updateAppSettings', {
+      type,
+      data,
+    });
   }
 
   // Services

src/components/settings/account/AccountDashboard.js

@@ -180,11 +180,9 @@ export default @observer class AccountDashboard extends Component {
                         <span className="badge badge--success">{intl.formatMessage(messages.accountTypeEnterprise)}</span>
                       )}
                     </div>
-                    {!user.isSSO && (
-                      <Link to="/settings/user/edit" className="button">
-                        {intl.formatMessage(messages.accountEditButton)}
-                      </Link>
-                    )}
+                    <Link to="/settings/user/edit" className="button">
+                      {intl.formatMessage(messages.accountEditButton)}
+                    </Link>
                     {user.emailValidated}
                   </div>
                 </div>

src/components/settings/navigation/SettingsNavigation.js

@@ -43,20 +43,17 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
 
   render() {
     const { serviceCount } = this.props;
-    const { features } = this.props.stores.features;
     const { intl } = this.context;
 
     return (
       <div className="settings-navigation">
-        {features.userCanManageServices && (
-          <Link
-            to="/settings/recipes"
-            className="settings-navigation__link"
-            activeClassName="is-active"
-          >
-            {intl.formatMessage(messages.availableServices)}
-          </Link>
-        )}
+        <Link
+          to="/settings/recipes"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.availableServices)}
+        </Link>
         <Link
           to="/settings/services"
           className="settings-navigation__link"
@@ -97,11 +94,3 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   }
 }
 
-SettingsNavigation.wrappedComponent.propTypes = {
-  stores: PropTypes.shape({
-    features: PropTypes.shape({
-      features: PropTypes.object.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-

src/components/settings/services/EditServiceForm.js

@@ -15,6 +15,8 @@ import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
 import ImageUpload from '../../ui/ImageUpload';
 
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+
 const messages = defineMessages({
   saveService: {
     id: 'settings.service.form.saveButton',
@@ -92,6 +94,14 @@ const messages = defineMessages({
     id: 'settings.service.form.iconUpload',
     defaultMessage: '!!!Drop your image, or click here',
   },
+  headlineProxy: {
+    id: 'settings.service.form.proxy.headline',
+    defaultMessage: '!!!Proxy Settings',
+  },
+  proxyInfo: {
+    id: 'settings.service.form.proxy.info',
+    defaultMessage: '!!!Proxy settings will not be synchronized with the Franz servers.',
+  },
 });
 
 export default @observer class EditServiceForm extends Component {
@@ -106,13 +116,14 @@ export default @observer class EditServiceForm extends Component {
       return null;
     },
     user: PropTypes.instanceOf(User).isRequired,
-    userCanManageServices: PropTypes.bool.isRequired,
     action: PropTypes.string.isRequired,
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
+    isProxyFeatureEnabled: PropTypes.bool.isRequired,
+    isProxyFeaturePremiumFeature: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -169,11 +180,12 @@ export default @observer class EditServiceForm extends Component {
       service,
       action,
       user,
-      userCanManageServices,
       form,
       isSaving,
       isDeleting,
       onDelete,
+      isProxyFeatureEnabled,
+      isProxyFeaturePremiumFeature,
     } = this.props;
     const { intl } = this.context;
 
@@ -318,6 +330,33 @@ export default @observer class EditServiceForm extends Component {
                 />
               </div>
             </div>
+
+            {isProxyFeatureEnabled && (
+              <PremiumFeatureContainer condition={isProxyFeaturePremiumFeature}>
+                <div className="settings__settings-group">
+                  <h3>
+                    {intl.formatMessage(messages.headlineProxy)}
+                    <span className="badge badge--success">beta</span>
+                  </h3>
+                  <Toggle field={form.$('proxy.isEnabled')} />
+                  {form.$('proxy.isEnabled').value && (
+                    <div>
+                      <Input field={form.$('proxy.host')} />
+                      <Input field={form.$('proxy.user')} />
+                      <Input
+                        field={form.$('proxy.password')}
+                        showPasswordToggle
+                      />
+                      <p>
+                        <span className="mdi mdi-information" />
+                        {intl.formatMessage(messages.proxyInfo)}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </PremiumFeatureContainer>
+            )}
+
             {recipe.message && (
               <p className="settings__message">
                 <span className="mdi mdi-information" />
@@ -328,7 +367,7 @@ export default @observer class EditServiceForm extends Component {
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
-          {action === 'edit' && userCanManageServices && deleteButton}
+          {action === 'edit' && deleteButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (

src/components/settings/settings/EditSettingsForm.js

@@ -96,7 +96,6 @@ export default @observer class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
-    isPremiumUser: PropTypes.bool.isRequired,
     isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
   };
 
@@ -127,7 +126,6 @@ export default @observer class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       cacheSize,
-      isPremiumUser,
       isSpellcheckerPremiumFeature,
     } = this.props;
     const { intl } = this.context;
@@ -180,16 +178,14 @@ export default @observer class EditSettingsForm extends Component {
 
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
-            {!isPremiumUser && isSpellcheckerPremiumFeature ? (
-              <PremiumFeatureContainer>
-                <Toggle
-                  field={form.$('enableSpellchecking')}
-                  disabled
-                />
-              </PremiumFeatureContainer>
-            ) : (
-              <Toggle field={form.$('enableSpellchecking')} />
-            )}
+            <PremiumFeatureContainer
+              condition={isSpellcheckerPremiumFeature}
+            >
+              <Toggle
+                field={form.$('enableSpellchecking')}
+                disabled
+              />
+            </PremiumFeatureContainer>
             <Toggle field={form.$('enableGPUAcceleration')} />
             <p className="settings__help">{intl.formatMessage(messages.enableGPUAccelerationInfo)}</p>
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}

src/components/subscription/SubscriptionForm.js

@@ -40,9 +40,6 @@ const messages = defineMessages({
       id: 'subscription.features.onpremise.mattermost',
       defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
     },
-    encryptedSync: {
-      id: 'subscription.features.encryptedSync',
-      defaultMessage: '!!!Encrypted session synchronization',
     noInterruptions: {
       id: 'subscription.features.noInterruptions',
       defaultMessage: '!!!No app delays & nagging to upgrade license',

src/components/ui/PremiumFeatureContainer/index.js

@@ -6,6 +6,8 @@ import injectSheet from 'react-jss';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
+import UserStore from '../../../stores/UserStore';
+
 import styles from './styles';
 
 const messages = defineMessages({
@@ -15,9 +17,14 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    condition: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    condition: true,
   };
 
   static contextTypes = {
@@ -29,11 +36,13 @@ export default @inject('actions') @injectSheet(styles) @observer class PremiumFe
       classes,
       children,
       actions,
+      condition,
+      stores,
     } = this.props;
 
     const { intl } = this.context;
 
-    return (
+    return !stores.user.data.isPremium && !!condition ? (
       <div className={classes.container}>
         <div className={classes.titleContainer}>
           <p className={classes.title}>Premium Feature</p>
@@ -49,12 +58,15 @@ export default @inject('actions') @injectSheet(styles) @observer class PremiumFe
           {children}
         </div>
       </div>
-    );
+    ) : children;
   }
 }
 
 PremiumFeatureContainer.wrappedComponent.propTypes = {
   children: oneOrManyChildElements.isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
       openSettings: PropTypes.func.isRequired,

src/config.js

@@ -29,4 +29,9 @@ export const DEFAULT_APP_SETTINGS = {
 export const FRANZ_SERVICE_REQUEST = 'https://bit.ly/franz-service-request';
 export const FRANZ_TRANSLATION = 'https://bit.ly/franz-translate';
 
-export const SETTINGS_PATH = path.join(app.getPath('userData'), 'config', 'settings.json');
+export const FILE_SYSTEM_SETTINGS_TYPES = [
+  'app',
+  'proxy',
+];
+
+export const SETTINGS_PATH = path.join(app.getPath('userData'), 'config');