Validate and set custom node when creating new account - Closes #1326

src/components/account/account.css

@@ -95,6 +95,7 @@
   text-align: left;
   width: auto;
   height: 56px;
+  margin-bottom: 20px;
 }
 
 @media (--medium-viewport) {

src/components/login/index.js

@@ -3,9 +3,9 @@ import { withRouter } from 'react-router';
 import { setDefaults, translate } from 'react-i18next';
 import { dialogDisplayed } from '../../actions/dialog';
 import Login from './login';
+import { errorToastDisplayed } from '../../actions/toaster';
 import { activePeerSet } from '../../actions/peers';
 import { settingsUpdated } from '../../actions/settings';
-import { errorToastDisplayed } from '../../actions/toaster';
 import { loadingStarted, loadingFinished } from '../../actions/loading';
 
 setDefaults({

src/components/login/login.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import i18next from 'i18next';
+import Lisk from 'lisk-elements';
+
 import Dropdown from '../toolbox/dropdown/dropdown';
 import Input from '../toolbox/inputs/input';
 import { PrimaryButton } from '../toolbox/buttons/button';
@@ -126,16 +128,16 @@ class Login extends React.Component {
       this.props.peers.options.address === network.address;
   }
 
-  getNetwork() {
-    const network = Object.assign({}, getNetwork(this.state.network));
-    if (this.state.network === networks.customNode.code) {
+  getNetwork(chosenNetwork) {
+    const network = Object.assign({}, getNetwork(chosenNetwork));
+    if (chosenNetwork === networks.customNode.code) {
       network.address = addHttp(this.state.address);
     }
     return network;
   }
 
   onLoginSubmission(passphrase) {
-    const network = this.getNetwork();
+    const network = this.getNetwork(this.state.network);
     this.secondIteration = true;
     if (this.alreadyLoggedWithThisAddress(extractAddress(passphrase), network)) {
       this.redirectToReferrer();
@@ -193,6 +195,32 @@ class Login extends React.Component {
     return showNetworkParam === 'true' || (showNetwork && showNetworkParam !== 'false');
   }
 
+  validateCorrectNode() {
+    const { address } = this.state;
+    const nodeURL = address !== '' ? addHttp(address) : address;
+
+    if (this.state.network === networks.customNode.code) {
+      const liskAPIClient = new Lisk.APIClient([nodeURL], {});
+      liskAPIClient.node.getConstants()
+        .then((res) => {
+          if (res.data) {
+            this.props.activePeerSet({
+              network: this.getNetwork(this.state.network),
+            });
+            this.props.history.push(routes.register.path);
+          } else {
+            throw new Error();
+          }
+        }).catch(() => {
+          this.props.errorToastDisplayed({ label: i18next.t('Unable to connect to the node') });
+        });
+    } else {
+      const network = this.getNetwork(this.state.network);
+      this.props.activePeerSet({ network });
+      this.props.history.push(routes.register.path);
+    }
+  }
+
   cancelLedgerLogin() {
     this.setState({ isLedgerLogin: false, isLedgerFirstLogin: false });
   }
@@ -269,7 +297,10 @@ class Login extends React.Component {
             </div>
           </section>
         </section>
-        <SignUp t={this.props.t} passInputState={this.state.passInputState} />
+        <SignUp
+          t={this.props.t}
+          passInputState={this.state.passInputState}
+          validateCorrectNode={this.validateCorrectNode.bind(this)}/>
       </Box>
     );
   }

src/components/login/login.test.js

@@ -45,6 +45,7 @@ describe('Login', () => {
         pathname: '',
         search: '',
       },
+      push: spy(),
       replace: spy(),
     };
     props = {
@@ -135,6 +136,11 @@ describe('Login', () => {
       spyFn.restore();
       localStorage.removeItem('address');
     });
+
+    it('calls this.props.history.push on signButton click', () => {
+      wrapper.find('.new-account-button').simulate('click');
+      expect(props.history.push).to.have.been.calledWith(`${routes.register.path}`);
+    });
   });
 
   describe('After submission', () => {

src/components/login/signUp.css

@@ -33,6 +33,8 @@
     margin-top: 32vh; /* stylelint-disable-line */
     margin-bottom: 24px;
     white-space: nowrap;
+    display: flex;
+    cursor: pointer;
   }
 
   & .subTitle,
@@ -121,6 +123,7 @@
 
     & h2 {
       font-size: 50px;
+      display: flex;
     }
   }
 }

src/components/login/signUp.js

@@ -1,20 +1,20 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 import Parallax from '../parallax';
 import { FontIcon } from '../fontIcon';
 // eslint-disable-next-line import/no-unresolved
 import * as shapes from '../../assets/images/*.svg';
 import styles from './signUp.css';
-import routes from '../../constants/routes';
 
-const SignUp = ({ t, passInputState }) =>
+const SignUp = ({ t, passInputState, validateCorrectNode }) =>
   (<section className={`${styles.signUp} ${styles[passInputState]}`}>
     <section className={styles.table}>
       <div className='text-left'>
         <h2>
-          <Link className='new-account-button' to={routes.register.path}>
+          <div
+            className='new-account-button'
+            onClick={() => { validateCorrectNode(); }} >
             {t('Create Lisk ID')}
-          </Link>
+          </div>
           <FontIcon className={styles.singUpArrow} value='arrow-right' />
         </h2>