[auth] fixed display of scopes in auth button, added highlight of empty field

src/main/javascript/view/ApiKeyAuthView.js

@@ -6,6 +6,10 @@ SwaggerUi.Views.ApiKeyAuthView = Backbone.View.extend({ // TODO: append this to
         'change .input_apiKey_entry': 'apiKeyChange'
     },
 
+    selectors: {
+        apikeyInput: '.input_apiKey_entry'
+    },
+
     template: Handlebars.templates.apikey_auth,
 
     initialize: function(opts) {
@@ -21,12 +25,21 @@ SwaggerUi.Views.ApiKeyAuthView = Backbone.View.extend({ // TODO: append this to
 
     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/AuthView.js

@@ -51,6 +51,8 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
 
         if (this.authsCollectionView.collection.isValid()) {
             this.authorize();
+        } else {
+            this.authsCollectionView.highlightInvalid();
         }
     },
 

src/main/javascript/view/AuthsCollectionView.js

@@ -10,6 +10,7 @@ SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
         this.collection = new SwaggerUi.Collections.AuthsCollection(opts.data);
 
         this.$innerEl = $('<div>');
+        this.authViews = [];
     },
 
     render: function () {
@@ -23,22 +24,30 @@ SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
     },
 
     renderOneAuth: function (authModel) {
-        var authEl, authView;
+        var authViewEl, authView, authViewName;
         var type = authModel.get('type');
 
         if (type === 'apiKey') {
-            authView = 'ApiKeyAuthView';
+            authViewName = 'ApiKeyAuthView';
         } else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
-            authView = 'BasicAuthView';
+            authViewName = 'BasicAuthView';
         } else if (type === 'oauth2') {
-            authView = 'Oauth2View';
+            authViewName = 'Oauth2View';
         }
 
-        if (authView) {
-            authEl = new SwaggerUi.Views[authView]({model: authModel, router: this.router}).render().el;
+        if (authViewName) {
+            authView = new SwaggerUi.Views[authViewName]({model: authModel, router: this.router});
+            authViewEl = authView.render().el;
+            this.authViews.push(authView);
         }
 
-        this.$innerEl.append(authEl);
+        this.$innerEl.append(authViewEl);
+    },
+
+    highlightInvalid: function () {
+        this.authViews.forEach(function (view) {
+            view.highlightInvalid();
+        }, this);
     }
 
 });

src/main/javascript/view/BasicAuthView.js

@@ -11,6 +11,15 @@ SwaggerUi.Views.BasicAuthView = Backbone.View.extend({
         'change .auth_input': 'inputChange'
     },
 
+    selectors: {
+        usernameInput: '.basic_auth__username',
+        passwordInput: '.basic_auth__password'
+    },
+
+    cls: {
+        error: 'error'
+    },
+
     template: Handlebars.templates.basic_auth,
 
     render: function(){
@@ -24,11 +33,24 @@ SwaggerUi.Views.BasicAuthView = Backbone.View.extend({
         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/OperationView.js

@@ -261,7 +261,14 @@ 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, isOperation: true});
+      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);
     }