95 lines
3.7 KiB
JavaScript
95 lines
3.7 KiB
JavaScript
import React from 'react';
|
|
import styles from './Login.less';
|
|
import config from '../../config/config';
|
|
import {Button, Form, Input, Row, message, Spin} from 'antd';
|
|
|
|
const FormItem = Form.Item;
|
|
|
|
const Login = (props) => {
|
|
|
|
const {codeModel, onLogin, refreshCode, pageLoading} = props;
|
|
|
|
const [form] = Form.useForm();
|
|
const {getFieldsValue, validateFields, resetFields} = form;
|
|
|
|
const login = () => {
|
|
validateFields().then(values => {
|
|
if (values["code"].toLowerCase() != codeModel.code.toLowerCase()) {
|
|
message.warning("输入的验证码有误！");
|
|
return;
|
|
}
|
|
|
|
if (new Date().getTime() - new Date(codeModel.createTime).getTime() > 1000 * 60) {
|
|
message.warning("验证码已过期，请重新输入！");
|
|
resetFields("code");
|
|
return;
|
|
}
|
|
onLogin(values);
|
|
}).catch(error => {
|
|
console.log("===== 登陆验证失败 =====");
|
|
});
|
|
};
|
|
|
|
const onKeyEnter = (e) => {
|
|
if (e.keyCode === 13) {
|
|
login()
|
|
}
|
|
};
|
|
|
|
const createLoginForm = () => {
|
|
return (
|
|
<Form initialValues={{}} form={form}>
|
|
<Row align="center">
|
|
<div className={styles.loginFont}>用户登录</div>
|
|
</Row>
|
|
<Row align="center">
|
|
<FormItem name={"userName"} rules={[{required: true, message: "请输入用户名!"}]}>
|
|
<Input style={{ width: "240px" }} placeholder={"请输入用户名"} prefix={<i className="ri-user-3-line" style={{ color: '#506c86' }}></i>}/>
|
|
</FormItem>
|
|
</Row>
|
|
<Row align="center">
|
|
<FormItem name={"password"} rules={[{ required: true, message: "请输入密码!" }]}>
|
|
<Input.Password style={{ width: "240px" }} placeholder={"请输入密码"} prefix={<i className="ri-lock-password-line" style={{ color: '#506c86' }}></i>}/>
|
|
</FormItem>
|
|
</Row>
|
|
<Row align="center" style={{ marginLeft: "-110px" }}>
|
|
<FormItem name={"code"} rules={[{ required: true, message: "请输入验证码!" }]}>
|
|
<Input placeholder={"请输入验证码"} style={{ width: "130px" }} onPressEnter={onKeyEnter} prefix={<i className="ri-shield-flash-line" style={{ color: '#506c86' }}></i>} />
|
|
</FormItem>
|
|
</Row>
|
|
<Row style={{ marginTop: "-56px", float: "right" }}>
|
|
<img onClick={refreshCode} src={codeModel ? "data:image/png;base64," + codeModel.binary : "default.png"} style={{height: "32px", width: "100px"}}/>
|
|
</Row>
|
|
<Row align="center">
|
|
<Button type="primary" style={{ width: "100%" }} onClick={login}>登录</Button>
|
|
</Row>
|
|
</Form>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div id={"loginDiv"}>
|
|
<Spin spinning={pageLoading} size={"large"} tip={"数据加载中，请稍候！"}>
|
|
<div style={{ display: "flex", flexDirection: "row", padding: "5% 5% 0 5%" }}>
|
|
<div style={{ background: "#ffffff", padding: "40px" }}>
|
|
<div style={{ position: "absolute", padding: "12px 0px 0px 8px" }}>
|
|
<i className="ri-global-fill" style={{ fontSize: "35px", marginLeft: "5px", marginTop: "-12px", float: "left" }}></i>
|
|
<div className={styles.logoFont}>{config.name}</div>
|
|
</div>
|
|
<img src={require("../../assets/login.jpg")} style={{ background: "#ffffff", width: "100%", height: "100%" }} />
|
|
</div>
|
|
<div style={{ background: "#ffffff", padding: "40px 40px 40px 0px" }}>
|
|
<div className={styles.welcomeDiv}>欢迎使用{config.name}</div>
|
|
<div className={styles.inputDiv}>
|
|
{ createLoginForm() }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.login_footer_copyright_div}>{config.footerText}</div>
|
|
</Spin>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|
