From 44701f875682f15cf3a41baa01544185a296bf00 Mon Sep 17 00:00:00 2001
From: Daniel Ternyak <dternyak@gmail.com>
Date: Tue, 18 Apr 2017 18:01:25 -0500
Subject: [PATCH] Integrate Redux-Form for GenerateWalletInput.

Break out GenerateWalletPasswordInputComponent into separate component.

Add required props to propTypes.

Add Generate Wallet Input actions and states.

Add Show Generate Wallet Password action and state.

Define validators for Field.
---
 .../GenerateWalletPasswordComponent.jsx       | 78 +++++++++++++++----
 .../GenerateWalletPasswordInputComponent.jsx  | 51 ++++++++++++
 .../Tabs/GenerateWallet/components/index.js   |  8 +-
 3 files changed, 121 insertions(+), 16 deletions(-)
 create mode 100644 common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordInputComponent.jsx

diff --git a/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx b/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx
index 2c0e9e9a..60e52f1f 100644
--- a/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx
+++ b/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx
@@ -1,7 +1,17 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
+import React, {Component} from "react";
+import PropTypes from "prop-types";
 
-export default class GenerateWalletPasswordComponent extends Component {
+import {Field, reduxForm} from "redux-form"; // ES6
+import GenerateWalletPasswordInputComponent from "./GenerateWalletPasswordInputComponent";
+const minLength = min => value =>
+    value && value.length < min ? `Must be ${min} characters or more` : undefined
+const minLength9 = minLength(9)
+
+
+const required = value => value ? undefined : 'Required'
+
+
+class GenerateWalletPasswordComponent extends Component {
     constructor(props) {
         super(props)
     }
@@ -10,10 +20,36 @@ export default class GenerateWalletPasswordComponent extends Component {
         title: PropTypes.string,
         body: PropTypes.string,
         userId: PropTypes.number,
-        id: PropTypes.number
+        id: PropTypes.number,
+        generateWalletPassword: PropTypes.object,
+        showPassword: PropTypes.bool,
+        showGenerateWalletPasswordAction: PropTypes.func,
+        generateWalletFileAction: PropTypes.func,
+        generateWalletFile: PropTypes.bool
     };
 
+    generateWallet() {
+        console.log("got here")
+    }
+
+    showPassword() {
+
+    }
+
     render() {
+        const {
+            // handleSubmit,
+            // pristine,
+            // reset,
+            // submitting,
+            generateWalletPassword,
+            showPassword,
+            showGenerateWalletPasswordAction,
+            generateWalletFileAction,
+            generateWalletFile
+
+        } = this.props;
+
         return (
             <section className="container" style={{minHeight: '50%'}}>
                 <div className="tab-content">
@@ -22,18 +58,28 @@ export default class GenerateWalletPasswordComponent extends Component {
                             <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>
-                                <div className="input-group">
-                                    <input name="password"
-                                           className="form-control"
-                                           type="password" placeholder="Do NOT forget to save this!"
-                                           aria-label="Enter a strong password (at least 9 characters)"/>
-                                    <span tabIndex="0" aria-label="make password visible" role="button"
-                                          className="input-group-addon eye"/>
-                                </div>
+                                <Field
+                                    validate={[required, minLength9]}
+                                    component={GenerateWalletPasswordInputComponent}
+                                    showPassword={showPassword}
+                                    showGenerateWalletPasswordAction={showGenerateWalletPasswordAction}
+                                    name="password"
+                                    type="text"/>
                                 <br/>
-                                <a tabIndex="0" role="button" className="btn btn-primary btn-block">
+                                <button onClick={() => generateWalletFileAction()}
+                                        disabled={generateWalletPassword ? generateWalletPassword.syncErrors : true}
+                                        className="btn btn-primary btn-block">
                                     Generate Wallet
-                                </a>
+                                </button>
+
+                                {
+                                    generateWalletFile && (
+                                        <div>
+                                            <br/>
+                                            <p style={{color: 'red'}}> Now you need to confirm that you copied your seed!</p>
+                                        </div>)
+
+                                    }
                             </div>
                         </section>
                     </main>
@@ -42,3 +88,7 @@ export default class GenerateWalletPasswordComponent extends Component {
         )
     }
 }
+
+export default reduxForm({
+    form: 'generateWalletPassword' // a unique name for this form
+})(GenerateWalletPasswordComponent);
\ No newline at end of file
diff --git a/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordInputComponent.jsx b/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordInputComponent.jsx
new file mode 100644
index 00000000..76d6a6f3
--- /dev/null
+++ b/common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordInputComponent.jsx
@@ -0,0 +1,51 @@
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+
+export default class GenerateWalletPasswordInputComponent extends Component {
+    constructor(props) {
+        super(props)
+    }
+
+    static propTypes = {
+        showGenerateWalletPasswordAction: PropTypes.func,
+        showPassword: PropTypes.bool,
+        input: PropTypes.object,
+        meta: PropTypes.object
+    };
+
+
+    render() {
+        return (
+            <div>
+
+                <div>
+                    <div className="input-group" style={{width: '100%'}}>
+                        <input {...this.props.input}
+                               name="password"
+                               className={this.props.meta.error ? 'form-control is-invalid' : "form-control"}
+                               type={this.props.showPassword ? 'text' : 'password'}
+                               placeholder="Do NOT forget to save this!"
+                               aria-label="Enter a strong password (at least 9 characters)"/>
+                        <span
+                            onClick={() => this.props.showGenerateWalletPasswordAction()}
+                            aria-label="make password visible"
+                            role="button"
+                            className="input-group-addon eye"/>
+                    </div>
+                </div>
+
+                {/*TODO - if we want descriptive errors we could re-enable this*/}
+                {/*{this.props.meta.touched && this.props.meta.error &&*/}
+                {/*<div>*/}
+                    {/*<p className="error">{this.props.meta.error}</p>*/}
+                {/*</div>*/}
+                {/*}*/}
+
+            </div>
+        )
+    }
+
+}
+
+
diff --git a/common/containers/Tabs/GenerateWallet/components/index.js b/common/containers/Tabs/GenerateWallet/components/index.js
index 82e72347..54dffedd 100644
--- a/common/containers/Tabs/GenerateWallet/components/index.js
+++ b/common/containers/Tabs/GenerateWallet/components/index.js
@@ -8,13 +8,17 @@ export default class GenerateWalletComponent extends Component {
     }
 
     static propTypes = {
-        statistics: PropTypes.array
+        generateWalletPassword: PropTypes.object,
+        showPassword: PropTypes.bool,
+        showGenerateWalletPasswordAction: PropTypes.func,
+        generateWalletFileAction: PropTypes.func,
+        generateWalletFile: PropTypes.bool
     }
 
     render() {
         return (
             <div>
-                <GenerateWalletPasswordComponent/>
+                <GenerateWalletPasswordComponent {...this.props}/>
             </div>
         )
     }