From b73cc7b3c70cbd42b4e3ee94cd4c1cef1e2acb25 Mon Sep 17 00:00:00 2001
From: Dom Harrington <dom@harrington-mail.com>
Date: Fri, 8 Sep 2017 11:13:18 -0700
Subject: [PATCH] Add basic auth authentication type

---
 .../__tests__/SecurityInput.test.jsx          | 25 ++++++++++-
 .../__tests__/lib/configure-security.test.js  |  2 +-
 packages/api-explorer-ui/src/CodeSample.jsx   |  1 -
 .../api-explorer-ui/src/SecurityInput.jsx     | 43 +++++++++++++++++++
 .../src/lib/configure-security.js             |  2 +-
 5 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx b/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
index 6fa2fa65a..cba2f957b 100644
--- a/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
+++ b/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
@@ -1,5 +1,5 @@
 const React = require('react');
-const { shallow } = require('enzyme');
+const { mount, shallow } = require('enzyme');
 const SecurityInput = require('../src/SecurityInput');
 
 describe('oauth2', () => {
@@ -32,3 +32,26 @@ describe('oauth2', () => {
     expect(onChange.mock.calls[0][0]).toEqual({ auth: { 'test-auth': '1234' } });
   });
 });
+
+describe('basic', () => {
+  const props = { scheme: { type: 'basic', _key: 'test-basic' }, onChange: () => {} };
+
+  test('should send auth apiKey into onChange()', () => {
+    const onChange = jest.fn();
+    const securityInput = mount(<SecurityInput {...props} onChange={onChange} />);
+
+    securityInput.find('input[name="user"]').node.value = 'user';
+    securityInput.find('input[name="user"]').simulate('change');
+    securityInput.find('input[name="password"]').node.value = 'pass';
+    securityInput.find('input[name="password"]').simulate('change');
+
+    expect(onChange.mock.calls[1][0]).toEqual({
+      auth: {
+        'test-basic': {
+          user: 'user',
+          password: 'pass',
+        },
+      },
+    });
+  });
+});
diff --git a/packages/api-explorer-ui/__tests__/lib/configure-security.test.js b/packages/api-explorer-ui/__tests__/lib/configure-security.test.js
index ebdac9171..4fd3d0230 100644
--- a/packages/api-explorer-ui/__tests__/lib/configure-security.test.js
+++ b/packages/api-explorer-ui/__tests__/lib/configure-security.test.js
@@ -28,7 +28,7 @@ describe('configure-security', () => {
       const user = 'user';
       const password = 'password';
       const values = {
-        auth: { user, password },
+        auth: { test: { user, password } },
       };
 
       expect(configureSecurity({
diff --git a/packages/api-explorer-ui/src/CodeSample.jsx b/packages/api-explorer-ui/src/CodeSample.jsx
index 89716aed1..86ba57bae 100644
--- a/packages/api-explorer-ui/src/CodeSample.jsx
+++ b/packages/api-explorer-ui/src/CodeSample.jsx
@@ -72,4 +72,3 @@ CodeSample.propTypes = {
 };
 
 module.exports = CodeSample;
-
diff --git a/packages/api-explorer-ui/src/SecurityInput.jsx b/packages/api-explorer-ui/src/SecurityInput.jsx
index f154e5c29..9a66e6e2c 100644
--- a/packages/api-explorer-ui/src/SecurityInput.jsx
+++ b/packages/api-explorer-ui/src/SecurityInput.jsx
@@ -44,6 +44,47 @@ Oauth2.defaultProps = {
   apiKey: '',
 };
 
+class Basic extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { user: '', password: '' };
+    this.inputChange = this.inputChange.bind(this);
+  }
+  inputChange(name, value) {
+    this.setState((previousState) => {
+      return Object.assign({}, previousState, { [name]: value });
+    }, () => {
+      this.props.change(this.state);
+    });
+  }
+  render() {
+    return (
+      <div className="row">
+        <div className="col-xs-6">
+          <label htmlFor="user">username</label>
+          <input
+            type="text"
+            onChange={e => this.inputChange(e.currentTarget.name, e.currentTarget.value)}
+            name="user"
+          />
+        </div>
+        <div className="col-xs-6">
+          <label htmlFor="password">password</label>
+          <input
+            type="text"
+            onChange={e => this.inputChange(e.currentTarget.name, e.currentTarget.value)}
+            name="password"
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+Basic.propTypes = {
+  change: PropTypes.func.isRequired,
+};
+
 function SecurityInput(props) {
   function change(value) {
     return props.onChange({ auth: { [props.scheme._key]: value } });
@@ -51,6 +92,8 @@ function SecurityInput(props) {
   switch (props.scheme.type) {
     case 'oauth2':
       return Oauth2(Object.assign({}, props, { change }));
+    case 'basic':
+      return React.createElement(Basic, Object.assign({}, props, { change }));
     default: return <span />;
   }
 }
diff --git a/packages/api-explorer-ui/src/lib/configure-security.js b/packages/api-explorer-ui/src/lib/configure-security.js
index 1fc3072cd..9d38563e3 100644
--- a/packages/api-explorer-ui/src/lib/configure-security.js
+++ b/packages/api-explorer-ui/src/lib/configure-security.js
@@ -15,7 +15,7 @@ module.exports = function configureSecurity(oas, values, scheme) {
   if (security.type === 'basic') {
     return harValue('headers', {
       name: 'Authorization',
-      value: `Basic ${new Buffer(`${values.auth.user}:${values.auth.password}`).toString('base64')}`,
+      value: `Basic ${new Buffer(`${values.auth[key].user}:${values.auth[key].password}`).toString('base64')}`,
     });
   }