feat: custom api key

src/pages/api-keys/components/add-apikey-modal/form.tsx

@@ -1,3 +1,4 @@
+import Password from '@/components/seal-form/password';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
@@ -5,7 +6,7 @@ import { PageActionType } from '@/config/types';
 import { useIntl } from '@umijs/max';
 import { Form } from 'antd';
 import React from 'react';
-import { expirationOptions } from '../../config';
+import { accessScopeOptions, expirationOptions } from '../../config';
 import { FormData, ListItem } from '../../config/types';
 import AllowModelsForm from './allow-models';
 
@@ -16,6 +17,17 @@ const APIKeyForm: React.FC<{
 }> = ({ action, currentData, onValuesChange }) => {
   const intl = useIntl();
 
+  const optionRender = (option: any) => {
+    return (
+      <span className="flex-center gap-4">
+        {option.label}
+        {option.data.description && (
+          <span className="text-tertiary">[{option.data.description}]</span>
+        )}
+      </span>
+    );
+  };
+
   return (
     <>
       <Form.Item<FormData>
@@ -39,6 +51,28 @@ const APIKeyForm: React.FC<{
           required
         ></SealInput.Input>
       </Form.Item>
+      {action === PageAction.CREATE && (
+        <Form.Item<FormData> name="custom">
+          <Password
+            trim
+            autoComplete="new-password"
+            label={intl.formatMessage({ id: 'playground.params.custom' })}
+          ></Password>
+        </Form.Item>
+      )}
+      <Form.Item<FormData>
+        name="scope"
+        normalize={(value) => (value ? [value] : [])}
+        getValueProps={(value) => ({
+          value: Array.isArray(value) ? value[0] : value
+        })}
+      >
+        <SealSelect
+          optionRender={optionRender}
+          options={accessScopeOptions}
+          label={intl.formatMessage({ id: 'models.table.accessScope' })}
+        ></SealSelect>
+      </Form.Item>
       <Form.Item<FormData>
         name="expires_in"
         rules={[

src/pages/api-keys/components/add-apikey-modal/index.tsx

@@ -96,6 +96,12 @@ const AddModal: React.FC<AddModalProps> = ({
       expires_in: getExpireValue(data.expires_in)
     };
     const res = await createApisKey({ data: params });
+
+    // if custom value
+    if (data.custom) {
+      return onOk();
+    }
+
     setAPIKeyValue(res.value);
     setShowKey(true);
   };
@@ -107,6 +113,7 @@ const AddModal: React.FC<AddModalProps> = ({
 
   const handleOnOk = async (formdata: FormData) => {
     try {
+      console.log('formdata=========', formdata);
       setLoading(true);
       const data = {
         ..._.omit(formdata, ['allowed_type']),
@@ -261,6 +268,9 @@ const AddModal: React.FC<AddModalProps> = ({
           form={form}
           onFinish={handleOnOk}
           preserve={false}
+          initialValues={{
+            scope: ['*']
+          }}
         >
           {!showKey && (
             <APIKeyForm