BasicAuth first draft

5 files changed, 208 insertions, 0 deletions

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