Put authorizations into popup

src/main/html/css/print.css

@@ -1181,6 +1181,10 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .authorize__btn:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
 .swagger-section .auth_container .basic_auth__title {
   color: #547f00;
   font-size: 1.2em;

src/main/html/css/screen.css

@@ -1181,6 +1181,10 @@
 .swagger-section .oauth_submit {
   text-align: center;
 }
+.swagger-section .authorize__btn:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
 .swagger-section .auth_container .basic_auth__title {
   color: #547f00;
   font-size: 1.2em;

src/main/html/index.html

@@ -36,7 +36,7 @@
       if (url && url.length > 1) {
         url = decodeURIComponent(url[1]);
       } else {
-        url = "http://petstore.swagger.io/v2/swagger.json";
+        url = "http://localhost:3001/swagger.json";
       }
 
       hljs.configure({

src/main/javascript/view/ApiKeyButton.js

@@ -14,7 +14,7 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl
   },
 
   render: function(){
-    $(this.el).html(this.template(this.model));
+    this.$el.html(this.template(this.model));
 
     return this;
   },

src/main/javascript/view/AuthView.js

@@ -2,125 +2,51 @@
 
 SwaggerUi.Views.AuthView = Backbone.View.extend({
     events: {
-        'click .auth_submit_button': 'authorizeClick',
+        'click .authorize__btn': 'authorizeBtnClick'
-        'click .auth_logout__button': 'logoutClick'
     },
 
     tpls: {
-        main: Handlebars.templates.auth_view
+        popup: Handlebars.templates.popup,
+        authBtn: Handlebars.templates.auth_button
     },
 
-    selectors: {
+    initialize: function(){},
-        innerEl: '.auth_inner'
-    },
-
-    initialize: function(opts) {
-        this.options = opts || {};
-        opts.data = opts.data || {};
-        this.router = this.options.router;
-
-        this.collection = new Backbone.Collection();
-        this.collection.add(this.parseData(opts.data));
-
-        this.$el.html(this.tpls.main({isLogout: this.isAuthorizedCollection()}));
-        this.$innerEl = this.$(this.selectors.innerEl);
-    },
 
     render: function () {
-        this.renderAuths();
+        this.$el.html(this.tpls.authBtn());
-
-        if (!this.$innerEl.html()) {
-            this.$el.html('');
-        }
 
         return this;
     },
 
-    authorizeClick: function (e) {
+    authorizeBtnClick: function (e) {
+        var authsModel;
         e.preventDefault();
 
-        if (this.isValidCollection()) {
+        authsModel = {title: 'Please authorize', content: this.renderAuths()};
-            this.authorize();
-        }
-    },
 
-    parseData: function (data) {
+        this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
-        var authz = window.swaggerUi.api.clientAuthorizations.authz;
+        this.popup.render();
-
-        return _.map(data, function (auth, name) {
-            var isBasic = authz.basic && auth.type === 'basic';
-
-            if (authz[name] || isBasic) {
-                _.extend(auth, {
-                    isLogout: true,
-                    value: isBasic ? '' : authz[name].value,
-                    valid: true
-                });
-            }
-
-            return auth;
-        });
     },
 
     renderAuths: function () {
-        this.collection.each(function (auth) {
+        var name, authEl;
-            this.renderOneAuth(auth);
+        var el = $('<div>');
-        }, this);
-    },
 
-    renderOneAuth: function (authModel) {
+        //todo refactor, copy-pasted from MainView.js
-        var authEl;
+        for (name in this.model) {
-        var type = authModel.get('type');
+            auth = this.model[name];
 
-        if (type === 'apiKey') {
+            if (auth.type === 'apiKey') {
-            authEl = new SwaggerUi.Views.ApiKeyAuthView({model: authModel, router: this.router}).render().el;
+                authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router:  this.router}).render().el;
-            this.$innerEl.append(authEl);
+                el.append(authEl);
-        } else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
+            }
-            authEl = new SwaggerUi.Views.BasicAuthView({model: authModel, router: this.router}).render().el;
+
-            this.$innerEl.append(authEl);
+            if (auth.type === 'basic' && el.find('.basic_auth_container').length === 0) {
+                authEl = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
+                el.append(authEl);
+            }
         }
 
-    },
+        return el.html();
-
-    isValidCollection: function () {
-        return this.collection.length === this.collection.where({ valid: true }).length;
-    },
-
-    authorize: function () {
-        this.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('name'), keyAuth);
-            } else if (type === 'basic') {
-                basicAuth = new SwaggerClient.PasswordAuthorization(auth.get('username'), auth.get('password'));
-                this.router.api.clientAuthorizations.add(auth.get('type'), basicAuth);
-            }
-        }, this);
-
-        this.router.load();
-    },
-
-    isAuthorizedCollection: function () {
-        return this.collection.length === this.collection.where({ isLogout: true }).length;
-    },
-
-    logoutClick: function (e) {
-        e.preventDefault();
-
-        this.collection.forEach(function (auth) {
-            var name = auth.get('name');
-
-            window.swaggerUi.api.clientAuthorizations.remove(name);
-        });
-
-        this.router.load();
     }
 });

src/main/javascript/view/MainView.js

@@ -89,18 +89,9 @@ SwaggerUi.Views.MainView = Backbone.View.extend({
     $(this.el).html(Handlebars.templates.main(this.model));
     this.model.securityDefinitions = this.model.securityDefinitions || {};
 
-    for (name in this.model.securityDefinitions) {
+    if (this.model.securityDefinitions) {
-      auth = this.model.securityDefinitions[name];
+      this.authView = new SwaggerUi.Views.AuthView({model: this.model.securityDefinitions});
-
+      this.$('.authorize-wrapper').append(this.authView.render().el);
-      if (auth.type === 'apiKey') {
-        authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router:  this.router}).render().el;
-        $('.auth_main_container').append(authEl);
-      }
-
-      if (auth.type === 'basic' && $('.auth_main_container .basic_auth_container').length === 0) {
-        authEl = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
-        $('.auth_main_container').append(authEl);
-      }
     }
 
     // Render each resource

src/main/javascript/view/OperationView.js

@@ -91,9 +91,54 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
       this.model.isReadOnly = true;
     }
     this.model.description = this.model.description || this.model.notes;
-
+    this.model.oauth = null;
-    this.handleAuth();
+    modelAuths = this.model.authorizations || this.model.security;
-
+    if (modelAuths) {
+      if (Array.isArray(modelAuths)) {
+        for (l = 0, len = modelAuths.length; l < len; l++) {
+          auths = modelAuths[l];
+          for (key in auths) {
+            for (a in this.auths) {
+              auth = this.auths[a];
+              if (key === auth.name) {
+                if (auth.type === 'oauth2') {
+                  this.model.oauth = {};
+                  this.model.oauth.scopes = [];
+                  ref1 = auth.value.scopes;
+                  for (k in ref1) {
+                    v = ref1[k];
+                    scopeIndex = auths[key].indexOf(k);
+                    if (scopeIndex >= 0) {
+                      o = {
+                        scope: k,
+                        description: v
+                      };
+                      this.model.oauth.scopes.push(o);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      } else {
+        for (k in modelAuths) {
+          v = modelAuths[k];
+          if (k === 'oauth2') {
+            if (this.model.oauth === null) {
+              this.model.oauth = {};
+            }
+            if (this.model.oauth.scopes === void 0) {
+              this.model.oauth.scopes = [];
+            }
+            for (m = 0, len1 = v.length; m < len1; m++) {
+              o = v[m];
+              this.model.oauth.scopes.push(o);
+            }
+          }
+        }
+      }
+    }
     if (typeof this.model.responses !== 'undefined') {
       this.model.responseMessages = [];
       ref2 = this.model.responses;
@@ -804,95 +849,6 @@ SwaggerUi.Views.OperationView = Backbone.View.extend({
       }
     }
     return null;
-  },
-
-  handleAuth: function () {
-    var modelAuths, auths, i, l, len, len1, ref1, scopeIndex;
-    var definitionsMap = {};
-
-    this.auths = this.auths || [];
-
-    for (l = 0, len = this.auths.length; l < len; l++) {
-      definitionsMap[this.auths[l].name] = this.auths[l].value;
-    }
-
-    this.model.oauth = null;
-
-    modelAuths = this.model.authorizations || this.model.security;
-
-    if (!modelAuths) { return null; }
-
-    if (Array.isArray(modelAuths)) {
-      modelAuths.forEach(function (security) {
-        for (i in security) {
-          security[i] = security[i] || {};
-          switch (security[i].type) {
-            case 'apiKey': break;
-            case 'basic': break;
-            default:
-                  //handle from definitions
-          }
-        }
-      });
-    }
-
-
-    if (Array.isArray(modelAuths)) {
-      for (l = 0, len = modelAuths.length; l < len; l++) {
-
-        //auths - single auth from security
-        auths = modelAuths[l];
-        for (key in auths) {
-
-          //this.auths - auth from definitions
-          for (a in this.auths) {
-            //auth - one single auth from definition
-            auth = this.auths[a];
-
-            // if security name is in definitions
-            if (key === auth.name) {
-
-              if (auth.type === 'oauth2') {
-                this.model.oauth = {};
-                this.model.oauth.scopes = [];
-                ref1 = auth.value.scopes;
-                for (k in ref1) {
-                  v = ref1[k];
-                  scopeIndex = auths[key].indexOf(k);
-                  if (scopeIndex >= 0) {
-                    o = {
-                      scope: k,
-                      description: v
-                    };
-                    this.model.oauth.scopes.push(o);
-                  }
-                }
-              }
-              //if (auth.type === 'apiKey') {
-              //  console.log('apiKey')
-              //}
-            }
-          }
-        }
-      }
-    } else {
-      for (k in modelAuths) {
-        v = modelAuths[k];
-        if (k === 'oauth2') {
-          if (this.model.oauth === null) {
-            this.model.oauth = {};
-          }
-          if (this.model.oauth.scopes === void 0) {
-            this.model.oauth.scopes = [];
-          }
-          for (m = 0, len1 = v.length; m < len1; m++) {
-            o = v[m];
-            this.model.oauth.scopes.push(o);
-          }
-        }
-      }
-    }
-
   }
 
 });

src/main/javascript/view/PopupView.js

@@ -8,11 +8,6 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
     template: Handlebars.templates.popup,
     className: 'api-popup-dialog',
 
-    selectors: {
-        content: '.api-popup-content',
-        main   : '#swagger-ui-container'
-    },
-
     initialize: function(){},
 
     render: function () {
@@ -22,8 +17,7 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
         dh = $win.height();
         st = $win.scrollTop();
         this.$el.html(this.template(this.model));
-        this.$(this.selectors.content).append(this.model.content);
+        $(document.body).append(this.el);
-        $(this.selectors.main).first().append(this.el);
         dlgWd = this.$el.outerWidth();
         dlgHt = this.$el.outerHeight();
         top = (dh -dlgHt)/2 + st;

src/main/less/auth.less

@@ -19,6 +19,13 @@
 
   .oauth_submit { text-align: center; }
 
+  .authorize__btn {
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
   .auth_container {
 
     .basic_auth__title {

src/main/template/auth_button.handlebars

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

src/main/template/main.handlebars

@@ -16,6 +16,8 @@
 <div class='container' id='resources_container'>
   <div class="auth_main_container"></div>
 
+  <div class='authorize-wrapper'></div>
+
   <ul id='resources'></ul>
 
   <div class="footer">

src/main/template/popup.handlebars

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