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

* Backport #5645

* Update property

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

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,12 +33,24 @@ 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 (
+      <div className={ styles.details }>
+        { this.renderWarning() }
         <Form>
           <Input
             autoFocus
+            error={
+              passPhraseError
+              ? (
+                <FormattedMessage
+                  id='createAccount.recoveryPhrase.passPhrase.error'
+                  defaultMessage='enter a recovery phrase'
+                />
+              )
+              : null
+            }
             hint={
               <FormattedMessage
                 id='createAccount.recoveryPhrase.phrase.hint'
@@ -145,9 +157,65 @@ export default class RecoveryPhrase extends Component {
             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;
 

js/src/modals/CreateAccount/createAccount.js

@@ -62,37 +62,63 @@ const TITLES = {
   ),
   import: (
     <FormattedMessage
-      id='createAccount.title.importWallet'
+      id='createAccount.title.importAccount'
-      defaultMessage='import wallet'
+      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={
+        steps={ steps }
-          createType === 'fromNew'
-            ? STAGE_NAMES
-            : STAGE_IMPORT
-        }
       >
         <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
+          backBtn,
-            icon={ <PrevIcon /> }
-            key='back'
-            label={
-              <FormattedMessage
-                id='createAccount.button.back'
-                defaultMessage='Back'
-              />
-            }
-            onClick={ this.store.prevStage }
-          />,
           <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);

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
+        }
+      };
     }
   };
 }

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

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

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,

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

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;