import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Form, Icon, Input, Button, Modal, message } from 'antd'
|
import { UserOutlined } from '@ant-design/icons'
|
import md5 from 'md5'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import options from '@/store/options.js'
|
import './index.scss'
|
|
const { warning } = Modal
|
let LoginVerCodeTimer = null
|
|
class LoginTabForm extends Component {
|
static propTpyes = {
|
isDisabled: PropTypes.bool,
|
changelang: PropTypes.func,
|
handleSubmit: PropTypes.func,
|
dict: PropTypes.object,
|
auth: PropTypes.bool,
|
touristLogin: PropTypes.bool,
|
lang: PropTypes.string,
|
langList: PropTypes.array,
|
loginWays: PropTypes.array,
|
platName: PropTypes.string
|
}
|
|
state = {
|
activeKey: 'uname_pwd',
|
username: '',
|
password: '',
|
remember: true,
|
delay: null,
|
loginWays: [],
|
smsId: '',
|
verdisabled: false
|
}
|
|
UNSAFE_componentWillMount () {
|
const { loginWays } = this.props
|
let remember = true
|
let _url = window.location.href.split('#')[0]
|
|
if (localStorage.getItem(_url + 'remember') === 'false') {
|
remember = false
|
}
|
|
let smsId = ''
|
let _loginWays = []
|
loginWays.forEach(item => {
|
if (item.type === 'sms_vcode') {
|
smsId = item.smsId
|
_loginWays.push(item)
|
} else if (item.type === 'uname_pwd') {
|
_loginWays.push(item)
|
}
|
})
|
|
this.setState({
|
smsId: smsId,
|
loginWays: _loginWays,
|
activeKey: _loginWays[0].type,
|
remember
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.loginWays), fromJS(nextProps.loginWays))) {
|
let smsId = ''
|
let _loginWays = []
|
nextProps.loginWays.forEach(item => {
|
if (item.type === 'sms_vcode') {
|
smsId = item.smsId
|
_loginWays.push(item)
|
} else if (item.type === 'uname_pwd') {
|
_loginWays.push(item)
|
}
|
})
|
|
this.setState({
|
smsId: smsId,
|
loginWays: _loginWays,
|
activeKey: _loginWays[0].type
|
})
|
}
|
}
|
|
handleConfirm = () => {
|
const { activeKey } = this.state
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
resolve({type: activeKey, ...values})
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
changelang = (item) => {
|
this.props.changelang(item)
|
}
|
|
handleSubmit = e => {
|
const { activeKey } = this.state
|
// 登录参数检验
|
e.preventDefault()
|
if (!this.props.auth) {
|
warning({
|
title: this.props.dict['login.auth.tip'],
|
okText: this.props.dict['login.auth.ok'],
|
cancelText: this.props.dict['login.auth.cancel'],
|
onOk() {},
|
onCancel() {}
|
})
|
return
|
}
|
|
if (activeKey === 'uname_pwd') {
|
if (!this.props.form.getFieldValue('username')) {
|
const input = document.getElementById('username')
|
if (input) {
|
input.focus()
|
}
|
} else if (!this.props.form.getFieldValue('password')) {
|
const input = document.getElementById('password')
|
if (input) {
|
input.focus()
|
}
|
} else {
|
this.props.handleSubmit()
|
}
|
} else if (activeKey === 'sms_vcode') {
|
if (!this.props.form.getFieldValue('phone')) {
|
const input = document.getElementById('phone')
|
if (input) {
|
input.focus()
|
}
|
} else if (!this.props.form.getFieldValue('vercode')) {
|
const input = document.getElementById('vercode')
|
if (input) {
|
input.focus()
|
}
|
} else {
|
this.props.handleSubmit()
|
}
|
}
|
}
|
|
componentDidMount () {
|
let _url = window.location.href.split('#')[0]
|
let _user = localStorage.getItem(_url)
|
|
if (_user) {
|
try {
|
_user = JSON.parse(window.decodeURIComponent(window.atob(_user)))
|
} catch {
|
console.warn('Parse Failure')
|
_user = ''
|
}
|
}
|
|
if (_user) {
|
this.setState({
|
username: _user.username,
|
password: _user.password
|
}, () => {
|
const input = document.getElementById('username')
|
if (input) {
|
input.focus()
|
}
|
})
|
} else {
|
const input = document.getElementById('username')
|
if (input) {
|
input.focus()
|
}
|
}
|
}
|
|
onChangeTab = (activeKey) => {
|
this.setState({activeKey})
|
}
|
|
getvercode = () => {
|
const { smsId } = this.state
|
let _phone = this.props.form.getFieldValue('phone')
|
if (!_phone) {
|
message.warning('请输入手机号！')
|
return
|
} else if (!/^1[3456789]\d{9}$/.test(_phone)) {
|
message.warning('手机号格式错误，请重填！')
|
return
|
} else if (!this.props.touristLogin) {
|
message.warning('未获取验证码设置，请稍后或刷新重试！')
|
return
|
}
|
|
let _param = {
|
func: 'mes_sms_send_code_sso',
|
send_type: 'login',
|
mob: _phone,
|
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: 'login',
|
mob: _phone,
|
timestamp: moment().format('YYYY-MM-DD HH:mm:ss'),
|
ID: smsId,
|
n_id: res.n_id
|
}
|
|
param.LText = md5(`${_phone}mingke${window.GLOB.appkey}${param.timestamp}`)
|
param.secretkey = md5(`${param.LText}mingke${param.timestamp}`)
|
|
param.rduri = 'http://sso.mk9h.cn/webapi/dostars'
|
param.userid = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
param.LoginUID = 'bh0bapabtd45epsgra79segbch6c1ibk'
|
|
this.setState({
|
verdisabled: true,
|
delay: 60
|
})
|
LoginVerCodeTimer = setTimeout(this.resetVerCodeDelay, 1000)
|
|
Api.getLocalConfig(param).then(res => {
|
if (res.status) {
|
|
} else {
|
if (LoginVerCodeTimer) {
|
clearTimeout(LoginVerCodeTimer)
|
}
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
message.warning(res.message)
|
}
|
}, () => {
|
if (LoginVerCodeTimer) {
|
clearTimeout(LoginVerCodeTimer)
|
}
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
})
|
})
|
}
|
|
resetVerCodeDelay = () => {
|
const { delay } = this.state
|
if (delay && delay > 1) {
|
this.setState({delay: delay - 1})
|
LoginVerCodeTimer = setTimeout(this.resetVerCodeDelay, 1000)
|
} else {
|
this.setState({
|
verdisabled: false,
|
delay: null
|
})
|
}
|
}
|
|
rememberChange = (e) => {
|
let val = e.target.checked
|
let _url = window.location.href.split('#')[0]
|
|
localStorage.setItem(_url + 'remember', val)
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { activeKey, verdisabled, delay, loginWays } = this.state
|
|
return (
|
<Form className={`login-form login-form-${loginWays.length}`} id="login-form" onSubmit={this.handleSubmit}>
|
<p className="title">{this.props.platName}</p>
|
<div className="form-item-wrap">
|
{activeKey === 'uname_pwd' ? <Form.Item>
|
{getFieldDecorator('username', {
|
rules: [{ required: true, message: this.props.dict['login.username.empty'] }],
|
initialValue: this.state.username || '',
|
})(
|
<Input
|
prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
|
placeholder={this.props.dict['login.username']}
|
autoComplete="off"
|
/>,
|
)}
|
</Form.Item> : null}
|
{activeKey === 'uname_pwd' ? <Form.Item>
|
{getFieldDecorator('password', {
|
initialValue: this.state.password || '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['login.password.empty'],
|
}
|
]
|
})(<Input.Password placeholder={this.props.dict['login.password']} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />)}
|
</Form.Item> : null}
|
{activeKey === 'sms_vcode' ? <Form.Item>
|
{getFieldDecorator('phone', {
|
rules: [{ required: true, message: this.props.dict['login.phone.empty'] }],
|
initialValue: '',
|
})(
|
<Input
|
placeholder={this.props.dict['login.phone']}
|
autoComplete="off"
|
/>
|
)}
|
</Form.Item> : null}
|
{activeKey === 'sms_vcode' ? <Form.Item className="vercode">
|
{getFieldDecorator('vercode', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['login.vercode.empty'],
|
}
|
]
|
})(
|
<Input
|
addonAfter={
|
<Button type="link" className="vercode" size="small" disabled={verdisabled} onClick={this.getvercode}>
|
{delay ? this.props.dict['login.vercode.queryagain'].replace('@', delay) : this.props.dict['login.vercode.query']}
|
</Button>
|
}
|
placeholder={this.props.dict['login.vercode']}
|
autoComplete="off"
|
/>
|
)}
|
</Form.Item> : null}
|
{/* {activeKey === 'uname_pwd' ? <Form.Item className="minline">
|
{getFieldDecorator('remember', {
|
valuePropName: 'checked',
|
initialValue: remember,
|
})(<Checkbox onChange={this.rememberChange}>{this.props.dict['login.remember']}</Checkbox>)}
|
</Form.Item> : null} */}
|
{['uname_pwd', 'sms_vcode'].includes(activeKey) ? <Form.Item className="btn-login">
|
<Button type="primary" htmlType="submit" className="login-form-button" disabled={this.props.isDisabled} loading={this.props.isDisabled}>
|
{this.props.dict['login.submit']}
|
</Button>
|
</Form.Item> : null}
|
{options.sysType === 'cloud' && options.cdomain.indexOf('mk9h') > -1 ? <Form.Item className="register-line">
|
<a href="http://minkesoft.com/#/signup" target="_blank" rel="noopener noreferrer" className="register">注册</a>
|
<a href="http://minkesoft.com/#/forgotPwd" target="_blank" rel="noopener noreferrer" className="forgot">忘记密码？</a>
|
</Form.Item> : null}
|
</div>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(LoginTabForm)
|
