diff --git a/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaCertModal.tsx b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaCertModal.tsx index 320245cae..df1f10469 100644 --- a/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaCertModal.tsx +++ b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaCertModal.tsx @@ -1,8 +1,8 @@ import { useEffect } from "react"; -import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons"; +import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { IconButton,Modal, ModalContent } from "@app/components/v2"; +import { IconButton, Modal, ModalContent } from "@app/components/v2"; import { useToggle } from "@app/hooks"; import { useGetCaCert } from "@app/hooks/api"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -35,6 +35,18 @@ export const CaCertModal = ({ popUp, handlePopUpToggle }: Props) => { return () => clearTimeout(timer); }, [isSerialNumberCopied, isCertificateCopied, isCertificateChainCopied]); + const downloadTxtFile = (filename: string, content: string) => { + const blob = new Blob([content], { type: "text/plain" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }; + return ( { -

Certificate Body

+ +
+

Certificate Body

+
+ { + navigator.clipboard.writeText(data.certificate); + setIsCertificateCopied.on(); + }} + > + + + Copy + + + { + downloadTxtFile("certificate.txt", data.certificate); + }} + > + + + Download + + +
+

{data.certificate}

- { - navigator.clipboard.writeText(data.certificate); - setIsCertificateCopied.on(); - }} - > - - - Click to copy - - -
-

Certificate Chain

-
-

{data.certificateChain}

- { - navigator.clipboard.writeText(data.certificateChain); - setIsCertificateChainCopied.on(); - }} - > - - - Click to copy - -
+ {data.certificateChain && ( + <> +
+

Certificate Chain

+
+ { + navigator.clipboard.writeText(data.certificateChain); + setIsCertificateChainCopied.on(); + }} + > + + + Copy + + + { + downloadTxtFile("certificate_chain.txt", data.certificate); + }} + > + + + Download + + +
+
+
+

{data.certificateChain}

+
+ + )} ) : (
diff --git a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateCertModal.tsx b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateCertModal.tsx index 8a48d4f0d..78777b295 100644 --- a/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateCertModal.tsx +++ b/frontend/src/views/Project/CertificatesPage/components/CertificatesTab/components/CertificateCertModal.tsx @@ -1,8 +1,8 @@ import { useEffect } from "react"; -import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons"; +import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { IconButton,Modal, ModalContent } from "@app/components/v2"; +import { IconButton, Modal, ModalContent } from "@app/components/v2"; import { useToggle } from "@app/hooks"; import { useGetCertCert } from "@app/hooks/api"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -43,6 +43,18 @@ export const CertificateCertModal = ({ popUp, handlePopUpToggle }: Props) => { return () => clearTimeout(timer); }, [isSerialNumberCopied, isCertificateCopied, isCertificateChainCopied, isCertificateSkCopied]); + const downloadTxtFile = (filename: string, content: string) => { + const blob = new Blob([content], { type: "text/plain" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = filename; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + }; + return ( {
-

Certificate Body

+
+

Certificate Body

+
+ { + navigator.clipboard.writeText(data.certificate); + setIsCertificateCopied.on(); + }} + > + + + Copy + + + { + downloadTxtFile("certificate.txt", data.certificate); + }} + > + + + Download + + +
+

{data.certificate}

- { - navigator.clipboard.writeText(data.certificate); - setIsCertificateCopied.on(); - }} - > - - - Click to copy - -
-

Certificate Chain

+
+

Certificate Chain

+
+ { + navigator.clipboard.writeText(data.certificateChain); + setIsCertificateChainCopied.on(); + }} + > + + + Copy + + + { + downloadTxtFile("certificate_chain.txt", data.certificate); + }} + > + + + Download + + +
+

{data.certificateChain}

- { - navigator.clipboard.writeText(data.certificateChain); - setIsCertificateChainCopied.on(); - }} - > - - - Click to copy - -
-

Certificate Private Key

+
+

Certificate Private Key

+
+ { + navigator.clipboard.writeText(data.privateKey); + setIsCertificateSkCopied.on(); + }} + > + + + Copy + + + { + downloadTxtFile("private_key.txt", data.privateKey); + }} + > + + + Download + + +
+

{data.privateKey}

- { - navigator.clipboard.writeText(data.certificateChain); - setIsCertificateSkCopied.on(); - }} - > - - - Click to copy - -
) : (