Files
gpustack-ui/src/pages/maas-provider/forms/api-keys.tsx
T
2026-02-11 15:30:35 +08:00

75 lines
2.0 KiB
TypeScript

import MetadataList from '@/components/metadata-list';
import Password from '@/components/seal-form/password';
import { PageAction } from '@/config';
import useAppUtils from '@/hooks/use-app-utils';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useFormContext } from '../config/form-context';
import { FormData } from '../config/types';
const AccessToken = () => {
const intl = useIntl();
const { getRuleMessage } = useAppUtils();
const form = Form.useFormInstance<FormData>();
const { action } = useFormContext();
const tokenList = Form.useWatch('api_tokens', form) || [];
const onAdd = () => {
const newList = [...tokenList];
newList.push('');
form.setFieldValue('api_tokens', newList);
};
const onDelete = (index: number) => {
const newList = [...tokenList];
newList.splice(index, 1);
form.setFieldValue('api_tokens', newList);
};
const handleInputChange = (
index: number,
e: React.ChangeEvent<HTMLInputElement>
) => {
const newList = [...tokenList];
newList[index] = e.target.value;
form.setFieldValue('api_tokens', newList);
};
return (
<>
<Form.Item
name="api_tokens"
style={{
marginBottom: 8
}}
rules={[
{
required: false,
message: getRuleMessage('input', 'providers.form.tokens.title')
}
]}
>
<MetadataList
dataList={tokenList}
btnText={intl.formatMessage({ id: 'providers.form.tokens.add' })}
label={intl.formatMessage({ id: 'providers.form.fallback.token' })}
onAdd={onAdd}
onDelete={onDelete}
>
{(item, index) => (
<div style={{ width: '100%' }} key={index}>
<Password
value={item}
visibilityToggle={action !== PageAction.EDIT}
onChange={(e) => handleInputChange(index, e)}
></Password>
</div>
)}
</MetadataList>
</Form.Item>
</>
);
};
export default AccessToken;