Can create VM from UI

virtweb_frontend/src/widgets/forms/CheckboxInput.tsx

@@ -0,0 +1,25 @@
+import { Checkbox, FormControlLabel, Typography } from "@mui/material";
+
+export function CheckboxInput(p: {
+  editable: boolean;
+  label: string;
+  checked: boolean | undefined;
+  onValueChange: (v: boolean) => void;
+}): React.ReactElement {
+  if (!p.editable && p.checked)
+    return <Typography variant="body2">{p.label}</Typography>;
+
+  if (!p.editable) return <></>;
+
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={p.checked}
+          onChange={(e) => p.onValueChange(e.target.checked)}
+        />
+      }
+      label={p.label}
+    />
+  );
+}

virtweb_frontend/src/widgets/forms/SelectInput.tsx

@@ -0,0 +1,38 @@
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { TextInput } from "./TextInput";
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export function SelectInput(p: {
+  value?: string;
+  editing: boolean;
+  label: string;
+  options: SelectOption[];
+  onValueChange: (o?: string) => void;
+}): React.ReactElement {
+  if (!p.editing && !p.value) return <></>;
+
+  if (!p.editing) {
+    const value = p.options.find((o) => o.value === p.value)?.label;
+    return <TextInput label={p.label} editable={p.editing} value={value} />;
+  }
+  return (
+    <FormControl fullWidth variant="standard" style={{ marginBottom: "15px" }}>
+      <InputLabel>{p.label}</InputLabel>
+      <Select
+        value={p.value ?? ""}
+        label={p.label}
+        onChange={(e) => p.onValueChange(e.target.value)}
+      >
+        {p.options.map((e) => (
+          <MenuItem key={e.value} value={e.value}>
+            {e.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}

virtweb_frontend/src/widgets/forms/TextInput.tsx

@@ -0,0 +1,51 @@
+import { TextField } from "@mui/material";
+import { LenConstraint } from "../../api/ServerApi";
+
+/**
+ * Couple / Member property edition
+ */
+export function TextInput(p: {
+  label: string;
+  editable: boolean;
+  value?: string;
+  onValueChange?: (newVal: string | undefined) => void;
+  size?: LenConstraint;
+  checkValue?: (s: string) => boolean;
+  multiline?: boolean;
+  minRows?: number;
+  maxRows?: number;
+  type?: React.HTMLInputTypeAttribute;
+}): React.ReactElement {
+  if (((!p.editable && p.value) ?? "") === "") return <></>;
+
+  return (
+    <TextField
+      label={p.label}
+      value={p.value}
+      onChange={(e) =>
+        p.onValueChange?.(
+          e.target.value.length === 0 ? undefined : e.target.value
+        )
+      }
+      inputProps={{
+        maxLength: p.size?.max,
+      }}
+      InputProps={{
+        readOnly: !p.editable,
+        type: p.type,
+      }}
+      variant={p.editable ? "standard" : "standard"}
+      style={{ width: "100%", marginBottom: "15px" }}
+      multiline={p.multiline}
+      minRows={p.minRows}
+      maxRows={p.maxRows}
+      error={
+        (p.checkValue &&
+          p.value &&
+          p.value.length > 0 &&
+          !p.checkValue(p.value)) ||
+        false
+      }
+    />
+  );
+}