[auth] UI changes

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,20 +1181,25 @@
 }
 .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 #auth_container {
   color: #fff;
-  width: 190px;
+  display: inline-block;
-  float: left;
   border: none;
   padding: 5px;
+  width: 87px;
+  height: 13px;
 }
 .swagger-section #auth_container .authorize__btn {
   color: #fff;
@@ -1207,20 +1213,17 @@
   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_submit__button,
+.swagger-section .auth_container .auth__button {
-.swagger-section .auth_container .auth_logout__button {
+  margin-top: 10px;
-  color: #547f00;
+  height: 30px;
-  border: none;
-  text-decoration: underline;
-  background: none;
-  padding-left: 0;
-  font-size: 1em;
-  cursor: pointer;
-  outline: none;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;

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,20 +1181,25 @@
 }
 .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 #auth_container {
   color: #fff;
-  width: 190px;
+  display: inline-block;
-  float: left;
   border: none;
   padding: 5px;
+  width: 87px;
+  height: 13px;
 }
 .swagger-section #auth_container .authorize__btn {
   color: #fff;
@@ -1207,20 +1213,17 @@
   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_submit__button,
+.swagger-section .auth_container .auth__button {
-.swagger-section .auth_container .auth_logout__button {
+  margin-top: 10px;
-  color: #547f00;
+  height: 30px;
-  border: none;
-  text-decoration: underline;
-  background: none;
-  padding-left: 0;
-  font-size: 1em;
-  cursor: pointer;
-  outline: none;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1345,7 +1348,8 @@
 }
 .swagger-section #header {
   background-color: #89bf04;
-  padding: 14px;
+  padding: 9px 14px 19px 14px;
+  height: 23px;
 }
 .swagger-section #input_baseUrl {
   width: 400px;
@@ -1356,9 +1360,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 {
@@ -1369,7 +1372,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;
@@ -1384,17 +1388,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;

dist/index.html

@@ -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 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/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,20 +1181,25 @@
 }
 .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 #auth_container {
   color: #fff;
-  width: 190px;
+  display: inline-block;
-  float: left;
   border: none;
   padding: 5px;
+  width: 87px;
+  height: 13px;
 }
 .swagger-section #auth_container .authorize__btn {
   color: #fff;
@@ -1207,20 +1213,17 @@
   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_submit__button,
+.swagger-section .auth_container .auth__button {
-.swagger-section .auth_container .auth_logout__button {
+  margin-top: 10px;
-  color: #547f00;
+  height: 30px;
-  border: none;
-  text-decoration: underline;
-  background: none;
-  padding-left: 0;
-  font-size: 1em;
-  cursor: pointer;
-  outline: none;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;

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,20 +1181,25 @@
 }
 .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 #auth_container {
   color: #fff;
-  width: 190px;
+  display: inline-block;
-  float: left;
   border: none;
   padding: 5px;
+  width: 87px;
+  height: 13px;
 }
 .swagger-section #auth_container .authorize__btn {
   color: #fff;
@@ -1207,20 +1213,17 @@
   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_submit__button,
+.swagger-section .auth_container .auth__button {
-.swagger-section .auth_container .auth_logout__button {
+  margin-top: 10px;
-  color: #547f00;
+  height: 30px;
-  border: none;
-  text-decoration: underline;
-  background: none;
-  padding-left: 0;
-  font-size: 1em;
-  cursor: pointer;
-  outline: none;
 }
 .swagger-section .auth_container .basic_auth_container {
   font-size: 0.9em;
@@ -1345,7 +1348,8 @@
 }
 .swagger-section #header {
   background-color: #89bf04;
-  padding: 14px;
+  padding: 9px 14px 19px 14px;
+  height: 23px;
 }
 .swagger-section #input_baseUrl {
   width: 400px;
@@ -1356,9 +1360,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 {
@@ -1369,7 +1372,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;
@@ -1384,17 +1388,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;

src/main/html/index.html

@@ -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 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

@@ -137,7 +137,6 @@ 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,
@@ -145,14 +144,9 @@ window.SwaggerUi = Backbone.Router.extend({
       swaggerOptions: this.options,
       router: this
     }).render();
-    if (!_.isEmpty(this.api.securityDefinitions)){
+    if (!_.isEmpty(this.api.security)){
-      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),
+        data: SwaggerUi.utils.parseSecurityDefinitions(this.api.security),
         router: this
       });
       $('#auth_container').append(this.authView.render().el);

src/main/javascript/view/AuthButtonView.js

@@ -7,18 +7,22 @@ SwaggerUi.Views.AuthButtonView = Backbone.View.extend({
 
     tpls: {
         popup: Handlebars.templates.popup,
-        authBtn: Handlebars.templates.auth_button
+        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.router = this.options.router;
         this.auths = this.options.data.oauth2.concat(this.options.data.auths);
     },
 
     render: function () {
-        this.$el.html(this.tpls.authBtn(this.model));
+        var tplName = this.isOperation ? 'authBtnOperation' : 'authBtn';
+
+        this.$el.html(this.tpls[tplName](this.model));
 
         return this;
     },

src/main/javascript/view/AuthView.js

@@ -13,7 +13,7 @@
 
 SwaggerUi.Views.AuthView = Backbone.View.extend({
     events: {
-        'click .auth_submit_button': 'authorizeClick',
+        'click .auth_submit__button': 'authorizeClick',
         'click .auth_logout__button': 'logoutClick'
     },
 

src/main/javascript/view/OperationView.js

@@ -261,7 +261,7 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
       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});
+      this.authView = new SwaggerUi.Views.AuthButtonView({data: authsModel, router: this.router, isOperation: true});
       this.$('.authorize-wrapper').append(this.authView.render().el);
     }
 

src/main/less/auth.less

@@ -17,12 +17,19 @@
     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;
@@ -32,10 +39,12 @@
 
   #auth_container {
     color: #fff;
-    width: 190px;
+    display: inline-block;
-    float: left;
     border: none;
     padding: 5px;
+    width: 87px;
+    height: 13px;
+
     .authorize__btn {
       color: #fff;
     }
@@ -51,20 +60,19 @@
       font-size: 1.2em;
     }
 
+    .basic_auth__label {
+      display: inline-block;
+      width: 60px;
+    }
+
     .auth__description {
       color: #999999;
       margin-bottom: 5px;
     }
 
-    .auth_submit__button, .auth_logout__button {
+    .auth__button {
-      color: #547f00;
+      margin-top: 10px;
-      border: none;
+      height: 30px;
-      text-decoration: underline;
-      background: none;
-      padding-left: 0;
-      font-size: 1em;
-      cursor: pointer;
-      outline: none;
     }
 
     .basic_auth_container {

src/main/less/screen.less

@@ -77,7 +77,8 @@
 
   #header {
     background-color: #89bf04;
-    padding: 14px;
+    padding: 9px 14px 19px 14px;
+    height: 23px;
   }
 
   #input_baseUrl { width: 400px; }
@@ -89,9 +90,8 @@
   }
 
   #api_selector .input {
-    display: block;
+    display: inline-block;
     clear: none;
-    float: left;
     margin: 0 10px 0 0;
   }
 
@@ -103,7 +103,7 @@
 
   #input_apiKey { width: 200px; }
 
-  #explore {
+  #explore, #auth_container .authorize__btn {
     display: block;
     text-decoration: none;
     font-weight: bold;
@@ -125,9 +125,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 {

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/auth_button.handlebars

@@ -1 +1 @@
-<a class='authorize__btn'>Click to Authorize{{#if isLogout}}/Logout {{/if}}</a>
+<a class='authorize__btn' href="#">Authorize</a>

src/main/template/auth_button_operation.handlebars

@@ -0,0 +1,9 @@
+<div class="authorize__btn authorize__btn_operation">
+    <span class="api-ic
+        {{#if isLogout}}
+        ic-info
+        {{else}}
+        ic-error
+        {{/if}}
+        "></span>
+</div>

src/main/template/auth_view.handlebars

@@ -1,8 +1,11 @@
 <div class="auth_container">
 
     <div class="auth_inner"></div>
-    <div class="auth_submit"><a class="auth_submit_button" href="#" data-sw-translate>apply</a></div>
+    <div class="auth_submit">
+        <button type="button" class="auth__button auth_submit__button" data-sw-translate>Authorize</button>
         {{#if isLogout}}
-        <input type="button" class="auth_logout__button" value="logout">
+            <button type="button" class="auth__button auth_logout__button" data-sw-translate>Logout</button>
         {{/if}}
+    </div>
+
 </div>

src/main/template/basic_auth.handlebars

@@ -3,10 +3,14 @@
     {{#unless isLogout}}
         <form class="key_input_container">
             <div class="auth__description">{{description}}</div>
-            <div class="auth_label"><label data-sw-translate>username</label></div>
+            <div class="auth_label">
+                <span class="basic_auth__label" data-sw-translate>username:</span>
                 <input required placeholder="username" class="basic_auth__username auth_input" name="username" type="text"/>
-            <div class="auth_label"><label data-sw-translate>password</label></div>
+            </div>
-            <input required placeholder="password" class="basic_auth__password auth_input" name="password" type="password"/>
+            <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>
         </form>
     {{/unless}}
 </div>

src/main/template/operation.handlebars

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