Status
{caStatusToNameMap[ca.status]}
@@ -124,6 +128,15 @@ export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
colorSchema="primary"
type="submit"
onClick={() => {
+ if (ca.type === CaType.INTERMEDIATE && !ca.parentCaId) {
+ // intermediate CA with external parent CA
+ handlePopUpOpen("installCaCert", {
+ caId,
+ isParentCaExternal: true
+ });
+ return;
+ }
+
handlePopUpOpen("renewCa", {
caId
});
diff --git a/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/CaInstallCertModal.tsx b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/CaInstallCertModal.tsx
index 4d2bcb243..1095e0d3e 100644
--- a/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/CaInstallCertModal.tsx
+++ b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/CaInstallCertModal.tsx
@@ -1,53 +1,10 @@
import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { format } from "date-fns";
-import { z } from "zod";
-import { createNotification } from "@app/components/notifications";
-import {
- // DatePicker,
- Button,
- FormControl,
- Input,
- Modal,
- ModalContent,
- Select,
- SelectItem
-} from "@app/components/v2";
-import { useWorkspace } from "@app/context";
-import {
- CaStatus,
- useGetCaById,
- useGetCaCsr,
- useImportCaCertificate,
- useListWorkspaceCas,
- useSignIntermediate
-} from "@app/hooks/api";
-import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import { FormControl, Modal, ModalContent, Select, SelectItem } from "@app/components/v2";
import { UsePopUpState } from "@app/hooks/usePopUp";
-const isValidDate = (dateString: string) => {
- const date = new Date(dateString);
- return !Number.isNaN(date.getTime());
-};
-
-const getMiddleDate = (date1: Date, date2: Date) => {
- const timestamp1 = date1.getTime();
- const timestamp2 = date2.getTime();
-
- const middleTimestamp = (timestamp1 + timestamp2) / 2;
-
- return new Date(middleTimestamp);
-};
-
-const schema = z.object({
- parentCaId: z.string(),
- notAfter: z.string().trim().refine(isValidDate, { message: "Invalid date format" }),
- maxPathLength: z.string()
-});
-
-export type FormData = z.infer
;
+import { ExternalCaInstallForm } from "./ExternalCaInstallForm";
+import { InternalCaInstallForm } from "./InternalCaInstallForm";
type Props = {
popUp: UsePopUpState<["installCaCert"]>;
@@ -60,234 +17,23 @@ enum ParentCaType {
}
export const CaInstallCertModal = ({ popUp, handlePopUpToggle }: Props) => {
- const [parentCaType] = useState(ParentCaType.Internal);
- const { currentWorkspace } = useWorkspace();
- const caId = (popUp?.installCaCert?.data as { caId: string })?.caId || "";
-
- // const [isStartDatePickerOpen, setIsStartDatePickerOpen] = useState(false);
- const { data: cas } = useListWorkspaceCas({
- projectSlug: currentWorkspace?.slug ?? "",
- status: CaStatus.ACTIVE
- });
- const { data: ca } = useGetCaById(caId);
- const { data: csr } = useGetCaCsr(caId);
-
- const { mutateAsync: signIntermediate } = useSignIntermediate();
- const { mutateAsync: importCaCertificate } = useImportCaCertificate();
-
- const {
- control,
- handleSubmit,
- reset,
- formState: { isSubmitting },
- setValue,
- watch
- } = useForm({
- resolver: zodResolver(schema),
- defaultValues: {
- maxPathLength: "0"
- }
- });
+ const popupData = popUp?.installCaCert?.data;
+ const caId = popupData?.caId || "";
+ const isParentCaExternal = popupData?.isParentCaExternal || false;
+ const [parentCaType, setParentCaType] = useState(ParentCaType.Internal);
useEffect(() => {
- if (cas?.length) {
- setValue("parentCaId", cas[0].id);
+ if (popupData?.isParentCaExternal) {
+ setParentCaType(ParentCaType.External);
}
- }, [cas, setValue]);
-
- const parentCaId = watch("parentCaId");
- const { data: parentCa } = useGetCaById(parentCaId);
-
- useEffect(() => {
- if (parentCa?.maxPathLength) {
- setValue(
- "maxPathLength",
- (parentCa.maxPathLength === -1 ? 3 : parentCa.maxPathLength - 1).toString()
- );
- }
-
- if (parentCa?.notAfter) {
- const parentCaNotAfter = new Date(parentCa.notAfter);
- const middleDate = getMiddleDate(new Date(), parentCaNotAfter);
- setValue("notAfter", format(middleDate, "yyyy-MM-dd"));
- }
- }, [parentCa]);
-
- const onFormSubmit = async ({ notAfter, maxPathLength }: FormData) => {
- try {
- if (!csr || !caId || !currentWorkspace?.slug) return;
-
- const { certificate, certificateChain } = await signIntermediate({
- caId: parentCaId,
- csr,
- maxPathLength: Number(maxPathLength),
- notAfter,
- notBefore: new Date().toISOString()
- });
-
- await importCaCertificate({
- caId,
- projectSlug: currentWorkspace?.slug,
- certificate,
- certificateChain
- });
-
- reset();
-
- createNotification({
- text: "Successfully installed certificate for CA",
- type: "success"
- });
- handlePopUpToggle("installCaCert", false);
- } catch (err) {
- createNotification({
- text: "Failed to install certificate for CA",
- type: "error"
- });
- }
- };
-
- function generatePathLengthOpts(parentCaMaxPathLength: number): number[] {
- if (parentCaMaxPathLength === -1) {
- return [-1, 0, 1, 2, 3];
- }
-
- return Array.from({ length: parentCaMaxPathLength }, (_, index) => index);
- }
+ }, [popupData]);
const renderForm = (parentCaTypeInput: ParentCaType) => {
switch (parentCaTypeInput) {
case ParentCaType.Internal:
- return (
-
- );
+ return ;
default:
- return External TODO
;
+ return ;
}
};
@@ -296,31 +42,32 @@ export const CaInstallCertModal = ({ popUp, handlePopUpToggle }: Props) => {
isOpen={popUp?.installCaCert?.isOpen}
onOpenChange={(isOpen) => {
handlePopUpToggle("installCaCert", isOpen);
- reset();
}}
>
-
- {/*
+
+
- */}
+
{renderForm(parentCaType)}
diff --git a/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/ExternalCaInstallForm.tsx b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/ExternalCaInstallForm.tsx
new file mode 100644
index 000000000..d84b11f59
--- /dev/null
+++ b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/ExternalCaInstallForm.tsx
@@ -0,0 +1,172 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheck, faCopy, faDownload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import FileSaver from "file-saver";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, IconButton,TextArea, Tooltip } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useTimedReset } from "@app/hooks";
+import { useGetCaCsr, useImportCaCertificate } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z.object({
+ certificate: z.string().min(1),
+ certificateChain: z.string().min(1)
+});
+
+export type FormData = z.infer;
+
+type Props = {
+ caId: string;
+ handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+export const ExternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+ const [copyTextCaCsr, isCopyingCaCsr, setCopyTextCaCsr] = useTimedReset({
+ initialState: "Copy to clipboard"
+ });
+
+ const {
+ control,
+ handleSubmit,
+ reset,
+ formState: { isSubmitting }
+ } = useForm({
+ resolver: zodResolver(schema)
+ });
+
+ const { data: csr } = useGetCaCsr(caId);
+ const { mutateAsync: importCaCertificate } = useImportCaCertificate();
+
+ useEffect(() => {
+ reset();
+ }, []);
+
+ const onFormSubmit = async ({ certificate, certificateChain }: FormData) => {
+ try {
+ if (!csr || !caId || !currentWorkspace?.slug) return;
+
+ await importCaCertificate({
+ caId,
+ projectSlug: currentWorkspace?.slug,
+ certificate,
+ certificateChain
+ });
+
+ reset();
+
+ createNotification({
+ text: "Successfully installed certificate for CA",
+ type: "success"
+ });
+ handlePopUpToggle("installCaCert", false);
+ } catch (err) {
+ createNotification({
+ text: "Failed to install certificate for CA",
+ type: "error"
+ });
+ }
+ };
+
+ const downloadTxtFile = (filename: string, content: string) => {
+ const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+ FileSaver.saveAs(blob, filename);
+ };
+
+ return (
+
+ );
+};
diff --git a/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/InternalCaInstallForm.tsx b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/InternalCaInstallForm.tsx
new file mode 100644
index 000000000..e54e97ae7
--- /dev/null
+++ b/frontend/src/views/Project/CertificatesPage/components/CaTab/components/CaInstallCertModal/InternalCaInstallForm.tsx
@@ -0,0 +1,236 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input,Select, SelectItem } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+ CaStatus,
+ useGetCaById,
+ useGetCaCsr,
+ useImportCaCertificate,
+ useListWorkspaceCas,
+ useSignIntermediate
+} from "@app/hooks/api";
+import { caTypeToNameMap } from "@app/hooks/api/ca/constants";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const isValidDate = (dateString: string) => {
+ const date = new Date(dateString);
+ return !Number.isNaN(date.getTime());
+};
+
+const getMiddleDate = (date1: Date, date2: Date) => {
+ const timestamp1 = date1.getTime();
+ const timestamp2 = date2.getTime();
+
+ const middleTimestamp = (timestamp1 + timestamp2) / 2;
+
+ return new Date(middleTimestamp);
+};
+
+const schema = z.object({
+ parentCaId: z.string(),
+ notAfter: z.string().trim().refine(isValidDate, { message: "Invalid date format" }),
+ maxPathLength: z.string()
+});
+
+export type FormData = z.infer;
+
+type Props = {
+ caId: string;
+ handlePopUpToggle: (popUpName: keyof UsePopUpState<["installCaCert"]>, state?: boolean) => void;
+};
+
+export const InternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+ const { data: cas } = useListWorkspaceCas({
+ projectSlug: currentWorkspace?.slug ?? "",
+ status: CaStatus.ACTIVE
+ });
+ const { data: ca } = useGetCaById(caId);
+ const { data: csr } = useGetCaCsr(caId);
+
+ const { mutateAsync: signIntermediate } = useSignIntermediate();
+ const { mutateAsync: importCaCertificate } = useImportCaCertificate();
+
+ const {
+ control,
+ handleSubmit,
+ reset,
+ formState: { isSubmitting },
+ setValue,
+ watch
+ } = useForm({
+ resolver: zodResolver(schema),
+ defaultValues: {
+ maxPathLength: "0"
+ }
+ });
+
+ useEffect(() => {
+ reset();
+ }, []);
+
+ useEffect(() => {
+ if (cas?.length) {
+ setValue("parentCaId", cas[0].id);
+ }
+ }, [cas, setValue]);
+
+ const parentCaId = watch("parentCaId");
+
+ const { data: parentCa } = useGetCaById(parentCaId);
+
+ useEffect(() => {
+ if (parentCa?.maxPathLength) {
+ setValue(
+ "maxPathLength",
+ (parentCa.maxPathLength === -1 ? 3 : parentCa.maxPathLength - 1).toString()
+ );
+ }
+
+ if (parentCa?.notAfter) {
+ const parentCaNotAfter = new Date(parentCa.notAfter);
+ const middleDate = getMiddleDate(new Date(), parentCaNotAfter);
+ setValue("notAfter", format(middleDate, "yyyy-MM-dd"));
+ }
+ }, [parentCa]);
+
+ const onFormSubmit = async ({ notAfter, maxPathLength }: FormData) => {
+ try {
+ if (!csr || !caId || !currentWorkspace?.slug) return;
+
+ const { certificate, certificateChain } = await signIntermediate({
+ caId: parentCaId,
+ csr,
+ maxPathLength: Number(maxPathLength),
+ notAfter,
+ notBefore: new Date().toISOString()
+ });
+
+ await importCaCertificate({
+ caId,
+ projectSlug: currentWorkspace?.slug,
+ certificate,
+ certificateChain
+ });
+
+ reset();
+
+ createNotification({
+ text: "Successfully installed certificate for CA",
+ type: "success"
+ });
+ handlePopUpToggle("installCaCert", false);
+ } catch (err) {
+ createNotification({
+ text: "Failed to install certificate for CA",
+ type: "error"
+ });
+ }
+ };
+
+ function generatePathLengthOpts(parentCaMaxPathLength: number): number[] {
+ if (parentCaMaxPathLength === -1) {
+ return [-1, 0, 1, 2, 3];
+ }
+
+ return Array.from({ length: parentCaMaxPathLength }, (_, index) => index);
+ }
+
+ return (
+
+ );
+};