From 6f6826c88cb39be9be471fc256cce90fc045ceaa Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Wed, 26 Apr 2017 22:16:01 -0500
Subject: [PATCH] Bring in Confirm/Download and wire up initial local state

---
 .../GenerateWalletPasswordComponent.jsx       | 111 +++++++++++++-----
 1 file changed, 79 insertions(+), 32 deletions(-)

diff --git a/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx b/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx
index ceda9e76..5f03d38a 100644
--- a/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx
+++ b/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx
@@ -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,34 +62,67 @@ 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">
-                            <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>
-                                <Field
-                                    validate={[required, minLength9]}
-                                    component={GenerateWalletPasswordInputComponent}
-                                    showPassword={showPassword}
-                                    showGenerateWalletPasswordAction={showGenerateWalletPasswordAction}
-                                    name="password"
-                                    type="text"/>
-                                <br/>
-                                <button onClick={() => generateWalletFileAction()}
-                                        disabled={generateWalletPassword ? generateWalletPassword.syncErrors : true}
-                                        className="btn btn-primary btn-block">
-                                    Generate Wallet
-                                </button>
-                                {
-                                    generateWalletFile && (
-                                        <div>
-                                            <br/>
-                                            <p style={{color: 'red'}}> Now you need to confirm that you copied your
-                                                seed!</p>
-                                        </div>)
+                        <br/>
 
-                                }
-                            </div>
-                        </section>
+                        {
+                            !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>
+                                    <Field
+                                        validate={[required, minLength9]}
+                                        component={GenerateWalletPasswordInputComponent}
+                                        showPassword={showPassword}
+                                        showGenerateWalletPasswordAction={showGenerateWalletPasswordAction}
+                                        name="password"
+                                        type="text"/>
+                                    <br/>
+                                    <button onClick={() => generateWalletFileAction()}
+                                            disabled={generateWalletPassword ? generateWalletPassword.syncErrors : true}
+                                            className="btn btn-primary btn-block">
+                                        Generate Wallet
+                                    </button>
+                                </div>
+                            </section>)
+                        }
+
+                        {
+                            generateWalletFile && (
+                                <section role="main" className="row">
+                                    <h1>Save your Wallet File. Don't forget your password.</h1>
+                                    <br/>
+                                    <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>
@@ -85,4 +132,4 @@ class GenerateWalletPasswordComponent extends Component {
 
 export default reduxForm({
     form: 'generateWalletPassword' // a unique name for this form
-})(GenerateWalletPasswordComponent);
\ No newline at end of file
+})(GenerateWalletPasswordComponent);