merged from oauth2 branch

dist/css/screen.css

@@ -710,6 +710,9 @@ table {
 .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.heading ul.options li a {
   text-decoration: none;
 }
+.swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.heading ul.options li.access {
+  color: black;
+}
 .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.content {
   border-top: none;
   padding: 10px;
@@ -1031,6 +1034,132 @@ table {
 .swagger-ui-wrap form.form_box p strong {
   color: black;
 }
+.title {
+  font-style: bold;
+}
+.secondary_form {
+  display: none;
+}
+.main_image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.oauth_body {
+  margin-left: 100px;
+  margin-right: 100px;
+}
+.oauth_submit {
+  text-align: center;
+}
+.api-popup-dialog {
+  z-index: 10000;
+  position: absolute;
+  width: 500px;
+  background: #FFF;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  color: #777;
+}
+.api-popup-dialog .api-popup-title {
+  font-size: 24px;
+  padding: 10px 0;
+}
+.api-popup-dialog .api-popup-title {
+  font-size: 24px;
+  padding: 10px 0;
+}
+.api-popup-dialog p.error-msg {
+  padding-left: 5px;
+  padding-bottom: 5px;
+}
+.api-popup-dialog button.api-popup-authbtn {
+  height: 30px;
+}
+.api-popup-dialog button.api-popup-cancel {
+  height: 30px;
+}
+.api-popup-scopes {
+  padding: 10px 20px;
+}
+.api-popup-scopes li {
+  padding: 5px 0;
+  line-height: 20px;
+}
+.api-popup-scopes .api-scope-desc {
+  padding-left: 20px;
+  font-style: italic;
+}
+.api-popup-scopes li input {
+  position: relative;
+  top: 2px;
+}
+.api-popup-actions {
+  padding-top: 10px;
+}
+.access {
+  float: right;
+}
+.auth {
+  float: right;
+}
+#api_information_panel {
+  position: absolute;
+  background: #FFF;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  max-width: 300px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+}
+#api_information_panel p .api-msg-enabled {
+  color: green;
+}
+#api_information_panel p .api-msg-disabled {
+  color: red;
+}
+.api-ic {
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../images/explorer_icons.png) no-repeat;
+}
+.ic-info {
+  background-position: 0 0;
+  width: 18px;
+  margin-top: -7px;
+  margin-left: 4px;
+}
+.ic-warning {
+  background-position: -60px 0;
+  width: 18px;
+  margin-top: -7px;
+  margin-left: 4px;
+}
+.ic-error {
+  background-position: -30px 0;
+  width: 18px;
+  margin-top: -7px;
+  margin-left: 4px;
+}
+.ic-off {
+  background-position: -90px 0;
+  width: 58px;
+  margin-top: -4px;
+  cursor: pointer;
+}
+.ic-on {
+  background-position: -160px 0;
+  width: 58px;
+  margin-top: -4px;
+  cursor: pointer;
+}
 #header {
   background-color: #89bf04;
   padding: 14px;

dist/index.html

@@ -16,14 +16,23 @@
   <script src='lib/swagger.js' type='text/javascript'></script>
   <script src='swagger-ui.js' type='text/javascript'></script>
   <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
+
+  <!--script src='lib/swagger-oauth.js' type='text/javascript'></script-->
+
   <script type="text/javascript">
+    // var clientId = "your-client-id";
+    // var realm = "your-realm";
+
     $(function () {
       window.swaggerUi = new SwaggerUi({
       url: "http://petstore.swagger.wordnik.com/api/api-docs",
       dom_id: "swagger-ui-container",
       supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
       onComplete: function(swaggerApi, swaggerUi){
-        log("Loaded SwaggerUI")
+        log("Loaded SwaggerUI");
+        /*if(typeof initOAuth == "function")
+          initOAuth();
+        */
         $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
       },
       onFailure: function(data) {
@@ -65,14 +74,8 @@
   </div>
 </div>
 
-<div id="message-bar" class="swagger-ui-wrap">
+<div id="message-bar" class="swagger-ui-wrap">&nbsp;</div>
-  &nbsp;
-</div>
-
-<div id="swagger-ui-container" class="swagger-ui-wrap">
-
-</div>
 
+<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
 </body>
-
 </html>

dist/lib/swagger-oauth.js

@@ -0,0 +1,195 @@
+function handleLogin() {
+  var scopes = [];
+  var appName = "unknown-app";
+  var popupMask = $('#api-common-mask');
+  var popupDialog = $('.api-popup-dialog');
+  var clientId = "your-client-id";
+  var realm = "your-realm";
+
+  if(window.swaggerUi.api.authSchemes 
+    && window.swaggerUi.api.authSchemes.oauth2
+    && window.swaggerUi.api.authSchemes.oauth2.scopes) {
+    scopes = window.swaggerUi.api.authSchemes.oauth2.scopes;
+  }
+
+  if(window.swaggerUi.api
+    && window.swaggerUi.api.info) {
+    appName = window.swaggerUi.api.info.title;
+  }
+
+  if(popupDialog.length > 0) popupDialog = popupDialog.last();
+  else {
+    popupDialog = $(
+      [
+        '<div class="api-popup-dialog">',
+        '<div class="api-popup-title">Select OAuth2.0 Scopes</div>',
+        '<div class="api-popup-content">',
+          '<p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.',
+            '<a href="#">Learn how to use</a>',
+          '</p>',
+          '<p><strong>' + appName + '</strong> API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>',
+          '<ul class="api-popup-scopes">',
+          '</ul>',
+          '<p class="error-msg"></p>',
+          '<div class="api-popup-actions"><button class="api-popup-authbtn api-button green" type="button">Authorize</button><button class="api-popup-cancel api-button gray" type="button">Cancel</button></div>',
+        '</div>',
+        '</div>'].join(''));
+    $(document.body).append(popupDialog);
+
+    popup = popupDialog.find('ul.api-popup-scopes').empty();
+    for (i = 0; i < scopes.length; i ++) {
+      scope = scopes[i];
+      str = '<li><input type="checkbox" id="scope_' + i + '" scope="' + scope.scope + '"/>' + '<label for="scope_' + i + '">' + scope.scope;
+      if (scope.description) {
+        str += '<br/><span class="api-scope-desc">' + scope.description + '</span>';
+      }
+      str += '</label></li>';
+      popup.append(str);
+    }
+  }
+
+  var $win = $(window),
+    dw = $win.width(),
+    dh = $win.height(),
+    st = $win.scrollTop(),
+    dlgWd = popupDialog.outerWidth(),
+    dlgHt = popupDialog.outerHeight(),
+    top = (dh -dlgHt)/2 + st,
+    left = (dw - dlgWd)/2;
+
+  popupDialog.css({
+    top: (top < 0? 0 : top) + 'px',
+    left: (left < 0? 0 : left) + 'px'
+  });
+
+  popupDialog.find('button.api-popup-cancel').click(function() {
+    popupMask.hide();
+    popupDialog.hide();
+  });
+  popupDialog.find('button.api-popup-authbtn').click(function() {
+    popupMask.hide();
+    popupDialog.hide();
+
+    var authSchemes = window.swaggerUi.api.authSchemes;
+    var host = window.location;
+    var redirectUrl = host.protocol + '//' + host.host + "/o2c.html";
+    var url = null;
+
+    var p = window.swaggerUi.api.authSchemes;
+    for (var key in p) {
+      if (p.hasOwnProperty(key)) {
+        var o = p[key].grantTypes;
+        for(var t in o) {
+          if(o.hasOwnProperty(t) && t === 'implicit') {
+            var dets = o[t];
+            url = dets.loginEndpoint.url + "?response_type=token";
+            window.swaggerUi.tokenName = dets.tokenName;
+          }
+        }
+      }
+    }
+    var scopes = []
+    var o = $('.api-popup-scopes').find('input:checked');
+
+    for(k =0; k < o.length; k++) {
+      scopes.push($(o[k]).attr("scope"));
+    }
+
+    window.enabledScopes=scopes;
+
+    url += '&redirect_uri=' + encodeURIComponent(redirectUrl);
+    url += '&realm=' + encodeURIComponent(realm);
+    url += '&client_id=' + encodeURIComponent(clientId);
+    url += '&scope=' + encodeURIComponent(scopes);
+
+    window.open(url);
+  });
+
+  popupMask.show();
+  popupDialog.show();
+  return;
+}
+
+
+function handleLogout() {
+  for(key in window.authorizations.authz){
+    window.authorizations.remove(key)
+  }
+  window.enabledScopes = null;
+  $('.api-ic.ic-on').addClass('ic-off');
+  $('.api-ic.ic-on').removeClass('ic-on');
+
+  // set the info box
+  $('.api-ic.ic-warning').addClass('ic-error');
+  $('.api-ic.ic-warning').removeClass('ic-warning');
+}
+
+function initOAuth() {
+  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+  $('.api-ic').click(function(s) {
+    if($(s.target).hasClass('ic-off'))
+      handleLogin();
+    else {
+      handleLogout();
+    }
+    false;
+  });
+}
+
+function onOAuthComplete(token) {
+  if(token) {
+    if(token.error) {
+      var checkbox = $('input[type=checkbox],.secured')
+      checkbox.each(function(pos){
+        checkbox[pos].checked = false;
+      });
+      alert(token.error);
+    }
+    else {
+      var b = token[window.swaggerUi.tokenName];
+      if(b){
+        // if all roles are satisfied
+        var o = null;
+        $.each($('.auth #api_information_panel'), function(k, v) {
+          var children = v;
+          if(children && children.childNodes) {
+            var requiredScopes = [];
+            $.each((children.childNodes), function (k1, v1){
+              var inner = v1.innerHTML;
+              if(inner)
+                requiredScopes.push(inner);
+            });
+            var diff = [];
+            for(var i=0; i < requiredScopes.length; i++) {
+              var s = requiredScopes[i];
+              if(window.enabledScopes && window.enabledScopes.indexOf(s) == -1) {
+                diff.push(s);
+              }
+            }
+            if(diff.length > 0){
+              o = v.parentNode;
+              $(o.parentNode).find('.api-ic.ic-on').addClass('ic-off');
+              $(o.parentNode).find('.api-ic.ic-on').removeClass('ic-on');
+
+              // sorry, not all scopes are satisfied
+              $(o).find('.api-ic').addClass('ic-warning');
+              $(o).find('.api-ic').removeClass('ic-error');
+            }
+            else {
+              o = v.parentNode;
+              $(o.parentNode).find('.api-ic.ic-off').addClass('ic-on');
+              $(o.parentNode).find('.api-ic.ic-off').removeClass('ic-off');
+
+              // all scopes are satisfied
+              $(o).find('.api-ic').addClass('ic-info');
+              $(o).find('.api-ic').removeClass('ic-warning');
+              $(o).find('.api-ic').removeClass('ic-error');          
+            }
+          }
+        });
+
+        window.authorizations.add("key", new ApiKeyAuthorization("Authorization", "Bearer " + b, "header"));
+      }
+    }
+  }
+}

dist/o2c.html

@@ -0,0 +1,15 @@
+<script>
+var qp = null;
+if(window.location.hash) {
+  qp = location.hash.substring(1);
+}
+else {
+  qp = location.search.substring(1);
+}
+qp = qp ? JSON.parse('{"' + qp.replace(/&/g, '","').replace(/=/g,'":"') + '"}',
+  function(key, value) {
+    return key===""?value:decodeURIComponent(value) }
+  ):{}
+window.opener.onOAuthComplete(qp);
+window.close();
+</script>

dist/swagger-ui.js

@@ -315,7 +315,7 @@ function program8(depth0,data) {
 templates['operation'] = 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, self=this;
+  var buffer = "", stack1, options, functionType="function", escapeExpression=this.escapeExpression, self=this, blockHelperMissing=helpers.blockHelperMissing;
 
 function program1(depth0,data) {
   
@@ -331,28 +331,67 @@ function program1(depth0,data) {
 function program3(depth0,data) {
   
   
-  return "\n          <h4>Response Class</h4>\n          <p><span class=\"model-signature\" /></p>\n          <br/>\n          <div class=\"response-content-type\" />\n        ";
+  return "\n        <div class=\"auth\">\n        <span class=\"api-ic ic-error\"></span>";
   }
 
 function program5(depth0,data) {
   
+  var buffer = "", stack1;
+  buffer += "\n          <div id=\"api_information_panel\" style=\"top: 526px; left: 776px; display: none;\">\n          ";
+  stack1 = helpers.each.call(depth0, depth0, {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n          </div>\n        ";
+  return buffer;
+  }
+function program6(depth0,data) {
+  
+  var buffer = "", stack1, stack2;
+  buffer += "\n            <div title='";
+  stack2 = ((stack1 = depth0.description),typeof stack1 === functionType ? stack1.apply(depth0) : stack1);
+  if(stack2 || stack2 === 0) { buffer += stack2; }
+  buffer += "'>"
+    + escapeExpression(((stack1 = depth0.scope),typeof stack1 === functionType ? stack1.apply(depth0) : stack1))
+    + "</div>\n          ";
+  return buffer;
+  }
+
+function program8(depth0,data) {
+  
+  
+  return "</div>";
+  }
+
+function program10(depth0,data) {
+  
+  
+  return "\n        <div class='access'>\n          <span class=\"api-ic ic-off\" title=\"click to authenticate\"></span>\n        </div>\n        ";
+  }
+
+function program12(depth0,data) {
+  
+  
+  return "\n          <h4>Response Class</h4>\n          <p><span class=\"model-signature\" /></p>\n          <br/>\n          <div class=\"response-content-type\" />\n        ";
+  }
+
+function program14(depth0,data) {
+  
   
   return "\n          <h4>Parameters</h4>\n          <table class='fullwidth'>\n          <thead>\n            <tr>\n            <th style=\"width: 100px; max-width: 100px\">Parameter</th>\n            <th style=\"width: 310px; max-width: 310px\">Value</th>\n            <th style=\"width: 200px; max-width: 200px\">Description</th>\n            <th style=\"width: 100px; max-width: 100px\">Parameter Type</th>\n            <th style=\"width: 220px; max-width: 230px\">Data Type</th>\n            </tr>\n          </thead>\n          <tbody class=\"operation-params\">\n\n          </tbody>\n          </table>\n          ";
   }
 
-function program7(depth0,data) {
+function program16(depth0,data) {
   
   
   return "\n          <div style='margin:0;padding:0;display:inline'></div>\n          <h4>Error Status Codes</h4>\n          <table class='fullwidth'>\n            <thead>\n            <tr>\n              <th>HTTP Status Code</th>\n              <th>Reason</th>\n            </tr>\n            </thead>\n            <tbody class=\"operation-status\">\n            \n            </tbody>\n          </table>\n          ";
   }
 
-function program9(depth0,data) {
+function program18(depth0,data) {
   
   
   return "\n          ";
   }
 
-function program11(depth0,data) {
+function program20(depth0,data) {
   
   
   return "\n          <div class='sandbox_header'>\n            <input class='submit' name='commit' type='button' value='Try it out!' />\n            <a href='#' class='response_hider' style='display:none'>Hide Response</a>\n            <img alt='Throbber' class='response_throbber' src='images/throbber.gif' style='display:none' />\n          </div>\n          ";
@@ -418,16 +457,37 @@ function program11(depth0,data) {
   stack1 = helpers['if'].call(depth0, depth0.notes, {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
   if(stack1 || stack1 === 0) { buffer += stack1; }
   buffer += "\n        ";
-  stack1 = helpers['if'].call(depth0, depth0.type, {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
+  options = {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data};
+  if (stack1 = helpers.oauth) { stack1 = stack1.call(depth0, options); }
+  else { stack1 = depth0.oauth; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  if (!helpers.oauth) { stack1 = blockHelperMissing.call(depth0, stack1, options); }
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n        ";
+  stack1 = helpers.each.call(depth0, depth0.oauth, {hash:{},inverse:self.noop,fn:self.program(5, program5, data),data:data});
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n        ";
+  options = {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data};
+  if (stack1 = helpers.oauth) { stack1 = stack1.call(depth0, options); }
+  else { stack1 = depth0.oauth; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  if (!helpers.oauth) { stack1 = blockHelperMissing.call(depth0, stack1, options); }
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n        ";
+  options = {hash:{},inverse:self.noop,fn:self.program(10, program10, data),data:data};
+  if (stack1 = helpers.oauth) { stack1 = stack1.call(depth0, options); }
+  else { stack1 = depth0.oauth; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
+  if (!helpers.oauth) { stack1 = blockHelperMissing.call(depth0, stack1, options); }
+  if(stack1 || stack1 === 0) { buffer += stack1; }
+  buffer += "\n        ";
+  stack1 = helpers['if'].call(depth0, depth0.type, {hash:{},inverse:self.noop,fn:self.program(12, program12, data),data:data});
   if(stack1 || stack1 === 0) { buffer += stack1; }
   buffer += "\n        <form accept-charset='UTF-8' class='sandbox'>\n          <div style='margin:0;padding:0;display:inline'></div>\n          ";
-  stack1 = helpers['if'].call(depth0, depth0.parameters, {hash:{},inverse:self.noop,fn:self.program(5, program5, data),data:data});
+  stack1 = helpers['if'].call(depth0, depth0.parameters, {hash:{},inverse:self.noop,fn:self.program(14, program14, data),data:data});
   if(stack1 || stack1 === 0) { buffer += stack1; }
   buffer += "\n          ";
-  stack1 = helpers['if'].call(depth0, depth0.responseMessages, {hash:{},inverse:self.noop,fn:self.program(7, program7, data),data:data});
+  stack1 = helpers['if'].call(depth0, depth0.responseMessages, {hash:{},inverse:self.noop,fn:self.program(16, program16, data),data:data});
   if(stack1 || stack1 === 0) { buffer += stack1; }
   buffer += "\n          ";
-  stack1 = helpers['if'].call(depth0, depth0.isReadOnly, {hash:{},inverse:self.program(11, program11, data),fn:self.program(9, program9, data),data:data});
+  stack1 = helpers['if'].call(depth0, depth0.isReadOnly, {hash:{},inverse:self.program(20, program20, data),fn:self.program(18, program18, data),data:data});
   if(stack1 || stack1 === 0) { buffer += stack1; }
   buffer += "\n        </form>\n        <div class='response' style='display:none'>\n          <h4>Request URL</h4>\n          <div class='block request_url'></div>\n          <h4>Response Body</h4>\n          <div class='block response_body'></div>\n          <h4>Response Code</h4>\n          <div class='block response_code'></div>\n          <h4>Response Headers</h4>\n          <div class='block response_headers'></div>\n        </div>\n      </div>\n    </li>\n  </ul>\n";
   return buffer;
@@ -1469,17 +1529,72 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       'submit .sandbox': 'submitOperation',
       'click .submit': 'submitOperation',
       'click .response_hider': 'hideResponse',
-      'click .toggleOperation': 'toggleOperationContent'
+      'click .toggleOperation': 'toggleOperationContent',
+      'mouseenter .api-ic': 'mouseEnter',
+      'mouseout .api-ic': 'mouseExit'
     };
 
     OperationView.prototype.initialize = function() {};
 
+    OperationView.prototype.mouseEnter = function(e) {
+      var elem, hgh, pos, scMaxX, scMaxY, scX, scY, wd, x, y;
+      elem = $(e.currentTarget.parentNode).find('#api_information_panel');
+      x = event.pageX;
+      y = event.pageY;
+      scX = $(window).scrollLeft();
+      scY = $(window).scrollTop();
+      scMaxX = scX + $(window).width();
+      scMaxY = scY + $(window).height();
+      wd = elem.width();
+      hgh = elem.height();
+      if (x + wd > scMaxX) {
+        x = scMaxX - wd;
+      }
+      if (x < scX) {
+        x = scX;
+      }
+      if (y + hgh > scMaxY) {
+        y = scMaxY - hgh;
+      }
+      if (y < scY) {
+        y = scY;
+      }
+      pos = {};
+      pos.top = y;
+      pos.left = x;
+      elem.css(pos);
+      return $(e.currentTarget.parentNode).find('#api_information_panel').show();
+    };
+
+    OperationView.prototype.mouseExit = function(e) {
+      return $(e.currentTarget.parentNode).find('#api_information_panel').hide();
+    };
+
     OperationView.prototype.render = function() {
-      var contentTypeModel, isMethodSubmissionSupported, param, responseContentTypeView, responseSignatureView, signatureModel, statusCode, type, _i, _j, _k, _len, _len1, _len2, _ref5, _ref6, _ref7;
+      var contentTypeModel, isMethodSubmissionSupported, k, o, param, responseContentTypeView, responseSignatureView, signatureModel, statusCode, type, v, _i, _j, _k, _l, _len, _len1, _len2, _len3, _ref5, _ref6, _ref7, _ref8;
       isMethodSubmissionSupported = true;
       if (!isMethodSubmissionSupported) {
         this.model.isReadOnly = true;
       }
+      this.model.oauth = null;
+      if (this.model.authorizations) {
+        _ref5 = this.model.authorizations;
+        for (k in _ref5) {
+          v = _ref5[k];
+          if (k === "oauth2") {
+            if (this.model.oauth === null) {
+              this.model.oauth = {};
+            }
+            if (this.model.oauth.scopes === void 0) {
+              this.model.oauth.scopes = [];
+            }
+            for (_i = 0, _len = v.length; _i < _len; _i++) {
+              o = v[_i];
+              this.model.oauth.scopes.push(o);
+            }
+          }
+        }
+      }
       $(this.el).html(Handlebars.templates.operation(this.model));
       if (this.model.responseClassSignature && this.model.responseClassSignature !== 'string') {
         signatureModel = {
@@ -1500,9 +1615,9 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
       };
       contentTypeModel.consumes = this.model.consumes;
       contentTypeModel.produces = this.model.produces;
-      _ref5 = this.model.parameters;
+      _ref6 = this.model.parameters;
-      for (_i = 0, _len = _ref5.length; _i < _len; _i++) {
+      for (_j = 0, _len1 = _ref6.length; _j < _len1; _j++) {
-        param = _ref5[_i];
+        param = _ref6[_j];
         type = param.type || param.dataType;
         if (type.toLowerCase() === 'file') {
           if (!contentTypeModel.consumes) {
@@ -1515,14 +1630,14 @@ helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
         model: contentTypeModel
       });
       $('.response-content-type', $(this.el)).append(responseContentTypeView.render().el);
-      _ref6 = this.model.parameters;
+      _ref7 = this.model.parameters;
-      for (_j = 0, _len1 = _ref6.length; _j < _len1; _j++) {
+      for (_k = 0, _len2 = _ref7.length; _k < _len2; _k++) {
-        param = _ref6[_j];
+        param = _ref7[_k];
         this.addParameter(param, contentTypeModel.consumes);
       }
-      _ref7 = this.model.responseMessages;
+      _ref8 = this.model.responseMessages;
-      for (_k = 0, _len2 = _ref7.length; _k < _len2; _k++) {
+      for (_l = 0, _len3 = _ref8.length; _l < _len3; _l++) {
-        statusCode = _ref7[_k];
+        statusCode = _ref8[_l];
         this.addStatusCode(statusCode);
       }
       return this;

lib/swagger-oauth.js

@@ -0,0 +1,195 @@
+function handleLogin() {
+  var scopes = [];
+  var appName = "unknown-app";
+  var popupMask = $('#api-common-mask');
+  var popupDialog = $('.api-popup-dialog');
+  var clientId = "your-client-id";
+  var realm = "your-realm";
+
+  if(window.swaggerUi.api.authSchemes 
+    && window.swaggerUi.api.authSchemes.oauth2
+    && window.swaggerUi.api.authSchemes.oauth2.scopes) {
+    scopes = window.swaggerUi.api.authSchemes.oauth2.scopes;
+  }
+
+  if(window.swaggerUi.api
+    && window.swaggerUi.api.info) {
+    appName = window.swaggerUi.api.info.title;
+  }
+
+  if(popupDialog.length > 0) popupDialog = popupDialog.last();
+  else {
+    popupDialog = $(
+      [
+        '<div class="api-popup-dialog">',
+        '<div class="api-popup-title">Select OAuth2.0 Scopes</div>',
+        '<div class="api-popup-content">',
+          '<p>Scopes are used to grant an application different levels of access to data on behalf of the end user. Each API may declare one or more scopes.',
+            '<a href="#">Learn how to use</a>',
+          '</p>',
+          '<p><strong>' + appName + '</strong> API requires the following scopes. Select which ones you want to grant to Swagger UI.</p>',
+          '<ul class="api-popup-scopes">',
+          '</ul>',
+          '<p class="error-msg"></p>',
+          '<div class="api-popup-actions"><button class="api-popup-authbtn api-button green" type="button">Authorize</button><button class="api-popup-cancel api-button gray" type="button">Cancel</button></div>',
+        '</div>',
+        '</div>'].join(''));
+    $(document.body).append(popupDialog);
+
+    popup = popupDialog.find('ul.api-popup-scopes').empty();
+    for (i = 0; i < scopes.length; i ++) {
+      scope = scopes[i];
+      str = '<li><input type="checkbox" id="scope_' + i + '" scope="' + scope.scope + '"/>' + '<label for="scope_' + i + '">' + scope.scope;
+      if (scope.description) {
+        str += '<br/><span class="api-scope-desc">' + scope.description + '</span>';
+      }
+      str += '</label></li>';
+      popup.append(str);
+    }
+  }
+
+  var $win = $(window),
+    dw = $win.width(),
+    dh = $win.height(),
+    st = $win.scrollTop(),
+    dlgWd = popupDialog.outerWidth(),
+    dlgHt = popupDialog.outerHeight(),
+    top = (dh -dlgHt)/2 + st,
+    left = (dw - dlgWd)/2;
+
+  popupDialog.css({
+    top: (top < 0? 0 : top) + 'px',
+    left: (left < 0? 0 : left) + 'px'
+  });
+
+  popupDialog.find('button.api-popup-cancel').click(function() {
+    popupMask.hide();
+    popupDialog.hide();
+  });
+  popupDialog.find('button.api-popup-authbtn').click(function() {
+    popupMask.hide();
+    popupDialog.hide();
+
+    var authSchemes = window.swaggerUi.api.authSchemes;
+    var host = window.location;
+    var redirectUrl = host.protocol + '//' + host.host + "/o2c.html";
+    var url = null;
+
+    var p = window.swaggerUi.api.authSchemes;
+    for (var key in p) {
+      if (p.hasOwnProperty(key)) {
+        var o = p[key].grantTypes;
+        for(var t in o) {
+          if(o.hasOwnProperty(t) && t === 'implicit') {
+            var dets = o[t];
+            url = dets.loginEndpoint.url + "?response_type=token";
+            window.swaggerUi.tokenName = dets.tokenName;
+          }
+        }
+      }
+    }
+    var scopes = []
+    var o = $('.api-popup-scopes').find('input:checked');
+
+    for(k =0; k < o.length; k++) {
+      scopes.push($(o[k]).attr("scope"));
+    }
+
+    window.enabledScopes=scopes;
+
+    url += '&redirect_uri=' + encodeURIComponent(redirectUrl);
+    url += '&realm=' + encodeURIComponent(realm);
+    url += '&client_id=' + encodeURIComponent(clientId);
+    url += '&scope=' + encodeURIComponent(scopes);
+
+    window.open(url);
+  });
+
+  popupMask.show();
+  popupDialog.show();
+  return;
+}
+
+
+function handleLogout() {
+  for(key in window.authorizations.authz){
+    window.authorizations.remove(key)
+  }
+  window.enabledScopes = null;
+  $('.api-ic.ic-on').addClass('ic-off');
+  $('.api-ic.ic-on').removeClass('ic-on');
+
+  // set the info box
+  $('.api-ic.ic-warning').addClass('ic-error');
+  $('.api-ic.ic-warning').removeClass('ic-warning');
+}
+
+function initOAuth() {
+  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+  $('.api-ic').click(function(s) {
+    if($(s.target).hasClass('ic-off'))
+      handleLogin();
+    else {
+      handleLogout();
+    }
+    false;
+  });
+}
+
+function onOAuthComplete(token) {
+  if(token) {
+    if(token.error) {
+      var checkbox = $('input[type=checkbox],.secured')
+      checkbox.each(function(pos){
+        checkbox[pos].checked = false;
+      });
+      alert(token.error);
+    }
+    else {
+      var b = token[window.swaggerUi.tokenName];
+      if(b){
+        // if all roles are satisfied
+        var o = null;
+        $.each($('.auth #api_information_panel'), function(k, v) {
+          var children = v;
+          if(children && children.childNodes) {
+            var requiredScopes = [];
+            $.each((children.childNodes), function (k1, v1){
+              var inner = v1.innerHTML;
+              if(inner)
+                requiredScopes.push(inner);
+            });
+            var diff = [];
+            for(var i=0; i < requiredScopes.length; i++) {
+              var s = requiredScopes[i];
+              if(window.enabledScopes && window.enabledScopes.indexOf(s) == -1) {
+                diff.push(s);
+              }
+            }
+            if(diff.length > 0){
+              o = v.parentNode;
+              $(o.parentNode).find('.api-ic.ic-on').addClass('ic-off');
+              $(o.parentNode).find('.api-ic.ic-on').removeClass('ic-on');
+
+              // sorry, not all scopes are satisfied
+              $(o).find('.api-ic').addClass('ic-warning');
+              $(o).find('.api-ic').removeClass('ic-error');
+            }
+            else {
+              o = v.parentNode;
+              $(o.parentNode).find('.api-ic.ic-off').addClass('ic-on');
+              $(o.parentNode).find('.api-ic.ic-off').removeClass('ic-off');
+
+              // all scopes are satisfied
+              $(o).find('.api-ic').addClass('ic-info');
+              $(o).find('.api-ic').removeClass('ic-warning');
+              $(o).find('.api-ic').removeClass('ic-error');          
+            }
+          }
+        });
+
+        window.authorizations.add("key", new ApiKeyAuthorization("Authorization", "Bearer " + b, "header"));
+      }
+    }
+  }
+}

src/main/coffeescript/view/OperationView.coffee

@@ -6,14 +6,55 @@ class OperationView extends Backbone.View
     'click .submit'           : 'submitOperation'
     'click .response_hider'   : 'hideResponse'
     'click .toggleOperation'  : 'toggleOperationContent'
+    'mouseenter .api-ic'      : 'mouseEnter'
+    'mouseout .api-ic'        : 'mouseExit'
   }
 
   initialize: ->
 
+  mouseEnter: (e) ->
+    elem = $(e.currentTarget.parentNode).find('#api_information_panel')
+    x = event.pageX
+    y = event.pageY
+    scX = $(window).scrollLeft()
+    scY = $(window).scrollTop()
+    scMaxX = scX + $(window).width()
+    scMaxY = scY + $(window).height()
+    wd = elem.width()
+    hgh = elem.height()
+
+    if (x + wd > scMaxX)
+      x = scMaxX - wd
+    if (x < scX)
+      x = scX
+    if (y + hgh > scMaxY)
+      y = scMaxY - hgh
+    if (y < scY)
+      y = scY
+    pos = {}
+    pos.top = y
+    pos.left = x
+    elem.css(pos)
+    $(e.currentTarget.parentNode).find('#api_information_panel').show()
+
+  mouseExit: (e) ->
+    $(e.currentTarget.parentNode).find('#api_information_panel').hide()
+
   render: ->
     isMethodSubmissionSupported = true #jQuery.inArray(@model.method, @model.supportedSubmitMethods) >= 0
     @model.isReadOnly = true unless isMethodSubmissionSupported
 
+    @model.oauth = null
+    if @model.authorizations
+      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
+
     $(@el).html(Handlebars.templates.operation(@model))
 
     if @model.responseClassSignature and @model.responseClassSignature != 'string'

src/main/html/css/screen.css

@@ -710,6 +710,9 @@ table {
 .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.heading ul.options li a {
   text-decoration: none;
 }
+.swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.heading ul.options li.access {
+  color: black;
+}
 .swagger-ui-wrap ul#resources li.resource ul.endpoints li.endpoint ul.operations li.operation div.content {
   border-top: none;
   padding: 10px;
@@ -1031,6 +1034,132 @@ table {
 .swagger-ui-wrap form.form_box p strong {
   color: black;
 }
+.title {
+  font-style: bold;
+}
+.secondary_form {
+  display: none;
+}
+.main_image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+.oauth_body {
+  margin-left: 100px;
+  margin-right: 100px;
+}
+.oauth_submit {
+  text-align: center;
+}
+.api-popup-dialog {
+  z-index: 10000;
+  position: absolute;
+  width: 500px;
+  background: #FFF;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  color: #777;
+}
+.api-popup-dialog .api-popup-title {
+  font-size: 24px;
+  padding: 10px 0;
+}
+.api-popup-dialog .api-popup-title {
+  font-size: 24px;
+  padding: 10px 0;
+}
+.api-popup-dialog p.error-msg {
+  padding-left: 5px;
+  padding-bottom: 5px;
+}
+.api-popup-dialog button.api-popup-authbtn {
+  height: 30px;
+}
+.api-popup-dialog button.api-popup-cancel {
+  height: 30px;
+}
+.api-popup-scopes {
+  padding: 10px 20px;
+}
+.api-popup-scopes li {
+  padding: 5px 0;
+  line-height: 20px;
+}
+.api-popup-scopes .api-scope-desc {
+  padding-left: 20px;
+  font-style: italic;
+}
+.api-popup-scopes li input {
+  position: relative;
+  top: 2px;
+}
+.api-popup-actions {
+  padding-top: 10px;
+}
+.access {
+  float: right;
+}
+.auth {
+  float: right;
+}
+#api_information_panel {
+  position: absolute;
+  background: #FFF;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  max-width: 300px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+}
+#api_information_panel p .api-msg-enabled {
+  color: green;
+}
+#api_information_panel p .api-msg-disabled {
+  color: red;
+}
+.api-ic {
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../images/explorer_icons.png) no-repeat;
+}
+.ic-info {
+  background-position: 0 0;
+  width: 18px;
+  margin-top: -7px;
+  margin-left: 4px;
+}
+.ic-warning {
+  background-position: -60px 0;
+  width: 18px;
+  margin-top: -7px;
+  margin-left: 4px;
+}
+.ic-error {
+  background-position: -30px 0;
+  width: 18px;
+  margin-top: -7px;
+  margin-left: 4px;
+}
+.ic-off {
+  background-position: -90px 0;
+  width: 58px;
+  margin-top: -4px;
+  cursor: pointer;
+}
+.ic-on {
+  background-position: -160px 0;
+  width: 58px;
+  margin-top: -4px;
+  cursor: pointer;
+}
 #header {
   background-color: #89bf04;
   padding: 14px;

src/main/html/index.html

@@ -16,14 +16,23 @@
   <script src='lib/swagger.js' type='text/javascript'></script>
   <script src='swagger-ui.js' type='text/javascript'></script>
   <script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
+
+  <!--script src='lib/swagger-oauth.js' type='text/javascript'></script-->
+
   <script type="text/javascript">
+    // var clientId = "your-client-id";
+    // var realm = "your-realm";
+
     $(function () {
       window.swaggerUi = new SwaggerUi({
       url: "http://petstore.swagger.wordnik.com/api/api-docs",
       dom_id: "swagger-ui-container",
       supportedSubmitMethods: ['get', 'post', 'put', 'delete'],
       onComplete: function(swaggerApi, swaggerUi){
-        log("Loaded SwaggerUI")
+        log("Loaded SwaggerUI");
+        /*if(typeof initOAuth == "function")
+          initOAuth();
+        */
         $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
       },
       onFailure: function(data) {
@@ -65,14 +74,8 @@
   </div>
 </div>
 
-<div id="message-bar" class="swagger-ui-wrap">
+<div id="message-bar" class="swagger-ui-wrap">&nbsp;</div>
-  &nbsp;
-</div>
-
-<div id="swagger-ui-container" class="swagger-ui-wrap">
-
-</div>
 
+<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
 </body>
-
 </html>

src/main/html/o2c.html

@@ -0,0 +1,15 @@
+<script>
+var qp = null;
+if(window.location.hash) {
+  qp = location.hash.substring(1);
+}
+else {
+  qp = location.search.substring(1);
+}
+qp = qp ? JSON.parse('{"' + qp.replace(/&/g, '","').replace(/=/g,'":"') + '"}',
+  function(key, value) {
+    return key===""?value:decodeURIComponent(value) }
+  ):{}
+window.opener.onOAuthComplete(qp);
+window.close();
+</script>

src/main/less/auth.less

@@ -0,0 +1,79 @@
+.title {
+  font-style: bold;
+}
+
+.secondary_form {
+  display: none;
+}
+
+.main_image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.oauth_body {
+  margin-left: 100px;
+  margin-right: 100px;
+}
+
+.oauth_submit {
+  text-align: center;
+}
+
+.api-popup-dialog {
+  z-index: 10000;
+  position: absolute;
+  width: 500px;
+  background: #FFF;
+  padding: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  color: #777;
+
+  .api-popup-title{
+    font-size: 24px;
+    padding: 10px 0;
+  }
+
+  .api-popup-title{
+    font-size: 24px;
+    padding: 10px 0;
+  }
+
+
+  p.error-msg {
+    padding-left: 5px;
+    padding-bottom: 5px;
+  }
+
+  button.api-popup-authbtn {
+    height: 30px;
+  }
+  button.api-popup-cancel {
+    height: 30px;
+  }
+}
+
+.api-popup-scopes {
+  padding: 10px 20px;
+
+  li {
+    padding: 5px 0;
+    line-height: 20px;
+  }
+
+  .api-scope-desc {
+    padding-left: 20px;
+    font-style: italic;
+  }
+  li input {
+    position: relative;
+    top: 2px;
+  }
+}
+.api-popup-actions {
+  padding-top: 10px;
+}

src/main/less/screen.less

@@ -1,5 +1,73 @@
 @import 'src/main/less/reset.less';
 @import 'src/main/less/specs.less';
+@import 'src/main/less/auth.less';
+
+.access {
+    float: right;
+}
+
+.auth {
+    float: right;
+}
+
+#api_information_panel {
+    position: absolute;
+    background: #FFF;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    display: none;
+    font-size: 13px;
+    max-width: 300px;
+    line-height: 30px;
+    color: black;
+    padding: 5px;
+    p {
+        .api-msg-enabled {
+            color: green;
+        }
+        .api-msg-disabled {
+            color: red;
+        }
+    }
+}
+
+.api-ic {
+    height: 18px;
+    vertical-align: middle;
+    display: inline-block;
+    background: url(../images/explorer_icons.png) no-repeat;
+}
+
+.ic-info {
+    background-position: 0 0;
+    width: 18px;
+    margin-top: -7px;
+    margin-left: 4px;
+}
+.ic-warning {
+    background-position: -60px 0;
+    width: 18px;
+    margin-top: -7px;
+    margin-left: 4px;
+}
+.ic-error {
+    background-position: -30px 0;
+    width: 18px;
+    margin-top: -7px;
+    margin-left: 4px;
+}
+.ic-off {
+    background-position: -90px 0;
+    width: 58px;
+    margin-top: -4px;
+    cursor: pointer;
+}
+.ic-on {
+    background-position: -160px 0;
+    width: 58px;
+    margin-top: -4px;
+    cursor: pointer;
+}
 
 #header {
     background-color: #89bf04;

src/main/less/specs.less

@@ -632,6 +632,11 @@
                                         }
                                     }
                                 }
+                                ul.options {
+                                    li.access {
+                                        color: black;
+                                    }
+                                }
                             }
                             div.content {
                                 border-top: none;

src/main/template/operation.handlebars

@@ -21,6 +21,22 @@
         <h4>Implementation Notes</h4>
         <p>{{{notes}}}</p>
         {{/if}}
+        {{#oauth}}
+        <div class="auth">
+        <span class="api-ic ic-error"></span>{{/oauth}}
+        {{#each oauth}}
+          <div id="api_information_panel" style="top: 526px; left: 776px; display: none;">
+          {{#each this}}
+            <div title='{{{this.description}}}'>{{this.scope}}</div>
+          {{/each}}
+          </div>
+        {{/each}}
+        {{#oauth}}</div>{{/oauth}}
+        {{#oauth}}
+        <div class='access'>
+          <span class="api-ic ic-off" title="click to authenticate"></span>
+        </div>
+        {{/oauth}}
         {{#if type}}
           <h4>Response Class</h4>
           <p><span class="model-signature" /></p>