Merge branch 'feature/basicAuth' into develop

package.json

@@ -71,6 +71,7 @@
     "react-intl": "2.7.2",
     "react-jss": "8.6.1",
     "react-loader": "2.4.5",
+    "react-modal": "3.7.1",
     "react-router": "^3.0.2",
     "react-sortable-hoc": "0.8.4",
     "react-tooltip": "3.9.0",

src/app.js

@@ -62,6 +62,7 @@ window.addEventListener('load', () => {
     menu,
     touchBar,
     analytics,
+    features: {},
     render() {
       const preparedApp = (
         <Provider stores={stores} actions={actions}>

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>

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>
+    );
+  }
+}

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,
+  },
+});

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,

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>
+    );
+  }
+}

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',
+    },
+  },
+});

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;

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,
+  });
+}

src/features/basicAuth/styles.js

@@ -0,0 +1,12 @@
+export default {
+  modal: {
+    width: 300,
+  },
+  buttons: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  form: {
+    marginTop: 15,
+  },
+};