157 lines
5.4 KiB
TypeScript
157 lines
5.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Form, Input, Switch, Button, Space, Upload, Select } from 'antd';
|
|
import { UploadOutlined } from '@ant-design/icons';
|
|
import { RowWithActions, WebComponentProps } from 'oak-frontend-base';
|
|
import Styles from './styles.module.less';
|
|
import { EntityDict } from '../../../../../oak-app-domain';
|
|
|
|
const Upsert = (
|
|
props: WebComponentProps<
|
|
EntityDict,
|
|
'oauthApplication',
|
|
false,
|
|
{
|
|
item: RowWithActions<EntityDict, 'oauthApplication'>;
|
|
clientSecret: string;
|
|
},
|
|
{
|
|
reGenerateClientSecret: () => void;
|
|
}
|
|
>
|
|
) => {
|
|
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>
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Upsert; |