src/features/mockhsm/components/Show.jsx

   1 import React from 'react'
   2 import {
   3   BaseShow,
   4   KeyValueTable,
   5   PageContent,
   6   PageTitle,
   7   TextField
   8 } from 'features/shared/components'
   9 import componentClassNames from 'utility/componentClassNames'
  10
  11 class Show extends BaseShow {
  12   constructor(props) {
  13     super(props)
  14     this.submitWithErrors = this.submitWithErrors.bind(this)
  15   }
  16
  17   submitExportFileWithErrors(data, item) {
  18     return new Promise((resolve, reject) => {
  19       const arg = {
  20         'xpub': item.xpub,
  21         'password': data.exportsPassword
  22       }
  23       this.props.exportKey(arg, item.alias)
  24         .catch((err) => reject({_error: err.message}))
  25     })
  26   }
  27
  28   submitWithErrors(data, xpub) {
  29     return new Promise((resolve, reject) => {
  30       const arg = {
  31         'xpub': xpub,
  32         'old_password': data.oldPassword,
  33         'new_password': data.newPassword
  34       }
  35       this.props.submitForm(arg)
  36         .catch((err) => reject({_error: err.message}))
  37     })
  38   }
  39
  40   render() {
  41     const item = this.props.item
  42     const lang = this.props.lang
  43     const {
  44       fields: { exportsPassword, oldPassword, newPassword, repeatPassword },
  45       handleSubmit,
  46       submitting
  47     } = this.props
  48
  49     let view
  50     if (item) {
  51       const title = <span>
  52         {lang === 'zh' ? '密钥' : 'Keys '}
  53         <code>{item.alias ? item.alias : item.id}</code>
  54       </span>
  55
  56       view = <div className={componentClassNames(this)}>
  57         <PageTitle
  58           title={title}
  59         />
  60
  61         <PageContent>
  62           <KeyValueTable
  63             id={item.id}
  64             object='key'
  65             title={lang === 'zh' ? '详情' : 'Details'}
  66             items={[
  67               {label: 'Alias', value: item.alias},
  68               {label: 'xpubs', value: item.xpub},
  69             ]}
  70             lang={lang}
  71           />
  72
  73           <h5>Export private key</h5>
  74           <form onSubmit={handleSubmit(value => this.submitExportFileWithErrors(value, item))}>
  75             <TextField
  76               title = 'Password'
  77               placeholder='Please entered the password.'
  78               fieldProps={exportsPassword}
  79               autoFocus={true} />
  80             <button type='submit' className='btn btn-primary' disabled={submitting}>
  81               { lang === 'zh' ? '导出私钥' : 'Export private key' }</button>
  82           </form>
  83
  84           <h5>Reset password</h5>
  85           <form onSubmit={handleSubmit(value => this.submitWithErrors(value, item.xpub))}>
  86             <TextField
  87               title = 'Old Password'
  88               placeholder='Please entered the old password.'
  89               fieldProps={oldPassword}
  90               autoFocus={true} />
  91             <TextField
  92               title = 'New Password'
  93               placeholder='Please entered the new password.'
  94               fieldProps={newPassword}
  95               autoFocus={true} />
  96             <TextField
  97               title = 'Repeat Password'
  98               placeholder='Please repeated the new password.'
  99               fieldProps={repeatPassword}
 100               autoFocus={true} />
 101
 102             <button type='submit' className='btn btn-primary' disabled={submitting}>
 103               Reset the password
 104             </button>
 105           </form>
 106         </PageContent>
 107       </div>
 108     }
 109     return this.renderIfFound(view)
 110   }
 111 }
 112
 113 // Container
 114
 115 import {connect} from 'react-redux'
 116 import actions from 'actions'
 117 import {reduxForm} from 'redux-form'
 118
 119 const mapStateToProps = (state, ownProps) => ({
 120   item: state.key.items[ownProps.params.id],
 121   lang: state.core.lang
 122 })
 123
 124 const mapDispatchToProps = ( dispatch ) => ({
 125   fetchItem: (id) => dispatch(actions.key.fetchItems({id: `${id}`})),
 126   exportKey: (item, fileName) => dispatch(actions.key.createExport(item, fileName)),
 127   submitForm: (params) => dispatch(actions.key.submitResetForm(params))
 128 })
 129
 130
 131 export default connect(
 132   mapStateToProps,
 133   mapDispatchToProps
 134 )(reduxForm({
 135   form: 'ResetPassword',
 136   fields: ['exportsPassword', 'oldPassword', 'newPassword', 'repeatPassword' ],
 137 })(Show))