190 lines
8.8 KiB
JavaScript
190 lines
8.8 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { Button, Space, Switch, Affix, Alert, Typography, Modal, Divider, Tag, Row, Tooltip, } from 'antd';
|
||
import Styles from './web.pc.module.less';
|
||
import classNames from 'classnames';
|
||
import { ExclamationCircleFilled } from '@ant-design/icons';
|
||
import Sms from './sms';
|
||
import Email from './email';
|
||
import Password from './password';
|
||
import WechatPublicForWeb from './wechatPublicForWeb';
|
||
import WechatMpForWeb from './wechatMpForWeb';
|
||
import WechatMp from './wechatMp';
|
||
import WechatPublic from './wechatPublic';
|
||
import LoginName from './loginName';
|
||
import Oauth from './oauth';
|
||
const { confirm } = Modal;
|
||
function AppView(props) {
|
||
const { passport, t, changeEnabled, updateConfig } = props;
|
||
const { id, type, config, enabled, stateColor } = passport;
|
||
return (<div className={classNames(Styles.item, Styles.title)}>
|
||
<Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
|
||
<Tooltip title="暂未支持该登录方式">
|
||
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} disabled={!enabled} onChange={(checked) => {
|
||
changeEnabled(checked);
|
||
}}/>
|
||
</Tooltip>
|
||
</div>);
|
||
}
|
||
export default function render(props) {
|
||
const { data, methods } = props;
|
||
const { oakFullpath, oakExecuting, oakDirty, oakLoading, systemId, passports, systemName, oauthOptions } = data;
|
||
const { clean, execute, t, updateItem, updateConfig, checkConfrim, myConfirm } = methods;
|
||
const [createOpen, setCreateOpen] = useState(false);
|
||
const [newType, setNewType] = useState(undefined);
|
||
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() {
|
||
},
|
||
});
|
||
};
|
||
return (<>
|
||
<Affix offsetTop={64}>
|
||
<Alert message={<div>
|
||
<span>
|
||
您正在更新
|
||
<Typography.Text keyboard>
|
||
system
|
||
</Typography.Text>
|
||
对象
|
||
<Typography.Text keyboard>
|
||
{systemName}
|
||
</Typography.Text>
|
||
的登录配置，请谨慎操作
|
||
</span>
|
||
</div>} type="info" showIcon action={<Space size={12}>
|
||
{/* <Button
|
||
disabled={oakLoading || oakExecuting}
|
||
onClick={() => setCreateOpen(true)}
|
||
>
|
||
创建
|
||
</Button> */}
|
||
<Button disabled={!oakDirty} type="primary" danger onClick={() => clean()}>
|
||
重置
|
||
</Button>
|
||
<Button disabled={!oakDirty} type="primary" onClick={async () => {
|
||
const warnings = checkConfrim();
|
||
if (warnings && warnings.length > 0) {
|
||
showConfirm(warnings);
|
||
}
|
||
else {
|
||
await execute();
|
||
}
|
||
}}>
|
||
确定
|
||
</Button>
|
||
</Space>}/>
|
||
</Affix>
|
||
<Row>
|
||
<div className={Styles.tips}>
|
||
<div>* 如需启用邮箱登录，请先前往配置管理邮箱设置，创建系统邮箱,并完成相关配置</div>
|
||
<div>* 如需启用小程序授权登录，请先前往应用管理，创建小程序application,并完成基础配置</div>
|
||
<div>* 如需启用公众号授权登录，请先前往应用管理，创建是服务号的公众号application,并完成基础配置</div>
|
||
<div>* 如需启用OAuth授权登录，请先前往OAuth管理，创建OAuth供应商,并启用</div>
|
||
</div>
|
||
</Row>
|
||
{passports && passports.map((passport) => {
|
||
switch (passport.type) {
|
||
case 'sms':
|
||
return (<Sms key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>);
|
||
case 'email':
|
||
return (<Email key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>);
|
||
case 'password':
|
||
return (<Password key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>);
|
||
case 'wechatPublicForWeb':
|
||
return (<WechatPublicForWeb key={passport.id} passport={passport} appIdStr={passport?.appIdStr} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>);
|
||
case 'wechatMpForWeb':
|
||
return (<WechatMpForWeb key={passport.id} passport={passport} appIdStr={passport?.appIdStr} hasQrCodePrefix={passport?.hasQrCodePrefix} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>);
|
||
case 'wechatMp':
|
||
return (<WechatMp key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}}/>);
|
||
case 'wechatPublic':
|
||
return (<WechatPublic key={passport.id} passport={passport}
|
||
// publicAppIds={publicAppIds}
|
||
t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}}/>);
|
||
case 'loginName':
|
||
return (<LoginName key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>);
|
||
case 'oauth':
|
||
return (<Oauth key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig} oauthOptions={oauthOptions}/>);
|
||
default:
|
||
return (<AppView key={passport.id} passport={passport} t={t} changeEnabled={(enabled) => {
|
||
updateItem({
|
||
enabled,
|
||
}, passport.id);
|
||
}} updateConfig={updateConfig}/>);
|
||
}
|
||
})}
|
||
|
||
{/* <Modal
|
||
title="新建短信登录配置"
|
||
open={createOpen}
|
||
onOk={() => {
|
||
methods.addItem({
|
||
type: newType,
|
||
systemId,
|
||
enabled: false,
|
||
})
|
||
setCreateOpen(false);
|
||
}}
|
||
onCancel={() => {
|
||
setNewType(undefined);
|
||
setCreateOpen(false);
|
||
}}
|
||
destroyOnClose
|
||
>
|
||
</Modal> */}
|
||
</>);
|
||
}
|