updated for auth

Cakefile

@@ -16,6 +16,8 @@ sourceFiles  = [
   'view/ContentTypeView'
   'view/ResponseContentTypeView'
   'view/ParameterContentTypeView'
+  'view/ApiKeyButton'
+  'view/BasicAuthButton'
 ]
 
 

dist/lib/shred.bundle.js

@@ -2131,10 +2131,10 @@ require.define("/shred/mixins/headers.js", function (require, module, exports, _
 // to `Content-Type`.
 
 var corsetCase = function(string) {
-  return string.toLowerCase()
+  return string;//.toLowerCase()
       //.replace("_","-")
-      .replace(/(^|-)(\w)/g, 
+      // .replace(/(^|-)(\w)/g, 
-          function(s) { return s.toUpperCase(); });
+          // function(s) { return s.toUpperCase(); });
 };
 
 // We suspect that `initializeHeaders` was once more complicated ...

dist/lib/swagger-client.js

@@ -87,13 +87,18 @@ SwaggerAuthorizations.prototype.apply = function(obj, authorizations) {
     }
   }
   else {
-    for(name in authorizations) {
+    if(Array.isArray(authorizations)) {
-      for (key in this.authz) {
+      var i;
-        if(key == name) {
+      for(i = 0; i < authorizations.length; i++) {
-          value = this.authz[key];
+        var auth = authorizations[i];
-          result = value.apply(obj, authorizations);
+        log(auth);
-          if (result === true)
+        for (key in this.authz) {
-            status = true;
+          var value = this.authz[key];
+          if(typeof value !== 'undefined') {
+            result = value.apply(obj, authorizations);
+            if (result === true)
+              status = true;
+          }
         }
       }
     }
@@ -382,7 +387,7 @@ SwaggerClient.prototype.buildFromSpec = function(response) {
   this.apisArray = [];
   this.consumes = response.consumes;
   this.produces = response.produces;
-  this.authSchemes = response.authorizations;
+  this.securityDefinitions = response.securityDefinitions;
 
   var location = this.parseUri(this.url);
   if(typeof this.schemes === 'undefined' || this.schemes.length === 0) {
@@ -540,6 +545,7 @@ var Operation = function(parent, operationId, httpMethod, path, args, definition
   this.responses = (args.responses||{});
   this.type = null;
   this.security = args.security;
+  this.authorizations = args.security;
   this.description = args.description;
 
   var i;

dist/swagger-ui.js

@@ -185,6 +185,35 @@ var Docs = {
 	}
 };(function() {
   var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['apikey_button_view'] = template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [4,'>= 1.0.0'];
+helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;
+
+
+  buffer += "<div class='auth_button' id='apikey_button'><img class='auth_icon' alt='apply api key' src='images/apikey.jpeg'></div>\n<div class='auth_container' id='apikey_container'>\n  <div class='key_input_container'>\n    <div class='auth_label'>";
+  if (stack1 = helpers.keyName) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
+  else { stack1 = depth0.keyName; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  buffer += escapeExpression(stack1)
+    + "</div>\n    <input placeholder=\"api_key\" class=\"auth_input\" id=\"input_apiKey_entry\" name=\"apiKey\" type=\"text\"/>\n    <div class='auth_submit'><a class='auth_submit_button' id=\"apply_api_key\" href=\"#\">apply</a></div>\n  </div>\n</div>\n\n";
+  return buffer;
+  });
+})();
+
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
+templates['basic_auth_button_view'] = template(function (Handlebars,depth0,helpers,partials,data) {
+  this.compilerInfo = [4,'>= 1.0.0'];
+helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
+  
+
+
+  return "<div class='auth_button' id='basic_auth_button'><img class='auth_icon' src='images/password.jpeg'></div>\n<div class='auth_container' id='basic_auth_container'>\n  <div class='key_input_container'>\n    <div class=\"auth_label\">Username</div>\n    <input placeholder=\"username\" class=\"auth_input\" id=\"input_username\" name=\"username\" type=\"text\"/>\n    <div class=\"auth_label\">Password</div>\n    <input placeholder=\"password\" class=\"auth_input\" id=\"input_password\" name=\"password\" type=\"password\"/>\n    <div class='auth_submit'><a class='auth_submit_button' id=\"apply_basic_auth\" href=\"#\">apply</a></div>\n  </div>\n</div>\n\n";
+  });
+})();
+
+(function() {
+  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
 templates['content_type'] = template(function (Handlebars,depth0,helpers,partials,data) {
   this.compilerInfo = [4,'>= 1.0.0'];
 helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
@@ -317,7 +346,7 @@ function program10(depth0,data) {
   buffer += "<div class='info' id='api_info'>\n  ";
   stack1 = helpers['if'].call(depth0, depth0.info, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
   if(stack1 || stack1 === 0) { buffer += stack1; }
-  buffer += "\n</div>\n<div class='container' id='resources_container'>\n  <ul id='resources'>\n  </ul>\n\n  <div class=\"footer\">\n    <br>\n    <br>\n    <h4 style=\"color: #999\">[ <span style=\"font-variant: small-caps\">base url</span>: ";
+  buffer += "\n</div>\n<div class='container' id='resources_container'>\n  <ul id='resources'></ul>\n\n  <div class=\"footer\">\n    <br>\n    <br>\n    <h4 style=\"color: #999\">[ <span style=\"font-variant: small-caps\">base url</span>: ";
   if (stack1 = helpers.basePath) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
   else { stack1 = depth0.basePath; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
   buffer += escapeExpression(stack1)
@@ -1271,7 +1300,7 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
 
 // Generated by CoffeeScript 1.6.3
 (function() {
-  var ContentTypeView, HeaderView, MainView, OperationView, ParameterContentTypeView, ParameterView, ResourceView, ResponseContentTypeView, SignatureView, StatusCodeView, SwaggerUi, _ref, _ref1, _ref10, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9,
+  var ApiKeyButton, BasicAuthButton, ContentTypeView, HeaderView, MainView, OperationView, ParameterContentTypeView, ParameterView, ResourceView, ResponseContentTypeView, SignatureView, StatusCodeView, SwaggerUi, _ref, _ref1, _ref10, _ref11, _ref12, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
@@ -1515,23 +1544,20 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
     };
 
     MainView.prototype.initialize = function(opts) {
-      var name, route, sorter, sorterName, url, _i, _len, _ref3;
+      var auth, key, name, url, value, _ref3;
       if (opts == null) {
         opts = {};
       }
-      if (opts.swaggerOptions.sorter) {
+      this.model.auths = [];
-        sorterName = opts.swaggerOptions.sorter;
+      _ref3 = this.model.securityDefinitions;
-        sorter = sorters[sorterName];
+      for (key in _ref3) {
-        if (this.model.apisArray) {
+        value = _ref3[key];
-          _ref3 = this.model.apisArray;
+        auth = {
-          for (_i = 0, _len = _ref3.length; _i < _len; _i++) {
+          name: key,
-            route = _ref3[_i];
+          type: value.type,
-            route.operationsArray.sort(sorter);
+          value: value
-          }
+        };
-          if (sorterName === "alpha") {
+        this.model.auths.push(auth);
-            this.model.apisArray.sort(sorter);
-          }
-        }
       }
       if (this.model.info && this.model.info.license && typeof this.model.info.license === 'string') {
         name = this.model.info.license;
@@ -1558,7 +1584,24 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
     };
 
     MainView.prototype.render = function() {
-      var counter, id, resource, resources, _i, _len, _ref3;
+      var auth, button, counter, id, name, resource, resources, _i, _len, _ref3;
+      if (this.model.securityDefinitions) {
+        for (name in this.model.securityDefinitions) {
+          auth = this.model.securityDefinitions[name];
+          if (auth.type === "apiKey" && $("#apikey_button").length === 0) {
+            button = new ApiKeyButton({
+              model: auth
+            }).render().el;
+            $('.auth_main_container').append(button);
+          }
+          if (auth.type === "basicAuth" && $("#basic_auth_button").length === 0) {
+            button = new BasicAuthButton({
+              model: auth
+            }).render().el;
+            $('.auth_main_container').append(button);
+          }
+        }
+      }
       $(this.el).html(Handlebars.templates.main(this.model));
       resources = {};
       counter = 0;
@@ -1572,12 +1615,12 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         }
         resource.id = id;
         resources[id] = resource;
-        this.addResource(resource);
+        this.addResource(resource, this.model.auths);
       }
       return this;
     };
 
-    MainView.prototype.addResource = function(resource) {
+    MainView.prototype.addResource = function(resource, auths) {
       var resourceView;
       resource.id = resource.id.replace(/\s/g, '_');
       resourceView = new ResourceView({
@@ -1585,6 +1628,7 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         tagName: 'li',
         id: 'resource_' + resource.id,
         className: 'resource',
+        auths: auths,
         swaggerOptions: this.options.swaggerOptions
       });
       return $('#resources').append(resourceView.render().el);
@@ -1606,7 +1650,11 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       return _ref3;
     }
 
-    ResourceView.prototype.initialize = function() {
+    ResourceView.prototype.initialize = function(opts) {
+      if (opts == null) {
+        opts = {};
+      }
+      this.auths = opts.auths;
       if ("" === this.model.description) {
         return this.model.description = null;
       }
@@ -1646,7 +1694,8 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         model: operation,
         tagName: 'li',
         className: 'endpoint',
-        swaggerOptions: this.options.swaggerOptions
+        swaggerOptions: this.options.swaggerOptions,
+        auths: this.auths
       });
       $('.endpoints', $(this.el)).append(operationView.render().el);
       return this.number++;
@@ -1680,7 +1729,13 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       'mouseout .api-ic': 'mouseExit'
     };
 
-    OperationView.prototype.initialize = function() {};
+    OperationView.prototype.initialize = function(opts) {
+      if (opts == null) {
+        opts = {};
+      }
+      this.auths = opts.auths;
+      return this;
+    };
 
     OperationView.prototype.mouseEnter = function(e) {
       var elem, hgh, pos, scMaxX, scMaxY, scX, scY, wd, x, y;
@@ -1717,7 +1772,7 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
     };
 
     OperationView.prototype.render = function() {
-      var code, contentTypeModel, isMethodSubmissionSupported, k, o, param, ref, responseContentTypeView, responseSignatureView, schema, schemaObj, signatureModel, statusCode, type, v, value, _i, _j, _k, _l, _len, _len1, _len2, _len3, _ref5, _ref6, _ref7, _ref8, _ref9;
+      var a, auth, auths, code, contentTypeModel, isMethodSubmissionSupported, k, key, o, param, ref, responseContentTypeView, responseSignatureView, schema, schemaObj, signatureModel, statusCode, type, v, value, _i, _j, _k, _l, _len, _len1, _len2, _len3, _len4, _m, _ref10, _ref11, _ref5, _ref6, _ref7, _ref8, _ref9;
       isMethodSubmissionSupported = true;
       if (!isMethodSubmissionSupported) {
         this.model.isReadOnly = true;
@@ -1727,29 +1782,56 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         this.model.description = this.model.description.replace(/(?:\r\n|\r|\n)/g, '<br />');
       }
       this.model.oauth = null;
+      log(this.model.authorizations);
       if (this.model.authorizations) {
-        _ref5 = this.model.authorizations;
+        if (Array.isArray(this.model.authorizations)) {
-        for (k in _ref5) {
+          _ref5 = this.model.authorizations;
-          v = _ref5[k];
+          for (_i = 0, _len = _ref5.length; _i < _len; _i++) {
-          if (k === "oauth2") {
+            auths = _ref5[_i];
-            if (this.model.oauth === null) {
+            for (key in auths) {
-              this.model.oauth = {};
+              auth = auths[key];
+              for (a in this.auths) {
+                auth = this.auths[a];
+                if (auth.type === 'oauth2') {
+                  this.model.oauth = {};
+                  this.model.oauth.scopes = [];
+                  _ref6 = auth.value.scopes;
+                  for (k in _ref6) {
+                    v = _ref6[k];
+                    o = {
+                      scope: k,
+                      description: v
+                    };
+                    this.model.oauth.scopes.push(o);
+                  }
+                }
+              }
             }
-            if (this.model.oauth.scopes === void 0) {
+          }
-              this.model.oauth.scopes = [];
+        } else {
-            }
+          _ref7 = this.model.authorizations;
-            for (_i = 0, _len = v.length; _i < _len; _i++) {
+          for (k in _ref7) {
-              o = v[_i];
+            v = _ref7[k];
-              this.model.oauth.scopes.push(o);
+            if (k === "oauth2") {
+              if (this.model.oauth === null) {
+                this.model.oauth = {};
+              }
+              if (this.model.oauth.scopes === void 0) {
+                this.model.oauth.scopes = [];
+              }
+              for (_j = 0, _len1 = v.length; _j < _len1; _j++) {
+                o = v[_j];
+                this.model.oauth.scopes.push(o);
+              }
             }
           }
         }
       }
       if (typeof this.model.responses !== 'undefined') {
         this.model.responseMessages = [];
-        _ref6 = this.model.responses;
+        _ref8 = this.model.responses;
-        for (code in _ref6) {
+        for (code in _ref8) {
-          value = _ref6[code];
+          value = _ref8[code];
           schema = null;
           schemaObj = this.model.responses[code].schema;
           if (schemaObj && schemaObj['$ref']) {
@@ -1789,9 +1871,9 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       };
       contentTypeModel.consumes = this.model.consumes;
       contentTypeModel.produces = this.model.produces;
-      _ref7 = this.model.parameters;
+      _ref9 = this.model.parameters;
-      for (_j = 0, _len1 = _ref7.length; _j < _len1; _j++) {
+      for (_k = 0, _len2 = _ref9.length; _k < _len2; _k++) {
-        param = _ref7[_j];
+        param = _ref9[_k];
         type = param.type || param.dataType;
         if (typeof type === 'undefined') {
           schema = param.schema;
@@ -1815,14 +1897,14 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         model: contentTypeModel
       });
       $('.response-content-type', $(this.el)).append(responseContentTypeView.render().el);
-      _ref8 = this.model.parameters;
+      _ref10 = this.model.parameters;
-      for (_k = 0, _len2 = _ref8.length; _k < _len2; _k++) {
+      for (_l = 0, _len3 = _ref10.length; _l < _len3; _l++) {
-        param = _ref8[_k];
+        param = _ref10[_l];
         this.addParameter(param, contentTypeModel.consumes);
       }
-      _ref9 = this.model.responseMessages;
+      _ref11 = this.model.responseMessages;
-      for (_l = 0, _len3 = _ref9.length; _l < _len3; _l++) {
+      for (_m = 0, _len4 = _ref11.length; _m < _len4; _m++) {
-        statusCode = _ref9[_l];
+        statusCode = _ref11[_m];
         this.addStatusCode(statusCode);
       }
       return this;
@@ -2476,4 +2558,107 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
 
   })(Backbone.View);
 
+  ApiKeyButton = (function(_super) {
+    __extends(ApiKeyButton, _super);
+
+    function ApiKeyButton() {
+      _ref11 = ApiKeyButton.__super__.constructor.apply(this, arguments);
+      return _ref11;
+    }
+
+    ApiKeyButton.prototype.initialize = function() {};
+
+    ApiKeyButton.prototype.render = function() {
+      var template;
+      template = this.template();
+      $(this.el).html(template(this.model));
+      return this;
+    };
+
+    ApiKeyButton.prototype.events = {
+      "click #apikey_button": "toggleApiKeyContainer",
+      "click #apply_api_key": "applyApiKey"
+    };
+
+    ApiKeyButton.prototype.applyApiKey = function() {
+      var elem;
+      window.authorizations.add(this.model.name, new ApiKeyAuthorization(this.model.name, $("#input_apiKey_entry").val(), this.model["in"]));
+      window.swaggerUi.load();
+      return elem = $('#apikey_container').show();
+    };
+
+    ApiKeyButton.prototype.toggleApiKeyContainer = function() {
+      var elem;
+      if ($('#apikey_container').length > 0) {
+        elem = $('#apikey_container').first();
+        if (elem.is(':visible')) {
+          return elem.hide();
+        } else {
+          $('.auth_container').hide();
+          return elem.show();
+        }
+      }
+    };
+
+    ApiKeyButton.prototype.template = function() {
+      return Handlebars.templates.apikey_button_view;
+    };
+
+    return ApiKeyButton;
+
+  })(Backbone.View);
+
+  BasicAuthButton = (function(_super) {
+    __extends(BasicAuthButton, _super);
+
+    function BasicAuthButton() {
+      _ref12 = BasicAuthButton.__super__.constructor.apply(this, arguments);
+      return _ref12;
+    }
+
+    BasicAuthButton.prototype.initialize = function() {};
+
+    BasicAuthButton.prototype.render = function() {
+      var template;
+      template = this.template();
+      $(this.el).html(template(this.model));
+      return this;
+    };
+
+    BasicAuthButton.prototype.events = {
+      "click #basic_auth_button": "togglePasswordContainer",
+      "click #apply_basic_auth": "applyPassword"
+    };
+
+    BasicAuthButton.prototype.applyPassword = function() {
+      var elem, password, username;
+      console.log("applying password");
+      username = $(".input_username").val();
+      password = $(".input_password").val();
+      window.authorizations.add(this.model.type, new PasswordAuthorization("basic", username, password));
+      window.swaggerUi.load();
+      return elem = $('#basic_auth_container').hide();
+    };
+
+    BasicAuthButton.prototype.togglePasswordContainer = function() {
+      var elem;
+      if ($('#basic_auth_container').length > 0) {
+        elem = $('#basic_auth_container').show();
+        if (elem.is(':visible')) {
+          return elem.slideUp();
+        } else {
+          $('.auth_container').hide();
+          return elem.show();
+        }
+      }
+    };
+
+    BasicAuthButton.prototype.template = function() {
+      return Handlebars.templates.basic_auth_button_view;
+    };
+
+    return BasicAuthButton;
+
+  })(Backbone.View);
+
 }).call(this);

lib/shred.bundle.js

@@ -2131,10 +2131,10 @@ require.define("/shred/mixins/headers.js", function (require, module, exports, _
 // to `Content-Type`.
 
 var corsetCase = function(string) {
-  return string.toLowerCase()
+  return string;//.toLowerCase()
       //.replace("_","-")
-      .replace(/(^|-)(\w)/g, 
+      // .replace(/(^|-)(\w)/g, 
-          function(s) { return s.toUpperCase(); });
+          // function(s) { return s.toUpperCase(); });
 };
 
 // We suspect that `initializeHeaders` was once more complicated ...

lib/swagger-client.js

@@ -87,13 +87,18 @@ SwaggerAuthorizations.prototype.apply = function(obj, authorizations) {
     }
   }
   else {
-    for(name in authorizations) {
+    if(Array.isArray(authorizations)) {
-      for (key in this.authz) {
+      var i;
-        if(key == name) {
+      for(i = 0; i < authorizations.length; i++) {
-          value = this.authz[key];
+        var auth = authorizations[i];
-          result = value.apply(obj, authorizations);
+        log(auth);
-          if (result === true)
+        for (key in this.authz) {
-            status = true;
+          var value = this.authz[key];
+          if(typeof value !== 'undefined') {
+            result = value.apply(obj, authorizations);
+            if (result === true)
+              status = true;
+          }
         }
       }
     }
@@ -382,7 +387,7 @@ SwaggerClient.prototype.buildFromSpec = function(response) {
   this.apisArray = [];
   this.consumes = response.consumes;
   this.produces = response.produces;
-  this.authSchemes = response.authorizations;
+  this.securityDefinitions = response.securityDefinitions;
 
   var location = this.parseUri(this.url);
   if(typeof this.schemes === 'undefined' || this.schemes.length === 0) {
@@ -540,6 +545,7 @@ var Operation = function(parent, operationId, httpMethod, path, args, definition
   this.responses = (args.responses||{});
   this.type = null;
   this.security = args.security;
+  this.authorizations = args.security;
   this.description = args.description;
 
   var i;

src/main/coffeescript/view/ApiKeyButton.coffee

@@ -0,0 +1,31 @@
+class ApiKeyButton extends Backbone.View
+  initialize: ->
+
+  render: ->
+    template = @template()
+    $(@el).html(template(@model))
+
+    @
+
+  events:
+    "click #apikey_button" : "toggleApiKeyContainer"
+    "click #apply_api_key" : "applyApiKey"
+
+  applyApiKey: ->
+    window.authorizations.add(@model.name, new ApiKeyAuthorization(@model.name, $("#input_apiKey_entry").val(), @model.in))
+    window.swaggerUi.load()
+    elem = $('#apikey_container').show()
+
+  toggleApiKeyContainer: ->
+    if $('#apikey_container').length > 0
+      elem = $('#apikey_container').first()
+      if elem.is ':visible'
+        elem.hide()
+      else
+        # hide others
+        $('.auth_container').hide()
+        elem.show()
+
+  template: ->
+    Handlebars.templates.apikey_button_view
+

src/main/coffeescript/view/BasicAuthButton.coffee

@@ -0,0 +1,35 @@
+class BasicAuthButton extends Backbone.View
+  initialize: ->
+
+  render: ->
+    template = @template()
+    $(@el).html(template(@model))
+
+    @
+
+  events:
+    "click #basic_auth_button" : "togglePasswordContainer"
+    "click #apply_basic_auth" : "applyPassword"
+
+  applyPassword: ->
+    console.log "applying password"
+    username = $(".input_username").val()
+    password = $(".input_password").val()
+    window.authorizations.add(@model.type, new PasswordAuthorization("basic", username, password))
+    window.swaggerUi.load()
+    elem = $('#basic_auth_container').hide()
+
+
+  togglePasswordContainer: ->
+    if $('#basic_auth_container').length > 0
+      elem = $('#basic_auth_container').show()
+      if elem.is ':visible'
+        elem.slideUp()
+      else
+        # hide others
+        $('.auth_container').hide()
+        elem.show()
+
+  template: ->
+    Handlebars.templates.basic_auth_button_view
+

src/main/coffeescript/view/MainView.coffee

@@ -5,14 +5,12 @@ class MainView extends Backbone.View
   }
 
   initialize: (opts={}) ->
-    if opts.swaggerOptions.sorter
+    # set up the UI for input
-      sorterName = opts.swaggerOptions.sorter
+    @model.auths = []
-      sorter = sorters[sorterName]
+    for key, value of @model.securityDefinitions
-      if @model.apisArray
+      auth = {name: key, type: value.type, value: value}
-        for route in @model.apisArray
+      @model.auths.push auth
-          route.operationsArray.sort sorter
+
-        if (sorterName == "alpha") # sort top level paths if alpha 
-          @model.apisArray.sort sorter
 
     if @model.info and @model.info.license and typeof @model.info.license is 'string'
       name = @model.info.license
@@ -39,6 +37,16 @@ class MainView extends Backbone.View
         @model.validatorUrl = "http://online.swagger.io/validator"
  
   render: ->
+    if @model.securityDefinitions
+      for name of @model.securityDefinitions
+        auth = @model.securityDefinitions[name]
+        if auth.type is "apiKey" and $("#apikey_button").length is 0
+          button = new ApiKeyButton({model: auth}).render().el
+          $('.auth_main_container').append button
+        if auth.type is "basicAuth" and $("#basic_auth_button").length is 0
+          button = new BasicAuthButton({model: auth}).render().el
+          $('.auth_main_container').append button
+
     # Render the outer container for resources
     $(@el).html(Handlebars.templates.main(@model))
 
@@ -53,13 +61,20 @@ class MainView extends Backbone.View
         counter += 1
       resource.id = id
       resources[id] = resource
-      @addResource resource
+      @addResource resource, @model.auths
     @
 
-  addResource: (resource) ->
+  addResource: (resource, auths) ->
     # Render a resource and add it to resources li
     resource.id = resource.id.replace(/\s/g, '_')
-    resourceView = new ResourceView({model: resource, tagName: 'li', id: 'resource_' + resource.id, className: 'resource', swaggerOptions: @options.swaggerOptions})
+    resourceView = new ResourceView({
+      model: resource, 
+      tagName: 'li', 
+      id: 'resource_' + resource.id, 
+      className: 'resource', 
+      auths: auths,
+      swaggerOptions: @options.swaggerOptions
+    })
     $('#resources').append resourceView.render().el
 
   clear: ->

src/main/coffeescript/view/OperationView.coffee

@@ -10,7 +10,10 @@ class OperationView extends Backbone.View
     'mouseout .api-ic'        : 'mouseExit'
   }
 
-  initialize: ->
+  initialize: (opts={}) ->
+    @auths = opts.auths
+
+    @
 
   mouseEnter: (e) ->
     elem = $(e.currentTarget.parentNode).find('#api_information_panel')
@@ -49,15 +52,28 @@ class OperationView extends Backbone.View
     if @model.description
       @model.description = @model.description.replace(/(?:\r\n|\r|\n)/g, '<br />')
     @model.oauth = null
+    log @model.authorizations
     if @model.authorizations
-      for k, v of @model.authorizations
+      if Array.isArray @model.authorizations
-        if k == "oauth2"
+        for auths in @model.authorizations
-          if @model.oauth == null
+          for key, auth of auths
-            @model.oauth = {}
+            for a of @auths
-          if @model.oauth.scopes is undefined
+              auth = @auths[a]
-            @model.oauth.scopes = []
+              if auth.type == 'oauth2'
-          for o in v
+                @model.oauth = {}
-            @model.oauth.scopes.push o
+                @model.oauth.scopes = []
+                for k, v of auth.value.scopes
+                  o = {scope: k, description: v}
+                  @model.oauth.scopes.push o
+      else
+        for k, v of @model.authorizations
+          if k == "oauth2"
+            if @model.oauth == null
+              @model.oauth = {}
+            if @model.oauth.scopes is undefined
+              @model.oauth.scopes = []
+            for o in v
+              @model.oauth.scopes.push o
 
     if typeof @model.responses isnt 'undefined'
       @model.responseMessages = []

src/main/coffeescript/view/ResourceView.coffee

@@ -1,5 +1,6 @@
 class ResourceView extends Backbone.View
-  initialize: ->
+  initialize: (opts={}) ->
+    @auths = opts.auths
     if "" is @model.description 
       @model.description = null
 
@@ -36,7 +37,13 @@ class ResourceView extends Backbone.View
     operation.number = @number
 
     # Render an operation and add it to operations li
-    operationView = new OperationView({model: operation, tagName: 'li', className: 'endpoint', swaggerOptions: @options.swaggerOptions})
+    operationView = new OperationView({
+      model: operation,
+      tagName: 'li',
+      className: 'endpoint',
+      swaggerOptions: @options.swaggerOptions,
+      auths: @auths
+    })
     $('.endpoints', $(@el)).append operationView.render().el
 
     @number++

src/main/html/css/screen.css

@@ -1100,6 +1100,85 @@
 .swagger-section .api-popup-actions {
   padding-top: 10px;
 }
+.auth {
+  text-align: right;
+  height: 15px;
+  float: right;
+  clear: both;
+  display: inline-block;
+  position: relative;
+  z-index: 3;
+}
+.auth_icon {
+  float: right;
+}
+.auth_container_2 {
+  visibility: visible;
+  position: absolute;
+  width: 250px;
+  margin-top: 26px;
+  float: left;
+  display: none;
+  border: solid 2px;
+  background: white;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  z-index: 2;
+}
+.auth_label {
+  text-align: left;
+  clear: left;
+  float: left;
+  padding-left: 10px;
+  width: 90px;
+}
+.auth_submit {
+  border-left: 1px;
+  border-right: 1px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+  text-align: center;
+}
+.auth_button {
+  display: block;
+  float: right;
+  text-align: right;
+}
+.auth_submit_button {
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  padding: 6px 8px;
+  font-size: 0.9em;
+  color: white;
+  float: right;
+  text-align: center;
+  background: #547f00;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+.auth_input {
+  float: left;
+}
+.authentication_container {
+  float: left;
+  display: block;
+  background: yellow;
+}
+.auth_button .auth_icon {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}
 .swagger-section .access {
   float: right;
 }

src/main/less/auth.less

@@ -81,3 +81,94 @@
 }
 
 }
+
+.auth {
+  text-align: right;
+  height: 15px;
+  float: right;
+  clear: both;
+  display: inline-block;
+  position: relative;
+  z-index: 3;
+}
+
+.auth_icon {
+  float: right;
+}
+
+.auth_container_2 {
+  visibility: visible;
+  position: absolute;
+  width: 250px;
+  float:left;
+  margin-top: 26px;
+  float: left;
+  display: none;
+  border: solid 2px;
+  background: white;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+
+  z-index: 2;
+}
+
+.auth_label {
+  text-align: left;
+  clear: left;
+  float: left;
+  padding-left: 10px;
+  width: 90px;
+}
+
+.auth_submit {
+  border-left: 1px;
+  border-right: 1px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+  text-align: center;
+}
+
+.auth_button {
+  display: block;
+  float: right;
+  text-align: right;
+}
+
+.auth_submit_button {
+  display: block;
+  text-decoration: none;
+  font-weight: bold;
+  padding: 6px 8px;
+  font-size: 0.9em;
+  color: white;
+  float: right;
+  text-align: center;
+  background: #547f00;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -o-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -khtml-border-radius: 4px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
+
+.auth_input {
+  float: left;
+}
+
+.authentication_container {
+  float: left;
+  display: block;
+  background: yellow;
+}
+
+.auth_button .auth_icon {
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+}

src/main/template/apikey_button_view.handlebars

@@ -0,0 +1,9 @@
+<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='key_input_container'>
+    <div class='auth_label'>{{keyName}}</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="#">apply</a></div>
+  </div>
+</div>
+

src/main/template/basic_auth_button_view.handlebars

@@ -0,0 +1,11 @@
+<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">Username</div>
+    <input placeholder="username" class="auth_input" id="input_username" name="username" type="text"/>
+    <div class="auth_label">Password</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>
+