Merge pull request #696 from LiskHQ/695-2nd-passphrase-clear-text

Make secondPassphraseInput type='password' - Closes #695

src/components/secondPassphraseInput/secondPassphraseInput.css

@@ -0,0 +1,18 @@
+.wrapper {
+  position: relative;
+}
+
+.checkbox {
+  visibility: hidden;
+  position: hidden;
+}
+
+.label {
+  position: absolute;
+  right: 0;
+  bottom: 50%;
+  transform: translateY(50%);
+  line-height: 24px;
+  height: 24px;
+  cursor: pointer;
+}

src/components/secondPassphraseInput/secondPassphraseInput.js

@@ -1,8 +1,15 @@
 import React from 'react';
+import FontIcon from 'react-toolbox/lib/font_icon';
 import Input from 'react-toolbox/lib/input';
 import { isValidPassphrase } from '../../utils/passphrase';
+import styles from './secondPassphraseInput.css';
 
 class SecondPassphraseInput extends React.Component {
+  constructor() {
+    super();
+    this.state = { inputType: 'password' };
+  }
+
   componentDidMount() {
     if (this.props.hasSecondPassphrase) {
       this.props.onChange('');
@@ -19,13 +26,30 @@ class SecondPassphraseInput extends React.Component {
     this.props.onChange(value, error);
   }
 
+  setInputType(event) {
+    this.setState({ inputType: event.target.checked ? 'text' : 'password' });
+  }
+
   render() {
     return (this.props.hasSecondPassphrase ?
-      <Input label='Second Passphrase' required={true}
-        className='second-passphrase'
-        error={this.props.error}
-        value={this.props.value}
-        onChange={this.handleValueChange.bind(this)} /> :
+      <div className={styles.wrapper}>
+        <Input
+          label='Second Passphrase'
+          required={true}
+          type={this.state.inputType}
+          className='second-passphrase'
+          error={this.props.error}
+          value={this.props.value}
+          onChange={this.handleValueChange.bind(this)} />
+        <label htmlFor='input-type' className={styles.label}>
+          <FontIcon value='remove_red_eye' />
+          <input
+            id='input-type'
+            className={styles.checkbox}
+            type={'checkbox'}
+            onChange={this.setInputType.bind(this)} />
+        </label>
+      </div> :
       null);
   }
 }