33 lines
1.6 KiB
JavaScript
33 lines
1.6 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import { Switch, Form, Select, Tag, Tooltip, } from 'antd';
|
|
import Styles from './web.module.less';
|
|
export default function Oauth(props) {
|
|
const { passport, t, changeEnabled, updateConfig, oauthOptions } = props;
|
|
const { id, type, enabled, stateColor } = passport;
|
|
const config = passport.config || {};
|
|
const [oauthIds, setOauthIds] = useState(config?.oauthIds);
|
|
useEffect(() => {
|
|
setOauthIds(config?.oauthIds || []);
|
|
}, [config]);
|
|
return (<div className={Styles.item}>
|
|
<div className={Styles.title}>
|
|
<Tag color={stateColor}>{t(`passport:v.type.${type}`)}</Tag>
|
|
<Tooltip title={(oauthOptions && oauthOptions?.length > 0) ? '' : '请先启用oauth供应商'}>
|
|
<Switch checkedChildren="开启" unCheckedChildren="关闭" checked={enabled} onChange={(checked) => {
|
|
changeEnabled(checked);
|
|
}} disabled={!(oauthOptions && oauthOptions?.length > 0)}/>
|
|
</Tooltip>
|
|
</div>
|
|
{enabled &&
|
|
<div>
|
|
<Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} style={{ maxWidth: 900, marginTop: 16 }}>
|
|
<Form.Item label='oauth供应商'>
|
|
<Select mode="multiple" style={{ width: '100%' }} placeholder="请选择oauth供应商" value={oauthIds} onChange={(value) => {
|
|
updateConfig(id, config, 'oauthIds', value, 'oauth');
|
|
}} options={oauthOptions}/>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>}
|
|
</div>);
|
|
}
|