awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-15 14:27:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish preliminary CA renewal with same key pair

Browse Source
This commit is contained in:
Tuan Dang
2024-08-05 15:43:40 -07:00
parent 587a4a1120
commit c70d0a577c
11 changed files with 345 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/Project/CaPage/CaPage.tsx
+2 -4
View File
@@ -17,7 +17,7 @@ import {
} from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
import { withProjectPermission } from "@app/hoc";
import { useDeleteCa,useGetCaById } from "@app/hooks/api";
import { useDeleteCa, useGetCaById } from "@app/hooks/api";
import { usePopUp } from "@app/hooks/usePopUp";
import { CaModal } from "@app/views/Project/CertificatesPage/components/CaTab/components/CaModal";
@@ -73,9 +73,7 @@ export const CaPage = withProjectPermission(
variant="link"
type="submit"
leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
onClick={() =>
router.push(`/project/${projectId}/members?selectedTab=${TabSections.Roles}`)
}
onClick={() => router.push(`/project/${projectId}/certificates`)}
className="mb-4"
>
Certificate Authorities
frontend/src/views/Project/CaPage/components/CaCertificatesSection/CaCertificatesTable.tsx
+28 -26
View File
@@ -1,9 +1,13 @@
import { faCertificate, faEllipsis } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as x509 from "@peculiar/x509";
import { format } from "date-fns";
import FileSaver from "file-saver";
import { twMerge } from "tailwind-merge";
import { ProjectPermissionCan } from "@app/components/permissions";
import {
Badge,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
@@ -16,7 +20,8 @@ import {
Td,
Th,
THead,
Tr} from "@app/components/v2";
Tr
} from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { useGetCaCerts } from "@app/hooks/api";
@@ -24,43 +29,45 @@ type Props = {
caId: string;
};
// TODO: not before
// created at
// expires on
export const CaCertificatesTable = ({ caId }: Props) => {
const { data: caCerts, isLoading } = useGetCaCerts(caId);
console.log("CaCertificatesTable data: ", caCerts);
const downloadTxtFile = (filename: string, content: string) => {
const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
FileSaver.saveAs(blob, filename);
};
return (
<TableContainer>
<Table>
<THead>
<Tr>
<Th>Name</Th>
<Th>Created At</Th>
<Th>Valid Until</Th>
<Th>CA Certificate #</Th>
<Th>Not Before</Th>
<Th>Not After</Th>
<Th className="w-5" />
</Tr>
</THead>
<TBody>
{isLoading && <TableSkeleton columns={4} innerKey="ca-certificates" />}
{!isLoading &&
caCerts?.map((caCert) => {
// console.log("caCert index: ", index);
// const isLastItem = index === caCerts.length - 1;
caCerts?.map((caCert, index) => {
const isLastItem = index === caCerts.length - 1;
const caCertObj = new x509.X509Certificate(caCert.certificate);
return (
<Tr key={`ca-cert=${caCert.serialNumber}`}>
<Td>
<div className="flex items-center">
Certificate {caCert.version}
{/* <Badge variant="success" className="ml-4">
Current
</Badge> */}
CA Certificate {caCert.version}
{isLastItem && (
<Badge variant="success" className="ml-4">
Current
</Badge>
)}
</div>
</Td>
<Td>Test</Td>
<Td>Test</Td>
<Td>{format(new Date(caCertObj.notBefore), "yyyy-MM-dd")}</Td>
<Td>{format(new Date(caCertObj.notAfter), "yyyy-MM-dd")}</Td>
<Td>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
@@ -80,8 +87,7 @@ export const CaCertificatesTable = ({ caId }: Props) => {
)}
onClick={(e) => {
e.stopPropagation();
// TODO
// router.push(`/org/${orgId}/identities/${id}`);
downloadTxtFile("cert.pem", caCert.certificate);
}}
disabled={!isAllowed}
>
@@ -100,11 +106,7 @@ export const CaCertificatesTable = ({ caId }: Props) => {
)}
onClick={(e) => {
e.stopPropagation();
// TODO
// handlePopUpOpen("deleteIdentity", {
// identityId: id,
// name
// });
downloadTxtFile("chain.pem", caCert.certificateChain);
}}
disabled={!isAllowed}
>
frontend/src/views/Project/CaPage/components/CaDetailsSection.tsx
+27 -1
View File
@@ -6,7 +6,7 @@ import { ProjectPermissionCan } from "@app/components/permissions";
import { Button, IconButton, Tooltip } from "@app/components/v2";
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
import { useTimedReset } from "@app/hooks";
import { CaStatus,useGetCaById } from "@app/hooks/api";
import { CaStatus, useGetCaById } from "@app/hooks/api";
import { caStatusToNameMap, caTypeToNameMap } from "@app/hooks/api/ca/constants";
import { certKeyAlgorithmToNameMap } from "@app/hooks/api/certificates/constants";
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -23,6 +23,9 @@ export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
const [copyTextId, isCopyingId, setCopyTextId] = useTimedReset<string>({
initialState: "Copy ID to clipboard"
});
const [copyTextParentId, isCopyingParentId, setCopyTextParentId] = useTimedReset<string>({
initialState: "Copy ID to clipboard"
});
const { data: ca } = useGetCaById(caId);
@@ -53,6 +56,29 @@ export const CaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
</div>
</div>
</div>
{ca.parentCaId && (
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Parent CA ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{ca.parentCaId}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextParentId}>
<IconButton
ariaLabel="copy icon"
variant="plain"
className="group relative ml-2"
onClick={() => {
navigator.clipboard.writeText(ca.parentCaId as string);
setCopyTextParentId("Copied");
}}
>
<FontAwesomeIcon icon={isCopyingParentId ? faCheck : faCopy} />
</IconButton>
</Tooltip>
</div>
</div>
</div>
)}
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Friendly Name</p>
<p className="text-sm text-mineshaft-300">{ca.friendlyName}</p>
frontend/src/views/Project/CaPage/components/CaRenewalModal.tsx
+20 -53
View File
@@ -1,4 +1,4 @@
import { useEffect } from "react";
// import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -16,10 +16,11 @@ import {
import { useWorkspace } from "@app/context";
import {
CaRenewalType,
useRenewCa
// useGetCaById,
// CaType,
CaStatus,
useGetCaById,
useRenewCa} from "@app/hooks/api/ca";
// CaStatus
} from "@app/hooks/api/ca";
import { UsePopUpState } from "@app/hooks/usePopUp";
const caRenewalTypes = [{ label: "Renew with same key pair", value: CaRenewalType.EXISTING }];
@@ -29,13 +30,6 @@ const isValidDate = (dateString: string) => {
return !Number.isNaN(date.getTime());
};
// const getMiddleDate = (date1: Date, date2: Date): Date => {
// const timestamp1 = date1.getTime();
// const timestamp2 = date2.getTime();
// const middleTimestamp = (timestamp1 + timestamp2) / 2;
// return new Date(middleTimestamp);
// };
const schema = z
.object({
type: z.enum([CaRenewalType.EXISTING]),
@@ -58,56 +52,36 @@ export const CaRenewalModal = ({ popUp, handlePopUpToggle }: Props) => {
caId: string;
};
const { data: ca } = useGetCaById(popUpData?.caId || "");
const { data: parentCa } = useGetCaById(ca?.parentCaId || "");
// const { data: ca } = useGetCaById(popUpData?.caId || "");
// const { data: parentCa } = useGetCaById(ca?.parentCaId || "");
const { mutateAsync: renewCa } = useRenewCa();
const {
control,
handleSubmit,
reset,
formState: { isSubmitting },
setValue
formState: { isSubmitting }
// setValue
} = useForm<FormData>({
resolver: zodResolver(schema),
defaultValues: {
type: CaRenewalType.EXISTING,
notAfter: "" // TODO: set sensible default
notAfter: "" // TODO: consider setting a default value
}
});
useEffect(() => {
if (ca && ca.status === CaStatus.ACTIVE) {
// if (ca.type === CaType.ROOT) {
// // extend Root CA validity by the same amount of time
// const notBeforeDate = new Date(ca.notBefore as string);
// const notAfterDate = new Date(ca.notAfter as string);
// useEffect(() => {
// if (ca && ca.status === CaStatus.ACTIVE) {
// const notBeforeDate = new Date(ca.notBefore as string);
// const notAfterDate = new Date(ca.notAfter as string);
// const newNotAfterDate = new Date(
// notAfterDate.getTime() + notAfterDate.getTime() - notBeforeDate.getTime()
// );
// const newNotAfterDate = new Date(
// notAfterDate.getTime() + notAfterDate.getTime() - notBeforeDate.getTime()
// );
// setValue("notAfter", newNotAfterDate.toISOString().split("T")[0]);
// } else if (ca.type === CaType.INTERMEDIATE && parentCa) {
// }
// extend Root CA validity by the same amount of time
const notBeforeDate = new Date(ca.notBefore as string);
const notAfterDate = new Date(ca.notAfter as string);
const newNotAfterDate = new Date(
notAfterDate.getTime() + notAfterDate.getTime() - notBeforeDate.getTime()
);
setValue("notAfter", newNotAfterDate.toISOString().split("T")[0]);
}
// if (ca && parentCa) {
// // intermediate CA
// } else if (ca && ca.notAfter && !parentCa) {
// // root CA
// const timeDifference = new Date(ca.).getTime() - startDate.getTime();
// }
}, [ca, parentCa]);
// setValue("notAfter", newNotAfterDate.toISOString().split("T")[0]);
// }
// }, [ca, parentCa]);
const onFormSubmit = async ({ type, notAfter }: FormData) => {
try {
@@ -130,13 +104,6 @@ export const CaRenewalModal = ({ popUp, handlePopUpToggle }: Props) => {
reset();
} catch (err) {
console.error(err);
const error = err as any;
const text = error?.response?.data?.message ?? "Failed to renew CA";
createNotification({
text,
type: "error"
});
}
};