312 lines
11 KiB
TypeScript
312 lines
11 KiB
TypeScript
|
import React, { useEffect, useState } from 'react';
|
|||
|
|
import { Form, Button, Input, Row, Col, Modal, Spin, message } from 'antd';
|
|||
|
|
import { UserOutlined, LockOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
|
|||
|
|
import './style.less';
|
|||
|
|
import { changePass } from './service';
|
|||
|
|
import logo from '@/images/login/logoPic.png';
|
|||
|
|
import { refreshTokenApi, ZjfakeAccountLogin } from '@/services/login';
|
|||
|
|
import { history } from 'umi';
|
|||
|
|
import cookie from 'react-cookies';
|
|||
|
|
import moment from 'moment';
|
|||
|
|
|
|||
|
|
const layout = {
|
|||
|
|
labelCol: { span: 7 },
|
|||
|
|
wrapperCol: { span: 13 },
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const Index: React.FC<{}> = () => {
|
|||
|
|
const [form] = Form.useForm();
|
|||
|
|
const [imgUrl, setImgUrl] = useState<any>('');
|
|||
|
|
const [tmpToken, setTmpToken] = useState<any>('');
|
|||
|
|
const remainingTime = 3 //刷新token的剩余时间，单位小时
|
|||
|
|
const [changeForm] = Form.useForm();
|
|||
|
|
const [isModalVisible, setIsModalVisible] = useState<boolean>(false)
|
|||
|
|
const [spinning, setSping] = useState<boolean>(false);//加载遮罩
|
|||
|
|
|
|||
|
|
const genRandomString = (len: number) => {
|
|||
|
|
const text = 'abcdefghijklmnopqrstuvwxyz0123456789';
|
|||
|
|
const rdmIndex = (text: string | any[]) => (Math.random() * text.length) | 0;
|
|||
|
|
let rdmString = '';
|
|||
|
|
for (; rdmString.length < len; rdmString += text.charAt(rdmIndex(text)));
|
|||
|
|
return rdmString;
|
|||
|
|
};
|
|||
|
|
const changeCaptcha = () => {
|
|||
|
|
let tmpToken = genRandomString(16);
|
|||
|
|
let url = '/api/auth/captcha?token=' + tmpToken;
|
|||
|
|
setTmpToken(tmpToken);
|
|||
|
|
setImgUrl(url);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//登录刷新Token方法
|
|||
|
|
const refreshToken = async (data: any) => {
|
|||
|
|
const params = {
|
|||
|
|
grant_type: "refresh_token",
|
|||
|
|
refresh_token: data?.refreshToken?.value,
|
|||
|
|
client_id: REACT_APP_CLIENT_KEY,
|
|||
|
|
client_secret: REACT_APP_CLIENT_SECRET,
|
|||
|
|
}
|
|||
|
|
const header = {
|
|||
|
|
clientId: REACT_APP_CLIENT_KEY,
|
|||
|
|
}
|
|||
|
|
await refreshTokenApi(params, header).then(res => {
|
|||
|
|
if (res?.success == true) {
|
|||
|
|
sessionStorage.setItem('Authorization', res?.data?.value);
|
|||
|
|
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
|||
|
|
sessionStorage.setItem('scope', res?.data?.scope);
|
|||
|
|
history.push('/redirect');
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSubmit = async (values: any) => {
|
|||
|
|
await ZjfakeAccountLogin({ ...values, tmpToken }).then((res) => {
|
|||
|
|
if (res?.success) {
|
|||
|
|
if (moment(res?.data?.expiration).diff(moment(), 'hours') < remainingTime) {
|
|||
|
|
refreshToken(res?.data)
|
|||
|
|
} else {
|
|||
|
|
sessionStorage.setItem('Authorization', res?.data?.value);
|
|||
|
|
sessionStorage.setItem('refreshToken', res?.data?.refreshToken.value);
|
|||
|
|
sessionStorage.setItem('scope', res?.data?.scope);
|
|||
|
|
history.push('/redirect');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
changeCaptcha();
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleOk = () => { // 确定修改密码
|
|||
|
|
if (changeForm.getFieldValue("newPassword") !== changeForm.getFieldValue("newPassword1")) {
|
|||
|
|
message.warn('两次密码输入不一致，请重新输入')
|
|||
|
|
} else {
|
|||
|
|
changeForm.validateFields().then(res => {
|
|||
|
|
setSping(true);
|
|||
|
|
const date = {
|
|||
|
|
identityCard: changeForm.getFieldValue("identityCard"),
|
|||
|
|
oldPassword: changeForm.getFieldValue("oldPassword"),
|
|||
|
|
newPassword: changeForm.getFieldValue("newPassword"),
|
|||
|
|
};
|
|||
|
|
changePass({ ...date }).then(res => {
|
|||
|
|
if (res.success) {
|
|||
|
|
setSping(false);
|
|||
|
|
setIsModalVisible(false)
|
|||
|
|
message.success('修改密码成功');
|
|||
|
|
changeForm.resetFields()
|
|||
|
|
} else {
|
|||
|
|
setSping(false);
|
|||
|
|
}
|
|||
|
|
}).finally(() => {
|
|||
|
|
setSping(false);
|
|||
|
|
});;
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
cookie.remove('mall3_token');
|
|||
|
|
sessionStorage.clear();
|
|||
|
|
changeCaptcha();
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Spin spinning={spinning}>
|
|||
|
|
<div className="login-box">
|
|||
|
|
<div className="top">
|
|||
|
|
<img src={logo} />
|
|||
|
|
<h3>中国联通智慧供应链平台 | 招标采购中心</h3>
|
|||
|
|
<Button className="change" danger style={{ borderColor: '#b30000', color: '#b30000' }} onClick={() => (setIsModalVisible(true), changeForm.resetFields())}>修改密码</Button>
|
|||
|
|
</div>
|
|||
|
|
<div className="main">
|
|||
|
|
<div className="text">
|
|||
|
|
<h3>登 录</h3>
|
|||
|
|
<Form
|
|||
|
|
name="basic"
|
|||
|
|
className="form-box"
|
|||
|
|
initialValues={{ remember: true }}
|
|||
|
|
form={form}
|
|||
|
|
onFinish={handleSubmit}
|
|||
|
|
// onFinishFailed={onFinishFailed}
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
label=""
|
|||
|
|
name="userName"
|
|||
|
|
rules={[{ required: true, message: '请输入用户名!' }]}
|
|||
|
|
>
|
|||
|
|
<Input
|
|||
|
|
prefix={
|
|||
|
|
<UserOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
|
|||
|
|
}
|
|||
|
|
placeholder="请输入用户名"
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
label=""
|
|||
|
|
name="password"
|
|||
|
|
rules={[{ required: true, message: '请输入密码!' }]}
|
|||
|
|
>
|
|||
|
|
<Input.Password
|
|||
|
|
prefix={
|
|||
|
|
<LockOutlined style={{ fontSize: '18px' }} className="site-form-item-icon" />
|
|||
|
|
}
|
|||
|
|
placeholder="请输入密码"
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
|
|||
|
|
<Row>
|
|||
|
|
<Col span={14}>
|
|||
|
|
<Form.Item
|
|||
|
|
label=""
|
|||
|
|
name="captcha"
|
|||
|
|
rules={[{ required: true, message: '请输入验证码!' }]}
|
|||
|
|
>
|
|||
|
|
<Input
|
|||
|
|
prefix={
|
|||
|
|
<SafetyCertificateOutlined
|
|||
|
|
style={{ fontSize: '18px' }}
|
|||
|
|
className="site-form-item-icon"
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
placeholder="请输入验证码"
|
|||
|
|
/>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Col>
|
|||
|
|
<Col span={10}>
|
|||
|
|
<img className="verification" onClick={() => changeCaptcha()} src={imgUrl} />
|
|||
|
|
</Col>
|
|||
|
|
</Row>
|
|||
|
|
|
|||
|
|
{/* <Form.Item className="remember" name="remember" valuePropName="checked">
|
|||
|
|
<Checkbox>记住密码</Checkbox>
|
|||
|
|
</Form.Item> */}
|
|||
|
|
<Form.Item>
|
|||
|
|
<Button type="primary" className="w100" htmlType="submit">
|
|||
|
|
登 录
|
|||
|
|
</Button>
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/* <div className="footer">版权所有：中国联合网络通信有限公司</div> */}
|
|||
|
|
<Modal
|
|||
|
|
title="修改密码"
|
|||
|
|
visible={isModalVisible}
|
|||
|
|
onCancel={() => setIsModalVisible(false)}
|
|||
|
|
footer={[
|
|||
|
|
<Button onClick={() => handleOk()} loading={spinning}>确 定</Button>,
|
|||
|
|
<Button onClick={() => setIsModalVisible(false)}>取 消</Button>
|
|||
|
|
]}
|
|||
|
|
width={600}
|
|||
|
|
>
|
|||
|
|
<Spin spinning={spinning}>
|
|||
|
|
<Form
|
|||
|
|
{...layout}
|
|||
|
|
name="basic"
|
|||
|
|
form={changeForm}
|
|||
|
|
>
|
|||
|
|
<Form.Item
|
|||
|
|
label="身份证(用户名)"
|
|||
|
|
name="identityCard"
|
|||
|
|
rules={[
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: '请输入身份证(用户名)',
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
label="原密码"
|
|||
|
|
name="oldPassword"
|
|||
|
|
rules={[
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: '请输入原始密码',
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input.Password />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
label="新密码"
|
|||
|
|
name="newPassword"
|
|||
|
|
rules={[
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
validator: (rule, value, callback) => {
|
|||
|
|
const oNumber = new RegExp(/\d/);
|
|||
|
|
const oLetter = new RegExp(/[a-zA-Z]/);
|
|||
|
|
const oSpecial = '.~!@#$%^&*()_+=-{}|:<>?,./[]-;\\"';
|
|||
|
|
if (!value) {
|
|||
|
|
callback('请输入新密码');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (value.length < 6) {
|
|||
|
|
callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
[...value].forEach(val => {
|
|||
|
|
if (
|
|||
|
|
!(
|
|||
|
|
oNumber.test(val) ||
|
|||
|
|
oLetter.test(val) ||
|
|||
|
|
oSpecial.indexOf(val) >= 0
|
|||
|
|
)
|
|||
|
|
) {
|
|||
|
|
throw new Error();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
|
|||
|
|
}
|
|||
|
|
const contain: boolean[] = [];
|
|||
|
|
[...value].forEach(val => {
|
|||
|
|
if (oNumber.test(val)) {
|
|||
|
|
contain[0] = true;
|
|||
|
|
}
|
|||
|
|
if (oLetter.test(val)) {
|
|||
|
|
contain[1] = true;
|
|||
|
|
}
|
|||
|
|
if (oSpecial.indexOf(val) >= 0) {
|
|||
|
|
contain[2] = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if (contain.filter(item => item === true).length < 2) {
|
|||
|
|
callback('密码不能小于六位，至少含字母、数字、特殊字符其中的2种！');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
callback();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]}
|
|||
|
|
// rules={[
|
|||
|
|
// {
|
|||
|
|
// required: true,
|
|||
|
|
// message: '请输入新密码',
|
|||
|
|
// },
|
|||
|
|
// ]}
|
|||
|
|
>
|
|||
|
|
<Input.Password />
|
|||
|
|
</Form.Item>
|
|||
|
|
<Form.Item
|
|||
|
|
label="新密码确认"
|
|||
|
|
name="newPassword1"
|
|||
|
|
rules={[
|
|||
|
|
{
|
|||
|
|
required: true,
|
|||
|
|
message: '请再次输入新密码',
|
|||
|
|
},
|
|||
|
|
]}
|
|||
|
|
>
|
|||
|
|
<Input.Password />
|
|||
|
|
</Form.Item>
|
|||
|
|
</Form>
|
|||
|
|
</Spin>
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
</Spin>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default Index;
|