chore: user apikeys

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

@@ -1,24 +1,20 @@
-import CopyButton from '@/components/copy-button';
 import ModalFooter from '@/components/modal-footer';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageActionType } from '@/config/types';
 import { SyncOutlined } from '@ant-design/icons';
 import { Form, Modal } from 'antd';
+import { expirationOptions } from '../config';
+import { FormData } from '../config/types';
 
 type AddModalProps = {
   title: string;
   action: PageActionType;
   open: boolean;
-  onOk: () => void;
+  onOk: (values: FormData) => void;
   onCancel: () => void;
 };
 
-const expirationOptions = [
-  { label: '1 Month', value: '1m' },
-  { label: '6 Months', value: '6m' },
-  { label: 'Never', value: 'never' }
-];
 const AddModal: React.FC<AddModalProps> = ({
   title,
   action,
@@ -36,11 +32,15 @@ const AddModal: React.FC<AddModalProps> = ({
     />
   );
 
+  const handleSumit = () => {
+    form.submit();
+  };
+
   return (
     <Modal
       title={title}
       open={open}
-      onOk={onOk}
+      onOk={handleSumit}
       onCancel={onCancel}
       destroyOnClose={true}
       closeIcon={false}
@@ -48,27 +48,24 @@ const AddModal: React.FC<AddModalProps> = ({
       keyboard={false}
       width={600}
       styles={{}}
-      footer={<ModalFooter onOk={onOk} onCancel={onCancel}></ModalFooter>}
+      footer={
+        <ModalFooter onOk={handleSumit} onCancel={onCancel}></ModalFooter>
+      }
     >
-      <Form name="addAPIKey" form={form} onFinish={onOk}>
-        <Form.Item name="name" rules={[{ required: true }]}>
-          <SealInput.Input label="Display Name" required></SealInput.Input>
+      <Form name="addAPIKey" form={form} onFinish={onOk} preserve={false}>
+        <Form.Item<FormData> name="name" rules={[{ required: true }]}>
+          <SealInput.Input label="Name" required></SealInput.Input>
         </Form.Item>
-        <Form.Item name="secretkey" rules={[{ required: true }]}>
-          <SealInput.Input
-            label="Secret Key"
-            addonAfter={
-              <CopyButton text={form.getFieldValue('secretKey')}></CopyButton>
-            }
-          ></SealInput.Input>
-        </Form.Item>
-        <Form.Item name="expiration" rules={[{ required: true }]}>
+        <Form.Item<FormData> name="expires_in" rules={[{ required: true }]}>
           <SealSelect
             label="Expiration"
             required
             options={expirationOptions}
           ></SealSelect>
         </Form.Item>
+        <Form.Item<FormData> name="description" rules={[{ required: false }]}>
+          <SealInput.TextArea label="Description"></SealInput.TextArea>
+        </Form.Item>
       </Form>
     </Modal>
   );