Merge pull request #523 from LiskHQ/496-add-lockid-feature

Add LockID feature - Closes #496

i18n/locales/en/common.json

@@ -100,6 +100,7 @@
   "Lisk Hub": "Lisk Hub",
   "Lisk ID": "Lisk ID",
   "Lisk Website": "Lisk Website",
+  "Lock ID": "Lock ID",
   "Lock ID’s automatically after 10 minutes.": "Lock ID’s automatically after 10 minutes.",
   "Log in": "Log in",
   "Losing access to this passphrase will mean no funds can be sent from this account.": "Losing access to this passphrase will mean no funds can be sent from this account.",
@@ -202,7 +203,6 @@
   "Unable to connect to the node": "Unable to connect to the node",
   "Undo": "Undo",
   "Unlock account": "Unlock account",
-  "Unlocked": "Unlocked",
   "Update download finished": "Update download finished",
   "Update now": "Update now",
   "Updates downloaded, application has to be restarted to apply the updates.": "Updates downloaded, application has to be restarted to apply the updates.",
@@ -231,6 +231,7 @@
   "You only need to do this once for each Lisk ID.": "You only need to do this once for each Lisk ID.",
   "You will send a small amount of {{fee}} LSK to yourself and therefore initialize your ID.": "You will send a small amount of {{fee}} LSK to yourself and therefore initialize your ID.",
   "You've received {{value}} LSK.": "You've received {{value}} LSK.",
+  "Your ID is now secured!": "Your ID is now secured!",
   "Your Lisk IDs": "Your Lisk IDs",
   "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.": "You’re votes are being processed and will be confirmed. It may take up to 10 minutes to be secured in the blockchain.",
   "Zero not allowed": "Zero not allowed",

src/actions/account.js

@@ -11,9 +11,11 @@ import transactionTypes from '../constants/transactionTypes';
 /**
  * Trigger this action to remove passphrase from account object
  *
+ * @param {Object} data - account data
  * @returns {Object} - Action object
  */
-export const removePassphrase = () => ({
+export const removePassphrase = data => ({
+  data,
   type: actionTypes.removePassphrase,
 });
 

src/actions/account.test.js

@@ -2,14 +2,16 @@ import { expect } from 'chai';
 import sinon from 'sinon';
 import actionTypes from '../constants/actions';
 import { accountUpdated, accountLoggedOut,
-  secondPassphraseRegistered, delegateRegistered, sent } from './account';
+  secondPassphraseRegistered, delegateRegistered, sent, removePassphrase } from './account';
 import { transactionAdded, transactionFailed } from './transactions';
 import { errorAlertDialogDisplayed } from './dialog';
 import * as accountApi from '../utils/api/account';
 import * as delegateApi from '../utils/api/delegate';
 import Fees from '../constants/fees';
 import { toRawLsk } from '../utils/lsk';
 import transactionTypes from '../constants/transactionTypes';
+import networks from '../constants/networks';
+import accounts from '../../test/constants/accounts';
 
 describe('actions: account', () => {
   describe('accountUpdated', () => {
@@ -215,4 +217,21 @@ describe('actions: account', () => {
       expect(dispatch).to.have.been.calledWith(expectedAction);
     });
   });
+
+  describe('removePassphrase', () => {
+    it('should create an action to remove passphrase', () => {
+      const data = {
+        publicKey: accounts.genesis.publicKey,
+        network: networks.testnet,
+        address: accounts.genesis.address,
+      };
+
+      const expectedAction = {
+        data,
+        type: actionTypes.removePassphrase,
+      };
+
+      expect(removePassphrase(data)).to.be.deep.equal(expectedAction);
+    });
+  });
 });

src/actions/savedAccounts.js

@@ -50,3 +50,13 @@ export const accountsRetrieved = () => ({
 export const activeAccountSaved = () => ({
   type: actionTypes.activeAccountSaved,
 });
+
+/**
+ * An action to dispatch removeSavedAccountPassphrase
+ * @param {Object} data - account data
+ * @returns {Object} - Action object
+ */
+export const removeSavedAccountPassphrase = data => ({
+  data,
+  type: actionTypes.removeSavedAccountPassphrase,
+});

src/actions/savedAccounts.test.js

@@ -8,6 +8,7 @@ import {
   accountRemoved,
   accountsRetrieved,
   activeAccountSaved,
+  removeSavedAccountPassphrase,
 } from './savedAccounts';
 
 
@@ -76,4 +77,15 @@ describe('actions: savedAccount', () => {
       expect(activeAccountSaved()).to.be.deep.equal(expectedAction);
     });
   });
+
+  describe('removeSavedAccountPassphrase', () => {
+    it('should create an action to remove passphrase', () => {
+      const expectedAction = {
+        data,
+        type: actionTypes.removeSavedAccountPassphrase,
+      };
+
+      expect(removeSavedAccountPassphrase(data)).to.be.deep.equal(expectedAction);
+    });
+  });
 });

src/components/header/header.js

@@ -49,16 +49,20 @@ class Header extends React.Component {
                     </div>
                     <CopyToClipboard value={this.props.account.address} className={`${styles.address} account-information-address`}/>
                     {this.props.autoLog ? <div className={styles.timer}>
-                      {((!this.props.account.expireTime || this.props.account.expireTime === 0)) ?
-                        <span>{this.props.t('Account locked!')} <FontIcon value='locked' className={styles.lock}/></span> :
+                      {((this.props.account.expireTime &&
+                          this.props.account.expireTime !== 0) &&
+                          this.props.account.passphrase) ?
                         <div>
                           {this.props.t('Address timeout in')} <i> </i>
                           <Countdown
                             date={this.props.account.expireTime}
                             renderer={CountDownTemplate}
-                            onComplete={() => this.props.removePassphrase()}
-                          />  <FontIcon value='unlocked' className={styles.lock}/>
-                        </div>}
+                            onComplete={() => {
+                              this.props.removeSavedAccountPassphrase();
+                            }
+                            }
+                          />
+                        </div> : <div></div>}
                     </div>
                       : <div className={styles.timer}>
                         {this.props.account.passphrase ? '' : <span>

src/components/header/index.js

@@ -3,6 +3,7 @@ import { withRouter } from 'react-router';
 import { translate } from 'react-i18next';
 import { dialogDisplayed } from '../../actions/dialog';
 import { accountLoggedOut, removePassphrase } from '../../actions/account';
+import { removeSavedAccountPassphrase } from '../../actions/savedAccounts';
 import Header from './header';
 
 const mapStateToProps = state => ({
@@ -15,7 +16,8 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   setActiveDialog: data => dispatch(dialogDisplayed(data)),
   logOut: () => dispatch(accountLoggedOut()),
-  removePassphrase: () => dispatch(removePassphrase()),
+  removePassphrase: data => dispatch(removePassphrase(data)),
+  removeSavedAccountPassphrase: () => dispatch(removeSavedAccountPassphrase()),
 });
 export default withRouter(connect(
   mapStateToProps,

src/components/header/index.test.js

@@ -9,6 +9,7 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from '../../i18n'; // initialized i18next instance
 import * as accountActions from '../../actions/account';
 import * as dialogActions from '../../actions/dialog';
+import * as savedAccountsActions from '../../actions/savedAccounts';
 import Header from './header';
 import HeaderHOC from './index';
 
@@ -52,4 +53,18 @@ describe('HeaderHOC', () => {
     expect(actionsSpy).to.be.calledWith();
     actionsSpy.restore();
   });
+
+  it('should dispatch removePassphrase action', () => {
+    const actionsSpy = sinon.spy(accountActions, 'removePassphrase');
+    wrapper.find(Header).props().removePassphrase({});
+    expect(actionsSpy).to.be.calledWith({});
+    actionsSpy.restore();
+  });
+
+  it('should dispatch removeSavedAccountPassphrase action', () => {
+    const actionsSpy = sinon.spy(savedAccountsActions, 'removeSavedAccountPassphrase');
+    wrapper.find(Header).props().removeSavedAccountPassphrase();
+    expect(actionsSpy).to.be.calledWith();
+    actionsSpy.restore();
+  });
 });

src/components/savedAccounts/index.js

@@ -1,7 +1,8 @@
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { translate } from 'react-i18next';
-import { accountRemoved, accountSwitched } from '../../actions/savedAccounts';
+import { accountRemoved, accountSwitched, removeSavedAccountPassphrase } from '../../actions/savedAccounts';
+import { removePassphrase } from '../../actions/account';
 import SavedAccounts from './savedAccounts';
 
 const mapStateToProps = state => ({
@@ -12,6 +13,8 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   accountRemoved: data => dispatch(accountRemoved(data)),
   accountSwitched: data => dispatch(accountSwitched(data)),
+  removePassphrase: data => dispatch(removePassphrase(data)),
+  removeSavedAccountPassphrase: data => dispatch(removeSavedAccountPassphrase(data)),
 });
 
 export default connect(

src/components/savedAccounts/savedAccounts.css

@@ -182,7 +182,8 @@
 }
 
 .network,
-.unlocked {
+.unlocked,
+.unlockedSecured {
   font-size: var(--font-size-h6);
   position: absolute;
   top: 0;
@@ -197,6 +198,24 @@
 
 .unlocked {
   left: 0;
+  padding-top: 25px;
+
+  & span {
+    margin-bottom: 3px;
+    transition: transform ease-in-out 500ms;
+  }
+
+  &:hover {
+    & span {
+      transform: scale(1.1);
+      transform-origin: 100%;
+    }
+  }
+}
+
+.unlockedSecured {
+  left: 0;
+  padding-top: 30px;
 }
 
 .network {

src/components/savedAccounts/savedAccounts.js

@@ -27,6 +27,7 @@ class SavedAccounts extends React.Component {
     super();
 
     this.state = {
+      isSecureAppears: {},
     };
   }
 
@@ -57,6 +58,24 @@ class SavedAccounts extends React.Component {
     e.stopPropagation();
   }
 
+  handleRemovePassphrase(account, e) {
+    e.stopPropagation();
+
+    const uniqueID = `${account.network}${account.publicKey}`;
+    const { savedAccounts } = this.props;
+    const savedActiveAccount = savedAccounts.find(acc => `${acc.network}${acc.passphrase}` === `${account.network}${account.passphrase}`);
+    if (savedActiveAccount) {
+      this.props.removePassphrase(account);
+    }
+
+    this.props.removeSavedAccountPassphrase(account);
+
+    this.setState({ isSecureAppears: { ...this.state.isSecureAppears, [uniqueID]: true } });
+    setTimeout(() => {
+      this.setState({ isSecureAppears: { ...this.state.isSecureAppears, [uniqueID]: false } });
+    }, 5000);
+  }
+
   render() {
     const {
       closeDialog,
@@ -102,9 +121,16 @@ class SavedAccounts extends React.Component {
             key={account.publicKey + account.network}
             onClick={ switchAccount.bind(null, account)} >
               {(account.passphrase ?
-                <strong className={styles.unlocked}>
+                <strong
+                  className={`unlocked ${styles.unlocked}`}
+                  onClick={this.handleRemovePassphrase.bind(this, account)}>
                   <FontIcon value='unlocked' />
-                  {t('Unlocked')}
+                  {t('Lock ID')}
+                </strong> :
+                null)}
+              {(this.state.isSecureAppears[`${account.network}${account.publicKey}`] ?
+                <strong className={`unlockedSecured ${styles.unlockedSecured}`}>
+                  {t('Your ID is now secured!')}
                 </strong> :
                 null)}
               {(account.network !== networks.mainnet.code ?

src/components/savedAccounts/savedAccounts.test.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { expect } from 'chai';
 import { MemoryRouter as Router } from 'react-router-dom';
 import { mount } from 'enzyme';
-import { spy } from 'sinon';
+import { spy, useFakeTimers } from 'sinon';
 import configureStore from 'redux-mock-store';
 import PropTypes from 'prop-types';
 import i18n from '../../i18n';
 import networks from '../../constants/networks';
+import accounts from '../../../test/constants/accounts';
 import SavedAccounts from './savedAccounts';
 import routes from '../../constants/routes';
 
@@ -26,6 +27,7 @@ describe('SavedAccounts', () => {
     {
       publicKey: 'hab9d261ea050b9e326d7e11587eccc343a20e64e29d8781b50fd06683cacc88',
       network: networks.mainnet.code,
+      passphrase: accounts.genesis.passphrase,
     },
     {
       network: networks.customNode.code,
@@ -39,13 +41,16 @@ describe('SavedAccounts', () => {
     {
       network: networks.testnet.code,
       publicKey: activeAccount.publicKey,
+      passphrase: accounts.genesis.passphrase,
     },
   ];
 
   const props = {
     closeDialog: () => {},
     accountRemoved: spy(),
     accountSwitched: spy(),
+    removePassphrase: spy(),
+    removeSavedAccountPassphrase: spy(),
     networkOptions: {
       code: networks.mainnet.code,
     },
@@ -62,6 +67,7 @@ describe('SavedAccounts', () => {
       account: {
         balance: 100e8,
       },
+      isSecureAppears: false,
     });
     wrapper = mountWithRouter(<SavedAccounts {...props} />, {
       context: { store, i18n },
@@ -87,12 +93,36 @@ describe('SavedAccounts', () => {
     expect(props.accountRemoved).to.have.been.calledWith(savedAccounts[1]);
   });
 
+  it('should call props.removePassphrase and props.removeSavedAccountPassphrase on "Lock ID" click when account is in saved', () => {
+    expect(wrapper.find('strong.unlocked')).to.have.lengthOf(2);
+    wrapper.find('strong.unlocked').at(1).simulate('click');
+    expect(props.removePassphrase).to.have.been.calledWith(savedAccounts[3]);
+    expect(props.removeSavedAccountPassphrase).to.have.been.calledWith(savedAccounts[3]);
+  });
+
   it('should call props.accountSwitched on the "saved account card" click', () => {
     wrapper.find('.saved-account-card').at(1).simulate('click');
     expect(props.accountSwitched).to.have.been.calledWith(savedAccounts[1]);
     expect(props.history.push).to.have.been.calledWith(`${routes.main.path}${routes.dashboard.path}`);
   });
 
+  it('should check if "Your ID is now secured!" disapears after 5sec', () => {
+    const clock = useFakeTimers({
+      toFake: ['setTimeout', 'clearTimeout', 'Date'],
+    });
+
+    expect(wrapper.find('strong.unlockedSecured')).to.have.lengthOf(0);
+    wrapper.find('strong.unlocked').at(1).simulate('click');
+    clock.tick(2000);
+    expect(wrapper.find('strong.unlockedSecured')).to.have.lengthOf(1);
+
+    clock.tick(7000);
+    wrapper.update();
+    expect(wrapper.find('strong.unlockedSecured')).to.have.lengthOf(0);
+
+    clock.restore();
+  });
+
   it('should not call props.accountSwitched on the "saved account card" click if in "edit" mode', () => {
     wrapper.find('button.edit-button').simulate('click');
     wrapper.find('.saved-account-card').at(0).simulate('click');

src/constants/actions.js

@@ -43,6 +43,7 @@ const actionTypes = {
   removePassphrase: 'REMOVE_PASSPHRASE',
   settingsUpdated: 'SETTINGS_UPDATED',
   settingsReset: 'SETTINGS_RESET',
+  removeSavedAccountPassphrase: 'REMOVE_SAVED_ACCOUNT_PASSPHRASE',
 };
 
 export default actionTypes;

src/store/middlewares/login.js

@@ -14,13 +14,14 @@ const loginMiddleware = store => next => (action) => {
 
   next(Object.assign({}, action, { data: action.data.activePeer }));
 
-  const { passphrase } = action.data;
+  const { passphrase, activePeer: { options: { code } } } = action.data;
   const publicKey = passphrase ? extractPublicKey(passphrase) : action.data.publicKey;
   const address = extractAddress(publicKey);
   const accountBasics = {
     passphrase,
     publicKey,
     address,
+    network: code,
   };
   const { activePeer } = action.data;