153 lines
7.3 KiB
TypeScript
153 lines
7.3 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
||
import { EmailConfig, MfwConfig, PfwConfig, SmsConfig } from "../../../entities/Passport";
|
||
import { EntityDict } from "../../../oak-app-domain";
|
||
import { Switch, Form, Input, Select, Space, Tag } from 'antd';
|
||
import Styles from './web.module.less';
|
||
|
||
export default function Sms(props: {
|
||
passport: EntityDict['passport']['OpSchema'] & { stateColor: string };
|
||
t: (k: string, params?: any) => string;
|
||
changeEnabled: (enabled: boolean) => void;
|
||
updateConfig: (id: string, config: SmsConfig | EmailConfig | PfwConfig | MfwConfig, path: string, value: any, type?: string) => void;
|
||
}) {
|
||
const { passport, t, changeEnabled, updateConfig } = props;
|
||
const { id, type, enabled, stateColor } = passport;
|
||
const config = passport.config as SmsConfig || {};
|
||
const [templateName, setTemplateName] = useState(config?.templateName || '');
|
||
const [smsCodeDuration, setSmsCodeDuration] = useState(config?.codeDuration || '');
|
||
const [smsDigit, setSmsDigit] = useState(config?.digit || '');
|
||
|
||
useEffect(() => {
|
||
setTemplateName(config?.templateName || '');
|
||
setSmsCodeDuration(config?.codeDuration || '');
|
||
setSmsDigit(config?.digit || '');
|
||
}, [config]);
|
||
|
||
return (
|
||
<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
|
||
<Switch
|
||
checkedChildren="开启"
|
||
unCheckedChildren="关闭"
|
||
checked={enabled}
|
||
onChange={(checked) => {
|
||
changeEnabled(checked)
|
||
}}
|
||
/>
|
||
</div>
|
||
{enabled &&
|
||
<div>
|
||
<Form
|
||
labelCol={{ span: 4 }}
|
||
wrapperCol={{ span: 20 }}
|
||
style={{ maxWidth: 900, marginTop: 16 }}
|
||
>
|
||
<Form.Item
|
||
label="模拟发送"
|
||
tooltip="开启模拟发送短信，发短信不会调用api"
|
||
>
|
||
<Switch
|
||
checkedChildren="是"
|
||
unCheckedChildren="否"
|
||
checked={(config as SmsConfig)?.mockSend}
|
||
onChange={(checked) => {
|
||
updateConfig(id, config!, 'mockSend', checked, 'sms');
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="默认渠道"
|
||
tooltip="发送短信渠道，如阿里云、腾讯云、天翼云"
|
||
>
|
||
<>
|
||
<Select
|
||
placeholder="请选择渠道"
|
||
value={(config as SmsConfig)?.defaultOrigin}
|
||
style={{ width: 120 }}
|
||
onChange={(value) => {
|
||
updateConfig(id, config!, 'defaultOrigin', value, 'sms');
|
||
}}
|
||
options={[
|
||
{ value: 'ali', label: '阿里云' },
|
||
{ value: 'tencent', label: '腾讯云' },
|
||
{ value: 'ctyun', label: '天翼云' },
|
||
]}
|
||
/>
|
||
</>
|
||
</Form.Item>
|
||
<Form.Item label="验证码模版名" tooltip="短信验证码模版名">
|
||
<Input
|
||
placeholder="请输入验证码模版名"
|
||
type="text"
|
||
value={templateName}
|
||
onChange={(e) => {
|
||
setTemplateName(e.target.value);
|
||
}}
|
||
onBlur={() => {
|
||
if (templateName !== (config as SmsConfig)?.templateName) {
|
||
updateConfig(id, config!, 'templateName', templateName, 'sms');
|
||
}
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="验证码有效时间"
|
||
tooltip="短信验证码发送有效时间，不填为1分钟"
|
||
>
|
||
<Input
|
||
placeholder="请输入验证码有效时间"
|
||
type="number"
|
||
value={smsCodeDuration}
|
||
min={0}
|
||
onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val) {
|
||
setSmsCodeDuration(Number(val));
|
||
} else {
|
||
setSmsCodeDuration('');
|
||
}
|
||
}}
|
||
onBlur={() => {
|
||
if (Number(smsCodeDuration) > 0) {
|
||
updateConfig(id, config!, 'codeDuration', smsCodeDuration, 'sms');
|
||
} else {
|
||
updateConfig(id, config!, 'codeDuration', undefined, 'sms');
|
||
}
|
||
}}
|
||
suffix="分钟"
|
||
/>
|
||
</Form.Item>
|
||
<Form.Item
|
||
label="验证码位数"
|
||
tooltip="短信验证码位数，可设置4~8位"
|
||
>
|
||
<Input
|
||
placeholder="请输入验证码有效位数"
|
||
type="number"
|
||
value={smsDigit}
|
||
min={4}
|
||
max={8}
|
||
onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val) {
|
||
setSmsDigit(Number(val));
|
||
} else {
|
||
setSmsDigit('');
|
||
}
|
||
}}
|
||
onBlur={() => {
|
||
if (Number(smsDigit) > 0) {
|
||
updateConfig(id, config!, 'digit', smsDigit, 'sms');
|
||
} else {
|
||
updateConfig(id, config!, 'digit', undefined, 'sms');
|
||
}
|
||
}}
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>
|
||
}
|
||
</div>
|
||
)
|
||
} |