Merge branch 'develop' into feature/macOS-copy-paste

18 files changed, 208 insertions, 76 deletions

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index d947974b3..b50001b2d 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -110,7 +110,11 @@ export function watch() {
 }
 
 export function webserver() {
-  gulp.src(paths.dest)
+  gulp.src([
+    paths.dest,
+    `!${paths.dest}/electron/**`,
+    `!${paths.dest}/webview/**`,
+  ])
     .pipe(server({
       livereload: true,
     }));
diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index eba236f16..79ac6e12f 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -1,5 +1,3 @@
-import SettingsModel from '../../models/Settings';
-
 export default class LocalApi {
   // App
   async updateAppSettings(data) {
@@ -15,7 +13,7 @@ export default class LocalApi {
   async getAppSettings() {
     const settingsString = localStorage.getItem('app');
     try {
-      const settings = new SettingsModel(JSON.parse(settingsString) || {});
+      const settings = JSON.parse(settingsString) || {};
       console.debug('LocalApi::getAppSettings resolves', settings);
 
       return settings;
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 8403d9462..7aed8fda7 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -126,7 +126,7 @@ class TabItem extends Component {
     const menu = Menu.buildFromTemplate(menuTemplate);
 
     let notificationBadge = null;
-    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted) {
+    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) {
       notificationBadge = (
         <span>
           {service.unreadDirectMessageCount > 0 && (
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 36cefe87c..4458c4c5a 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -47,6 +47,10 @@ const messages = defineMessages({
     id: 'settings.service.form.tabOnPremise',
     defaultMessage: '!!!Self hosted ⭐️',
   },
+  useHostedService: {
+    id: 'settings.service.form.useHostedService',
+    defaultMessage: '!!!Use the hosted {name} service.',
+  },
   customUrlValidationError: {
     id: 'settings.service.form.customUrlValidationError',
     defaultMessage: '!!!Could not validate custom {name} server.',
@@ -67,6 +71,18 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
+  headlineNotifications: {
+    id: 'settings.service.form.headlineNotifications',
+    defaultMessage: '!!!Notifications',
+  },
+  headlineBadges: {
+    id: 'settings.service.form.headlineBadges',
+    defaultMessage: '!!!Unread message dadges',
+  },
+  headlineGeneral: {
+    id: 'settings.service.form.headlineGeneral',
+    defaultMessage: '!!!General',
+  },
 });
 
 @observer
@@ -108,7 +124,6 @@ export default class EditServiceForm extends Component {
     this.props.form.submit({
       onSuccess: async (form) => {
         const values = form.values();
-
         let isValid = true;
 
         if (recipe.validateUrl && values.customUrl) {
@@ -166,6 +181,13 @@ export default class EditServiceForm extends Component {
       />
     );
 
+    let activeTabIndex = 0;
+    if (recipe.hasHostedOption && service.team) {
+      activeTabIndex = 1;
+    } else if (recipe.hasHostedOption && service.customUrl) {
+      activeTabIndex = 2;
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -198,11 +220,20 @@ export default class EditServiceForm extends Component {
             <Input field={form.$('name')} focus />
             {(recipe.hasTeamId || recipe.hasCustomUrl) && (
               <Tabs
-                active={service.customUrl ? 1 : 0}
+                active={activeTabIndex}
               >
+                {recipe.hasHostedOption && (
+                  <TabItem title={recipe.name}>
+                    {intl.formatMessage(messages.useHostedService, { name: recipe.name })}
+                  </TabItem>
+                )}
                 {recipe.hasTeamId && (
                   <TabItem title={intl.formatMessage(messages.tabHosted)}>
-                    <Input field={form.$('team')} suffix={recipe.urlInputSuffix} />
+                    <Input
+                      field={form.$('team')}
+                      prefix={recipe.urlInputPrefix}
+                      suffix={recipe.urlInputSuffix}
+                    />
                   </TabItem>
                 )}
                 {recipe.hasCustomUrl && (
@@ -231,20 +262,32 @@ export default class EditServiceForm extends Component {
               </Tabs>
             )}
             <div className="settings__options">
-              <Toggle field={form.$('isNotificationEnabled')} />
-              {recipe.hasIndirectMessages && (
-                <div>
-                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                  <p className="settings__help">
-                    {intl.formatMessage(messages.indirectMessageInfo)}
-                  </p>
-                </div>
-              )}
-              <Toggle field={form.$('isMuted')} />
-              <p className="settings__help">
-                {intl.formatMessage(messages.isMutedInfo)}
-              </p>
-              <Toggle field={form.$('isEnabled')} />
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                <Toggle field={form.$('isNotificationEnabled')} />
+                <Toggle field={form.$('isMuted')} />
+                <p className="settings__help">
+                  {intl.formatMessage(messages.isMutedInfo)}
+                </p>
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                <Toggle field={form.$('isBadgeEnabled')} />
+                {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
+                  <div>
+                    <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                    <p className="settings__help">
+                      {intl.formatMessage(messages.indirectMessageInfo)}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                <Toggle field={form.$('isEnabled')} />
+              </div>
             </div>
             {recipe.message && (
               <p className="settings__message">
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 878e46d6d..ff398aa33 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -64,10 +64,6 @@ const messages = defineMessages({
     id: 'settings.app.currentVersion',
     defaultMessage: '!!!Current version:',
   },
-  restartRequired: {
-    id: 'settings.app.restartRequired',
-    defaultMessage: '!!!Changes require restart',
-  },
 });
 
 @observer
@@ -158,7 +154,6 @@ export default class EditSettingsForm extends Component {
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
-            <p className="settings__help">{intl.formatMessage(messages.restartRequired)}</p>
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
 
             {/* Updates */}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 191ef447b..3c52152b1 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -26,6 +26,10 @@ const messages = defineMessages({
     id: 'settings.service.form.enableNotification',
     defaultMessage: '!!!Enable Notifications',
   },
+  enableBadge: {
+    id: 'settings.service.form.enableBadge',
+    defaultMessage: '!!!Show unread message badges',
+  },
   enableAudio: {
     id: 'settings.service.form.enableAudio',
     defaultMessage: '!!!Enable audio',
@@ -88,6 +92,11 @@ export default class EditServiceScreen extends Component {
           value: service.isNotificationEnabled,
           default: true,
         },
+        isBadgeEnabled: {
+          label: intl.formatMessage(messages.enableBadge),
+          value: service.isBadgeEnabled,
+          default: true,
+        },
         isMuted: {
           label: intl.formatMessage(messages.enableAudio),
           value: !service.isMuted,
@@ -118,11 +127,22 @@ export default class EditServiceScreen extends Component {
       });
     }
 
+    // More fine grained and use case specific validation rules
     if (recipe.hasTeamId && recipe.hasCustomUrl) {
       config.fields.team.validate = [oneRequired(['team', 'customUrl'])];
       config.fields.customUrl.validate = [url, oneRequired(['team', 'customUrl'])];
     }
 
+    // If a service can be hosted and has a teamId or customUrl
+    if (recipe.hasHostedOption && (recipe.hasTeamId || recipe.hasCustomUrl)) {
+      if (config.fields.team) {
+        config.fields.team.validate = [];
+      }
+      if (config.fields.customUrl) {
+        config.fields.customUrl.validate = [url];
+      }
+    }
+
     if (recipe.hasIndirectMessages) {
       Object.assign(config.fields, {
         isIndirectMessageBadgeEnabled: {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 48b408e59..567537d75 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -110,6 +110,7 @@
   "settings.service.form.editServiceHeadline": "Edit {name}",
   "settings.service.form.tabHosted": "Hosted",
   "settings.service.form.tabOnPremise": "Self hosted ⭐️",
+  "settings.service.form.useHostedService": "Use the hosted {name} service.",
   "settings.service.form.customUrlValidationError": "Could not validate custom {name} server.",
   "settings.service.form.customUrlPremiumInfo": "To add self hosted services, you need a Franz Premium Supporter Account.",
   "settings.service.form.customUrlUpgradeAccount": "Upgrade your account",
@@ -117,11 +118,15 @@
   "settings.service.form.name": "Name",
   "settings.service.form.enableService": "Enable service",
   "settings.service.form.enableNotification": "Enable notifications",
+  "settings.service.form.enableBadge": "Show unread message badges",
   "settings.service.form.team": "Team",
   "settings.service.form.customUrl": "Custom server",
   "settings.service.form.indirectMessages": "Show message badge for all new messages",
   "settings.service.form.enableAudio": "Enable audio",
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
+  "settings.service.form.headlineNotifications": "Notifications",
+  "settings.service.form.headlineBadges": "Unread message badges",
+  "settings.service.form.headlineGeneral": "General",
   "settings.service.error.headline": "Error",
   "settings.service.error.goBack": "Back to services",
   "settings.service.error.message": "Could not load service recipe.",
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index d9c30466b..d01666d49 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -167,7 +167,7 @@ export default class FranzMenu {
             label: 'Settings',
             accelerator: 'CmdOrCtrl+,',
             click: () => {
-              this.actions.ui.openSettings({ path: '' });
+              this.actions.ui.openSettings({ path: 'app' });
             },
           },
           {
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index 9971df77c..1fc23ac89 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -1,10 +1,11 @@
 import emailParser from 'address-rfc2822';
+import semver from 'semver';
 
 export default class Recipe {
   id = '';
   name = '';
   description = '';
-  version = '1.0';
+  version = '';
   path = '';
 
   serviceURL = '';
@@ -15,6 +16,7 @@ export default class Recipe {
   hasTeamId = false;
   hasPredefinedUrl = false;
   hasCustomUrl = false;
+  hasHostedOption = false;
   urlInputPrefix = '';
   urlInputSuffix = '';
 
@@ -30,6 +32,10 @@ export default class Recipe {
       throw Error(`Recipe '${data.name}' requires Id`);
     }
 
+    if (!semver.valid(data.version)) {
+      throw Error(`Version ${data.version} of recipe '${data.name}' is not a valid semver version`);
+    }
+
     this.id = data.id || this.id;
     this.name = data.name || this.name;
     this.rawAuthor = data.author || this.author;
@@ -45,6 +51,7 @@ export default class Recipe {
     this.hasTeamId = data.config.hasTeamId || this.hasTeamId;
     this.hasPredefinedUrl = data.config.hasPredefinedUrl || this.hasPredefinedUrl;
     this.hasCustomUrl = data.config.hasCustomUrl || this.hasCustomUrl;
+    this.hasHostedOption = data.config.hasHostedOption || this.hasHostedOption;
 
     this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix;
     this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix;
diff --git a/src/models/Service.js b/src/models/Service.js
index 958e4b11e..0b19440e7 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -22,6 +22,7 @@ export default class Service {
   @observable team = '';
   @observable customUrl = '';
   @observable isNotificationEnabled = true;
+  @observable isBadgeEnabled = true;
   @observable isIndirectMessageBadgeEnabled = true;
   @observable customIconUrl = '';
   @observable hasCrashed = false;
@@ -52,6 +53,9 @@ export default class Service {
     this.isNotificationEnabled = data.isNotificationEnabled !== undefined
       ? data.isNotificationEnabled : this.isNotificationEnabled;
 
+    this.isBadgeEnabled = data.isBadgeEnabled !== undefined
+      ? data.isBadgeEnabled : this.isBadgeEnabled;
+
     this.isIndirectMessageBadgeEnabled = data.isIndirectMessageBadgeEnabled !== undefined
       ? data.isIndirectMessageBadgeEnabled : this.isIndirectMessageBadgeEnabled;
 
diff --git a/src/models/Settings.js b/src/models/Settings.js
index 35bfe0d05..ca44da258 100644
--- a/src/models/Settings.js
+++ b/src/models/Settings.js
@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { observable, extendObservable } from 'mobx';
 import { DEFAULT_APP_SETTINGS } from '../config';
 
 export default class Settings {
@@ -17,4 +17,8 @@ export default class Settings {
   constructor(data) {
     Object.assign(this, data);
   }
+
+  update(data) {
+    extendObservable(this, data);
+  }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index b04aafd78..66f37af26 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -297,7 +297,7 @@ export default class ServicesStore extends Store {
       });
     } else if (channel === 'notification') {
       const options = args[0].options;
-      if (service.recipe.hasNotificationSound || service.isMuted) {
+      if (service.recipe.hasNotificationSound || service.isMuted || this.stores.settings.all.isAppMuted) {
         Object.assign(options, {
           silent: true,
         });
@@ -491,13 +491,13 @@ export default class ServicesStore extends Store {
     const showMessageBadgeWhenMuted = this.stores.settings.all.showMessageBadgeWhenMuted;
     const showMessageBadgesEvenWhenMuted = this.stores.ui.showMessageBadgesEvenWhenMuted;
 
-    const unreadDirectMessageCount = this.enabled
-      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted)
+    const unreadDirectMessageCount = this.allDisplayed
+      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
       .map(s => s.unreadDirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
-    const unreadIndirectMessageCount = this.enabled
-      .filter(s => (showMessageBadgeWhenMuted || s.isIndirectMessageBadgeEnabled) && showMessageBadgesEvenWhenMuted)
+    const unreadIndirectMessageCount = this.allDisplayed
+      .filter(s => (showMessageBadgeWhenMuted || s.isIndirectMessageBadgeEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
       .map(s => s.unreadIndirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index 33473f16d..da99a720f 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -26,7 +26,7 @@ export default class SettingsStore extends Store {
   }
 
   @computed get all() {
-    return this.allSettingsRequest.result || new SettingsModel();
+    return new SettingsModel(this.allSettingsRequest.result);
   }
 
   @action async _update({ settings }) {
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
index aa3c8594b..47dfea2c4 100644
--- a/src/styles/content-tabs.scss
+++ b/src/styles/content-tabs.scss
@@ -12,15 +12,17 @@
       flex: 1;
       // border: 1px solid $theme-gray-lightest;
       color: $theme-gray-dark;
-      background: $theme-gray-lightest;
-      border-bottom: 1px solid $theme-gray-lighter;
-      box-shadow: inset 0px -3px 10px rgba(black, 0.05);
-      transition: all $theme-transition-time;
+      background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%));
+      border-right: 1px solid $theme-gray-lighter;
+      transition: background $theme-transition-time;
+
+      &:last-of-type {
+        border-right: 0;
+      }
 
       &.is-active {
         background: $theme-brand-primary;
         color: #FFF;
-        border-bottom: 1px solid $theme-brand-primary;
         box-shadow: none;
       }
     }
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 814dce5f8..7042f56e8 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -47,6 +47,10 @@
     padding: 8px;
     // font-size: 18px;
     color: $theme-gray;
+
+    &::placeholder {
+      color: lighten($theme-gray-light, 10%);
+    }
   }
 
   .franz-form__input-prefix,
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 73cef0813..b29ed5468 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -151,8 +151,23 @@
     }
   }
 
-  .settings__options {
-    margin-top: 30px;
+  &__options {
+    margin-top: 20px;
+  }
+
+  &__settings-group {
+    margin-top: 10px;
+
+    h3 {
+      font-weight: bold;
+      margin: 25px 0 15px;
+      color: $theme-gray-light;
+      letter-spacing: -0.1px;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
   }
 
   .settings__message {
@@ -173,10 +188,6 @@
     margin: -10px 0 20px 55px;;
     font-size: 12px;
     color: $theme-gray-light;
-
-    &:last-of-type {
-      margin-bottom: 30px;
-    }
   }
 
   .settings__controls {
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
index e2daf09dd..9903ee07a 100644
--- a/src/webview/plugin.js
+++ b/src/webview/plugin.js
@@ -1,13 +1,13 @@
 import { ipcRenderer } from 'electron';
+import { ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
 import path from 'path';
 
+import { isDevMode } from '../environment';
 import RecipeWebview from './lib/RecipeWebview';
 
 import Spellchecker from './spellchecker.js';
 import './notifications.js';
 
-const spellchecker = new Spellchecker();
-
 ipcRenderer.on('initializeRecipe', (e, data) => {
   const modulePath = path.join(data.recipe.path, 'webview.js');
   // Delete module from cache
@@ -20,20 +20,22 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   }
 });
 
+const spellchecker = new Spellchecker();
+spellchecker.initialize();
+
+const contextMenuBuilder = new ContextMenuBuilder(spellchecker.handler, null, isDevMode);
+
+new ContextMenuListener((info) => { // eslint-disable-line
+  contextMenuBuilder.showPopupMenu(info);
+});
+
 ipcRenderer.on('settings-update', (e, data) => {
-  if (data.enableSpellchecking) {
-    if (!spellchecker.isEnabled) {
-      spellchecker.enable();
-
-      // TODO: this does not work yet, needs more testing
-      // if (data.spellcheckingLanguage !== 'auto') {
-      //   console.log('set spellchecking language to', data.spellcheckingLanguage);
-      //   spellchecker.switchLanguage(data.spellcheckingLanguage);
-      // }
-    }
-  }
+  console.log('settings-update', data);
+  spellchecker.toggleSpellchecker(data.enableSpellchecking);
 });
 
+// initSpellche
+
 document.addEventListener('DOMContentLoaded', () => {
   ipcRenderer.sendToHost('hello');
 }, false);
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 5beb77e03..a504a4039 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,30 +1,63 @@
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
+import { SpellCheckHandler } from 'electron-spellchecker';
 
 import { isMac } from '../environment';
 
 export default class Spellchecker {
-  isEnabled = false;
-  spellchecker = null;
+  isInitialized = false;
+  handler = null;
+  initRetries = 0;
+  DOMCheckInterval = null;
+
+  get inputs() {
+    return document.querySelectorAll('input[type="text"], [contenteditable="true"], textarea');
+  }
+
+  initialize() {
+    this.handler = new SpellCheckHandler();
 
-  enable() {
-    this.spellchecker = new SpellCheckHandler();
     if (!isMac) {
-      this.spellchecker.attachToInput();
-      this.spellchecker.switchLanguage(navigator.language);
+      this.attach();
+    } else {
+      this.isInitialized = true;
+    }
+  }
+
+  attach() {
+    let initFailed = false;
+
+    if (this.initRetries > 3) {
+      console.error('Could not initialize spellchecker');
+      return;
     }
 
-    const contextMenuBuilder = new ContextMenuBuilder(this.spellchecker);
+    try {
+      this.handler.attachToInput();
+      this.handler.switchLanguage(navigator.language);
+    } catch (err) {
+      initFailed = true;
+      this.initRetries = +1;
+      setTimeout(() => { this.attach(); console.warn('Spellchecker init failed, trying again in 5s'); }, 5000);
+    }
 
-    new ContextMenuListener((info) => { // eslint-disable-line
-      contextMenuBuilder.showPopupMenu(info);
+    if (!initFailed) {
+      this.isInitialized = true;
+    }
+  }
+
+  toggleSpellchecker(enable = false) {
+    this.inputs.forEach((input) => {
+      input.setAttribute('spellcheck', enable);
     });
+
+    this.intervalHandler(enable);
   }
 
-  // TODO: this does not work yet, needs more testing
-  // switchLanguage(language) {
-  //   if (language !== 'auto') {
-  //     this.spellchecker.switchLanguage(language);
-  //   }
-  // }
+  intervalHandler(enable) {
+    clearInterval(this.DOMCheckInterval);
+
+    if (enable) {
+      this.DOMCheckInterval = setInterval(() => this.toggleSpellchecker(enable), 30000);
+    }
+  }
 }