diff --git a/react/src/components/login/login.js b/react/src/components/login/login.js index cd631ab..5542cb8 100644 --- a/react/src/components/login/login.js +++ b/react/src/components/login/login.js @@ -1,21 +1,20 @@ import React from 'react'; -import { translate } from '../../translate/translate'; import { toggleAddcoinModal, iguanaWalletPassphrase, iguanaActiveHandle, startInterval, - stopInterval, getDexCoins, toggleSyncOnlyModal, getSyncOnlyForks, - createNewWallet + createNewWallet, + triggerToaster } from '../../actions/actionCreators'; import Store from '../../store'; -import { PassPhraseGenerator } from '../../util/crypto/passphrasegenerator'; - +import {PassPhraseGenerator} from '../../util/crypto/passphrasegenerator'; import SwallModalRender from './swall-modal.render'; import LoginRender from './login.render'; +import {translate} from '../../translate/translate'; const IGUNA_ACTIVE_HANDLE_TIMEOUT = 3000; const IGUNA_ACTIVE_COINS_TIMEOUT = 10000; @@ -28,6 +27,7 @@ class Login extends React.Component { activeLoginSection: 'activateCoin', loginPassphrase: null, seedInputVisibility: false, + loginPassPhraseBitsOption: 256, bitsOption: 256, randomSeed: PassPhraseGenerator.generatePassPhrase(256), randomSeedConfirm: '', @@ -107,16 +107,16 @@ class Login extends React.Component { componentWillReceiveProps(props) { if (props && - props.Main && - props.Main.isLoggedIn) { + props.Main && + props.Main.isLoggedIn) { this.setState({ display: false, }); } if (props && - props.Main && - !props.Main.isLoggedIn) { + props.Main && + !props.Main.isLoggedIn) { this.setState({ display: true, }); @@ -133,8 +133,8 @@ class Login extends React.Component { if (this.state.activeLoginSection !== 'signup') { if (props && - props.Main && - props.Main.activeCoins) { + props.Main && + props.Main.activeCoins) { this.setState({ activeLoginSection: 'login', }); @@ -167,11 +167,41 @@ class Login extends React.Component { } loginSeed() { + if (!PassPhraseGenerator.isPassPhraseValid(this.state.loginPassphrase, + this.state.loginPassPhraseBitsOption)) { + Store.dispatch(triggerToaster( + `${translate('LOGIN.SEED_NOT_OF_TYPE')} ${this.selectedLoginSeedTypeLabel()}`, + translate('LOGIN.INVALID_SEED'), + 'error', + false + )); + return; + } Store.dispatch( iguanaWalletPassphrase(this.state.loginPassphrase) ); } + selectedLoginSeedTypeLabel() { + if (this.state.loginPassPhraseBitsOption === 256) { + return translate('LOGIN.IGUANA_SEED'); + } + + if (this.state.loginPassPhraseBitsOption === 160) { + return translate('LOGIN.WAVES_SEED'); + } + + if (this.state.loginPassPhraseBitsOption === 128) { + return translate('LOGIN.NXT_SEED'); + } + } + + onLoginPassPhraseBitsOptionChange(bitsOption) { + this.setState({ + loginPassPhraseBitsOption: +bitsOption + }); + } + updateActiveLoginSection(name) { // reset login/create form this.setState({ @@ -184,8 +214,8 @@ class Login extends React.Component { isSeedConfirmError: false, isSeedBlank: false, displaySeedBackupModal: false, - customWalletSeed: false - }); + customWalletSeed: false + }); } execWalletCreate() { @@ -245,8 +275,7 @@ class Login extends React.Component { } render() { - if ((this.state && this.state.display) || - !this.props.Main) { + if ((this.state && this.state.display) || !this.props.Main) { return LoginRender.call(this); } diff --git a/react/src/components/login/login.render.js b/react/src/components/login/login.render.js index f19596b..4e2474f 100644 --- a/react/src/components/login/login.render.js +++ b/react/src/components/login/login.render.js @@ -51,41 +51,88 @@ const LoginRender = function () {

{translate('INDEX.WELCOME_LOGIN')}

-
- this.handleKeydown(event) } /> - - +
+

+ { translate('INDEX.SELECT_SEED_TYPE') }: +

+
+
+ this.onLoginPassPhraseBitsOptionChange(e.target.value) } + /> + +
+
+ this.onLoginPassPhraseBitsOptionChange(e.target.value) } + /> + +
+
+ this.onLoginPassPhraseBitsOptionChange(e.target.value) } + /> + +
+
+
+
+ this.handleKeydown(event) }/> + + +
+ +
-
- - - -
+ className="btn btn-lg btn-flat btn-block waves-effect" + id="register-btn" + onClick={ () => this.updateActiveLoginSection('signup') }>{ translate('INDEX.CREATE_WALLET') } + +
@@ -137,8 +184,10 @@ const LoginRender = function () { - + checked={ this.state.bitsOption === 256 }/> +
- + checked={ this.state.bitsOption === 160 }/> +
- + checked={ this.state.bitsOption === 128 }/> +
diff --git a/react/src/translate/en.js b/react/src/translate/en.js index a5e3184..7551eef 100644 --- a/react/src/translate/en.js +++ b/react/src/translate/en.js @@ -403,7 +403,12 @@ export const _lang = { 'DISPLAY_SYNC_ONLY': 'Display sync only coins progress', 'ENTER_VALUE_AGAIN': 'Please enter the same value again', 'CUSTOM_WALLET_SEED': 'Custom wallet seed', - 'MUST_ENTER_SEED': 'You must enter a seed' + 'MUST_ENTER_SEED': 'You must enter a seed', + 'INVALID_SEED': 'Invalid Seed', + 'SEED_NOT_OF_TYPE': 'The inserted seed is not of type', + 'IGUANA_SEED': 'Iguana (256 bits)', + 'WAVES_SEED': 'Waves', + 'NXT_SEED': 'NXT' }, 'SIDEBAR': { 'EDEX_MOTTO': 'Most Secure, Easy and Native Decentralised Exchange', diff --git a/react/src/util/crypto/passphrasegenerator.js b/react/src/util/crypto/passphrasegenerator.js index 72e903f..f1d214a 100755 --- a/react/src/util/crypto/passphrasegenerator.js +++ b/react/src/util/crypto/passphrasegenerator.js @@ -80,6 +80,15 @@ export const PassPhraseGenerator = { return this.passPhrase; }, + // checks if it's possible that the pass phrase supplied as the first parameter + // was generated with the number of bits supplied as the second parameter + isPassPhraseValid: function (passPhrase, bits) { + // the required number of words based on the number of bits + // mirrors the generatePassPhrase function above + const wordsCount = bits / 32 * 3; + return passPhrase && passPhrase.split(" ").length === wordsCount; + }, + reset: function() { this.passPhrase = ""; this.seeds = 0;