| | |
| | | import React, {Component} from 'react' |
| | | import { Form, Icon, Input, Button, Checkbox, Dropdown, Menu, message, Modal } from 'antd' |
| | | import { message } from 'antd' |
| | | import md5 from 'md5' |
| | | import moment from 'moment' |
| | | import Api from '@/api' |
| | |
| | | import enUS from '@/locales/en-US/login.js' |
| | | import options from '@/store/options.js' |
| | | import Utils from '@/utils/utils.js' |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import logourl from '../../assets/img/login-logo.png' |
| | | import './index.scss' |
| | | |
| | | const { warning } = Modal |
| | | const LoginForm = asyncComponent(() => import('./loginform')) |
| | | const iszhCN = !localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN' |
| | | |
| | | class Login extends Component { |
| | | constructor (props) { |
| | | super(props) |
| | | |
| | | const iszhCN = !localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN' |
| | | |
| | | this.state = { |
| | | langs: [{ |
| | | name: '中文简体', |
| | | value: 'zh-CN' |
| | | }, { |
| | | name: 'English', |
| | | value: 'en-US' |
| | | }], |
| | | selectedlang: iszhCN ? |
| | | { |
| | | name: '中文简体', |
| | | value: 'zh-CN' |
| | | } : |
| | | { |
| | | name: 'English', |
| | | value: 'en-US' |
| | | }, |
| | | dict: iszhCN ? zhCN : enUS, |
| | | isDisabled: false, |
| | | auth: false |
| | | } |
| | | state = { |
| | | selectedlang: iszhCN ? 'zh-CN' : 'en-US', |
| | | dict: iszhCN ? zhCN : enUS, |
| | | isDisabled: false, |
| | | auth: false |
| | | } |
| | | |
| | | changelang (item) { |
| | | // 切换语言 |
| | | this.setState({ |
| | | selectedlang: item, |
| | | dict: item.value === 'zh-CN' ? zhCN : enUS |
| | | dict: item === 'zh-CN' ? zhCN : enUS |
| | | }) |
| | | } |
| | | |
| | |
| | | return md5(md5(pwd + salt)) |
| | | } |
| | | |
| | | handleSubmit = e => { |
| | | // 登录参数检验 |
| | | e.preventDefault() |
| | | if (!this.state.auth) { |
| | | warning({ |
| | | title: this.state.dict['login.auth.tip'], |
| | | okText: this.state.dict['login.auth.ok'], |
| | | cancelText: this.state.dict['login.auth.cancel'], |
| | | onOk() {}, |
| | | onCancel() {} |
| | | }) |
| | | return |
| | | } |
| | | this.props.form.validateFields((err, values) => { |
| | | if (err) return |
| | | handleSubmit = () => { |
| | | this.loginformRef.handleConfirm().then(res => { |
| | | this.setState({ |
| | | isDisabled: true |
| | | }) |
| | | this.loginsubmit(values) |
| | | this.loginsubmit(res) |
| | | }) |
| | | } |
| | | |
| | |
| | | sessionStorage.setItem('UserID', res.UserID) |
| | | sessionStorage.setItem('SessionUid', Utils.getuuid()) |
| | | sessionStorage.setItem('LoginUID', res.LoginUID) |
| | | localStorage.setItem('lang', this.state.selectedlang.value) |
| | | localStorage.setItem('lang', param.lang) |
| | | |
| | | if (param.remember) { // 记住密码时账号密码存入localStorage |
| | | localStorage.setItem('username', param.username) |
| | |
| | | } |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | componentDidMount () { |
| | | let timeStamp = new Date().getTime() |
| | | let str = md5('MK19' + options.AppId + timeStamp) |
| | | Api.systemauth(options.AppId, timeStamp).then(res => { |
| | |
| | | } |
| | | }) |
| | | |
| | | // console.log(options) |
| | | // localStorage.setItem('AuthCode', [md5('mksoft' + moment().format('YYYYMMDD'))]) |
| | | |
| | | let authCode = localStorage.getItem('AuthCode') |
| | | let _s = md5('mksoft' + moment().format('YYYYMMDD')) |
| | | if (authCode && authCode.includes(_s)) { |
| | |
| | | } |
| | | } |
| | | |
| | | componentDidMount () { |
| | | const input = document.getElementById('username') |
| | | if (input) { |
| | | input.focus() |
| | | } |
| | | } |
| | | |
| | | render () { |
| | | const { getFieldDecorator } = this.props.form |
| | | const menu = ( |
| | | <Menu> |
| | | {this.state.langs.map((item, index) => { |
| | | return ( |
| | | <Menu.Item key={index} onClick={() => {this.changelang(item)}}> |
| | | <span>{item.name}</span> |
| | | </Menu.Item> |
| | | ) |
| | | })} |
| | | </Menu> |
| | | ) |
| | | return ( |
| | | <div className="login-container"> |
| | | <div className="logo"> |
| | | <img src={logourl} alt=""/> |
| | | </div> |
| | | <div className="login-middle"> |
| | | <Form onSubmit={this.handleSubmit} className="login-form"> |
| | | <h4>明科商业智能开放平台</h4> |
| | | <Form.Item> |
| | | {getFieldDecorator('username', { |
| | | rules: [{ required: true, message: this.state.dict['login.username.empty'] }], |
| | | initialValue: localStorage.getItem('username') || '', |
| | | })( |
| | | <Input |
| | | prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} |
| | | placeholder={this.state.dict['login.username']} |
| | | />, |
| | | )} |
| | | </Form.Item> |
| | | <Form.Item> |
| | | {getFieldDecorator('password', { |
| | | rules: [{ required: true, message: this.state.dict['login.password.empty'] }], |
| | | initialValue: localStorage.getItem('password') || '', |
| | | })( |
| | | <Input |
| | | prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} |
| | | type="password" |
| | | placeholder={this.state.dict['login.password']} |
| | | />, |
| | | )} |
| | | </Form.Item> |
| | | <Form.Item className="minline"> |
| | | {getFieldDecorator('remember', { |
| | | valuePropName: 'checked', |
| | | initialValue: true, |
| | | })(<Checkbox>{this.state.dict['login.remember']}</Checkbox>)} |
| | | <Dropdown overlay={menu} trigger={['click']} placement="bottomRight"> |
| | | <span className="ant-dropdown-link"> |
| | | {this.state.selectedlang.name} <Icon type="down" /> |
| | | </span> |
| | | </Dropdown> |
| | | </Form.Item> |
| | | <Form.Item className="btn-login"> |
| | | <Button type="primary" htmlType="submit" className="login-form-button" disabled={this.state.isDisabled} loading={this.state.isDisabled}> |
| | | {this.state.dict['login.submit']} |
| | | </Button> |
| | | </Form.Item> |
| | | </Form> |
| | | <LoginForm |
| | | dict={this.state.dict} |
| | | auth={this.state.auth} |
| | | lang={this.state.selectedlang} |
| | | isDisabled={this.state.isDisabled} |
| | | changelang={(value) => this.changelang(value)} |
| | | handleSubmit={() => this.handleSubmit()} |
| | | wrappedComponentRef={(inst) => this.loginformRef = inst} |
| | | /> |
| | | </div> |
| | | <div className="login-bottom"> |
| | | <p> |
| | |
| | | } |
| | | } |
| | | |
| | | export default Form.create()(Login) |
| | | export default Login |