changed logout to post

Issue #612

5 files changed, 62 insertions, 14 deletions

diff --git a/web-ui/app/js/helpers/browser.js b/web-ui/app/js/helpers/browser.js
index 23aa79c8..dacf2263 100644
--- a/web-ui/app/js/helpers/browser.js
+++ b/web-ui/app/js/helpers/browser.js
@@ -26,7 +26,7 @@ define([], function () {
   function getCookie(name) {
     var value = '; ' + document.cookie;
     var parts = value.split('; ' + name + '=');
-    if (parts.length === 2) return parts.pop().split(';').shift();
+    if (parts.length === 2) { return parts.pop().split(';').shift(); }
   }
 
   return {
diff --git a/web-ui/app/js/page/logout.js b/web-ui/app/js/page/logout.js
index d881f6c2..81b57db2 100644
--- a/web-ui/app/js/page/logout.js
+++ b/web-ui/app/js/page/logout.js
@@ -14,19 +14,28 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
-define(['flight/lib/component', 'features', 'views/templates'], function (defineComponent, features, templates) {
+define(['flight/lib/component', 'features', 'views/templates', 'helpers/browser'],
+ function (defineComponent, features, templates, browser) {
   'use strict';
 
   return defineComponent(function () {
 
+    this.defaultAttrs({form: '#logout-form'});
+
     this.render = function () {
-      var logoutHTML = templates.page.logout({ logout_url: features.getLogoutUrl() });
+      var logoutHTML = templates.page.logout({ logout_url: features.getLogoutUrl(),
+       csrf_token: browser.getCookie('XSRF-TOKEN')});
       this.$node.html(logoutHTML);
     };
 
+    this.logout = function(){
+      this.select('form').submit();
+    };
+
     this.after('initialize', function () {
       if (features.isLogoutEnabled()) {
 	      this.render();
+	      this.on(this.$node, 'click', this.logout);
       }
     });
 
diff --git a/web-ui/app/scss/_styles.scss b/web-ui/app/scss/_styles.scss
index a7d6dedf..63f15f6a 100644
--- a/web-ui/app/scss/_styles.scss
+++ b/web-ui/app/scss/_styles.scss
@@ -8,6 +8,7 @@
 
 #logout {
   color: $white;
+  cursor: pointer;
 }
 
 .search-highlight {
diff --git a/web-ui/app/templates/page/logout.hbs b/web-ui/app/templates/page/logout.hbs
index dd931274..3768d24f 100644
--- a/web-ui/app/templates/page/logout.hbs
+++ b/web-ui/app/templates/page/logout.hbs
@@ -1,8 +1,9 @@
 <ul id="logout">
-    <a title="logout" href={{logout_url}}>
-    	<li>
+    <form id="logout-form" method="POST" action="{{ logout_url }}">
+        <input type="hidden" name="csrftoken" value="{{ csrf_token }}" />
+        <li>
           <div class="fa fa-sign-out"></div>
           <i class="shortcut-label"></i> Logout
       	</li>
-  	</a>
+    </form>
 </ul>
diff --git a/web-ui/test/spec/page/logout.spec.js b/web-ui/test/spec/page/logout.spec.js
index 7e384cad..a8b882b0 100644
--- a/web-ui/test/spec/page/logout.spec.js
+++ b/web-ui/test/spec/page/logout.spec.js
@@ -8,26 +8,48 @@ describeComponent('page/logout', function () {
       features = require('features');
     });
 
-    it('should provide logout link if logout is enabled', function () {
+    it('should provide logout form if logout is enabled', function () {
       spyOn(features, 'isLogoutEnabled').and.returnValue(true);
 
       this.setupComponent('<nav id="logout"></nav>', {});
 
-      var logout_link = this.component.$node.find('a')[0];
-      expect(logout_link).toExist();
-      expect(logout_link.href).toMatch('test/logout/url');
+      var logout_form = this.component.$node.find('form')[0];
+      expect(logout_form).toExist();
+      expect(logout_form.action).toMatch('test/logout/url');
+      expect(logout_form.method).toMatch('POST');
     });
 
-    it('should not provide logout link if disabled', function() {
+    it('should not provide logout form if logout is disabled', function () {
       spyOn(features, 'isLogoutEnabled').and.returnValue(false);
 
       this.setupComponent('<nav id="logout"></nav>', {});
 
-      var logout_link = this.component.$node.find('a')[0];
-      expect(logout_link).not.toExist();
+      var logout_form = this.component.$node.find('form')[0];
+      expect(logout_form).not.toExist();
     });
 
-    it('should render logout in collapsed nav bar if logout is enabled', function() {
+    it('should provide csrf token if logout is enabled', function () {
+      spyOn(features, 'isLogoutEnabled').and.returnValue(true);
+      document.cookie = 'XSRF-TOKEN=ff895ffc45a4ce140bfc5dda6c61d232; i18next=en-us';
+
+      this.setupComponent('<nav id="logout"></nav>', {});
+
+      var logout_input = this.component.$node.find('input')[0];
+      expect(logout_input).toExist();
+      expect(logout_input.value).toEqual('ff895ffc45a4ce140bfc5dda6c61d232');
+      expect(logout_input.type).toEqual('hidden');
+    });
+
+    it('should not provide csrf token if logout is disabled', function () {
+      spyOn(features, 'isLogoutEnabled').and.returnValue(false);
+
+      this.setupComponent('<nav id="logout"></nav>', {});
+
+      var logout_input = this.component.$node.find('input')[0];
+      expect(logout_input).not.toExist();
+    });
+
+    xit('should render logout in collapsed nav bar if logout is enabled', function() {
       spyOn(features, 'isLogoutEnabled').and.returnValue(true);
 
       this.setupComponent('<ul id="logout-shortcuts" class="shortcuts"></ul>', {});
@@ -36,6 +58,21 @@ describeComponent('page/logout', function () {
       expect(logout_icon).toExist();
       expect(logout_icon.innerHTML).toContain('<div class="fa fa-sign-out"></div>');
     });
+
+    it('should submit logout form if logout is enabled', function () {
+      spyOn(features, 'isLogoutEnabled').and.returnValue(true);
+
+      this.setupComponent('<nav id="logout"></nav>', {});
+
+      var logout_form = this.component.$node.find('form')[0];
+      spyOn(logout_form, 'submit');
+
+      this.component.$node.click();
+
+      expect(logout_form.submit).toHaveBeenCalled();
+    });
+
+
   });
 });