Move security input types into separate files

mia-platform · Oct 24, 2017 · ff5708b · ff5708b
1 parent 7bb6090
commit ff5708b
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 146 deletions.
diff --git a/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx b/packages/api-explorer-ui/__tests__/SecurityInput.test.jsx
@@ -2,6 +2,24 @@ const React = require('react');
 const { mount, shallow } = require('enzyme');
 const SecurityInput = require('../src/SecurityInput');
 
+test('should render an Oauth2 component if type is oauth2', () => {
+  const props = { scheme: { type: 'oauth2', _key: 'auth', name: 'auth' }, onChange: () => {} };
+  const securityInput = shallow(<SecurityInput {...props} />);
+  expect(securityInput.find('Oauth2').length).toBe(1);
+});
+
+test('should render an ApiKey component if type is apiKey', () => {
+  const props = { scheme: { type: 'apiKey', _key: 'auth', name: 'auth' }, onChange: () => {} };
+  const securityInput = shallow(<SecurityInput {...props} />);
+  expect(securityInput.find('ApiKey').length).toBe(1);
+});
+
+test('should render a Basic component if type is http', () => {
+  const props = { scheme: { type: 'http', _key: 'auth', name: 'auth' }, onChange: () => {} };
+  const securityInput = shallow(<SecurityInput {...props} />);
+  expect(securityInput.find('Basic').length).toBe(1);
+});
+
 describe('oauth2', () => {
   const props = { scheme: { type: 'oauth2', _key: 'test-auth' }, onChange: () => {} };
 

diff --git a/packages/api-explorer-ui/src/SecurityInput.jsx b/packages/api-explorer-ui/src/SecurityInput.jsx
@@ -1,152 +1,9 @@
 const React = require('react');
-const Cookie = require('js-cookie');
 const PropTypes = require('prop-types');
 
-function Oauth2({ apiKey, inputRef, oauthUrl, change }) {
-  if (!apiKey && oauthUrl) {
-    return (
-      <section>
-        <div className="text-center">
-          <a className="btn btn-primary" href={oauthUrl} target="_self">
-            Authenticate via OAuth2
-          </a>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section>
-      {
-        // TODO
-        //   if security.description
-        //     != marked(security.description)
-      }
-      <div className="row">
-        <div className="col-xs-4">
-          <label htmlFor="apiKey">Authorization</label>
-        </div>
-        <div className="col-xs-2">
-          <div
-            style={{
-              display: 'inline-block',
-              marginRight: '10px',
-              marginTop: '5px',
-              fontSize: '13px',
-            }}
-          >
-            Bearer
-          </div>
-        </div>
-        <div className="col-xs-6">
-          <input
-            ref={inputRef}
-            type="text"
-            onChange={e => change(e.currentTarget.value)}
-            name="apiKey"
-          />
-        </div>
-      </div>
-    </section>
-  );
-}
-
-Oauth2.propTypes = {
-  apiKey: PropTypes.string,
-  oauthUrl: PropTypes.string,
-  change: PropTypes.func.isRequired,
-  inputRef: PropTypes.func,
-};
-
-Oauth2.defaultProps = {
-  apiKey: '',
-  oauthUrl: '',
-  inputRef: () => {},
-};
-
-function ApiKey({ scheme, inputRef, change }) {
-  const apiKeyCookie = Cookie.get('api_key');
-  // apiKeyCookie = apiKeyCookie || {e => apiKey.change(e.currentTarget.value)};
-  return (
-    <div className="row">
-      <div className="col-xs-5">
-        <label htmlFor="apiKey">{scheme.name}</label>
-      </div>
-      <div className="col-xs-7">
-        <input
-          ref={inputRef}
-          type="text"
-          onChange={e => change(e.currentTarget.value)}
-          value={apiKeyCookie}
-        />
-      </div>
-    </div>
-  );
-}
-
-ApiKey.propTypes = {
-  scheme: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-  }).isRequired,
-  inputRef: PropTypes.func,
-  change: PropTypes.func.isRequired,
-};
-
-ApiKey.defaultProps = {
-  inputRef: () => {},
-};
-
-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() {
-    const { inputRef } = this.props;
-    return (
-      <div className="row">
-        <div className="col-xs-6">
-          <label htmlFor="user">username</label>
-          <input
-            ref={inputRef}
-            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,
-  inputRef: PropTypes.func,
-};
-
-Basic.defaultProps = {
-  inputRef: () => {},
-};
+const Oauth2 = require('./security-input-types/Oauth2');
+const ApiKey = require('./security-input-types/ApiKey');
+const Basic = require('./security-input-types/Basic');
 
 function SecurityInput(props) {
   function change(value) {

diff --git a/packages/api-explorer-ui/src/security-input-types/ApiKey.jsx b/packages/api-explorer-ui/src/security-input-types/ApiKey.jsx
@@ -0,0 +1,37 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const Cookie = require('js-cookie');
+
+function ApiKey({ scheme, inputRef, change }) {
+  const apiKeyCookie = Cookie.get('api_key');
+  // apiKeyCookie = apiKeyCookie || {e => apiKey.change(e.currentTarget.value)};
+  return (
+    <div className="row">
+      <div className="col-xs-5">
+        <label htmlFor="apiKey">{scheme.name}</label>
+      </div>
+      <div className="col-xs-7">
+        <input
+          ref={inputRef}
+          type="text"
+          onChange={e => change(e.currentTarget.value)}
+          value={apiKeyCookie}
+        />
+      </div>
+    </div>
+  );
+}
+
+ApiKey.propTypes = {
+  scheme: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  inputRef: PropTypes.func,
+  change: PropTypes.func.isRequired,
+};
+
+ApiKey.defaultProps = {
+  inputRef: () => {},
+};
+
+module.exports = ApiKey;
diff --git a/packages/api-explorer-ui/src/security-input-types/Basic.jsx b/packages/api-explorer-ui/src/security-input-types/Basic.jsx
@@ -0,0 +1,56 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+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() {
+    const { inputRef } = this.props;
+    return (
+      <div className="row">
+        <div className="col-xs-6">
+          <label htmlFor="user">username</label>
+          <input
+            ref={inputRef}
+            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,
+  inputRef: PropTypes.func,
+};
+
+Basic.defaultProps = {
+  inputRef: () => {},
+};
+
+module.exports = Basic;
diff --git a/packages/api-explorer-ui/src/security-input-types/Oauth2.jsx b/packages/api-explorer-ui/src/security-input-types/Oauth2.jsx
@@ -0,0 +1,66 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+
+function Oauth2({ apiKey, inputRef, oauthUrl, change }) {
+  if (!apiKey && oauthUrl) {
+    return (
+      <section>
+        <div className="text-center">
+          <a className="btn btn-primary" href={oauthUrl} target="_self">
+            Authenticate via OAuth2
+          </a>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section>
+      {
+        // TODO
+        //   if security.description
+        //     != marked(security.description)
+      }
+      <div className="row">
+        <div className="col-xs-4">
+          <label htmlFor="apiKey">Authorization</label>
+        </div>
+        <div className="col-xs-2">
+          <div
+            style={{
+              display: 'inline-block',
+              marginRight: '10px',
+              marginTop: '5px',
+              fontSize: '13px',
+            }}
+          >
+            Bearer
+          </div>
+        </div>
+        <div className="col-xs-6">
+          <input
+            ref={inputRef}
+            type="text"
+            onChange={e => change(e.currentTarget.value)}
+            name="apiKey"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+Oauth2.propTypes = {
+  apiKey: PropTypes.string,
+  oauthUrl: PropTypes.string,
+  change: PropTypes.func.isRequired,
+  inputRef: PropTypes.func,
+};
+
+Oauth2.defaultProps = {
+  apiKey: '',
+  oauthUrl: '',
+  inputRef: () => {},
+};
+
+module.exports = Oauth2;