import React, {Component} from 'react'
|
import { Form, Input, Button, message } from 'antd'
|
import moment from 'moment'
|
import md5 from 'md5'
|
|
import Api from '@/api'
|
|
class Resetpwd extends Component {
|
state = {
|
confirmDirty: false,
|
autoCompleteResult: [],
|
level: localStorage.getItem(window.location.href.split('#')[0] + 'pwdlevel') || ''
|
}
|
|
LoginTimer = null
|
|
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' || level === 'char_num_90_sms') && value && /^[0-9a-zA-Z!@#$%^&*()_]*$/.test(value) && /^([^0-9]*|[^a-zA-Z]*|[^!@#$%^&*()_]*)$/.test(value)) {
|
callback('密码中必须含有数字、字母和特殊字符。')
|
} else {
|
callback()
|
}
|
}
|
|
getvercode = () => {
|
const { mob, smsId } = this.props
|
|
let _param = {
|
func: 'mes_sms_send_code_sso',
|
send_type: 'reset_pwd',
|
mob: mob,
|
ID: smsId
|
}
|
_param.LText = 'minke'
|
_param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
_param.secretkey = md5(`${_param.LText}mingke${_param.timestamp}`)
|
|
_param.userid = sessionStorage.getItem('visitorUserID') || ''
|
_param.LoginUID = sessionStorage.getItem('visitorLoginUID') || ''
|
|
Api.getSystemConfig(_param).then(res => {
|
if (!res.status || !res.n_id) {
|
message.warning(res.message || '验证码获取失败！')
|
return
|
}
|
|
let param = {
|
func: 'MSN_sms_send_code',
|
send_type: 'reset_pwd',
|
mob: mob,
|
timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
|
ID: smsId,
|
n_id: res.n_id
|
}
|
|
param.LText = md5(`${mob}mingke${window.GLOB.appkey}${param.timestamp}`)
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
param.rduri = 'https://sso.mk9h.cn/webapi/dostars'
|
param.userid = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
param.LoginUID = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
|
this.setState({
|
verdisabled: true,
|
delay: 60
|
})
|
|
this.LoginTimer = setTimeout(this.resetVerCodeDelay, 1000)
|
|
Api.genericInterface(param).then(res => {
|
if (res.status) {
|
|
} else {
|
clearTimeout(this.LoginTimer)
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
message.warning(res.message)
|
}
|
}, () => {
|
clearTimeout(this.LoginTimer)
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
})
|
})
|
}
|
|
resetVerCodeDelay = () => {
|
const { delay } = this.state
|
if (delay && delay > 1) {
|
this.setState({delay: delay - 1})
|
this.LoginTimer = setTimeout(this.resetVerCodeDelay, 1000)
|
} else {
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
}
|
}
|
|
render() {
|
const { type } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { level, delay, verdisabled } = this.state
|
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
let rules = []
|
if (level) {
|
rules.push({
|
min: 8,
|
message: '密码长度不可小于8位！'
|
})
|
}
|
|
return (
|
<>
|
{type === 'account' ? <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> : null}
|
{type === 'phonepwd' ? <Form {...formItemLayout} onKeyDown={(e) => e.key === 'Enter' && this.props.resetPwdSubmit()}>
|
<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> : null}
|
{type === 'mob' ? <Form {...formItemLayout} onKeyDown={(e) => e.key === 'Enter' && this.props.resetPwdSubmit()}>
|
<Form.Item label="手机号">
|
{getFieldDecorator('phone', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入手机号！'
|
}
|
]
|
})(<Input placeholder="请输入手机号" autoComplete="off" />)}
|
</Form.Item>
|
</Form> : null}
|
{type === 'code' ? <Form wrapperCol={{ xs: { span: 24 }, sm: { span: 20 }}} onKeyDown={(e) => e.key === 'Enter' && this.props.resetPwdSubmit()}>
|
<Form.Item className="vercode-line" label="">
|
{getFieldDecorator('vercode', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入验证码！'
|
}
|
]
|
})(<Input
|
addonAfter={
|
<Button type="link" size="small" disabled={verdisabled} onClick={this.getvercode}>
|
{delay ? `${delay}s后重新获取` : '获取验证码'}
|
</Button>
|
}
|
placeholder="请输入验证码"
|
autoComplete="off"
|
/>)}
|
</Form.Item>
|
</Form> : null}
|
</>
|
)
|
}
|
}
|
|
export default Form.create()(Resetpwd)
|
