diff --git a/js/src/modals/CreateAccount/AccountDetails/accountDetails.js b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
index 14c858c06..6323350f8 100644
--- a/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
+++ b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
@@ -15,8 +15,13 @@
// along with Parity. If not, see .
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() }
);
}
@@ -62,4 +68,24 @@ export default class AccountDetails extends Component {
value={ phrase } />
);
}
+
+ renderPhraseCopyButton () {
+ const { phrase } = this.props;
+ if (!phrase) {
+ return null;
+ }
+
+ return (
+ }
+ label={ 'print recovery phrase' }
+ onClick={ this.printPhrase }
+ />
+ );
+ }
+
+ printPhrase = () => {
+ const { phrase, name } = this.props;
+ print(recoveryPage({ phrase, name }));
+ }
}
diff --git a/js/src/modals/CreateAccount/AccountDetails/print.js b/js/src/modals/CreateAccount/AccountDetails/print.js
new file mode 100644
index 000000000..00a402d9d
--- /dev/null
+++ b/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 .
+
+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);
+};