[auth] moved authorizations into the header

dist/css/print.css

@@ -1188,6 +1188,16 @@
   text-decoration: underline;
   cursor: pointer;
 }
+.swagger-section #auth_container {
+  color: #fff;
+  width: 190px;
+  float: left;
+  border: none;
+  padding: 5px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
 .swagger-section .auth_container {
   padding: 0 0 10px;
   margin-bottom: 5px;

dist/css/screen.css

@@ -1188,6 +1188,16 @@
   text-decoration: underline;
   cursor: pointer;
 }
+.swagger-section #auth_container {
+  color: #fff;
+  width: 190px;
+  float: left;
+  border: none;
+  padding: 5px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
 .swagger-section .auth_container {
   padding: 0 0 10px;
   margin-bottom: 5px;

dist/index.html

@@ -67,7 +67,7 @@
             window.SwaggerTranslator.translate();
           }
 
-          addApiKeyAuthorization();
+//          addApiKeyAuthorization();
         },
         onFailure: function(data) {
           log("Unable to Load SwaggerUI");
@@ -79,16 +79,16 @@
         showRequestHeaders: false
       });
 
-      function addApiKeyAuthorization(){
+//      function addApiKeyAuthorization(){
-        var key = encodeURIComponent($('#input_apiKey')[0].value);
+//        var key = encodeURIComponent($('#input_apiKey')[0].value);
-        if(key && key.trim() != "") {
+//        if(key && key.trim() != "") {
-            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
+//            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
-            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
+//            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
-            log("added key " + key);
+//            log("added key " + key);
-        }
+//        }
-      }
+//      }
-
+//
-      $('#input_apiKey').change(addApiKeyAuthorization);
+//      $('#input_apiKey').change(addApiKeyAuthorization);
 
       // if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
       /*
@@ -113,7 +113,7 @@
     <a id="logo" href="http://swagger.io">swagger</a>
     <form id='api_selector'>
       <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
-      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
+      <div id='auth_container'></div>
       <div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>
     </form>
   </div>

dist/swagger-ui.js

@@ -18849,6 +18849,10 @@ window.SwaggerUi = Backbone.Router.extend({
     if (this.mainView) {
       this.mainView.clear();
     }
+
+    if (this.authView) {
+      this.authView.remove();
+    }
     var url = this.options.url;
     if (url && url.indexOf('http') !== 0) {
       url = this.buildUrl(window.location.href.toString(), url);
@@ -18880,6 +18884,7 @@ window.SwaggerUi = Backbone.Router.extend({
   // This is bound to success handler for SwaggerApi
   //  so it gets called when SwaggerApi completes loading
   render: function(){
+    var authsModel;
     this.showMessage('Finished Loading Resource Information. Rendering Swagger UI...');
     this.mainView = new SwaggerUi.Views.MainView({
       model: this.api,
@@ -18887,6 +18892,20 @@ window.SwaggerUi = Backbone.Router.extend({
       swaggerOptions: this.options,
       router: this
     }).render();
+    if (!_.isEmpty(this.api.securityDefinitions)){
+      authsModel = {
+        auths: _.map(this.api.securityDefinitions, function (auth, name) {
+          var result = {};
+          result[name] = auth;
+          return result;
+        })
+      };
+      this.authView = new SwaggerUi.Views.AuthButtonView({
+        model: authsModel,
+        router: this
+      });
+      $('#auth_container').append(this.authView.render().el);
+    }
     this.showMessage();
     switch (this.options.docExpansion) {
       case 'full':
@@ -19318,8 +19337,7 @@ SwaggerUi.Views.HeaderView = Backbone.View.extend({
     }
 
     this.trigger('update-swagger-ui', {
-      url: $('#input_baseUrl').val(),
+      url: $('#input_baseUrl').val()
-      apiKey: $('#input_apiKey').val()
     });
   },
 
@@ -19330,7 +19348,6 @@ SwaggerUi.Views.HeaderView = Backbone.View.extend({
 
     $('#input_baseUrl').val(url);
 
-    //$('#input_apiKey').val(apiKey);
     if (trigger) {
       this.trigger('update-swagger-ui', {url:url});
     }
@@ -19422,26 +19439,9 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
   },
 
   render: function () {
-    // Render the outer container for resources
-    var authsModel, parsedDefinitions;
-
     $(this.el).html(Handlebars.templates.main(this.model));
     this.model.securityDefinitions = this.model.securityDefinitions || {};
 
-    if (!_.isEmpty(this.model.securityDefinitions)) {
-      parsedDefinitions = _.map(this.model.securityDefinitions, function (auth, name) {
-        var result = {};
-        result[name] = auth;
-        return result;
-      });
-
-      authsModel = { auths: parsedDefinitions };
-
-      authsModel.isLogout = !_.isEmpty(window.swaggerUi.api.clientAuthorizations.authz);
-      this.authView = new SwaggerUi.Views.AuthButtonView({model: authsModel, router: this.router});
-      this.$('.authorize-wrapper').append(this.authView.render().el);
-    }
-
     // Render each resource
 
     var resources = {};

src/main/html/css/print.css

@@ -1188,6 +1188,16 @@
   text-decoration: underline;
   cursor: pointer;
 }
+.swagger-section #auth_container {
+  color: #fff;
+  width: 190px;
+  float: left;
+  border: none;
+  padding: 5px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
 .swagger-section .auth_container {
   padding: 0 0 10px;
   margin-bottom: 5px;

src/main/html/css/screen.css

@@ -1188,6 +1188,16 @@
   text-decoration: underline;
   cursor: pointer;
 }
+.swagger-section #auth_container {
+  color: #fff;
+  width: 190px;
+  float: left;
+  border: none;
+  padding: 5px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
 .swagger-section .auth_container {
   padding: 0 0 10px;
   margin-bottom: 5px;

src/main/html/index.html

@@ -67,7 +67,7 @@
             window.SwaggerTranslator.translate();
           }
 
-          addApiKeyAuthorization();
+//          addApiKeyAuthorization();
         },
         onFailure: function(data) {
           log("Unable to Load SwaggerUI");
@@ -79,16 +79,16 @@
         showRequestHeaders: false
       });
 
-      function addApiKeyAuthorization(){
+//      function addApiKeyAuthorization(){
-        var key = encodeURIComponent($('#input_apiKey')[0].value);
+//        var key = encodeURIComponent($('#input_apiKey')[0].value);
-        if(key && key.trim() != "") {
+//        if(key && key.trim() != "") {
-            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
+//            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
-            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
+//            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
-            log("added key " + key);
+//            log("added key " + key);
-        }
+//        }
-      }
+//      }
-
+//
-      $('#input_apiKey').change(addApiKeyAuthorization);
+//      $('#input_apiKey').change(addApiKeyAuthorization);
 
       // if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
       /*
@@ -113,7 +113,7 @@
     <a id="logo" href="http://swagger.io">swagger</a>
     <form id='api_selector'>
       <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
-      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
+      <div id='auth_container'></div>
       <div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>
     </form>
   </div>

src/main/javascript/SwaggerUi.js

@@ -102,6 +102,10 @@ window.SwaggerUi = Backbone.Router.extend({
     if (this.mainView) {
       this.mainView.clear();
     }
+
+    if (this.authView) {
+      this.authView.remove();
+    }
     var url = this.options.url;
     if (url && url.indexOf('http') !== 0) {
       url = this.buildUrl(window.location.href.toString(), url);
@@ -133,6 +137,7 @@ window.SwaggerUi = Backbone.Router.extend({
   // This is bound to success handler for SwaggerApi
   //  so it gets called when SwaggerApi completes loading
   render: function(){
+    var authsModel;
     this.showMessage('Finished Loading Resource Information. Rendering Swagger UI...');
     this.mainView = new SwaggerUi.Views.MainView({
       model: this.api,
@@ -140,6 +145,20 @@ window.SwaggerUi = Backbone.Router.extend({
       swaggerOptions: this.options,
       router: this
     }).render();
+    if (!_.isEmpty(this.api.securityDefinitions)){
+      authsModel = {
+        auths: _.map(this.api.securityDefinitions, function (auth, name) {
+          var result = {};
+          result[name] = auth;
+          return result;
+        })
+      };
+      this.authView = new SwaggerUi.Views.AuthButtonView({
+        model: authsModel,
+        router: this
+      });
+      $('#auth_container').append(this.authView.render().el);
+    }
     this.showMessage();
     switch (this.options.docExpansion) {
       case 'full':

src/main/javascript/view/HeaderView.js

@@ -28,8 +28,7 @@ SwaggerUi.Views.HeaderView = Backbone.View.extend({
     }
 
     this.trigger('update-swagger-ui', {
-      url: $('#input_baseUrl').val(),
+      url: $('#input_baseUrl').val()
-      apiKey: $('#input_apiKey').val()
     });
   },
 
@@ -40,7 +39,6 @@ SwaggerUi.Views.HeaderView = Backbone.View.extend({
 
     $('#input_baseUrl').val(url);
 
-    //$('#input_apiKey').val(apiKey);
     if (trigger) {
       this.trigger('update-swagger-ui', {url:url});
     }

src/main/javascript/view/MainView.js

@@ -83,26 +83,9 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
   },
 
   render: function () {
-    // Render the outer container for resources
-    var authsModel, parsedDefinitions;
-
     $(this.el).html(Handlebars.templates.main(this.model));
     this.model.securityDefinitions = this.model.securityDefinitions || {};
 
-    if (!_.isEmpty(this.model.securityDefinitions)) {
-      parsedDefinitions = _.map(this.model.securityDefinitions, function (auth, name) {
-        var result = {};
-        result[name] = auth;
-        return result;
-      });
-
-      authsModel = { auths: parsedDefinitions };
-
-      authsModel.isLogout = !_.isEmpty(window.swaggerUi.api.clientAuthorizations.authz);
-      this.authView = new SwaggerUi.Views.AuthButtonView({model: authsModel, router: this.router});
-      this.$('.authorize-wrapper').append(this.authView.render().el);
-    }
-
     // Render each resource
 
     var resources = {};

src/main/less/auth.less

@@ -30,6 +30,17 @@
     }
   }
 
+  #auth_container {
+    color: #fff;
+    width: 190px;
+    float: left;
+    border: none;
+    padding: 5px;
+    .authorize__btn {
+      color: #fff;
+    }
+  }
+
   .auth_container {
     padding: 0 0 10px;
     margin-bottom: 5px;