Merge pull request #603 from LiskHQ/596-login-middleware

Move the Login logic to middlewares - Closes #596

src/actions/account.js

@@ -1,18 +1,35 @@
 import actionTypes from '../constants/actions';
 
 /**
+ * Trigger this action to update the account object
+ * while already logged in
  *
- *
+ * @param {Object} data - account data
+ * @returns {Object} - Action object
  */
 export const accountUpdated = data => ({
   data,
   type: actionTypes.accountUpdated,
 });
 
 /**
+ * Trigger this action to log out of the account
+ * while already logged in
  *
- *
+ * @returns {Object} - Action object
  */
 export const accountLoggedOut = () => ({
   type: actionTypes.accountLoggedOut,
 });
+
+/**
+ * Trigger this action to login to an account
+ * The login middleware triggers this action
+ *
+ * @param {Object} data - account data
+ * @returns {Object} - Action object
+ */
+export const accountLoggedIn = data => ({
+  type: actionTypes.accountLoggedIn,
+  data,
+});

src/actions/peers.js

@@ -4,17 +4,18 @@ import actionTypes from '../constants/actions';
 /**
  * Returns required action object to set
  * the given peer data as active peer
+ * This should be called once in login page
  *
- * @param {Object} data - Active peer data
+ * @param {Object} data - Active peer data and the passphrase of account
  * @returns {Object} Action object
  */
-export const activePeerSet = (network) => {
+export const activePeerSet = (data) => {
   const addHttp = (url) => {
     const reg = /^(?:f|ht)tps?:\/\//i;
     return reg.test(url) ? url : `http://${url}`;
   };
 
-  // this.network = network;
+  const { network } = data;
   let config = { };
   if (network) {
     config = network;
@@ -30,10 +31,11 @@ export const activePeerSet = (network) => {
     }
   }
 
-  const data = Lisk.api(config);
-
   return {
-    data,
+    data: Object.assign({
+      passphrase: data.passphrase,
+      activePeer: Lisk.api(config),
+    }),
     type: actionTypes.activePeerSet,
   };
 };

src/actions/peers.test.js

@@ -8,6 +8,8 @@ import { activePeerSet, activePeerReset, activePeerUpdate } from './peers';
 chai.use(sinonChai);
 
 describe('actions: peers', () => {
+  const passphrase = 'wagon stock borrow episode laundry kitten salute link globe zero feed marble';
+
   describe('activePeerUpdate', () => {
     it('should create an action to update the active peer', () => {
       const data = {
@@ -33,38 +35,47 @@ describe('actions: peers', () => {
 
   describe('activePeerSet', () => {
     it('creates active peer config', () => {
-      const network = {
-        address: 'http://localhost:4000',
-        testnet: true,
-        nethash: '198f2b61a8eb95fbeed58b8216780b68f697f26b849acf00c8c93bb9b24f783d',
+      const data = {
+        passphrase,
+        network: {
+          name: 'Custom Node',
+          custom: true,
+          address: 'http://localhost:4000',
+          testnet: true,
+          nethash: '198f2b61a8eb95fbeed58b8216780b68f697f26b849acf00c8c93bb9b24f783d',
+        },
       };
       const actionSpy = spy(Lisk, 'api');
-      activePeerSet(network);
-      expect(actionSpy).to.have.been.calledWith(network);
+      activePeerSet(data);
+      expect(actionSpy).to.have.been.calledWith(data.network);
       Lisk.api.restore();
     });
 
     it('dispatch activePeerSet action also when address http missing', () => {
-      const network = {
-        address: 'localhost:8000',
+      const data = {
+        passphrase,
+        network: {
+          address: 'localhost:8000',
+        },
       };
       const actionSpy = spy(Lisk, 'api');
-      activePeerSet(network);
+      activePeerSet(data);
       expect(actionSpy).to.have.been.calledWith();
       Lisk.api.restore();
     });
 
     it('dispatch activePeerSet action even if network is undefined', () => {
+      const data = { passphrase };
       const actionSpy = spy(Lisk, 'api');
-      activePeerSet();
+      activePeerSet(data);
       expect(actionSpy).to.have.been.calledWith();
       Lisk.api.restore();
     });
 
     it('dispatch activePeerSet action even if network.address is undefined', () => {
-      const network = {};
+      const data = { passphrase, network: {} };
       const actionSpy = spy(Lisk, 'api');
-      activePeerSet(network);
+      activePeerSet(data);
       expect(actionSpy).to.have.been.calledWith();
       Lisk.api.restore();
     });
@@ -78,10 +89,10 @@ describe('actions: peers', () => {
         address: 'http://127.0.0.1:4000',
         nethash: '198f2b61a8eb95fbeed58b8216780b68f697f26b849acf00c8c93bb9b24f783d',
       };
-      let activePeer = activePeerSet(network7000);
-      expect(activePeer.data.testnet).to.be.equal(true);
-      activePeer = activePeerSet(network4000);
-      expect(activePeer.data.testnet).to.be.equal(false);
+      let actionObj = activePeerSet({ passphrase, network: network7000 });
+      expect(actionObj.data.activePeer.testnet).to.be.equal(true);
+      actionObj = activePeerSet({ passphrase, network: network4000 });
+      expect(actionObj.data.activePeer.testnet).to.be.equal(false);
     });
   });
 });

src/components/account/account.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import grid from 'flexboxgrid/dist/flexboxgrid.css';
+import styles from './account.css';
+import Address from './address';
+import LiskAmount from '../liskAmount';
+import ClickToSend from '../send/clickToSend';
+import { toRawLsk } from '../../utils/lsk';
+
+/**
+ * Contains some of the important and basic information about the account
+ *
+ * @param {object} props - include properties of component
+ */
+const Account = ({
+  account, peers,
+}) => {
+  const status = (peers.status && peers.status.online) ?
+      <i className="material-icons online">check</i>
+      : <i className="material-icons offline">error</i>;
+
+  return (
+    <section className={`${grid.row} ${styles.wrapper}`}>
+      <article className={grid['col-xs-4']}>
+        <Address {...account}></Address>
+      </article>
+      <article className={grid['col-xs-4']}>
+        <div className="box">
+          <h3 className={styles.title}>Peer</h3>
+          <div className={styles['value-wrapper']}>
+            <span id="accountStatus" className="status">
+              {status}
+            </span>
+            <p className="inner primary">
+              {peers.data.options.name}
+            </p>
+            <p className="inner secondary peer">
+              {peers.data.currentPeer}
+              <span> : {peers.data.port}</span>
+            </p>
+          </div>
+        </div>
+      </article>
+      <article className={`${grid['col-xs-4']} balance`}>
+        <div className="box">
+          <h3 className={styles.title}>Balance</h3>
+          <ClickToSend
+            rawAmount={Math.max(0, account.balance - toRawLsk(0.1))} >
+            <div className={styles['value-wrapper']}>
+              <p className="inner primary full hasTip balance-value">
+                <LiskAmount val={account.balance} /> LSK
+              </p>
+              <p className="inner secondary tooltip">
+                Click to send all funds
+              </p>
+            </div>
+          </ClickToSend>
+        </div>
+      </article>
+    </section>
+  );
+};
+
+export default Account;

src/components/account/accountComponent.test.js → src/components/account/account.test.js

@@ -1,16 +1,15 @@
 import React from 'react';
 import chai, { expect } from 'chai';
-import { spy } from 'sinon';
 import sinonChai from 'sinon-chai';
 import { shallow, mount } from 'enzyme';
 import { Provider } from 'react-redux';
 import store from '../../store';
-import AccountComponent from './accountComponent';
+import Account from './account';
 import ClickToSend from '../send/clickToSend';
 
 chai.use(sinonChai);
 
-describe('AccountComponent', () => {
+describe('Account', () => {
   // Mocking store
   const onActivePeerUpdated = () => {};
   const peers = {
@@ -33,22 +32,22 @@ describe('AccountComponent', () => {
   };
 
   it(' should render 3 article tags', () => {
-    const wrapper = shallow(<AccountComponent account={testAccount} peers={peers}
+    const wrapper = shallow(<Account account={testAccount} peers={peers}
       onActivePeerUpdated={onActivePeerUpdated} />);
     expect(wrapper.find('article')).to.have.lengthOf(3);
   });
 
   it('depicts being online when peers.status.online is true', () => {
     const onlinePeers = Object.assign({}, peers, { status: { online: true } });
-    const wrapper = shallow(<AccountComponent account={testAccount} peers={onlinePeers}
+    const wrapper = shallow(<Account account={testAccount} peers={onlinePeers}
       onActivePeerUpdated={onActivePeerUpdated} />);
     const expectedValue = 'check';
     expect(wrapper.find('.material-icons').text()).to.be.equal(expectedValue);
   });
 
   it('should render balance with ClickToSend component', () => {
     const wrapper = mount(<Provider store={store}>
-      <AccountComponent account={testAccount} peers={peers}
+      <Account account={testAccount} peers={peers}
         onActivePeerUpdated={onActivePeerUpdated} />
     </Provider>);
     expect(wrapper.find('.balance').find(ClickToSend)).to.have.lengthOf(1);

src/components/account/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import AccountComponent from './accountComponent';
+import Account from './account';
 import { activePeerUpdate } from '../../actions/peers';
 import { accountUpdated } from '../../actions/account';
 import { transactionsUpdated } from '../../actions/transactions';
@@ -18,9 +18,7 @@ const mapDispatchToProps = dispatch => ({
   onTransactionsUpdated: data => dispatch(transactionsUpdated(data)),
 });
 
-const Account = connect(
+export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(AccountComponent);
-
-export default Account;
+)(Account);

src/components/account/index.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { expect } from 'chai';
 import { mount } from 'enzyme';
 import Account from './index';
-import AccountComponent from './accountComponent';
+import AccountComponent from './account';
 
 describe('Account', () => {
   // Mocking store

src/components/login/loginForm.js

@@ -2,7 +2,6 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 import { dialogDisplayed } from '../../actions/dialog';
 import LoginFormComponent from './loginFormComponent';
-import { accountUpdated } from '../../actions/account';
 import { activePeerSet } from '../../actions/peers';
 
 /**
@@ -14,7 +13,6 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  onAccountUpdated: data => dispatch(accountUpdated(data)),
   activePeerSet: network => dispatch(activePeerSet(network)),
   setActiveDialog: data => dispatch(dialogDisplayed(data)),
 });