128 lines
4.9 KiB
JavaScript
128 lines
4.9 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Button, Form, Input, message as Message } from 'antd'
|
|
import Container from 'components/container'
|
|
import { encryptByRSA } from 'util/rsa'
|
|
import { RSA_PUBLIC_KEY } from 'util/global'
|
|
import { api } from 'common/api'
|
|
import { token } from 'common/token'
|
|
|
|
export default class index extends Component {
|
|
state = {
|
|
loading: false,
|
|
|
|
focusUser: false,
|
|
focusPassword: false,
|
|
|
|
btnDisabled: true,
|
|
}
|
|
|
|
backgroundImage = require(`assets/image/login-bg-0${Math.floor(Math.random() * 4)}.jpg`)
|
|
|
|
focus = {
|
|
user: false,
|
|
password: false,
|
|
}
|
|
|
|
form = React.createRef()
|
|
|
|
onLogin = values => {
|
|
this.setState({ loading: true })
|
|
|
|
let { account, password } = values
|
|
password = encryptByRSA(password, RSA_PUBLIC_KEY)
|
|
api.login({ account, password })
|
|
.then(({ success, data, message }) => {
|
|
if (success) {
|
|
token.value = data
|
|
Message.success('登录成功')
|
|
this.props.history.replace('/')
|
|
} else {
|
|
this.setState({ loading: false })
|
|
Message.error(message)
|
|
}
|
|
})
|
|
.catch(({ message }) => {
|
|
if (typeof message === 'object' && message[0]) {
|
|
Message.error(message[0].messages[0])
|
|
}
|
|
this.setState({ loading: false })
|
|
})
|
|
}
|
|
|
|
render() {
|
|
const { loading, focusUser, focusPassword, btnDisabled } = this.state
|
|
|
|
return (
|
|
<div className="yo-login">
|
|
<img src={this.backgroundImage.default} alt="" />
|
|
<div className="yo-login--placeholder">
|
|
<Container mode="sm">
|
|
<Form
|
|
ref={this.form}
|
|
layout="vertical"
|
|
onFinish={this.onLogin}
|
|
onValuesChange={(changedValues, values) => {
|
|
this.setState({
|
|
btnDisabled: !values.account || !values.password,
|
|
})
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name="account"
|
|
className={!focusUser && 'yo-login--label'}
|
|
colon={false}
|
|
label="用户名"
|
|
>
|
|
<Input
|
|
onBlur={() => {
|
|
this.setState({
|
|
focusUser: !!this.form.current.getFieldValue('account'),
|
|
})
|
|
}}
|
|
onFocus={() => {
|
|
this.setState({ focusUser: true })
|
|
}}
|
|
size="large"
|
|
autoComplete="off"
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
className={!focusPassword && 'yo-login--label'}
|
|
colon={false}
|
|
label="密码"
|
|
>
|
|
<Input.Password
|
|
onBlur={() => {
|
|
this.setState({
|
|
focusPassword:
|
|
!!this.form.current.getFieldValue('password'),
|
|
})
|
|
}}
|
|
onFocus={() => {
|
|
this.setState({ focusPassword: true })
|
|
}}
|
|
size="large"
|
|
autoComplete="off"
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item className="mt-lg">
|
|
<Button
|
|
disabled={btnDisabled}
|
|
loading={loading}
|
|
block
|
|
htmlType="submit"
|
|
size="large"
|
|
type="primary"
|
|
>
|
|
登录
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</Container>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
}
|