Merge branch 'bodnia-auth'

dist/css/print.css

@@ -184,6 +184,7 @@
 .swagger-section .swagger-ui-wrap {
   line-height: 1;
   font-family: "Droid Sans", sans-serif;
+  min-width: 760px;
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
@@ -1180,18 +1181,122 @@
 }
 .swagger-section .oauth_submit {
   text-align: center;
+  display: inline-block;
+}
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
+.swagger-section .authorize-wrapper_operation {
+  float: right;
+}
+.swagger-section .authorize__btn:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.swagger-section .authorize__btn_operation:hover .authorize-scopes {
+  display: block;
+}
+.swagger-section .authorize-scopes {
+  position: absolute;
+  margin-top: 20px;
+  background: #FFF;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  max-width: 300px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+}
+.swagger-section .authorize-scopes .authorize__scope {
+  text-decoration: none;
+}
+.swagger-section .authorize__btn_operation {
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../images/explorer_icons.png) no-repeat;
+}
+.swagger-section .authorize__btn_operation_login {
+  background-position: 0 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section .authorize__btn_operation_logout {
+  background-position: -30px 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section #auth_container {
+  color: #fff;
+  display: inline-block;
+  border: none;
+  padding: 5px;
+  width: 87px;
+  height: 13px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
+.swagger-section .auth_container {
+  padding: 0 0 10px;
+  margin-bottom: 5px;
+  border-bottom: solid 1px #CCC;
+  font-size: 0.9em;
+}
+.swagger-section .auth_container .auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .basic_auth__label {
+  display: inline-block;
+  width: 60px;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth__button {
+  margin-top: 10px;
+  height: 30px;
+}
+.swagger-section .auth_container .key_auth__field {
+  margin: 5px 0;
+}
+.swagger-section .auth_container .key_auth__label {
+  display: inline-block;
+  width: 60px;
 }
 .swagger-section .api-popup-dialog {
-  z-index: 10000;
   position: absolute;
+  display: none;
+}
+.swagger-section .api-popup-dialog-wrapper {
+  z-index: 1000;
   width: 500px;
   background: #FFF;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  display: none;
   font-size: 13px;
   color: #777;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.swagger-section .api-popup-dialog-shadow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  background-color: gray;
+  z-index: 900;
 }
 .swagger-section .api-popup-dialog .api-popup-title {
   font-size: 24px;
@@ -1205,6 +1310,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }

dist/css/screen.css

@@ -184,6 +184,7 @@
 .swagger-section .swagger-ui-wrap {
   line-height: 1;
   font-family: "Droid Sans", sans-serif;
+  min-width: 760px;
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
@@ -1180,18 +1181,122 @@
 }
 .swagger-section .oauth_submit {
   text-align: center;
+  display: inline-block;
+}
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
+.swagger-section .authorize-wrapper_operation {
+  float: right;
+}
+.swagger-section .authorize__btn:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.swagger-section .authorize__btn_operation:hover .authorize-scopes {
+  display: block;
+}
+.swagger-section .authorize-scopes {
+  position: absolute;
+  margin-top: 20px;
+  background: #FFF;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  max-width: 300px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+}
+.swagger-section .authorize-scopes .authorize__scope {
+  text-decoration: none;
+}
+.swagger-section .authorize__btn_operation {
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../images/explorer_icons.png) no-repeat;
+}
+.swagger-section .authorize__btn_operation_login {
+  background-position: 0 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section .authorize__btn_operation_logout {
+  background-position: -30px 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section #auth_container {
+  color: #fff;
+  display: inline-block;
+  border: none;
+  padding: 5px;
+  width: 87px;
+  height: 13px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
+.swagger-section .auth_container {
+  padding: 0 0 10px;
+  margin-bottom: 5px;
+  border-bottom: solid 1px #CCC;
+  font-size: 0.9em;
+}
+.swagger-section .auth_container .auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .basic_auth__label {
+  display: inline-block;
+  width: 60px;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth__button {
+  margin-top: 10px;
+  height: 30px;
+}
+.swagger-section .auth_container .key_auth__field {
+  margin: 5px 0;
+}
+.swagger-section .auth_container .key_auth__label {
+  display: inline-block;
+  width: 60px;
 }
 .swagger-section .api-popup-dialog {
-  z-index: 10000;
   position: absolute;
+  display: none;
+}
+.swagger-section .api-popup-dialog-wrapper {
+  z-index: 1000;
   width: 500px;
   background: #FFF;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  display: none;
   font-size: 13px;
   color: #777;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.swagger-section .api-popup-dialog-shadow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  background-color: gray;
+  z-index: 900;
 }
 .swagger-section .api-popup-dialog .api-popup-title {
   font-size: 24px;
@@ -1205,6 +1310,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }
@@ -1297,7 +1406,9 @@
 }
 .swagger-section #header {
   background-color: #89bf04;
-  padding: 14px;
+  padding: 9px 14px 19px 14px;
+  height: 23px;
+  min-width: 775px;
 }
 .swagger-section #input_baseUrl {
   width: 400px;
@@ -1308,9 +1419,8 @@
   float: right;
 }
 .swagger-section #api_selector .input {
-  display: block;
+  display: inline-block;
   clear: none;
-  float: left;
   margin: 0 10px 0 0;
 }
 .swagger-section #api_selector input {
@@ -1321,7 +1431,8 @@
 .swagger-section #input_apiKey {
   width: 200px;
 }
-.swagger-section #explore {
+.swagger-section #explore,
+.swagger-section #auth_container .authorize__btn {
   display: block;
   text-decoration: none;
   font-weight: bold;
@@ -1336,17 +1447,25 @@
   -khtml-border-radius: 4px;
   border-radius: 4px;
 }
-.swagger-section #explore:hover {
+.swagger-section #explore:hover,
+.swagger-section #auth_container .authorize__btn:hover {
   background-color: #547f00;
 }
 .swagger-section #header #logo {
   font-size: 1.5em;
   font-weight: bold;
   text-decoration: none;
-  background: transparent url(../images/logo_small.png) no-repeat left center;
-  padding: 20px 0 20px 40px;
   color: white;
 }
+.swagger-section #header #logo .logo__img {
+  display: block;
+  float: left;
+  margin-top: 2px;
+}
+.swagger-section #header #logo .logo__title {
+  display: inline-block;
+  padding: 5px 0 0 10px;
+}
 .swagger-section #content_message {
   margin: 10px 15px;
   font-style: italic;
@@ -1363,3 +1482,7 @@
 .swagger-section .swagger-expand:before {
   content: "+";
 }
+.swagger-section .error {
+  outline-color: #cc0000;
+  background-color: #f2dede;
+}

dist/index.html

@@ -67,7 +67,7 @@
             window.SwaggerTranslator.translate();
           }
 
-          addApiKeyAuthorization();
+//          addApiKeyAuthorization();
         },
         onFailure: function(data) {
           log("Unable to Load SwaggerUI");
@@ -79,16 +79,16 @@
         showRequestHeaders: false
       });
 
-      function addApiKeyAuthorization(){
+//      function addApiKeyAuthorization(){
-        var key = encodeURIComponent($('#input_apiKey')[0].value);
+//        var key = encodeURIComponent($('#input_apiKey')[0].value);
-        if(key && key.trim() != "") {
+//        if(key && key.trim() != "") {
-            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
+//            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
-            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
+//            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
-            log("added key " + key);
+//            log("added key " + key);
-        }
+//        }
-      }
+//      }
-
+//
-      $('#input_apiKey').change(addApiKeyAuthorization);
+//      $('#input_apiKey').change(addApiKeyAuthorization);
 
       // if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
       /*
@@ -110,11 +110,11 @@
 <body class="swagger-section">
 <div id='header'>
   <div class="swagger-ui-wrap">
-    <a id="logo" href="http://swagger.io">swagger</a>
+    <a id="logo" href="http://swagger.io"><img class="logo__img" alt="swagger" height="30" width="30" src="images/logo_small.png" /><span class="logo__title">swagger</span></a>
     <form id='api_selector'>
       <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
-      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
+      <div id='auth_container'></div>
-      <div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>
+      <div class='input'><a id="explore" class="header__btn" href="#" data-sw-translate>Explore</a></div>
     </form>
   </div>
 </div>

dist/lib/swagger-oauth.js

@@ -331,7 +331,8 @@ window.onOAuthComplete = function onOAuthComplete(token,OAuthSchemeKey) {
             }
           }
         });
-        window.swaggerUi.api.clientAuthorizations.add(OAuthSchemeKey, new SwaggerClient.ApiKeyAuthorization('Authorization', 'Bearer ' + b, 'header'));
+        window.swaggerUi.api.clientAuthorizations.add(window.OAuthSchemeKey, new SwaggerClient.ApiKeyAuthorization('Authorization', 'Bearer ' + b, 'header'));
+        window.swaggerUi.load();
       }
     }
   }

lib/swagger-oauth.js

@@ -331,7 +331,8 @@ window.onOAuthComplete = function onOAuthComplete(token,OAuthSchemeKey) {
             }
           }
         });
-        window.swaggerUi.api.clientAuthorizations.add(OAuthSchemeKey, new SwaggerClient.ApiKeyAuthorization('Authorization', 'Bearer ' + b, 'header'));
+        window.swaggerUi.api.clientAuthorizations.add(window.OAuthSchemeKey, new SwaggerClient.ApiKeyAuthorization('Authorization', 'Bearer ' + b, 'header'));
+        window.swaggerUi.load();
       }
     }
   }

src/main/html/css/print.css

@@ -184,6 +184,7 @@
 .swagger-section .swagger-ui-wrap {
   line-height: 1;
   font-family: "Droid Sans", sans-serif;
+  min-width: 760px;
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
@@ -1180,18 +1181,122 @@
 }
 .swagger-section .oauth_submit {
   text-align: center;
+  display: inline-block;
+}
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
+.swagger-section .authorize-wrapper_operation {
+  float: right;
+}
+.swagger-section .authorize__btn:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.swagger-section .authorize__btn_operation:hover .authorize-scopes {
+  display: block;
+}
+.swagger-section .authorize-scopes {
+  position: absolute;
+  margin-top: 20px;
+  background: #FFF;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  max-width: 300px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+}
+.swagger-section .authorize-scopes .authorize__scope {
+  text-decoration: none;
+}
+.swagger-section .authorize__btn_operation {
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../images/explorer_icons.png) no-repeat;
+}
+.swagger-section .authorize__btn_operation_login {
+  background-position: 0 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section .authorize__btn_operation_logout {
+  background-position: -30px 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section #auth_container {
+  color: #fff;
+  display: inline-block;
+  border: none;
+  padding: 5px;
+  width: 87px;
+  height: 13px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
+.swagger-section .auth_container {
+  padding: 0 0 10px;
+  margin-bottom: 5px;
+  border-bottom: solid 1px #CCC;
+  font-size: 0.9em;
+}
+.swagger-section .auth_container .auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .basic_auth__label {
+  display: inline-block;
+  width: 60px;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth__button {
+  margin-top: 10px;
+  height: 30px;
+}
+.swagger-section .auth_container .key_auth__field {
+  margin: 5px 0;
+}
+.swagger-section .auth_container .key_auth__label {
+  display: inline-block;
+  width: 60px;
 }
 .swagger-section .api-popup-dialog {
-  z-index: 10000;
   position: absolute;
+  display: none;
+}
+.swagger-section .api-popup-dialog-wrapper {
+  z-index: 1000;
   width: 500px;
   background: #FFF;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  display: none;
   font-size: 13px;
   color: #777;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.swagger-section .api-popup-dialog-shadow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  background-color: gray;
+  z-index: 900;
 }
 .swagger-section .api-popup-dialog .api-popup-title {
   font-size: 24px;
@@ -1205,6 +1310,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }

src/main/html/css/screen.css

@@ -184,6 +184,7 @@
 .swagger-section .swagger-ui-wrap {
   line-height: 1;
   font-family: "Droid Sans", sans-serif;
+  min-width: 760px;
   max-width: 960px;
   margin-left: auto;
   margin-right: auto;
@@ -1180,18 +1181,122 @@
 }
 .swagger-section .oauth_submit {
   text-align: center;
+  display: inline-block;
+}
+.swagger-section .authorize-wrapper {
+  margin: 15px 0 10px;
+}
+.swagger-section .authorize-wrapper_operation {
+  float: right;
+}
+.swagger-section .authorize__btn:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.swagger-section .authorize__btn_operation:hover .authorize-scopes {
+  display: block;
+}
+.swagger-section .authorize-scopes {
+  position: absolute;
+  margin-top: 20px;
+  background: #FFF;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  display: none;
+  font-size: 13px;
+  max-width: 300px;
+  line-height: 30px;
+  color: black;
+  padding: 5px;
+}
+.swagger-section .authorize-scopes .authorize__scope {
+  text-decoration: none;
+}
+.swagger-section .authorize__btn_operation {
+  height: 18px;
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../images/explorer_icons.png) no-repeat;
+}
+.swagger-section .authorize__btn_operation_login {
+  background-position: 0 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section .authorize__btn_operation_logout {
+  background-position: -30px 0;
+  width: 18px;
+  margin-top: -6px;
+  margin-left: 4px;
+}
+.swagger-section #auth_container {
+  color: #fff;
+  display: inline-block;
+  border: none;
+  padding: 5px;
+  width: 87px;
+  height: 13px;
+}
+.swagger-section #auth_container .authorize__btn {
+  color: #fff;
+}
+.swagger-section .auth_container {
+  padding: 0 0 10px;
+  margin-bottom: 5px;
+  border-bottom: solid 1px #CCC;
+  font-size: 0.9em;
+}
+.swagger-section .auth_container .auth__title {
+  color: #547f00;
+  font-size: 1.2em;
+}
+.swagger-section .auth_container .basic_auth__label {
+  display: inline-block;
+  width: 60px;
+}
+.swagger-section .auth_container .auth__description {
+  color: #999999;
+  margin-bottom: 5px;
+}
+.swagger-section .auth_container .auth__button {
+  margin-top: 10px;
+  height: 30px;
+}
+.swagger-section .auth_container .key_auth__field {
+  margin: 5px 0;
+}
+.swagger-section .auth_container .key_auth__label {
+  display: inline-block;
+  width: 60px;
 }
 .swagger-section .api-popup-dialog {
-  z-index: 10000;
   position: absolute;
+  display: none;
+}
+.swagger-section .api-popup-dialog-wrapper {
+  z-index: 1000;
   width: 500px;
   background: #FFF;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  display: none;
   font-size: 13px;
   color: #777;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.swagger-section .api-popup-dialog-shadow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  background-color: gray;
+  z-index: 900;
 }
 .swagger-section .api-popup-dialog .api-popup-title {
   font-size: 24px;
@@ -1205,6 +1310,10 @@
   padding-left: 5px;
   padding-bottom: 5px;
 }
+.swagger-section .api-popup-dialog .api-popup-content {
+  max-height: 500px;
+  overflow-y: auto;
+}
 .swagger-section .api-popup-dialog .api-popup-authbtn {
   height: 30px;
 }
@@ -1297,7 +1406,9 @@
 }
 .swagger-section #header {
   background-color: #89bf04;
-  padding: 14px;
+  padding: 9px 14px 19px 14px;
+  height: 23px;
+  min-width: 775px;
 }
 .swagger-section #input_baseUrl {
   width: 400px;
@@ -1308,9 +1419,8 @@
   float: right;
 }
 .swagger-section #api_selector .input {
-  display: block;
+  display: inline-block;
   clear: none;
-  float: left;
   margin: 0 10px 0 0;
 }
 .swagger-section #api_selector input {
@@ -1321,7 +1431,8 @@
 .swagger-section #input_apiKey {
   width: 200px;
 }
-.swagger-section #explore {
+.swagger-section #explore,
+.swagger-section #auth_container .authorize__btn {
   display: block;
   text-decoration: none;
   font-weight: bold;
@@ -1336,17 +1447,25 @@
   -khtml-border-radius: 4px;
   border-radius: 4px;
 }
-.swagger-section #explore:hover {
+.swagger-section #explore:hover,
+.swagger-section #auth_container .authorize__btn:hover {
   background-color: #547f00;
 }
 .swagger-section #header #logo {
   font-size: 1.5em;
   font-weight: bold;
   text-decoration: none;
-  background: transparent url(../images/logo_small.png) no-repeat left center;
-  padding: 20px 0 20px 40px;
   color: white;
 }
+.swagger-section #header #logo .logo__img {
+  display: block;
+  float: left;
+  margin-top: 2px;
+}
+.swagger-section #header #logo .logo__title {
+  display: inline-block;
+  padding: 5px 0 0 10px;
+}
 .swagger-section #content_message {
   margin: 10px 15px;
   font-style: italic;
@@ -1363,3 +1482,7 @@
 .swagger-section .swagger-expand:before {
   content: "+";
 }
+.swagger-section .error {
+  outline-color: #cc0000;
+  background-color: #f2dede;
+}

src/main/html/index.html

@@ -67,7 +67,7 @@
             window.SwaggerTranslator.translate();
           }
 
-          addApiKeyAuthorization();
+//          addApiKeyAuthorization();
         },
         onFailure: function(data) {
           log("Unable to Load SwaggerUI");
@@ -79,16 +79,16 @@
         showRequestHeaders: false
       });
 
-      function addApiKeyAuthorization(){
+//      function addApiKeyAuthorization(){
-        var key = encodeURIComponent($('#input_apiKey')[0].value);
+//        var key = encodeURIComponent($('#input_apiKey')[0].value);
-        if(key && key.trim() != "") {
+//        if(key && key.trim() != "") {
-            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
+//            var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization("api_key", key, "query");
-            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
+//            window.swaggerUi.api.clientAuthorizations.add("api_key", apiKeyAuth);
-            log("added key " + key);
+//            log("added key " + key);
-        }
+//        }
-      }
+//      }
-
+//
-      $('#input_apiKey').change(addApiKeyAuthorization);
+//      $('#input_apiKey').change(addApiKeyAuthorization);
 
       // if you have an apiKey you would like to pre-populate on the page for demonstration purposes...
       /*
@@ -110,11 +110,11 @@
 <body class="swagger-section">
 <div id='header'>
   <div class="swagger-ui-wrap">
-    <a id="logo" href="http://swagger.io">swagger</a>
+    <a id="logo" href="http://swagger.io"><img class="logo__img" alt="swagger" height="30" width="30" src="images/logo_small.png" /><span class="logo__title">swagger</span></a>
     <form id='api_selector'>
       <div class='input'><input placeholder="http://example.com/api" id="input_baseUrl" name="baseUrl" type="text"/></div>
-      <div class='input'><input placeholder="api_key" id="input_apiKey" name="apiKey" type="text"/></div>
+      <div id='auth_container'></div>
-      <div class='input'><a id="explore" href="#" data-sw-translate>Explore</a></div>
+      <div class='input'><a id="explore" class="header__btn" href="#" data-sw-translate>Explore</a></div>
     </form>
   </div>
 </div>

src/main/javascript/SwaggerUi.js

@@ -102,6 +102,10 @@ window.SwaggerUi = Backbone.Router.extend({
     if (this.mainView) {
       this.mainView.clear();
     }
+
+    if (this.authView) {
+      this.authView.remove();
+    }
     var url = this.options.url;
     if (url && url.indexOf('http') !== 0) {
       url = this.buildUrl(window.location.href.toString(), url);
@@ -133,6 +137,7 @@ window.SwaggerUi = Backbone.Router.extend({
   // This is bound to success handler for SwaggerApi
   //  so it gets called when SwaggerApi completes loading
   render: function(){
+    var authsModel;
     this.showMessage('Finished Loading Resource Information. Rendering Swagger UI...');
     this.mainView = new SwaggerUi.Views.MainView({
       model: this.api,
@@ -140,6 +145,18 @@ window.SwaggerUi = Backbone.Router.extend({
       swaggerOptions: this.options,
       router: this
     }).render();
+    if (!_.isEmpty(this.api.securityDefinitions)){
+      authsModel = _.map(this.api.securityDefinitions, function (auth, name) {
+        var result = {};
+        result[name] = auth;
+        return result;
+      });
+      this.authView = new SwaggerUi.Views.AuthButtonView({
+        data: SwaggerUi.utils.parseSecurityDefinitions(authsModel),
+        router: this
+      });
+      $('#auth_container').append(this.authView.render().el);
+    }
     this.showMessage();
     switch (this.options.docExpansion) {
       case 'full':
@@ -229,7 +246,10 @@ window.SwaggerUi = Backbone.Router.extend({
 });
 
 window.SwaggerUi.Views = {};
+window.SwaggerUi.Models = {};
+window.SwaggerUi.Collections = {};
 window.SwaggerUi.partials = {};
+window.SwaggerUi.utils = {};
 
 // don't break backward compatibility with previous versions and warn users to upgrade their code
 (function(){

src/main/javascript/utils/utils.js

@@ -0,0 +1,71 @@
+'use strict';
+
+window.SwaggerUi.utils = {
+    parseSecurityDefinitions: function (security) {
+        var auths = Object.assign({}, window.swaggerUi.api.authSchemes || window.swaggerUi.api.securityDefinitions);
+        var oauth2Arr = [];
+        var authsArr = [];
+        var scopes = [];
+        var utils = window.SwaggerUi.utils;
+
+        if (!Array.isArray(security)) { return null; }
+
+        security.forEach(function (item) {
+            var singleSecurity = {};
+            var singleOauth2Security = {};
+
+            for (var key in item) {
+                if (Array.isArray(item[key])) {
+                    if (!auths[key]) { continue; }
+                    auths[key] = auths[key] || {};
+                    if (auths[key].type === 'oauth2') {
+                        singleOauth2Security[key] = Object.assign({}, auths[key]);
+                        for (var i in singleOauth2Security[key].scopes) {
+                            if (item[key].indexOf(i) < 0) {
+                                delete singleOauth2Security[key].scopes[i];
+                            }
+                        }
+                        singleOauth2Security[key].scopes = utils.parseOauth2Scopes(singleOauth2Security[key].scopes);
+                        scopes = _.merge(scopes, singleOauth2Security[key].scopes);
+                    } else {
+                        singleSecurity[key] = Object.assign({}, auths[key]);
+                    }
+                } else {
+                    if (item[key].type === 'oauth2') {
+                        singleOauth2Security[key] = Object.assign({}, item[key]);
+                        singleOauth2Security[key].scopes = utils.parseOauth2Scopes(singleOauth2Security[key].scopes);
+                        scopes = _.merge(scopes, singleOauth2Security[key].scopes);
+                    } else {
+                        singleSecurity[key] = item[key];
+                    }
+                }
+            }
+
+            if (!_.isEmpty(singleSecurity)) {
+                authsArr.push(singleSecurity);
+            }
+
+            if (!_.isEmpty(singleOauth2Security)){
+                oauth2Arr.push(singleOauth2Security);
+            }
+        });
+
+        return {
+            auths : authsArr,
+            oauth2: oauth2Arr,
+            scopes: scopes
+        };
+    },
+
+    parseOauth2Scopes: function (data) {
+        var scopes = Object.assign({}, data);
+        var result = [];
+        var key;
+
+        for (key in scopes) {
+            result.push({scope: key, description: scopes[key]});
+        }
+
+        return result;
+    }
+};

src/main/javascript/view/ApiKeyAuthModel.js

@@ -0,0 +1,22 @@
+'use strict';
+
+SwaggerUi.Models.ApiKeyAuthModel = Backbone.Model.extend({
+    defaults: {
+        'in': '',
+        name: '',
+        title: '',
+        value: ''
+    },
+
+    initialize: function () {
+        this.on('change', this.validate);
+    },
+
+    validate: function () {
+        var valid = !!this.get('value');
+
+        this.set('valid', valid);
+
+        return valid;
+    }
+});

src/main/javascript/view/ApiKeyAuthView.js

@@ -0,0 +1,45 @@
+'use strict';
+
+SwaggerUi.Views.ApiKeyAuthView = Backbone.View.extend({ // TODO: append this to global SwaggerUi
+
+    events: {
+        'change .input_apiKey_entry': 'apiKeyChange'
+    },
+
+    selectors: {
+        apikeyInput: '.input_apiKey_entry'
+    },
+
+    template: Handlebars.templates.apikey_auth,
+
+    initialize: function(opts) {
+        this.options = opts || {};
+        this.router = this.options.router;
+    },
+
+    render: function (){
+        this.$el.html(this.template(this.model.toJSON()));
+
+        return this;
+    },
+
+    apiKeyChange: function (e) {
+        var val = $(e.target).val();
+        if (val) {
+            this.$(this.selectors.apikeyInput).removeClass('error');
+        }
+
+        this.model.set('value', val);
+    },
+
+    isValid: function () {
+        return this.model.validate();
+    },
+
+    highlightInvalid: function () {
+        if (!this.isValid()) {
+            this.$(this.selectors.apikeyInput).addClass('error');
+        }
+    }
+
+});

src/main/javascript/view/ApiKeyButton.js

@@ -1,54 +0,0 @@
-'use strict';
-
-SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to global SwaggerUi
-
-  events:{
-    'click #apikey_button' : 'toggleApiKeyContainer',
-    'click #apply_api_key' : 'applyApiKey'
-  },
-
-  initialize: function(opts){
-    this.options = opts || {};
-    this.router = this.options.router;
-  },
-
-  render: function(){
-    var template = this.template();
-    $(this.el).html(template(this.model));
-
-    return this;
-  },
-
-
-  applyApiKey: function(){
-    var keyAuth = new SwaggerClient.ApiKeyAuthorization(
-      this.model.name,
-      $('#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;
-  }
-
-});

src/main/javascript/view/AuthButtonView.js

@@ -0,0 +1,64 @@
+'use strict';
+
+SwaggerUi.Views.AuthButtonView = Backbone.View.extend({
+    events: {
+        'click .authorize__btn': 'authorizeBtnClick'
+    },
+
+    tpls: {
+        popup: Handlebars.templates.popup,
+        authBtn: Handlebars.templates.auth_button,
+        authBtnOperation: Handlebars.templates.auth_button_operation
+    },
+
+    initialize: function(opts) {
+        this.options = opts || {};
+        this.options.data = this.options.data || {};
+        this.isOperation = this.options.isOperation;
+        this.model = this.model || {};
+        this.router = this.options.router;
+        this.auths = this.options.data.oauth2.concat(this.options.data.auths);
+    },
+
+    render: function () {
+        var tplName = this.isOperation ? 'authBtnOperation' : 'authBtn';
+
+        this.$authEl = this.renderAuths(this.auths);
+        this.$el.html(this.tpls[tplName](this.model));
+
+        return this;
+    },
+
+    authorizeBtnClick: function (e) {
+        var authsModel;
+
+        e.preventDefault();
+
+        authsModel = {
+            title: 'Available authorizations',
+            content: this.$authEl
+        };
+
+        this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
+        this.popup.render();
+    },
+
+    renderAuths: function (auths) {
+        var $el = $('<div>');
+        var isLogout = false;
+
+        auths.forEach(function (auth) {
+            var authView = new SwaggerUi.Views.AuthView({data: auth, router: this.router});
+            var authEl = authView.render().el;
+            $el.append(authEl);
+            if (authView.isLogout) {
+                isLogout = true;
+            }
+        }, this);
+
+        this.model.isLogout = isLogout;
+
+        return $el;
+    }
+
+});

src/main/javascript/view/AuthView.js

@@ -0,0 +1,180 @@
+'use strict';
+
+/* global redirect_uri */
+/* global clientId */
+/* global scopeSeparator */
+/* global additionalQueryStringParams */
+/* global clientSecret */
+/* global onOAuthComplete */
+/* global realm */
+/*jshint unused:false*/
+
+SwaggerUi.Views.AuthView = Backbone.View.extend({
+    events: {
+        'click .auth_submit__button': 'authorizeClick',
+        'click .auth_logout__button': 'logoutClick'
+    },
+
+    tpls: {
+        main: Handlebars.templates.auth_view
+    },
+
+    selectors: {
+        innerEl: '.auth_inner',
+        authBtn: '.auth_submit__button'
+    },
+
+    initialize: function(opts) {
+        this.options = opts || {};
+        opts.data = opts.data || {};
+        this.router = this.options.router;
+
+        this.authsCollectionView = new SwaggerUi.Views.AuthsCollectionView({data: opts.data});
+
+        this.$el.html(this.tpls.main({
+            isLogout: this.authsCollectionView.collection.isAuthorized(),
+            isAuthorized: this.authsCollectionView.collection.isPartiallyAuthorized()
+        }));
+        this.$innerEl = this.$(this.selectors.innerEl);
+        this.isLogout = this.authsCollectionView.collection.isPartiallyAuthorized();
+    },
+
+    render: function () {
+        this.$innerEl.html(this.authsCollectionView.render().el);
+
+        return this;
+    },
+
+    authorizeClick: function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (this.authsCollectionView.collection.isValid()) {
+            this.authorize();
+        } else {
+            this.authsCollectionView.highlightInvalid();
+        }
+    },
+
+    authorize: function () {
+        this.authsCollectionView.collection.forEach(function (auth) {
+            var keyAuth, basicAuth;
+            var type = auth.get('type');
+
+            if (type === 'apiKey') {
+                keyAuth = new SwaggerClient.ApiKeyAuthorization(
+                    auth.get('name'),
+                    auth.get('value'),
+                    auth.get('in')
+                );
+
+                this.router.api.clientAuthorizations.add(auth.get('title'), keyAuth);
+            } else if (type === 'basic') {
+                basicAuth = new SwaggerClient.PasswordAuthorization(auth.get('username'), auth.get('password'));
+                this.router.api.clientAuthorizations.add(auth.get('type'), basicAuth);
+            } else if (type === 'oauth2') {
+                this.handleOauth2Login(auth);
+            }
+        }, this);
+
+        this.router.load();
+    },
+
+    logoutClick: function (e) {
+        e.preventDefault();
+
+        this.authsCollectionView.collection.forEach(function (auth) {
+            var name = auth.get('type') === 'basic' ? 'basic' : auth.get('title');
+
+            window.swaggerUi.api.clientAuthorizations.remove(name);
+        });
+
+        this.router.load();
+    },
+
+    // taken from lib/swagger-oauth.js
+    handleOauth2Login: function (auth) {
+        var host = window.location;
+        var pathname = location.pathname.substring(0, location.pathname.lastIndexOf('/'));
+        var defaultRedirectUrl = host.protocol + '//' + host.host + pathname + '/o2c.html';
+        var redirectUrl = window.oAuthRedirectUrl || defaultRedirectUrl;
+        var url = null;
+        var scopes = _.map(auth.get('scopes'), function (scope) {
+            return scope.scope;
+        });
+        var state, dets, ep;
+        window.OAuthSchemeKey = auth.get('title');
+
+        window.enabledScopes = scopes;
+        var flow = auth.get('flow');
+
+        if(auth.get('type') === 'oauth2' && flow && (flow === 'implicit' || flow === 'accessCode')) {
+            dets = auth.attributes;
+            url = dets.authorizationUrl + '?response_type=' + (flow === 'implicit' ? 'token' : 'code');
+            window.swaggerUi.tokenName = dets.tokenName || 'access_token';
+            window.swaggerUi.tokenUrl = (flow === 'accessCode' ? dets.tokenUrl : null);
+            state = window.OAuthSchemeKey;
+        }
+        else if(auth.get('type') === 'oauth2' && flow && (flow === 'application')) {
+            dets = auth.attributes;
+            window.swaggerUi.tokenName = dets.tokenName || 'access_token';
+            this.clientCredentialsFlow(scopes, dets.tokenUrl, window.OAuthSchemeKey);
+            return;
+        }
+        else if(auth.get('grantTypes')) {
+            // 1.2 support
+            var o = auth.get('grantTypes');
+            for(var t in o) {
+                if(o.hasOwnProperty(t) && t === 'implicit') {
+                    dets = o[t];
+                    ep = dets.loginEndpoint.url;
+                    url = dets.loginEndpoint.url + '?response_type=token';
+                    window.swaggerUi.tokenName = dets.tokenName;
+                }
+                else if (o.hasOwnProperty(t) && t === 'accessCode') {
+                    dets = o[t];
+                    ep = dets.tokenRequestEndpoint.url;
+                    url = dets.tokenRequestEndpoint.url + '?response_type=code';
+                    window.swaggerUi.tokenName = dets.tokenName;
+                }
+            }
+        }
+
+        var redirect_uri = redirectUrl;
+
+        url += '&redirect_uri=' + encodeURIComponent(redirectUrl);
+        url += '&realm=' + encodeURIComponent(realm);
+        url += '&client_id=' + encodeURIComponent(clientId);
+        url += '&scope=' + encodeURIComponent(scopes.join(scopeSeparator));
+        url += '&state=' + encodeURIComponent(state);
+        for (var key in additionalQueryStringParams) {
+            url += '&' + key + '=' + encodeURIComponent(additionalQueryStringParams[key]);
+        }
+
+        window.open(url);
+    },
+
+    // taken from lib/swagger-oauth.js
+    clientCredentialsFlow: function (scopes, tokenUrl, OAuthSchemeKey) {
+        var params = {
+            'client_id': clientId,
+            'client_secret': clientSecret,
+            'scope': scopes.join(' '),
+            'grant_type': 'client_credentials'
+        };
+        $.ajax({
+            url : tokenUrl,
+            type: 'POST',
+            data: params,
+            success: function (data)
+            {
+                onOAuthComplete(data, OAuthSchemeKey);
+            },
+            error: function ()
+            {
+                onOAuthComplete('');
+            }
+        });
+    }
+
+});

src/main/javascript/view/AuthsCollection.js

@@ -0,0 +1,91 @@
+'use strict';
+
+SwaggerUi.Collections.AuthsCollection = Backbone.Collection.extend({
+    constructor: function() {
+        var args = Array.prototype.slice.call(arguments);
+
+        args[0] = this.parse(args[0]);
+
+        Backbone.Collection.apply(this, args);
+    },
+
+    add: function (model) {
+        var args = Array.prototype.slice.call(arguments);
+
+        if (Array.isArray(model)) {
+            args[0] = _.map(model, function(val) {
+                return this.handleOne(val);
+            }, this);
+        } else {
+            args[0] = this.handleOne(model);
+        }
+
+        Backbone.Collection.prototype.add.apply(this, args);
+    },
+
+    handleOne: function (model) {
+        var result = model;
+
+        if (! (model instanceof Backbone.Model) ) {
+            switch (model.type) {
+                case 'oauth2':
+                    result = new SwaggerUi.Models.Oauth2Model(model);
+                    break;
+                case 'basic':
+                    result = new SwaggerUi.Models.BasicAuthModel(model);
+                    break;
+                case 'apiKey':
+                    result = new SwaggerUi.Models.ApiKeyAuthModel(model);
+                    break;
+                default:
+                    result = new Backbone.Model(model);
+            }
+        }
+
+        return result;
+    },
+
+    isValid: function () {
+        var valid = true;
+
+        this.models.forEach(function(model) {
+            if (!model.validate()) {
+                valid = false;
+            }
+        });
+
+        return valid;
+    },
+
+    isAuthorized: function () {
+        return this.length === this.where({ isLogout: true }).length;
+    },
+
+    isPartiallyAuthorized: function () {
+        return this.where({ isLogout: true }).length > 0;
+    },
+
+    parse: function (data) {
+        var authz = Object.assign({}, window.swaggerUi.api.clientAuthorizations.authz);
+
+        return _.map(data, function (auth, name) {
+            var isBasic = authz.basic && auth.type === 'basic';
+
+            _.extend(auth, {
+                title: name
+            });
+
+            if (authz[name] || isBasic) {
+                _.extend(auth, {
+                    isLogout: true,
+                    value: isBasic ? undefined : authz[name].value,
+                    username: isBasic ? authz.basic.username : undefined,
+                    password: isBasic ? authz.basic.password : undefined,
+                    valid: true
+                });
+            }
+
+            return auth;
+        });
+    }
+});

src/main/javascript/view/AuthsCollectionView.js

@@ -0,0 +1,53 @@
+'use strict';
+
+SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
+
+    initialize: function(opts) {
+        this.options = opts || {};
+        this.options.data = this.options.data || {};
+        this.router = this.options.router;
+
+        this.collection = new SwaggerUi.Collections.AuthsCollection(opts.data);
+
+        this.$innerEl = $('<div>');
+        this.authViews = [];
+    },
+
+    render: function () {
+        this.collection.each(function (auth) {
+            this.renderOneAuth(auth);
+        }, this);
+
+        this.$el.html(this.$innerEl.html() ? this.$innerEl : '');
+
+        return this;
+    },
+
+    renderOneAuth: function (authModel) {
+        var authViewEl, authView, authViewName;
+        var type = authModel.get('type');
+
+        if (type === 'apiKey') {
+            authViewName = 'ApiKeyAuthView';
+        } else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
+            authViewName = 'BasicAuthView';
+        } else if (type === 'oauth2') {
+            authViewName = 'Oauth2View';
+        }
+
+        if (authViewName) {
+            authView = new SwaggerUi.Views[authViewName]({model: authModel, router: this.router});
+            authViewEl = authView.render().el;
+            this.authViews.push(authView);
+        }
+
+        this.$innerEl.append(authViewEl);
+    },
+
+    highlightInvalid: function () {
+        this.authViews.forEach(function (view) {
+            view.highlightInvalid();
+        }, this);
+    }
+
+});

src/main/javascript/view/BasicAuthButton.js

@@ -1,50 +0,0 @@
-'use strict';
-
-SwaggerUi.Views.BasicAuthButton = Backbone.View.extend({
-
-
-  initialize: function (opts) {
-    this.options = opts || {};
-    this.router = this.options.router;
-  },
-
-  render: function(){
-    var template = this.template();
-    $(this.el).html(template(this.model));
-
-    return this;
-  },
-
-  events: {
-    'click #basic_auth_button' : 'togglePasswordContainer',
-    'click #apply_basic_auth' : 'applyPassword'
-  },
-
-  applyPassword: function(event){
-    event.preventDefault();
-    var username = $('#input_username').val();
-    var password = $('#input_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/BasicAuthModel.js

@@ -0,0 +1,21 @@
+'use strict';
+
+SwaggerUi.Models.BasicAuthModel = Backbone.Model.extend({
+    defaults: {
+        username: '',
+        password: '',
+        title: 'basic'
+    },
+
+    initialize: function () {
+        this.on('change', this.validate);
+    },
+
+    validate: function () {
+        var valid = !!this.get('password') && !!this.get('username');
+
+        this.set('valid', valid);
+
+        return valid;
+    }
+});

src/main/javascript/view/BasicAuthView.js

@@ -0,0 +1,56 @@
+'use strict';
+
+SwaggerUi.Views.BasicAuthView = Backbone.View.extend({
+
+    initialize: function (opts) {
+        this.options = opts || {};
+        this.router = this.options.router;
+    },
+
+    events: {
+        'change .auth_input': 'inputChange'
+    },
+
+    selectors: {
+        usernameInput: '.basic_auth__username',
+        passwordInput: '.basic_auth__password'
+    },
+
+    cls: {
+        error: 'error'
+    },
+
+    template: Handlebars.templates.basic_auth,
+
+    render: function(){
+        $(this.el).html(this.template(this.model.toJSON()));
+
+        return this;
+    },
+
+    inputChange: function (e) {
+        var $el = $(e.target);
+        var val = $el.val();
+        var attr = $el.prop('name');
+
+        if (val) {
+            $el.removeClass(this.cls.error);
+        }
+
+        this.model.set(attr, val);
+    },
+
+    isValid: function () {
+        return this.model.validate();
+    },
+
+    highlightInvalid: function () {
+        if (!this.model.get('username')) {
+            this.$(this.selectors.usernameInput).addClass(this.cls.error);
+        }
+
+        if (!this.model.get('password')) {
+            this.$(this.selectors.passwordInput).addClass(this.cls.error);
+        }
+    }
+});

src/main/javascript/view/HeaderView.js

@@ -28,8 +28,7 @@ SwaggerUi.Views.HeaderView = Backbone.View.extend({
     }
 
     this.trigger('update-swagger-ui', {
-      url: $('#input_baseUrl').val(),
+      url: $('#input_baseUrl').val()
-      apiKey: $('#input_apiKey').val()
     });
   },
 
@@ -40,7 +39,6 @@ SwaggerUi.Views.HeaderView = Backbone.View.extend({
 
     $('#input_baseUrl').val(url);
 
-    //$('#input_apiKey').val(apiKey);
     if (trigger) {
       this.trigger('update-swagger-ui', {url:url});
     }

src/main/javascript/view/MainView.js

@@ -83,25 +83,8 @@ 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 the outer container for resources
     $(this.el).html(Handlebars.templates.main(this.model));
+    this.model.securityDefinitions = this.model.securityDefinitions || {};
 
     // Render each resource
 
@@ -153,7 +136,7 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
 
   onLinkClick: function (e) {
     var el = e.target;
-    if (el.tagName === 'A') {
+    if (el.tagName === 'A' && el.href) {
       if (location.hostname !== el.hostname || location.port !== el.port) {
         e.preventDefault();
         window.open(el.href, '_blank');

src/main/javascript/view/Oauth2Model.js

@@ -0,0 +1,32 @@
+'use strict';
+
+SwaggerUi.Models.Oauth2Model = Backbone.Model.extend({
+    defaults: {
+        scopes: {}
+    },
+
+    initialize: function () {
+        this.on('change', this.validate);
+    },
+
+    setScopes: function (name, val) {
+        var auth = _.extend({}, this.attributes);
+        var index = _.findIndex(auth.scopes, function(o) {
+            return o.scope === name;
+        });
+        auth.scopes[index].checked = val;
+
+        this.set(auth);
+        this.validate();
+    },
+
+    validate: function () {
+        var valid =  _.findIndex(this.get('scopes'), function (o) {
+           return o.checked === true;
+        }) > -1;
+
+        this.set('valid', valid);
+
+        return valid;
+    }
+});

src/main/javascript/view/Oauth2View.js

@@ -0,0 +1,22 @@
+'use strict';
+
+SwaggerUi.Views.Oauth2View = Backbone.View.extend({
+    events: {
+        'change .oauth-scope': 'scopeChange'
+    },
+
+    template: Handlebars.templates.oauth2,
+
+    render: function () {
+        this.$el.html(this.template(this.model.toJSON()));
+
+        return this;
+    },
+
+    scopeChange: function (e) {
+        var val = $(e.target).prop('checked');
+        var scope = $(e.target).data('scope');
+
+        this.model.setScopes(scope, val);
+    }
+});

src/main/javascript/view/OperationView.js

@@ -257,6 +257,21 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
       this.addStatusCode(statusCode);
     }
 
+    if (Array.isArray(this.model.security)) {
+      var authsModel = SwaggerUi.utils.parseSecurityDefinitions(this.model.security);
+
+      authsModel.isLogout = !_.isEmpty(window.swaggerUi.api.clientAuthorizations.authz);
+      this.authView = new SwaggerUi.Views.AuthButtonView({
+        data: authsModel,
+        router: this.router,
+        isOperation: true,
+        model: {
+          scopes: authsModel.scopes
+        }
+      });
+      this.$('.authorize-wrapper').append(this.authView.render().el);
+    }
+
     this.showSnippet();
     return this;
   },

src/main/javascript/view/PopupView.js

@@ -0,0 +1,36 @@
+'use strict';
+
+SwaggerUi.Views.PopupView = Backbone.View.extend({
+    events: {
+        'click .api-popup-cancel': 'cancelClick'
+    },
+
+    template: Handlebars.templates.popup,
+    className: 'api-popup-dialog',
+
+    selectors: {
+        content: '.api-popup-content',
+        main   : '#swagger-ui-container'
+    },
+
+    initialize: function(){
+        this.$el.html(this.template(this.model));
+    },
+
+    render: function () {
+        this.$(this.selectors.content).append(this.model.content);
+        $(this.selectors.main).first().append(this.el);
+        this.showPopup();
+
+        return this;
+    },
+
+    showPopup: function () {
+        this.$el.show();
+    },
+
+    cancelClick: function () {
+        this.remove();
+    }
+
+});

src/main/less/auth.less

@@ -17,19 +17,147 @@
     margin-right: 100px;
   }
 
-  .oauth_submit { text-align: center; }
+  .oauth_submit {
+    text-align: center;
+    display: inline-block;
+  }
+
+  .authorize-wrapper {
+    margin: 15px 0 10px;
+  }
+
+  .authorize-wrapper_operation {
+    float: right;
+  }
+
+  .authorize__btn {
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .authorize__btn_operation:hover .authorize-scopes {
+    display: block;
+  }
+  
+  .authorize-scopes {
+    position: absolute;
+    margin-top: 20px;
+    background: #FFF;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    display: none;
+    font-size: 13px;
+    max-width: 300px;
+    line-height: 30px;
+    color: black;
+    padding: 5px;
+
+    .authorize__scope {
+      text-decoration: none;
+    }
+  }
+
+  .authorize__btn_operation {
+    height: 18px;
+    vertical-align: middle;
+    display: inline-block;
+    background: url(../images/explorer_icons.png) no-repeat;
+  }
+
+  .authorize__btn_operation_login {
+    background-position: 0 0;
+    width: 18px;
+    margin-top: -6px;
+    margin-left: 4px;
+  }
+
+  .authorize__btn_operation_logout {
+    background-position: -30px 0;
+    width: 18px;
+    margin-top: -6px;
+    margin-left: 4px;
+  }
+
+  #auth_container {
+    color: #fff;
+    display: inline-block;
+    border: none;
+    padding: 5px;
+    width: 87px;
+    height: 13px;
+
+    .authorize__btn {
+      color: #fff;
+    }
+  }
+
+  .auth_container {
+    padding: 0 0 10px;
+    margin-bottom: 5px;
+    border-bottom: solid 1px #CCC;
+    font-size: 0.9em;
+
+  .auth__title {
+      color: #547f00;
+      font-size: 1.2em;
+    }
+
+    .basic_auth__label {
+      display: inline-block;
+      width: 60px;
+    }
+
+    .auth__description {
+      color: #999999;
+      margin-bottom: 5px;
+    }
+
+    .auth__button {
+      margin-top: 10px;
+      height: 30px;
+    }
+
+    .key_auth__field {
+      margin: 5px 0;
+    }
+
+    .key_auth__label {
+      display: inline-block;
+      width: 60px;
+    }
+  }
 
   .api-popup-dialog {
-    z-index: 10000;
     position: absolute;
+    display: none;
+  }
+
+  .api-popup-dialog-wrapper {
+    z-index: 1000;
     width: 500px;
     background: #FFF;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
-    display: none;
     font-size: 13px;
     color: #777;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .api-popup-dialog-shadow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+    background-color: gray;
+    z-index: 900;
   }
 
   .api-popup-dialog .api-popup-title {
@@ -46,6 +174,10 @@
     padding-left: 5px;
     padding-bottom: 5px;
   }
+  .api-popup-dialog .api-popup-content {
+    max-height: 500px;
+    overflow-y: auto;
+  }
 
   .api-popup-dialog .api-popup-authbtn { height: 30px; }
 

src/main/less/screen.less

@@ -77,7 +77,9 @@
 
   #header {
     background-color: #89bf04;
-    padding: 14px;
+    padding: 9px 14px 19px 14px;
+    height: 23px;
+    min-width: 775px;
   }
 
   #input_baseUrl { width: 400px; }
@@ -89,9 +91,8 @@
   }
 
   #api_selector .input {
-    display: block;
+    display: inline-block;
     clear: none;
-    float: left;
     margin: 0 10px 0 0;
   }
 
@@ -103,7 +104,7 @@
 
   #input_apiKey { width: 200px; }
 
-  #explore {
+  #explore, #auth_container .authorize__btn {
     display: block;
     text-decoration: none;
     font-weight: bold;
@@ -125,9 +126,18 @@
     font-size: 1.5em;
     font-weight: bold;
     text-decoration: none;
-    background: transparent url(../images/logo_small.png) no-repeat left center;
-    padding: 20px 0 20px 40px;
     color: white;
+
+    .logo__img {
+      display: block;
+      float: left;
+      margin-top: 2px;
+    }
+
+    .logo__title {
+      display: inline-block;
+      padding: 5px 0 0 10px;
+    }
   }
 
   #content_message {
@@ -150,6 +160,10 @@
     content: "+";
   }
 
+  .error {
+    outline-color: #cc0000;
+    background-color: #f2dede;
+  }
 }
 
 

src/main/less/specs.less

@@ -4,6 +4,7 @@
 
     line-height: 1;
     font-family: "Droid Sans", sans-serif;
+    min-width: 760px;
     max-width: 960px;
     margin-left: auto;
     margin-right: auto;

src/main/template/apikey_auth.handlebars

@@ -0,0 +1,22 @@
+<div class="key_input_container">
+    <h3 class="auth__title">Api key authorization</h3>
+    <div class="auth__description">{{description}}</div>
+    <div>
+        <div class="key_auth__field">
+            <span class="key_auth__label">name:</span>
+            <span class="key_auth__value">{{name}}</span>
+        </div>
+        <div class="key_auth__field">
+            <span class="key_auth__label">in:</span>
+            <span class="key_auth__value">{{in}}</span>
+        </div>
+        <div class="key_auth__field">
+            <span class="key_auth__label">value:</span>
+            {{#if isLogout}}
+                <span class="key_auth__value">{{value}}</span>
+            {{else}}
+                <input placeholder="api_key" class="auth_input input_apiKey_entry" name="apiKey" type="text"/>
+            {{/if}}
+        </div>
+    </div>
+</div>

src/main/template/apikey_button_view.handlebars

@@ -1,8 +0,0 @@
-<!--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'><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>
-  </div>
-</div>

src/main/template/auth_button.handlebars

@@ -0,0 +1 @@
+<a class='authorize__btn' href="#">Authorize</a>

src/main/template/auth_button_operation.handlebars

@@ -0,0 +1,15 @@
+<div class="authorize__btn authorize__btn_operation
+    {{#if isLogout}}
+        authorize__btn_operation_login
+    {{else}}
+        authorize__btn_operation_logout
+    {{/if}}
+">
+    {{#if scopes}}
+        <ul class="authorize-scopes">
+            {{#each scopes}}
+                <li class="authorize__scope" title="{{description}}">{{scope}}</li>
+            {{/each}}
+        </ul>
+    {{/if}}
+</div>

src/main/template/auth_view.handlebars

@@ -0,0 +1,13 @@
+<div class="auth_container">
+
+    <div class="auth_inner"></div>
+    <div class="auth_submit">
+        {{#unless isLogout}}
+            <button type="button" class="auth__button auth_submit__button" data-sw-translate>Authorize</button>
+        {{/unless}}
+        {{#if isAuthorized}}
+            <button type="button" class="auth__button auth_logout__button" data-sw-translate>Logout</button>
+        {{/if}}
+    </div>
+
+</div>

src/main/template/basic_auth.handlebars

@@ -0,0 +1,20 @@
+<div class='basic_auth_container'>
+    <h3 class="auth__title">Basic authentication{{#if isLogout}} - authorized{{/if}}</h3>
+    <form class="basic_input_container">
+        <div class="auth__description">{{description}}</div>
+        <div class="auth_label">
+            <span class="basic_auth__label" data-sw-translate>username:</span>
+            {{#if isLogout}}
+                <span class="basic_auth__value">{{username}}</span>
+            {{else}}
+                <input required placeholder="username" class="basic_auth__username auth_input" name="username" type="text"/>
+            {{/if}}
+        </div>
+        {{#unless isLogout}}
+            <div class="auth_label">
+                <span class="basic_auth__label" data-sw-translate>password:</span>
+                <input required placeholder="password" class="basic_auth__password auth_input" name="password" type="password"/></label>
+            </div>
+        {{/unless}}
+    </form>
+</div>

src/main/template/basic_auth_button_view.handlebars

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

src/main/template/main.handlebars

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

src/main/template/oauth2.handlebars

@@ -0,0 +1,23 @@
+<div>
+    <h3 class="auth__title">Select OAuth2.0 Scopes</h3>
+    <p>{{description}}</p>
+    <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>
+    <p>Authorization URL: {{authorizationUrl}}</p>
+    <p>flow: {{flow}}</p>
+    <ul class="api-popup-scopes">
+        {{#each scopes}}
+            <li>
+                <input class="oauth-scope" type="checkbox" data-scope="{{scope}}" oauthtype="{{OAuthSchemeKey}}"/>
+                <label>{{scope}}</label><br/>
+                <span class="api-scope-desc">{{description}}
+                    {{#if OAuthSchemeKey}}
+                        ({{OAuthSchemeKey}})
+                    {{/if}}
+                </span>
+            </li>
+        {{/each}}
+    </ul>
+</div>

src/main/template/operation.handlebars

@@ -23,22 +23,25 @@
         <h4><span data-sw-translate>Implementation Notes</span></h4>
         <div class="markdown">{{{description}}}</div>
         {{/if}}
-        {{#oauth}}
+        {{#if security}}
-        <div class="auth">
+            <div class='authorize-wrapper authorize-wrapper_operation'></div>
-        <span class="api-ic ic-error">{{/oauth}}
+        {{/if}}
-        {{#each oauth}}
+        {{!--{{#oauth}}--}}
-          <div class="api_information_panel">
+        {{!--<div class="auth">--}}
-          {{#each this}}
+        {{!--<span class="api-ic ic-error">{{/oauth}}--}}
-            <div title='{{{this.description}}}'>{{this.scope}}</div>
+        {{!--{{#each oauth}}--}}
-          {{/each}}
+          {{!--<div class="api_information_panel">--}}
-          </div>
+          {{!--{{#each this}}--}}
-        {{/each}}
+            {{!--<div title='{{{this.description}}}'>{{this.scope}}</div>--}}
-        {{#oauth}}</span></div>{{/oauth}}
+          {{!--{{/each}}--}}
-        {{#oauth}}
+          {{!--</div>--}}
-        <div class='access'>
+        {{!--{{/each}}--}}
-          <span class="api-ic ic-off" title="click to authenticate"></span>
+        {{!--{{#oauth}}</span></div>{{/oauth}}--}}
-        </div>
+        {{!--{{#oauth}}--}}
-        {{/oauth}}
+        {{!--<div class='access'>--}}
+          {{!--<span class="api-ic ic-off" title="click to authenticate"></span>--}}
+        {{!--</div>--}}
+        {{!--{{/oauth}}--}}
         {{#if type}}
           <div class="response-class">
             <h4><span data-sw-translate>Response Class</span> (<span data-sw-translate>Status</span> {{successCode}})</h4>

src/main/template/popup.handlebars

@@ -0,0 +1,9 @@
+<div class="api-popup-dialog-wrapper">
+    <div class="api-popup-title">{{title}}</div>
+    <div class="api-popup-content"></div>
+    <p class="error-msg"></p>
+    <div class="api-popup-actions">
+        <button class="api-popup-cancel api-button gray" type="button">Cancel</button>
+    </div>
+</div>
+<div class="api-popup-dialog-shadow"></div>