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

dist/css/print.css

@@ -1181,6 +1181,29 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .auth_container .basic_auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth_submit__button {
+  color: #547f00;
+  border: none;
+  text-decoration: underline;
+  background: none;
+  padding-left: 0;
+  font-size: 1em;
+  cursor: pointer;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
+}
+.swagger-section .auth_container .basic_auth_container {
+  font-size: 0.9em;
+}
 .swagger-section .api-popup-dialog {
   z-index: 10000;
   position: absolute;

dist/css/screen.css

@@ -1181,6 +1181,29 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .auth_container .basic_auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth_submit__button {
+  color: #547f00;
+  border: none;
+  text-decoration: underline;
+  background: none;
+  padding-left: 0;
+  font-size: 1em;
+  cursor: pointer;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
+}
+.swagger-section .auth_container .basic_auth_container {
+  font-size: 0.9em;
+}
 .swagger-section .api-popup-dialog {
   z-index: 10000;
   position: absolute;

src/main/html/css/print.css

@@ -1181,6 +1181,29 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .auth_container .basic_auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth_submit__button {
+  color: #547f00;
+  border: none;
+  text-decoration: underline;
+  background: none;
+  padding-left: 0;
+  font-size: 1em;
+  cursor: pointer;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
+}
+.swagger-section .auth_container .basic_auth_container {
+  font-size: 0.9em;
+}
 .swagger-section .api-popup-dialog {
   z-index: 10000;
   position: absolute;

src/main/html/css/screen.css

@@ -1181,6 +1181,29 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .auth_container .basic_auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth_submit__button {
+  color: #547f00;
+  border: none;
+  text-decoration: underline;
+  background: none;
+  padding-left: 0;
+  font-size: 1em;
+  cursor: pointer;
+}
+.swagger-section .auth_container .key_input_container {
+  margin-bottom: 10px;
+}
+.swagger-section .auth_container .basic_auth_container {
+  font-size: 0.9em;
+}
 .swagger-section .api-popup-dialog {
   z-index: 10000;
   position: absolute;

src/main/javascript/view/ApiKeyButton.js

@@ -3,52 +3,32 @@
 SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to global SwaggerUi
 
   events:{
-    'click #apikey_button' : 'toggleApiKeyContainer',
-    'click #apply_api_key' : 'applyApiKey'
+    'click .auth_submit_button' : 'applyApiKey'
   },
 
-  initialize: function(opts){
+  template: Handlebars.templates.apikey_button_view,
+
+  initialize: function(opts) {
     this.options = opts || {};
     this.router = this.options.router;
   },
 
   render: function(){
-    var template = this.template();
-    $(this.el).html(template(this.model));
+    $(this.el).html(this.template(this.model));
 
     return this;
   },
 
 
-  applyApiKey: function(){
+  applyApiKey: function() {
     var keyAuth = new SwaggerClient.ApiKeyAuthorization(
       this.model.name,
-      $('#input_apiKey_entry').val(),
+      this.$('.input_apiKey_entry').val(),
       this.model.in
     );
     this.router.api.clientAuthorizations.add(this.model.name, keyAuth);
     this.router.load();
-    $('#apikey_container').show();
-  },
-
-  toggleApiKeyContainer: function(){
-    if ($('#apikey_container').length) {
-
-      var elem = $('#apikey_container').first();
-
-      if (elem.is(':visible')){
-        elem.hide();
-      } else {
-
-        // hide others
-        $('.auth_container').hide();
-        elem.show();
-      }
-    }
-  },
-
-  template: function(){
-    return Handlebars.templates.apikey_button_view;
+    //$('#apikey_container').show();
   }
 
 });

src/main/javascript/view/BasicAuthButton.js

@@ -8,43 +8,25 @@ SwaggerUi.Views.BasicAuthButton = Backbone.View.extend({
     this.router = this.options.router;
   },
 
+  template: Handlebars.templates.basic_auth_button_view,
+
   render: function(){
-    var template = this.template();
-    $(this.el).html(template(this.model));
+    $(this.el).html(this.template(this.model));
 
     return this;
   },
 
   events: {
-    'click #basic_auth_button' : 'togglePasswordContainer',
-    'click #apply_basic_auth' : 'applyPassword'
+    'submit .key_input_container' : 'applyPassword'
   },
 
-  applyPassword: function(event){
+  applyPassword: function(event) {
     event.preventDefault();
-    var username = $('#input_username').val();
-    var password = $('#input_password').val();
+    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();
-    $('#basic_auth_container').hide();
-  },
-
-  togglePasswordContainer: function(){
-    if ($('#basic_auth_container').length) {
-      var elem = $('#basic_auth_container').show();
-      if (elem.is(':visible')){
-        elem.slideUp();
-      } else {
-        // hide others
-        $('.auth_container').hide();
-        elem.show();
-      }
-    }
-  },
-
-  template: function(){
-    return Handlebars.templates.basic_auth_button_view;
   }
 
 });

src/main/javascript/view/MainView.js

@@ -82,26 +82,26 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
 
   },
 
-  render: function(){
-    if (this.model.securityDefinitions) {
-      for (var name in this.model.securityDefinitions) {
-        var auth = this.model.securityDefinitions[name];
-        var button;
-
-        if (auth.type === 'apiKey' && $('#apikey_button').length === 0) {
-          button = new SwaggerUi.Views.ApiKeyButton({model: auth, router:  this.router}).render().el;
-          $('.auth_main_container').append(button);
-        }
-
-        if (auth.type === 'basicAuth' && $('#basic_auth_button').length === 0) {
-          button = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
-          $('.auth_main_container').append(button);
-        }
-      }
-    }
+  render: function () {
+    var name, authEl, auth;
 
     // Render the outer container for resources
     $(this.el).html(Handlebars.templates.main(this.model));
+    this.model.securityDefinitions = this.model.securityDefinitions || {};
+
+    for (name in this.model.securityDefinitions) {
+      auth = this.model.securityDefinitions[name];
+
+      if (auth.type === 'apiKey') {
+        authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router:  this.router}).render().el;
+        $('.auth_main_container').append(authEl);
+      }
+
+      if (auth.type === 'basic' && $('.auth_main_container .basic_auth_container').length === 0) {
+        authEl = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).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;
-    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);
-            }
-          }
-        }
-      }
-    }
+
+    this.handleAuth();
+
     if (typeof this.model.responses !== 'undefined') {
       this.model.responseMessages = [];
       ref2 = this.model.responses;
@@ -840,6 +795,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,6 +19,37 @@
 
   .oauth_submit { text-align: center; }
 
+  .auth_container {
+
+    .basic_auth__title {
+      color: #547f00;
+      font-size: 1.2em;
+    }
+
+    .auth__description {
+      color: #999999;
+      margin-bottom: 5px;
+    }
+
+    .auth_submit__button {
+      color: #547f00;
+      border: none;
+      text-decoration: underline;
+      background: none;
+      padding-left: 0;
+      font-size: 1em;
+      cursor: pointer;
+    }
+
+    .key_input_container {
+      margin-bottom: 10px;
+    }
+
+    .basic_auth_container {
+      font-size: 0.9em;
+    }
+  }
+
   .api-popup-dialog {
     z-index: 10000;
     position: absolute;

src/main/template/apikey_button_view.handlebars

@@ -1,8 +1,7 @@
-<!--div class='auth_button' id='apikey_button'><img class='auth_icon' alt='apply api key' src='images/apikey.jpeg'></div-->
-<div class='auth_container' id='apikey_container'>
+<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' id='input_apiKey_entry' name='apiKey' type='text'/>
-    <div class='auth_submit'><a class='auth_submit_button' id='apply_api_key' href='#' data-sw-translate>apply</a></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

@@ -1,11 +1,12 @@
-<div class='auth_button' id='basic_auth_button'><img class='auth_icon' src='images/password.jpeg'></div>
-<div class='auth_container' id='basic_auth_container'>
-  <div class='key_input_container'>
-    <div class="auth_label"><label for="input_username" data-sw-translate>Username</label></div>
-    <input placeholder="username" class="auth_input" id="input_username" name="username" type="text"/>
-    <div class="auth_label"><label for="password" data-sw-translate>Password</label></div>
-    <input placeholder="password" class="auth_input" id="input_password" name="password" type="password"/>
-    <div class='auth_submit'><a class='auth_submit_button' id="apply_basic_auth" href="#">apply</a></div>
-  </div>
+<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,6 +14,8 @@
   {{/if}}
 </div>
 <div class='container' id='resources_container'>
+  <div class="auth_main_container"></div>
+
   <ul id='resources'></ul>
 
   <div class="footer">