Skip to content
This repository has been archived by the owner on Nov 28, 2022. It is now read-only.

Commit

Permalink
Add support for basic auth from user object
Browse files Browse the repository at this point in the history
  • Loading branch information
domharrington committed Jan 24, 2019
1 parent b4891d9 commit 3744e03
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 3 deletions.
20 changes: 19 additions & 1 deletion packages/api-explorer/__tests__/SecurityInput.test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)
});
});
3 changes: 2 additions & 1 deletion packages/api-explorer/src/SecurityInput.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
16 changes: 15 additions & 1 deletion packages/api-explorer/src/security-input-types/Basic.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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">
Expand All @@ -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>
Expand Down

0 comments on commit 3744e03

Please sign in to comment.