[auth] Added logout for auth with apiKey and basic auth

dist/css/print.css

@@ -1203,7 +1203,8 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button {
+.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1211,6 +1212,7 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
+  outline: none;
 }
 .swagger-section .auth_container .key_input_container {
   margin-bottom: 15px;

dist/css/screen.css

@@ -1203,7 +1203,8 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button {
+.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1211,6 +1212,7 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
+  outline: none;
 }
 .swagger-section .auth_container .key_input_container {
   margin-bottom: 15px;

dist/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/html/css/print.css

@@ -1203,7 +1203,8 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button {
+.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1211,6 +1212,7 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
+  outline: none;
 }
 .swagger-section .auth_container .key_input_container {
   margin-bottom: 15px;

src/main/html/css/screen.css

@@ -1203,7 +1203,8 @@
   color: #999999;
   margin-bottom: 5px;
 }
-.swagger-section .auth_container .auth_submit__button {
+.swagger-section .auth_container .auth_submit__button,
+.swagger-section .auth_container .auth_logout__button {
   color: #547f00;
   border: none;
   text-decoration: underline;
@@ -1211,6 +1212,7 @@
   padding-left: 0;
   font-size: 1em;
   cursor: pointer;
+  outline: none;
 }
 .swagger-section .auth_container .key_input_container {
   margin-bottom: 15px;

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

@@ -3,7 +3,8 @@
 SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to global SwaggerUi
 
   events:{
-    'click .auth_submit_button' : 'applyApiKey'
+    'click .auth_submit_button' : 'applyApiKey',
+    'click .auth_logout__button' : 'clickLogout'
   },
 
   template: Handlebars.templates.apikey_button_view,
@@ -28,6 +29,11 @@ SwaggerUi.Views.ApiKeyButton = Backbone.View.extend({ // TODO: append this to gl
     );
     this.router.api.clientAuthorizations.add(this.model.name, keyAuth);
     this.router.load();
+  },
+
+  clickLogout: function () {
+    window.swaggerUi.api.clientAuthorizations.remove(this.model.name);
+    this.remove();
   }
 
 });

src/main/javascript/view/AuthView.js

@@ -28,23 +28,23 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
 
         authsModel = {
             title: 'Available authorizations',
-            content: this.renderAuths()
+            content: this.renderAuths(this.model.auths)
         };
 
         this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
         this.popup.render();
     },
 
-    renderAuths: function () {
+    renderAuths: function (auths) {
         var name, authEl, auth;
         var el = $('<div>');
 
         //todo refactor, copy-pasted from MainView.js
-        for (name in this.model.auths) {
+        for (name in auths) {
-            auth = this.model.auths[name];
+            auth = auths[name];
 
             if (auth.type === 'apiKey') {
-                authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router:  this.router}).render().el;
+                authEl = new SwaggerUi.Views.ApiKeyButton({model: auth, router: this.router}).render().el;
                 el.append(authEl);
             } else if (auth.type === 'basic' && el.find('.basic_auth_container').length === 0) {
                 authEl = new SwaggerUi.Views.BasicAuthButton({model: auth, router: this.router}).render().el;
@@ -57,16 +57,40 @@ SwaggerUi.Views.AuthView = Backbone.View.extend({
 
     logoutClick: function (e) {
         var authsModel;
+
         e.preventDefault();
 
         authsModel = {
-            title: 'Logout authorizations'
+            title: 'Logout authorizations',
+            content: this.renderAuths(this.getAuthMap())
         };
 
         this.popup = new SwaggerUi.Views.PopupView({model: authsModel});
         this.popup.render();
+    },
 
-        console.log(window.swaggerUi.api.clientAuthorizations.authz);
+    getAuthMap: function () {
+        var authsMap = {};
+
+        _.forEach(window.swaggerUi.api.clientAuthorizations.authz, function (value, key) {
+            if (key === 'basic') {
+                authsMap.basic = {
+                    type: key,
+                    isLogout: true,
+                    name: key
+                };
+            } else {
+                authsMap[key] = {
+                    type: 'apiKey',
+                    'in': value.type,
+                    value: value.value,
+                    isLogout: true,
+                    name: key
+                };
+            }
+        });
+
+        return authsMap;
     }
 
 });

src/main/javascript/view/BasicAuthButton.js

@@ -17,7 +17,8 @@ SwaggerUi.Views.BasicAuthButton = Backbone.View.extend({
   },
 
   events: {
-    'submit .key_input_container' : 'applyPassword'
+    'submit .key_input_container' : 'applyPassword',
+    'click .auth_logout__button'  : 'clickLogout'
   },
 
   applyPassword: function(event) {
@@ -27,6 +28,11 @@ SwaggerUi.Views.BasicAuthButton = Backbone.View.extend({
     var basicAuth = new SwaggerClient.PasswordAuthorization('basic', username, password);
     this.router.api.clientAuthorizations.add(this.model.type, basicAuth);
     this.router.load();
+  },
+
+  clickLogout: function () {
+    window.swaggerUi.api.clientAuthorizations.remove(this.model.name);
+    this.remove();
   }
 
 });

src/main/javascript/view/HeaderView.js

@@ -12,7 +12,7 @@ SwaggerUi.Views.HeaderView = Backbone.View.extend({
 
   showPetStore: function(){
     this.trigger('update-swagger-ui', {
-      url:'http://petstore.swagger.io/v2/swagger.json'
+      url:'http://localhost:3001/swagger.json'
     });
   },
 

src/main/less/auth.less

@@ -50,7 +50,7 @@
       margin-bottom: 5px;
     }
 
-    .auth_submit__button {
+    .auth_submit__button, .auth_logout__button {
       color: #547f00;
       border: none;
       text-decoration: underline;
@@ -58,6 +58,7 @@
       padding-left: 0;
       font-size: 1em;
       cursor: pointer;
+      outline: none;
     }
 
     .key_input_container {

src/main/template/apikey_button_view.handlebars

@@ -4,8 +4,16 @@
         <div>
             <span class='auth_label'><label for='input_apiKey_entry'><span>Api key</span> in {{in}}</label></span>
             <span class='auth_in'><label for='input_apiKey_entry'>{{name}} =</label></span>
-            <input placeholder='api_key' class='auth_input input_apiKey_entry' name='apiKey' type='text'/>
+            {{#if isLogout}}
+                <span class="auth_label">{{value}}</span>
+            {{else}}
+                <input placeholder='api_key' class='auth_input input_apiKey_entry' name='apiKey' type='text'/>
+            {{/if}}
         </div>
-        <div class='auth_submit'><a class='auth_submit_button' href='#' data-sw-translate>apply</a></div>
+        {{#if isLogout}}
+            <input type="button" class="auth_logout__button" value="logout"></div>
+        {{else}}
+            <div class='auth_submit'><a class='auth_submit_button' href='#' data-sw-translate>apply</a></div>
+        {{/if}}
     </div>
 </div>

src/main/template/basic_auth_button_view.handlebars

@@ -1,5 +1,9 @@
 <div class='auth_container basic_auth_container'>
+
   <h3 class="basic_auth__title">Basic authentication</h3>
+  {{#if isLogout}}
+    <input type="button" class="auth_logout__button" value="logout"></div>
+  {{else}}
   <form class="key_input_container">
     <div class="auth__description">{{description}}</div>
     <div class="auth_label"><label data-sw-translate>username</label></div>
@@ -8,5 +12,6 @@
     <input required placeholder="password" class="basic_auth__password auth_input" name="password" type="password"/>
     <div class='auth_submit'><input type="submit" class="auth_submit__button" value="apply"></div>
   </form>
+  {{/if}}
 </div>