import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Input, Checkbox } from 'antd'
|
import { UserOutlined, LockOutlined } from '@ant-design/icons'
|
|
import zhCN from '@/locales/zh-CN/login.js'
|
import enUS from '@/locales/en-US/login.js'
|
import './index.scss'
|
|
class HeaderLoginForm extends Component {
|
static propTpyes = {
|
handleSubmit: PropTypes.func
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
remember: false,
|
username: '',
|
password: '',
|
oripassword: '',
|
delay: +sessionStorage.getItem('mkDelay')
|
}
|
|
UNSAFE_componentWillMount () {
|
let _url = window.location.href.split('#')[0] + 'cloud'
|
let _user = localStorage.getItem(_url)
|
|
if (_user) {
|
try {
|
_user = JSON.parse(window.decodeURIComponent(window.atob(_user)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_user = ''
|
}
|
}
|
|
if (_user && new Date().getTime() - _user.time > 1000 * 7 * 24 * 60 * 60) {
|
_user = ''
|
localStorage.removeItem(_url)
|
}
|
|
if (_user) {
|
this.setState({
|
remember: true,
|
username: _user.username,
|
password: _user.password ? '*********' : '',
|
oripassword: _user.password
|
})
|
}
|
}
|
|
handleConfirm = () => {
|
const { oripassword } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
if (oripassword && values.password === '*********') {
|
values.password = oripassword
|
}
|
|
values.username = values.username.replace(/\t+|\v+|\s+/g, '')
|
values.password = values.password.replace(/\t+|\v+|\s+/g, '')
|
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
handleSubmit = (e, key) => {
|
e.preventDefault()
|
if (e.target.value) {
|
if (!this.props.form.getFieldValue(key)) {
|
const input = document.getElementById(key)
|
input && input.focus()
|
return
|
}
|
this.props.handleSubmit()
|
} else {
|
this.handleConfirm()
|
}
|
}
|
|
rememberChange = (e) => {
|
let val = e.target.checked
|
let _url = window.location.href.split('#')[0] + 'cloud'
|
|
if (!val) {
|
localStorage.removeItem(_url)
|
}
|
}
|
|
componentDidMount () {
|
const { username, password } = this.state
|
|
if (username && !password) {
|
const input = document.getElementById('password')
|
input && input.focus()
|
} else {
|
const input = document.getElementById('username')
|
input && input.focus()
|
}
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { remember, username, password, delay } = this.state
|
|
return (
|
<Form style={{margin: '0px 10px'}}>
|
{delay > 1000 ? <Form.Item style={{marginBottom: '0px', marginTop: '-10px'}}>
|
升级到<a target="_blank" rel="noopener noreferrer" href="https://cloud.mk9h.cn/admin/index.html">企业版</a>，获得更高效的开发体验。
|
</Form.Item> : null}
|
<Form.Item style={{marginBottom: '0px', height: '60px'}}>
|
{getFieldDecorator('username', {
|
rules: [{ required: true, message: this.state.dict['login.username.empty'] }],
|
initialValue: username,
|
})(
|
<Input
|
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }}/>}
|
placeholder={this.state.dict['login.username']}
|
autoComplete="off"
|
onPressEnter={(e) => {this.handleSubmit(e, 'password')}}
|
/>
|
)}
|
</Form.Item>
|
<Form.Item style={{marginBottom: '0px', height: '55px'}}>
|
{getFieldDecorator('password', {
|
initialValue: password,
|
rules: [
|
{
|
required: true,
|
message: this.state.dict['login.password.empty'],
|
}
|
]
|
})(<Input.Password onPressEnter={(e) => {this.handleSubmit(e, 'username')}} placeholder={this.state.dict['login.password']} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
|
</Form.Item>
|
{window.GLOB.keepKey ? <Form.Item style={{marginBottom: '10px'}}>
|
{getFieldDecorator('remember', {
|
valuePropName: 'checked',
|
initialValue: remember,
|
})(
|
<Checkbox onChange={this.rememberChange}>记住密码</Checkbox>)}
|
</Form.Item> : <div style={{height: '20px'}}></div>}
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(HeaderLoginForm)
|
