[incubator-apisix-dashboard] branch next updated: update SSL page (#193)

[ju...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

juzhiyuan pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git


The following commit(s) were added to refs/heads/next by this push:
     new 1572612  update SSL page (#193)
1572612 is described below

commit 1572612b40905a6619a6240cb2da8ff4d94dfc5f
Author: litesun <31...@users.noreply.github.com>
AuthorDate: Mon May 18 15:50:54 2020 +0800

    update SSL page (#193)
    
    * feat: limit upload file
    
    * feat: intercept default upload api request
    
    * feat: limit upload file type
---
 .../components/CertificateUploader/index.tsx       | 36 +++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/pages/SSLModule/create/components/CertificateUploader/index.tsx b/src/pages/SSLModule/create/components/CertificateUploader/index.tsx
index f83a8e3..9a617ca 100644
--- a/src/pages/SSLModule/create/components/CertificateUploader/index.tsx
+++ b/src/pages/SSLModule/create/components/CertificateUploader/index.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { Form, Button, Upload, message } from 'antd';
 import { UploadOutlined } from '@ant-design/icons';
-import { UploadChangeParam } from 'antd/lib/upload';
 import { UploadFile } from 'antd/lib/upload/interface';
 import { useForm } from 'antd/es/form/util';
 import forge from 'node-forge';
@@ -31,7 +30,9 @@ interface UploaderProps {
 }
 
 const CertificateUploader: React.FC<UploaderProps> = ({ onSuccess, onRemove, data }) => {
+  const { publicKeyDefaultFileList = [], privateKeyDefaultFileList = [] } = data;
   const [form] = useForm();
+
   const genUploadFile = (name = ''): UploadFile => {
     return {
       uid: Math.random().toString(36).slice(2),
@@ -41,10 +42,10 @@ const CertificateUploader: React.FC<UploaderProps> = ({ onSuccess, onRemove, dat
       type: '',
     };
   };
-  const onChange = (info: UploadChangeParam<UploadFile<any>>, type: UploadType) => {
-    if (!info.file.originFileObj) return;
+
+  const parseCertificate = (file: File | Blob, fileName: string, type: UploadType) => {
     const fileReader = new FileReader();
-    fileReader.readAsText(info.file.originFileObj);
+    fileReader.readAsText(file);
     // eslint-disable-next-line func-names
     fileReader.onload = function (event) {
       const { result } = event.currentTarget as any;
@@ -59,7 +60,7 @@ const CertificateUploader: React.FC<UploaderProps> = ({ onSuccess, onRemove, dat
             sni: altNames,
             cert: result,
             expireTime: cert.validity.notAfter,
-            publicKeyDefaultFileList: [genUploadFile(info.file.name)],
+            publicKeyDefaultFileList: [genUploadFile(fileName)],
           };
           onSuccess(uploadPublicData);
         } catch (error) {
@@ -68,43 +69,42 @@ const CertificateUploader: React.FC<UploaderProps> = ({ onSuccess, onRemove, dat
       } else {
         const uploadprivateData: UploadPrivateSuccessData = {
           key: result,
-          privateKeyDefaultFileList: [genUploadFile(info.file.name)],
+          privateKeyDefaultFileList: [genUploadFile(fileName)],
         };
         onSuccess(uploadprivateData);
       }
     };
   };
 
-  const publicUploadProps = {
-    defaultFileList: data.publicKeyDefaultFileList || [],
-  };
-
-  const privateUploadProps = {
-    defaultFileList: data.privateKeyDefaultFileList || [],
+  const beforeUpload = (file: File, fileList: File[], type: UploadType) => {
+    parseCertificate(file, file.name, type);
+    return false;
   };
 
   return (
     <Form form={form} layout="horizontal" className={styles.stepForm}>
       <Form.Item>
         <Upload
+          accept=".pem"
           className={styles.stepForm}
-          onChange={(info) => onChange(info, 'PUBLIC_KEY')}
           onRemove={() => onRemove('PUBLIC_KEY')}
-          {...publicUploadProps}
+          defaultFileList={publicKeyDefaultFileList}
+          beforeUpload={(file, fileList) => beforeUpload(file, fileList, 'PUBLIC_KEY')}
         >
-          <Button>
+          <Button disabled={publicKeyDefaultFileList.length === 1}>
             <UploadOutlined /> 点击上传公钥
           </Button>
         </Upload>
       </Form.Item>
       <Form.Item>
         <Upload
+          accept=".key"
           className={styles.stepForm}
-          onChange={(info) => onChange(info, 'PRIVATE_KEY')}
           onRemove={() => onRemove('PRIVATE_KEY')}
-          {...privateUploadProps}
+          defaultFileList={privateKeyDefaultFileList}
+          beforeUpload={(file, fileList) => beforeUpload(file, fileList, 'PRIVATE_KEY')}
         >
-          <Button>
+          <Button disabled={privateKeyDefaultFileList.length === 1}>
             <UploadOutlined /> 点击上传私钥
           </Button>
         </Upload>