74 lines
3.5 KiB
JavaScript
74 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import { Form, Input, Switch, Button, Space, Select } from 'antd';
|
|
import Styles from './styles.module.less';
|
|
const Upsert = (props) => {
|
|
const { item, clientSecret } = props.data;
|
|
const { t, update, reGenerateClientSecret } = props.methods;
|
|
if (item === undefined) {
|
|
return <div>{t('noData')}</div>;
|
|
}
|
|
return (<div className={Styles.id}>
|
|
<Form layout="vertical" autoComplete="off">
|
|
<Form.Item label={t('name')} rules={[{ required: true, message: t('nameRequired') }]}>
|
|
<Input placeholder={t('namePlaceholder')} value={item.name || ""} onChange={(v) => {
|
|
update({ name: v.target.value });
|
|
}}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('description')}>
|
|
<Input.TextArea placeholder={t('descriptionPlaceholder')} value={item.description || ""} rows={4} onChange={(v) => {
|
|
update({ description: v.target.value });
|
|
}}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('logo')}>
|
|
<Input placeholder={t('logoPlaceholder')} value={item.logo || ""} onChange={(v) => {
|
|
update({ logo: v.target.value });
|
|
}}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('redirectUris')} rules={[{ required: true, message: t('redirectUrisRequired') }]}>
|
|
<Input.TextArea placeholder={t('redirectUrisPlaceholder')} value={Array.isArray(item.redirectUris) ? item.redirectUris.join('\n') : ""} rows={3} onChange={(v) => {
|
|
const uris = v.target.value.split('\n').filter(uri => uri.trim() !== '');
|
|
update({ redirectUris: uris });
|
|
}}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('scopes')}>
|
|
<Select mode="tags" placeholder={t('scopesPlaceholder')} value={item.scopes || []} onChange={(v) => {
|
|
update({ scopes: v });
|
|
}} tokenSeparators={[',']} open={false}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('clientId')}>
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<Input placeholder={t('clientIdPlaceholder')} value={item.id || "已隐藏"} disabled/>
|
|
</Space.Compact>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('clientSecret')}>
|
|
<Space.Compact style={{ width: '100%' }}>
|
|
<Input placeholder={t('clientSecretPlaceholder')} value={clientSecret || "已隐藏"} disabled/>
|
|
<Button type="primary" onClick={reGenerateClientSecret}>
|
|
{t('regenerate')}
|
|
</Button>
|
|
</Space.Compact>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('isConfidential')} valuePropName="checked">
|
|
<Switch checked={!!item.isConfidential} onChange={(checked) => update({ isConfidential: checked })}/>
|
|
</Form.Item>
|
|
|
|
<Form.Item label={t('ableState')} valuePropName="checked">
|
|
<Switch checked={!!item.ableState} onChange={(checked) => update({ ableState: checked ? "enabled" : "disabled" })}/>
|
|
</Form.Item>
|
|
|
|
{/* requirePKCE */}
|
|
<Form.Item label={t('requirePKCE')} valuePropName="checked" tooltip={t('requirePKCETooltip')}>
|
|
<Switch checked={!!item.requirePKCE} onChange={(checked) => update({ requirePKCE: checked })}/>
|
|
</Form.Item>
|
|
</Form>
|
|
</div>);
|
|
};
|
|
export default Upsert;
|