Commit da1eaf6f authored by 杨思琦's avatar 杨思琦

fix: 密码框修改

parent cbc336f3
Pipeline #64060 passed with stages
import 'kit_logger'; import 'kit_logger';
import React, { import React, { useCallback, useEffect, useState } from 'react';
useCallback,
useEffect, import { Button, Form, Input, message } from 'antd';
useState,
} from 'react';
import {
Button,
Form,
Input,
message,
} from 'antd';
import omit from 'omit.js'; import omit from 'omit.js';
import { useIntl } from '@wisdom-utils/components'; import { useIntl } from '@wisdom-utils/components';
...@@ -26,12 +17,7 @@ import ItemMap from './map'; ...@@ -26,12 +17,7 @@ import ItemMap from './map';
const FormItem = Form.Item; const FormItem = Form.Item;
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
const Logger = logger('loginForm'); const Logger = logger('loginForm');
const getFormItemOptions = ({ const getFormItemOptions = ({ onChange, defaultValue, customProps = {}, rules }) => {
onChange,
defaultValue,
customProps = {},
rules,
}) => {
const options = { const options = {
rules: rules || customProps.rules, rules: rules || customProps.rules,
}; };
...@@ -78,7 +64,7 @@ const LoginItem = props => { ...@@ -78,7 +64,7 @@ const LoginItem = props => {
} }
}) })
.catch(error => { .catch(error => {
message.error(intl.formatMessage({id: 'pages.login.phoneLogin.errorCodeMessage'})); message.error(intl.formatMessage({ id: 'pages.login.phoneLogin.errorCodeMessage' }));
}); });
}, []); }, []);
...@@ -98,7 +84,7 @@ const LoginItem = props => { ...@@ -98,7 +84,7 @@ const LoginItem = props => {
}, 1000); }, 1000);
} }
return () => clearInterval(interval); return () => clearInterval(interval);
}, [timing]); }, [props, timing]);
if (!name) { if (!name) {
return null; return null;
...@@ -114,7 +100,7 @@ const LoginItem = props => { ...@@ -114,7 +100,7 @@ const LoginItem = props => {
return Promise.resolve(); return Promise.resolve();
} }
// eslint-disable-next-line prefer-promise-reject-errors // eslint-disable-next-line prefer-promise-reject-errors
return Promise.reject(intl.formatMessage({id: 'pages.login.phoneLogin.errorMessage'})); return Promise.reject(intl.formatMessage({ id: 'pages.login.phoneLogin.errorMessage' }));
}; };
// eslint-disable-next-line no-shadow // eslint-disable-next-line no-shadow
const rules = [ const rules = [
...@@ -126,7 +112,7 @@ const LoginItem = props => { ...@@ -126,7 +112,7 @@ const LoginItem = props => {
delete options.rules; delete options.rules;
return ( return (
<FormItem shouldUpdate style={{marginBottom: '14px'}}> <FormItem shouldUpdate style={{ marginBottom: '14px' }}>
{({ getFieldValue, validateFields }) => ( {({ getFieldValue, validateFields }) => (
<> <>
<FormItem name={name} {...options} rules={rules}> <FormItem name={name} {...options} rules={rules}>
...@@ -147,8 +133,8 @@ const LoginItem = props => { ...@@ -147,8 +133,8 @@ const LoginItem = props => {
}} }}
> >
{timing {timing
? `${intl.formatMessage({id: 'pages.login.phoneLogin.sendCationCode'})}(${count})` ? `${intl.formatMessage({ id: 'pages.login.phoneLogin.sendCationCode' })}(${count})`
: intl.formatMessage({id: 'pages.login.phoneLogin.getVerificationCode'})} : intl.formatMessage({ id: 'pages.login.phoneLogin.getVerificationCode' })}
</Button> </Button>
</> </>
)} )}
...@@ -156,6 +142,13 @@ const LoginItem = props => { ...@@ -156,6 +142,13 @@ const LoginItem = props => {
); );
} }
if (type === 'Password') {
return (
<FormItem name={name} {...options}>
<Input.Password {...customProps} {...otherProps} />
</FormItem>
);
}
return ( return (
<FormItem name={name} {...options}> <FormItem name={name} {...options}>
<Input {...customProps} {...otherProps} /> <Input {...customProps} {...otherProps} />
...@@ -169,15 +162,7 @@ Object.keys(ItemMap).forEach(key => { ...@@ -169,15 +162,7 @@ Object.keys(ItemMap).forEach(key => {
const item = ItemMap[key]; const item = ItemMap[key];
LoginItems[key] = props => ( LoginItems[key] = props => (
<LoginContext.Consumer> <LoginContext.Consumer>
{context => ( {context => <LoginItem customProps={item.props} rules={item.rules} {...props} type={key} {...context} />}
<LoginItem
customProps={item.props}
rules={item.rules}
{...props}
type={key}
{...context}
/>
)}
</LoginContext.Consumer> </LoginContext.Consumer>
); );
}); });
......
...@@ -5,6 +5,8 @@ import { ...@@ -5,6 +5,8 @@ import {
MailOutlined, MailOutlined,
MobileOutlined, MobileOutlined,
UserOutlined, UserOutlined,
EyeInvisibleOutlined,
EyeTwoTone,
} from '@ant-design/icons'; } from '@ant-design/icons';
import styles from './index.less'; import styles from './index.less';
...@@ -27,9 +29,7 @@ export default { ...@@ -27,9 +29,7 @@ export default {
NewYearPassword: { NewYearPassword: {
props: { props: {
size: 'large', size: 'large',
prefix: ( prefix: <LockOutlined className={styles.prefixIcon} twoToneColor="#ff9600" />,
<LockOutlined className={styles.prefixIcon} twoToneColor="#ff9600" />
),
type: 'password', type: 'password',
id: 'password', id: 'password',
placeholder: '888888', placeholder: '888888',
...@@ -45,6 +45,7 @@ export default { ...@@ -45,6 +45,7 @@ export default {
props: { props: {
size: 'large', size: 'large',
prefix: <LockOutlined className={styles.prefixIcon} />, prefix: <LockOutlined className={styles.prefixIcon} />,
iconRender: visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />),
type: 'password', type: 'password',
id: 'password', id: 'password',
placeholder: '888888', placeholder: '888888',
...@@ -90,9 +91,7 @@ export default { ...@@ -90,9 +91,7 @@ export default {
NewYearMobile: { NewYearMobile: {
props: { props: {
size: 'large', size: 'large',
prefix: ( prefix: <MobileOutlined className={styles.prefixIcon} twoToneColor="#ff9600" />,
<MobileOutlined className={styles.prefixIcon} twoToneColor="#ff9600" />
),
placeholder: 'mobile number', placeholder: 'mobile number',
id: 'mobile', id: 'mobile',
}, },
...@@ -110,9 +109,7 @@ export default { ...@@ -110,9 +109,7 @@ export default {
NewYearCaptcha: { NewYearCaptcha: {
props: { props: {
size: 'large', size: 'large',
prefix: ( prefix: <MailOutlined className={styles.prefixIcon} twoToneColor="#ff9600" />,
<MailOutlined className={styles.prefixIcon} twoToneColor="#ff9600" />
),
placeholder: '请输入短信验证码', placeholder: '请输入短信验证码',
}, },
rules: [ rules: [
......
...@@ -511,7 +511,7 @@ class Login { ...@@ -511,7 +511,7 @@ class Login {
if (url.indexOf('&code') !== -1) { if (url.indexOf('&code') !== -1) {
// 判断是否存在参数 // 判断是否存在参数
// eslint-disable-next-line no-useless-escape // eslint-disable-next-line no-useless-escape
url = url.replace(/(\&code|#)[^'"]*/, ''); // 去除参数 url = url.replace(/(\&code|#)[^'"]*/, '&code=success'); // 去除参数
window.history.pushState({}, 0, url); window.history.pushState({}, 0, url);
} }
self.isSignIn = true; self.isSignIn = true;
......
...@@ -8,10 +8,7 @@ import LoginAction from './login'; ...@@ -8,10 +8,7 @@ import LoginAction from './login';
import { defaultApp } from '../../../micro'; import { defaultApp } from '../../../micro';
const Login = forwardRef((props, _ref) => { const Login = forwardRef((props, _ref) => {
const history = useHistory(); const history = useHistory();
const [action, setAction] = useState( const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), () => {}, false));
() =>
new LoginAction(Object.assign({}, props, { history }), () => {}, false),
);
const [redirect] = useState(() => { const [redirect] = useState(() => {
const param = params.getParams('redirect')?.replaceAll(';', '&'); const param = params.getParams('redirect')?.replaceAll(';', '&');
return param ? decodeURIComponent(escape(param)) : null; return param ? decodeURIComponent(escape(param)) : null;
...@@ -21,11 +18,12 @@ const Login = forwardRef((props, _ref) => { ...@@ -21,11 +18,12 @@ const Login = forwardRef((props, _ref) => {
const hasLogin = useRef(); const hasLogin = useRef();
useEffect(() => { useEffect(() => {
action.globalConfig = props.global; action.globalConfig = props.global;
// eslint-disable-next-line no-prototype-builtins
if (props.global && props.global.hasOwnProperty('products') && hasLogin.current !== true) { if (props.global && props.global.hasOwnProperty('products') && hasLogin.current !== true) {
hasLogin.current = true; hasLogin.current = true;
action.init(); action.init();
} }
}, [action.globalConfig, props.global]); }, [action, action.globalConfig, props.global]);
useEffect(() => { useEffect(() => {
action && action &&
...@@ -35,17 +33,15 @@ const Login = forwardRef((props, _ref) => { ...@@ -35,17 +33,15 @@ const Login = forwardRef((props, _ref) => {
// homepage: params.getParams('redirect') // homepage: params.getParams('redirect')
// })); // }));
// props.history.push('/' + params.getParams('redirect')) // props.history.push('/' + params.getParams('redirect'))
props.history.push( props.history.push(`/?client=${props.global.client}`);
`/?client=${props.global.client}`,
);
// window.share.event.emit('triggerMicro', props.global); // window.share.event.emit('triggerMicro', props.global);
// initMicroApps(); // initMicroApps();
defaultApp(redirect); defaultApp(redirect);
}); });
return () => { return () => {
action && action.events && action.events.removeAllListeners('loginSuccess'); action && action.events && action.events.removeAllListeners('loginSuccess');
} };
}, [action, props.global.client, props.global.generateType, props.history]); }, [action, props.global.client, props.global.generateType, props.history, redirect]);
return <div>{props.children}</div>; return <div>{props.children}</div>;
}); });
......
...@@ -3,12 +3,14 @@ import 'kit_utils/lib/format'; ...@@ -3,12 +3,14 @@ import 'kit_utils/lib/format';
import React, { forwardRef, useEffect, useRef, useState } from 'react'; import React, { forwardRef, useEffect, useRef, useState } from 'react';
import { Modal } from 'antd'; import { Modal } from 'antd';
// eslint-disable-next-line import/no-unresolved
import classNames from 'classnames'; import classNames from 'classnames';
import { dom } from '@wisdom-utils/utils/lib/helpers'; import { dom } from '@wisdom-utils/utils/lib/helpers';
import { Helmet, HelmetProvider } from 'react-helmet-async'; import { Helmet, HelmetProvider } from 'react-helmet-async';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { useHistory } from '@wisdom-utils/runtime'; import { useHistory } from '@wisdom-utils/runtime';
import { actionCreators } from '@/containers/App/store'; import { actionCreators } from '@/containers/App/store';
import Cookies from 'js-cookie';
import defaultSetting from '../../../../../config/defaultSetting'; import defaultSetting from '../../../../../config/defaultSetting';
import LoginAction from '../login'; import LoginAction from '../login';
import styles from '../style.less'; import styles from '../style.less';
...@@ -32,11 +34,11 @@ const Login = forwardRef((props, _ref) => { ...@@ -32,11 +34,11 @@ const Login = forwardRef((props, _ref) => {
const [type, setType] = useState('Account'); const [type, setType] = useState('Account');
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const history = useHistory(); const history = useHistory();
const [action, setAction] = useState( const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
() => const [showVideo, setShowVideo] = useState(false);
new LoginAction(Object.assign({}, props, { history }), setVisible, false), let { ddCode } = props.global;
); const loginMode = Cookies.get('loginMode') || null;
if (loginMode && loginMode === 'iotWechat') ddCode = null;
// useEffect(() => { // useEffect(() => {
// action.globalConfig = props.global; // action.globalConfig = props.global;
// }, [props.global]); // }, [props.global]);
...@@ -116,22 +118,27 @@ const Login = forwardRef((props, _ref) => { ...@@ -116,22 +118,27 @@ const Login = forwardRef((props, _ref) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
if (videoRef && videoRef.current) { if(ddCode && loginMode === 'qywx') {
videoRef.current.addEventListener('ended', function() { setShowVideo(false);
dom.removeClass(loginRef.current, styles.caseHide); } else {
dom.addClass(loginRef.current, styles.loginTimeShow); setShowVideo(true);
videoTimeout = setTimeout(() => { setTimeout(() => {
dom.removeClass(timeRef.current, styles.caseHide); if (videoRef && videoRef.current) {
dom.addClass(timeRef.current, 'animate__fadeIn'); videoRef.current.addEventListener('ended', function() {
dom.removeClass(loginRef.current, styles.caseHide);
dom.removeClass(loginFormRef.current, styles.caseHide); dom.addClass(loginRef.current, styles.loginTimeShow);
dom.addClass(loginFormRef.current, 'animate__fadeInUp'); videoTimeout = setTimeout(() => {
dom.removeClass(timeRef.current, styles.caseHide);
dom.removeClass(footerRef.current, styles.caseHide); dom.addClass(timeRef.current, 'animate__fadeIn');
dom.addClass(footerRef.current, 'animate__slideInUp'); dom.removeClass(loginFormRef.current, styles.caseHide);
dom.removeClass(titleRef.current, styles.caseHide); dom.addClass(loginFormRef.current, 'animate__fadeInUp');
dom.addClass(titleRef.current, 'animte__fadeInUp'); dom.removeClass(footerRef.current, styles.caseHide);
}, 500); dom.addClass(footerRef.current, 'animate__slideInUp');
dom.removeClass(titleRef.current, styles.caseHide);
dom.addClass(titleRef.current, 'animte__fadeInUp');
}, 500);
});
}
}); });
} }
...@@ -178,14 +185,14 @@ const Login = forwardRef((props, _ref) => { ...@@ -178,14 +185,14 @@ const Login = forwardRef((props, _ref) => {
<meta name="description" content={props.global.title || defaultSetting.title} /> <meta name="description" content={props.global.title || defaultSetting.title} />
</Helmet> </Helmet>
<div className={styles.main}> <div className={styles.main}>
<video {showVideo && <video
src={require("../../../../assets/videos/beforPage.mp4") } src={require("../../../../assets/videos/beforPage.mp4") }
className={styles.videLayer} className={styles.videLayer}
autoPlay="autoPlay" autoPlay="autoPlay"
muted muted
playsInline="playsinline" playsInline="playsinline"
ref={videoRef} ref={videoRef}
/> />}
<div className={styles.inner}> <div className={styles.inner}>
<div <div
className={classNames(styles.loginTime, styles.caseHide)} className={classNames(styles.loginTime, styles.caseHide)}
......
...@@ -16,7 +16,7 @@ import useRenderQcode from '../../js/useRenderQcode'; ...@@ -16,7 +16,7 @@ import useRenderQcode from '../../js/useRenderQcode';
import Account from '../../js/useAccount'; import Account from '../../js/useAccount';
import IotComponent from '../../js/useIOTComponent'; import IotComponent from '../../js/useIOTComponent';
import CloudForm from './cloudForm'; import CloudForm from './cloudForm';
import { initMicroApps } from '../../../../../micro'; import { defaultApp } from '../../../../../micro';
import useTime from '../../js/useTime'; import useTime from '../../js/useTime';
const isRQcodeFunc = loginFunc => { const isRQcodeFunc = loginFunc => {
...@@ -25,8 +25,10 @@ const isRQcodeFunc = loginFunc => { ...@@ -25,8 +25,10 @@ const isRQcodeFunc = loginFunc => {
}; };
const loginFuncImg = loginFunc => { const loginFuncImg = loginFunc => {
if (isRQcodeFunc(loginFunc)) { if (isRQcodeFunc(loginFunc)) {
// eslint-disable-next-line global-require
return require('@/assets/images/login/cloud/func_pwd.png'); return require('@/assets/images/login/cloud/func_pwd.png');
} }
// eslint-disable-next-line global-require
return require('@/assets/images/login/cloud/func_rqcode.png'); return require('@/assets/images/login/cloud/func_rqcode.png');
}; };
...@@ -48,7 +50,10 @@ const Login = forwardRef((props, _ref) => { ...@@ -48,7 +50,10 @@ const Login = forwardRef((props, _ref) => {
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const history = useHistory(); const history = useHistory();
const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, true)); const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, true));
const [showVideo, setShowVideo] = useState(false);
let { ddCode } = props.global;
const loginMode = Cookies.get('loginMode') || null;
if (loginMode && loginMode === 'iotWechat') ddCode = null;
const handleSubmit = values => { const handleSubmit = values => {
/* eslint-disable */ /* eslint-disable */
action && action &&
...@@ -70,7 +75,8 @@ const Login = forwardRef((props, _ref) => { ...@@ -70,7 +75,8 @@ const Login = forwardRef((props, _ref) => {
props.updateCurrentIndex && props.updateCurrentIndex(0); props.updateCurrentIndex && props.updateCurrentIndex(0);
props.history.push(`/?client=${props.global.client}`); props.history.push(`/?client=${props.global.client}`);
// window.share.event.emit('triggerMicro', props.global); // window.share.event.emit('triggerMicro', props.global);
initMicroApps(); // initMicroApps();
defaultApp();
}); });
action && action &&
action.events.on('loginError', event => { action.events.on('loginError', event => {
...@@ -92,28 +98,34 @@ const Login = forwardRef((props, _ref) => { ...@@ -92,28 +98,34 @@ const Login = forwardRef((props, _ref) => {
let videoTimeout = null; let videoTimeout = null;
useEffect(() => { useEffect(() => {
if (videoRef && videoRef.current) { if(ddCode && loginMode === 'qywx') {
videoRef.current.addEventListener('ended', function() { setShowVideo(false);
dom.removeClass(loginRef.current, styles.caseHide); } else {
dom.addClass(loginRef.current, styles.loginTimeShow); setShowVideo(true);
videoTimeout = setTimeout(() => { setTimeout(() => {
dom.removeClass(timeRef.current, styles.caseHide); if (videoRef && videoRef.current) {
dom.addClass(timeRef.current, 'animate__fadeIn'); videoRef.current.addEventListener('ended', function() {
dom.removeClass(loginRef.current, styles.caseHide);
dom.removeClass(loginFormRef.current, styles.caseHide); dom.addClass(loginRef.current, styles.loginTimeShow);
dom.addClass(loginFormRef.current, 'animate__fadeInUp'); videoTimeout = setTimeout(() => {
dom.removeClass(timeRef.current, styles.caseHide);
dom.removeClass(footerRef.current, styles.caseHide); dom.addClass(timeRef.current, 'animate__fadeIn');
dom.addClass(footerRef.current, 'animate__slideInUp');
dom.removeClass(titleRef.current, styles.caseHide); dom.removeClass(loginFormRef.current, styles.caseHide);
dom.addClass(titleRef.current, 'animte__fadeInUp'); dom.addClass(loginFormRef.current, 'animate__fadeInUp');
}, 500);
dom.removeClass(footerRef.current, styles.caseHide);
dom.addClass(footerRef.current, 'animate__slideInUp');
dom.removeClass(titleRef.current, styles.caseHide);
dom.addClass(titleRef.current, 'animte__fadeInUp');
}, 500);
});
}
}); });
} }
return () => { return () => {
videoTimeout && clearTimeout(videoTimeout); videoTimeout && clearTimeout(videoTimeout);
videoRef.current.removeEventListener('ended', () => {}); videoRef.current && videoRef.current.removeEventListener('ended', () => {});
}; };
}, [videoRef]); }, [videoRef]);
useEffect(() => { useEffect(() => {
...@@ -164,14 +176,17 @@ const Login = forwardRef((props, _ref) => { ...@@ -164,14 +176,17 @@ const Login = forwardRef((props, _ref) => {
<meta name="description" content={props.global.title || defaultSetting.title} /> <meta name="description" content={props.global.title || defaultSetting.title} />
</Helmet> </Helmet>
<div className={styles.main}> <div className={styles.main}>
<video {
src={require('@/assets/videos/beforPage.mp4')} showVideo && <video
className={styles.videLayer} src={require('@/assets/videos/beforPage.mp4')}
autoPlay="autoPlay" className={styles.videLayer}
muted autoPlay="autoPlay"
playsInline="playsinline" muted
ref={videoRef} playsInline="playsinline"
/> ref={videoRef}
/>
}
{/* main content */} {/* main content */}
<div className={styles.inner}> <div className={styles.inner}>
<div className={classNames(styles.loginTime, styles.caseHide)} ref={loginRef}> <div className={classNames(styles.loginTime, styles.caseHide)} ref={loginRef}>
......
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