[auth]: Api key, basic authorization in main view

dist/css/print.css

@@ -1181,18 +1181,6 @@
 .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;
-}
-.swagger-section .auth_container {
-  padding: 0 0 10px;
-  margin-bottom: 5px;
-  border-bottom: solid 1px #CCC;
-}
 .swagger-section .auth_container .basic_auth__title {
   color: #547f00;
   font-size: 1.2em;
@@ -1201,8 +1189,7 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_submit__button {
-.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1210,7 +1197,9 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
-  outline: none;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1239,10 +1228,6 @@
   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,18 +1181,6 @@
 .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;
-}
-.swagger-section .auth_container {
-  padding: 0 0 10px;
-  margin-bottom: 5px;
-  border-bottom: solid 1px #CCC;
-}
 .swagger-section .auth_container .basic_auth__title {
   color: #547f00;
   font-size: 1.2em;
@@ -1201,8 +1189,7 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_submit__button {
-.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1210,7 +1197,9 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
-  outline: none;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1239,10 +1228,6 @@
   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,18 +1181,6 @@
 .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;
-}
-.swagger-section .auth_container {
-  padding: 0 0 10px;
-  margin-bottom: 5px;
-  border-bottom: solid 1px #CCC;
-}
 .swagger-section .auth_container .basic_auth__title {
   color: #547f00;
   font-size: 1.2em;
@@ -1201,8 +1189,7 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_submit__button {
-.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1210,7 +1197,9 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
-  outline: none;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1239,10 +1228,6 @@
   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,18 +1181,6 @@
 .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;
-}
-.swagger-section .auth_container {
-  padding: 0 0 10px;
-  margin-bottom: 5px;
-  border-bottom: solid 1px #CCC;
-}
 .swagger-section .auth_container .basic_auth__title {
   color: #547f00;
   font-size: 1.2em;
@@ -1201,8 +1189,7 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_submit__button {
-.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1210,7 +1197,9 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
-  outline: none;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1239,10 +1228,6 @@
   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

@@ -0,0 +1,34 @@
+'use strict';
+
+SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to global SwaggerUi
+
+  events:{
+    'click .auth_submit_button' : 'applyApiKey'
+  },
+
+  template: Handlebars.templates.apikey_button_view,
+
+  initialize: function(opts) {
+    this.options = opts || {};
+    this.router = this.options.router;
+  },
+
+  render: function(){
+    $(this.el).html(this.template(this.model));
+
+    return this;
+  },
+
+
+  applyApiKey: function() {
+    var keyAuth = new SwaggerClient.ApiKeyAuthorization(
+      this.model.name,
+      this.$('.input_apiKey_entry').val(),
+      this.model.in
+    );
+    this.router.api.clientAuthorizations.add(this.model.name, keyAuth);
+    this.router.load();
+    //$('#apikey_container').show();
+  }
+
+});

src/main/javascript/view/BasicAuthButton.js

@@ -0,0 +1,32 @@
+'use strict';
+
+SwaggerUi.Views.BasicAuthButton = Backbone.View.extend({
+
+
+  initialize: function (opts) {
+    this.options = opts || {};
+    this.router = this.options.router;
+  },
+
+  template: Handlebars.templates.basic_auth_button_view,
+
+  render: function(){
+    $(this.el).html(this.template(this.model));
+
+    return this;
+  },
+
+  events: {
+    'submit .key_input_container' : 'applyPassword'
+  },
+
+  applyPassword: function(event) {
+    event.preventDefault();
+    var username = this.$('.basic_auth__username').val();
+    var password = this.$('.basic_auth__password').val();
+    var basicAuth = new SwaggerClient.PasswordAuthorization('basic', username, password);
+    this.router.api.clientAuthorizations.add(this.model.type, basicAuth);
+    this.router.load();
+  }
+
+});

src/main/javascript/view/MainView.js

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

src/main/javascript/view/OperationView.js

@@ -91,54 +91,9 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
       this.model.isReadOnly = true;
     }
     this.model.description = this.model.description || this.model.notes;
-    this.model.oauth = null;
+
-    modelAuths = this.model.authorizations || this.model.security;
+    this.handleAuth();
-    if (modelAuths) {
+
-      if (Array.isArray(modelAuths)) {
-        for (l = 0, len = modelAuths.length; l < len; l++) {
-          auths = modelAuths[l];
-          for (key in auths) {
-            for (a in this.auths) {
-              auth = this.auths[a];
-              if (key === auth.name) {
-                if (auth.type === 'oauth2') {
-                  this.model.oauth = {};
-                  this.model.oauth.scopes = [];
-                  ref1 = auth.value.scopes;
-                  for (k in ref1) {
-                    v = ref1[k];
-                    scopeIndex = auths[key].indexOf(k);
-                    if (scopeIndex >= 0) {
-                      o = {
-                        scope: k,
-                        description: v
-                      };
-                      this.model.oauth.scopes.push(o);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      } else {
-        for (k in modelAuths) {
-          v = modelAuths[k];
-          if (k === 'oauth2') {
-            if (this.model.oauth === null) {
-              this.model.oauth = {};
-            }
-            if (this.model.oauth.scopes === void 0) {
-              this.model.oauth.scopes = [];
-            }
-            for (m = 0, len1 = v.length; m < len1; m++) {
-              o = v[m];
-              this.model.oauth.scopes.push(o);
-            }
-          }
-        }
-      }
-    }
     if (typeof this.model.responses !== 'undefined') {
       this.model.responseMessages = [];
       ref2 = this.model.responses;
@@ -849,6 +804,95 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
       }
     }
     return null;
+  },
+
+  handleAuth: function () {
+    var modelAuths, auths, i, l, len, len1, ref1, scopeIndex;
+    var definitionsMap = {};
+
+    this.auths = this.auths || [];
+
+    for (l = 0, len = this.auths.length; l < len; l++) {
+      definitionsMap[this.auths[l].name] = this.auths[l].value;
+    }
+
+    this.model.oauth = null;
+
+    modelAuths = this.model.authorizations || this.model.security;
+
+    if (!modelAuths) { return null; }
+
+    if (Array.isArray(modelAuths)) {
+      modelAuths.forEach(function (security) {
+        for (i in security) {
+          security[i] = security[i] || {};
+          switch (security[i].type) {
+            case 'apiKey': break;
+            case 'basic': break;
+            default:
+                  //handle from definitions
+          }
+        }
+      });
+    }
+
+
+    if (Array.isArray(modelAuths)) {
+      for (l = 0, len = modelAuths.length; l < len; l++) {
+
+        //auths - single auth from security
+        auths = modelAuths[l];
+        for (key in auths) {
+
+          //this.auths - auth from definitions
+          for (a in this.auths) {
+            //auth - one single auth from definition
+            auth = this.auths[a];
+
+            // if security name is in definitions
+            if (key === auth.name) {
+
+              if (auth.type === 'oauth2') {
+                this.model.oauth = {};
+                this.model.oauth.scopes = [];
+                ref1 = auth.value.scopes;
+                for (k in ref1) {
+                  v = ref1[k];
+                  scopeIndex = auths[key].indexOf(k);
+                  if (scopeIndex >= 0) {
+                    o = {
+                      scope: k,
+                      description: v
+                    };
+                    this.model.oauth.scopes.push(o);
+                  }
+                }
+              }
+              //if (auth.type === 'apiKey') {
+              //  console.log('apiKey')
+              //}
+            }
+          }
+        }
+      }
+    } else {
+      for (k in modelAuths) {
+        v = modelAuths[k];
+        if (k === 'oauth2') {
+          if (this.model.oauth === null) {
+            this.model.oauth = {};
+          }
+          if (this.model.oauth.scopes === void 0) {
+            this.model.oauth.scopes = [];
+          }
+          for (m = 0, len1 = v.length; m < len1; m++) {
+            o = v[m];
+            this.model.oauth.scopes.push(o);
+          }
+        }
+      }
+    }
+
   }
 
 });

src/main/less/auth.less

@@ -19,23 +19,9 @@
 
   .oauth_submit { text-align: center; }
 
-  .authorize-wrapper {
-    margin: 15px 0 10px;
-  }
-
-  .authorize__btn {
-    &:hover {
-      text-decoration: underline;
-      cursor: pointer;
-    }
-  }
-
   .auth_container {
-    padding: 0 0 10px;
-    margin-bottom: 5px;
-    border-bottom: solid 1px #CCC;
 
-  .basic_auth__title {
+    .basic_auth__title {
       color: #547f00;
       font-size: 1.2em;
     }
@@ -45,7 +31,7 @@
       margin-bottom: 5px;
     }
 
-    .auth_submit__button, .auth_logout__button {
+    .auth_submit__button {
       color: #547f00;
       border: none;
       text-decoration: underline;
@@ -53,7 +39,10 @@
       padding-left: 0;
       font-size: 1em;
       cursor: pointer;
-      outline: none;
+    }
+
+    .key_input_container {
+      margin-bottom: 10px;
     }
 
     .basic_auth_container {
@@ -88,10 +77,6 @@
     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

@@ -0,0 +1,7 @@
+<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>

src/main/template/basic_auth_button_view.handlebars

@@ -0,0 +1,12 @@
+<div class='auth_container basic_auth_container'>
+  <h3 class="basic_auth__title">Basic authentication</h3>
+  <form class="key_input_container">
+    <div class="auth__description">{{description}}</div>
+    <div class="auth_label"><label data-sw-translate>username</label></div>
+    <input required placeholder="username" class="basic_auth__username auth_input" name="username" type="text"/>
+    <div class="auth_label"><label data-sw-translate>password</label></div>
+    <input required placeholder="password" class="basic_auth__password auth_input" name="password" type="password"/>
+    <div class='auth_submit'><input type="submit" class="auth_submit__button" value="apply"></div>
+  </form>
+</div>
+

src/main/template/main.handlebars

@@ -14,7 +14,7 @@
   {{/if}}
 </div>
 <div class='container' id='resources_container'>
-  <div class='authorize-wrapper'></div>
+  <div class="auth_main_container"></div>
 
   <ul id='resources'></ul>