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.

common/containers/Tabs/GenerateWallet/components/GenerateWalletPasswordComponent.jsx

@@ -1,7 +1,17 @@
-import React, {Component} from 'react';
+import React, {Component} from "react";
-import PropTypes from 'prop-types';
+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">
+                                <Field
-                                    <input name="password"
+                                    validate={[required, minLength9]}
-                                           className="form-control"
+                                    component={GenerateWalletPasswordInputComponent}
-                                           type="password" placeholder="Do NOT forget to save this!"
+                                    showPassword={showPassword}
-                                           aria-label="Enter a strong password (at least 9 characters)"/>
+                                    showGenerateWalletPasswordAction={showGenerateWalletPasswordAction}
-                                    <span tabIndex="0" aria-label="make password visible" role="button"
+                                    name="password"
-                                          className="input-group-addon eye"/>
+                                    type="text"/>
-                                </div>
                                 <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);

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>
+        )
+    }
+
+}
+
+

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>
         )
     }