feat: 节水登录页添加验证码

public/web5Config.json

@@ -18,7 +18,8 @@
       "title": "能源-定额平台"
     },
     {
-      "title": "节水主题一"
+      "title": "节水主题一",
+      "isVerificationCode": true
     },
     {
       "title": "新春"

src/containers/App/store/reducer.js

@@ -95,11 +95,17 @@ const appReducer = (state = initialState, action) => {
       // 验证码开启 系统配置表里配置
       temp.isVerification = action.data.isVerification || '';
       // 验证码配置 站点设置里配置 只针对该站点
-      temp.isVerificationCode = action.data.VerificationConfig?.IsVerificationCode || false;
-      temp.verificationCodeTimeOut = action.data.VerificationConfig?.VerificationCodeTimeOut || 1;
-      temp.verificationCodeType = temp.isVerificationCode
-        ? action.data.VerificationConfig?.VerificationCodeType || ''
-        : '';
+      temp.isVerificationCode =
+        action.data?.isVerificationCode ||
+        action.data?.IsVerificationCode ||
+        action.data.VerificationConfig?.IsVerificationCode ||
+        false;
+      temp.verificationCodeTimeOut =
+        action.data.verificationCodeTimeOut || action.data.VerificationConfig?.VerificationCodeTimeOut || 1;
+      temp.verificationCodeType =
+        action.data.verificationCodeType || temp.isVerificationCode
+          ? action.data.VerificationConfig?.VerificationCodeType || ''
+          : '';
       // temp.isVerificationCode 为false 时，不能用短信验证码
       // 密码校验
       temp.PasswordAuth = action.data.PasswordAuth || '否';

src/pages/user/login/template/energy_GZ/FormLogin.js

@@ -11,7 +11,9 @@ const { UserName, Password, Submit } = LoginForm;
 
 const ValidateCode = props => {
   const [count, setCount] = useState(0);
-  const codeUrl = window?.globalConfig?.hasGateWay ? '/PandaCore/Identity/GetVerificationCode' : '/PandaCore/GCK/BussinessAuth/GetVerificationCode';
+  const codeUrl = window?.globalConfig?.hasGateWay
+    ? '/PandaCore/Identity/GetVerificationCode'
+    : '/PandaCore/GCK/BussinessAuth/GetVerificationCode';
 
   useEffect(() => {
     window.share.event.on('loginError', handError);
@@ -55,81 +57,85 @@ const ValidateCode = props => {
   );
 };
 
-const FormLogin = props => (
-  <div className={styles.form_login}>
-    <LoginContext.Provider>
-      <Form
-        form={props.form}
-        onFinish={values => {
-          if (props.onSubmit) {
-            props.onSubmit(values);
-          }
-        }}
-      >
-        {props.status === 'error' && props.type === 'account' && !props.submitting && (
-          <LoginMessage
-            content={useIntl().formatMessage({
-              id: 'pages.login.accountLogin.errorMessage',
+const FormLogin = props => {
+  const { isVerificationCode, isVerification, verificationCodeType } = window.globalConfig;
+  const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
+  return (
+    <div className={styles.form_login}>
+      <LoginContext.Provider>
+        <Form
+          form={props.form}
+          onFinish={values => {
+            if (props.onSubmit) {
+              props.onSubmit(values);
+            }
+          }}
+        >
+          {props.status === 'error' && props.type === 'account' && !props.submitting && (
+            <LoginMessage
+              content={useIntl().formatMessage({
+                id: 'pages.login.accountLogin.errorMessage',
+              })}
+            />
+          )}
+          <UserName
+            name="userName"
+            placeholder={useIntl().formatMessage({
+              id: 'pages.login.username.placeholder',
             })}
+            rules={[
+              {
+                required: true,
+                message: useIntl().formatMessage({
+                  id: 'pages.login.username.required',
+                }),
+              },
+            ]}
           />
-        )}
-        <UserName
-          name="userName"
-          placeholder={useIntl().formatMessage({
-            id: 'pages.login.username.placeholder',
-          })}
-          rules={[
-            {
-              required: true,
-              message: useIntl().formatMessage({
-                id: 'pages.login.username.required',
-              }),
-            },
-          ]}
-        />
-        <Password
-          name="password"
-          placeholder={useIntl().formatMessage({
-            id: 'pages.login.password.placeholder',
-          })}
-          rules={[
+          <Password
+            name="password"
+            placeholder={useIntl().formatMessage({
+              id: 'pages.login.password.placeholder',
+            })}
+            rules={[
+              {
+                required: true,
+                message: useIntl().formatMessage({
+                  id: 'pages.login.password.required',
+                }),
+              },
+            ]}
+          />
+          {isValidate ? (
+            <Form.Item shouldUpdate noStyle>
+              {({ getFieldValue, validateFields }) => (
+                <Form.Item
+                  name="validateCode"
+                  rules={[
+                    {
+                      required: true,
+                      message: '请输入验证码',
+                    },
+                  ]}
+                >
+                  <ValidateCode />
+                </Form.Item>
+              )}
+            </Form.Item>
+          ) : null}
+          <div className={styles.checkbox_wrap}>
             {
-              required: true,
-              message: useIntl().formatMessage({
-                id: 'pages.login.password.required',
-              }),
-            },
-          ]}
-        />
-        {window?.globalConfig?.isVerification == 1 ? (
-          <Form.Item shouldUpdate noStyle>
-            {({ getFieldValue, validateFields }) => (
-              <Form.Item
-                name="validateCode"
-                rules={[
-                  {
-                    required: true,
-                    message: '请输入验证码',
-                  },
-                ]}
-              >
-                <ValidateCode />
-              </Form.Item>
-            )}
-          </Form.Item>
-        ) : null}
-        <div className={styles.checkbox_wrap}>
-          {
-            // <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
-            //  {'记住密码'}
-            //  </Checkbox>
-            // <a href="#">忘记密码?</a>
-          }
-        </div>
-        <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
-      </Form>
-    </LoginContext.Provider>
-  </div>
-);
+              // <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
+              //  {'记住密码'}
+              //  </Checkbox>
+              // <a href="#">忘记密码?</a>
+            }
+          </div>
+          <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
+        </Form>
+      </LoginContext.Provider>
+    </div>
+  );
+};
 
 export default FormLogin;

src/pages/user/login/template/energy_GZ/index.js

@@ -145,6 +145,7 @@ class HuaNongLogin extends Component {
       loginMode: this.props.loginMode,
       updateLoginMode: this.props.updateLoginMode,
     };
+
     return <FormLogin {...params} />;
   }
   getCurrentTime(callback) {
@@ -239,7 +240,9 @@ class HuaNongLogin extends Component {
     this.clearTime();
   }
   render() {
-
+    const { isVerificationCode, isVerification } = window.globalConfig;
+    const isValidate = (isVerification || 0) * 1 === 1 || isVerificationCode;
+  
     return (
       <HelmetProvider>
         <div className={styles.quota} style={{ 'background': `url(${bigNew ? this.props.global.transformDevAssetsBaseURL(bigNew) : require("@/assets/images/login/节水/" + big)}) no-repeat` }}>
@@ -258,7 +261,7 @@ class HuaNongLogin extends Component {
             </div>
           </div>
           <div className={styles.wrap_content}>
-            <div className={classNames(styles.from, this.props.global.isVerification == 1 ? styles.from_validate : '')}>
+            <div className={classNames(styles.from, isValidate ? styles.from_validate : '')}>
               <div className={styles.slogan}>
                 <div className={styles.slogan_back} style={{ background: `url( ${!slogan ? require("@/assets/images/login/节水/建桥宣传语.png") : this.props.global.transformDevAssetsBaseURL(slogan)}) center no-repeat` }} />
               </div>