| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Input, Button, Checkbox, Select, Modal, message } from 'antd' |
| | | import { UserOutlined, LockOutlined, QrcodeOutlined, RedoOutlined } from '@ant-design/icons' |
| | | import { Form, Input, Button, Checkbox, Select, Modal, message, AutoComplete } from 'antd' |
| | | import { UserOutlined, LockOutlined, QrcodeOutlined, RedoOutlined, CloseCircleOutlined } from '@ant-design/icons' |
| | | import md5 from 'md5' |
| | | import moment from 'moment' |
| | | |
| | |
| | | smsId: '', |
| | | verdisabled: false, |
| | | hasScan: false, |
| | | timeout: false |
| | | timeout: false, |
| | | users: [] |
| | | } |
| | | |
| | | timer = null |
| | |
| | | |
| | | let activeKey = _loginWays[0].type |
| | | |
| | | let users = localStorage.getItem(_url + 'users') |
| | | let _user = null |
| | | |
| | | if (users) { |
| | | try { |
| | | users = JSON.parse(window.decodeURIComponent(window.atob(users))) |
| | | } catch (e) { |
| | | users = [] |
| | | } |
| | | } else { |
| | | users = [] |
| | | } |
| | | |
| | | if (users[0]) { |
| | | _user = users[0] |
| | | } |
| | | |
| | | this.setState({ |
| | | users: users, |
| | | username: activeKey === 'uname_pwd' && _user ? _user.username : '', |
| | | password: activeKey === 'uname_pwd' && _user ? _user.password : '', |
| | | smsId: smsId, |
| | | loginWays: _loginWays, |
| | | activeKey, |
| | |
| | | handleSubmit = e => { |
| | | const { activeKey } = this.state |
| | | // 登录参数检验 |
| | | e.preventDefault() |
| | | e && e.preventDefault() |
| | | if (!this.props.auth) { |
| | | warning({ |
| | | title: this.props.authError || this.props.dict['login.auth.tip'], |
| | |
| | | |
| | | if (activeKey === 'uname_pwd') { |
| | | if (!this.props.form.getFieldValue('username')) { |
| | | const input = document.getElementById('username') |
| | | const wrap = document.getElementById('username') |
| | | const input = wrap ? wrap.getElementsByTagName('input')[0] : null |
| | | if (input) { |
| | | input.focus() |
| | | } |
| | |
| | | } |
| | | |
| | | 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 (e) { |
| | | 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() |
| | | } |
| | | const wrap = document.getElementById('username') |
| | | const input = wrap ? wrap.getElementsByTagName('input')[0] : null |
| | | if (input) { |
| | | input.focus() |
| | | } |
| | | } |
| | | |
| | |
| | | localStorage.setItem(_url + 'remember', val) |
| | | } |
| | | |
| | | complete = (val) => { |
| | | const { users } = this.state |
| | | |
| | | let user = users.filter(m => m.username === val)[0] |
| | | let password = user && user.password ? user.password : '' |
| | | |
| | | this.props.form.setFieldsValue({password: password}) |
| | | |
| | | if (!password) { |
| | | const input = document.getElementById('password') |
| | | if (input) { |
| | | input.focus() |
| | | } |
| | | } else { |
| | | this.handleSubmit() |
| | | } |
| | | } |
| | | |
| | | deleteUser = (e, val) => { |
| | | const { users } = this.state |
| | | |
| | | e.stopPropagation() |
| | | |
| | | let _users = users.filter(m => m.username !== val) |
| | | |
| | | this.setState({users: _users}) |
| | | |
| | | let _url = window.location.href.split('#')[0] |
| | | |
| | | localStorage.setItem(_url + 'users', window.btoa(window.encodeURIComponent(JSON.stringify(_users)))) |
| | | } |
| | | |
| | | /** |
| | | * @description 组件销毁,清除state更新 |
| | | */ |
| | |
| | | |
| | | render() { |
| | | const { getFieldDecorator } = this.props.form |
| | | const { activeKey, verdisabled, delay, loginWays, remember, scanId, timeout, hasScan } = this.state |
| | | const { activeKey, verdisabled, delay, loginWays, remember, scanId, timeout, hasScan, users } = this.state |
| | | const wayLabels = {app_scan: '扫码登录', uname_pwd: '账号登录', sms_vcode: '短信登录'} |
| | | |
| | | return ( |
| | |
| | | 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" |
| | | />, |
| | | <AutoComplete |
| | | className |
| | | dataSource={users.map((cell, i) => <AutoComplete.Option className="mk-user-option" value={cell.username} key={i}> |
| | | {cell.username} |
| | | <CloseCircleOutlined onClick={(e) => this.deleteUser(e, cell.username)}/> |
| | | </AutoComplete.Option>)} |
| | | filterOption={false} |
| | | onSelect={this.complete} |
| | | defaultActiveFirstOption={false} |
| | | defaultOpen={false} |
| | | optionLabelProp="value" |
| | | > |
| | | <Input |
| | | prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} |
| | | placeholder={this.props.dict['login.username']} |
| | | autoComplete="off" |
| | | /> |
| | | </AutoComplete> |
| | | )} |
| | | </Form.Item> |
| | | <Form.Item> |