Certificates Renewal + SSE

- Certificate renewal is just a re-request as it's forced already
- Rejig the routes for readability
- Added Server Side Events so that the UI would invalidate the
cache when changes happen on the backend, such as certs being
provided or failing
- Added a SSE Token, which has the same shelf life as normal token
but can't be used interchangeably. The reason for this is, the
SSE endpoint needs a token for auth as a Query param, so it would
be stored in log files. If someone where to get a hold of that,
it's pretty useless as it can't be used to change anything, only
to listen for events until it expires
- Added test endpoint for SSE testing only availabe in debug mode

frontend/src/components/SiteWrapper.tsx

@@ -1,12 +1,56 @@
-import { ReactNode } from "react";
+import { useEffect, ReactNode } from "react";
 
-import { Box, Container } from "@chakra-ui/react";
+import { Box, Container, useToast } from "@chakra-ui/react";
+import { getSSEToken, SSEMessage } from "api/npm";
 import { Footer, Navigation } from "components";
+import { intl } from "locale";
+import AuthStore from "modules/AuthStore";
+import { useQueryClient } from "react-query";
 
 interface Props {
 	children?: ReactNode;
 }
 function SiteWrapper({ children }: Props) {
+	const queryClient = useQueryClient();
+	const toast = useToast();
+
+	// TODO: fix bug where this will fail if the browser is kept open longer
+	// than the expiry of the sse token
+	useEffect(() => {
+		async function fetchData() {
+			const response = await getSSEToken();
+			const eventSource = new EventSource(
+				`/api/sse/changes?jwt=${response.token}`,
+			);
+			eventSource.onmessage = (e: any) => {
+				const j: SSEMessage = JSON.parse(e.data);
+				if (j) {
+					if (j.affects) {
+						queryClient.invalidateQueries(j.affects);
+					}
+					if (j.type) {
+						toast({
+							description: intl.formatMessage({ id: j.lang }),
+							status: j.type || "info",
+							position: "top",
+							duration: 3000,
+							isClosable: true,
+						});
+					}
+				}
+			};
+			eventSource.onerror = (e) => {
+				console.error("SSE EventSource failed:", e);
+			};
+			return () => {
+				eventSource.close();
+			};
+		}
+		if (AuthStore.token) {
+			fetchData();
+		}
+	}, [queryClient, toast]);
+
 	return (
 		<Box display="flex" flexDir="column" height="100vh">
 			<Box flexShrink={0}>