OSDN Git Service

add the new reset password page
authorZhiting Lin <zlin035@uottawa.ca>
Sat, 14 Apr 2018 08:45:59 +0000 (16:45 +0800)
committerZhiting Lin <zlin035@uottawa.ca>
Sat, 14 Apr 2018 08:45:59 +0000 (16:45 +0800)
src/features/mockhsm/actions.js
src/features/mockhsm/components/ExportKey/ExportKey.jsx [moved from src/features/mockhsm/components/ExportKey.jsx with 100% similarity]
src/features/mockhsm/components/ExportKey/ExportKey.scss [moved from src/features/mockhsm/components/ExportKey.scss with 100% similarity]
src/features/mockhsm/components/ResetPassword/ResetPassword.jsx [moved from src/features/mockhsm/components/ResetPassword.jsx with 59% similarity]
src/features/mockhsm/components/ResetPassword/ResetPassword.scss [moved from src/features/mockhsm/components/ResetPassword.scss with 100% similarity]
src/features/mockhsm/components/Show.jsx
src/features/mockhsm/components/index.js
src/features/mockhsm/routes.js

index 0cca365..d283851 100644 (file)
@@ -1,6 +1,6 @@
 import { baseListActions, baseCreateActions } from 'features/shared/actions'
 import { chainClient } from 'utility/environment'
-import {reset} from 'redux-form'
+import {push} from 'react-router-redux'
 
 const type = 'key'
 const clientApi = () => chainClient().mockHsm.keys
@@ -21,10 +21,14 @@ const resetPassword = {
       return promise.then(() => clientApi().resetPassword(params).then((resp) => {
         if(resp.data.changed){
           dispatch({ type: `RESET_PASSWORD_${type.toUpperCase()}`, resp })
-          dispatch(reset('ResetPassword'))
+          dispatch(push({
+            pathname: `/${type}s/${params.xpub}`,
+            state: {
+              preserveFlash: true
+            }
+          }))
         }else{
           let msg = 'Unable to reset the key password.'
-          dispatch({ type: 'ERROR', payload: {message: msg} })
           throw new Error(msg)
         }
       }))
@@ -1,12 +1,13 @@
 import React, {Component} from 'react'
 import { reduxForm } from 'redux-form'
-import { TextField } from 'features/shared/components'
-import styles from './ResetPassword.scss'
+
+import { TextField, FormContainer, FormSection} from 'features/shared/components'
 
 class ResetPassword extends Component {
   constructor(props) {
     super(props)
     this.submitWithErrors = this.submitWithErrors.bind(this)
+    this.state = {}
   }
 
   submitWithErrors(data, xpub) {
@@ -16,23 +17,52 @@ class ResetPassword extends Component {
         'old_password': data.oldPassword,
         'new_password': data.newPassword
       }
-      this.props.submitForm(arg)
+      this.props.submitReset(arg)
         .catch((err) => reject({_error: err.message}))
     })
   }
 
+  componentDidMount() {
+    this.props.fetchItem(this.props.params.id).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 {
       fields: { oldPassword, newPassword, repeatPassword },
+      error,
       handleSubmit,
       submitting
     } = this.props
 
+    const title = <span>
+      {lang === 'zh' ? '重置密钥密码 ' : 'Reset key password '}
+      <code>{item.alias}</code>
+    </span>
+
     return (
-      <div className={styles.main}>
-        <form onSubmit={handleSubmit(value => this.submitWithErrors(value, item.xpub))}>
+      <FormContainer
+        error={error}
+        label={title}
+        onSubmit={handleSubmit(value => this.submitWithErrors(value, item.xpub))}
+        submitting={submitting}
+        submitLabel= { lang === 'zh' ? '重置密码' : 'Reset the password' }
+        lang={lang}>
+
+        <FormSection title= {lang === 'zh' ? '重置密码' : 'Reset password' }>
           <TextField
             title = { lang === 'zh' ? '原始密码' : 'Old Password' }
             placeholder={ lang === 'zh' ? '请输入原始密码' : 'Please entered the old password.' }
@@ -51,12 +81,8 @@ class ResetPassword extends Component {
             fieldProps={repeatPassword}
             type= 'password'
             />
-
-          <button type='submit' className='btn btn-default btn-sm' disabled={submitting}>
-            { lang === 'zh' ? '重置密码' : 'Reset the password' }
-          </button>
-        </form>
-      </div>
+        </FormSection>
+      </FormContainer>
     )
   }
 }
@@ -79,7 +105,23 @@ const validate = values => {
   return errors
 }
 
-export default (reduxForm({
+import {connect} from 'react-redux'
+import actions from 'actions'
+
+const mapStateToProps = (state, ownProps) => ({
+  item: state.key.items[ownProps.params.id],
+  lang: state.core.lang
+})
+
+const mapDispatchToProps = ( dispatch ) => ({
+  fetchItem: (id) => dispatch(actions.key.fetchItems({id: `${id}`})),
+  submitReset: (params) => dispatch(actions.key.submitResetForm(params))
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(reduxForm({
   form: 'ResetPassword',
   fields: ['oldPassword', 'newPassword', 'repeatPassword' ],
   validate
index fd61048..ee1e7e2 100644 (file)
@@ -1,12 +1,12 @@
 import React from 'react'
+import { Link } from 'react-router'
 import {
   BaseShow,
   KeyValueTable,
   PageContent,
   PageTitle,
 } from 'features/shared/components'
-import  ExportKey  from './ExportKey'
-import  ResetPassword  from './ResetPassword'
+import  ExportKey  from './ExportKey/ExportKey'
 import componentClassNames from 'utility/componentClassNames'
 
 class Show extends BaseShow {
@@ -28,20 +28,6 @@ class Show extends BaseShow {
       )
   }
 
-  showResetPassword(item, lang){
-    this.props.showModal(
-      <div>
-        <p>{lang === 'zh' ?  '重置你的密钥密码,' : 'Reset your password, '}</p>
-        <ResetPassword
-          key='reset-password-form' // required by React
-          item={item}
-          lang={lang}
-          submitForm={this.props.resetForm}
-        />
-      </div>
-      )
-  }
-
   render() {
     const item = this.props.item
     const lang = this.props.lang
@@ -65,7 +51,7 @@ class Show extends BaseShow {
             title={lang === 'zh' ? '详情' : 'Details'}
             actions={[
               <button key='show-exportkey' className='btn btn-link' onClick={this.showExportKey.bind(this, item, lang)}> {lang === 'zh' ? '导出私钥' : 'Export Private Key' }</button>,
-              <button key='show-resetpassword' className='btn btn-link' onClick={this.showResetPassword.bind(this, item, lang)}> {lang === 'zh' ? '重置密码' : 'Reset Password' }</button>,
+              <Link className='btn btn-link' to={`/keys/${item.id}/reset-password`}>{lang === 'zh' ? '重置密码' : 'Reset Password' }</Link>
             ]}
             items={[
               {label: 'Alias', value: item.alias},
@@ -93,7 +79,6 @@ const mapStateToProps = (state, ownProps) => ({
 const mapDispatchToProps = ( dispatch ) => ({
   fetchItem: (id) => dispatch(actions.key.fetchItems({id: `${id}`})),
   exportKey: (item, fileName) => dispatch(actions.key.createExport(item, fileName)),
-  resetForm: (params) => dispatch(actions.key.submitResetForm(params)),
   showModal: (body) => dispatch(actions.app.showModal(
     body,
     actions.app.hideModal
index bf6ca41..c24a357 100644 (file)
@@ -1,9 +1,11 @@
 import List from './List'
 import New from './New'
 import Show from './Show'
+import ResetPassword from './ResetPassword/ResetPassword'
 
 export {
   List,
   New,
-  Show
+  Show,
+  ResetPassword
 }
index 5d9fbcf..09d07e2 100644 (file)
@@ -1,4 +1,11 @@
-import { List, New, Show } from './components'
+import { List, New, Show, ResetPassword } from './components'
 import { makeRoutes } from 'features/shared'
 
-export default (store) => makeRoutes(store, 'key', List, New, Show, null, { skipFilter: true, name: 'Keys', name_zh:'密钥' })
+export default (store) => makeRoutes(store, 'key', List, New, Show, null,
+  {
+    childRoutes: [
+      {
+        path: ':id/reset-password',
+        component: ResetPassword,
+      },
+    ],skipFilter: true, name: 'Keys', name_zh:'密钥' })