From b7493428685a0a4062e968ed876684b5deec1ce2 Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Sat, 14 Apr 2018 11:24:33 +0800
Subject: [PATCH] Create export-key and reset-password component

---
 src/features/mockhsm/actions.js                   | 23 +++---
 src/features/mockhsm/components/ExportKey.jsx     | 61 ++++++++++++++++
 src/features/mockhsm/components/ResetPassword.jsx | 88 +++++++++++++++++++++++
 src/features/mockhsm/components/Show.jsx          | 82 ++++-----------------
 4 files changed, 174 insertions(+), 80 deletions(-)
 create mode 100644 src/features/mockhsm/components/ExportKey.jsx
 create mode 100644 src/features/mockhsm/components/ResetPassword.jsx

diff --git a/src/features/mockhsm/actions.js b/src/features/mockhsm/actions.js
index 334af08..0cca365 100644
--- a/src/features/mockhsm/actions.js
+++ b/src/features/mockhsm/actions.js
@@ -1,6 +1,6 @@
 import { baseListActions, baseCreateActions } from 'features/shared/actions'
 import { chainClient } from 'utility/environment'
-import {push} from 'react-router-redux'
+import {reset} from 'redux-form'
 
 const type = 'key'
 const clientApi = () => chainClient().mockHsm.keys
@@ -14,23 +14,20 @@ const create = baseCreateActions(type, {
   clientApi,
 })
 
-const reset = {
+const resetPassword = {
   submitResetForm: (params) => {
+    let promise = Promise.resolve()
     return (dispatch)  => {
-      return clientApi().resetPassword(params).then((resp) => {
+      return promise.then(() => clientApi().resetPassword(params).then((resp) => {
         if(resp.data.changed){
           dispatch({ type: `RESET_PASSWORD_${type.toUpperCase()}`, resp })
+          dispatch(reset('ResetPassword'))
         }else{
-          dispatch({ type: 'ERROR', payload: {message: 'Unable to reset the key password.'} })
+          let msg = 'Unable to reset the key password.'
+          dispatch({ type: 'ERROR', payload: {message: msg} })
+          throw new Error(msg)
         }
-
-        dispatch(push({
-          pathname: `/${type}s/${id}`,
-          state: {
-            preserveFlash: true
-          }
-        }))
-      })
+      }))
     }
   }
 }
@@ -38,7 +35,7 @@ const reset = {
 export default {
   ...create,
   ...list,
-  ...reset,
+  ...resetPassword,
   createExport: (arg, fileName) => (dispatch) => {
     clientApi().export(arg).then(resp => {
       if(resp.status == 'success'){
diff --git a/src/features/mockhsm/components/ExportKey.jsx b/src/features/mockhsm/components/ExportKey.jsx
new file mode 100644
index 0000000..d669458
--- /dev/null
+++ b/src/features/mockhsm/components/ExportKey.jsx
@@ -0,0 +1,61 @@
+import React,  { Component }  from 'react'
+import { TextField } from 'features/shared/components'
+import {reduxForm} from 'redux-form'
+
+class ExportKey extends Component {
+  constructor(props) {
+    super(props)
+    this.submitWithErrors = this.submitWithErrors.bind(this)
+  }
+
+  submitWithErrors(data, item) {
+    return new Promise((resolve, reject) => {
+      const arg = {
+        'xpub': item.xpub,
+        'password': data.password
+      }
+      this.props.exportKey(arg, item.alias)
+        .catch((err) => reject({_error: err.message}))
+    })
+  }
+
+  render() {
+    const item = this.props.item
+    const lang = this.props.lang
+    const {
+      fields: { password },
+      handleSubmit,
+      submitting
+    } = this.props
+
+    return (
+      <div>
+        <h5>{ lang === 'zh' ? '导出私钥' : 'Export private key' }</h5>
+        <form onSubmit={handleSubmit(value => this.submitWithErrors(value, item))}>
+          <TextField
+            title = { lang === 'zh' ? '密码' : 'Password' }
+            placeholder= { lang === 'zh' ? '请输入密码' : 'Please entered the password.' }
+            fieldProps={password}
+            type= 'password'
+            />
+          <button type='submit' className='btn btn-primary' disabled={submitting}>
+            { lang === 'zh' ? '导出私钥' : 'Export private key' }</button>
+        </form>
+      </div>
+     )
+  }
+}
+
+const validate = values => {
+  const errors = {}
+  if (!values.password) {
+    errors.password = 'Required'
+  }
+  return errors
+}
+
+export default (reduxForm({
+  form: 'ExportKey',
+  fields: ['password'],
+  validate
+})(ExportKey))
diff --git a/src/features/mockhsm/components/ResetPassword.jsx b/src/features/mockhsm/components/ResetPassword.jsx
new file mode 100644
index 0000000..79b95cb
--- /dev/null
+++ b/src/features/mockhsm/components/ResetPassword.jsx
@@ -0,0 +1,88 @@
+import React, {Component} from 'react'
+import {reduxForm} from 'redux-form'
+import {
+  TextField
+} from 'features/shared/components'
+
+class ResetPassword extends Component {
+  constructor(props) {
+    super(props)
+    this.submitWithErrors = this.submitWithErrors.bind(this)
+  }
+
+  submitWithErrors(data, xpub) {
+    return new Promise((resolve, reject) => {
+      const arg = {
+        'xpub': xpub,
+        'old_password': data.oldPassword,
+        'new_password': data.newPassword
+      }
+      this.props.submitForm(arg)
+        .catch((err) => reject({_error: err.message}))
+    })
+  }
+
+  render() {
+    const item = this.props.item
+    const lang = this.props.lang
+    const {
+      fields: { oldPassword, newPassword, repeatPassword },
+      handleSubmit,
+      submitting
+    } = this.props
+
+    return (
+      <div>
+        <h5>{ lang === 'zh' ? '重置密码' : 'Reset password' }</h5>
+        <form onSubmit={handleSubmit(value => this.submitWithErrors(value, item.xpub))}>
+          <TextField
+            title = { lang === 'zh' ? '原始密码' : 'Old Password' }
+            placeholder={ lang === 'zh' ? '请输入原始密码。' : 'Please entered the old password.' }
+            fieldProps={oldPassword}
+            type= 'password'
+            />
+          <TextField
+            title = { lang === 'zh' ? '新密码' : 'New Password' }
+            placeholder={ lang === 'zh' ? '请输入新密码。' : 'Please entered the new password.' }
+            fieldProps={newPassword}
+            type= 'password'
+            />
+          <TextField
+            title = { lang === 'zh' ? '重复新密码' : 'Repeat Password' }
+            placeholder={ lang === 'zh' ? '请重复输入新密码。' : 'Please repeated the new password.' }
+            fieldProps={repeatPassword}
+            type= 'password'
+            />
+
+          <button type='submit' className='btn btn-primary' disabled={submitting}>
+            { lang === 'zh' ? '重置密码' : 'Reset the password' }
+          </button>
+        </form>
+      </div>
+    )
+  }
+}
+
+const validate = values => {
+  const errors = {}
+  if (!values.oldPassword) {
+    errors.oldPassword = 'Required'
+  }
+
+  if (!values.newPassword) {
+    errors.newPassword = 'Required'
+  }else if(values.newPassword.length < 5){
+    errors.newPassword = 'Please enter at least 5 characters password.'
+  }
+
+  if ( values.newPassword !== values.repeatPassword ) {
+    errors.repeatPassword = 'Please match the repeat password.'
+  }
+  return errors
+}
+
+export default (reduxForm({
+  form: 'ResetPassword',
+  fields: ['oldPassword', 'newPassword', 'repeatPassword' ],
+  validate
+})(ResetPassword))
diff --git a/src/features/mockhsm/components/Show.jsx b/src/features/mockhsm/components/Show.jsx
index e50b6f4..a3d3096 100644
--- a/src/features/mockhsm/components/Show.jsx
+++ b/src/features/mockhsm/components/Show.jsx
@@ -4,47 +4,19 @@ import {
   KeyValueTable,
   PageContent,
   PageTitle,
-  TextField
 } from 'features/shared/components'
+import  ExportKey  from './ExportKey'
+import  ResetPassword  from './ResetPassword'
 import componentClassNames from 'utility/componentClassNames'
 
 class Show extends BaseShow {
   constructor(props) {
     super(props)
-    this.submitWithErrors = this.submitWithErrors.bind(this)
-  }
-
-  submitExportFileWithErrors(data, item) {
-    return new Promise((resolve, reject) => {
-      const arg = {
-        'xpub': item.xpub,
-        'password': data.exportsPassword
-      }
-      this.props.exportKey(arg, item.alias)
-        .catch((err) => reject({_error: err.message}))
-    })
-  }
-
-  submitWithErrors(data, xpub) {
-    return new Promise((resolve, reject) => {
-      const arg = {
-        'xpub': xpub,
-        'old_password': data.oldPassword,
-        'new_password': data.newPassword
-      }
-      this.props.submitForm(arg)
-        .catch((err) => reject({_error: err.message}))
-    })
   }
 
   render() {
     const item = this.props.item
     const lang = this.props.lang
-    const {
-      fields: { exportsPassword, oldPassword, newPassword, repeatPassword },
-      handleSubmit,
-      submitting
-    } = this.props
 
     let view
     if (item) {
@@ -70,39 +42,19 @@ class Show extends BaseShow {
             lang={lang}
           />
 
-          <h5>Export private key</h5>
-          <form onSubmit={handleSubmit(value => this.submitExportFileWithErrors(value, item))}>
-            <TextField
-              title = 'Password'
-              placeholder='Please entered the password.'
-              fieldProps={exportsPassword}
-              autoFocus={true} />
-            <button type='submit' className='btn btn-primary' disabled={submitting}>
-              { lang === 'zh' ? '导出私钥' : 'Export private key' }</button>
-          </form>
-
-          <h5>Reset password</h5>
-          <form onSubmit={handleSubmit(value => this.submitWithErrors(value, item.xpub))}>
-            <TextField
-              title = 'Old Password'
-              placeholder='Please entered the old password.'
-              fieldProps={oldPassword}
-              autoFocus={true} />
-            <TextField
-              title = 'New Password'
-              placeholder='Please entered the new password.'
-              fieldProps={newPassword}
-              autoFocus={true} />
-            <TextField
-              title = 'Repeat Password'
-              placeholder='Please repeated the new password.'
-              fieldProps={repeatPassword}
-              autoFocus={true} />
+          <ExportKey
+            key='export-key-form' // required by React
+            item={item}
+            lang={lang}
+            exportKey={this.props.exportKey}
+          />
+          <ResetPassword
+            key='reset-password-form' // required by React
+            item={item}
+            lang={lang}
+            submitForm={this.props.submitForm}
+          />
 
-            <button type='submit' className='btn btn-primary' disabled={submitting}>
-              Reset the password
-            </button>
-          </form>
         </PageContent>
       </div>
     }
@@ -114,7 +66,6 @@ class Show extends BaseShow {
 
 import {connect} from 'react-redux'
 import actions from 'actions'
-import {reduxForm} from 'redux-form'
 
 const mapStateToProps = (state, ownProps) => ({
   item: state.key.items[ownProps.params.id],
@@ -131,7 +82,4 @@ const mapDispatchToProps = ( dispatch ) => ({
 export default connect(
   mapStateToProps,
   mapDispatchToProps
-)(reduxForm({
-  form: 'ResetPassword',
-  fields: ['exportsPassword', 'oldPassword', 'newPassword', 'repeatPassword' ],
-})(Show))
+)(Show)
-- 
2.11.0