Commit a88a6ca9 authored by 许佳敏's avatar 许佳敏

Merge branch 'cherry-pick-cd90bd38' into 'v2-miju-srm'

fix: 修改密码验证组件以及错误提示 - 账户安全模块 See merge request linkseeks-design/pro-platform!23
parents 4a7cedcc a74699ef
.box { .box {
z-index: 99; z-index: 99;
.container {
height: 32px;
line-height: 32px;
font-size: 14px;
background: #EBF7F2;
border: 1px solid #00B37A;
margin: 8px 0 32px 0;
width: 495px;
cursor: pointer;
position: relative;
.btn {
color: #00B37A;
text-align: center;
}
}
} }
.container { .risk {
height: 32px; display: flex;
line-height: 32px; flex-direction: column;
font-size: 14px; align-items: center;
background: #EBF7F2; }
border: 1px solid #00B37A;
margin: 8px 0 32px 0;
width: 495px;
cursor: pointer;
position: relative;
.btn {
color: #00B37A;
text-align: center;
}
}
.sliderVerify {
position: absolute;
top: 50%;
left: 50%;
// background-color: #fff;
z-index: 99;
// transform: translateX(-130px);
margin-left: -130px;
margin-top: -136px;
}
\ No newline at end of file
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import styles from './index.less'; import styles from './index.less';
import { Row, Col } from 'antd'; import { Row, Col, Modal, message } from 'antd';
import SliderVerify from '../SliderVerify'; // import SliderVerify from '../SliderVerify';
import { useIntl} from 'umi' import { useIntl} from 'umi'
import { RiskCheck } from '@linkseeks/god';
import { decryptedByAES } from '@/utils/cryptoAes';
import { getMemberCaptcha } from '@/services/MemberV2Api';
// const imageUrl = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg'
const imageUrl = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1689053532,4230915864&fm=26&gp=0.jpg' // 滑块尺寸
const FLAG_SIZE = 60
const IMG_WIDTH = 352
const IMG_HEIGHT = 180
const SafeVerification = (props) => { interface Iprops {
isDisabled: boolean
handleVerifySuccess: () => void,
tips?: string
}
const SafeVerification: React.FC<Iprops> = (props) => {
const intl = useIntl(); const intl = useIntl();
const { isDisabled, tips = intl.formatMessage({id: 'accountSetting.inputCode', defaultMessage: '请填写验证码'}) } = props
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const [remoteImg, setRemoteImg] = useState({
x: 0,
y: 0,
imgId: '',
img: '',
})
const handleVisible = () => { const handleVisible = () => {
if (isDisabled) {
message.error(tips);
return
}
setVisible(true) setVisible(true)
} }
const cancel = () => { const cancel = () => {
...@@ -21,6 +45,27 @@ const SafeVerification = (props) => { ...@@ -21,6 +45,27 @@ const SafeVerification = (props) => {
setVisible(false); setVisible(false);
!!props.handleVerifySuccess && props.handleVerifySuccess() !!props.handleVerifySuccess && props.handleVerifySuccess()
} }
useEffect(() => {
if (visible) {
getMemberCaptcha({
width: IMG_WIDTH.toString(),
height: IMG_HEIGHT.toString(),
size: FLAG_SIZE.toString()
}).then(res => {
const { backImage, width, height, imgId } = res.data
setRemoteImg(() => {
return {
img: 'data:image/jpeg;base64,' +backImage,
imgId,
x: Number(decryptedByAES(width)),
y: Number(height)
}
})
})
}
}, [visible])
return ( return (
<div className={styles.box}> <div className={styles.box}>
<Row> <Row>
...@@ -29,20 +74,33 @@ const SafeVerification = (props) => { ...@@ -29,20 +74,33 @@ const SafeVerification = (props) => {
<div className={styles.btn} onClick={handleVisible}> <div className={styles.btn} onClick={handleVisible}>
{intl.formatMessage({ id: 'accountSetting.clickVerify' })} {intl.formatMessage({ id: 'accountSetting.clickVerify' })}
</div> </div>
<div className={styles.sliderVerify}>
<SliderVerify
visible={visible}
onCancel={cancel}
onSuccess={handleSuccess}
imageUrl={imageUrl}
/>
</div>
</div> </div>
</Col> </Col>
</Row> </Row>
<Modal
title={intl.formatMessage({id: 'components.huadongyanzheng'})}
visible={visible}
mask
centered
destroyOnClose
footer={null}
onCancel={cancel}
>
<RiskCheck
className={styles.risk}
imgUrl={remoteImg.img}
imgWidth={IMG_WIDTH}
imgHeight={IMG_HEIGHT}
xPoint={remoteImg.x}
yPoint={remoteImg.y}
shadowSize={FLAG_SIZE}
differ={10}
tipText={intl.formatMessage({ id: 'components.riskCheckTips', defaultMessage: '' })}
onSuccess={handleSuccess}
/>
</Modal>
</div> </div>
) )
} }
......
...@@ -19,6 +19,7 @@ import { ...@@ -19,6 +19,7 @@ import {
postMemberSecurityPswUpdate postMemberSecurityPswUpdate
} from '@/services/MemberV2Api'; } from '@/services/MemberV2Api';
import { useIntl} from 'umi' import { useIntl} from 'umi'
import useShowRiskCheck from './useShowRiskCheck';
const layout = { const layout = {
...@@ -35,6 +36,7 @@ const EmailVerifyPanel = (props) => { ...@@ -35,6 +36,7 @@ const EmailVerifyPanel = (props) => {
const [ visible, setVisible ] = useState(false); const [ visible, setVisible ] = useState(false);
const { email, pageType } = props; const { email, pageType } = props;
const [form] = Form.useForm(); const [form] = Form.useForm();
const { canShowRiskCheck, onValuesChange } = useShowRiskCheck();
const handleFinish = (values) => { const handleFinish = (values) => {
const { pageType } = props; const { pageType } = props;
...@@ -70,8 +72,6 @@ const EmailVerifyPanel = (props) => { ...@@ -70,8 +72,6 @@ const EmailVerifyPanel = (props) => {
} }
}) })
} }
// 发送旧的邮箱验证码 // 发送旧的邮箱验证码
const getCode = useCallback(() => { const getCode = useCallback(() => {
let SERVICE_MAP = { let SERVICE_MAP = {
...@@ -92,12 +92,10 @@ const EmailVerifyPanel = (props) => { ...@@ -92,12 +92,10 @@ const EmailVerifyPanel = (props) => {
'phone': postMemberSecurityPhoneEmailCheck 'phone': postMemberSecurityPhoneEmailCheck
} }
const service = SERVICE_CHECK[props.pageType]; const service = SERVICE_CHECK[props.pageType];
service({smsCode: captcha}, { ctlType: 'none' }).then((data) => { service({smsCode: captcha}).then((data) => {
console.log(data);
if(data.code == 1000) { if(data.code == 1000) {
message.success(intl.formatMessage({ id: 'accountSetting.verifyOk' }))
setVisible(true); setVisible(true);
} }
}) })
} }
...@@ -110,6 +108,7 @@ const EmailVerifyPanel = (props) => { ...@@ -110,6 +108,7 @@ const EmailVerifyPanel = (props) => {
name="basic" name="basic"
onFinish={handleFinish} onFinish={handleFinish}
form={form} form={form}
onValuesChange={onValuesChange}
> >
{ {
!visible !visible
...@@ -131,7 +130,10 @@ const EmailVerifyPanel = (props) => { ...@@ -131,7 +130,10 @@ const EmailVerifyPanel = (props) => {
</Row> </Row>
</Form.Item> </Form.Item>
<div style={{marginBottom: '130px'}}> <div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} /> <SafeVerification
handleVerifySuccess={handleVerifySuccess}
isDisabled={!canShowRiskCheck}
/>
</div> </div>
</> </>
: null : null
......
...@@ -7,6 +7,7 @@ import { history } from 'umi' ...@@ -7,6 +7,7 @@ import { history } from 'umi'
import { encryptedByAES } from '@/utils/cryptoAes' import { encryptedByAES } from '@/utils/cryptoAes'
import { postMemberSecurityEmailUpdate, postMemberSecurityPayCheck, postMemberSecurityPhoneUpdate, postMemberSecurityPswUpdate } from '@/services/MemberV2Api'; import { postMemberSecurityEmailUpdate, postMemberSecurityPayCheck, postMemberSecurityPhoneUpdate, postMemberSecurityPswUpdate } from '@/services/MemberV2Api';
import { useIntl} from 'umi' import { useIntl} from 'umi'
import useShowRiskCheck from './useShowRiskCheck';
const layout = { const layout = {
...@@ -28,6 +29,7 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => { ...@@ -28,6 +29,7 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
const { pageType } = props; const { pageType } = props;
const [ visible, setVisible ] = useState(false); const [ visible, setVisible ] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const { canShowRiskCheck, onValuesChange } = useShowRiskCheck('paycode');
const handleFinish = (values) => { const handleFinish = (values) => {
const { pageType } = props; const { pageType } = props;
...@@ -68,10 +70,8 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => { ...@@ -68,10 +70,8 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
const handleVerifySuccess = () => { const handleVerifySuccess = () => {
const payPassword = encryptedByAES(form.getFieldValue('paycode')); const payPassword = encryptedByAES(form.getFieldValue('paycode'));
const service = postMemberSecurityPayCheck; const service = postMemberSecurityPayCheck;
service({payPassword: payPassword}, { ctlType: "none" }).then((data) => { service({payPassword: payPassword}).then((data) => {
console.log(data);
if(data.code == 1000) { if(data.code == 1000) {
message.success(intl.formatMessage({ id: 'accountSetting.verifyOk' }))
setVisible(true); setVisible(true);
} }
}) })
...@@ -85,8 +85,8 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => { ...@@ -85,8 +85,8 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
name="basic" name="basic"
form={form} form={form}
onFinish={handleFinish} onFinish={handleFinish}
onValuesChange={onValuesChange}
> >
{ {
!visible !visible
? <> ? <>
...@@ -104,7 +104,11 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => { ...@@ -104,7 +104,11 @@ const PaycodeVerifyPanel: React.FC<IProps> = (props) => {
</Row> </Row>
</Form.Item> </Form.Item>
<div style={{marginBottom: '130px'}}> <div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} /> <SafeVerification
handleVerifySuccess={handleVerifySuccess}
isDisabled={!canShowRiskCheck}
tips={intl.formatMessage({id: 'accountSetting.inputPayPsw', defaultMessage: '请填写支付密码'})}
/>
</div> </div>
</> </>
: null : null
......
...@@ -18,6 +18,7 @@ import { ...@@ -18,6 +18,7 @@ import {
postMemberSecurityPswSmsCheck, postMemberSecurityPswSmsCheck,
postMemberSecurityPswUpdate postMemberSecurityPswUpdate
} from '@/services/MemberV2Api'; } from '@/services/MemberV2Api';
import useShowRiskCheck from './useShowRiskCheck';
const layout = { const layout = {
labelCol: { span: 3 }, labelCol: { span: 3 },
...@@ -38,6 +39,7 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => { ...@@ -38,6 +39,7 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
const intl = useIntl(); const intl = useIntl();
const [ visible, setVisible ] = useState(false); const [ visible, setVisible ] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const { canShowRiskCheck, onValuesChange } = useShowRiskCheck();
const { phone, pageType } = props; const { phone, pageType } = props;
const onFinish = (values) => { const onFinish = (values) => {
...@@ -92,13 +94,11 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => { ...@@ -92,13 +94,11 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
'phone': postMemberSecurityPhoneSmsCheck 'phone': postMemberSecurityPhoneSmsCheck
} }
const service = SERVICE_CHECK[props.pageType]; const service = SERVICE_CHECK[props.pageType];
service({smsCode: captcha}, { ctlType: 'none' }).then((data) => { service({smsCode: captcha}).then((data) => {
if(data.code === 1000) { if(data.code === 1000) {
message.success(intl.formatMessage({ id: 'accountSetting.verifyOk' }))
setVisible(true); setVisible(true);
} }
}) })
} }
return ( return (
...@@ -110,6 +110,7 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => { ...@@ -110,6 +110,7 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
name="basic" name="basic"
onFinish={onFinish} onFinish={onFinish}
form={form} form={form}
onValuesChange={onValuesChange}
> >
{ {
!visible !visible
...@@ -131,7 +132,10 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => { ...@@ -131,7 +132,10 @@ const PhoneVerifyPanel: React.FC<IProps> = (props) => {
</Row> </Row>
</Form.Item> </Form.Item>
<div style={{marginBottom: '130px'}}> <div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} /> <SafeVerification
handleVerifySuccess={handleVerifySuccess}
isDisabled={!canShowRiskCheck}
/>
</div> </div>
</> </>
: null : null
......
...@@ -6,6 +6,7 @@ import TypeForHeader from '../../TypeForHeader'; ...@@ -6,6 +6,7 @@ import TypeForHeader from '../../TypeForHeader';
import { history, useIntl } from 'umi' import { history, useIntl } from 'umi'
import { encryptedByAES } from '@/utils/cryptoAes' import { encryptedByAES } from '@/utils/cryptoAes'
import { postMemberSecurityPaySms, postMemberSecurityPaySmsCheck, postMemberSecurityPayUpdate } from '@/services/MemberV2Api'; import { postMemberSecurityPaySms, postMemberSecurityPaySmsCheck, postMemberSecurityPayUpdate } from '@/services/MemberV2Api';
import useShowRiskCheck from './useShowRiskCheck';
const layout = { const layout = {
labelCol: { span: 3 }, labelCol: { span: 3 },
wrapperCol: { span: 13 }, wrapperCol: { span: 13 },
...@@ -26,6 +27,8 @@ const ResetPayCode: React.FC<IProps> = (props) => { ...@@ -26,6 +27,8 @@ const ResetPayCode: React.FC<IProps> = (props) => {
const [ visible, setVisible ] = useState(false); const [ visible, setVisible ] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
const { phone, pageType } = props; const { phone, pageType } = props;
const { canShowRiskCheck, onValuesChange } = useShowRiskCheck();
const onFinish = (values) => { const onFinish = (values) => {
const postData = { const postData = {
payPassword: encryptedByAES(values.password) payPassword: encryptedByAES(values.password)
...@@ -51,8 +54,7 @@ const ResetPayCode: React.FC<IProps> = (props) => { ...@@ -51,8 +54,7 @@ const ResetPayCode: React.FC<IProps> = (props) => {
const handleVerifySuccess = () => { const handleVerifySuccess = () => {
const captcha = form.getFieldValue('captcha'); const captcha = form.getFieldValue('captcha');
const service = postMemberSecurityPaySmsCheck const service = postMemberSecurityPaySmsCheck
service({smsCode: captcha}, {ctlType: 'none'}).then((data) => { service({smsCode: captcha}).then((data) => {
console.log(data);
if(data.code == 1000) { if(data.code == 1000) {
setVisible(true); setVisible(true);
} }
...@@ -129,6 +131,7 @@ const ResetPayCode: React.FC<IProps> = (props) => { ...@@ -129,6 +131,7 @@ const ResetPayCode: React.FC<IProps> = (props) => {
name="basic" name="basic"
onFinish={onFinish} onFinish={onFinish}
form={form} form={form}
onValuesChange={onValuesChange}
> >
{ {
!visible !visible
...@@ -152,7 +155,10 @@ const ResetPayCode: React.FC<IProps> = (props) => { ...@@ -152,7 +155,10 @@ const ResetPayCode: React.FC<IProps> = (props) => {
</Row> </Row>
</Form.Item> </Form.Item>
<div style={{marginBottom: '130px'}}> <div style={{marginBottom: '130px'}}>
<SafeVerification handleVerifySuccess={handleVerifySuccess} /> <SafeVerification
handleVerifySuccess={handleVerifySuccess}
isDisabled={!canShowRiskCheck}
/>
</div> </div>
</> </>
: null : null
......
import React, { useState } from 'react';
function useShowRiskCheck(key: string = 'captcha') {
const [canShowRiskCheck, setCanShowRiskCheck] = useState(false);
const onValuesChange = (changedValues) => {
if (key in changedValues) {
if (changedValues[key]) {
setCanShowRiskCheck(true)
} else {
setCanShowRiskCheck(false)
}
}
}
return { canShowRiskCheck, onValuesChange };
}
export default useShowRiskCheck
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment