Refactor

i18n/locales/en/common.json

@@ -228,6 +228,7 @@
   "encrypt message": "encrypt message",
   "my votes": "my votes",
   "set second passphrase": "set second passphrase",
+  "start here": "start here",
   "your second passphrase will be required for all transactions sent from this account": "your second passphrase will be required for all transactions sent from this account",
   "{{count}} delegate names were successfully resolved for unvoting.": "{{count}} delegate name successfully resolved to remove vote from.",
   "{{count}} delegate names were successfully resolved for unvoting._plural": "{{count}} delegate names were successfully resolved for unvoting.",

src/components/passphraseInput/index.js

@@ -3,7 +3,6 @@ import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
 import { FontIcon } from '../fontIcon';
 import Input from '../toolbox/inputs/input';
-import PassphrasePartial from './../passphrasePartial';
 import { inDictionary } from '../../utils/similarWord';
 import { isValidPassphrase } from '../../utils/passphrase';
 import styles from './passphraseInput.css';
@@ -28,7 +27,7 @@ class PassphraseInput extends React.Component {
     this.setState({ focus: null });
   }
 
-  handleValueChange(value, index) {
+  handleValueChange(index, value) {
     let insertedValue = value;
     const insertedValueAsArray = insertedValue.split(' ');
     let passphrase = this.props.value.split(' ');
@@ -84,39 +83,6 @@ class PassphraseInput extends React.Component {
     this.setState({ inputType: this.state.inputType === 'password' ? 'text' : 'password' });
   }
 
-  renderFields() {
-    const propsColumns = this.props.columns;
-    const xs = `col-xs-${propsColumns && propsColumns.xs ? propsColumns.xs : '6'}`;
-    const sm = `col-sm-${propsColumns && propsColumns.sm ? propsColumns.sm : '2'}`;
-    const md = `col-md-${propsColumns && propsColumns.md ? propsColumns.md : '2'}`;
-
-    const value = this.props.value.split(' ');
-    const indents = [];
-
-    for (let i = 0; i < 12; i++) {
-      indents.push(
-        <div className={`${grid[xs]} ${grid[sm]} ${grid[md]}`} key={i}>
-          <PassphrasePartial
-            shouldfocus={this.state.focus === i ? 1 : 0}
-            onFocus={this.handleFocus.bind(this, i)}
-            onBlur={this.handleBlur.bind(this)}
-            type={this.state.inputType}
-            theme={this.props.theme}
-            value={value}
-            partialValue={value[i]}
-            onChange={this.handleValueChange.bind(this)}
-            index={i}
-            className={this.props.className}
-            error={this.state.partialPassphraseError[i]}
-            keyAction={this.keyAction.bind(this)}
-          />
-        </div>);
-    }
-
-    return indents;
-  }
-
-
   keyAction({ event, value, index }) {
     if (event.which === keyCodes.space || event.which === keyCodes.arrowRight) {
       event.preventDefault();
@@ -135,17 +101,42 @@ class PassphraseInput extends React.Component {
 
   focusAndPaste(value) {
     this.setFocused();
-    this.handleValueChange(value, 0);
+    this.handleValueChange(0, value);
   }
 
   render() {
+    const propsColumns = this.props.columns;
+    const xs = `col-xs-${propsColumns && propsColumns.xs ? propsColumns.xs : '6'}`;
+    const sm = `col-sm-${propsColumns && propsColumns.sm ? propsColumns.sm : '2'}`;
+    const md = `col-md-${propsColumns && propsColumns.md ? propsColumns.md : '2'}`;
+
+    const value = this.props.value.split(' ');
     return (
       <div className={styles.wrapper} onClick={this.setFocused.bind(this)}>
         {this.state.isFocused
           ?
           <div>
             <div className={grid.row}>
-              {this.renderFields()}
+              {[...Array(12)].map((x, i) =>
+                <div className={`${grid[xs]} ${grid[sm]} ${grid[md]}`} key={i}>
+                  <Input
+                    shouldfocus={this.state.focus === i ? 1 : 0}
+                    placeholder={this.props.index === 0 ? this.props.t('start here') : ''}
+                    className={`${this.props.className} ${styles.partial} ${this.state.partialPassphraseError[i] ? styles.error : ''}`}
+                    value={value[i]}
+                    type={this.state.inputType}
+                    theme={this.props.theme}
+                    onFocus={this.handleFocus.bind(this, i)}
+                    onBlur={this.handleBlur.bind(this)}
+                    onChange={(val) => {
+                      this.handleValueChange(i, val);
+                    }}
+                    onKeyDown={(event) => {
+                      this.keyAction({ event, value: value[i], index: i });
+                    }}
+                  />
+                </div>,
+              )}
             </div>
             <div className={styles.errorMessage}>{this.props.error}</div>
             <div
@@ -166,4 +157,6 @@ class PassphraseInput extends React.Component {
   }
 }
 
+export { PassphraseInput };
+// eslint-disable-next-line import/no-named-as-default
 export default translate()(PassphraseInput);

src/components/passphraseInput/index.test.js

@@ -2,25 +2,41 @@ import React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import { mount } from 'enzyme';
+import PropTypes from 'prop-types';
 
 import accounts from '../../../test/constants/accounts';
 import i18n from '../../i18n';
-import PassphraseInput from './index';
+import { PassphraseInput } from './index';
 
 describe('PassphraseInput', () => {
   let wrapper;
   let props;
   let onChangeSpy;
+  const keyCodes = {
+    arrowRight: 39,
+    arrowLeft: 37,
+    space: 32,
+    delete: 8,
+  };
 
   beforeEach('', () => {
     props = {
       error: '',
       value: '',
       onChange: () => {},
       i18n,
+      t: key => key,
     };
     onChangeSpy = spy(props, 'onChange');
-    wrapper = mount(<PassphraseInput {...props} />);
+
+    const options = {
+      context: { i18n },
+      childContextTypes: {
+        i18n: PropTypes.object.isRequired,
+      },
+    };
+
+    wrapper = mount(<PassphraseInput {...props} />, options);
   });
 
   afterEach('', () => {
@@ -53,6 +69,7 @@ describe('PassphraseInput', () => {
     expect(wrapper.props().onChange).to.not.have.been.calledWith(passphrase, errorMessage);
     passphrase = 'wagonn stock borrow episode laundry kitten salute link globe zero feed marble';
     wrapper.find('input').first().simulate('change', { target: { value: passphrase } });
+    expect(wrapper.state('partialPassphraseError')[0]).to.equal(true);
     expect(wrapper.props().onChange).to.have.been.calledWith(passphrase, errorMessage);
   });
 

src/components/passphraseInput/passphraseInput.css

@@ -46,3 +46,11 @@
   font-weight: 600;
   padding-top: 10px;
 }
+
+.error input {
+  color: var(--color-error) !important;
+}
+
+.partial input {
+  text-align: center;
+}

test/e2e/support/util.js

@@ -10,11 +10,12 @@ const EC = protractor.ExpectedConditions;
 const waitTime = 5000;
 const emptyFn = () => {};
 
-function waitForElem(selector) {
+function waitForElem(selector, time = waitTime) {
+  console.log(time);
   return new Promise((resolve, reject) => {
     const elem = element(by.css(selector));
     const stepName = `waiting for element '${selector}'`;
-    browser.wait(EC.presenceOf(elem), waitTime, stepName)
+    browser.wait(EC.presenceOf(elem), time, stepName)
       .then(() => resolve(elem))
       .catch(reject);
   });