diff --git a/js/package.json b/js/package.json
index c6fab4119..67fd98976 100644
--- a/js/package.json
+++ b/js/package.json
@@ -72,6 +72,7 @@
"core-js": "~2.4.1",
"coveralls": "~2.11.11",
"css-loader": "~0.26.0",
+ "ejs-loader": "~0.3.0",
"enzyme": "2.3.0",
"eslint": "~3.10.2",
"eslint-config-semistandard": "~7.0.0",
diff --git a/js/src/modals/CreateAccount/AccountDetails/accountDetails.js b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
index 14c858c06..945bcc975 100644
--- a/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
+++ b/js/src/modals/CreateAccount/AccountDetails/accountDetails.js
@@ -15,8 +15,15 @@
// 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 { 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 = {
@@ -42,6 +49,7 @@ export default class AccountDetails extends Component {
label='address'
value={ address } />
{ this.renderPhrase() }
+ { this.renderPhraseCopyButton() }
);
}
@@ -62,4 +70,26 @@ 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 { address, phrase, name } = this.props;
+ const identity = createIdentityImg(address);
+
+ print(recoveryPage({ phrase, name, identity, address, logo: ParityLogo }));
+ }
}
diff --git a/js/src/modals/CreateAccount/AccountDetails/print.js b/js/src/modals/CreateAccount/AccountDetails/print.js
new file mode 100644
index 000000000..18cddeee9
--- /dev/null
+++ b/js/src/modals/CreateAccount/AccountDetails/print.js
@@ -0,0 +1,63 @@
+// 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);
+
+ setTimeout(() => {
+ onPrint(iframe.contentWindow, teardown);
+ iframe.contentWindow.focus();
+ iframe.contentWindow.print();
+ }, 20);
+ }, 0);
+};
diff --git a/js/src/modals/CreateAccount/AccountDetails/recovery-page.ejs b/js/src/modals/CreateAccount/AccountDetails/recovery-page.ejs
new file mode 100644
index 000000000..bcd1a8b42
--- /dev/null
+++ b/js/src/modals/CreateAccount/AccountDetails/recovery-page.ejs
@@ -0,0 +1,49 @@
+
+
+
+
+ Recovery phrase for <%= name %>
+
+
+
+
+
+
+ This is your account <%= name %>:
+
+ This is the recovery phrase:
+ <%= phrase %>
+
+
diff --git a/js/webpack/app.js b/js/webpack/app.js
index 320410b2e..aff9b8aac 100644
--- a/js/webpack/app.js
+++ b/js/webpack/app.js
@@ -64,6 +64,10 @@ module.exports = {
test: /\.json$/,
use: [ 'json-loader' ]
},
+ {
+ test: /\.ejs$/,
+ use: [ 'ejs-loader' ]
+ },
{
test: /\.html$/,
use: [