[beta] Backport #5645 (Recover button) (#5654)

* Backport #5645 * Update property
2017-05-18 12:44:40 +02:00 · 2017-05-18 12:44:40 +02:00 · 4b857bf4b0
commit 4b857bf4b0
parent 0a5c6a9ac7
9 changed files with 296 additions and 155 deletions
--- a/js/src/modals/CreateAccount/CreationType/creationType.js
+++ b/js/src/modals/CreateAccount/CreationType/creationType.js
@ -39,21 +39,6 @@ const TYPES = [
    ),
    key: 'fromNew'
  },
-  {
-    description: (
-      <FormattedMessage
-        id='createAccount.creationType.fromPhrase.description'
-        defaultMessage='Recover using a previously stored recovery phrase and new password'
-      />
-    ),
-    label: (
-      <FormattedMessage
-        id='createAccount.creationType.fromPhrase.label'
-        defaultMessage='Recovery phrase'
-      />
-    ),
-    key: 'fromPhrase'
-  },
  {
    description: (
      <FormattedMessage
--- a/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
+++ b/js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js
@ -19,7 +19,7 @@ import React, { Component, PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Checkbox } from 'material-ui';

-import { Form, Input } from '~/ui';
+import { Form, Input, Warning } from '~/ui';
 import PasswordStrength from '~/ui/Form/PasswordStrength';

 import ChangeVault from '../ChangeVault';
@ -33,121 +33,189 @@ export default class RecoveryPhrase extends Component {
  }

  render () {
-    const { isWindowsPhrase, name, nameError, password, passwordRepeat, passwordRepeatError, passwordHint, phrase } = this.props.store;
+    const { isWindowsPhrase, name, nameError, passPhraseError, password, passwordRepeat, passwordRepeatError, passwordHint, phrase } = this.props.store;

    return (
-      <Form>
-        <Input
-          autoFocus
-          hint={
-            <FormattedMessage
-              id='createAccount.recoveryPhrase.phrase.hint'
-              defaultMessage='the account recovery phrase'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='createAccount.recoveryPhrase.phrase.label'
-              defaultMessage='account recovery phrase'
-            />
-          }
-          onChange={ this.onEditPhrase }
-          value={ phrase }
-        />
-        <Input
-          error={ nameError }
-          hint={
-            <FormattedMessage
-              id='createAccount.recoveryPhrase.name.hint'
-              defaultMessage='a descriptive name for the account'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='createAccount.recoveryPhrase.name.label'
-              defaultMessage='account name'
-            />
-          }
-          onChange={ this.onEditName }
-          value={ name }
-        />
-        <Input
-          hint={
-            <FormattedMessage
-              id='createAccount.recoveryPhrase.hint.hint'
-              defaultMessage='(optional) a hint to help with remembering the password'
-            />
-          }
-          label={
-            <FormattedMessage
-              id='createAccount.recoveryPhrase.hint.label'
-              defaultMessage='password hint'
-            />
-          }
-          onChange={ this.onEditPasswordHint }
-          value={ passwordHint }
-        />
-        <div className={ styles.passwords }>
-          <div className={ styles.password }>
-            <Input
-              hint={
+      <div className={ styles.details }>
+        { this.renderWarning() }
+        <Form>
+          <Input
+            autoFocus
+            error={
+              passPhraseError
+              ? (
                <FormattedMessage
-                  id='createAccount.recoveryPhrase.password.hint'
-                  defaultMessage='a strong, unique password'
+                  id='createAccount.recoveryPhrase.passPhrase.error'
+                  defaultMessage='enter a recovery phrase'
                />
-              }
-              label={
-                <FormattedMessage
-                  id='createAccount.recoveryPhrase.password.label'
-                  defaultMessage='password'
-                />
-              }
-              onChange={ this.onEditPassword }
-              type='password'
-              value={ password }
-            />
+              )
+              : null
+            }
+            hint={
+              <FormattedMessage
+                id='createAccount.recoveryPhrase.phrase.hint'
+                defaultMessage='the account recovery phrase'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='createAccount.recoveryPhrase.phrase.label'
+                defaultMessage='account recovery phrase'
+              />
+            }
+            onChange={ this.onEditPhrase }
+            value={ phrase }
+          />
+          <Input
+            error={ nameError }
+            hint={
+              <FormattedMessage
+                id='createAccount.recoveryPhrase.name.hint'
+                defaultMessage='a descriptive name for the account'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='createAccount.recoveryPhrase.name.label'
+                defaultMessage='account name'
+              />
+            }
+            onChange={ this.onEditName }
+            value={ name }
+          />
+          <Input
+            hint={
+              <FormattedMessage
+                id='createAccount.recoveryPhrase.hint.hint'
+                defaultMessage='(optional) a hint to help with remembering the password'
+              />
+            }
+            label={
+              <FormattedMessage
+                id='createAccount.recoveryPhrase.hint.label'
+                defaultMessage='password hint'
+              />
+            }
+            onChange={ this.onEditPasswordHint }
+            value={ passwordHint }
+          />
+          <div className={ styles.passwords }>
+            <div className={ styles.password }>
+              <Input
+                hint={
+                  <FormattedMessage
+                    id='createAccount.recoveryPhrase.password.hint'
+                    defaultMessage='a strong, unique password'
+                  />
+                }
+                label={
+                  <FormattedMessage
+                    id='createAccount.recoveryPhrase.password.label'
+                    defaultMessage='password'
+                  />
+                }
+                onChange={ this.onEditPassword }
+                type='password'
+                value={ password }
+              />
+            </div>
+            <div className={ styles.password }>
+              <Input
+                error={ passwordRepeatError }
+                hint={
+                  <FormattedMessage
+                    id='createAccount.recoveryPhrase.password2.hint'
+                    defaultMessage='verify your password'
+                  />
+                }
+                label={
+                  <FormattedMessage
+                    id='createAccount.recoveryPhrase.password2.label'
+                    defaultMessage='password (repeat)'
+                  />
+                }
+                onChange={ this.onEditPasswordRepeat }
+                type='password'
+                value={ passwordRepeat }
+              />
+            </div>
          </div>
-          <div className={ styles.password }>
-            <Input
-              error={ passwordRepeatError }
-              hint={
-                <FormattedMessage
-                  id='createAccount.recoveryPhrase.password2.hint'
-                  defaultMessage='verify your password'
-                />
-              }
-              label={
-                <FormattedMessage
-                  id='createAccount.recoveryPhrase.password2.label'
-                  defaultMessage='password (repeat)'
-                />
-              }
-              onChange={ this.onEditPasswordRepeat }
-              type='password'
-              value={ passwordRepeat }
-            />
-          </div>
-        </div>
-        <PasswordStrength input={ password } />
-        <ChangeVault
-          store={ this.props.store }
-          vaultStore={ this.props.vaultStore }
-        />
-        <Checkbox
-          checked={ isWindowsPhrase }
-          className={ styles.checkbox }
-          label={
-            <FormattedMessage
-              id='createAccount.recoveryPhrase.windowsKey.label'
-              defaultMessage='Key was created with Parity <1.4.5 on Windows'
-            />
-          }
-          onCheck={ this.onToggleWindowsPhrase }
-        />
-      </Form>
+          <PasswordStrength input={ password } />
+          <ChangeVault
+            store={ this.props.store }
+            vaultStore={ this.props.vaultStore }
+          />
+          <Checkbox
+            checked={ isWindowsPhrase }
+            className={ styles.checkbox }
+            label={
+              <FormattedMessage
+                id='createAccount.recoveryPhrase.windowsKey.label'
+                defaultMessage='Key was created with Parity <1.4.5 on Windows'
+              />
+            }
+            onCheck={ this.onToggleWindowsPhrase }
+          />
+        </Form>
+      </div>
    );
  }

+  renderWarning () {
+    const { isTest, phrase } = this.props.store;
+
+    if (!isTest && phrase.length === 0) {
+      return (
+        <Warning
+          warning={
+            <FormattedMessage
+              id='createAccount.recoveryPhrase.warning.emptyPhrase'
+              defaultMessage={ `The recovery phrase is empty.
+                This account can be recovered by anyone.
+              ` }
+            />
+          }
+        />
+      );
+    }
+
+    if (phrase.length === 0) {
+      return (
+        <Warning
+          warning={
+            <FormattedMessage
+              id='createAccount.recoveryPhrase.warning.testnetEmptyPhrase'
+              defaultMessage={ `The recovery phrase is empty.
+                This account can be recovered by anyone.
+                Proceed with caution.
+              ` }
+            />
+          }
+        />
+      );
+    }
+
+    const words = phrase.split(' ');
+
+    if (words.length < 11) {
+      return (
+        <Warning
+          warning={
+            <FormattedMessage
+              id='createAccount.recoveryPhrase.warning.shortPhrase'
+              defaultMessage={ `The recovery phrase is less than 11 words.
+                This account has not been generated by Parity and might be insecure.
+                Proceed with caution.
+              ` }
+            />
+          }
+        />
+      );
+    }
+
+    return null;
+  }
+
  onToggleWindowsPhrase = (event) => {
    const { store } = this.props;

--- a/js/src/modals/CreateAccount/createAccount.js
+++ b/js/src/modals/CreateAccount/createAccount.js
@ -62,37 +62,63 @@ const TITLES = {
  ),
  import: (
    <FormattedMessage
-      id='createAccount.title.importWallet'
-      defaultMessage='import wallet'
+      id='createAccount.title.importAccount'
+      defaultMessage='import account'
+    />
+  ),
+  restore: (
+    <FormattedMessage
+      id='createAccount.title.restoreAccount'
+      defaultMessage='restore account'
    />
  )
 };
 const STAGE_NAMES = [TITLES.type, TITLES.create, TITLES.info];
 const STAGE_IMPORT = [TITLES.type, TITLES.import, TITLES.info];
+const STAGE_RESTORE = [TITLES.restore, TITLES.info];

@observer
 class CreateAccount extends Component {
  static contextTypes = {
    api: PropTypes.object.isRequired
-  }
+  };

  static propTypes = {
    accounts: PropTypes.object.isRequired,
+    isTest: PropTypes.bool.isRequired,
    newError: PropTypes.func.isRequired,
    onClose: PropTypes.func,
-    onUpdate: PropTypes.func
-  }
+    onUpdate: PropTypes.func,
+    restore: PropTypes.bool
+  };

-  store = new Store(this.context.api, this.props.accounts);
+  static defaultProps = {
+    restore: false
+  };
+
+  store = new Store(this.context.api, this.props.accounts, this.props.isTest);
  vaultStore = VaultStore.get(this.context.api);

  componentWillMount () {
+    if (this.props.restore) {
+      this.store.setCreateType('fromPhrase');
+      this.store.nextStage();
+    }
+
    return this.vaultStore.loadVaults();
  }

  render () {
    const { isBusy, createType, stage } = this.store;

+    let steps = STAGE_IMPORT;
+
+    if (createType === 'fromNew') {
+      steps = STAGE_NAMES;
+    } else if (createType === 'fromPhrase') {
+      steps = STAGE_RESTORE;
+    }
+
    return (
      <Portal
        buttons={ this.renderDialogActions() }
@ -100,11 +126,7 @@ class CreateAccount extends Component {
        activeStep={ stage }
        onClose={ this.onClose }
        open
-        steps={
-          createType === 'fromNew'
-            ? STAGE_NAMES
-            : STAGE_IMPORT
-        }
+        steps={ steps }
      >
        <ModalBox icon={ <TypeIcon store={ this.store } /> }>
          { this.renderPage() }
@ -179,6 +201,7 @@ class CreateAccount extends Component {

  renderDialogActions () {
    const { createType, canCreate, isBusy, stage } = this.store;
+    const { restore } = this.props;

    const cancelBtn = (
      <Button
@ -194,6 +217,22 @@ class CreateAccount extends Component {
      />
    );

+    const backBtn = restore
+      ? null
+      : (
+        <Button
+          icon={ <PrevIcon /> }
+          key='back'
+          label={
+            <FormattedMessage
+              id='createAccount.button.back'
+              defaultMessage='Back'
+            />
+          }
+          onClick={ this.store.prevStage }
+        />
+      );
+
    switch (stage) {
      case STAGE_SELECT_TYPE:
        return [
@ -214,17 +253,7 @@ class CreateAccount extends Component {
      case STAGE_CREATE:
        return [
          cancelBtn,
-          <Button
-            icon={ <PrevIcon /> }
-            key='back'
-            label={
-              <FormattedMessage
-                id='createAccount.button.back'
-                defaultMessage='Back'
-              />
-            }
-            onClick={ this.store.prevStage }
-          />,
+          backBtn,
          <Button
            disabled={ !canCreate || isBusy }
            icon={ <CheckIcon /> }
@ -314,6 +343,12 @@ class CreateAccount extends Component {
  }
 }

+function mapStateToProps (state) {
+  const { isTest } = state.nodeStatus;
+
+  return { isTest };
+}
+
 function mapDispatchToProps (dispatch) {
  return bindActionCreators({
    newError
@ -321,6 +356,6 @@ function mapDispatchToProps (dispatch) {
 }

 export default connect(
-  null,
+  mapStateToProps,
  mapDispatchToProps
 )(CreateAccount);
--- a/js/src/modals/CreateAccount/createAccount.test.js
+++ b/js/src/modals/CreateAccount/createAccount.test.js
@ -54,7 +54,11 @@ function createRedux () {
    dispatch: sinon.stub(),
    subscribe: sinon.stub(),
    getState: () => {
-      return {};
+      return {
+        nodeStatus: {
+          isTest: true
+        }
+      };
    }
  };
 }
--- a/js/src/modals/CreateAccount/store.js
+++ b/js/src/modals/CreateAccount/store.js
@ -49,9 +49,10 @@ export default class Store {
  @observable walletFileError = ERRORS.noFile;
  @observable walletJson = '';

-  constructor (api, accounts, loadGeth = true) {
+  constructor (api, accounts, isTest, loadGeth = true) {
    this._api = api;
    this.accounts = Object.assign({}, accounts);
+    this.isTest = isTest;

    if (loadGeth) {
      this.loadAvailableGethAccounts();
@ -71,7 +72,7 @@ export default class Store {
        return !(this.nameError || this.passwordRepeatError);

      case 'fromPhrase':
-        return !(this.nameError || this.passwordRepeatError);
+        return !(this.nameError || this.passwordRepeatError || this.passPhraseError);

      case 'fromRaw':
        return !(this.nameError || this.passwordRepeatError || this.rawKeyError);
@ -81,6 +82,14 @@ export default class Store {
    }
  }

+  @computed get passPhraseError () {
+    return !this.isTest && this.phrase.length === 0;
+  }
+
+  @computed get hasAddress () {
+    return !!(this.address);
+  }
+
  @computed get passwordRepeatError () {
    return this.password === this.passwordRepeat
      ? null
--- a/js/src/modals/CreateAccount/store.spec.js
+++ b/js/src/modals/CreateAccount/store.spec.js
@ -37,7 +37,7 @@ function createStore (loadGeth) {
  createVaultStore();

  api = createApi();
-  store = new Store(api, ACCOUNTS, loadGeth);
+  store = new Store(api, ACCOUNTS, true, loadGeth);

  return store;
 }
--- a/js/src/modals/FirstRun/firstRun.js
+++ b/js/src/modals/FirstRun/firstRun.js
@ -77,7 +77,7 @@ class FirstRun extends Component {
    visible: PropTypes.bool.isRequired
  }

-  createStore = new CreateStore(this.context.api, {}, false);
+  createStore = new CreateStore(this.context.api, {}, true, false);

  state = {
    stage: 0,
--- a/js/src/ui/Icons/index.js
+++ b/js/src/ui/Icons/index.js
@ -54,6 +54,7 @@ export PrintIcon from 'material-ui/svg-icons/action/print';
 export RefreshIcon from 'material-ui/svg-icons/action/autorenew';
 export ReorderIcon from 'material-ui/svg-icons/action/reorder';
 export ReplayIcon from 'material-ui/svg-icons/av/replay';
+export RestoreIcon from 'material-ui/svg-icons/action/restore';
 export SaveIcon from 'material-ui/svg-icons/content/save';
 export SendIcon from 'material-ui/svg-icons/content/send';
 export SettingsIcon from 'material-ui/svg-icons/action/settings';
--- a/js/src/views/Accounts/accounts.js
+++ b/js/src/views/Accounts/accounts.js
@ -53,6 +53,8 @@ class Accounts extends Component {
    addressBook: false,
    newDialog: false,
    newWalletDialog: false,
+    newExportDialog: false,
+    restoreDialog: false,
    sortOrder: '',
    searchValues: [],
    searchTokens: [],
@ -96,6 +98,7 @@ class Accounts extends Component {
    return (
      <div>
        { this.renderNewDialog() }
+        { this.renderRestoreDialog() }
        { this.renderNewWalletDialog() }
        { this.renderActionbar() }

@ -287,6 +290,17 @@ class Accounts extends Component {
        }
        onClick={ this.onNewWalletClick }
      />,
+      <Button
+        key='restoreAccount'
+        icon={ <AddIcon /> }
+        label={
+          <FormattedMessage
+            id='accounts.button.restoreAccount'
+            defaultMessage='restore'
+          />
+        }
+        onClick={ this.onRestoreAccountClick }
+      />,
      <ActionbarExport
        key='exportAccounts'
        content={ accounts }
@ -333,7 +347,23 @@ class Accounts extends Component {
      <CreateAccount
        accounts={ accounts }
        onClose={ this.onNewAccountClose }
-        onUpdate={ this.onNewAccountUpdate }
+      />
+    );
+  }
+
+  renderRestoreDialog () {
+    const { accounts } = this.props;
+    const { restoreDialog } = this.state;
+
+    if (!restoreDialog) {
+      return null;
+    }
+
+    return (
+      <CreateAccount
+        accounts={ accounts }
+        onClose={ this.onRestoreAccountClose }
+        restore
      />
    );
  }
@ -367,6 +397,12 @@ class Accounts extends Component {
    });
  }

+  onRestoreAccountClick = () => {
+    this.setState({
+      restoreDialog: true
+    });
+  }
+
  onNewWalletClick = () => {
    this.setState({
      newWalletDialog: true
@ -379,15 +415,18 @@ class Accounts extends Component {
    });
  }

+  onRestoreAccountClose = () => {
+    this.setState({
+      restoreDialog: false
+    });
+  }
+
  onNewWalletClose = () => {
    this.setState({
      newWalletDialog: false
    });
  }

-  onNewAccountUpdate = () => {
-  }
-
  onHardwareChange = () => {
    const { accountsInfo } = this.props;
    const { wallets } = this.hwstore;