Merge branch 'redux' into update-about-section

8 years ago · 0585a8aee1
8 changed files with 348 additions and 95 deletions
--- a/react/change.log
+++ b/react/change.log
@ -15,6 +15,9 @@ front:
 - added error message if coin is already running in another mode
 - added explicit "new address generated" message
 - added cli / rpc passphru
+- seed type check
+- seed extra space(s) check
+- custom seed option

 back:
 - added cli route
--- a/react/src/components/dashboard/settings/settings.render.js
+++ b/react/src/components/dashboard/settings/settings.render.js
@ -310,7 +310,7 @@ export const SettingsRender = function() {
                              id="wifkeysPassphrase"
                              onChange={ this.updateInput } />
                            <i
-                              className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
+                              className={ !this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
                              onClick={ this.toggleSeedInputVisibility }></i>
                            <label
                              className="floating-label"
--- a/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js
+++ b/react/src/components/dashboard/walletsNativeSyncProgress/walletsNativeSyncProgress.js
@ -48,6 +48,7 @@ class WalletsNativeSyncProgress extends React.Component {
  renderActivatingBestChainProgress() {
    if (this.props.Settings &&
        this.props.Settings.debugLog) {
+          console.log('debugLog');
      if (this.props.Settings.debugLog.indexOf('UpdateTip') > -1 &&
          !this.props.Dashboard.progress &&
          !this.props.Dashboard.progress.blocks) {
@ -80,7 +81,7 @@ class WalletsNativeSyncProgress extends React.Component {
        }
      } else if (
          this.props.Settings.debugLog.indexOf('Still rescanning') > -1 &&
-          !this.props.Dashboard.progress &&
+          !this.props.Dashboard.progress ||
          !this.props.Dashboard.progress.blocks
        ) {
        const temp = this.props.Settings.debugLog.split(' ');
--- a/react/src/components/login/login.js
+++ b/react/src/components/login/login.js
@ -1,21 +1,19 @@
 import React from 'react';
-import { translate } from '../../translate/translate';
 import {
  toggleAddcoinModal,
  iguanaWalletPassphrase,
  iguanaActiveHandle,
  startInterval,
-  stopInterval,
  getDexCoins,
  toggleSyncOnlyModal,
  getSyncOnlyForks,
  createNewWallet
 } 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,14 +26,19 @@ class Login extends React.Component {
      activeLoginSection: 'activateCoin',
      loginPassphrase: null,
      seedInputVisibility: false,
+      loginPassPhraseSeedType: null,
      bitsOption: 256,
      randomSeed: PassPhraseGenerator.generatePassPhrase(256),
      randomSeedConfirm: '',
      isSeedConfirmError: false,
+      isSeedBlank: false,
      displaySeedBackupModal: false,
+      customWalletSeed: false,
+      isCustomSeedWeak: false,
    };
    this.toggleActivateCoinForm = this.toggleActivateCoinForm.bind(this);
-    this.updateInput = this.updateInput.bind(this);
+    this.updateRegisterConfirmPassPhraseInput = this.updateRegisterConfirmPassPhraseInput.bind(this);
+    this.updateLoginPassPhraseInput = this.updateLoginPassPhraseInput.bind(this);
    this.loginSeed = this.loginSeed.bind(this);
    this.toggleSeedInputVisibility = this.toggleSeedInputVisibility.bind(this);
    this.handleRegisterWallet = this.handleRegisterWallet.bind(this);
@ -44,6 +47,31 @@ class Login extends React.Component {
    this.execWalletCreate = this.execWalletCreate.bind(this);
  }

+  isCustomWalletSeed() {
+    return this.state.customWalletSeed;
+  }
+
+  toggleCustomWalletSeed() {
+    this.setState({
+      customWalletSeed: !this.state.customWalletSeed
+    }, () => {
+      // if customWalletSeed is set to false, regenerate the seed
+      if (!this.state.customWalletSeed) {
+        this.setState({
+          randomSeed: PassPhraseGenerator.generatePassPhrase(this.state.bitsOption),
+          isSeedConfirmError: false,
+          isSeedBlank: false
+        });
+      } else {
+        // if customWalletSeed is set to true, reset to seed to an empty string
+        this.setState({
+          randomSeed: '',
+          randomSeedConfirm: ''
+        });
+      }
+    });
+  }
+
  openSyncOnlyModal() {
    Store.dispatch(getSyncOnlyForks());

@ -74,21 +102,22 @@ class Login extends React.Component {
    this.setState(Object.assign({}, this.state, {
      randomSeed: PassPhraseGenerator.generatePassPhrase(bits),
      bitsOption: bits,
+      isSeedBlank: false
    }));
  }

  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,
      });
@ -105,8 +134,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',
        });
@ -122,23 +151,84 @@ class Login extends React.Component {
    Store.dispatch(toggleAddcoinModal(true, false));
  }

-  updateInput(e) {
+  updateLoginPassPhraseInput(e) {
+    // remove any empty chars from the start/end of the string
+    const newValue = e.target.value ? e.target.value.trim() : null;
+
+    this.setState({
+      [e.target.name]: newValue,
+      loginPassPhraseSeedType: this.getLoginPassPhraseSeedType(newValue)
+  });
+  }
+
+  updateRegisterConfirmPassPhraseInput(e) {
    this.setState({
      [e.target.name]: e.target.value,
      isSeedConfirmError: false,
+      isSeedBlank: this.isBlank(e.target.value)
+    });
+  }
+
+  updateWalletSeed(e) {
+    this.setState({
+      randomSeed: e.target.value,
+      isSeedConfirmError: false,
+      isSeedBlank: this.isBlank(e.target.value)
    });
  }

  loginSeed() {
+    // reset the login pass phrase values so that when the user logs out, the values are clear
+    this.setState({
+      loginPassphrase: null,
+      loginPassPhraseSeedType: null,
+    });
+
    Store.dispatch(
      iguanaWalletPassphrase(this.state.loginPassphrase)
    );
  }

+  getLoginPassPhraseSeedType(passPhrase) {
+    if (!passPhrase) {
+      return null;
+    }
+
+    const passPhraseWords = passPhrase.split(" ");
+    if (!PassPhraseGenerator.arePassPhraseWordsValid(passPhraseWords))
+      return null;
+
+    if (PassPhraseGenerator.isPassPhraseValid(passPhraseWords, 256)) {
+      return translate('LOGIN.IGUANA_SEED');
+    }
+
+    if (PassPhraseGenerator.isPassPhraseValid(passPhraseWords, 160)) {
+      return translate('LOGIN.WAVES_SEED');
+    }
+
+    if (PassPhraseGenerator.isPassPhraseValid(passPhraseWords, 128)) {
+      return translate('LOGIN.NXT_SEED');
+    }
+
+    return null;
+  }
+
  updateActiveLoginSection(name) {
+    // reset login/create form
    this.setState({
      activeLoginSection: name,
-    });
+      loginPassphrase: null,
+      loginPassPhraseSeedType: null,
+      seedInputVisibility: false,
+      bitsOption: 256,
+      randomSeed: PassPhraseGenerator.generatePassPhrase(256),
+      randomSeedConfirm: '',
+      isSeedConfirmError: false,
+      isSeedBlank: false,
+      displaySeedBackupModal: false,
+      customWalletSeed: false,
+      isCustomSeedWeak: false,
+   });
  }

  execWalletCreate() {
@ -156,16 +246,36 @@ class Login extends React.Component {
    });
  }

+  // TODO: 
+  //    1) disable register btn if seed or seed conf is incorrect
+  //    2) display explicit custom seed validation message
  handleRegisterWallet() {
-    if (this.state.randomSeed === this.state.randomSeedConfirm) {
+    const enteredSeedsMatch = this.state.randomSeed === this.state.randomSeedConfirm;
+    const isSeedBlank = this.isBlank(this.state.randomSeed);
+
+    // if custom seed check for string strength
+    // at least 1 letter in upper case
+    // at least 1 digit
+    // at least one special char
+    // min length 10 chars
+
+    const _customSeed = this.state.customWalletSeed ? this.state.randomSeed.match('^(?=.*[A-Z])(?=.*[^<>{}\"/|;:.,~!?@#$%^=&*\\]\\\\()\\[_+]*$)(?=.*[0-9])(?=.*[a-z]).{10,99}$') : false;
+
+    this.setState({
+      isCustomSeedWeak: _customSeed === null ? true : false,
+      isSeedConfirmError: !enteredSeedsMatch ? true : false,
+      isSeedBlank: isSeedBlank ? true : false,
+    });
+    
+    if (enteredSeedsMatch && !isSeedBlank && _customSeed !== null) {
      this.toggleSeedBackupModal();
-    } else {
-      this.setState({
-        isSeedConfirmError: true,
-      });
    }
  }

+  isBlank(str) {
+    return (!str || /^\s*$/.test(str));
+  }
+
  handleKeydown(e) {
    if (e.key === 'Enter') {
      this.loginSeed();
@ -187,8 +297,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);
    }

--- a/react/src/components/login/login.render.js
+++ b/react/src/components/login/login.render.js
@ -6,7 +6,7 @@ const LoginRender = function () {
    <div>
      { this.renderSwallModal() }
      <div className="page animsition vertical-align text-center fade-in">
-        <div className="page-content vertical-align-middle">
+        <div className="page-content vertical-align-middle col-xs-12 col-sm-6 col-sm-offset-3">
          <div className="brand">
            <img
              className="brand-img"
@ -25,12 +25,16 @@ const LoginRender = function () {
          <div className={ this.state.activeLoginSection === 'ieWarning' ? 'show' : 'hide' }>
            <div className="panel">
              <div className="panel-heading">
-                <h3 className="panel-title">{ translate('INDEX.UNSUPPORTED_BROWSER') }</h3>
+                <h3 className="panel-title">
+                  { translate('INDEX.UNSUPPORTED_BROWSER') }
+                </h3>
              </div>
              <div className="alert alert-danger alert-dismissible">
                <button type="button">
                  <span>&times;</span>
-                  <span className="sr-only">{ translate('INDEX.CLOSE') }</span>
+                  <span className="sr-only">
+                    { translate('INDEX.CLOSE') }
+                  </span>
                </button>
                { translate('INDEX.IE_UNSUPPORTED') }
              </div>
@ -49,54 +53,69 @@ const LoginRender = function () {
          </div>

          <div className={ this.state.activeLoginSection === 'login' ? 'show' : 'hide' }>
-            <h4 className="color-white">{translate('INDEX.WELCOME_LOGIN')}</h4>
-            <div className="login-form">
-              <div className="form-group form-material floating">
-                <input
-                  type={ this.state.seedInputVisibility ? 'text' : 'password' }
-                  className="form-control"
-                  name="loginPassphrase"
-                  onChange={ this.updateInput }
-                  onKeyDown={ (event) => this.handleKeydown(event) } />
-                <i
-                  className={ this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
-                  onClick={ this.toggleSeedInputVisibility }></i>
-                <label
-                  className="floating-label"
-                  htmlFor="inputPassword">{ translate('INDEX.WALLET_SEED') }</label>
-              </div>
+            <h4 className="color-white">
+              {translate('INDEX.WELCOME_LOGIN')}
+            </h4>
+            <div className="form-group form-material floating col-sm-9 horizontal-padding-0">
+              <input
+                type={ this.state.seedInputVisibility ? 'text' : 'password' }
+                className="form-control"
+                name="loginPassphrase"
+                onChange={ this.updateLoginPassPhraseInput }
+                onKeyDown={ (event) => this.handleKeydown(event) }/>
+              <i
+                className={ !this.state.seedInputVisibility ? 'seed-toggle fa fa-eye-slash' : 'seed-toggle fa fa-eye' }
+                onClick={ this.toggleSeedInputVisibility }></i>
+              <label
+                className="floating-label"
+                htmlFor="inputPassword">{ translate('INDEX.WALLET_SEED') }</label>
+            </div>
+            <div className="form-group form-material floating col-sm-3 horizontal-padding-0 margin-top-20">
+              { this.state.loginPassPhraseSeedType
+                ?
+                  this.state.loginPassPhraseSeedType
+                :
+                <div className="placeholder-label">Seed Type</div>
+              }
+            </div>
+            <button
+              type="button"
+              className="btn btn-primary btn-block"
+              onClick={ this.loginSeed }
+              disabled={ !this.state.loginPassphrase
+              || !this.state.loginPassphrase.length }>{ translate('INDEX.SIGN_IN') }</button>
+            <div className="form-group form-material floating">
              <button
-                type="button"
-                className="btn btn-primary btn-block"
-                onClick={ this.loginSeed }
-                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"
-                  id="register-btn"
-                  onClick={ () => this.updateActiveLoginSection('signup') }>{ translate('INDEX.CREATE_WALLET') }</button>
-                <button
-                  className="btn btn-lg btn-flat btn-block waves-effect hide"
-                  id="logint-another-wallet">{ translate('INDEX.LOGIN_ANOTHER_WALLET') }</button>
-                <button
-                  className="btn btn-lg btn-flat btn-block waves-effect margin-top-20"
-                  id="register-btn"
-                  onClick={ this.toggleActivateCoinForm }
-                  disabled={ !this.props.Main }>
-                  <span className="ladda-label">{ translate('ADD_COIN.ADD_ANOTHER_COIN') }</span>
-                </button>
-              </div>
+                className="btn btn-lg btn-flat btn-block waves-effect"
+                id="register-btn"
+                onClick={ () => this.updateActiveLoginSection('signup') }>{ translate('INDEX.CREATE_WALLET') }</button>
+              <button
+                className="btn btn-lg btn-flat btn-block waves-effect hide"
+                id="logint-another-wallet">{ translate('INDEX.LOGIN_ANOTHER_WALLET') }</button>
+              <button
+                className="btn btn-lg btn-flat btn-block waves-effect margin-top-20"
+                id="register-btn"
+                onClick={ this.toggleActivateCoinForm }
+                disabled={ !this.props.Main }>
+                <span className="ladda-label">
+                  { translate('ADD_COIN.ADD_ANOTHER_COIN') }
+                </span>
+              </button>
            </div>
          </div>

          <div className={ this.state.activeLoginSection === 'activateCoin' ? 'show' : 'hide' }>
-            <h4 className="color-white">{ translate('INDEX.WELCOME_PLEASE_ADD') }</h4>
-            <div className="form-group form-material floating width-540 vertical-margin-30 horizontal-margin-0">
+            <h4 className="color-white">
+              { translate('INDEX.WELCOME_PLEASE_ADD') }
+            </h4>
+            <div className="form-group form-material floating width-540 vertical-margin-30 auto-side-margin">
              <button
                className="btn btn-lg btn-primary btn-block ladda-button"
                onClick={ this.toggleActivateCoinForm }
                disabled={ !this.props.Main }>
-                <span className="ladda-label">{ translate('INDEX.ACTIVATE_COIN') }</span>
+                <span className="ladda-label">
+                  { translate('INDEX.ACTIVATE_COIN') }
+                </span>
              </button>
            </div>
          </div>
@ -106,42 +125,86 @@ const LoginRender = function () {
              <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"
-                  onClick={ () => this.generateNewSeed(256) }>
-                  <input
-                    type="radio"
-                    name="PassPhraseOptions"
-                    checked={ this.state.bitsOption === 256 ? true : false } />
-                  <label htmlFor="PassPhraseOptionsIguana">Iguana (256 bits)</label>
+              <div className="row">
+                <div className="col-sm-5 horizontal-padding-0">
+                  <div className="toggle-box vertical-padding-20">
+                    <span className="pointer">
+                      <label className="switch">
+                        <input
+                          type="checkbox"
+                          checked={ this.isCustomWalletSeed() } />
+                        <div
+                          className="slider"
+                          onClick={ () => this.toggleCustomWalletSeed() }></div>
+                      </label>
+                      <div
+                        className="toggle-label white"
+                        onClick={ () => this.toggleCustomWalletSeed() }>
+                          { translate('LOGIN.CUSTOM_WALLET_SEED') }
+                      </div>
+                    </span>
+                  </div>
                </div>
-                <div
-                  className="radio-custom radio-default radio-inline"
-                  onClick={ () => this.generateNewSeed(160) }>
-                  <input
-                    type="radio"
-                    name="PassPhraseOptions"
-                    checked={ this.state.bitsOption === 160 ? true : false } />
-                  <label htmlFor="PassPhraseOptionsWaves">Waves</label>
-                </div>
-                <div
-                  className="radio-custom radio-default radio-inline"
-                  onClick={ () => this.generateNewSeed(128) }>
-                  <input
-                    type="radio"
-                    name="PassPhraseOptions"
-                    checked={ this.state.bitsOption === 128 ? true : false } />
-                  <label htmlFor="PassPhraseOptionsNXT">NXT</label>
+                <div className="col-sm-7 horizontal-padding-0">
+                { !this.isCustomWalletSeed() &&
+                  <div>
+                    <div className="form-group form-material floating">
+                      <div
+                        className="radio-custom radio-default radio-inline"
+                        onClick={ () => this.generateNewSeed(256) }>
+                        <input
+                          type="radio"
+                          name="PassPhraseOptions"
+                          checked={ this.state.bitsOption === 256 }/>
+                        <label htmlFor="PassPhraseOptionsIguana">
+                          { translate('LOGIN.IGUANA_SEED') }
+                        </label>
+                      </div>
+                      <div
+                        className="radio-custom radio-default radio-inline"
+                        onClick={ () => this.generateNewSeed(160) }>
+                        <input
+                          type="radio"
+                          name="PassPhraseOptions"
+                          checked={ this.state.bitsOption === 160 }/>
+                        <label htmlFor="PassPhraseOptionsWaves">
+                          { translate('LOGIN.WAVES_SEED') }
+                        </label>
+                      </div>
+                      <div
+                        className="radio-custom radio-default radio-inline"
+                        onClick={ () => this.generateNewSeed(128) }>
+                        <input
+                          type="radio"
+                          name="PassPhraseOptions"
+                          checked={ this.state.bitsOption === 128 }/>
+                        <label htmlFor="PassPhraseOptionsNXT">
+                          { translate('LOGIN.NXT_SEED') }
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+                }
                </div>
              </div>
-              <div className="form-group form-material floating">
+
+              <div className="form-group form-material floating seed-tooltip">
                <textarea
                  className="form-control placeholder-no-fix height-100"
                  type="text"
                  id="walletseed"
                  value={ this.state.randomSeed }
-                  readOnly="true"></textarea>
+                  onChange={ (e) => this.updateWalletSeed(e) }
+                  readOnly={ !this.isCustomWalletSeed() }
+                ></textarea>
+                <span className={ this.state.isCustomSeedWeak ? 'tooltiptext' : 'hide' }>
+                  <strong>Weak seed!</strong><br /><br />
+                  Your seed must contain:<br />
+                  - at least 1 upper case letter<br />
+                  - at least 1 digit<br />
+                  - at least 1 special character<br />
+                  - minimum 10 characters long
+                </span>
                <label
                  className="floating-label"
                  htmlFor="walletseed">{ translate('INDEX.WALLET_SEED') }</label>
@ -151,9 +214,15 @@ const LoginRender = function () {
                  className="form-control placeholder-no-fix height-100"
                  type="text"
                  name="randomSeedConfirm"
-                  onChange={ this.updateInput }
+                  value={ this.state.randomSeedConfirm }
+                  onChange={ this.updateRegisterConfirmPassPhraseInput }
                  id="rwalletseed"></textarea>
-                <span className={ this.state.isSeedConfirmError ? 'help-block' : 'hide' }>{ translate('LOGIN.ENTER_VALUE_AGAIN') }.</span>
+                <span className={ this.state.isSeedBlank ? 'help-block' : 'hide' }>
+                  { translate('LOGIN.MUST_ENTER_SEED') }.
+                </span>
+                <span className={ this.state.isSeedConfirmError ? 'help-block' : 'hide' }>
+                  { translate('LOGIN.ENTER_VALUE_AGAIN') }.
+                </span>
                <label
                  className="floating-label"
                  htmlFor="rwalletseed">{ translate('INDEX.CONFIRM_SEED') }</label>
--- a/react/src/components/login/login.scss
+++ b/react/src/components/login/login.scss
@ -32,6 +32,11 @@ button {
  padding-bottom: 20px;
 }

+.horizontal-padding-0 {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .browser-usage-container {
  color: #424242;
 }
@ -49,4 +54,39 @@ textarea {
  &.height-100 {
    height: 100px;
  }
+}
+
+.placeholder-label {
+  color: #808080;
+}
+
+.seed-tooltip {
+  .tooltiptext {
+    width: 230px;
+    padding: 10px 20px;
+    background-color: black;
+    color: #fff;
+    text-align: left;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 1;
+    top: -5px;
+    left: 105%;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 100%;
+      margin-top: -5px;
+      border-width: 5px;
+      border-style: solid;
+      border-color: transparent black transparent transparent;
+    }
+  }
+}
+
+.auto-side-margin {
+  margin-left: auto;
+  margin-right: auto;
 }
--- a/react/src/translate/en.js
+++ b/react/src/translate/en.js
@ -401,7 +401,14 @@ export const _lang = {
      'SIGN_IN': 'Sign In',
      'WELCOME': 'Welcome',
      'DISPLAY_SYNC_ONLY': 'Display sync only coins progress',
-      'ENTER_VALUE_AGAIN': 'Please enter the same value again'
+      'ENTER_VALUE_AGAIN': 'Please enter the same value again',
+      'CUSTOM_WALLET_SEED': 'Custom wallet 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',
--- a/react/src/util/crypto/passphrasegenerator.js
+++ b/react/src/util/crypto/passphrasegenerator.js
@ -80,6 +80,30 @@ export const PassPhraseGenerator = {
 		return this.passPhrase;
 	},

+  // checks if it's possible that the pass phrase words supplied as the first parameter
+  // were generated with the number of bits supplied as the second parameter
+  isPassPhraseValid: function (passPhraseWords, bits) {
+    // the required number of words based on the number of bits
+    // mirrors the generatePassPhrase function above
+    const wordsCount = bits / 32 * 3;
+    return passPhraseWords && passPhraseWords.length === wordsCount;
+  },
+
+  // checks if all pass phrase words are valid
+  // i.e. checks if all words are contained in ClientWordList
+  arePassPhraseWordsValid: function(passPhraseWords) {
+	  if (!passPhraseWords) {
+	    return false;
+    }
+
+    for (let word of passPhraseWords) {
+	    if (this.words.indexOf(word) === -1)
+	      return false;
+    }
+
+    return true;
+  },
+
 	reset: function() {
 		this.passPhrase = "";
 		this.seeds = 0;