lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Wallet login - add seed type selection; check if entered seed fits the selected seed type

all-modes
petitPapillon 8 years ago
parent
54f96c795b
commit
fd84260ef2
4 changed files with 151 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      react/src/components/login/login.js
  2. 69
      react/src/components/login/login.render.js
  3. 7
      react/src/translate/en.js
  4. 9
      react/src/util/crypto/passphrasegenerator.js

41
react/src/components/login/login.js
View File

@ -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 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: '',
@ -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({
@ -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);
}

69
react/src/components/login/login.render.js
View File

@ -51,6 +51,53 @@ const LoginRender = function () {
<div className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
<h4 className="color-white">{translate('INDEX.WELCOME_LOGIN')}</h4>
<div className="login-form">
<div>
<h4 className="hint color-white">
{ translate('INDEX.SELECT_SEED_TYPE') }:
</h4>
<div className="form-group form-material floating">
<div className="radio-custom radio-default radio-inline">
<input
id="loginPassPhraseOptionsIguana"
type="radio"
name="loginPassPhraseOptions"
value="256"
checked={ this.state.loginPassPhraseBitsOption === 256 }
onChange={ (e) => this.onLoginPassPhraseBitsOptionChange(e.target.value) }
/>
<label htmlFor="loginPassPhraseOptionsIguana">
{ translate('LOGIN.IGUANA_SEED') }
</label>
</div>
<div className="radio-custom radio-default radio-inline">
<input
id="loginPassPhraseOptionsWaves"
type="radio"
name="loginPassPhraseOptions"
value="160"
checked={ this.state.loginPassPhraseBitsOption === 160 }
onChange={ (e) => this.onLoginPassPhraseBitsOptionChange(e.target.value) }
/>
<label htmlFor="loginPassPhraseOptionsWaves">
{ translate('LOGIN.WAVES_SEED') }
</label>
</div>
<div className="radio-custom radio-default radio-inline">
<input
id="loginPassPhraseOptionsNXT"
type="radio"
name="loginPassPhraseOptions"
value="128"
checked={ this.state.loginPassPhraseBitsOption === 128 }
onChange={ (e) => this.onLoginPassPhraseBitsOptionChange(e.target.value) }
/>
<label htmlFor="loginPassPhraseOptionsNXT">
{ translate('LOGIN.NXT_SEED') }
</label>
</div>
</div>
</div>
</div>
<div className="form-group form-material floating">
<input
type={ this.state.seedInputVisibility ? 'text' : 'password' }
@ -69,7 +116,8 @@ const LoginRender = function () {
type="button"
className="btn btn-primary btn-block"
onClick={ this.loginSeed }
disabled={ !this.state.loginPassphrase || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
disabled={ !this.state.loginPassphrase
|| !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
<div className="form-group form-material floating">
<button
className="btn btn-lg btn-flat btn-block waves-effect"
@ -87,7 +135,6 @@ const LoginRender = function () {
</button>
</div>
</div>
</div>
<div className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }>
<h4 className="color-white">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4>
@ -137,8 +184,10 @@ const LoginRender = function () {
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 256 ? true : false }/>
<label htmlFor="PassPhraseOptionsIguana">Iguana (256 bits)</label>
checked={ this.state.bitsOption === 256 }/>
<label htmlFor="PassPhraseOptionsIguana">
{ translate('LOGIN.IGUANA_SEED') }
</label>
</div>
<div
className="radio-custom radio-default radio-inline"
@ -146,8 +195,10 @@ const LoginRender = function () {
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 160 ? true : false }/>
<label htmlFor="PassPhraseOptionsWaves">Waves</label>
checked={ this.state.bitsOption === 160 }/>
<label htmlFor="PassPhraseOptionsWaves">
{ translate('LOGIN.WAVES_SEED') }
</label>
</div>
<div
className="radio-custom radio-default radio-inline"
@ -155,8 +206,10 @@ const LoginRender = function () {
<input
type="radio"
name="PassPhraseOptions"
checked={ this.state.bitsOption === 128 ? true : false }/>
<label htmlFor="PassPhraseOptionsNXT">NXT</label>
checked={ this.state.bitsOption === 128 }/>
<label htmlFor="PassPhraseOptionsNXT">
{ translate('LOGIN.NXT_SEED') }
</label>
</div>
</div>
</div>

7
react/src/translate/en.js
View File

@ -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',

9
react/src/util/crypto/passphrasegenerator.js
View File

@ -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;

Write Preview
Loading…
Cancel
Save