[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;
 }

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>
-    <input placeholder='api_key' class='auth_input input_apiKey_entry' name='apiKey' type='text'/>
-    <div class='auth_submit'><a class='auth_submit_button' href='#' data-sw-translate>apply</a></div>
-  </div>
+    <div class='key_input_container'>
+        <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">
-        {{{content}}}
-    </div>
+    <div class="api-popup-content"></div>
     <p class="error-msg"></p>
     <div class="api-popup-actions">
         <button class="api-popup-cancel api-button gray" type="button">Cancel</button>