Certificates react work

jc21 · jc21 · commit 0de26f295016 · 2025-10-27T18:08:37.000+10:00
- renewal and download
- table columns rendering
- searching
- deleting
diff --git a/frontend/src/api/backend/base.ts b/frontend/src/api/backend/base.ts
@@ -80,8 +80,16 @@ export async function get(args: GetArgs, abortController?: AbortController) {
 	return processResponse(await baseGet(args, abortController));
 }
 
-export async function download(args: GetArgs, abortController?: AbortController) {
-	return (await baseGet(args, abortController)).text();
+export async function download({ url, params }: GetArgs, filename = "download.file") {
+	const headers = buildAuthHeader();
+	const res = await fetch(buildUrl({ url, params }), { headers });
+	const bl = await res.blob();
+	const u = window.URL.createObjectURL(bl);
+	const a = document.createElement("a");
+	a.href = u;
+	a.download = filename;
+	a.click();
+	window.URL.revokeObjectURL(url);
 }
 
 interface PostArgs {
diff --git a/frontend/src/api/backend/downloadCertificate.ts b/frontend/src/api/backend/downloadCertificate.ts
@@ -1,8 +1,10 @@
 import * as api from "./base";
-import type { Binary } from "./responseTypes";
 
-export async function downloadCertificate(id: number): Promise<Binary> {
-	return await api.get({
-		url: `/nginx/certificates/${id}/download`,
-	});
+export async function downloadCertificate(id: number): Promise<void> {
+	await api.download(
+		{
+			url: `/nginx/certificates/${id}/download`,
+		},
+		`certificate-${id}.zip`,
+	);
 }
diff --git a/frontend/src/api/backend/responseTypes.ts b/frontend/src/api/backend/responseTypes.ts
@@ -15,5 +15,3 @@ export interface ValidatedCertificateResponse {
 	certificate: Record<string, any>;
 	certificateKey: boolean;
 }
-
-export type Binary = number & { readonly __brand: unique symbol };
diff --git a/frontend/src/components/Table/Formatter/CertificateInUseFormatter.tsx b/frontend/src/components/Table/Formatter/CertificateInUseFormatter.tsx
@@ -0,0 +1,62 @@
+import OverlayTrigger from "react-bootstrap/OverlayTrigger";
+import Popover from "react-bootstrap/Popover";
+import type { DeadHost, ProxyHost, RedirectionHost } from "src/api/backend";
+import { T } from "src/locale";
+
+const getSection = (title: string, items: ProxyHost[] | RedirectionHost[] | DeadHost[]) => {
+	if (items.length === 0) {
+		return null;
+	}
+	return (
+		<>
+			<div>
+				<strong>
+					<T id={title} />
+				</strong>
+			</div>
+			{items.map((host) => (
+				<div key={host.id} className="ms-1">
+					{host.domainNames.join(", ")}
+				</div>
+			))}
+		</>
+	);
+};
+
+interface Props {
+	proxyHosts: ProxyHost[];
+	redirectionHosts: RedirectionHost[];
+	deadHosts: DeadHost[];
+}
+export function CertificateInUseFormatter({ proxyHosts, redirectionHosts, deadHosts }: Props) {
+	const totalCount = proxyHosts?.length + redirectionHosts?.length + deadHosts?.length;
+	if (totalCount === 0) {
+		return (
+			<span className="badge bg-red-lt">
+				<T id="certificate.not-in-use" />
+			</span>
+		);
+	}
+
+	proxyHosts.sort();
+	redirectionHosts.sort();
+	deadHosts.sort();
+
+	const popover = (
+		<Popover id="popover-basic">
+			<Popover.Body>
+				{getSection("proxy-hosts", proxyHosts)}
+				{getSection("redirection-hosts", redirectionHosts)}
+				{getSection("dead-hosts", deadHosts)}
+			</Popover.Body>
+		</Popover>
+	);
+
+	return (
+		<OverlayTrigger trigger="hover" placement="bottom" overlay={popover}>
+			<span className="badge bg-lime-lt">
+				<T id="certificate.in-use" />
+			</span>
+		</OverlayTrigger>
+	);
+}
diff --git a/frontend/src/components/Table/Formatter/DateFormatter.tsx b/frontend/src/components/Table/Formatter/DateFormatter.tsx
@@ -0,0 +1,15 @@
+import cn from "classnames";
+import { isPast, parseISO } from "date-fns";
+import { DateTimeFormat } from "src/locale";
+
+interface Props {
+	value: string;
+	highlightPast?: boolean;
+}
+export function DateFormatter({ value, highlightPast }: Props) {
+	const dateIsPast = isPast(parseISO(value));
+	const cl = cn({
+		"text-danger": highlightPast && dateIsPast,
+	});
+	return <span className={cl}>{DateTimeFormat(value)}</span>;
+}
diff --git a/frontend/src/components/Table/Formatter/index.ts b/frontend/src/components/Table/Formatter/index.ts
@@ -1,5 +1,7 @@
 export * from "./AccessListformatter";
 export * from "./CertificateFormatter";
+export * from "./CertificateInUseFormatter";
+export * from "./DateFormatter";
 export * from "./DomainsFormatter";
 export * from "./EmailFormatter";
 export * from "./EnabledFormatter";
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
@@ -2,6 +2,7 @@ export * from "./useAccessList";
 export * from "./useAccessLists";
 export * from "./useAuditLog";
 export * from "./useAuditLogs";
+export * from "./useCertificate";
 export * from "./useCertificates";
 export * from "./useDeadHost";
 export * from "./useDeadHosts";
diff --git a/frontend/src/hooks/useCertificate.ts b/frontend/src/hooks/useCertificate.ts
@@ -0,0 +1,17 @@
+import { useQuery } from "@tanstack/react-query";
+import { type Certificate, getCertificate } from "src/api/backend";
+
+const fetchCertificate = (id: number) => {
+	return getCertificate(id, ["owner"]);
+};
+
+const useCertificate = (id: number, options = {}) => {
+	return useQuery<Certificate, Error>({
+		queryKey: ["certificate", id],
+		queryFn: () => fetchCertificate(id),
+		staleTime: 60 * 1000, // 1 minute
+		...options,
+	});
+};
+
+export { useCertificate };
diff --git a/frontend/src/locale/lang/en.json b/frontend/src/locale/lang/en.json
@@ -15,16 +15,20 @@
   "action.close": "Close",
   "action.delete": "Delete",
   "action.disable": "Disable",
+  "action.download": "Download",
   "action.edit": "Edit",
   "action.enable": "Enable",
   "action.permissions": "Permissions",
+  "action.renew": "Renew",
   "action.view-details": "View Details",
   "auditlogs": "Audit Logs",
   "cancel": "Cancel",
   "certificate": "Certificate",
+  "certificate.in-use": "In Use",
   "certificate.none.subtitle": "No certificate assigned",
   "certificate.none.subtitle.for-http": "This host will not use HTTPS",
   "certificate.none.title": "None",
+  "certificate.not-in-use": "Not Used",
   "certificates": "Certificates",
   "certificates.custom": "Custom Certificate",
   "certificates.dns.credentials": "Credentials File Content",
@@ -121,6 +125,7 @@
   "notification.object-deleted": "{object} has been deleted",
   "notification.object-disabled": "{object} has been disabled",
   "notification.object-enabled": "{object} has been enabled",
+  "notification.object-renewed": "{object} has been renewed",
   "notification.object-saved": "{object} has been saved",
   "notification.success": "Success",
   "object.actions-title": "{object} #{id}",
diff --git a/frontend/src/locale/src/en.json b/frontend/src/locale/src/en.json
@@ -47,6 +47,9 @@
 	"action.disable": {
 		"defaultMessage": "Disable"
 	},
+	"action.download": {
+		"defaultMessage": "Download"
+	},
 	"action.edit": {
 		"defaultMessage": "Edit"
 	},
@@ -56,6 +59,9 @@
 	"action.permissions": {
 		"defaultMessage": "Permissions"
 	},
+	"action.renew": {
+		"defaultMessage": "Renew"
+	},
 	"action.view-details": {
 		"defaultMessage": "View Details"
 	},
@@ -68,6 +74,9 @@
 	"certificate": {
 		"defaultMessage": "Certificate"
 	},
+	"certificate.in-use": {
+		"defaultMessage": "In Use"
+	},
 	"certificate.none.subtitle": {
 		"defaultMessage": "No certificate assigned"
 	},
@@ -77,6 +86,9 @@
 	"certificate.none.title": {
 		"defaultMessage": "None"
 	},
+	"certificate.not-in-use": {
+		"defaultMessage": "Not Used"
+	},
 	"certificates": {
 		"defaultMessage": "Certificates"
 	},
@@ -365,6 +377,9 @@
 	"notification.object-enabled": {
 		"defaultMessage": "{object} has been enabled"
 	},
+	"notification.object-renewed": {
+		"defaultMessage": "{object} has been renewed"
+	},
 	"notification.object-saved": {
 		"defaultMessage": "{object} has been saved"
 	},
diff --git a/frontend/src/modals/HTTPCertificateModal.tsx b/frontend/src/modals/HTTPCertificateModal.tsx
@@ -1,4 +1,5 @@
 import { IconAlertTriangle } from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
 import EasyModal, { type InnerModalProps } from "ez-modal-react";
 import { Form, Formik } from "formik";
 import { type ReactNode, useState } from "react";
@@ -14,6 +15,7 @@ const showHTTPCertificateModal = () => {
 };
 
 const HTTPCertificateModal = EasyModal.create(({ visible, remove }: InnerModalProps) => {
+	const queryClient = useQueryClient();
 	const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
 	const [isSubmitting, setIsSubmitting] = useState(false);
 	const [domains, setDomains] = useState([] as string[]);
@@ -32,6 +34,7 @@ const HTTPCertificateModal = EasyModal.create(({ visible, remove }: InnerModalPr
 		} catch (err: any) {
 			setErrorMsg(<T id={err.message} />);
 		}
+		queryClient.invalidateQueries({ queryKey: ["certificates"] });
 		setIsSubmitting(false);
 		setSubmitting(false);
 	};
diff --git a/frontend/src/modals/RenewCertificateModal.tsx b/frontend/src/modals/RenewCertificateModal.tsx
@@ -0,0 +1,74 @@
+import { useQueryClient } from "@tanstack/react-query";
+import EasyModal, { type InnerModalProps } from "ez-modal-react";
+import { type ReactNode, useEffect, useState } from "react";
+import { Alert } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import { renewCertificate } from "src/api/backend";
+import { Button, Loading } from "src/components";
+import { useCertificate } from "src/hooks";
+import { T } from "src/locale";
+import { showObjectSuccess } from "src/notifications";
+
+interface Props extends InnerModalProps {
+	id: number;
+}
+
+const showRenewCertificateModal = (id: number) => {
+	EasyModal.show(RenewCertificateModal, { id });
+};
+
+const RenewCertificateModal = EasyModal.create(({ id, visible, remove }: Props) => {
+	const queryClient = useQueryClient();
+	const { data, isLoading, error } = useCertificate(id);
+	const [errorMsg, setErrorMsg] = useState<ReactNode | null>(null);
+	const [isFresh, setIsFresh] = useState(true);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+
+	useEffect(() => {
+		if (!data || !isFresh || isSubmitting) return;
+		setIsFresh(false);
+		setIsSubmitting(true);
+
+		renewCertificate(id)
+			.then(() => {
+				showObjectSuccess("certificate", "renewed");
+				queryClient.invalidateQueries({ queryKey: ["certificates"] });
+				remove();
+			})
+			.catch((err: any) => {
+				setErrorMsg(<T id={err.message} />);
+			})
+			.finally(() => {
+				setIsSubmitting(false);
+			});
+	}, [id, data, isFresh, isSubmitting, remove, queryClient.invalidateQueries]);
+
+	return (
+		<Modal show={visible} onHide={isSubmitting ? undefined : remove}>
+			<Modal.Header closeButton={!isSubmitting}>
+				<Modal.Title>
+					<T id="renew-certificate" />
+				</Modal.Title>
+			</Modal.Header>
+			<Modal.Body>
+				<Alert variant="danger" show={!!errorMsg}>
+					{errorMsg}
+				</Alert>
+				{isLoading && <Loading noLogo />}
+				{!isLoading && error && (
+					<Alert variant="danger" className="m-3">
+						{error?.message || "Unknown error"}
+					</Alert>
+				)}
+				{data && isSubmitting && !errorMsg ? <p className="text-center mt-3">Please wait ...</p> : null}
+			</Modal.Body>
+			<Modal.Footer>
+				<Button data-bs-dismiss="modal" onClick={remove} disabled={isSubmitting}>
+					<T id="action.close" />
+				</Button>
+			</Modal.Footer>
+		</Modal>
+	);
+});
+
+export { showRenewCertificateModal };
diff --git a/frontend/src/modals/index.ts b/frontend/src/modals/index.ts
@@ -9,6 +9,7 @@ export * from "./HTTPCertificateModal";
 export * from "./PermissionsModal";
 export * from "./ProxyHostModal";
 export * from "./RedirectionHostModal";
+export * from "./RenewCertificateModal";
 export * from "./SetPasswordModal";
 export * from "./StreamModal";
 export * from "./UserModal";
diff --git a/frontend/src/pages/Certificates/Table.tsx b/frontend/src/pages/Certificates/Table.tsx
diff --git a/frontend/src/pages/Certificates/TableWrapper.tsx b/frontend/src/pages/Certificates/TableWrapper.tsx
diff --git a/frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx b/frontend/src/pages/Nginx/ProxyHosts/TableWrapper.tsx

Original file line number	Diff line number	Diff line change
`@@ -15,5 +15,3 @@ export interface ValidatedCertificateResponse {`
`15`	`15`	`certificate: Record<string, any>;`
`16`	`16`	`certificateKey: boolean;`
`17`	`17`	`}`
`18`		`-`
`19`		`-export type Binary = number & { readonly __brand: unique symbol };`