From 28a72da1fe5129bef0e6b8da32fbf232b6b4ccfd Mon Sep 17 00:00:00 2001
From: Aleksey Popov <alepooop@gmail.com>
Date: Fri, 28 Jul 2017 14:43:14 +0300
Subject: [PATCH 1/3] Add `<PrivateWrapper />` component

---
 src/components/header/headerElement.js      | 69 +++++++++++----------
 src/components/privateWrapper/index.js      | 12 ++++
 src/components/privateWrapper/index.test.js | 25 ++++++++
 3 files changed, 73 insertions(+), 33 deletions(-)
 create mode 100644 src/components/privateWrapper/index.js
 create mode 100644 src/components/privateWrapper/index.test.js

diff --git a/src/components/header/headerElement.js b/src/components/header/headerElement.js
index bb71c49f6..86299a3d1 100644
--- a/src/components/header/headerElement.js
+++ b/src/components/header/headerElement.js
@@ -6,44 +6,47 @@ import styles from './header.css';
 import VerifyMessage from '../signVerify/verifyMessage';
 import SignMessage from '../signVerify/signMessage';
 import Send from '../send';
+import PrivateWrapper from '../privateWrapper';
 
 const HeaderElement = props => (
   <header className={styles.wrapper}>
     <img className={styles.logo} src={logo} alt="logo" />
-    <IconMenu
-      className={`${styles.iconButton} main-menu-icon-button`}
-      icon="more_vert"
-      position="topRight"
-      menuRipple
-      theme={styles}
-    >
-      <MenuItem caption="Register second passphrase" />
-      <MenuItem caption="Register as delegate" />
-      <MenuItem caption="Sign message"
-        className='sign-message'
+    <PrivateWrapper>
+      <IconMenu
+        className={`${styles.iconButton} main-menu-icon-button`}
+        icon="more_vert"
+        position="topRight"
+        menuRipple
+        theme={styles}
+      >
+        <MenuItem caption="Register second passphrase" />
+        <MenuItem caption="Register as delegate" />
+        <MenuItem caption="Sign message"
+          className='sign-message'
+          onClick={() => props.setActiveDialog({
+            title: 'Sign message',
+            childComponentProps: {
+              account: props.account,
+            },
+            childComponent: SignMessage,
+          })}
+        />
+        <MenuItem caption="Verify message"
+          className='verify-message'
+          onClick={() => props.setActiveDialog({
+            title: 'Verify message',
+            childComponent: VerifyMessage,
+          })}
+        />
+      </IconMenu>
+      <Button className={styles.button} raised>logout</Button>
+      <Button className={styles.button}
+        raised primary
         onClick={() => props.setActiveDialog({
-          title: 'Sign message',
-          childComponentProps: {
-            account: props.account,
-          },
-          childComponent: SignMessage,
-        })}
-      />
-      <MenuItem caption="Verify message"
-        className='verify-message'
-        onClick={() => props.setActiveDialog({
-          title: 'Verify message',
-          childComponent: VerifyMessage,
-        })}
-      />
-    </IconMenu>
-    <Button className={styles.button} raised>logout</Button>
-    <Button className={styles.button}
-      raised primary
-      onClick={() => props.setActiveDialog({
-        title: 'Send',
-        childComponent: Send,
-      })}>Send</Button>
+          title: 'Send',
+          childComponent: Send,
+        })}>Send</Button>
+      </PrivateWrapper>
   </header>
 );
 
diff --git a/src/components/privateWrapper/index.js b/src/components/privateWrapper/index.js
new file mode 100644
index 000000000..4e504bfb5
--- /dev/null
+++ b/src/components/privateWrapper/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+export const PrivateWrapperComponent = ({ isAuthenticated, children }) => (
+    isAuthenticated && <span>{ children }</ span>
+);
+
+const mapStateToProps = state => ({
+  isAuthenticated: !!state.account.publicKey,
+});
+
+export default connect(mapStateToProps)(PrivateWrapperComponent);
diff --git a/src/components/privateWrapper/index.test.js b/src/components/privateWrapper/index.test.js
new file mode 100644
index 000000000..23f6ae4b8
--- /dev/null
+++ b/src/components/privateWrapper/index.test.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import { PrivateWrapperComponent } from '.';
+
+const Private = () => <h1>Private</h1>;
+
+describe('PrivateWrapperComponent', () => {
+  const isAuth = isAuthenticated => (
+    shallow(
+        <PrivateWrapperComponent isAuthenticated={isAuthenticated}>
+            <Private/ >
+        </PrivateWrapperComponent>,
+    )
+  );
+  it('should render children components if user is authenticated', () => {
+    const wrapper = isAuth(true);
+    expect(wrapper.find(Private)).to.have.length(1);
+  });
+
+  it('should do not render children components if user is not authenticated', () => {
+    const wrapper = isAuth(false);
+    expect(wrapper.find(Private)).to.have.length(0);
+  });
+});

From 66b525cb12e06efc5afc6912537c66915228f443 Mon Sep 17 00:00:00 2001
From: Aleksey Popov <alepooop@gmail.com>
Date: Fri, 28 Jul 2017 14:58:06 +0300
Subject: [PATCH 2/3] Handle logout action on Logout button click

---
 src/components/account/accountComponent.js | 10 +++++++++-
 src/components/header/headerElement.js     |  2 +-
 src/components/header/index.js             |  2 ++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/account/accountComponent.js b/src/components/account/accountComponent.js
index eceb6d9ad..f6fc153da 100644
--- a/src/components/account/accountComponent.js
+++ b/src/components/account/accountComponent.js
@@ -11,9 +11,17 @@ import { getAccountStatus } from '../../utils/api/account';
  * @param {object} props - include properties of component
  */
 class AccountComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.update = this.update.bind(this);
+  }
   componentDidMount() {
     this.update();
-    document.addEventListener('beat', this.update.bind(this));
+    document.addEventListener('beat', this.update);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('beat', this.update);
   }
 
   update() {
diff --git a/src/components/header/headerElement.js b/src/components/header/headerElement.js
index 86299a3d1..ffe793068 100644
--- a/src/components/header/headerElement.js
+++ b/src/components/header/headerElement.js
@@ -39,7 +39,7 @@ const HeaderElement = props => (
           })}
         />
       </IconMenu>
-      <Button className={styles.button} raised>logout</Button>
+      <Button className={styles.button} raised onClick={props.logOut}>logout</Button>
       <Button className={styles.button}
         raised primary
         onClick={() => props.setActiveDialog({
diff --git a/src/components/header/index.js b/src/components/header/index.js
index e3fbe2d53..32b3bbb46 100644
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
 import { dialogDisplayed } from '../../actions/dialog';
+import { accountLoggedOut } from '../../actions/account';
 import HeaderElement from './headerElement';
 
 const mapStateToProps = state => ({
@@ -8,6 +9,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   setActiveDialog: data => dispatch(dialogDisplayed(data)),
+  logOut: () => dispatch(accountLoggedOut()),
 });
 
 const Header = connect(

From c076b9c3ea868e3e24d88457b5f4e3963b719f1f Mon Sep 17 00:00:00 2001
From: Aleksey Popov <alepooop@gmail.com>
Date: Tue, 1 Aug 2017 14:52:34 +0300
Subject: [PATCH 3/3] Align drop-down menu

---
 src/components/header/header.css                     | 4 ++++
 src/components/transactions/transactionsComponent.js | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/header/header.css b/src/components/header/header.css
index 0d42c9dba..0ca71321f 100644
--- a/src/components/header/header.css
+++ b/src/components/header/header.css
@@ -16,3 +16,7 @@
 .material-icons{
     font-size: 24px !important;
 }
+
+.menu {
+    right: -16px !important;
+}
diff --git a/src/components/transactions/transactionsComponent.js b/src/components/transactions/transactionsComponent.js
index 5ea0fc104..27a844e24 100644
--- a/src/components/transactions/transactionsComponent.js
+++ b/src/components/transactions/transactionsComponent.js
@@ -39,7 +39,7 @@ class Transactions extends React.Component {
           length: parseInt(res.count, 10),
         });
       })
-      .catch(error => console.error(error.message));
+      .catch(error => console.error(error.message)); //eslint-disable-line
     }
   }