import key modal wif visibility toggle

react/src/components/dashboard/importKeyModal/importKeyModal.js

@@ -42,12 +42,13 @@ class ImportKeyModal extends React.Component {
       keyImportResult: null,
       importWithRescan: false,
       seedInputVisibility: false,
-      toggleSeedInputVisibility: false,
+      wifInputVisibility: false,
       trimPassphraseTimer: null,
     };
     this.generateKeysFromPassphrase = this.generateKeysFromPassphrase.bind(this);
     this.toggleImportWithRescan = this.toggleImportWithRescan.bind(this);
     this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
+    this.toggleWifInputVisibility = this.toggleWifInputVisibility.bind(this);
     this._copyCoinAddress = this._copyCoinAddress.bind(this);
     this.showPassphraseAddress = this.showPassphraseAddress.bind(this);
     this.importWifAddress = this.importWifAddress.bind(this);
@@ -102,6 +103,12 @@ class ImportKeyModal extends React.Component {
     });
   }
 
+  toggleWifInputVisibility() {
+    this.setState({
+      wifInputVisibility: !this.state.wifInputVisibility,
+    });
+  }
+
   showPassphraseAddress() {
     const _address = this.generateKeysFromPassphrase();
 
@@ -189,6 +196,7 @@ class ImportKeyModal extends React.Component {
     });
 
     this.setState({
+      wif: null,
       passphraseWif: null,
       passphraseAddress: null,
       wifkeysPassphrase: null,
@@ -197,6 +205,7 @@ class ImportKeyModal extends React.Component {
     });
 
     // reset input vals
+    this.refs.wif.value = '';
     this.refs.wifkeysPassphrase.value = '';
     this.refs.wifkeysPassphraseTextarea.value = '';
   }

react/src/components/dashboard/importKeyModal/importKeyModal.render.js

@@ -116,13 +116,20 @@ export const ImportKeyModalRender = function() {
                   <label
                     htmlFor="wif"
                     className="bold">{ translate('IMPORT_KEY.WIF_KEY') }</label>
-                  <input
+                  <div className="form-group form-material">
-                    type="text"
+                    <input
-                    className="form-control"
+                      autoComplete="off"
-                    name="wif"
+                      type={ !this.state.wifInputVisibility ? 'password' : 'text' }
-                    ref="wif"
+                      className="form-control"
-                    onChange={ this.updateInput }
+                      name="wif"
-                    value={ this.state.wif } />
+                      id="wif"
+                      ref="wif"
+                      onChange={ this.updateInput }
+                      value={ this.state.wif } />
+                    <i
+                      className={ 'seed-toggle fa fa-eye' + (!this.state.wifInputVisibility ? '-slash' : '') }
+                      onClick={ this.toggleWifInputVisibility }></i>
+                  </div>
                 </div>
                 <button
                   type="button"