Feature/issue 2208

packages/base/src/locale/zh-CN/dmsAccount.ts

@@ -38,5 +38,11 @@ export default {
   updateWechatSuccess: '微信号更新成功',
   updatePhoneSuccess: '手机号更新成功',
   wechat: '企业微信UserID',
-  phone: '手机号'
+  phone: '手机号',
+  sms: {
+    title: '双因素认证',
+    verificationCode: '验证码',
+    noPhoneNumbersTips: '请先完成手机号绑定后开启双因素认证',
+    updateSuccessTips: '双因素认证更新成功'
+  }
 };

packages/base/src/locale/zh-CN/dmsLogin.ts

@@ -23,5 +23,9 @@ export default {
   },
   browserVersionTile: '浏览器版本不兼容',
   browserVersionDesc:
-    '为了正常使用平台功能，请使用 Chrome 80 或更高版本进行访问'
+    '为了正常使用平台功能，请使用 Chrome 80 或更高版本进行访问',
+  verifyCode: '验证码',
+  verifyCodePlaceholder: '请输入验证码',
+  verify: '验证',
+  returnLogin: '返回登录'
 };

packages/base/src/locale/zh-CN/dmsSystem.ts

@@ -225,7 +225,14 @@ export default {
     cbOperationLogsExpiredHours: 'CB工作台操作审计过期时间',
     urlAddressPrefix: 'URL地址前缀',
     urlAddressPrefixTips: '配置能访问SQLE的url地址信息',
-    urlAddressFormatTips: '格式为 http(s)://ip:port/sqle'
+    urlAddressFormatTips: '格式为 http(s)://ip:port/sqle',
+
+    smsSetting: {
+      title: '短信服务',
+      testSuccess: '当前短信服务验证通过',
+      testing: '正在测试短信服务...',
+      smsType: '短信服务类型'
+    }
   },
 
   personalize: {

packages/base/src/page/Account/PersonalSMS/components/ConfigField.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from 'react-i18next';
+import { FormItemLabel } from '@actiontech/shared/lib/components/CustomForm';
+import { VerificationCodeInput } from '@actiontech/shared';
+import { ConfigFieldProps } from '../index.type';
+import { SMSService } from '@actiontech/shared/lib/api';
+
+const ConfigField: React.FC<ConfigFieldProps> = ({ userPhone, username }) => {
+  const { t } = useTranslation();
+
+  const onSendCode = () => {
+    return SMSService.SendSmsCode({ username });
+  };
+
+  return (
+    <>
+      <FormItemLabel label={t('common.phone')}>{userPhone}</FormItemLabel>
+      <FormItemLabel
+        label={t('dmsAccount.sms.verificationCode')}
+        name="code"
+        rules={[{ required: true }]}
+      >
+        <VerificationCodeInput onSendCode={onSendCode} />
+      </FormItemLabel>
+    </>
+  );
+};
+
+export default ConfigField;

packages/base/src/page/Account/PersonalSMS/index.data.ts

@@ -0,0 +1 @@
+export const switchFieldName = 'enabled';

packages/base/src/page/Account/PersonalSMS/index.tsx

@@ -0,0 +1,165 @@
+import { useTranslation } from 'react-i18next';
+import { useBoolean } from 'ahooks';
+import { useMemo, useEffect } from 'react';
+import { Spin, message } from 'antd';
+import { CustomLabelContent } from '@actiontech/shared/lib/components/CustomForm';
+import ConfigField from './components/ConfigField';
+import { ResponseCode } from '@actiontech/shared/lib/enum';
+import { FormFields } from './index.type';
+import { switchFieldName } from './index.data';
+import {
+  useConfigRender,
+  ConfigSwitch,
+  ConfigSubmitButtonField,
+  useConfigSwitchControls
+} from '@actiontech/shared';
+import { PersonalSMSProps } from './index.type';
+import { UserService, SMSService } from '@actiontech/shared/lib/api';
+
+const PersonalSMS: React.FC<PersonalSMSProps> = ({
+  userBaseInfo,
+  getUserInfo,
+  loading
+}) => {
+  const { t } = useTranslation();
+
+  const [messageApi, contextHolder] = message.useMessage();
+
+  const [submitLoading, { setTrue: startSubmit, setFalse: submitFinish }] =
+    useBoolean();
+
+  const {
+    form,
+    renderConfigForm,
+    startModify,
+    modifyFinish,
+    modifyFlag,
+    enabled
+  } = useConfigRender<FormFields>({
+    switchFieldName,
+    switchFieldLabel: (
+      <CustomLabelContent title={t('dmsAccount.sms.title')} tips="" />
+    )
+  });
+
+  useEffect(() => {
+    if (!!userBaseInfo) {
+      form.setFieldsValue({
+        [switchFieldName]: !!userBaseInfo.two_factor_enabled
+      });
+    }
+  }, [userBaseInfo, form]);
+
+  const isConfigClosed = useMemo(() => {
+    return !userBaseInfo?.two_factor_enabled;
+  }, [userBaseInfo]);
+
+  const handleClickModify = () => {
+    startModify();
+  };
+  const handleClickCancel = () => {
+    if (isConfigClosed) form.setFieldValue(switchFieldName, false);
+    modifyFinish();
+  };
+
+  const onSubmit = async (isCodingEnabled: boolean, values?: FormFields) => {
+    startSubmit();
+    if (isCodingEnabled) {
+      const verificationRes = await SMSService.VerifySmsCode({
+        code: values?.code,
+        username: userBaseInfo?.name
+      });
+      if (verificationRes.data.data?.verify_error_message) {
+        messageApi.error(verificationRes.data.data?.verify_error_message);
+      }
+      if (
+        verificationRes.data.code !== ResponseCode.SUCCESS ||
+        !verificationRes.data.data?.is_verify_sent_normally
+      ) {
+        submitFinish();
+        return;
+      }
+    }
+    UserService.UpdateCurrentUser({
+      current_user: {
+        two_factor_enabled: isCodingEnabled
+      }
+    })
+      .then((res) => {
+        if (res.data.code === ResponseCode.SUCCESS) {
+          messageApi.success(t('dmsAccount.sms.updateSuccessTips'));
+          modifyFinish();
+          form.resetFields();
+          getUserInfo();
+        }
+      })
+      .finally(() => {
+        submitFinish();
+      });
+  };
+
+  const onConfigSwitchPopoverConfirm = () => {
+    if (!userBaseInfo?.two_factor_enabled && modifyFlag) {
+      handleClickCancel();
+      hiddenConfigSwitchPopover();
+    } else {
+      onSubmit(false);
+    }
+  };
+
+  const {
+    configSwitchPopoverOpenState,
+    generateConfigSwitchPopoverTitle,
+    onConfigSwitchPopoverOpen,
+    handleConfigSwitchChange,
+    hiddenConfigSwitchPopover
+  } = useConfigSwitchControls(form, switchFieldName);
+
+  return (
+    <div>
+      {contextHolder}
+      <Spin spinning={loading}>
+        {renderConfigForm({
+          data: userBaseInfo ?? {},
+          columns: [],
+          configExtraButtons: null,
+          configSwitchNode: (
+            <ConfigSwitch
+              title={generateConfigSwitchPopoverTitle(modifyFlag)}
+              switchFieldName={switchFieldName}
+              submitLoading={submitLoading}
+              popoverVisible={configSwitchPopoverOpenState}
+              onConfirm={onConfigSwitchPopoverConfirm}
+              onSwitchChange={(open) => {
+                if (open && !userBaseInfo?.phone) {
+                  messageApi.error(t('dmsAccount.sms.noPhoneNumbersTips'));
+                  form.setFieldValue(switchFieldName, false);
+                  return;
+                }
+                handleConfigSwitchChange(open, handleClickModify);
+              }}
+              onSwitchPopoverOpen={onConfigSwitchPopoverOpen}
+            />
+          ),
+          configField: (
+            <ConfigField
+              userPhone={userBaseInfo?.phone}
+              username={userBaseInfo?.name}
+            />
+          ),
+          submitButtonField: (
+            <ConfigSubmitButtonField
+              submitLoading={submitLoading}
+              handleClickCancel={handleClickCancel}
+            />
+          ),
+          onSubmit: (values) => {
+            onSubmit(enabled, values);
+          }
+        })}
+      </Spin>
+    </div>
+  );
+};
+
+export default PersonalSMS;

packages/base/src/page/Account/PersonalSMS/index.type.ts

@@ -0,0 +1,17 @@
+import { IGetUser } from '@actiontech/shared/lib/api/base/service/common';
+
+export type FormFields = {
+  enabled: boolean;
+  code: string;
+};
+
+export type PersonalSMSProps = {
+  userBaseInfo?: IGetUser;
+  getUserInfo: () => void;
+  loading: boolean;
+};
+
+export type ConfigFieldProps = {
+  userPhone?: string;
+  username?: string;
+};