seed trim icon fix

react/src/components/addcoin/addcoin.js

@@ -400,7 +400,6 @@ class AddCoin extends React.Component {
   }
 }
 
-
 const mapStateToProps = (state) => {
   return {
     Main: state.Main,

react/src/components/addcoin/coin-selectors.render.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { translate } from '../../translate/translate';
 import addCoinOptionsCrypto from '../addcoin/addcoinOptionsCrypto';
 import addCoinOptionsAC from '../addcoin/addcoinOptionsAC';
-import addCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
+// import addCoinOptionsACFiat from '../addcoin/addcoinOptionsACFiat';
 import mainWindow from '../../util/mainWindow';
 import Select from 'react-select';
 
@@ -23,7 +23,7 @@ const CoinSelectorsRender = function(item, coin, i) {
             onChange={ (event) => this.updateSelectedCoin(event, i) }
             optionRenderer={ this.renderCoinOption }
             valueRenderer={ this.renderCoinOption }
-            options={ addCoinOptionsCrypto().concat(addCoinOptionsAC()).concat(addCoinOptionsACFiat()) } />
+            options={ addCoinOptionsCrypto().concat(addCoinOptionsAC()) } />
         </div>
         <div className={ this.hasMoreThanOneCoin() && (item.mode === '-1' || item.mode === -1) ? 'col-sm-6' : 'hide' }>
           <div className="toggle-box padding-bottom-10">

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

@@ -91,7 +91,8 @@ class ImportKeyModal extends React.Component {
       });
     } else {
       this.setState({
-        [e.target.name === 'wifkeysPassphraseTextarea' ? 'wifkeysPassphrase' : e.target.name]: e.target.value,
+        trimPassphraseTimer: _trimPassphraseTimer,
+        [e.target.name === 'wifkeysPassphraseTextarea' ? 'wifkeysPassphrase' : e.target.name]: newValue,
       });
     }
   }

react/src/components/dashboard/notaryElectionsModal/notaryElectionsModal.js

@@ -17,7 +17,9 @@ import { secondsToString } from '../../../util/time';
 import { isPositiveNumber } from '../../../util/number';
 import mainWindow from '../../../util/mainWindow';
 import Spinner from '../spinner/spinner';
+import ReactTooltip from 'react-tooltip';
 
+const SEED_TRIM_TIMEOUT = 5000;
 const ELECTIONS_SYNC_UPDATE_INTERVAL = 120000; // every 2 min
 
 class NotaryElectionsModal extends React.Component {
@@ -25,6 +27,7 @@ class NotaryElectionsModal extends React.Component {
     super(props);
     this.state = {
       loginPassphrase: '',
+      seedExtraSpaces: false,
       seedInputVisibility: false,
       userType: 'voter',
       region: null,
@@ -362,10 +365,17 @@ class NotaryElectionsModal extends React.Component {
     clearTimeout(this.state.trimPassphraseTimer);
 
     const _trimPassphraseTimer = setTimeout(() => {
-      this.setState({
-        loginPassphrase: newValue ? newValue.trim() : '', // hardcoded field name
-      });
-    }, 2000);
+      if (newValue[0] === ' ' ||
+          newValue[newValue.length - 1] === ' ') {
+        this.setState({
+          seedExtraSpaces: true,
+        });
+      } else {
+        this.setState({
+          seedExtraSpaces: false,
+        });
+      }
+    }, SEED_TRIM_TIMEOUT);
 
     this.resizeLoginTextarea();
 
@@ -560,6 +570,17 @@ class NotaryElectionsModal extends React.Component {
                         <i
                           className={ 'seed-toggle fa fa-eye' + (!this.state.seedInputVisibility ? '-slash' : '') }
                           onClick={ this.toggleSeedInputVisibility }></i>
+                        { this.state.seedExtraSpaces &&
+                          this.state.userType === 'voter' &&
+                          <span>
+                            <i className="icon fa-warning seed-extra-spaces-warning"
+                              data-tip="Your seed contains leading/trailing space characters"
+                              data-html={ true }></i>
+                            <ReactTooltip
+                              effect="solid"
+                              className="text-left" />
+                          </span>
+                        }
                         <button
                           onClick={ this.loginSeed }
                           disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }

react/src/components/dashboard/notaryElectionsModal/notaryElectionsModal.scss

@@ -1,6 +1,14 @@
 .notary-elections-modal {
   color: #757575 !important;
 
+  .seed-extra-spaces-warning {
+    position: absolute;
+    right: 16px;
+    margin-top: 0;
+    font-size: 20px;
+    color: rgb(255, 75, 0);
+  }
+
   label,
   input {
     color: #757575 !important;

react/src/components/dashboard/settings/settings.bip39KeysPanel.js

@@ -81,7 +81,8 @@ class Bip39KeysPanel extends React.Component {
       });
     } else {
       this.setState({
-        [e.target.name === 'passphraseTextarea' ? 'passphrase' : e.target.name]: e.target.value,
+        trimPassphraseTimer: _trimPassphraseTimer,
+        [e.target.name === 'passphraseTextarea' ? 'passphrase' : e.target.name]: newValue,
       });
     }
   }

react/src/components/dashboard/settings/settings.exportKeysPanel.js

@@ -139,7 +139,8 @@ class ExportKeysPanel extends React.Component {
       });
     } else {
       this.setState({
-        [e.target.name === 'wifkeysPassphraseTextarea' ? 'wifkeysPassphrase' : e.target.name]: e.target.value,
+        trimPassphraseTimer: _trimPassphraseTimer,
+        [e.target.name === 'wifkeysPassphraseTextarea' ? 'wifkeysPassphrase' : e.target.name]: newValue,
       });
     }
   }

react/src/components/login/login.js

@@ -312,7 +312,7 @@ class Login extends React.Component {
     this.resizeLoginTextarea();
 
     this.setState({
-      // trimPassphraseTimer: _trimPassphraseTimer,
+      trimPassphraseTimer: _trimPassphraseTimer,
       [e.target.name === 'loginPassphraseTextarea' ? 'loginPassphrase' : e.target.name]: newValue,
       loginPassPhraseSeedType: this.getLoginPassPhraseSeedType(newValue),
     });

react/src/components/login/login.scss

@@ -190,7 +190,7 @@ option.login-option {
   .seed-extra-spaces-warning {
     position: absolute;
     right: -30px;
-    margin-top: 54px;
+    margin-top: 40px;
     font-size: 20px;
     color: rgb(255, 75, 0);
   }