Add Recover button to Accounts and warnings (#5645)

* Add Recover button to Accounts // Add Warnings

* Change to 11

* Add test net checks for empty recovery phrase

* Fix failing tests

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.createStore;
+    const { isWindowsPhrase, name, nameError, passPhraseError, password, passwordRepeat, passwordRepeatError, passwordHint, phrase } = this.props.createStore;
 
     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.createStore;
+
+    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 { createStore } = this.props;
 

js/src/modals/CreateAccount/createAccount.js

@@ -63,8 +63,14 @@ 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'
     />
   ),
   qr: (
@@ -76,25 +82,37 @@ const TITLES = {
 };
 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];
 const STAGE_QR = [TITLES.type, TITLES.qr, 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
+  };
 
-  createStore = new Store(this.context.api, this.props.accounts);
+  static defaultProps = {
+    restore: false
+  };
+
+  createStore = new Store(this.context.api, this.props.accounts, this.props.isTest);
   vaultStore = VaultStore.get(this.context.api);
 
   componentWillMount () {
+    if (this.props.restore) {
+      this.createStore.setCreateType('fromPhrase');
+      this.createStore.nextStage();
+    }
+
     return this.vaultStore.loadVaults();
   }
 
@@ -107,6 +125,8 @@ class CreateAccount extends Component {
       steps = STAGE_NAMES;
     } else if (createType === 'fromQr') {
       steps = STAGE_QR;
+    } else if (createType === 'fromPhrase') {
+      steps = STAGE_RESTORE;
     }
 
     return (
@@ -199,6 +219,7 @@ class CreateAccount extends Component {
   }
 
   renderDialogActions () {
+    const { restore } = this.props;
     const { createType, canCreate, isBusy, stage } = this.createStore;
 
     const cancelBtn = (
@@ -215,6 +236,22 @@ class CreateAccount extends Component {
       />
     );
 
+    const backBtn = restore
+      ? null
+      : (
+        <Button
+          icon={ <PrevIcon /> }
+          key='back'
+          label={
+            <FormattedMessage
+              id='createAccount.button.back'
+              defaultMessage='Back'
+            />
+          }
+          onClick={ this.createStore.prevStage }
+        />
+      );
+
     switch (stage) {
       case STAGE_SELECT_TYPE:
         return [
@@ -235,17 +272,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.createStore.prevStage }
-          />,
           <Button
             disabled={ !canCreate || isBusy }
             icon={ <CheckIcon /> }
@@ -335,6 +362,12 @@ class CreateAccount extends Component {
   }
 }
 
+function mapStateToProps (state) {
+  const { isTest } = state.nodeStatus;
+
+  return { isTest };
+}
+
 function mapDispatchToProps (dispatch) {
   return bindActionCreators({
     newError
@@ -342,6 +375,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

@@ -50,9 +50,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();
@@ -72,7 +73,7 @@ export default class Store {
         return !(this.nameError || this.passwordRepeatError) && this.hasAddress;
 
       case 'fromPhrase':
-        return !(this.nameError || this.passwordRepeatError);
+        return !(this.nameError || this.passwordRepeatError || this.passPhraseError);
 
       case 'fromQr':
         return this.qrAddressValid && !this.nameError;
@@ -85,6 +86,10 @@ export default class Store {
     }
   }
 
+  @computed get passPhraseError () {
+    return !this.isTest && this.phrase.length === 0;
+  }
+
   @computed get hasAddress () {
     return !!(this.address);
   }

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

@@ -56,6 +56,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 SearchIcon from 'material-ui/svg-icons/action/search';
 export SendIcon from 'material-ui/svg-icons/content/send';

js/src/views/Accounts/accounts.js

@@ -53,6 +53,7 @@ class Accounts extends Component {
     newDialog: false,
     newWalletDialog: false,
     newExportDialog: false,
+    restoreDialog: false,
     sortOrder: '',
     searchValues: [],
     searchTokens: [],
@@ -96,6 +97,7 @@ class Accounts extends Component {
     return (
       <div>
         { this.renderNewDialog() }
+        { this.renderRestoreDialog() }
         { this.renderNewWalletDialog() }
         { this.renderNewExportDialog() }
         { this.renderActionbar() }
@@ -284,6 +286,17 @@ class Accounts extends Component {
         }
         onClick={ this.onNewWalletClick }
       />,
+      <Button
+        key='restoreAccount'
+        icon={ <AddIcon /> }
+        label={
+          <FormattedMessage
+            id='accounts.button.restoreAccount'
+            defaultMessage='restore'
+          />
+        }
+        onClick={ this.onRestoreAccountClick }
+      />,
       <Button
         key='newExport'
         icon={ <FileDownloadIcon /> }
@@ -336,7 +349,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
       />
     );
   }
@@ -384,6 +413,12 @@ class Accounts extends Component {
     });
   }
 
+  onRestoreAccountClick = () => {
+    this.setState({
+      restoreDialog: true
+    });
+  }
+
   onNewWalletClick = () => {
     this.setState({
       newWalletDialog: true
@@ -402,6 +437,12 @@ class Accounts extends Component {
     });
   }
 
+  onRestoreAccountClose = () => {
+    this.setState({
+      restoreDialog: false
+    });
+  }
+
   onNewWalletClose = () => {
     this.setState({
       newWalletDialog: false
@@ -414,9 +455,6 @@ class Accounts extends Component {
     });
   }
 
-  onNewAccountUpdate = () => {
-  }
-
   onHardwareChange = () => {
     const { accountsInfo } = this.props;
     const { wallets } = this.hwstore;