import React, {Component} from 'react'
|
import { Form, Input } from 'antd'
|
|
class Resetpwd extends Component {
|
state = {
|
confirmDirty: false,
|
autoCompleteResult: [],
|
level: localStorage.getItem(window.location.href.split('#')[0] + 'pwdlevel') || ''
|
}
|
|
onEnterSubmit = (e) => {
|
// 表单回车提交
|
if (e.key !== 'Enter') return
|
|
if (!this.props.form.getFieldValue('originpwd')) {
|
this.focusInput('originpwd')
|
} else if (!this.props.form.getFieldValue('password')) {
|
this.focusInput('password')
|
} else if (!this.props.form.getFieldValue('confirm')) {
|
this.focusInput('confirm')
|
} else {
|
this.props.resetPwdSubmit()
|
}
|
}
|
|
focusInput = (selectId) => {
|
let _form = document.getElementById('reset-password-form')
|
let _inputs = _form.getElementsByTagName('input')
|
_inputs = [..._inputs]
|
_inputs.forEach(input => {
|
if (!input || input.id !== selectId) return
|
|
if (input.focus) {
|
input.focus()
|
}
|
})
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
handleConfirmBlur = e => {
|
const { value } = e.target
|
this.setState({ confirmDirty: this.state.confirmDirty || !!value })
|
}
|
|
compareToFirstPassword = (rule, value, callback) => {
|
const { form } = this.props
|
if (value && value !== form.getFieldValue('password')) {
|
callback('两次输入密码不一致！')
|
} else {
|
callback()
|
}
|
}
|
|
validateToNextPassword = (rule, value, callback) => {
|
const { form } = this.props
|
const { level } = this.state
|
|
if (value && this.state.confirmDirty) {
|
form.validateFields(['confirm'], { force: true })
|
}
|
|
if (level === 'letter_num' && value && /^[0-9a-zA-Z!@#$%^&*()_]*$/.test(value) && /^([^0-9]*|[^a-zA-Z]*)$/.test(value)) {
|
callback('密码中必须含有数字和字母。')
|
} else if ((level === 'char_num' || level === 'char_num_90') && value && /^[0-9a-zA-Z!@#$%^&*()_]*$/.test(value) && /^([^0-9]*|[^a-zA-Z]*|[^!@#$%^&*()_]*)$/.test(value)) {
|
callback('密码中必须含有数字、字母和特殊字符。')
|
} else {
|
callback()
|
}
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { level } = this.state
|
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
let rules = []
|
if (level) {
|
rules.push({
|
min: 8,
|
message: '密码长度不可小于8位！'
|
})
|
}
|
|
return (
|
<Form {...formItemLayout} onKeyDown={this.onEnterSubmit} id="reset-password-form">
|
<Form.Item label="原密码">
|
{getFieldDecorator('originpwd', {
|
rules: [
|
{
|
required: true,
|
message: '请输入原密码！'
|
}
|
]
|
})(<Input.Password autoFocus/>)}
|
</Form.Item>
|
<Form.Item label="新密码" hasFeedback>
|
{getFieldDecorator('password', {
|
rules: [
|
{
|
required: true,
|
message: '请输入新密码！'
|
},
|
{
|
pattern: /^[0-9a-zA-Z!@#$%^&*()_]*$/ig,
|
message: '密码只允许包含数字、字母以及!@#$%&*()_。'
|
},
|
...rules,
|
{
|
max: 50,
|
message: '最大密码长度为50位！'
|
},
|
{
|
validator: this.validateToNextPassword
|
}
|
]
|
})(<Input.Password />)}
|
</Form.Item>
|
<Form.Item label="确认密码" hasFeedback>
|
{getFieldDecorator('confirm', {
|
rules: [
|
{
|
required: true,
|
message: '请确认密码！'
|
},
|
{
|
validator: this.compareToFirstPassword
|
}
|
]
|
})(<Input.Password onBlur={this.handleConfirmBlur} />)}
|
</Form.Item>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(Resetpwd)
|
