[auth] Fixed applying api key

dist/css/print.css

@@ -1181,6 +1181,9 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
 .swagger-section .authorize__btn:hover {
   text-decoration: underline;
   cursor: pointer;
@@ -1203,7 +1206,7 @@
   cursor: pointer;
 }
 .swagger-section .auth_container .key_input_container {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1232,6 +1235,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }

dist/css/screen.css

@@ -1181,6 +1181,9 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
 .swagger-section .authorize__btn:hover {
   text-decoration: underline;
   cursor: pointer;
@@ -1203,7 +1206,7 @@
   cursor: pointer;
 }
 .swagger-section .auth_container .key_input_container {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1232,6 +1235,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }

dist/swagger-ui.js

@@ -8,12 +8,16 @@
 this["Handlebars"]["templates"] = this["Handlebars"]["templates"] || {};
 this["Handlebars"]["templates"]["apikey_button_view"] = Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
   var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
-  return "<div class='auth_container'>\n  <div class='key_input_container'>\n    <div class='auth_label'><label for='input_apiKey_entry'>"
+  return "<div class='auth_container'>\n    <div class='key_input_container'>\n        <div class='auth__description'>"
-    + escapeExpression(((helper = (helper = helpers.keyName || (depth0 != null ? depth0.keyName : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"keyName","hash":{},"data":data}) : helper)))
+    + escapeExpression(((helper = (helper = helpers.description || (depth0 != null ? depth0.description : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"description","hash":{},"data":data}) : helper)))
-    + "</label></div>\n    <input placeholder='api_key' class='auth_input input_apiKey_entry' name='apiKey' type='text'/>\n    <div class='auth_submit'><a class='auth_submit_button' href='#' data-sw-translate>apply</a></div>\n  </div>\n</div>\n";
+    + "</div>\n        <div>\n            <span class='auth_label'><label for='input_apiKey_entry'><span>Api key</span> in "
+    + escapeExpression(((helper = (helper = helpers['in'] || (depth0 != null ? depth0['in'] : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"in","hash":{},"data":data}) : helper)))
+    + "</label></span>\n            <span class='auth_in'><label for='input_apiKey_entry'>"
+    + escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"name","hash":{},"data":data}) : helper)))
+    + " =</label></span>\n            <input placeholder='api_key' class='auth_input input_apiKey_entry' name='apiKey' type='text'/>\n        </div>\n        <div class='auth_submit'><a class='auth_submit_button' href='#' data-sw-translate>apply</a></div>\n    </div>\n</div>\n";
 },"useData":true});
 this["Handlebars"]["templates"]["auth_button"] = Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-  return "<a class='authorize__btn'>Authorize</a>\n";
+  return "<a class='authorize__btn'>Click to Authorize</a>\n";
   },"useData":true});
 this["Handlebars"]["templates"]["basic_auth_button_view"] = Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
   var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
@@ -850,12 +854,10 @@ this["Handlebars"]["templates"]["parameter_content_type"] = Handlebars.template(
   return buffer + "</select>\n";
 },"useData":true});
 this["Handlebars"]["templates"]["popup"] = Handlebars.template({"compiler":[6,">= 2.0.0-beta.1"],"main":function(depth0,helpers,partials,data) {
-  var stack1, helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression, buffer = "<div class=\"api-popup-dialog-wrapper\">\n    <div class=\"api-popup-title\">"
+  var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
+  return "<div class=\"api-popup-dialog-wrapper\">\n    <div class=\"api-popup-title\">"
     + escapeExpression(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper)))
-    + "</div>\n    <div class=\"api-popup-content\">\n        ";
+    + "</div>\n    <div class=\"api-popup-content\"></div>\n    <p class=\"error-msg\"></p>\n    <div class=\"api-popup-actions\">\n        <button class=\"api-popup-cancel api-button gray\" type=\"button\">Cancel</button>\n    </div>\n</div>";
-  stack1 = ((helper = (helper = helpers.content || (depth0 != null ? depth0.content : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"content","hash":{},"data":data}) : helper));
-  if (stack1 != null) { buffer += stack1; }
-  return buffer + "\n    </div>\n    <p class=\"error-msg\"></p>\n    <div class=\"api-popup-actions\">\n        <button class=\"api-popup-cancel api-button gray\" type=\"button\">Cancel</button>\n    </div>\n</div>";
 },"useData":true});
 this["Handlebars"]["templates"]["resource"] = Handlebars.template({"1":function(depth0,helpers,partials,data) {
   return " : ";
@@ -25056,7 +25058,6 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl
     );
     this.router.api.clientAuthorizations.add(this.model.name, keyAuth);
     this.router.load();
-    //$('#apikey_container').show();
   }
 
 });
@@ -25072,7 +25073,10 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
         authBtn: Handlebars.templates.auth_button
     },
 
-    initialize: function(){},
+    initialize: function(opts) {
+        this.options = opts || {};
+        this.router = this.options.router;
+    },
 
     render: function () {
         this.$el.html(this.tpls.authBtn());
@@ -25084,7 +25088,7 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
         var authsModel;
         e.preventDefault();
 
-        authsModel = {title: 'Please authorize', content: this.renderAuths()};
+        authsModel = {title: 'Available authorizations', content: this.renderAuths()};
 
         this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
         this.popup.render();
@@ -25109,7 +25113,7 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
             }
         }
 
-        return el.html();
+        return el;
     }
 });
 
@@ -25295,7 +25299,7 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
     this.model.securityDefinitions = this.model.securityDefinitions || {};
 
     if (this.model.securityDefinitions) {
-      this.authView = new SwaggerUi.Views.AuthView({model: this.model.securityDefinitions});
+      this.authView = new SwaggerUi.Views.AuthView({model: this.model.securityDefinitions, router: this.router});
       this.$('.authorize-wrapper').append(this.authView.render().el);
     }
 
@@ -27353,6 +27357,11 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
     template: Handlebars.templates.popup,
     className: 'api-popup-dialog',
 
+    selectors: {
+        content: '.api-popup-content',
+        main   : '#swagger-ui-container'
+    },
+
     initialize: function(){},
 
     render: function () {
@@ -27362,7 +27371,8 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
         dh = $win.height();
         st = $win.scrollTop();
         this.$el.html(this.template(this.model));
-        $(document.body).append(this.el);
+        this.$(this.selectors.content).append(this.model.content);
+        $(this.selectors.main).first().append(this.el);
         dlgWd = this.$el.outerWidth();
         dlgHt = this.$el.outerHeight();
         top = (dh -dlgHt)/2 + st;

src/main/html/css/print.css

@@ -1181,6 +1181,9 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
 .swagger-section .authorize__btn:hover {
   text-decoration: underline;
   cursor: pointer;
@@ -1203,7 +1206,7 @@
   cursor: pointer;
 }
 .swagger-section .auth_container .key_input_container {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1232,6 +1235,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }

src/main/html/css/screen.css

@@ -1181,6 +1181,9 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
 .swagger-section .authorize__btn:hover {
   text-decoration: underline;
   cursor: pointer;
@@ -1203,7 +1206,7 @@
   cursor: pointer;
 }
 .swagger-section .auth_container .key_input_container {
-  margin-bottom: 10px;
+  margin-bottom: 15px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1232,6 +1235,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }

src/main/javascript/view/ApiKeyButton.js

@@ -28,7 +28,6 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl
     );
     this.router.api.clientAuthorizations.add(this.model.name, keyAuth);
     this.router.load();
-    //$('#apikey_container').show();
   }
 
 });

src/main/javascript/view/AuthView.js

@@ -10,7 +10,10 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
         authBtn: Handlebars.templates.auth_button
     },
 
-    initialize: function(){},
+    initialize: function(opts) {
+        this.options = opts || {};
+        this.router = this.options.router;
+    },
 
     render: function () {
         this.$el.html(this.tpls.authBtn());
@@ -22,7 +25,7 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
         var authsModel;
         e.preventDefault();
 
-        authsModel = {title: 'Please authorize', content: this.renderAuths()};
+        authsModel = {title: 'Available authorizations', content: this.renderAuths()};
 
         this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
         this.popup.render();
@@ -47,6 +50,6 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
             }
         }
 
-        return el.html();
+        return el;
     }
 });

src/main/javascript/view/MainView.js

@@ -88,7 +88,7 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
     this.model.securityDefinitions = this.model.securityDefinitions || {};
 
     if (this.model.securityDefinitions) {
-      this.authView = new SwaggerUi.Views.AuthView({model: this.model.securityDefinitions});
+      this.authView = new SwaggerUi.Views.AuthView({model: this.model.securityDefinitions, router: this.router});
       this.$('.authorize-wrapper').append(this.authView.render().el);
     }
 

src/main/javascript/view/PopupView.js

@@ -8,6 +8,11 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
     template: Handlebars.templates.popup,
     className: 'api-popup-dialog',
 
+    selectors: {
+        content: '.api-popup-content',
+        main   : '#swagger-ui-container'
+    },
+
     initialize: function(){},
 
     render: function () {
@@ -17,7 +22,8 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
         dh = $win.height();
         st = $win.scrollTop();
         this.$el.html(this.template(this.model));
-        $(document.body).append(this.el);
+        this.$(this.selectors.content).append(this.model.content);
+        $(this.selectors.main).first().append(this.el);
         dlgWd = this.$el.outerWidth();
         dlgHt = this.$el.outerHeight();
         top = (dh -dlgHt)/2 + st;

src/main/less/auth.less

@@ -19,6 +19,10 @@
 
   .oauth_submit { text-align: center; }
 
+  .authorize-wrapper {
+    margin: 15px 0 10px;
+  }
+
   .authorize__btn {
     &:hover {
       text-decoration: underline;
@@ -49,7 +53,7 @@
     }
 
     .key_input_container {
-      margin-bottom: 10px;
+      margin-bottom: 15px;
     }
 
     .basic_auth_container {
@@ -84,6 +88,10 @@
     padding-left: 5px;
     padding-bottom: 5px;
   }
+  .api-popup-dialog .api-popup-content {
+    max-height: 500px;
+    overflow-y: auto;
+  }
 
   .api-popup-dialog .api-popup-authbtn { height: 30px; }
 

src/main/template/apikey_button_view.handlebars

@@ -1,7 +1,11 @@
 <div class='auth_container'>
     <div class='key_input_container'>
-    <div class='auth_label'><label for='input_apiKey_entry'>{{keyName}}</label></div>
+        <div class='auth__description'>{{description}}</div>
+        <div>
+            <span class='auth_label'><label for='input_apiKey_entry'><span>Api key</span> in {{in}}</label></span>
+            <span class='auth_in'><label for='input_apiKey_entry'>{{name}} =</label></span>
             <input placeholder='api_key' class='auth_input input_apiKey_entry' name='apiKey' type='text'/>
+        </div>
         <div class='auth_submit'><a class='auth_submit_button' href='#' data-sw-translate>apply</a></div>
     </div>
 </div>

src/main/template/auth_button.handlebars

@@ -1 +1 @@
-<a class='authorize__btn'>Authorize</a>
+<a class='authorize__btn'>Click to Authorize</a>

src/main/template/popup.handlebars

@@ -1,8 +1,6 @@
 <div class="api-popup-dialog-wrapper">
     <div class="api-popup-title">{{title}}</div>
-    <div class="api-popup-content">
+    <div class="api-popup-content"></div>
-        {{{content}}}
-    </div>
     <p class="error-msg"></p>
     <div class="api-popup-actions">
         <button class="api-popup-cancel api-button gray" type="button">Cancel</button>