Merge branch 'develop'v5.0.0-beta.23

23 files changed, 486 insertions, 66 deletions

diff --git a/src/app.js b/src/app.js
index 831dd93ce..6660feb46 100644
--- a/src/app.js
+++ b/src/app.js
@@ -62,6 +62,7 @@ window.addEventListener('load', () => {
     menu,
     touchBar,
     analytics,
+    features: {},
     render() {
       const preparedApp = (
         <Provider stores={stores} actions={actions}>
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index dbe0bb4b6..28eaa7fdc 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,6 +6,7 @@ import { TitleBar } from 'electron-react-titlebar';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as DelayApp } from '../../features/delayApp';
+import { Component as BasicAuth } from '../../features/basicAuth';
 import ErrorBoundary from '../util/ErrorBoundary';
 
 import globalMessages from '../../i18n/globalMessages';
@@ -161,6 +162,7 @@ export default @observer class AppLayout extends Component {
                   </InfoBar>
                 )}
                 {isDelayAppScreenVisible && (<DelayApp />)}
+                <BasicAuth />
                 {services}
               </div>
             </div>
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
new file mode 100644
index 000000000..d84e4c713
--- /dev/null
+++ b/src/components/ui/Modal/index.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import ReactModal from 'react-modal';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import injectCSS from 'react-jss';
+
+import styles from './styles';
+
+export default @injectCSS(styles) class Modal extends Component {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+    isOpen: PropTypes.bool.isRequired,
+    portal: PropTypes.string,
+    close: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    className: null,
+    portal: 'modal-portal',
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      classes,
+      isOpen,
+      portal,
+      close,
+    } = this.props;
+
+    return (
+      <ReactModal
+        isOpen={isOpen}
+        className={classnames({
+          [`${classes.modal}`]: true,
+          [`${className}`]: className,
+        })}
+        portalClassName={classes.component}
+        overlayClassName={classes.overlay}
+        portal={portal}
+        onRequestClose={close}
+      >
+        {/* <button
+          type="button"
+          className={classnames({
+            [`${classes.close}`]: true,
+            'mdi mdi-close': true,
+          })}
+        /> */}
+        <div className={classes.content}>
+          {children}
+        </div>
+      </ReactModal>
+    );
+  }
+}
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
new file mode 100644
index 000000000..56fecbf55
--- /dev/null
+++ b/src/components/ui/Modal/styles.js
@@ -0,0 +1,32 @@
+export default theme => ({
+  component: {
+    zIndex: 500,
+    position: 'absolute',
+  },
+  overlay: {
+    background: theme.colorModalOverlayBackground,
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: 'flex',
+  },
+  modal: {
+    background: '#FFF',
+    maxWidth: '90%',
+    height: 'auto',
+    margin: 'auto auto',
+    borderRadius: 6,
+    boxShadow: '0px 13px 40px 0px rgba(0,0,0,0.2)',
+    position: 'relative',
+  },
+  content: {
+    padding: 20,
+  },
+  close: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+});
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 019b3d7d6..d681d5226 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -14,6 +14,14 @@ import ErrorBoundary from '../../components/util/ErrorBoundary';
 const { BrowserWindow } = remote;
 
 export default @inject('stores', 'actions') @observer class AccountScreen extends Component {
+  componentWillMount() {
+    const {
+      user,
+    } = this.props.stores;
+
+    user.getUserInfoRequest.invalidate({ immediately: true });
+  }
+
   componentDidMount() {
     gaPage('Settings/Account Dashboard');
   }
diff --git a/src/electron/ipc-api/settings.js b/src/electron/ipc-api/settings.js
index ce006bb92..b651db306 100644
--- a/src/electron/ipc-api/settings.js
+++ b/src/electron/ipc-api/settings.js
@@ -2,7 +2,6 @@ import { ipcMain } from 'electron';
 
 export default (params) => {
   ipcMain.on('getAppSettings', (event, type) => {
-    console.log('getAppSettings', type, params.settings[type].all);
     params.mainWindow.webContents.send('appSettings', {
       type,
       data: params.settings[type].all,
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
new file mode 100644
index 000000000..13395fb40
--- /dev/null
+++ b/src/features/basicAuth/Component.js
@@ -0,0 +1,102 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import injectSheet from 'react-jss';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import Modal from '../../components/ui/Modal';
+import Input from '../../components/ui/Input';
+import Button from '../../components/ui/Button';
+
+import {
+  state,
+  resetState,
+  sendCredentials,
+  cancelLogin,
+} from '.';
+import Form from './Form';
+
+import styles from './styles';
+
+export default @injectSheet(styles) @observer class BasicAuthModal extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  }
+
+  submit(e) {
+    e.preventDefault();
+
+    const values = Form.values();
+    console.log('form submit', values);
+
+    sendCredentials(values.user, values.password);
+    resetState();
+  }
+
+  cancel() {
+    cancelLogin();
+    this.close();
+  }
+
+  close() {
+    resetState();
+    state.isModalVisible = false;
+  }
+
+  render() {
+    const {
+      classes,
+    } = this.props;
+
+    const {
+      isModalVisible,
+      authInfo,
+    } = state;
+
+    if (!authInfo) {
+      return null;
+    }
+
+    return (
+      <Modal
+        isOpen={isModalVisible}
+        className={classes.modal}
+        close={this.cancel.bind(this)}
+      >
+        <h1>Sign in</h1>
+        <p>
+          http
+          {authInfo.port === 443 && 's'}
+          ://
+          {authInfo.host}
+        </p>
+        <form
+          onSubmit={this.submit.bind(this)}
+          className={classnames('franz-form', classes.form)}
+        >
+          <Input
+            field={Form.$('user')}
+            showLabel={false}
+          />
+          <Input
+            field={Form.$('password')}
+            showLabel={false}
+            showPasswordToggle
+          />
+          <div className={classes.buttons}>
+            <Button
+              type="button"
+              label="Cancel"
+              buttonType="secondary"
+              onClick={this.cancel.bind(this)}
+            />
+            <Button
+              type="submit"
+              label="Sign In"
+            />
+          </div>
+        </form>
+      </Modal>
+    );
+  }
+}
diff --git a/src/features/basicAuth/Form.js b/src/features/basicAuth/Form.js
new file mode 100644
index 000000000..95721d0e9
--- /dev/null
+++ b/src/features/basicAuth/Form.js
@@ -0,0 +1,17 @@
+import Form from '../../lib/Form';
+
+export default new Form({
+  fields: {
+    user: {
+      label: 'user',
+      placeholder: 'Username',
+      value: '',
+    },
+    password: {
+      label: 'Password',
+      placeholder: 'Password',
+      value: '',
+      type: 'password',
+    },
+  },
+});
diff --git a/src/features/basicAuth/index.js b/src/features/basicAuth/index.js
new file mode 100644
index 000000000..03269582c
--- /dev/null
+++ b/src/features/basicAuth/index.js
@@ -0,0 +1,68 @@
+import { ipcRenderer } from 'electron';
+import { observable } from 'mobx';
+
+import BasicAuthComponent from './Component';
+
+const debug = require('debug')('Franz:feature:basicAuth');
+
+const defaultState = {
+  isModalVisible: false,
+  service: null,
+  authInfo: null,
+};
+
+export const state = observable(defaultState);
+
+export function resetState() {
+  Object.assign(state, defaultState);
+  console.log('reset state', state);
+}
+
+export default function initialize() {
+  debug('Initialize basicAuth feature');
+
+  window.franz.features.basicAuth = {
+    state,
+  };
+
+  ipcRenderer.on('feature:basic-auth-request', (e, data) => {
+    debug(e, data);
+    // state.serviceId = data.serviceId;
+    state.authInfo = data.authInfo;
+    state.isModalVisible = true;
+  });
+
+  // autorun(() => {
+  //   // if (state.serviceId) {
+  //   // const service = stores.services.one(state.serviceId);
+  //   // if (service) {
+  //   //   state.service = service;
+  //   // }
+  //   // }
+  // });
+}
+
+export function mainIpcHandler(mainWindow, authInfo) {
+  debug('Sending basic auth call', authInfo);
+
+  mainWindow.webContents.send('feature:basic-auth-request', {
+    authInfo,
+  });
+}
+
+export function sendCredentials(user, password) {
+  debug('Sending credentials to main', user, password);
+
+  ipcRenderer.send('feature-basic-auth-credentials', {
+    user,
+    password,
+  });
+}
+
+export function cancelLogin() {
+  debug('Cancel basic auth event');
+
+  ipcRenderer.send('feature-basic-auth-cancel');
+}
+
+export const Component = BasicAuthComponent;
diff --git a/src/features/basicAuth/mainIpcHandler.js b/src/features/basicAuth/mainIpcHandler.js
new file mode 100644
index 000000000..87ac0b6df
--- /dev/null
+++ b/src/features/basicAuth/mainIpcHandler.js
@@ -0,0 +1,9 @@
+const debug = require('debug')('Franz:feature:basicAuth:main');
+
+export default function mainIpcHandler(mainWindow, authInfo) {
+  debug('Sending basic auth call', authInfo);
+
+  mainWindow.webContents.send('feature:basic-auth', {
+    authInfo,
+  });
+}
diff --git a/src/features/basicAuth/styles.js b/src/features/basicAuth/styles.js
new file mode 100644
index 000000000..6bdaf9a6e
--- /dev/null
+++ b/src/features/basicAuth/styles.js
@@ -0,0 +1,12 @@
+export default {
+  modal: {
+    width: 300,
+  },
+  buttons: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  form: {
+    marginTop: 15,
+  },
+};
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index 6e0532c9a..ff84510e8 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -4,6 +4,8 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 
+import { gaEvent } from '../../lib/analytics';
+
 import Button from '../../components/ui/Button';
 
 import { config } from '.';
@@ -59,8 +61,16 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
     clearInterval(this.countdownInterval);
   }
 
+  handleCTAClick() {
+    const { actions } = this.props;
+
+    actions.ui.openSettings({ path: 'user' });
+
+    gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+  }
+
   render() {
-    const { classes, actions } = this.props;
+    const { classes } = this.props;
     const { intl } = this.context;
 
     return (
@@ -70,7 +80,7 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
           label={intl.formatMessage(messages.action)}
           className={classes.button}
           buttonType="inverted"
-          onClick={() => actions.ui.openSettings({ path: 'user' })}
+          onClick={this.handleCTAClick.bind(this)}
         />
         <p className="footnote">
           {intl.formatMessage(messages.text, {
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index d5c544b78..28aa50eb2 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -3,6 +3,7 @@ import moment from 'moment';
 import DelayAppComponent from './Component';
 
 import { DEFAULT_FEATURES_CONFIG } from '../../config';
+import { gaEvent } from '../../lib/analytics';
 
 const debug = require('debug')('Franz:feature:delayApp');
 
@@ -22,19 +23,18 @@ function setVisibility(value) {
 }
 
 export default function init(stores) {
-  reaction(
-    () => stores.features.features.needToWaitToProceed,
-    (enabled, r) => {
-      if (enabled) {
-        debug('Initializing `delayApp` feature');
+  debug('Initializing `delayApp` feature');
 
-        // Dispose the reaction to run this only once
-        r.dispose();
+  let shownAfterLaunch = false;
+  let timeLastDelay = moment();
 
-        const { needToWaitToProceedConfig: globalConfig } = stores.features.features;
+  reaction(
+    () => stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Enabling `delayApp` feature');
 
-        let shownAfterLaunch = false;
-        let timeLastDelay = moment();
+        const { needToWaitToProceedConfig: globalConfig } = stores.features.features;
 
         config.delayOffset = globalConfig.delayOffset !== undefined ? globalConfig.delayOffset : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.delayOffset;
         config.delayDuration = globalConfig.wait !== undefined ? globalConfig.wait : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait;
@@ -50,6 +50,7 @@ export default function init(stores) {
             debug(`App will be delayed for ${config.delayDuration / 1000}s`);
 
             setVisibility(true);
+            gaEvent('delayApp', 'show', 'Delay App Feature');
 
             timeLastDelay = moment();
             shownAfterLaunch = true;
@@ -61,6 +62,8 @@ export default function init(stores) {
             }, DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait + 1000); // timer needs to be able to hit 0
           }
         });
+      } else {
+        setVisibility(false);
       }
     },
   );
diff --git a/src/helpers/password-helpers.js b/src/helpers/password-helpers.js
index 7aacaa4d0..cf461e4f7 100644
--- a/src/helpers/password-helpers.js
+++ b/src/helpers/password-helpers.js
@@ -1,7 +1,7 @@
-import { SHA256 } from 'jshashes';
+import crypto from 'crypto';
 
 export function hash(password) {
-  return new SHA256().b64(password);
+  return crypto.createHash('sha256').update(password).digest('base64');
 }
 
 export function scorePassword(password) {
diff --git a/src/index.js b/src/index.js
index 830166dcf..f34df8c17 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,8 @@
 import {
-  app, BrowserWindow, shell, ipcMain,
+  app,
+  BrowserWindow,
+  shell,
+  ipcMain,
 } from 'electron';
 
 import fs from 'fs-extra';
@@ -7,9 +10,14 @@ import path from 'path';
 import windowStateKeeper from 'electron-window-state';
 
 import {
-  isDevMode, isMac, isWindows, isLinux,
+  isDevMode,
+  isMac,
+  isWindows,
+  isLinux,
 } from './environment';
 
+import { mainIpcHandler as basicAuthHandler } from './features/basicAuth';
+
 // DEV MODE: Save user data into FranzDev
 if (isDevMode) {
   app.setPath('userData', path.join(app.getPath('appData'), 'FranzDev'));
@@ -46,35 +54,69 @@ if (isWindows) {
 }
 
 // Force single window
-const isSecondInstance = app.makeSingleInstance((argv) => {
-  if (mainWindow) {
-    if (mainWindow.isMinimized()) mainWindow.restore();
-    mainWindow.focus();
+const gotTheLock = app.requestSingleInstanceLock();
+if (!gotTheLock) {
+  app.quit();
+} else {
+  app.on('second-instance', (event, argv) => {
+    // Someone tried to run a second instance, we should focus our window.
+    if (mainWindow) {
+      if (mainWindow.isMinimized()) mainWindow.restore();
+      mainWindow.focus();
 
-    if (process.platform === 'win32') {
-      // Keep only command line / deep linked arguments
-      const url = argv.slice(1);
+      if (isWindows) {
+        // Keep only command line / deep linked arguments
+        const url = argv.slice(1);
 
-      if (url) {
-        handleDeepLink(mainWindow, url.toString());
+        if (url) {
+          handleDeepLink(mainWindow, url.toString());
+        }
       }
-    }
-  }
 
-  if (argv.includes('--reset-window')) {
-    // Needs to be delayed to not interfere with mainWindow.restore();
-    setTimeout(() => {
-      debug('Resetting windows via Task');
-      mainWindow.setPosition(DEFAULT_WINDOW_OPTIONS.x + 100, DEFAULT_WINDOW_OPTIONS.y + 100);
-      mainWindow.setSize(DEFAULT_WINDOW_OPTIONS.width, DEFAULT_WINDOW_OPTIONS.height);
-    }, 1);
-  }
-});
+      if (argv.includes('--reset-window')) {
+        // Needs to be delayed to not interfere with mainWindow.restore();
+        setTimeout(() => {
+          debug('Resetting windows via Task');
+          mainWindow.setPosition(DEFAULT_WINDOW_OPTIONS.x + 100, DEFAULT_WINDOW_OPTIONS.y + 100);
+          mainWindow.setSize(DEFAULT_WINDOW_OPTIONS.width, DEFAULT_WINDOW_OPTIONS.height);
+        }, 1);
+      }
+    }
+  });
 
-if (isSecondInstance) {
-  console.log('An instance of Franz is already running. Exiting...');
-  app.exit();
+  // Create myWindow, load the rest of the app, etc...
+  app.on('ready', () => {
+  });
 }
+// const isSecondInstance = app.makeSingleInstance((argv) => {
+//   if (mainWindow) {
+//     if (mainWindow.isMinimized()) mainWindow.restore();
+//     mainWindow.focus();
+
+//     if (process.platform === 'win32') {
+//       // Keep only command line / deep linked arguments
+//       const url = argv.slice(1);
+
+//       if (url) {
+//         handleDeepLink(mainWindow, url.toString());
+//       }
+//     }
+//   }
+
+//   if (argv.includes('--reset-window')) {
+//     // Needs to be delayed to not interfere with mainWindow.restore();
+//     setTimeout(() => {
+//       debug('Resetting windows via Task');
+//       mainWindow.setPosition(DEFAULT_WINDOW_OPTIONS.x + 100, DEFAULT_WINDOW_OPTIONS.y + 100);
+//       mainWindow.setSize(DEFAULT_WINDOW_OPTIONS.width, DEFAULT_WINDOW_OPTIONS.height);
+//     }, 1);
+//   }
+// });
+
+// if (isSecondInstance) {
+//   console.log('An instance of Franz is already running. Exiting...');
+//   app.exit();
+// }
 
 // Fix Unity indicator issue
 // https://github.com/electron/electron/issues/9046
@@ -119,6 +161,9 @@ const createWindow = () => {
     titleBarStyle: isMac ? 'hidden' : '',
     frame: isLinux,
     backgroundColor: !settings.get('darkMode') ? '#3498db' : '#1E1E1E',
+    webPreferences: {
+      nodeIntegration: true,
+    },
   });
 
   // Initialize System Tray
@@ -229,23 +274,43 @@ app.on('ready', () => {
 });
 
 // This is the worst possible implementation as the webview.webContents based callback doesn't work 🖕
+// TODO: rewrite to handle multiple login calls
+const noop = () => null;
+let authCallback = noop;
 app.on('login', (event, webContents, request, authInfo, callback) => {
-  event.preventDefault();
+  authCallback = callback;
   debug('browser login event', authInfo);
+  event.preventDefault();
   if (authInfo.isProxy && authInfo.scheme === 'basic') {
     webContents.send('get-service-id');
 
-    ipcMain.on('service-id', (e, id) => {
+    ipcMain.once('service-id', (e, id) => {
       debug('Received service id', id);
 
       const ps = proxySettings.get(id);
       callback(ps.user, ps.password);
     });
-  } else {
-    // TODO: implement basic auth
+  } else if (authInfo.scheme === 'basic') {
+    debug('basic auth handler', authInfo);
+    basicAuthHandler(mainWindow, authInfo);
   }
 });
 
+// TODO: evaluate if we need to store the authCallback for every service
+ipcMain.on('feature-basic-auth-credentials', (e, { user, password }) => {
+  debug('Received basic auth credentials', user, '********');
+
+  authCallback(user, password);
+  authCallback = noop;
+});
+
+ipcMain.on('feature-basic-auth-cancel', () => {
+  debug('Cancel basic auth');
+
+  authCallback(null);
+  authCallback = noop;
+});
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
   // On OS X it is common for applications and their menu bar
diff --git a/src/lib/analytics.js b/src/lib/analytics.js
index 8b9a44579..7044e5bb7 100644
--- a/src/lib/analytics.js
+++ b/src/lib/analytics.js
@@ -1,6 +1,5 @@
 import { remote } from 'electron';
 import { GA_ID } from '../config';
-// import { isDevMode } from '../environment';
 
 const debug = require('debug')('Franz:Analytics');
 
@@ -36,7 +35,7 @@ export function gaPage(page) {
 export function gaEvent(category, action, label) {
   ga('send', 'event', category, action, label);
 
-  debug('GA track page', category, action);
+  debug('GA track event', category, action);
 }
 
 setTimeout(() => {
diff --git a/src/models/Service.js b/src/models/Service.js
index cb66676d4..eee8df8ca 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -114,6 +114,13 @@ export default class Service {
     });
   }
 
+  @computed get shareWithWebview() {
+    return {
+      spellcheckerLanguage: this.spellcheckerLanguage,
+      isDarkModeEnabled: this.isDarkModeEnabled,
+    };
+  }
+
   @computed get url() {
     if (this.recipe.hasCustomUrl && this.customUrl) {
       let url;
@@ -162,14 +169,14 @@ export default class Service {
     return userAgent;
   }
 
-  initializeWebViewEvents(store) {
-    this.webview.addEventListener('ipc-message', e => store.actions.service.handleIPCMessage({
+  initializeWebViewEvents({ handleIPCMessage, openWindow }) {
+    this.webview.addEventListener('ipc-message', e => handleIPCMessage({
       serviceId: this.id,
       channel: e.channel,
       args: e.args,
     }));
 
-    this.webview.addEventListener('new-window', (event, url, frameName, options) => store.actions.service.openWindow({
+    this.webview.addEventListener('new-window', (event, url, frameName, options) => openWindow({
       event,
       url,
       frameName,
@@ -182,17 +189,20 @@ export default class Service {
       this.isError = false;
     });
 
-    this.webview.addEventListener('did-frame-finish-load', () => {
+    const didLoad = () => {
       this.isLoading = false;
 
       if (!this.isError) {
         this.isFirstLoad = false;
       }
-    });
+    };
+
+    this.webview.addEventListener('did-frame-finish-load', didLoad.bind(this));
+    this.webview.addEventListener('did-navigate', didLoad.bind(this));
 
     this.webview.addEventListener('did-fail-load', (event) => {
       debug('Service failed to load', this.name, event);
-      if (event.isMainFrame) {
+      if (event.isMainFrame && event.errorCode !== -27 && event.errorCode !== -3) {
         this.isError = true;
         this.errorMessage = event.errorDescription;
         this.isLoading = false;
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 2a0713b6f..0adee6adf 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -1,4 +1,4 @@
-import { computed, observable } from 'mobx';
+import { computed, observable, reaction } from 'mobx';
 
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
@@ -6,6 +6,7 @@ import CachedRequest from './lib/CachedRequest';
 import delayApp from '../features/delayApp';
 import spellchecker from '../features/spellchecker';
 import serviceProxy from '../features/serviceProxy';
+import basicAuth from '../features/basicAuth';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -21,6 +22,13 @@ export default class FeaturesStore extends Store {
 
     await this.featuresRequest._promise;
     setTimeout(this._enableFeatures.bind(this), 1);
+
+    // single key reaction
+    reaction(() => this.stores.user.data.isPremium, () => {
+      if (this.stores.user.isLoggedIn) {
+        this.featuresRequest.invalidate({ immediately: true });
+      }
+    });
   }
 
   @computed get anonymousFeatures() {
@@ -47,5 +55,6 @@ export default class FeaturesStore extends Store {
     delayApp(this.stores, this.actions);
     spellchecker(this.stores, this.actions);
     serviceProxy(this.stores, this.actions);
+    basicAuth(this.stores, this.actions);
   }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index a618da547..f79197c38 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -1,5 +1,8 @@
 import {
-  action, reaction, computed, observable,
+  action,
+  reaction,
+  computed,
+  observable,
 } from 'mobx';
 import { debounce, remove } from 'lodash';
 
@@ -324,7 +327,11 @@ export default class ServicesStore extends Store {
     service.webview = webview;
 
     if (!service.isAttached) {
-      service.initializeWebViewEvents(this);
+      debug('Webview is not attached, initializing');
+      service.initializeWebViewEvents({
+        handleIPCMessage: this.actions.service.handleIPCMessage,
+        openWindow: this.actions.service.openWindow,
+      });
       service.initializeWebViewListener();
     }
 
@@ -659,14 +666,15 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
 
     if (service.webview) {
-      service.webview.send('initialize-recipe', service);
+      debug('Initialize recipe', service.recipe.id, service.name);
+      service.webview.send('initialize-recipe', service.shareWithWebview, service.recipe);
     }
   }
 
   _initRecipePolling(serviceId) {
     const service = this.one(serviceId);
 
-    const delay = 1000;
+    const delay = 2000;
 
     if (service) {
       if (service.timer !== null) {
diff --git a/src/theme/dark/index.js b/src/theme/dark/index.js
index 2b7f780d9..8fdb321f3 100644
--- a/src/theme/dark/index.js
+++ b/src/theme/dark/index.js
@@ -14,3 +14,6 @@ export const colorWebviewErrorHandlerBackground = legacyStyles.darkThemeGrayDark
 // Loader
 export const colorFullscreenLoaderSpinner = '#FFF';
 export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.5);
+
+// Modal
+export const colorModalOverlayBackground = hexToRgba(legacyStyles.darkThemeGrayDarkest, 0.8);
diff --git a/src/theme/default/index.js b/src/theme/default/index.js
index 34e3f7265..61410073d 100644
--- a/src/theme/default/index.js
+++ b/src/theme/default/index.js
@@ -30,3 +30,6 @@ export const colorWebviewErrorHandlerBackground = legacyStyles.themeGrayLighter;
 export const colorAppLoaderSpinner = '#FFF';
 export const colorFullscreenLoaderSpinner = legacyStyles.themeGrayDark;
 export const colorWebviewLoaderBackground = hexToRgba(legacyStyles.themeGrayLighter, 0.8);
+
+// Modal
+export const colorModalOverlayBackground = hexToRgba(legacyStyles.themeGrayLighter, 0.8);
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index bd099987d..a76c03e5a 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -277,6 +277,6 @@ export default function contextMenu(spellcheckProvider, isSpellcheckEnabled, get
       ),
     );
 
-    menu.popup(remote.getCurrentWindow());
+    menu.popup();
   });
 }
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index 944883899..9aa89ce01 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -42,9 +42,9 @@ class RecipeController {
 
   async initialize() {
     Object.keys(this.ipcEvents).forEach((channel) => {
-      ipcRenderer.on(channel, (event, data) => {
-        debug('Received IPC event for channel', channel, 'with', data);
-        this[this.ipcEvents[channel]](event, data);
+      ipcRenderer.on(channel, (...args) => {
+        debug('Received IPC event for channel', channel, 'with', ...args);
+        this[this.ipcEvents[channel]](...args);
       });
     });
 
@@ -62,17 +62,18 @@ class RecipeController {
     autorun(() => this.update());
   }
 
-  loadRecipeModule(event, data) {
+  loadRecipeModule(event, config, recipe) {
     debug('loadRecipeModule');
-    const modulePath = path.join(data.recipe.path, 'webview.js');
+    const modulePath = path.join(recipe.path, 'webview.js');
+    debug('module path', modulePath);
     // Delete module from cache
     delete require.cache[require.resolve(modulePath)];
     try {
       // eslint-disable-next-line
-      require(modulePath)(new RecipeWebview(), data);
-      debug('Initialize Recipe', data);
+      require(modulePath)(new RecipeWebview(), {...config, recipe,});
+      debug('Initialize Recipe', config, recipe);
 
-      this.settings.service = data;
+      this.settings.service = config;
     } catch (err) {
       console.error('Recipe initialization failed', err);
     }