Bring in Confirm/Download and wire up initial local state

This commit is contained in:
Daniel Ternyak 2017-04-26 22:16:01 -05:00
parent 9450971bd6
commit 6f6826c88c
1 changed files with 79 additions and 32 deletions

View File

@ -1,8 +1,8 @@
import React, {Component} from "react";
import PropTypes from "prop-types";
import React, {Component} from"react";
import PropTypes from"prop-types";
import {Field, reduxForm} from "redux-form";
import GenerateWalletPasswordInputComponent from "./GenerateWalletPasswordInputComponent";
import {Field, reduxForm} from"redux-form";
import GenerateWalletPasswordInputComponent from"./GenerateWalletPasswordInputComponent";
// VALIDATORS
@ -16,6 +16,9 @@ const required = value => value ? undefined : 'Required'
class GenerateWalletPasswordComponent extends Component {
constructor(props) {
super(props)
this.state = {
hasDownloaded: false
}
}
static propTypes = {
@ -30,6 +33,17 @@ class GenerateWalletPasswordComponent extends Component {
generateWalletFile: PropTypes.bool
};
continueToPaper() {
}
downloaded() {
let nextState = this.state
nextState.hasDownloaded = true
this.setState(nextState)
}
render() {
const {
// handleSubmit,
@ -48,7 +62,10 @@ class GenerateWalletPasswordComponent extends Component {
<section className="container" style={{minHeight: '50%'}}>
<div className="tab-content">
<main className="tab-pane active text-center" role="main">
<section className="row">
<br/>
{
!generateWalletFile && (<section className="row">
<h1 aria-live="polite">Generate Wallet</h1>
<div className="col-sm-8 col-sm-offset-2">
<h4>Enter a strong password (at least 9 characters)</h4>
@ -65,17 +82,47 @@ class GenerateWalletPasswordComponent extends Component {
className="btn btn-primary btn-block">
Generate Wallet
</button>
</div>
</section>)
}
{
generateWalletFile && (
<div>
<section role="main" className="row">
<h1>Save your Wallet File. Don't forget your password.</h1>
<br/>
<p style={{color: 'red'}}> Now you need to confirm that you copied your
seed!</p>
</div>)
}
<div className="col-sm-8 col-sm-offset-2">
<div aria-hidden="true" className="account-help-icon"><img
src="https://myetherwallet.com/images/icon-help.svg" className="help-icon"/>
<p className="account-help-text">This Keystore file matches the
format used by Mist so you can easily import it in the future. It is the
recommended file to download and back up.</p>
<h4>Keystore File (UTC / JSON)</h4>
</div>
<a role="button" className="btn btn-primary btn-block"
href="blob:https://myetherwallet.com/2455ae32-916f-4224-a806-414bbe680168"
download="UTC--2017-04-26T23-07-03.538Z--c5b7fff4e1669e38e8d6bc8fffe7e562b2b70f43"
aria-label="Download Keystore File (UTC / JSON · Recommended · Encrypted)"
aria-describedby="x_KeystoreDesc"
onClick={() => this.downloaded()}>Download</a>
<p className="sr-only" id="x_KeystoreDesc">This Keystore file matches
the format used by Mist so you can easily import it in the future. It is the
recommended file to download and back up.</p>
<br/><br/><br/><br/>
</div>
<div className="col-xs-12 alert alert-danger">
<span>
MyEtherWallet.com is not a web wallet &amp; does not store or transmit this secret information at any time. <br/>
<strong>If you do not save your wallet file and password, we cannot recover them.</strong><br/>
Save your wallet file now &amp; back it up in a second location (not on your computer).
<br/><br/>
<a role="button" className={`btn btn-info ${this.state.hasDownloaded ? '': 'disabled'}`}
onClick={() => this.continueToPaper()}> I understand. Continue. </a>
</span>
</div>
</section>
)
}
</main>
</div>
</section>