From fa6dbcce434a18b542f0457548d0503299b55974 Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Thu, 16 Aug 2018 19:11:20 +0800
Subject: [PATCH] add the try Password functionality

---
 src/features/mockhsm/actions.js                    |  51 +++++++----
 .../components/CheckPassword/CheckPassword.jsx     | 100 +++++++++++++++++++++
 .../components/CheckPassword/CheckPassword.scss    |   7 ++
 src/features/mockhsm/components/Show.jsx           |   1 +
 src/features/mockhsm/components/index.js           |   4 +-
 src/features/mockhsm/reducers.js                   |   9 ++
 src/features/mockhsm/routes.js                     |   6 +-
 7 files changed, 158 insertions(+), 20 deletions(-)
 create mode 100644 src/features/mockhsm/components/CheckPassword/CheckPassword.jsx
 create mode 100644 src/features/mockhsm/components/CheckPassword/CheckPassword.scss

diff --git a/src/features/mockhsm/actions.js b/src/features/mockhsm/actions.js
index d283851..8186ca2 100644
--- a/src/features/mockhsm/actions.js
+++ b/src/features/mockhsm/actions.js
@@ -36,26 +36,41 @@ const resetPassword = {
   }
 }
 
+const checkPassword = (data) => (dispatch) => {
+  return clientApi().checkPassword(data)
+    .then((resp) => {
+      if(resp.status === 'fail'){
+        throw new Error(resp.msg)
+      }else if(!resp.data.checkResult){
+        throw new Error('Your Password is wrong')
+      }
+      dispatch({ type: 'KEY_PASSWORD_SUCCESS'})
+    })
+}
+
+const createExport =  (arg, fileName) => (dispatch) => {
+  clientApi().export(arg).then(resp => {
+    if(resp.status == 'success'){
+      const privateKey = resp.data.privateKey
+
+      var element = document.createElement('a')
+      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(privateKey))
+      element.setAttribute('download', fileName)
+      element.style.display = 'none'
+      document.body.appendChild(element)
+      element.click()
+
+      document.body.removeChild(element)
+    }else if(resp.status == 'fail'){
+      dispatch({ type: 'ERROR', payload: {message: resp.msg} })
+    }
+  })
+}
+
 export default {
   ...create,
   ...list,
   ...resetPassword,
-  createExport: (arg, fileName) => (dispatch) => {
-    clientApi().export(arg).then(resp => {
-      if(resp.status == 'success'){
-        const privateKey = resp.data.privateKey
-
-        var element = document.createElement('a')
-        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(privateKey))
-        element.setAttribute('download', fileName)
-        element.style.display = 'none'
-        document.body.appendChild(element)
-        element.click()
-
-        document.body.removeChild(element)
-      }else if(resp.status == 'fail'){
-        dispatch({ type: 'ERROR', payload: {message: resp.msg} })
-      }
-    })
-  }
+  checkPassword,
+  createExport
 }
diff --git a/src/features/mockhsm/components/CheckPassword/CheckPassword.jsx b/src/features/mockhsm/components/CheckPassword/CheckPassword.jsx
new file mode 100644
index 0000000..f3a2b09
--- /dev/null
+++ b/src/features/mockhsm/components/CheckPassword/CheckPassword.jsx
@@ -0,0 +1,100 @@
+import React, {Component} from 'react'
+import { reduxForm } from 'redux-form'
+
+import { FormContainer, FormSection, PasswordField} from 'features/shared/components'
+
+class CheckPassword extends Component {
+  constructor(props) {
+    super(props)
+    this.submitWithErrors = this.submitWithErrors.bind(this)
+    this.state = {}
+  }
+
+  submitWithErrors(data, xpub) {
+    return new Promise((resolve, reject) => {
+      const arg = {
+        'xpub': xpub,
+        'password': data.password,
+      }
+      this.props.checkPassword(arg)
+        .then(() =>
+          resolve()
+        )
+        .catch((err) => reject({_error: err.message}))
+    })
+  }
+
+  componentDidMount() {
+    this.props.fetchItem().then(resp => {
+      if (resp.data.length == 0) {
+        this.setState({notFound: true})
+      }
+    })
+  }
+
+  render() {
+    if (this.state.notFound) {
+      return <NotFound />
+    }
+    const item = this.props.item
+    const lang = this.props.lang
+
+    if (!item) {
+      return <div>Loading...</div>
+    }
+
+    const success = this.props.successMsg
+
+    const {
+      fields: { password },
+      error,
+      handleSubmit,
+    } = this.props
+
+    const title = <span>
+      {lang === 'zh' ? '密码校验' : 'Try Password'}
+      <code>{item.alias}</code>
+    </span>
+
+    return (
+      <FormContainer
+        error={error}
+        success={success}
+        label={title}
+        onSubmit={handleSubmit(value => this.submitWithErrors(value, item.xpub))}
+        submitLabel= { lang === 'zh' ? '密码校验' : 'Try Password' }
+        lang={lang}>
+
+        <FormSection>
+          <PasswordField
+            title = { lang === 'zh' ? '密码' : 'Password' }
+            placeholder={ lang === 'zh' ? '请输入校验密码' : 'Please entered the password that you need to check.' }
+            fieldProps={password}
+            />
+        </FormSection>
+      </FormContainer>
+    )
+  }
+}
+
+import {connect} from 'react-redux'
+import actions from 'actions'
+
+const mapStateToProps = (state, ownProps) => ({
+  item: state.key.items[ownProps.params.id],
+  lang: state.core.lang,
+  successMsg: state.key.success
+})
+
+const mapDispatchToProps = ( dispatch ) => ({
+  fetchItem: () => dispatch(actions.key.fetchItems()),
+  checkPassword: (params) => dispatch(actions.key.checkPassword(params))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(reduxForm({
+  form: 'CheckPassword',
+  fields: ['password'],
+})(CheckPassword))
diff --git a/src/features/mockhsm/components/CheckPassword/CheckPassword.scss b/src/features/mockhsm/components/CheckPassword/CheckPassword.scss
new file mode 100644
index 0000000..50c9687
--- /dev/null
+++ b/src/features/mockhsm/components/CheckPassword/CheckPassword.scss
@@ -0,0 +1,7 @@
+.main {
+  margin: $gutter-size auto;
+  border-radius: $border-radius-standard;
+  background-color: $background-content-color;
+  padding: $gutter-size/2;
+}
+
diff --git a/src/features/mockhsm/components/Show.jsx b/src/features/mockhsm/components/Show.jsx
index 4486651..004c0b6 100644
--- a/src/features/mockhsm/components/Show.jsx
+++ b/src/features/mockhsm/components/Show.jsx
@@ -50,6 +50,7 @@ class Show extends BaseShow {
             object='key'
             title={lang === 'zh' ? '详情' : 'Details'}
             actions={[
+              <Link key='check-password-btn' className='btn btn-link' to={`/keys/${item.id}/check-password`}>{lang === 'zh' ? '密码校验' : 'Try Password' }</Link>,
               <Link key='reset-password-btn' className='btn btn-link' to={`/keys/${item.id}/reset-password`}>{lang === 'zh' ? '重置密码' : 'Reset Password' }</Link>
             ]}
             items={[
diff --git a/src/features/mockhsm/components/index.js b/src/features/mockhsm/components/index.js
index c24a357..72b69e0 100644
--- a/src/features/mockhsm/components/index.js
+++ b/src/features/mockhsm/components/index.js
@@ -2,10 +2,12 @@ import List from './List'
 import New from './New'
 import Show from './Show'
 import ResetPassword from './ResetPassword/ResetPassword'
+import CheckPassword from './CheckPassword/CheckPassword'
 
 export {
   List,
   New,
   Show,
-  ResetPassword
+  ResetPassword,
+  CheckPassword
 }
diff --git a/src/features/mockhsm/reducers.js b/src/features/mockhsm/reducers.js
index e60cb7c..e02c9f8 100644
--- a/src/features/mockhsm/reducers.js
+++ b/src/features/mockhsm/reducers.js
@@ -8,4 +8,13 @@ export default combineReducers({
   items: reducers.itemsReducer(type, idFunc),
   queries: reducers.queriesReducer(type, idFunc),
   autocompleteIsLoaded: reducers.autocompleteIsLoadedReducer(type),
+  success: (state = '', action) => {
+    if (action.type == 'KEY_PASSWORD_SUCCESS') {
+      return 'Your key password is correct.'
+    }
+    if(action.type == 'redux-form/CHANGE'){
+      return ''
+    }
+    return state
+  },
 })
diff --git a/src/features/mockhsm/routes.js b/src/features/mockhsm/routes.js
index 2ff66b6..b15f971 100644
--- a/src/features/mockhsm/routes.js
+++ b/src/features/mockhsm/routes.js
@@ -1,4 +1,4 @@
-import { List, New, Show, ResetPassword } from './components'
+import { List, New, Show, ResetPassword, CheckPassword } from './components'
 import { makeRoutes } from 'features/shared'
 
 export default (store) => makeRoutes(store, 'key', List, New, Show,
@@ -8,4 +8,8 @@ export default (store) => makeRoutes(store, 'key', List, New, Show,
         path: ':id/reset-password',
         component: ResetPassword,
       },
+      {
+        path: ':id/check-password',
+        component: CheckPassword,
+      },
     ],skipFilter: true, name: 'Keys', name_zh:'密钥' })
\ No newline at end of file
-- 
2.11.0