Tidy up

- Add help docs for most sections
- Add translations documentation
- Fix up todos
- Remove german translation

frontend/src/modals/DeleteConfirmModal.tsx

@@ -52,7 +52,27 @@ const DeleteConfirmModal = EasyModal.create(
 					<Alert variant="danger" show={!!error} onClose={() => setError(null)} dismissible>
 						{error}
 					</Alert>
-					{children}
+					<div className="text-center mb-3">
+						<svg
+							role="img"
+							aria-label="warning icon"
+							xmlns="http://www.w3.org/2000/svg"
+							className="icon mb-2 text-danger icon-lg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							stroke-width="2"
+							stroke="currentColor"
+							fill="none"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+						>
+							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+							<path d="M12 9v2m0 4v.01" />
+							<path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" />
+						</svg>
+					</div>
+					<div className="text-center mb-3">{children}</div>
 				</Modal.Body>
 				<Modal.Footer>
 					<Button data-bs-dismiss="modal" onClick={remove} disabled={isSubmitting}>

frontend/src/modals/HelpModal.tsx

@@ -0,0 +1,54 @@
+import cn from "classnames";
+import EasyModal, { type InnerModalProps } from "ez-modal-react";
+import { useEffect, useState } from "react";
+import Modal from "react-bootstrap/Modal";
+import ReactMarkdown from "react-markdown";
+import { Button } from "src/components";
+import { getLocale, T } from "src/locale";
+import { getHelpFile } from "src/locale/src/HelpDoc";
+
+interface Props extends InnerModalProps {
+	section: string;
+	color?: string;
+}
+
+const showHelpModal = (section: string, color?: string) => {
+	EasyModal.show(HelpModal, { section, color });
+};
+
+const HelpModal = EasyModal.create(({ section, color, visible, remove }: Props) => {
+	const [markdownText, setMarkdownText] = useState("");
+	const lang = getLocale(true);
+
+	useEffect(() => {
+		try {
+			const docFile = getHelpFile(lang, section) as any;
+			fetch(docFile)
+				.then((response) => response.text())
+				.then(setMarkdownText);
+		} catch (ex: any) {
+			setMarkdownText(`**ERROR:** ${ex.message}`);
+		}
+	}, [lang, section]);
+
+	return (
+		<Modal show={visible} onHide={remove}>
+			<Modal.Body>
+				<ReactMarkdown>{markdownText}</ReactMarkdown>
+			</Modal.Body>
+			<Modal.Footer>
+				<Button
+					type="button"
+					actionType="primary"
+					className={cn("ms-auto", color ? `btn-${color}` : null)}
+					data-bs-dismiss="modal"
+					onClick={remove}
+				>
+					<T id="action.close" />
+				</Button>
+			</Modal.Footer>
+		</Modal>
+	);
+});
+
+export { showHelpModal };

frontend/src/modals/index.ts

@@ -5,6 +5,7 @@ export * from "./DeadHostModal";
 export * from "./DeleteConfirmModal";
 export * from "./DNSCertificateModal";
 export * from "./EventDetailsModal";
+export * from "./HelpModal";
 export * from "./HTTPCertificateModal";
 export * from "./PermissionsModal";
 export * from "./ProxyHostModal";