Add support for basic auth from user object

Author: domharrington

packages/api-explorer/__tests__/SecurityInput.test.jsx

@@ -107,11 +107,29 @@ describe('basic', () => {
     securityInput.find('input[name="password"]').instance().value = 'pass';
     securityInput.find('input[name="password"]').simulate('change');
 
-    expect(onChange.mock.calls[1][0]).toEqual({
+    // TODO this should eventually be removed
+    // see comment above componentDidMount in Basic.jsx
+    expect(onChange.mock.calls[0][0]).toEqual({
+      'test-basic': {
+        user: '',
+        password: '',
+      },
+    });
+
+    expect(onChange.mock.calls[2][0]).toEqual({
       'test-basic': {
         user: 'user',
         password: 'pass',
       },
     });
   });
+
+  test('should display user/pass if set', () => {
+    const user = 'user';
+    const pass = 'pass';
+    const securityInput = mount(<SecurityInput {...props} {...baseProps} oauth user={{ user, pass }} />);
+
+    expect(securityInput.find('input[name="user"]').prop('value')).toBe(user)
+    expect(securityInput.find('input[name="password"]').prop('value')).toBe(pass)
+  });
 });

packages/api-explorer/src/SecurityInput.jsx

@@ -16,7 +16,8 @@ function SecurityInput(props) {
       return <Oauth2 {...props} apiKey={getAuth(props.user, props.scheme)} change={change} />;
     case 'http':
       // TODO support other schemes? https://github.com/readmeio/api-explorer/issues/15
-      return <Basic {...props} change={change} />;
+      const { user, pass } = getAuth(props.user, props.scheme);
+      return <Basic {...props} change={change} user={user} pass={pass} />;
     case 'apiKey':
       return <ApiKey {...props} change={change} />;
     default:

packages/api-explorer/src/security-input-types/Basic.jsx

@@ -4,10 +4,22 @@ const PropTypes = require('prop-types');
 class Basic extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { user: '', password: '' };
+    this.state = { user: props.user || '', password: props.pass || '' };
     this.inputChange = this.inputChange.bind(this);
   }
+  // TODO refactor this
+  // This is not ideal... we're having to update the state
+  // here so that the code sample updates with the base64
+  // encoded user/pass on first render. This is a sign of
+  // bad prop passing somewhere and is quite un-reacty.
+  // Maybe we should be calling getAuth from the top level
+  // so the value is correct on the first pass through to
+  // the CodeSample component. Let me mull this over a little more.
+  componentDidMount() {
+    this.props.change({ user: this.state.user, password: this.state.password });
+  }
   componentDidUpdate(prevProps, prevState) {
+    // Without this if block the code spirals into an infinite loop
     if (prevState.user !== this.state.user || prevState.password !== this.state.password)
       this.props.change(this.state);
   }
@@ -26,6 +38,7 @@ class Basic extends React.Component {
             type="text"
             onChange={e => this.inputChange(e.currentTarget.name, e.currentTarget.value)}
             name="user"
+            value={this.state.user}
           />
         </div>
         <div className="col-xs-6">
@@ -34,6 +47,7 @@ class Basic extends React.Component {
             type="text"
             onChange={e => this.inputChange(e.currentTarget.name, e.currentTarget.value)}
             name="password"
+            value={this.state.password}
           />
         </div>
       </div>