add react版前端

web-react/src/views/login/index.jsx

@@ -0,0 +1,100 @@
+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'
+import 'assets/style/login.less'
+
+export default class index extends Component {
+
+    state = {
+        loading: false,
+
+        focusUser: false,
+        focusPassword: false
+    }
+
+    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 {
+                Message.error(message)
+            }
+        }).catch(({ message }) => {
+            if (typeof message === 'object' && message[0]) {
+                Message.error(message[0].messages[0])
+            }
+        })
+    }
+
+    render() {
+
+        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}>
+                            <Form.Item
+                                name="account"
+                                className={!this.state.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={!this.state.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={this.form.user === '' || this.form.password === ''}
+                                    loading={this.state.loading}
+                                    block
+                                    htmlType="submit"
+                                    size="large"
+                                    type="primary"
+                                >登录</Button>
+                            </Form.Item>
+                        </Form>
+                    </Container>
+                </div>
+            </div>
+        )
+    }
+}