grassrootseconomics/openethereum
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #3694 from ethcore/jr-print-recovery-phrase

Browse Source 
button to print recovery phrase
This commit is contained in:
Gav Wood 2016-12-01 01:11:01 +00:00 committed by GitHub
commit 6420ea4429
5 changed files with 147 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/package.json
View File

@ -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
js/src/modals/CreateAccount/AccountDetails/accountDetails.js
View File

@ -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
js/src/modals/CreateAccount/AccountDetails/print.js Normal file
View File

@ -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
js/src/modals/CreateAccount/AccountDetails/recovery-page.ejs Normal file
View File

@ -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
js/webpack/app.js
View File

@ -64,6 +64,10 @@ module.exports = {
test: /\.json$/,
use: [ 'json-loader' ]
},
{
test: /\.ejs$/,
use: [ 'ejs-loader' ]
},
{
test: /\.html$/,
use: [