Show/Hide network options depending on url params - Closes #47

src/components/login/login.js

@@ -11,12 +11,12 @@ import styles from './login.css';
 import env from '../../constants/env';
 import networks from '../../constants/networks';
 import getNetwork from '../../utils/getNetwork';
+import { parseSearchParams } from './../../utils/searchParams';
 import LanguageDropdown from '../languageDropdown';
 import RelativeLink from '../relativeLink';
 // eslint-disable-next-line import/no-unresolved
 import * as shapes from '../../assets/images/*.svg';
 import { validateUrl, getLoginData } from '../../utils/login';
-import { parseSearchParams } from '../../utils/searchParams';
 
 /**
  * The container component containing login
@@ -159,6 +159,12 @@ class Login extends React.Component {
     });
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  showNetworkOptions() {
+    const params = parseSearchParams(this.props.history.location.search);
+    return params.showNetwork === 'true';
+  }
+
   render() {
     return (
       <div className={`box ${styles.wrapper}`}>
@@ -174,24 +180,29 @@ class Login extends React.Component {
               <h2>{this.props.t('Sign In')}</h2>
               <form onSubmit={this.onFormSubmit.bind(this)}>
                 <LanguageDropdown className={styles.outTaken} />
-                <Dropdown
-                  auto={false}
-                  source={this.networks}
-                  onChange={this.changeHandler.bind(this, 'network')}
-                  label={this.props.t('Select a network')}
-                  value={this.state.network}
-                  className={`${styles.network} network ${styles.outTaken}`}
-                />
-                {
-                  this.state.network === networks.customNode.code &&
-                    <Input type='text'
-                      label={this.props.t('Node address')}
-                      name='address'
-                      className={`address ${styles.outTaken}`}
-                      theme={styles}
-                      value={this.state.address}
-                      error={this.state.addressValidity}
-                      onChange={this.changeHandler.bind(this, 'address')} />
+                {this.showNetworkOptions()
+                  ? <div className={styles.outTaken}>
+                    <Dropdown
+                      auto={false}
+                      source={this.networks}
+                      onChange={this.changeHandler.bind(this, 'network')}
+                      label={this.props.t('Select a network')}
+                      value={this.state.network}
+                      className='network'
+                    />
+                    {
+                      this.state.network === networks.customNode.code &&
+                      <Input type='text'
+                        label={this.props.t('Node address')}
+                        name='address'
+                        className={`address ${styles.outTaken}`}
+                        theme={styles}
+                        value={this.state.address}
+                        error={this.state.addressValidity}
+                        onChange={this.changeHandler.bind(this, 'address')}/>
+                    }
+                  </div>
+                  : ''
                 }
                 <PassphraseInput label={this.props.t('Enter your passphrase')}
                   className='passphrase'

src/components/login/login.test.js

@@ -94,9 +94,27 @@ describe('Login', () => {
       expect(props.history.replace).to.have.been.calledWith('/main/transactions');
     });
 
+    it('hides network options by default', () => {
+      wrapper = shallow(<Login {...props}/>, options);
+      props.history.replace.reset();
+      wrapper.setProps({ history });
+      expect(wrapper.find('.network')).to.have.length(0);
+    });
+
+    it('shows network options when url param showNetwork is true', () => {
+      wrapper = shallow(<Login {...props}/>, options);
+      props.history.replace.reset();
+      history.location.search = '?showNetwork=true';
+      wrapper.setProps({ history });
+      expect(wrapper.find('.network')).to.have.length(1);
+    });
+
     it('calls localStorage.setItem(\'address\', address) if this.state.address', () => {
       const spyFn = spy(localStorage, 'setItem');
       wrapper = mount(<Router><Login {...props}/></Router>, options);
+      // enable the network dropdown
+      history.location.search = '?showNetwork=true';
+      wrapper.setProps({ history });
       // set the network dropdown
       wrapper.find('div.network').simulate('click');
       // select custom node

test/e2e/step_definitions/login.step.js

@@ -3,7 +3,7 @@ const { defineSupportCode } = require('cucumber');
 
 defineSupportCode(({ Given }) => {
   Given('I\'m on login page', (callback) => {
-    browser.get(browser.params.baseURL).then(callback);
+    browser.get(`${browser.params.baseURL}#/?showNetwork=true`).then(callback);
   });
 });