32 files changed, 525 insertions, 89 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..bce792e56 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -6,9 +6,10 @@ 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';
+// import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
 
@@ -50,7 +51,7 @@ export default @observer class AppLayout extends Component {
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
-    isOnline: PropTypes.bool.isRequired,
+    // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     removeNewsItem: PropTypes.func.isRequired,
@@ -78,7 +79,7 @@ export default @observer class AppLayout extends Component {
       sidebar,
       services,
       children,
-      isOnline,
+      // isOnline,
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
@@ -114,14 +115,15 @@ export default @observer class AppLayout extends Component {
                     <span dangerouslySetInnerHTML={createMarkup(item.message)} />
                   </InfoBar>
                 ))}
-                {!isOnline && (
+                {/* {!isOnline && (
                   <InfoBar
                     type="danger"
+                    sticky
                   >
                     <span className="mdi mdi-flash" />
                     {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
                   </InfoBar>
-                )}
+                )} */}
                 {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
                   <InfoBar
                     type="danger"
@@ -161,6 +163,7 @@ export default @observer class AppLayout extends Component {
                   </InfoBar>
                 )}
                 {isDelayAppScreenVisible && (<DelayApp />)}
+                <BasicAuth />
                 {services}
               </div>
             </div>
diff --git a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
index 415a8d1b5..37ccc8e51 100644
--- a/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
+++ b/src/components/services/content/ErrorHandlers/WebviewErrorHandler.js
@@ -31,7 +31,7 @@ const messages = defineMessages({
   },
 });
 
-export default @injectSheet(styles) @observer class WebviewCrashHandler extends Component {
+export default @injectSheet(styles) @observer class WebviewErrorHandler extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js
index f11386798..9e2509ee5 100644
--- a/src/components/services/content/ErrorHandlers/styles.js
+++ b/src/components/services/content/ErrorHandlers/styles.js
@@ -1,4 +1,4 @@
-export default {
+export default theme => ({
   component: {
     left: 0,
     position: 'absolute',
@@ -6,7 +6,7 @@ export default {
     width: '100%',
     zIndex: 0,
     alignItems: 'center',
-    // background: $theme-gray-lighter;
+    background: theme.colorWebviewErrorHandlerBackground,
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center',
@@ -22,4 +22,4 @@ export default {
       margin: [0, 10, 0, 10],
     },
   },
-};
+});
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index b1a2c0207..bb577e4cc 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -18,7 +18,6 @@ export default @observer class ServiceWebview extends Component {
     setWebviewReference: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     edit: PropTypes.func.isRequired,
-    isAppMuted: PropTypes.bool.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
   };
@@ -69,7 +68,6 @@ export default @observer class ServiceWebview extends Component {
       setWebviewReference,
       reload,
       edit,
-      isAppMuted,
       enable,
     } = this.props;
 
@@ -137,7 +135,6 @@ export default @observer class ServiceWebview extends Component {
             })}
             onUpdateTargetUrl={this.updateTargetUrl}
             useragent={service.userAgent}
-            muted={isAppMuted || service.isMuted}
             allowpopups
           />
         )}
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 1aeb17e03..54f16ba12 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -26,7 +26,6 @@ export default @observer class Services extends Component {
     openWindow: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
-    isAppMuted: PropTypes.bool.isRequired,
     update: PropTypes.func.isRequired,
   };
 
@@ -46,7 +45,6 @@ export default @observer class Services extends Component {
       openWindow,
       reload,
       openSettings,
-      isAppMuted,
       update,
     } = this.props;
     const { intl } = this.context;
@@ -81,7 +79,6 @@ export default @observer class Services extends Component {
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
             edit={() => openSettings({ path: `services/edit/${service.id}` })}
-            isAppMuted={isAppMuted}
             enable={() => update({
               serviceId: service.id,
               serviceData: {
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/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 430b49b55..749912c59 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -108,7 +108,6 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         openWindow={openWindow}
         reload={reload}
         openSettings={openSettings}
-        isAppMuted={settings.all.app.isAppMuted}
         update={updateService}
       />
     );
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/environment.js b/src/environment.js
index e1762129b..73b1c7ab2 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -1,10 +1,12 @@
+import isDev from 'electron-is-dev';
+
 import { LIVE_API, DEV_API, LOCAL_API } from './config';
 
-export const isDevMode = Boolean(process.execPath.match(/[\\/]electron/));
+export const isDevMode = isDev;
 export const useLiveAPI = process.env.LIVE_API;
 export const useLocalAPI = process.env.LOCAL_API;
 
-let platform = process.platform;
+let { platform } = process;
 if (process.env.OS_PLATFORM) {
   platform = process.env.OS_PLATFORM;
 }
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/index.js b/src/index.js
index 75da4ff88..a3c770797 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,20 +1,26 @@
 import {
-  app, BrowserWindow, shell, ipcMain,
+  app,
+  BrowserWindow,
+  shell,
+  ipcMain,
 } from 'electron';
-
+import isDevMode from 'electron-is-dev';
 import fs from 'fs-extra';
 import path from 'path';
 import windowStateKeeper from 'electron-window-state';
 
-import {
-  isDevMode, isMac, isWindows, isLinux,
-} from './environment';
-
-// DEV MODE: Save user data into FranzDev
+// Set app directory before loading user modules
 if (isDevMode) {
   app.setPath('userData', path.join(app.getPath('appData'), 'FranzDev'));
 }
+
 /* eslint-disable import/first */
+import {
+  isMac,
+  isWindows,
+  isLinux,
+} from './environment';
+import { mainIpcHandler as basicAuthHandler } from './features/basicAuth';
 import ipcApi from './electron/ipc-api';
 import Tray from './lib/Tray';
 import Settings from './electron/Settings';
@@ -36,6 +42,17 @@ const debug = require('debug')('Franz:App');
 let mainWindow;
 let willQuitApp = false;
 
+// Register methods to be called once the window has been loaded.
+let onDidLoadFns = [];
+
+function onDidLoad(fn) {
+  if (onDidLoadFns) {
+    onDidLoadFns.push(fn);
+  } else if (mainWindow) {
+    fn(mainWindow);
+  }
+}
+
 // Ensure that the recipe directory exists
 fs.emptyDirSync(path.join(app.getPath('userData'), 'recipes', 'temp'));
 fs.ensureFileSync(path.join(app.getPath('userData'), 'window-state.json'));
@@ -57,28 +74,25 @@ if (!gotTheLock) {
       mainWindow.focus();
 
       if (isWindows) {
-        // 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);
+        onDidLoad((window) => {
+          // Keep only command line / deep linked arguments
+          const url = argv.slice(1);
+          if (url) {
+            handleDeepLink(window, url.toString());
+          }
+
+          if (argv.includes('--reset-window')) {
+            // Needs to be delayed to not interfere with mainWindow.restore();
+            setTimeout(() => {
+              debug('Resetting windows via Task');
+              window.setPosition(DEFAULT_WINDOW_OPTIONS.x + 100, DEFAULT_WINDOW_OPTIONS.y + 100);
+              window.setSize(DEFAULT_WINDOW_OPTIONS.width, DEFAULT_WINDOW_OPTIONS.height);
+            }, 1);
+          }
+        });
       }
     }
   });
-
-  // Create myWindow, load the rest of the app, etc...
-  app.on('ready', () => {
-  });
 }
 // const isSecondInstance = app.makeSingleInstance((argv) => {
 //   if (mainWindow) {
@@ -153,6 +167,17 @@ const createWindow = () => {
     titleBarStyle: isMac ? 'hidden' : '',
     frame: isLinux,
     backgroundColor: !settings.get('darkMode') ? '#3498db' : '#1E1E1E',
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+
+  mainWindow.webContents.on('did-finish-load', () => {
+    const fns = onDidLoadFns;
+    onDidLoadFns = null;
+    for (const fn of fns) {
+      fn(mainWindow);
+    }
   });
 
   // Initialize System Tray
@@ -179,6 +204,16 @@ const createWindow = () => {
     mainWindow.webContents.openDevTools();
   }
 
+  // Windows deep linking handling on app launch
+  if (isWindows) {
+    onDidLoad((window) => {
+      const url = process.argv.slice(1);
+      if (url) {
+        handleDeepLink(window, url.toString());
+      }
+    });
+  }
+
   // Emitted when the window is closed.
   mainWindow.on('close', (e) => {
     // Dereference the window object, usually you would store windows
@@ -248,6 +283,13 @@ const createWindow = () => {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.on('ready', () => {
+  // Register App URL
+  app.setAsDefaultProtocolClient('franz');
+
+  if (isDevMode) {
+    app.setAsDefaultProtocolClient('franz-dev');
+  }
+
   if (process.platform === 'win32') {
     app.setUserTasks([{
       program: process.execPath,
@@ -263,23 +305,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
@@ -305,13 +367,13 @@ app.on('activate', () => {
 });
 
 app.on('will-finish-launching', () => {
-  // Protocol handler for osx
+  // Protocol handler for macOS
   app.on('open-url', (event, url) => {
     event.preventDefault();
-    console.log(`open-url event: ${url}`);
-    handleDeepLink(mainWindow, url);
+
+    onDidLoad((window) => {
+      debug('open-url event', url);
+      handleDeepLink(window, url);
+    });
   });
 });
-
-// Register App URL
-app.setAsDefaultProtocolClient('franz');
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 7a955a6d9..8a2a8d3d8 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -15,7 +15,7 @@ export default class Service {
 
   events = {};
 
-  isAttached = false;
+  @observable isAttached = false;
 
   @observable isActive = false; // Is current webview active
 
@@ -202,7 +202,7 @@ export default class Service {
 
     this.webview.addEventListener('did-fail-load', (event) => {
       debug('Service failed to load', this.name, event);
-      if (event.isMainFrame && event.errorCode !== -3) {
+      if (event.isMainFrame && event.errorCode !== -21 && event.errorCode !== -3) {
         this.isError = true;
         this.errorMessage = event.errorDescription;
         this.isLoading = false;
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index dd4642d70..b21d48a11 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -143,10 +143,13 @@ export default class AppStore extends Store {
 
     // Handle deep linking (franz://)
     ipcRenderer.on('navigateFromDeepLink', (event, data) => {
-      const { url } = data;
+      debug('Navigate from deep link', data);
+      let { url } = data;
       if (!url) return;
 
-      this.stores.router.push(data.url);
+      url = url.replace(/\/$/, '');
+
+      this.stores.router.push(url);
     });
 
     // Set active the next service
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 84f84891a..efd57a09d 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -70,6 +70,7 @@ export default class ServicesStore extends Store {
       this._mapActiveServiceToServiceModelReaction.bind(this),
       this._saveActiveService.bind(this),
       this._logoutReaction.bind(this),
+      this._handleMuteSettings.bind(this),
     ]);
 
     // Just bind this
@@ -291,6 +292,8 @@ export default class ServicesStore extends Store {
       this.all[index].isActive = false;
     });
     service.isActive = true;
+
+    this._focusActiveService();
   }
 
   @action _setActiveNext() {
@@ -341,6 +344,9 @@ export default class ServicesStore extends Store {
     const service = this.one(serviceId);
 
     if (service.webview) {
+      if (document.activeElement) {
+        document.activeElement.blur();
+      }
       service.webview.focus();
     }
   }
@@ -622,6 +628,20 @@ export default class ServicesStore extends Store {
     }
   }
 
+  _handleMuteSettings() {
+    const { enabled } = this;
+    const { isAppMuted } = this.stores.settings.app;
+
+    enabled.forEach((service) => {
+      const { isAttached } = service;
+      const isMuted = isAppMuted || service.isMuted;
+
+      if (isAttached) {
+        service.webview.setAudioMuted(isMuted);
+      }
+    });
+  }
+
   _shareSettingsWithServiceProcess() {
     const settings = this.stores.settings.app;
     this.actions.service.sendIPCMessageToAllServices({
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 7addb5760..77d84afe1 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -129,10 +129,6 @@ export default class UserStore extends Store {
     return Boolean(localStorage.getItem('authToken'));
   }
 
-  // @computed get isTokenValid() {
-  //   return this.authToken !== null && moment(this.tokenExpiry).isAfter(moment());
-  // }
-
   @computed get isTokenExpired() {
     if (!this.authToken) return false;
 
@@ -160,6 +156,14 @@ export default class UserStore extends Store {
     gaEvent('User', 'login');
   }
 
+  @action _tokenLogin(authToken) {
+    this._setUserData(authToken);
+
+    this.stores.router.push('/');
+
+    gaEvent('User', 'tokenLogin');
+  }
+
   @action async _signup({
     firstname, lastname, email, password, accountType, company,
   }) {
@@ -206,6 +210,8 @@ export default class UserStore extends Store {
   }
 
   @action async _update({ userData }) {
+    if (!this.isLoggedIn) return;
+
     const response = await this.updateUserInfoRequest.execute(userData)._promise;
 
     this.getUserInfoRequest.patch(() => response.data);
@@ -222,6 +228,7 @@ export default class UserStore extends Store {
     // workaround mobx issue
     localStorage.removeItem('authToken');
     window.localStorage.removeItem('authToken');
+
     this.getUserInfoRequest.invalidate().reset();
     this.authToken = null;
   }
@@ -262,6 +269,18 @@ export default class UserStore extends Store {
     const { router } = this.stores;
     const currentRoute = router.location.pathname;
     if (!this.isLoggedIn
+      && currentRoute.includes('token=')) {
+      router.push(this.WELCOME_ROUTE);
+      const token = currentRoute.split('=')[1];
+
+      const data = this._parseToken(token);
+      if (data) {
+        // Give this some time to sink
+        setTimeout(() => {
+          this._tokenLogin(token);
+        }, 1000);
+      }
+    } else if (!this.isLoggedIn
       && !currentRoute.includes(this.BASE_ROUTE)) {
       router.push(this.WELCOME_ROUTE);
     } else if (this.isLoggedIn
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index ebf468cf0..8b7cc512a 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -19,7 +19,7 @@ html { overflow: hidden; }
 
       &:hover,
       &:active { color: $dark-theme-gray-smoke; }
-      &.is-muted { color: $dark-theme-gray; }
+      &.is-muted { color: $theme-brand-primary; }
     }
   }
 
diff --git a/src/styles/services.scss b/src/styles/services.scss
index 0e559501c..5acf92d2c 100644
--- a/src/styles/services.scss
+++ b/src/styles/services.scss
@@ -39,18 +39,12 @@
     webview {
       background: $theme-gray-lighter;
       display: inline-flex;
-      height: 0;
-      width: 0;
+      height: 100%;
+      width: 100%;
     }
 
     &.is-active {
       z-index: 100;
-
-      webview {
-        flex: 0 1;
-        height: 100%;
-        width: 100%;
-      }
     }
 
     &--force-repaint webview { z-index: 5; }
diff --git a/src/theme/dark/index.js b/src/theme/dark/index.js
index fb1713184..8fdb321f3 100644
--- a/src/theme/dark/index.js
+++ b/src/theme/dark/index.js
@@ -8,6 +8,12 @@ export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
 export const colorHeadline = legacyStyles.darkThemeTextColor;
 export const colorText = legacyStyles.darkThemeTextColor;
 
+// Error Handler
+export const colorWebviewErrorHandlerBackground = legacyStyles.darkThemeGrayDarkest;
+
 // 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 37827621c..61410073d 100644
--- a/src/theme/default/index.js
+++ b/src/theme/default/index.js
@@ -23,7 +23,13 @@ export const colorSubscriptionContainerTitle = brandPrimary;
 export const colorSubscriptionContainerActionButtonBackground = brandPrimary;
 export const colorSubscriptionContainerActionButtonColor = '#FFF';
 
+// Error Handler
+export const colorWebviewErrorHandlerBackground = legacyStyles.themeGrayLighter;
+
 // Loader
 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 9aa89ce01..c718b348e 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -73,7 +73,7 @@ class RecipeController {
       require(modulePath)(new RecipeWebview(), {...config, recipe,});
       debug('Initialize Recipe', config, recipe);
 
-      this.settings.service = config;
+      this.settings.service = Object.assign(config, { recipe });
     } catch (err) {
       console.error('Recipe initialization failed', err);
     }