Show guidelines on UI on how to setup network hook

virtweb_frontend/src/widgets/CopyToClipboard.tsx

@@ -0,0 +1,30 @@
+import { ButtonBase } from "@mui/material";
+import { PropsWithChildren } from "react";
+import { useSnackbar } from "../hooks/providers/SnackbarProvider";
+
+export function CopyToClipboard(
+  p: PropsWithChildren<{ content: string }>
+): React.ReactElement {
+  const snackbar = useSnackbar();
+
+  const copy = () => {
+    navigator.clipboard.writeText(p.content);
+    snackbar(`${p.content} copied to clipboard.`);
+  };
+
+  return (
+    <ButtonBase
+      onClick={copy}
+      style={{
+        display: "inline-block",
+        alignItems: "unset",
+        textAlign: "unset",
+        position: "relative",
+        padding: "0px",
+      }}
+      disableRipple
+    >
+      {p.children}
+    </ButtonBase>
+  );
+}

virtweb_frontend/src/widgets/net/NetworkHookStatusWidget.tsx

@@ -0,0 +1,102 @@
+import React, { PropsWithChildren } from "react";
+import { AsyncWidget } from "../AsyncWidget";
+import { NetworkHookStatus, ServerApi } from "../../api/ServerApi";
+import { Alert, Typography } from "@mui/material";
+import { CopyToClipboard } from "../CopyToClipboard";
+
+export function NetworkHookStatusWidget(p: {
+  hiddenIfInstalled: boolean;
+}): React.ReactElement {
+  const [status, setStatus] = React.useState<NetworkHookStatus | undefined>();
+
+  const load = async () => {
+    setStatus(await ServerApi.NetworkHookStatus());
+  };
+
+  return (
+    <AsyncWidget
+      loadKey={1}
+      errMsg="Failed to get network status!"
+      ready={!!status}
+      load={load}
+      build={() => <NetworkHookStatusWidgetInner {...p} status={status!} />}
+    />
+  );
+}
+
+function NetworkHookStatusWidgetInner(p: {
+  status: NetworkHookStatus;
+  hiddenIfInstalled: boolean;
+}): React.ReactElement {
+  if (p.status.installed && p.hiddenIfInstalled) return <></>;
+  if (p.status.installed)
+    return (
+      <Alert
+        variant="outlined"
+        severity="success"
+        style={{ margin: "20px 0px" }}
+      >
+        The network hook has been installed on this system.
+      </Alert>
+    );
+
+  return (
+    <Alert variant="outlined" severity="warning" style={{ margin: "20px 0px" }}>
+      The network hook has not been detected on this system. It must be
+      installed in order to expose ports from virtual machines through NAT on
+      the network.
+      <br />
+      <br />
+      In order to install it, please create a file named &nbsp;
+      <CopyToClipboard content={p.status.path}>
+        <InlineCode>{p.status.path}</InlineCode> &nbsp; with the following
+      </CopyToClipboard>
+      content:
+      <br />
+      <CopyToClipboard content={p.status.content}>
+        <CodeBlock>{p.status.content}</CodeBlock>
+      </CopyToClipboard>
+      <br />
+      You will need then to restart both <InlineCode>
+        libvirtd
+      </InlineCode> and <InlineCode>VirtWeb</InlineCode>.
+    </Alert>
+  );
+}
+
+function InlineCode(p: PropsWithChildren): React.ReactElement {
+  return (
+    <code
+      style={{
+        display: "inline-block",
+        backgroundColor: "black",
+        color: "white",
+        wordBreak: "break-all",
+        wordWrap: "break-word",
+        whiteSpace: "pre-wrap",
+        padding: "0px 7px",
+        borderRadius: "5px",
+      }}
+    >
+      {p.children}
+    </code>
+  );
+}
+
+function CodeBlock(p: PropsWithChildren): React.ReactElement {
+  return (
+    <pre
+      style={{
+        backgroundColor: "black",
+        color: "white",
+        wordBreak: "break-all",
+        wordWrap: "break-word",
+        whiteSpace: "pre-wrap",
+        padding: "10px",
+        borderRadius: "5px",
+      }}
+    >
+      {p.children}
+    </pre>
+  );
+}