BasicAuth first draft

14 files changed, 343 insertions, 7 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/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..99abf0d11
--- /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(stores) {
+  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/index.js b/src/index.js
index 830166dcf..a4bc44a6c 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'));
@@ -229,23 +237,42 @@ 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') {
+    console.log('basic auth handler', authInfo);
+    basicAuthHandler(mainWindow, authInfo);
   }
 });
 
+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/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 2a0713b6f..2eccf87ee 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -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';
 
@@ -47,5 +48,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/theme/dark/index.js b/src/theme/dark/index.js
index fb1713184..429284f9e 100644
--- a/src/theme/dark/index.js
+++ b/src/theme/dark/index.js
@@ -11,3 +11,6 @@ export const colorText = legacyStyles.darkThemeTextColor;
 // 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..3ce8e7f0e 100644
--- a/src/theme/default/index.js
+++ b/src/theme/default/index.js
@@ -27,3 +27,6 @@ export const colorSubscriptionContainerActionButtonColor = '#FFF';
 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);