You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2020/06/15 09:30:59 UTC
[incubator-apisix-dashboard] branch next updated: feat: seprate ssl
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 ce3e90e feat: seprate ssl
ce3e90e is described below
commit ce3e90e278756256c4b1a6679adb7e07d3b56bee
Author: juzhiyuan <jj...@gmail.com>
AuthorDate: Mon Jun 15 17:30:26 2020 +0800
feat: seprate ssl
---
src/pages/ssl/Create.less | 4 -
src/pages/ssl/Create.tsx | 9 +--
src/pages/ssl/components/Step1/index.tsx | 121 +++++++++++++++++++++----------
src/pages/ssl/components/Step2/index.tsx | 90 +++++------------------
src/pages/ssl/components/Step3/index.tsx | 56 +++++++-------
src/pages/ssl/components/Step4/index.tsx | 36 ---------
6 files changed, 134 insertions(+), 182 deletions(-)
diff --git a/src/pages/ssl/Create.less b/src/pages/ssl/Create.less
index 944a740..3f6f0d4 100644
--- a/src/pages/ssl/Create.less
+++ b/src/pages/ssl/Create.less
@@ -99,7 +99,3 @@
display: flex;
justify-content: center;
}
-.stepForm {
- max-width: 500px;
- margin: 40px auto 0;
-}
diff --git a/src/pages/ssl/Create.tsx b/src/pages/ssl/Create.tsx
index 836a00a..69ff3fb 100644
--- a/src/pages/ssl/Create.tsx
+++ b/src/pages/ssl/Create.tsx
@@ -4,13 +4,11 @@ import { PageHeaderWrapper } from '@ant-design/pro-layout';
import Step1 from './components/Step1';
import Step2 from './components/Step2';
import Step3 from './components/Step3';
-import Step4 from './components/Step4';
import styles from './Create.less';
const { Step } = Steps;
export interface FormData {
- createType?: 'INPUT' | 'UPLOAD';
sni?: string;
cert?: string;
key?: string;
@@ -25,9 +23,7 @@ export interface StepProps {
const Create: React.FC = () => {
const [currentStep, setCurrentStep] = useState(0);
- const [formData, setFormData] = useState<Partial<FormData>>({
- createType: 'INPUT',
- });
+ const [formData, setFormData] = useState<Partial<FormData>>({});
const setpProps = {
data: formData,
onStepChange: setCurrentStep,
@@ -46,7 +42,6 @@ const Create: React.FC = () => {
{Boolean(currentStep === 0) && <Step1 {...setpProps} />}
{Boolean(currentStep === 1) && <Step2 {...setpProps} />}
{Boolean(currentStep === 2) && <Step3 {...setpProps} />}
- {Boolean(currentStep === 3) && <Step4 {...setpProps} />}
</>
);
};
@@ -56,7 +51,7 @@ const Create: React.FC = () => {
<Card bordered={false}>
<>
<Steps current={currentStep} className={styles.steps}>
- {['选择创建类型', '编辑上传信息', '预览', '完成'].map((item) => (
+ {['完善证书信息', '预览', '完成'].map((item) => (
<Step title={item} key={item} />
))}
</Steps>
diff --git a/src/pages/ssl/components/Step1/index.tsx b/src/pages/ssl/components/Step1/index.tsx
index c463d12..f73aa40 100644
--- a/src/pages/ssl/components/Step1/index.tsx
+++ b/src/pages/ssl/components/Step1/index.tsx
@@ -1,50 +1,98 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Form, Button, Select } from 'antd';
-import styles from '../../Create.less';
-import { StepProps } from '../../Create';
+import { UploadFile } from 'antd/lib/upload/interface';
-const { Option } = Select;
+import CertificateForm from '../CertificateForm';
+import { CertificateUploader, UploadType } from '../CertificateUploader';
+import { StepProps } from '../../Create';
+import { verifyKeyPaire } from '../../service';
-const formItemLayout = {
- labelCol: {
- span: 5,
- },
- wrapperCol: {
- span: 19,
- },
-};
+type CreateType = 'Upload' | 'Input';
-const Step1: React.FC<StepProps> = ({ data, onStepChange, onFormChange }) => {
+const Step: React.FC<StepProps> = ({ onStepChange, onFormChange, data }) => {
const [form] = Form.useForm();
const { validateFields } = form;
- const onValidateForm = () => {
- validateFields().then((values) => {
- onStepChange(1);
- onFormChange({ createType: values.createType });
- });
+
+ const [publicKeyList, setPublicKeyList] = useState<UploadFile[]>([]);
+ const [privateKeyList, setPrivateKeyList] = useState<UploadFile[]>([]);
+
+ const [createType, setCreateType] = useState<CreateType>('Input');
+
+ const onValidateForm = async () => {
+ let keyPaire = { cert: '', key: '' };
+ validateFields()
+ .then((value) => {
+ keyPaire = { cert: value.cert, key: value.key };
+ return verifyKeyPaire(value.cert, value.key);
+ })
+ .then((_data) => {
+ const { snis, validity_end } = _data.data;
+ onFormChange({
+ ...keyPaire,
+ sni: snis.join(';'),
+ expireTime: new Date(validity_end * 1000).toLocaleString(),
+ });
+ onStepChange(1);
+ });
};
+ const onRemove = (type: UploadType) => {
+ if (type === 'PUBLIC_KEY') {
+ onFormChange({
+ cert: '',
+ sni: '',
+ expireTime: undefined,
+ });
+ setPublicKeyList([]);
+ } else {
+ onFormChange({
+ key: '',
+ });
+ setPrivateKeyList([]);
+ }
+ };
return (
<>
- <Form
- {...formItemLayout}
- form={form}
- layout="horizontal"
- className={styles.stepForm}
- initialValues={data}
- >
- <Form.Item
- label="创建方式"
- name="createType"
- rules={[{ required: true, message: '请选择创建方式' }]}
+ <Form.Item label="方式">
+ <Select
+ placeholder="请选择创建方式"
+ defaultValue="Input"
+ onChange={(value: CreateType) => {
+ onFormChange({}, true);
+ setCreateType(value);
+ }}
>
- <Select placeholder="请选择创建方式" onChange={() => onFormChange({}, true)}>
- <Option value="INPUT">手动输入</Option>
- <Option value="UPLOAD">上传证书</Option>
- </Select>
- </Form.Item>
- </Form>
+ <Select.Option value="Input">手动输入</Select.Option>
+ <Select.Option value="Upload">上传证书</Select.Option>
+ </Select>
+ </Form.Item>
+ <div style={createType === 'Input' ? {} : { display: 'none' }}>
+ <CertificateForm mode="EDIT" form={form} data={data} />
+ </div>
+ {Boolean(createType === 'Upload') && (
+ <CertificateUploader
+ onSuccess={(_data: any) => {
+ form.setFieldsValue(_data);
+ if (_data.cert) {
+ setPublicKeyList(_data.publicKeyList);
+ } else {
+ setPrivateKeyList(_data.privateKeyList);
+ }
+ }}
+ onRemove={onRemove}
+ data={{ publicKeyList, privateKeyList }}
+ />
+ )}
<div style={{ width: '100%', textAlign: 'center' }}>
+ <Button
+ type="primary"
+ onClick={() => {
+ onStepChange(0);
+ }}
+ style={{ marginRight: '8px' }}
+ >
+ 上一步
+ </Button>
<Button type="primary" onClick={onValidateForm}>
下一步
</Button>
@@ -52,5 +100,4 @@ const Step1: React.FC<StepProps> = ({ data, onStepChange, onFormChange }) => {
</>
);
};
-
-export default Step1;
+export default Step;
diff --git a/src/pages/ssl/components/Step2/index.tsx b/src/pages/ssl/components/Step2/index.tsx
index d15dc0e..f8cef19 100644
--- a/src/pages/ssl/components/Step2/index.tsx
+++ b/src/pages/ssl/components/Step2/index.tsx
@@ -1,86 +1,32 @@
-import React, { useState } from 'react';
+import React from 'react';
import { Form, Button } from 'antd';
-import { UploadFile } from 'antd/lib/upload/interface';
-
+import { create as createSSL } from '@/pages/ssl/service';
import CertificateForm from '../CertificateForm';
-import { CertificateUploader, UploadType } from '../CertificateUploader';
import { StepProps } from '../../Create';
-import { verifyKeyPaire } from '../../service';
-const Step2: React.FC<StepProps> = ({ onStepChange, onFormChange, data }) => {
+const Step: React.FC<StepProps> = ({ data, onStepChange }) => {
const [form] = Form.useForm();
- const { validateFields } = form;
-
- const [publicKeyList, setPublicKeyList] = useState<UploadFile[]>([]);
- const [privateKeyList, setPrivateKeyList] = useState<UploadFile[]>([]);
-
- const onValidateForm = async () => {
- let keyPaire = { cert: '', key: '' };
- validateFields()
- .then((value) => {
- keyPaire = { cert: value.cert, key: value.key };
- return verifyKeyPaire(value.cert, value.key);
- })
- .then((_data) => {
- const { snis, validity_end } = _data.data;
- onFormChange({
- ...keyPaire,
- sni: snis.join(';'),
- expireTime: new Date(validity_end * 1000).toLocaleString(),
- });
- onStepChange(2);
- });
- };
-
- const onRemove = (type: UploadType) => {
- if (type === 'PUBLIC_KEY') {
- onFormChange({
- cert: '',
- sni: '',
- expireTime: undefined,
- });
- setPublicKeyList([]);
- } else {
- onFormChange({
- key: '',
- });
- setPrivateKeyList([]);
- }
+ const submit = () => {
+ createSSL({
+ sni: data.sni!.split(';'),
+ cert: data.cert!,
+ key: data.key!,
+ }).then(() => {
+ onStepChange(2);
+ });
};
return (
- <>
- <div style={data.createType === 'INPUT' ? {} : { display: 'none' }}>
- <CertificateForm mode="EDIT" form={form} data={data} />
- </div>
- {Boolean(data.createType === 'UPLOAD') && (
- <CertificateUploader
- onSuccess={(_data: any) => {
- form.setFieldsValue(_data);
- if (_data.cert) {
- setPublicKeyList(_data.publicKeyList);
- } else {
- setPrivateKeyList(_data.privateKeyList);
- }
- }}
- onRemove={onRemove}
- data={{ publicKeyList, privateKeyList }}
- />
- )}
+ <div className="container">
+ <CertificateForm mode="VIEW" form={form} data={data} />
<div style={{ width: '100%', textAlign: 'center' }}>
- <Button
- type="primary"
- onClick={() => {
- onStepChange(0);
- }}
- style={{ marginRight: '8px' }}
- >
+ <Button type="primary" onClick={() => onStepChange(1)} style={{ marginRight: '8px' }}>
上一步
</Button>
- <Button type="primary" onClick={onValidateForm}>
- 下一步
+ <Button type="primary" onClick={submit}>
+ 提交
</Button>
</div>
- </>
+ </div>
);
};
-export default Step2;
+export default Step;
diff --git a/src/pages/ssl/components/Step3/index.tsx b/src/pages/ssl/components/Step3/index.tsx
index e1a921c..ecb6c22 100644
--- a/src/pages/ssl/components/Step3/index.tsx
+++ b/src/pages/ssl/components/Step3/index.tsx
@@ -1,32 +1,36 @@
import React from 'react';
-import { Form, Button } from 'antd';
-import { create as createSSL } from '@/pages/ssl/service';
-import CertificateForm from '../CertificateForm';
+import { Result, Button } from 'antd';
+import { history } from 'umi';
import { StepProps } from '../../Create';
-const Step3: React.FC<StepProps> = ({ data, onStepChange }) => {
- const [form] = Form.useForm();
- const submit = () => {
- createSSL({
- sni: data.sni!.split(';'),
- cert: data.cert!,
- key: data.key!,
- }).then(() => {
- onStepChange(3);
- });
- };
+const Step: React.FC<StepProps> = ({ onStepChange, onFormChange }) => {
return (
- <div className="container">
- <CertificateForm mode="VIEW" form={form} data={data} />
- <div style={{ width: '100%', textAlign: 'center' }}>
- <Button type="primary" onClick={() => onStepChange(1)} style={{ marginRight: '8px' }}>
- 上一步
- </Button>
- <Button type="primary" onClick={submit}>
- 提交
- </Button>
- </div>
- </div>
+ <Result
+ status="success"
+ title="成功"
+ subTitle="SSL证书上传成功"
+ key="SSL证书上传成功"
+ extra={[
+ <Button
+ type="primary"
+ key="back"
+ onClick={() => {
+ history.replace('/ssl');
+ }}
+ >
+ 回到列表页
+ </Button>,
+ <Button
+ key="reset"
+ onClick={() => {
+ onFormChange({}, true);
+ onStepChange(0);
+ }}
+ >
+ 继续创建
+ </Button>,
+ ]}
+ />
);
};
-export default Step3;
+export default Step;
diff --git a/src/pages/ssl/components/Step4/index.tsx b/src/pages/ssl/components/Step4/index.tsx
deleted file mode 100644
index de6ac17..0000000
--- a/src/pages/ssl/components/Step4/index.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { Result, Button } from 'antd';
-import { history } from 'umi';
-import { StepProps } from '../../Create';
-
-const Step4: React.FC<StepProps> = ({ onStepChange, onFormChange }) => {
- return (
- <Result
- status="success"
- title="成功"
- subTitle="SSL证书上传成功"
- key="SSL证书上传成功"
- extra={[
- <Button
- type="primary"
- key="back"
- onClick={() => {
- history.replace('/ssl');
- }}
- >
- 回到列表页
- </Button>,
- <Button
- key="reset"
- onClick={() => {
- onFormChange({}, true);
- onStepChange(0);
- }}
- >
- 继续创建
- </Button>,
- ]}
- />
- );
-};
-export default Step4;