add recovery page print button

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

@@ -15,8 +15,13 @@
 // 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 print from './print';
+import recoveryPage from './recovery-page.ejs';
 
 export default class AccountDetails extends Component {
   static propTypes = {
@@ -42,6 +47,7 @@ export default class AccountDetails extends Component {
           label='address'
           value={ address } />
         { this.renderPhrase() }
+        { this.renderPhraseCopyButton() }
       </Form>
     );
   }
@@ -62,4 +68,24 @@ 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 { phrase, name } = this.props;
+    print(recoveryPage({ phrase, name }));
+  }
 }

js/src/modals/CreateAccount/AccountDetails/print.js

@@ -0,0 +1,61 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export const onPrint = (window, cb) => {
+  let called = false; let query, queryFn;
+
+  const onPrint = () => {
+    if (queryFn) {
+      query.removeListener(queryFn);
+    }
+    window.removeEventListener('afterprint', onPrint, false);
+    if (!called) {
+      called = true;
+      cb();
+    }
+  };
+
+  if (window.matchMedia) {
+    queryFn = (query) => {
+      if (!query.matches) {
+        onPrint();
+      }
+    };
+    query = window.matchMedia('print');
+    query.addListener(queryFn);
+  }
+  window.addEventListener('afterprint', onPrint, false);
+};
+
+export default (html) => {
+  const iframe = document.createElement('iframe');
+  iframe.setAttribute('sandbox', 'allow-modals allow-same-origin allow-scripts');
+  iframe.setAttribute('src', '/');
+  iframe.setAttribute('style', 'display: none');
+  document.body.appendChild(iframe);
+  const teardown = () => {
+    // Safari crashes without a timeout.
+    setTimeout(() => document.body.removeChild(iframe), 0);
+  };
+
+  setTimeout(() => {
+    iframe.contentDocument.write(html);
+
+    onPrint(iframe.contentWindow, teardown);
+    iframe.contentWindow.focus();
+    iframe.contentWindow.print();
+  }, 0);
+};