Authentication box opens but warning shows immediately

readmeio · Sep 19, 2017 · 7658d46 · 7658d46
1 parent d6085db
commit 7658d46
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 10 deletions.
diff --git a/packages/api-explorer-ui/src/AuthBox.jsx b/packages/api-explorer-ui/src/AuthBox.jsx
@@ -56,7 +56,7 @@ class AuthBox extends React.Component {
     // this.props.onChange({ header: { 'test': '111' } });
   }
   render() {
-    const { operation } = this.props;
+    const { operation, needsAuth } = this.props;
 
     if (!operation.hasAuth()) return null;
 
@@ -71,7 +71,7 @@ class AuthBox extends React.Component {
         <div className="nopad">
           <div className="triangle" />
           <div>{renderSecurities(operation, this.props.onChange)}</div>
-          <div className={classNames('hub-authrequired', { active: this.props.needsAuth })}>
+          <div className={classNames('hub-authrequired', { active: needsAuth })}>
             <div className="hub-authrequired-slider">
               <i className="icon icon-notification" />
               Authentication is required for this endpoint

diff --git a/packages/api-explorer-ui/src/Doc.jsx b/packages/api-explorer-ui/src/Doc.jsx
@@ -14,7 +14,13 @@ const Content = require('./block-types/Content');
 class Doc extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { formData: {}, dirty: false, loading: false, showAuthBox: false };
+    this.state = {
+      formData: {},
+      dirty: false,
+      loading: false,
+      showAuthBox: false,
+      needsAuth: false,
+    };
     this.onChange = this.onChange.bind(this);
     this.oas = new Oas(this.props.oas);
     this.onSubmit = this.onSubmit.bind(this);
@@ -30,8 +36,10 @@ class Doc extends React.Component {
   }
   onSubmit() {
     if (
-      (!authRequired(this.oas.operation(this.props.doc.swagger.path, this.props.doc.api.method)),
-      this.state.formData.auth)
+      !authRequired(
+        this.oas.operation(this.props.doc.swagger.path, this.props.doc.api.method),
+        this.state.formData.auth,
+      )
     ) {
       this.setState({ showAuthBox: true, needsAuth: true });
       return false;
@@ -43,7 +51,7 @@ class Doc extends React.Component {
     const { doc, setLanguage } = this.props;
     const oas = this.oas;
     const operation = oas.operation(doc.swagger.path, doc.api.method);
-
+    // console.log('reset?', this.state.formData.auth);
     return (
       <div className="hub-reference" id={`page-${doc.slug}`}>
         {
@@ -77,6 +85,7 @@ class Doc extends React.Component {
               onChange={this.onChange}
               authData={this.state.formData.auth}
               showAuthBox={this.state.showAuthBox}
+              needsAuth={this.state.needsAuth}
             />
 
             {showCode(oas, operation) && (

diff --git a/packages/api-explorer-ui/src/PathUrl.jsx b/packages/api-explorer-ui/src/PathUrl.jsx
@@ -16,14 +16,19 @@ function splitPath(path) {
       return { type: part.match(/[{}]/) ? 'variable' : 'text', value: part.replace(/[{}]/g, '') };
     });
 }
-function PathUrl({ oas, operation, loading, dirty, onChange, showAuthBox }) {
+function PathUrl({ oas, operation, loading, dirty, onChange, showAuthBox, needsAuth }) {
   return (
     <div className="api-definition-parent">
       <div className="api-definition">
         <div className="api-definition-container">
           {oas[extensions.EXPLORER_ENABLED] && (
             <div className="api-definition-actions">
-              <AuthBox operation={operation} onChange={onChange} open={showAuthBox} />
+              <AuthBox
+                operation={operation}
+                onChange={onChange}
+                open={showAuthBox}
+                needsAuth={needsAuth}
+              />
 
               <button
                 form={`form-${operation.operationId}`}

diff --git a/packages/api-explorer-ui/src/lib/endpoint.js b/packages/api-explorer-ui/src/lib/endpoint.js
@@ -1,5 +1,6 @@
-function authRequired(operation, authData = {}) {
+function authRequired(operation, authData) {
   let ready = true;
+  const authInputData = authData === undefined ? {} : authData;
   const securitySettings = operation.getSecurity();
   if (!securitySettings) return ready;
   // console.log(securitySettings);
@@ -8,7 +9,7 @@ function authRequired(operation, authData = {}) {
 
     if (!operation.oas.components.securitySchemes[key]) return;
     const security = operation.oas.components.securitySchemes[key];
-    const auth = authData[key];
+    const auth = authInputData[key];
 
     if (security.type === 'basic') {
       if (!auth || !auth.user) {