Fix login page after-migration differences - Closes #624

src/components/liskAmount/index.js

@@ -6,7 +6,7 @@ const roundTo = (value, places) => {
   if (!places) {
     return value;
   }
-  const x = Math.pow(10, places);
+  const x = 10 ** places;
   return Math.round(value * x) / x;
 };
 

src/components/login/login.css

@@ -6,3 +6,15 @@
 .newAccount {
   margin-right: 8px;
 }
+
+.network ul{
+  text-align: left;
+}
+.error {
+  display: inline-block;
+  text-align:left;
+  width: 100%;
+}
+.field {
+  margin-top: 10px;
+}

src/components/login/loginForm.js

@@ -60,10 +60,13 @@ class LoginForm extends React.Component {
       return reg.test(url) ? url : `http://${url}`;
     };
 
+    const isDefaultPort = url => (url.indexOf(':80') || url.indexOf(':443')) !== -1;
+
     let addressValidity = '';
     try {
       const url = new URL(addHttp(value));
-      addressValidity = url && url.port !== '' ? '' : 'URL is invalid';
+      const port = isDefaultPort(value) || url.port !== '';
+      addressValidity = url && port ? '' : 'URL is invalid';
     } catch (e) {
       addressValidity = 'URL is invalid';
     }
@@ -133,24 +136,31 @@ class LoginForm extends React.Component {
           onChange={this.changeHandler.bind(this, 'network')}
           label='Select a network'
           value={this.state.network}
-          className='network'
+          className={`${styles.network} network`}
         />
         {
           this.state.network === 2 &&
-          <Input type='text' label='Node address' name='address' className='address'
-            value={this.state.address} error={this.state.addressValidity}
-            onChange={this.changeHandler.bind(this, 'address')} />
+            <Input type='text'
+              label='Node address'
+              name='address'
+              className='address'
+              theme={styles}
+              value={this.state.address}
+              error={this.state.addressValidity}
+              onChange={this.changeHandler.bind(this, 'address')} />
         }
         <Input type={this.state.showPassphrase ? 'text' : 'password'}
           label='Enter your passphrase' name='passphrase'
           className='passphrase'
+          theme={styles}
           error={this.state.passphraseValidity === 'Invalid passphrase' ? 'Invalid passphrase' : ''}
           value={this.state.passphrase}
           onChange={this.changeHandler.bind(this, 'passphrase')} />
         <Checkbox
           checked={this.state.showPassphrase}
           label="Show passphrase"
           className={`${grid['start-xs']} show-passphrase`}
+          theme={styles}
           onChange={this.changeHandler.bind(this, 'showPassphrase')}
         />
         <footer className={ `${grid.row} ${grid['center-xs']}` }>

src/store/middlewares/account.js

@@ -30,8 +30,8 @@ const updateAccountData = next => (store) => { // eslint-disable-line
 
   return getAccountStatus(peers.data).then(() => {
     next(activePeerUpdate({ online: true }));
-  }).catch(() => {
-    next(activePeerUpdate({ online: false }));
+  }).catch((res) => {
+    next(activePeerUpdate({ online: false, code: res.error.code }));
   });
 };
 

src/store/middlewares/login.js

@@ -2,6 +2,7 @@ import { getAccount, extractAddress, extractPublicKey } from '../../utils/api/ac
 import { getDelegate } from '../../utils/api/delegate';
 import { accountLoggedIn } from '../../actions/account';
 import actionTypes from '../../constants/actions';
+import { errorToastDisplayed } from '../../actions/toaster';
 
 const loginMiddleware = store => next => (action) => {
   if (action.type !== actionTypes.activePeerSet) {
@@ -30,7 +31,7 @@ const loginMiddleware = store => next => (action) => {
         store.dispatch(accountLoggedIn(Object.assign({}, accountData, accountBasics,
           { delegate: {}, isDelegate: false })));
       }),
-  );
+  ).catch(() => store.dispatch(errorToastDisplayed({ label: 'Unable to connect to the node' })));
 };
 
 export default loginMiddleware;

src/store/middlewares/offline.js

@@ -2,13 +2,28 @@ import actionsType from '../../constants/actions';
 import { successToastDisplayed, errorToastDisplayed } from '../../actions/toaster';
 import { loadingStarted, loadingFinished } from '../../utils/loading';
 
+const getErrorMessage = (errorCode, address) => {
+  let message = `Failed to connect to node ${address}`;
+  switch (errorCode) {
+    case 'EUNAVAILABLE':
+      message = `Failed to connect: Node ${address} is not active`;
+      break;
+    case 'EPARSE':
+      message += ' Make sure that you are using the latest version of Lisk Nano.';
+      break;
+    default: break;
+  }
+  return message;
+};
+
 const offlineMiddleware = store => next => (action) => {
   const state = store.getState();
   switch (action.type) {
     case actionsType.activePeerUpdate:
       if (action.data.online === false && state.peers.status.online === true) {
         const address = `${state.peers.data.currentPeer}:${state.peers.data.port}`;
-        store.dispatch(errorToastDisplayed({ label: `Failed to connect to node ${address}` }));
+        const label = getErrorMessage(action.data.code, address);
+        store.dispatch(errorToastDisplayed({ label }));
         loadingStarted('offline');
       } else if (action.data.online === true && state.peers.status.online === false) {
         store.dispatch(successToastDisplayed({ label: 'Connection re-established' }));

src/store/middlewares/offline.test.js

@@ -38,16 +38,46 @@ describe('Offline middleware', () => {
     expect(next).to.have.been.calledWith(randomAction);
   });
 
-  it(`should dispatch errorToastDisplayed on ${actionType.activePeerUpdate} action if !action.data.online and state.peer.status.online`, () => {
+  it(`should dispatch errorToastDisplayed on ${actionType.activePeerUpdate} action if !action.data.online and state.peer.status.online and action.data.code`, () => {
     peers.status.online = true;
-    action.data.online = false;
+    action.data = {
+      online: false,
+      code: 'ANY OTHER CODE',
+    };
 
     middleware(store)(next)(action);
     expect(store.dispatch).to.have.been.calledWith(errorToastDisplayed({
       label: `Failed to connect to node ${peers.data.currentPeer}:${peers.data.port}`,
     }));
   });
 
+  it(`should dispatch errorToastDisplayed on ${actionType.activePeerUpdate} action if !action.data.online and state.peer.status.online and action.data.code = "EUNAVAILABLE"`, () => {
+    peers.status.online = true;
+    action.data = {
+      online: false,
+      code: 'EUNAVAILABLE',
+    };
+
+    middleware(store)(next)(action);
+    expect(store.dispatch).to.have.been.calledWith(errorToastDisplayed({
+      label: `Failed to connect: Node ${peers.data.currentPeer}:${peers.data.port} is not active`,
+    }));
+  });
+
+  it(`should dispatch errorToastDisplayed on ${actionType.activePeerUpdate} action if !action.data.online and state.peer.status.online and action.data.code = "EPARSE"`, () => {
+    peers.status.online = true;
+    action.data = {
+      online: false,
+      code: 'EPARSE',
+    };
+
+    const expectedResult = `Failed to connect to node ${peers.data.currentPeer}:${peers.data.port} Make sure that you are using the latest version of Lisk Nano.`;
+    middleware(store)(next)(action);
+    expect(store.dispatch).to.have.been.calledWith(errorToastDisplayed({
+      label: expectedResult,
+    }));
+  });
+
   it(`should dispatch successToastDisplayed on ${actionType.activePeerUpdate} action if action.data.online and !state.peer.status.online`, () => {
     peers.status.online = false;
     action.data.online = true;

src/utils/api/account.js

@@ -2,17 +2,19 @@ import Lisk from 'lisk-js';
 import { requestToActivePeer } from './peers';
 
 export const getAccount = (activePeer, address) =>
-  new Promise((resolve) => {
+  new Promise((resolve, reject) => {
     activePeer.getAccount(address, (data) => {
       if (data.success) {
         resolve(data.account);
-      } else {
+      } else if (!data.success && data.error === 'Account not found') {
         // when the account has no transactions yet (therefore is not saved on the blockchain)
         // this endpoint returns { success: false }
         resolve({
           address,
           balance: 0,
         });
+      } else {
+        reject(data);
       }
     });
   });