Add basic auth authentication type

Author: Dom Harrington

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

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({

packages/api-explorer-ui/src/CodeSample.jsx

@@ -72,4 +72,3 @@ CodeSample.propTypes = {
 };
 
 module.exports = CodeSample;
-

packages/api-explorer-ui/src/SecurityInput.jsx

@@ -44,13 +44,56 @@ 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 } });
   }
   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 />;
   }
 }

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