|#973| Thais + Sriram | Adds logout component to be shown on the header

7 files changed, 179 insertions, 8 deletions

diff --git a/web-ui/src/common/flat_button/flat_button.js b/web-ui/src/common/flat_button/flat_button.js
new file mode 100644
index 00000000..8b65ca30
--- /dev/null
+++ b/web-ui/src/common/flat_button/flat_button.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import FlatButton from 'material-ui/FlatButton';
+import FontIcon from 'material-ui/FontIcon';
+import { grey500 } from 'material-ui/styles/colors';
+
+const labelStyle = {
+  textTransform: 'none',
+  verticalAlign: 'middle'
+};
+
+const iconStyle = {
+  marginRight: 0
+};
+
+const flatButtonStyle = {
+  minWidth: 0,
+  verticalAlign: 'top'
+};
+
+const SubmitFlatButton = ({ buttonText, fontIconClass }) => (
+  <FlatButton
+    type='submit'
+    target='_blank'
+    containerElement='label'
+    style={flatButtonStyle}
+    labelPosition='before'
+    label={buttonText}
+    labelStyle={labelStyle}
+    icon={<FontIcon className={fontIconClass} color={grey500} style={iconStyle} />}
+  />
+);
+
+SubmitFlatButton.propTypes = {
+  buttonText: React.PropTypes.string.isRequired,
+  fontIconClass: React.PropTypes.string.isRequired
+};
+
+export default SubmitFlatButton;
diff --git a/web-ui/src/common/flat_button/flat_button.spec.js b/web-ui/src/common/flat_button/flat_button.spec.js
new file mode 100644
index 00000000..500eb8fb
--- /dev/null
+++ b/web-ui/src/common/flat_button/flat_button.spec.js
@@ -0,0 +1,20 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import FlatButton from 'src/common/flat_button/flat_button';
+
+describe('FlatButton', () => {
+  let flatButton;
+
+  beforeEach(() => {
+    flatButton = shallow(<FlatButton buttonText='Logout' fontIconClass='fa fa-sign-out' />);
+  });
+
+  it('renders a FlatButton of type submit with text logout', () => {
+    expect(flatButton.find('FlatButton').props().label).toEqual('Logout');
+  });
+
+  it('renders a FlatButton with given fontIcon class', () => {
+    expect(flatButton.find('FlatButton').props().icon.props.className).toEqual('fa fa-sign-out');
+  });
+});
diff --git a/web-ui/src/common/header/header.js b/web-ui/src/common/header/header.js
index 50c863b5..fde93817 100644
--- a/web-ui/src/common/header/header.js
+++ b/web-ui/src/common/header/header.js
@@ -17,6 +17,7 @@
 
 import React from 'react';
 import { translate } from 'react-i18next';
+import Logout from 'src/common/logout/logout';
 import './header.scss';
 
 export const Header = ({ t }) => (
@@ -26,14 +27,11 @@ export const Header = ({ t }) => (
         <img
           className='header-logo'
           src='/public/images/logo-orange.svg'
-          alt='Pixelated'
+          alt={t('Pixelated')}
         />
       </a>
       <div className='header-icons'>
-        <a href='/'>
-          <span>{t('logout')}</span>
-          <i className='fa fa-sign-out' aria-hidden='true' />
-        </a>
+        <Logout />
       </div>
     </div>
   </header>
diff --git a/web-ui/src/common/header/header.scss b/web-ui/src/common/header/header.scss
index d56629bf..3e10ba39 100644
--- a/web-ui/src/common/header/header.scss
+++ b/web-ui/src/common/header/header.scss
@@ -28,7 +28,6 @@
 
 .header-content {
   display: flex;
-  align-items: center;
 }
 
 .header-logo {
@@ -41,7 +40,7 @@
 
   position: absolute;
   right: 6%;
-  top: 13px;
+  line-height: 0;
 
   span {
     display: none;
@@ -51,6 +50,7 @@
     font-size: 1.3em;
     margin-left: 0.4em;
     color: $medium_light_grey;
+    overflow: visible;
   }
 }
 
@@ -78,6 +78,7 @@
       font-style: normal;
       font-size: 0.7em;
       padding-bottom: 0.1em;
+      line-height: 36px;
     }
 
     .fa {
diff --git a/web-ui/src/common/header/header.spec.js b/web-ui/src/common/header/header.spec.js
index 82e29e1c..e5004bcc 100644
--- a/web-ui/src/common/header/header.spec.js
+++ b/web-ui/src/common/header/header.spec.js
@@ -12,6 +12,6 @@ describe('Header', () => {
   });
 
   it('renders the header content', () => {
-    expect(header.find('header').text()).toContain('logout');
+    expect(header.find('header').text()).toContain('Logout');
   });
 });
diff --git a/web-ui/src/common/logout/logout.js b/web-ui/src/common/logout/logout.js
new file mode 100644
index 00000000..12db1067
--- /dev/null
+++ b/web-ui/src/common/logout/logout.js
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { translate } from 'react-i18next';
+import browser from 'helpers/browser';
+
+import SubmitFlatButton from 'src/common/flat_button/flat_button';
+
+export class Logout extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { csrf_token: browser.getCookie('XSRF-TOKEN') };
+  }
+
+  render() {
+    const t = this.props.t;
+    return (
+      <div className='logout-container'>
+        <form id='logout-form' method='POST' action='logout'>
+          <input type='hidden' name='csrftoken' value={this.state.csrf_token} />
+          <SubmitFlatButton buttonText={t('logout')} fontIconClass='fa fa-sign-out' />
+        </form>
+      </div>
+    );
+  }
+}
+
+Logout.propTypes = {
+  t: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(Logout);
diff --git a/web-ui/src/common/logout/logout.spec.js b/web-ui/src/common/logout/logout.spec.js
new file mode 100644
index 00000000..ba228e61
--- /dev/null
+++ b/web-ui/src/common/logout/logout.spec.js
@@ -0,0 +1,49 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { Logout } from 'src/common/logout/logout';
+
+describe('Logout', () => {
+  let logout;
+
+  beforeEach(() => {
+    const mockTranslations = key => key;
+    logout = shallow(<Logout t={mockTranslations} fontIconClass='fa fa-sign-out' />);
+  });
+
+  it('renders the logout container', () => {
+    expect(logout.find('div.logout-container')).toExist();
+  });
+
+  describe('logout form', () => {
+    let logoutForm;
+
+    beforeEach(() => {
+      logoutForm = logout.find('form#logout-form');
+    });
+
+    it('renders logout form', () => {
+      expect(logoutForm).toExist();
+    });
+
+    it('renders logout form with POST method', () => {
+      expect(logoutForm.props().method).toEqual('POST');
+    });
+
+    it('renders logout form with action as logout', () => {
+      expect(logoutForm.props().action).toEqual('logout');
+    });
+
+    it('renders csrf hidden input', () => {
+      expect(logoutForm.find('input[name="csrftoken"]')).toExist();
+    });
+
+    it('renders SubmitFlatButton for logout', () => {
+      expect(logoutForm.find('SubmitFlatButton').props().buttonText).toEqual('logout');
+    });
+
+    it('renders SubmitFlatButton for logout with fontIcon', () => {
+      expect(logoutForm.find('SubmitFlatButton').props().fontIconClass).toEqual('fa fa-sign-out');
+    });
+  });
+});