Certificates react work

- renewal and download
- table columns rendering
- searching
- deleting

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);
 	};

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 };

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";