Can define ARP rules

virtweb_frontend/src/widgets/forms/IPInput.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { TextInput } from "./TextInput";
 
 export function IPInput(p: {
@@ -18,6 +19,47 @@ export function IPInput(p: {
   );
 }
 
+export function IPInputWithMask(p: {
+  label: string;
+  editable: boolean;
+  ip?: string;
+  mask?: number;
+  onValueChange?: (ip?: string, mask?: number) => void;
+  version: 4 | 6;
+}): React.ReactElement {
+  const showSlash = React.useRef(!!p.mask);
+
+  const currValue =
+    (p.ip ?? "") + (p.mask || showSlash.current ? "/" : "") + (p.mask ?? "");
+
+  const { onValueChange, ...props } = p;
+  return (
+    <TextInput
+      onValueChange={(v) => {
+        showSlash.current = false;
+        if (!v) {
+          onValueChange?.(undefined, undefined);
+          return;
+        }
+
+        const split = v?.split("/");
+        const ip =
+          p.version === 4 ? sanitizeIpV4(split[0]) : sanitizeIpV6(split[0]);
+        let mask = undefined;
+
+        if (split.length > 1) {
+          showSlash.current = true;
+          mask = sanitizeMask(p.version, split[1]);
+        }
+
+        onValueChange?.(ip, mask);
+      }}
+      value={currValue}
+      {...props}
+    />
+  );
+}
+
 function sanitizeIpV4(s: string | undefined): string | undefined {
   if (s === "" || s === undefined) return s;
 
@@ -77,3 +119,15 @@ function sanitizeIpV6(s: string | undefined): string | undefined {
 
   return needAnotherIteration ? sanitizeIpV6(res) : res;
 }
+
+function sanitizeMask(version: 4 | 6, mask?: string): number | undefined {
+  if (!mask) return undefined;
+
+  const value = Math.floor(Number(mask));
+
+  if (version === 4) {
+    return value < 0 || value > 32 ? 32 : value;
+  } else {
+    return value < 0 || value > 64 ? 64 : value;
+  }
+}