Create a dialog for proxy authentication - Closes #460

app/main.js

@@ -4,6 +4,7 @@ const path = require('path');
 const { app } = electron;
 const { BrowserWindow } = electron;
 const { Menu } = electron;
+const { ipcMain } = electron;
 
 let win;
 const copyright = `Copyright © 2016 - ${new Date().getFullYear()} Lisk Foundation`;
@@ -24,6 +25,8 @@ function createWindow() {
   win.on('blur', () => win.webContents.send('blur'));
   win.on('focus', () => win.webContents.send('focus'));
 
+  win.webContents.openDevTools();
+
   const template = [
     {
       label: 'Edit',
@@ -203,3 +206,13 @@ app.on('activate', () => {
     createWindow();
   }
 });
+
+app.on('login', (event, webContents, request, authInfo, callback) => {
+  global.myTempFunction = callback;
+  event.preventDefault();
+  webContents.send('proxyLogin', authInfo);
+});
+
+ipcMain.on('proxyCredentialsEntered', (event, username, password) => {
+  global.myTempFunction(username, password);
+});

src/components/proxyDialog/index.js

@@ -0,0 +1,59 @@
+import { Input, Button } from 'react-toolbox';
+import React from 'react';
+
+
+class ProxyDialog extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      password: {
+        value: localStorage.proxyPassword || '',
+      },
+      username: {
+        value: localStorage.proxyUsername || '',
+      },
+    };
+  }
+
+  handleChange(name, value) {
+    this.setState({
+      [name]: {
+        value,
+        error: value === '' ? 'Required' : '',
+      },
+    });
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+    localStorage.setItem('proxyUsername', this.state.username.value);
+    localStorage.setItem('proxyPassword', this.state.password.value);
+    this.props.callback(this.state.username.value, this.state.password.value);
+    this.props.closeDialog();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit.bind(this)}>
+        <p>
+          To connect to Lisk network, you need to enter a username and password for proxy
+          <b> {this.props.authInfo.host} </b>
+        </p>
+        <Input label='Username' required
+          className='username'
+          onChange={this.handleChange.bind(this, 'username')}
+          error={this.state.username.error}
+          value={this.state.username.value}/>
+        <Input label='Password' required type='password'
+          className='password'
+          onChange={this.handleChange.bind(this, 'password')}
+          error={this.state.password.error}
+          value={this.state.password.value}/>
+        <Button primary raised
+          style={{ float: 'right' }}
+          disabled = {this.state.password.value === '' || this.state.username.value === ''}
+          label='Submit' type='submit' />
+      </form>);
+  }
+}
+export default ProxyDialog;

src/components/proxyDialog/index.test.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import { spy, mock } from 'sinon';
+
+import ProxyDialog from './';
+
+describe('ProxyDialog', () => {
+  let wrapper;
+  let props;
+
+  beforeEach(() => {
+    props = {
+      callback: spy(),
+      closeDialog: spy(),
+      authInfo: { host: 'someProxy.com' },
+    };
+    wrapper = mount(<ProxyDialog {...props} />);
+  });
+
+  it('should render two Inputs and one Button', () => {
+    expect(wrapper.find('Input')).to.have.lengthOf(2);
+    expect(wrapper.find('Button')).to.have.lengthOf(1);
+  });
+
+  it('should submit the form to props.callback and localStorage', () => {
+    const username = 'name';
+    const password = 'pass';
+    const localStorageMock = mock(localStorage);
+    localStorageMock.expects('setItem').withExactArgs('proxyUsername', username);
+    localStorageMock.expects('setItem').withExactArgs('proxyPassword', password);
+
+    wrapper.find('.username input').simulate('change', { target: { value: username } });
+    wrapper.find('.password input').simulate('change', { target: { value: password } });
+    wrapper.find('form').simulate('submit');
+
+    expect(props.callback).to.have.been.calledWith(username, password);
+    expect(props.closeDialog).to.have.been.calledWith();
+
+    localStorageMock.verify();
+    localStorageMock.restore();
+  });
+});

src/main.js

@@ -6,6 +6,12 @@ import { I18nextProvider } from 'react-i18next';
 import App from './components/app';
 import store from './store';
 import i18n from './i18n'; // initialized i18next instance
+import proxyLogin from './utils/proxyLogin';
+import env from './constants/env';
+
+if (env.production) {
+  proxyLogin.init();
+}
 
 const rootElement = document.getElementById('app');
 

src/utils/proxyLogin.js

@@ -0,0 +1,21 @@
+import { dialogDisplayed } from '../actions/dialog';
+import ProxyDialog from '../components/proxyDialog';
+import store from '../store';
+
+export default {
+  init: () => {
+    const { ipc } = window;
+
+    ipc.on('proxyLogin', (action, authInfo) => {
+      store.dispatch(dialogDisplayed({
+        title: 'Proxy Authentication',
+        childComponent: ProxyDialog,
+        childComponentProps: {
+          authInfo,
+          callback: (username, password) => ipc.send('proxyCredentialsEntered', username, password),
+        },
+      }));
+    });
+  },
+};
+