292 lines
16 KiB
JavaScript
292 lines
16 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
||
import { Button, Space, Switch, Affix, Alert, Typography, Form, Input, Tooltip, Select, Modal, Divider } from 'antd';
|
||
import Styles from './web.pc.module.less';
|
||
import classNames from 'classnames';
|
||
import { ExclamationCircleFilled } from '@ant-design/icons';
|
||
const { confirm } = Modal;
|
||
function AppView(props) {
|
||
const { passport, mpAppIds, publicAppIds, t, changeEnabled, updateConfig } = props;
|
||
const { id, type, config, enabled } = passport;
|
||
const [templateName, setTemplateName] = useState(config?.templateName || '');
|
||
const [codeDuration, setCodeDuration] = useState(config?.codeDuration || '');
|
||
const [smtpUrl, setSmtpUrl] = useState(config?.smtpUrl || '');
|
||
const [smtpAccount, setSmtpAccount] = useState(config?.smtpAccount || '');
|
||
const [smtpPassword, setSmtpPassword] = useState(config?.smtpPassword || '');
|
||
const [mAppId, setMAppId] = useState(config?.appId || '');
|
||
const [pAppId, setPAppId] = useState(config?.appId || '');
|
||
useEffect(() => {
|
||
if (type === 'sms') {
|
||
setTemplateName(config?.templateName || '');
|
||
setCodeDuration(config?.codeDuration || '');
|
||
}
|
||
else if (type === 'email') {
|
||
setSmtpUrl(config?.smtpUrl || '');
|
||
setSmtpAccount(config?.smtpAccount || '');
|
||
setSmtpPassword(config?.smtpPassword || '');
|
||
}
|
||
else if (type === 'wechatMpForWeb') {
|
||
setMAppId(config?.appId || '');
|
||
}
|
||
else if (type === 'wechatPublicForWeb') {
|
||
setPAppId(config?.appId || '');
|
||
}
|
||
}, [config]);
|
||
switch (type) {
|
||
case 'sms':
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<div>{t(`passport:v.type.${type}`)}{t('login')}</div>
|
||
<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?.mockSend} onChange={(checked) => {
|
||
updateConfig(id, config, 'mockSend', checked);
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="默认渠道" tooltip="发送短信渠道，如阿里云、腾讯云、天翼云">
|
||
<>
|
||
<Select placeholder="请选择渠道" value={config?.defaultOrigin} style={{ width: 120 }} onChange={(value) => {
|
||
updateConfig(id, config, 'defaultOrigin', value);
|
||
}} 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?.templateName) {
|
||
updateConfig(id, config, 'templateName', templateName);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="验证码有效时间" tooltip="短信验证码发送有效时间">
|
||
<Input placeholder="请输入验证码有效时间" type="number" value={codeDuration} min={0} onChange={(e) => {
|
||
const val = e.target.value;
|
||
if (val) {
|
||
setCodeDuration(Number(val));
|
||
}
|
||
else {
|
||
setCodeDuration('');
|
||
}
|
||
}} onBlur={() => {
|
||
if (Number(codeDuration) > 0) {
|
||
updateConfig(id, config, 'codeDuration', codeDuration);
|
||
}
|
||
else {
|
||
updateConfig(id, config, 'codeDuration', undefined);
|
||
}
|
||
}} suffix="分钟"/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
case 'email':
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<div>{t(`passport:v.type.${type}`)}{t('login')}</div>
|
||
<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="smtpUrl">
|
||
<Input placeholder="请输入smtpUrl" type="text" value={smtpUrl} addonBefore="smtp://" onChange={(e) => {
|
||
setSmtpUrl(e.target.value);
|
||
}} onBlur={() => {
|
||
if (smtpUrl !== config?.smtpUrl) {
|
||
updateConfig(id, config, 'smtpUrl', smtpUrl);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="smtpAccount">
|
||
<Input placeholder="请输入smtpAccount" type="text" value={smtpAccount} onChange={(e) => {
|
||
setSmtpAccount(e.target.value);
|
||
}} onBlur={() => {
|
||
if (smtpAccount !== config?.smtpAccount) {
|
||
updateConfig(id, config, 'smtpAccount', smtpAccount);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
<Form.Item label="smtpPassword">
|
||
<Input
|
||
// placeholder="请输入验证码有效时间"
|
||
type="password" value={smtpPassword} onChange={(e) => {
|
||
setSmtpPassword(e.target.value);
|
||
}} onBlur={() => {
|
||
if (smtpPassword !== config?.smtpPassword) {
|
||
updateConfig(id, config, 'smtpPassword', smtpPassword);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
case 'wechatPublicForWeb':
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<div>{t(`passport:v.type.${type}`)}{t('login')}</div>
|
||
<Tooltip title={(publicAppIds && publicAppIds.length > 0) ? '' : '如需启用公众号授权登录，请先前往应用管理，创建是服务号的公众号application,并完成基础配置'}>
|
||
<Switch disabled={!(publicAppIds && publicAppIds.length > 0)} checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
if (checked && publicAppIds.length === 1) {
|
||
updateConfig(id, config, 'appId', publicAppIds[0]);
|
||
}
|
||
}}/>
|
||
</Tooltip>
|
||
</div>
|
||
{enabled &&
|
||
<div>
|
||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
||
<Form.Item label="appId">
|
||
<Input placeholder="请输入appId" type="text" value={pAppId} onChange={(e) => {
|
||
setPAppId(e.target.value);
|
||
}} onBlur={() => {
|
||
if (pAppId !== config?.appId) {
|
||
updateConfig(id, config, 'appId', pAppId);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
case 'wechatMpForWeb':
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<div>{t(`passport:v.type.${type}`)}{t('login')}</div>
|
||
<Tooltip title={(mpAppIds && mpAppIds.length > 0) ? '' : '如需启用小程序授权登录，请先前往应用管理，创建小程序application,并完成基础配置'}>
|
||
<Switch disabled={!(mpAppIds && mpAppIds.length > 0)} checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
if (checked && mpAppIds.length === 1) {
|
||
updateConfig(id, config, 'appId', mpAppIds[0]);
|
||
}
|
||
}}/>
|
||
</Tooltip>
|
||
</div>
|
||
{enabled &&
|
||
<div>
|
||
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
||
<Form.Item label="appId">
|
||
<Input placeholder="请输入appId" type="text" value={mAppId} onChange={(e) => {
|
||
setMAppId(e.target.value);
|
||
}} onBlur={() => {
|
||
if (mAppId !== config?.appId) {
|
||
updateConfig(id, config, 'appId', mAppId);
|
||
}
|
||
}}/>
|
||
</Form.Item>
|
||
</Form>
|
||
</div>}
|
||
</div>);
|
||
case 'wechatMp':
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<div>{t(`passport:v.type.${type}`)}{t('login')}</div>
|
||
<Tooltip title={(mpAppIds && mpAppIds.length > 0) ? '' : '如需启用小程序登录，请先前往应用管理，创建小程序application,并完成基础配置'}>
|
||
<Switch disabled={!(mpAppIds && mpAppIds.length > 0)} checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}}/>
|
||
</Tooltip>
|
||
</div>
|
||
</div>);
|
||
case 'wechatPublic':
|
||
return (<div className={Styles.item}>
|
||
<div className={Styles.title}>
|
||
<div>{t(`passport:v.type.${type}`)}{t('login')}</div>
|
||
<Tooltip title={(publicAppIds && publicAppIds.length > 0) ? '' : '如需启用公众号登录，请先前往应用管理，创建是服务号的公众号application,并完成基础配置'}>
|
||
<Switch disabled={!(publicAppIds && publicAppIds.length > 0)} checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}}/>
|
||
</Tooltip>
|
||
</div>
|
||
</div>);
|
||
default:
|
||
return (<div className={classNames(Styles.item, Styles.title)}>
|
||
<div>{t(`passport:v.type.${type}`)}{t('login')}</div>
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}}/>
|
||
</div>);
|
||
}
|
||
}
|
||
export default function render(props) {
|
||
const { data, methods } = props;
|
||
const { oakFullpath, oakExecutable, oakExecuting, oakDirty, systemId, passports, systemName, mpAppIds, publicAppIds, } = data;
|
||
const { clean, execute, t, updateItem, updateConfig, checkConfrim, myConfirm } = methods;
|
||
const showConfirm = (warnings) => {
|
||
confirm({
|
||
title: '确定保存当前更新吗？',
|
||
icon: <ExclamationCircleFilled />,
|
||
width: 540,
|
||
content: <Space direction='vertical'>
|
||
<div>当前登录方式配置存在以下问题可能影响登录：</div>
|
||
{warnings.map((ele) => {
|
||
return (<div key={ele.id}>
|
||
<div style={{ width: 200 }}>
|
||
<Divider orientation="left">{t(`passport:v.type.${ele.type}`)}{t('login')}</Divider>
|
||
</div>
|
||
<div style={{ fontSize: 13 }}>{ele.tip}</div>
|
||
</div>);
|
||
})}
|
||
</Space>,
|
||
async onOk() {
|
||
const ids = warnings.map((ele) => ele.id);
|
||
await myConfirm(ids);
|
||
},
|
||
onCancel() {
|
||
},
|
||
});
|
||
};
|
||
if (passports?.length > 0) {
|
||
return (<>
|
||
<Affix offsetTop={64}>
|
||
<Alert message={<div>
|
||
<text>
|
||
您正在更新
|
||
<Typography.Text keyboard>
|
||
system
|
||
</Typography.Text>
|
||
对象
|
||
<Typography.Text keyboard>
|
||
{systemName}
|
||
</Typography.Text>
|
||
的登录配置，请谨慎操作
|
||
</text>
|
||
</div>} type="info" showIcon action={<Space>
|
||
<Button disabled={!oakDirty} type="primary" danger onClick={() => clean()} style={{
|
||
marginRight: 10,
|
||
}}>
|
||
重置
|
||
</Button>
|
||
<Button disabled={!oakDirty} type="primary" onClick={async () => {
|
||
const warnings = checkConfrim();
|
||
if (warnings && warnings.length > 0) {
|
||
showConfirm(warnings);
|
||
}
|
||
else {
|
||
await execute();
|
||
}
|
||
}}>
|
||
确定
|
||
</Button>
|
||
</Space>}/>
|
||
</Affix>
|
||
{passports.map((passport) => (<AppView key={passport.id} passport={passport} mpAppIds={mpAppIds} publicAppIds={publicAppIds} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>))}
|
||
</>);
|
||
}
|
||
}
|