Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

Commit

Permalink
Merge pull request #3694 from ethcore/jr-print-recovery-phrase
Browse files Browse the repository at this point in the history
button to print recovery phrase
gavofyork authored Dec 1, 2016

Verified

This commit was signed with the committer’s verified signature.
MindTooth Birger Johan Nordølum
2 parents 9053e2f + e43457a commit 6420ea4
Showing 5 changed files with 147 additions and 0 deletions.
1 change: 1 addition & 0 deletions js/package.json
Original file line number Diff line number Diff line change
@@ -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",
30 changes: 30 additions & 0 deletions js/src/modals/CreateAccount/AccountDetails/accountDetails.js
Original file line number Diff line number Diff line change
@@ -15,8 +15,15 @@
// 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 = {
@@ -42,6 +49,7 @@ export default class AccountDetails extends Component {
label='address'
value={ address } />
{ this.renderPhrase() }
{ this.renderPhraseCopyButton() }
</Form>
);
}
@@ -62,4 +70,26 @@ 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 }));
}
}
63 changes: 63 additions & 0 deletions js/src/modals/CreateAccount/AccountDetails/print.js
Original file line number Diff line number Diff line change
@@ -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 <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);

setTimeout(() => {
onPrint(iframe.contentWindow, teardown);
iframe.contentWindow.focus();
iframe.contentWindow.print();
}, 20);
}, 0);
};
49 changes: 49 additions & 0 deletions js/src/modals/CreateAccount/AccountDetails/recovery-page.ejs
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>

<html lang="en">
<head>
<title>Recovery phrase for <%= name %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
margin: 2em auto;
max-width: 30em;
padding: 1em;
text-align: center;
font-size: 110%;
font-family: sans-serif;
font-weight: 300;
}
#logo {
max-width: 4rem;
margin-bottom: 3rem;
}
p {
margin-bottom: 1rem;
}
figure {
margin-bottom: 1rem;
}
figure.address img {
border-radius: 100%;
}
pre code {
display: inline-block;
text-align: center;
white-space: normal;
line-height: 1.3;
}
</style>
</head>
<body>
<img id="logo" src="<%= logo %>" alt="Parity Logo" />
<p>This is your account <em><%= name %></em>:</p>
<figure class="address">
<img src="<%= identity %>" alt="symbol for the address of the account" />
<figcaption><code><%= address %></code></figcaption>
</figure>
<p>This is the recovery phrase:</p>
<pre><code><%= phrase %></code></pre>
</body>
</html>
4 changes: 4 additions & 0 deletions js/webpack/app.js
Original file line number Diff line number Diff line change
@@ -64,6 +64,10 @@ module.exports = {
test: /\.json$/,
use: [ 'json-loader' ]
},
{
test: /\.ejs$/,
use: [ 'ejs-loader' ]
},
{
test: /\.html$/,
use: [

0 comments on commit 6420ea4

Please sign in to comment.