Can configure all network settings

virtweb_frontend/src/widgets/forms/EditSection.tsx

@@ -1,15 +1,24 @@
 import { Grid, Paper, Typography } from "@mui/material";
-import { PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 export function EditSection(
-  p: { title: string } & PropsWithChildren
+  p: { title: string; actions?: React.ReactElement } & PropsWithChildren
 ): React.ReactElement {
   return (
     <Grid item sm={12} md={6}>
       <Paper style={{ margin: "10px", padding: "10px" }}>
-        <Typography variant="h5" style={{ marginBottom: "15px" }}>
-          {p.title}
-        </Typography>
+        <span
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <Typography variant="h5" style={{ marginBottom: "15px" }}>
+            {p.title}
+          </Typography>
+          {p.actions}
+        </span>
         {p.children}
       </Paper>
     </Grid>

virtweb_frontend/src/widgets/forms/TextMaskInput.tsx

@@ -0,0 +1,60 @@
+import { FormControl, Input, InputLabel } from "@mui/material";
+import { TextInput } from "./TextInput";
+import { IMaskInput } from "react-imask";
+import React from "react";
+
+interface CustomProps {
+  onChange: (event: { target: { name: string; value: string } }) => void;
+  name: string;
+  placeholder: string;
+}
+
+const TextMaskCustom = React.forwardRef<HTMLInputElement, CustomProps>(
+  function TextMaskCustom(props, ref) {
+    const { onChange, placeholder, ...other } = props;
+    return (
+      <IMaskInput
+        {...other}
+        mask={placeholder}
+        definitions={{
+          "#": /[1-9]/,
+        }}
+        inputRef={ref}
+        onAccept={(value: any) =>
+          onChange({ target: { name: props.name, value } })
+        }
+        overwrite
+      />
+    );
+  }
+);
+
+export function TextMaskInput(p: {
+  label: string;
+  editable: boolean;
+  value?: string;
+  onValueChange?: (newVal: string | undefined) => void;
+  mask: string;
+}): React.ReactElement {
+  const id = React.useRef(Math.random());
+
+  if (!p.editable) return <TextInput {...p} />;
+
+  return (
+    <FormControl variant="standard" fullWidth>
+      <InputLabel htmlFor={`mi-${id.current}`}>{p.label}</InputLabel>
+      <Input
+        fullWidth
+        value={p.value ?? ""}
+        onChange={(c) =>
+          p.onValueChange?.(
+            c.target.value.length === 0 ? undefined : c.target.value
+          )
+        }
+        id={`mi-${id.current}`}
+        inputComponent={TextMaskCustom as any}
+        placeholder={p.mask}
+      />
+    </FormControl>
+  );
+}