fix: 验证码登录

src/containers/App/store/reducer.js

@@ -92,7 +92,12 @@ const appReducer = (state = initialState, action) => {
       window.__INITIAL_STATE__.menu = 'banner-left';
       const temp = AppConfig(window.__INITIAL_STATE__);
       temp.displayMode = window.__INITIAL_STATE__?.displayMode || '';
+      // 验证码开启 系统配置表里配置
       temp.isVerification = action.data.isVerification || '';
+      // 验证码配置 站点设置里配置 只针对该站点
+      temp.isVerificationCode = action.data.VerificationConfig?.IsVerificationCode || false;
+      temp.verificationCodeTimeOut = action.data.VerificationConfig?.VerificationCodeTimeOut || 1;
+      temp.verificationCodeType = action.data.VerificationConfig?.VerificationCodeType || '';
       window.globalConfig = temp;
 
       // eslint-disable-next-line no-undef

src/pages/user/login/components/Login/LoginItem.js

@@ -2,7 +2,7 @@ import 'kit_logger';
 
 import React, { useCallback, useEffect, useState, useRef } from 'react';
 import { FieldNumberOutlined, ReloadOutlined } from '@ant-design/icons';
-import { Button, Form, Input, message } from 'antd';
+import { Button, Form, Input, message, Space } from 'antd';
 import omit from 'omit.js';
 
 import { useIntl } from '@wisdom-utils/components';
@@ -38,6 +38,8 @@ const ValidateCode = props => {
   const codeUrl = window?.globalConfig?.hasGateWay
     ? '/PandaCore/Identity/GetVerificationCode'
     : '/PandaCore/GCK/BussinessAuth/GetVerificationCode';
+
+  const verificationCodeTimeOut = (window?.globalConfig?.verificationCodeTimeOut || 1) * 60;
   const onTimeOver = () => {
     console.log('超时了');
     setIsOver(true);
@@ -75,14 +77,13 @@ const ValidateCode = props => {
   }, []);
   useEffect(() => {
     if (!isOver) {
-      console.log('开始计时');
       if (timer.current) {
         clearInterval(timer.current);
         timer.current = null;
       }
       timer.current = setTimeout(() => {
         onTimeOver();
-      }, 60 * 1000);
+      }, verificationCodeTimeOut * 1000);
     }
     return () => {
       if (timer.current) {
@@ -119,7 +120,8 @@ const ValidateCode = props => {
 };
 
 const LoginItem = props => {
-  const [count, setCount] = useState(props.countDown || 0);
+  const { isVerificationCode, verificationCodeType, verificationCodeTimeOut } = window.globalConfig;
+  const [count, setCount] = useState(props.countDown || (verificationCodeTimeOut || 1) * 60);
   const [timing, setTiming] = useState(false);
   const [ext, setExt] = useState('');
   const intl = useIntl();
@@ -136,7 +138,9 @@ const LoginItem = props => {
     tabUtil,
     ...restProps
   } = props;
-
+  if (isVerificationCode && (verificationCodeType && verificationCodeType !== '图片验证码') && customProps?.size) {
+    customProps.size = '';
+  }
   const onGetCaptcha = useCallback(mobile => {
     // eslint-disable-next-line no-undef
     if (window.globalConfig?.hasGateWay) {
@@ -178,21 +182,23 @@ const LoginItem = props => {
 
   useEffect(() => {
     let interval = 0;
+
     const { countDown } = props;
+    const timeDown = countDown || (verificationCodeTimeOut || 1) * 60;
     if (timing) {
       interval = window.setInterval(() => {
         setCount(preSecond => {
           if (preSecond <= 1) {
             setTiming(false);
             clearInterval(interval);
-            return countDown || 60;
+            return timeDown;
           }
           return preSecond - 1;
         });
       }, 1000);
     }
     return () => clearInterval(interval);
-  }, [props, timing]);
+  }, [props.countDown, timing]);
 
   if (!name) {
     return null;
@@ -256,6 +262,46 @@ const LoginItem = props => {
   }
 
   if (type === 'Validate') {
+    // 短信验证码
+    if (verificationCodeType === '阿里云短信验证码') {
+      const inputProps = omit(otherProps, ['onGetCaptcha', 'countDown']);
+      return (
+        <>
+          <FormItem name="mobile" rules={ItemMap.Mobile.rules}>
+            <Input {...ItemMap.Mobile.props} size="middle" placeholder="请输入手机号码" />
+          </FormItem>
+          <FormItem shouldUpdate style={{ marginBottom: '0px' }}>
+            {({ getFieldValue, validateFields }) => (
+              <Space align="start">
+                <FormItem name={name} {...options} rules={rules}>
+                  <Input {...customProps} {...inputProps} />
+                </FormItem>
+                <Button
+                  disabled={timing}
+                  className={styles.getCaptcha}
+                  style={{ lineHeight: '32px', width: '110px', textAlign: 'center' }}
+                  size="large"
+                  onClick={() => {
+                    validateFields(['mobile'])
+                      .then(values => {
+                        onGetCaptcha(values.mobile);
+                      })
+                      .catch(error => {
+                        Logger.log(error);
+                      });
+                  }}
+                >
+                  {timing
+                    ? `${intl.formatMessage({ id: 'pages.login.phoneLogin.sendCationCode' })}(${count})`
+                    : intl.formatMessage({ id: 'pages.login.phoneLogin.getVerificationCode' })}
+                </Button>
+              </Space>
+            )}
+          </FormItem>
+        </>
+      );
+    }
+    // 图形验证码
     return (
       <Form.Item name={name} {...options}>
         <ValidateCode {...customProps} {...otherProps} />

src/pages/user/login/components/Login/index.js

@@ -14,6 +14,7 @@ const Login = props => {
   const intl = useIntl();
   const { className } = props;
   const otherChildren = [];
+
   React.Children.forEach(props.children, child => {
     if (!child) {
       return;
@@ -25,7 +26,9 @@ const Login = props => {
       <div className={classNames(className, styles.login)}>
         {props.welcome === void 0 ? (
           <div className={styles.desc}>{intl.formatMessage({ id: 'pages.login.welcome' })}</div>
-        ) : props.welcome}
+        ) : (
+          props.welcome
+        )}
         <Form
           form={props.from}
           onFinish={values => {

src/pages/user/login/components/Login/index.less

@@ -113,6 +113,7 @@
         width: 100%;
         height: 100%;
         object-fit: contain;
+        margin: 0;
       }
 
       .validate_invalid {

src/pages/user/login/js/useAccount.js

@@ -44,16 +44,11 @@ const useAccount = props => (
     />
     {props?.isValidate ? <Validate name="validate" /> : null}
     <div>
-      <Checkbox
-        checked={props.autoLogin}
-        onChange={e => props.setAutoLogin(e.target.checked)}
-      >
+      <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
         {useIntl().formatMessage({ id: 'pages.login.rememberMe' })}
       </Checkbox>
     </div>
-    <Submit loading={props.submitting}>
-      {useIntl().formatMessage({ id: 'pages.login.submit' })}
-    </Submit>
+    <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
   </LoginForm>
 );
 

src/pages/user/login/login.js

@@ -1567,7 +1567,8 @@ class Login {
 
   loginHandlerValidate(user, pwd, userPhone, isRememberPWD, ref, validateCode = '') {
     const self = this;
-    if ((this.globalConfig?.isVerification || 0) * 1 === 1)
+    // isVerification 取自系统配置表，isVerificationCode 取自 站点配置，isVerificationCode为1 会默认把  isVerificationCode改为true
+    if ((this.globalConfig?.isVerification || 0) * 1 === 1 || this.globalConfig.isVerificationCode)
       return self.loginValidate(user, pwd, userPhone, isRememberPWD, SERVICE_APP_LOGIN_MODE.password, validateCode);
     if (user && pwd) {
       if (self.loginFailed && self.captchaObj) {