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;
|