2022-02-09

king

2022-02-09 d59f518f466274b2caeb2e01c10c92deafe7c93b

 src/components/header/resetpwd/index.jsx

@@ -1,21 +1,39 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Input } from 'antd'

class Resetpwd extends Component {
  static propTpyes = {
    dict: PropTypes.object
  }

  state = {
    confirmDirty: false,
    autoCompleteResult: []
    autoCompleteResult: [],
    level: localStorage.getItem(window.location.href.split('#')[0] + 'pwdlevel') || ''
  }

  onEnterSubmit = (e) => {
    // 表单回车提交
    if (e.key !== 'Enter') return
    this.props.resetPwdSubmit()
    
    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 = () => {
@@ -39,7 +57,7 @@
  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props
    if (value && value !== form.getFieldValue('password')) {
      callback(this.props.dict['main.password.diff'])
      callback('两次输入密码不一致！')
    } else {
      callback()
    }
@@ -47,14 +65,24 @@

  validateToNextPassword = (rule, value, callback) => {
    const { form } = this.props
    const { level } = this.state

    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], { force: true })
    }
    callback()

    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: {
@@ -63,36 +91,45 @@
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
        sm: { span: 14 }
      }
    }

    let rules = []
    if (level) {
      rules.push({
        min: 8,
        message: '密码长度不可小于8位！'
      })
    }

    return (
      <Form {...formItemLayout} onKeyDown={this.onEnterSubmit}>
        <Form.Item label={this.props.dict['main.password.origin']}>
      <Form {...formItemLayout} onKeyDown={this.onEnterSubmit} id="reset-password-form">
        <Form.Item label="原密码">
          {getFieldDecorator('originpwd', {
            rules: [
              {
                required: true,
                message: this.props.dict['main.password.origin.required']
                message: '请输入原密码！'
              }
            ]
          })(<Input.Password />)}
          })(<Input.Password autoFocus/>)}
        </Form.Item>
        <Form.Item label={this.props.dict['main.password.new']} hasFeedback>
        <Form.Item label="新密码" hasFeedback>
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: this.props.dict['main.password.new.required']
                message: '请输入新密码！'
              },
              {
                pattern: /^[0-9a-zA-Z!@#$%^&*()_]*$/ig,
                message: '密码只允许包含数字、字母以及!@#$%&*()_。'
              },
              ...rules,
              {
                max: 50,
                message: this.props.dict['main.password.maxlen']
                message: '最大密码长度为50位！'
              },
              {
                validator: this.validateToNextPassword
@@ -100,12 +137,12 @@
            ]
          })(<Input.Password />)}
        </Form.Item>
        <Form.Item label={this.props.dict['main.password.confirm']} hasFeedback>
        <Form.Item label="确认密码" hasFeedback>
          {getFieldDecorator('confirm', {
            rules: [
              {
                required: true,
                message: this.props.dict['main.password.confirm.required']
                message: '请确认密码！'
              },
              {
                validator: this.compareToFirstPassword