fix: 物联增加网配置账号密码配置

src/pages/platformCenter/hostmanager/IotConfig/IotConfig.jsx

@@ -47,26 +47,27 @@ import {
 import {
   GetDbProduct, // 获取产品方案配置
 } from '@/services/database/api';
-const layout = {
-  labelCol: { span: 4 },
-  wrapperCol: { span: 20 },
-};
-const tailLayout = {
-  wrapperCol: { offset: 9, span: 15 },
-};
+import CryptoJS from 'crypto-js';
+
+
 let time = null;
 const IotConfig = props => {
   const { setActiveKey } = props;
+  const key = CryptoJS.enc.Utf8.parse('1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'); //十六位十六进制数作为密钥
+  const iv = CryptoJS.enc.Utf8.parse('1234567890000000');
   const [loading, setLoading] = useState(false); // 加载
   const [show1, setShow1] = useState('none');
   const [show2, setShow2] = useState('none');
   const [show3, setShow3] = useState('none');
   const [show4, setShow4] = useState('none');
+  const [newPasswordLevel, setNewPasswordLevel] = useState('')
   const [currentIotVersion, setCurrentIotVersion] = useState({ data: '' });
   const [currentIotConfig, setCurrentIotConfig] = useState({
     TcpAddress: '',
     SSLSafe: '',
     IotAddress: '',
+    EmqAccount: '',
+    EmqPassword: '',
   });
 
   const [currentDataBase, setCurrentDataBase] = useState({
@@ -88,6 +89,59 @@ const IotConfig = props => {
   const [getWayVisible, setGetWayVisible] = useState(false);
   const [upgrade, setUpgrade] = useState(false);
 
+  //加密
+  const Encrypt = word => {
+    let srcs = CryptoJS.enc.Utf8.parse(word);
+    let encrypted = CryptoJS.AES.encrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    return encrypted.ciphertext.toString().toUpperCase();
+  };
+
+  // 解密
+  const Decrypt = word => {
+    let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+    let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+    let decrypt = CryptoJS.AES.decrypt(srcs, key, {
+      iv,
+      mode: CryptoJS.mode.CBC,
+      padding: CryptoJS.pad.Pkcs7,
+    });
+    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+    return decryptedStr?.toString();
+  };
+
+  const checkStrong = sValue => {
+    let modes = 0;
+    // 正则表达式验证符合要求的
+    if (sValue.length < 1) return modes;
+    if (/\d/.test(sValue)) modes++; // 数字
+    if (/[a-z]/.test(sValue)) modes++; // 小写
+    if (/[A-Z]/.test(sValue)) modes++; // 大写
+    if (/[_\W]/.test(sValue)) modes++; // 特殊字符
+    console.log(modes, 'modes');
+    // 逻辑处理
+    // eslint-disable-next-line default-case
+    switch (modes) {
+      case 1:
+        return '弱';
+      case 2:
+        if (sValue.length > 8) {
+          return '中';
+        }
+        return '弱';
+      case 3:
+        if (sValue.length > 8) {
+          return '强';
+        }
+        return '中';
+      case 4:
+        return '强';
+    }
+  };
+
   useEffect(() => {
     IsIotUpgrade().then(res => {
       if (res.code === 0) {
@@ -213,7 +267,11 @@ const IotConfig = props => {
         let obj = {};
         Object.keys(currentIotConfig).forEach(k => {
           obj[k] = res.data[k];
+          if (k === 'EmqPassword' && res.data[k]) {
+            obj[k] = Decrypt(res.data[k])
+          }
         });
+        console.log('obj', obj)
         GetIotVersion({
           ip: obj.IotAddress,
         }).then(resdata => {
@@ -306,12 +364,28 @@ const IotConfig = props => {
     });
   };
 
+  const isAlphanumeric = str => {
+    return /^[A-Za-z0-9]+$/.test(str);
+  };
+
+  const onValuesChange = (values) => {
+    if ('EmqPassword' in values) {
+      setNewPasswordLevel(checkStrong(values['EmqPassword']))
+    }
+  }
+
   const PingIot = ({ ip, values }) => {
+    let pwd = values.EmqPassword
+    if (values?.EmqPassword?.length < 32 || !isAlphanumeric(values.EmqPassword)) {
+      pwd = Encrypt(values.EmqPassword);
+    }
     SaveIotConfig(
       {
         tcpAddress: values.TcpAddress,
         iotAddress: values.IotAddress,
         sslSafe: values.SSLSafe,
+        emqAccount: values.EmqAccount,
+        emqPassword: pwd,
       },
       values,
     );
@@ -361,34 +435,6 @@ const IotConfig = props => {
         }
       });
     }
-    // if (show3 == 'inline-block') {
-    //   message.warning('该数据库已添加！');
-    // } else if (!currentDataBase.ip) {
-    //   message.error('未获取数据库信息');
-    // } else if (!currentSiteInfo) {
-    //   message.error('未获取站点编号');
-    // } else {
-    //   setLoading(true);
-    //   AddDB({
-    //     host: currentDataBase.ip,
-    //     user: currentDataBase.userName,
-    //     pwd: currentDataBase.password,
-    //     dataBaseName: currentDataBase.dbName,
-    //     siteCode: currentSiteInfo,
-    //   }).then(res => {
-    //     setLoading(false);
-    //     if (res.success) {
-    //       setShow3('inline-block');
-    //       setShow4('none');
-    //       message.success('添加成功!');
-    //       getStatus(currentDataBase.ip, currentDataBase.dbName);
-    //     } else {
-    //       setShow3('none');
-    //       setShow4('inline-block');
-    //       message.error(res.msg);
-    //     }
-    //   });
-    // }
   };
 
   const SaveIotConfig = (config, values) => {
@@ -452,52 +498,34 @@ const IotConfig = props => {
     }
   };
 
+  const PasswordChange = (values) => {
+    console.log('values', values)
+  }
+
   const submit = () => {
     window.location.href = `/civmanage/platform/host`;
   };
   return (
     <div className={styles.iot_container}>
-      <Card
-        // title={`物联平台${currentIotVersion.data ? `[${currentIotVersion.data}]` : ''}`}
-        style={{ width: '100%', height: 'calc(100vh - 130px)' }}
-      >
+      <Card style={{ width: '100%', height: 'calc(100vh - 130px)' }}>
         <Spin spinning={loading} tip="loading">
           <Form
             form={form}
-            name="basic"
+            labelCol={{
+              span: 2,
+            }}
             initialValues={{ remember: true, configValue: 'V4' }}
+            onValuesChange={onValuesChange}
             onFinish={onFinish}
             onFinishFailed={onFinishFailed}
           >
-            <div
-              style={{
-                marginTop: '10px',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
+            <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', }} >
               <img src={Internet} style={{ height: '16px' }} alt="" />
               <span style={{ marginLeft: '10px', fontWeight: 'bold' }}>物联网统一接入平台</span>
-              {/* <div>
-                {getWay === false ? (
-                  <>
-                    <InfoCircleFilled
-                      style={{
-                        color: '#faad14',
-                        fontSize: '18px',
-                        marginLeft: '10px',
-                      }}
-                    />
-                    <span style={{ marginLeft: '5px' }}>请开启网关！</span>
-                  </>
-                ) : (
-                  <></>
-                )}
-              </div> */}
             </div>
             <Divider />
-            <Form.Item style={{ marginLeft: '20px', marginBottom: '0px' }}>
-              <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
+            <Form.Item style={{ marginBottom: '0px' }}>
+              <div style={{ display: 'flex', justifyContent: 'flex-start', marginLeft: 16 }}>
                 <Form.Item
                   label="服务地址(平台)"
                   name="IotAddress"
@@ -512,14 +540,11 @@ const IotConfig = props => {
                     },
                   ]}
                 >
-                  <Input
-                    style={{ width: '300px', marginLeft: '15px' }}
-                    // placeholder="请输入服务地址"
-                  />
+                  <Input style={{ width: '300px' }} />
                 </Form.Item>
-                <Button onClick={() => PingIot1()} style={{ marginLeft: '-88px' }}>
+                {/* <Button onClick={() => PingIot1()} style={{ marginLeft: '-88px' }}>
                   测试连接
-                </Button>
+                </Button> */}
                 {upgrade && (
                   <>
                     <Button
@@ -562,10 +587,8 @@ const IotConfig = props => {
             <div style={{ marginTop: '20px' }}>
               {flag === 1 ? (
                 <>
-                  <Form.Item label="当前数据库" style={{ marginLeft: '50px' }}>
-                    <span style={{ marginLeft: '14px' }}>{`${currentDataBase.ip}/${
-                      currentDataBase.dbName
-                    }`}</span>
+                  <Form.Item label="当前数据库">
+                    <span style={{ marginLeft: '14px' }}>{`${currentDataBase.ip}/${currentDataBase.dbName}`}</span>
                     {show3 === 'none' ? <></> : <span>({dbStatus})</span>}
                   </Form.Item>
                   <Form.Item label="加载进度" style={{ marginLeft: '65px' }}>
@@ -589,14 +612,6 @@ const IotConfig = props => {
                       >
                         {buStatus}
                       </Button>
-                      {/* <Switch
-                      checkedChildren="开启"
-                      unCheckedChildren="关闭"
-                      checked={currentConfig}
-                      onChange={OperateNginx}
-                      style={{ marginLeft: '15px' }}
-                      disabled={switchStatus}
-                    /> */}
                     </div>
                   </Form.Item>
                 </>
@@ -617,7 +632,6 @@ const IotConfig = props => {
             </div>
             <Divider />
             <Form.Item
-              style={{ marginLeft: '20px' }}
               label="服务地址(EMQ)"
               name="TcpAddress"
               rules={[
@@ -628,21 +642,52 @@ const IotConfig = props => {
                 },
               ]}
             >
-              <Input style={{ width: '300px', marginLeft: '13px' }} />
+              <Input style={{ width: '300px' }} />
+            </Form.Item>
+            <Form.Item label='账号' name='EmqAccount'>
+              <Input style={{ width: '300px' }} placeholder='请输入账号' />
+            </Form.Item>
+            <Form.Item
+              label='密码'
+              name='EmqPassword'
+              rules={[
+                // { required: true, message: '请输入密码' },
+                {
+                  pattern: /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,16}$/,
+                  message: '密码长度至少8位最多为16位，包含大小写字母、特殊符号、数字中的三种及以上组合',
+                },
+                {
+                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
+                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
+                },
+              ]}
+            >
+              <Input.Password
+                prefix={<div style={{ color: newPasswordLevel === '弱' ? 'red' : (newPasswordLevel === '中' ? 'coral' : 'limegreen') }}>{newPasswordLevel}</div>}
+                placeholder="请输入密码"
+                autoComplete="off"
+                maxLength="16"
+                style={{ width: 300 }}
+                onCopy={e => {
+                  e.preventDefault();
+                }}
+                onPaste={e => {
+                  // 禁止粘贴
+                  e.preventDefault();
+                }}
+              />
             </Form.Item>
             <Form.Item
-              style={{ marginLeft: '20px' }}
               name="SSLSafe"
               label="SSL(EMQ)"
               rules={[{ required: true, message: '请选择是否!' }]}
             >
-              <Select placeholder="请选择是否!" style={{ width: '300px', marginLeft: '48px' }}>
+              <Select placeholder="请选择是否!" style={{ width: '300px' }}>
                 <Option value="1">是</Option>
                 <Option value="0">否</Option>
               </Select>
             </Form.Item>
             <Form.Item
-              style={{ marginLeft: '30px' }}
               label="API地址"
               name="configName"
               rules={[
@@ -652,16 +697,16 @@ const IotConfig = props => {
                 },
               ]}
             >
-              <Input style={{ width: '300px', marginLeft: '60px' }} />
+              <Input style={{ width: '300px' }} />
             </Form.Item>
-            <Form.Item style={{ marginLeft: '30px' }} label="EMQ版本" name="configValue">
-              <Radio.Group style={{ marginLeft: '50px' }}>
+            <Form.Item label="EMQ版本" name="configValue">
+              <Radio.Group>
                 <Radio value="V4">V4</Radio>
                 <Radio value="V5">V5</Radio>
               </Radio.Group>
             </Form.Item>
             <Form.Item>
-              <Button type="primary" htmlType="submit" style={{ marginLeft: '152px' }}>
+              <Button type="primary" htmlType="submit" style={{ marginLeft: '135px' }}>
                 保存
               </Button>
             </Form.Item>