Merge pull request #3697 from ethcore/jr-move-recovery-print

move recovery phrase print button

js/src/modals/CreateAccount/AccountDetails/accountDetails.js

@@ -15,15 +15,8 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import PrintIcon from 'material-ui/svg-icons/action/print';
 
 import { Form, Input, InputAddress } from '../../../ui';
-import Button from '../../../ui/Button';
-
-import { createIdentityImg } from '../../../api/util/identity';
-import print from './print';
-import recoveryPage from './recovery-page.ejs';
-import ParityLogo from '../../../../assets/images/parity-logo-black-no-text.svg';
 
 export default class AccountDetails extends Component {
   static propTypes = {
@@ -49,7 +42,6 @@ export default class AccountDetails extends Component {
           label='address'
           value={ address } />
         { this.renderPhrase() }
-        { this.renderPhraseCopyButton() }
       </Form>
     );
   }
@@ -70,26 +62,4 @@ export default class AccountDetails extends Component {
         value={ phrase } />
     );
   }
-
-  renderPhraseCopyButton () {
-    const { phrase } = this.props;
-    if (!phrase) {
-      return null;
-    }
-
-    return (
-      <Button
-        icon={ <PrintIcon /> }
-        label={ 'print recovery phrase' }
-        onClick={ this.printPhrase }
-      />
-    );
-  }
-
-  printPhrase = () => {
-    const { address, phrase, name } = this.props;
-    const identity = createIdentityImg(address);
-
-    print(recoveryPage({ phrase, name, identity, address, logo: ParityLogo }));
-  }
 }

js/src/modals/CreateAccount/createAccount.js

@@ -20,6 +20,7 @@ import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
 import ContentClear from 'material-ui/svg-icons/content/clear';
 import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
+import PrintIcon from 'material-ui/svg-icons/action/print';
 
 import { Button, Modal } from '../../ui';
 
@@ -32,6 +33,11 @@ import NewImport from './NewImport';
 import RawKey from './RawKey';
 import RecoveryPhrase from './RecoveryPhrase';
 
+import { createIdentityImg } from '../../api/util/identity';
+import print from './print';
+import recoveryPage from './recovery-page.ejs';
+import ParityLogo from '../../../assets/images/parity-logo-black-no-text.svg';
+
 const TITLES = {
   type: 'creation type',
   create: 'create account',
@@ -179,12 +185,18 @@ export default class CreateAccount extends Component {
         ];
 
       case 2:
-        return (
+        return [
+          createType === 'fromNew' || createType === 'fromPhrase' ? (
+            <Button
+              icon={ <PrintIcon /> }
+              label='Print Phrase'
+              onClick={ this.printPhrase } />
+          ) : null,
           <Button
             icon={ <ActionDoneAll /> }
             label='Close'
             onClick={ this.onClose } />
-        );
+        ];
     }
   }
 
@@ -377,4 +389,11 @@ export default class CreateAccount extends Component {
 
     store.dispatch({ type: 'newError', error });
   }
+
+  printPhrase = () => {
+    const { address, phrase, name } = this.state;
+    const identity = createIdentityImg(address);
+
+    print(recoveryPage({ phrase, name, identity, address, logo: ParityLogo }));
+  }
 }

js/src/modals/FirstRun/firstRun.js

@@ -18,6 +18,7 @@ import React, { Component, PropTypes } from 'react';
 import ActionDone from 'material-ui/svg-icons/action/done';
 import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
+import PrintIcon from 'material-ui/svg-icons/action/print';
 
 import { Button, Modal } from '../../ui';
 
@@ -27,6 +28,11 @@ import Completed from './Completed';
 import TnC from './TnC';
 import Welcome from './Welcome';
 
+import { createIdentityImg } from '../../api/util/identity';
+import print from '../CreateAccount/print';
+import recoveryPage from '../CreateAccount/recovery-page.ejs';
+import ParityLogo from '../../../assets/images/parity-logo-black-no-text.svg';
+
 const STAGE_NAMES = ['welcome', 'terms', 'new account', 'recovery', 'completed'];
 
 export default class FirstRun extends Component {
@@ -107,7 +113,6 @@ export default class FirstRun extends Component {
 
     switch (stage) {
       case 0:
-      case 3:
         return (
           <Button
             icon={ <NavigationArrowForward /> }
@@ -133,6 +138,20 @@ export default class FirstRun extends Component {
             onClick={ this.onCreate } />
         );
 
+      case 3:
+        return [
+          <Button
+            icon={ <PrintIcon /> }
+            label='Print Phrase'
+            onClick={ this.printPhrase }
+          />,
+          <Button
+            icon={ <NavigationArrowForward /> }
+            label='Next'
+            onClick={ this.onNext }
+          />
+        ];
+
       case 4:
         return (
           <Button
@@ -205,4 +224,11 @@ export default class FirstRun extends Component {
 
     store.dispatch({ type: 'newError', error });
   }
+
+  printPhrase = () => {
+    const { address, phrase, name } = this.state;
+    const identity = createIdentityImg(address);
+
+    print(recoveryPage({ phrase, name, identity, address, logo: ParityLogo }));
+  }
 }