Allow for configuring USB IDs

config.go

@@ -11,24 +11,42 @@ type WakeOnLanDevice struct {
 	MacAddress string `json:"macAddress"`
 }
 
+type UsbConfig struct {
+	VendorId     string `json:"vendor_id"`
+	ProductId    string `json:"product_id"`
+	SerialNumber string `json:"serial_number"`
+	Manufacturer string `json:"manufacturer"`
+	Product      string `json:"product"`
+}
+
 type Config struct {
-	CloudURL          string            `json:"cloud_url"`
-	CloudToken        string            `json:"cloud_token"`
-	GoogleIdentity    string            `json:"google_identity"`
-	JigglerEnabled    bool              `json:"jiggler_enabled"`
-	AutoUpdateEnabled bool              `json:"auto_update_enabled"`
-	IncludePreRelease bool              `json:"include_pre_release"`
-	HashedPassword    string            `json:"hashed_password"`
-	LocalAuthToken    string            `json:"local_auth_token"`
-	LocalAuthMode     string            `json:"localAuthMode"` //TODO: fix it with migration
-	WakeOnLanDevices  []WakeOnLanDevice `json:"wake_on_lan_devices"`
+	CloudURL            string            `json:"cloud_url"`
+	CloudToken          string            `json:"cloud_token"`
+	GoogleIdentity      string            `json:"google_identity"`
+	JigglerEnabled      bool              `json:"jiggler_enabled"`
+	AutoUpdateEnabled   bool              `json:"auto_update_enabled"`
+	IncludePreRelease   bool              `json:"include_pre_release"`
+	HashedPassword      string            `json:"hashed_password"`
+	LocalAuthToken      string            `json:"local_auth_token"`
+	LocalAuthMode       string            `json:"localAuthMode"` //TODO: fix it with migration
+	WakeOnLanDevices    []WakeOnLanDevice `json:"wake_on_lan_devices"`
+	UsbConfig           UsbConfig         `json:"usb_config"`
+	VirtualMediaEnabled bool              `json:"virtual_media_enabled"`
 }
 
 const configPath = "/userdata/kvm_config.json"
 
 var defaultConfig = &Config{
-	CloudURL:          "https://api.jetkvm.com",
-	AutoUpdateEnabled: true, // Set a default value
+	CloudURL:            "https://api.jetkvm.com",
+	AutoUpdateEnabled:   true, // Set a default value
+	VirtualMediaEnabled: true,
+	UsbConfig: UsbConfig{
+		VendorId:     "0x1d6b", //The Linux Foundation
+		ProductId:    "0x0104", //Multifunction Composite Gadget
+		SerialNumber: "",
+		Manufacturer: "JetKVM",
+		Product:      "JetKVM USB Emulation Device",
+	},
 }
 
 var config *Config

jsonrpc.go

@@ -478,6 +478,29 @@ func rpcSetUsbEmulationState(enabled bool) error {
 	}
 }
 
+func rpcGetUsbConfig() (UsbConfig, error) {
+	LoadConfig()
+	return config.UsbConfig, nil
+}
+
+func rpcSetUsbConfig(usbConfig UsbConfig) error {
+	LoadConfig()
+	config.UsbConfig = usbConfig
+
+	err := UpdateGadgetConfig()
+	if err != nil {
+		return fmt.Errorf("failed to write gadget config: %w", err)
+	}
+
+	err = SaveConfig()
+	if err != nil {
+		return fmt.Errorf("failed to save usb config: %w", err)
+	}
+
+	log.Printf("[jsonrpc.go:rpcSetUsbConfig] usb config set to %s", usbConfig)
+	return nil
+}
+
 func rpcGetWakeOnLanDevices() ([]WakeOnLanDevice, error) {
 	LoadConfig()
 	if config.WakeOnLanDevices == nil {
@@ -542,6 +565,8 @@ var rpcHandlers = map[string]RPCHandler{
 	"isUpdatePending":        {Func: rpcIsUpdatePending},
 	"getUsbEmulationState":   {Func: rpcGetUsbEmulationState},
 	"setUsbEmulationState":   {Func: rpcSetUsbEmulationState, Params: []string{"enabled"}},
+	"getUsbConfig":           {Func: rpcGetUsbConfig},
+	"setUsbConfig":           {Func: rpcSetUsbConfig, Params: []string{"usbConfig"}},
 	"checkMountUrl":          {Func: rpcCheckMountUrl, Params: []string{"url"}},
 	"getVirtualMediaState":   {Func: rpcGetVirtualMediaState},
 	"getStorageSpace":        {Func: rpcGetStorageSpace},

ui/src/components/USBConfigDialog.tsx

@@ -0,0 +1,217 @@
+import { GridCard } from "@/components/Card";
+import {useCallback, useEffect, useState} from "react";
+import { Button } from "@components/Button";
+import LogoBlueIcon from "@/assets/logo-blue.svg";
+import LogoWhiteIcon from "@/assets/logo-white.svg";
+import Modal from "@components/Modal";
+import { InputFieldWithLabel } from "./InputField";
+import { useJsonRpc } from "@/hooks/useJsonRpc";
+import { useUsbConfigModalStore } from "@/hooks/stores";
+import ExtLink from "@components/ExtLink";
+import { UsbConfigState } from "@/hooks/stores"
+
+export default function USBConfigDialog({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}) {
+  return (
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <Dialog setOpen={setOpen} />
+    </Modal>
+  );
+}
+
+export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
+  const { modalView, setModalView } = useUsbConfigModalStore();
+  const [error, setError] = useState<string | null>(null);
+
+  const [send] = useJsonRpc();
+
+  const handleUsbConfigChange = useCallback((usbConfig: object) => {
+    send("setUsbConfig", { usbConfig }, resp => {
+      if ("error" in resp) {
+        setError(`Failed to update USB Config: ${resp.error.data || "Unknown error"}`);
+        return;
+      }
+      setModalView("updateUsbConfigSuccess");
+    });
+  }, [send, setModalView]);
+
+  return (
+    <GridCard cardClassName="relative max-w-lg mx-auto text-left pointer-events-auto dark:bg-slate-800">
+      <div className="p-10">
+        {modalView === "updateUsbConfig" && (
+          <UpdateUsbConfigModal
+            onSetUsbConfig={handleUsbConfigChange}
+            onCancel={() => setOpen(false)}
+            error={error}
+          />
+        )}
+
+        {modalView === "updateUsbConfigSuccess" && (
+          <SuccessModal
+            headline="USB Configuration Updated Successfully"
+            description="You've successfully updated the USB Configuration"
+            onClose={() => setOpen(false)}
+          />
+        )}
+      </div>
+    </GridCard>
+  );
+}
+
+function UpdateUsbConfigModal({
+  onSetUsbConfig,
+  onCancel,
+  error,
+}: {
+  onSetUsbConfig: (usb_config: object) => void;
+  onCancel: () => void;
+  error: string | null;
+}) {
+  const [usbConfigState, setUsbConfigState] = useState<UsbConfigState>({
+    vendor_id: '',
+    product_id: '',
+    serial_number: '',
+    manufacturer: '',
+    product: ''
+  });
+  const [send] = useJsonRpc();
+
+  const syncUsbConfig = useCallback(() => {
+    send("getUsbConfig", {}, resp => {
+      if ("error" in resp) {
+        console.error("Failed to load USB Config:", resp.error);
+      } else {
+        setUsbConfigState(resp.result as UsbConfigState);
+      }
+    });
+  }, [send, setUsbConfigState]);
+
+  // Load stored usb config from the backend
+  useEffect(() => {
+    syncUsbConfig();
+  }, [syncUsbConfig]);
+
+  const handleUsbVendorIdChange = (value: string) => {
+    setUsbConfigState({... usbConfigState, vendor_id: value})
+  };
+
+  const handleUsbProductIdChange = (value: string) => {
+    setUsbConfigState({... usbConfigState, product_id: value})
+  };
+
+  const handleUsbSerialChange = (value: string) => {
+    setUsbConfigState({... usbConfigState, serial_number: value})
+  };
+
+  const handleUsbManufacturer = (value: string) => {
+    setUsbConfigState({... usbConfigState, manufacturer: value})
+  };
+
+  const handleUsbProduct = (value: string) => {
+    setUsbConfigState({... usbConfigState, product: value})
+  };
+
+  return (
+    <div className="flex flex-col items-start justify-start space-y-4 text-left">
+      <div>
+        <img src={LogoWhiteIcon} alt="" className="h-[24px] hidden dark:block" />
+        <img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
+      </div>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-lg font-semibold dark:text-white">USB Emulation Configuration</h2>
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            Set custom USB parameters to control how the USB device is emulated.
+            The device will rebind once the parameters are updated.
+          </p>
+          <div className="flex justify-start mt-4 text-xs text-slate-500 dark:text-slate-400">
+            <ExtLink
+                href={`https://the-sz.com/products/usbid/index.php?v=${usbConfigState.vendor_id}&p=${usbConfigState.product_id}`}
+                className="hover:underline"
+            >
+              Look up USB Device IDs here
+            </ExtLink>
+          </div>
+        </div>
+        <InputFieldWithLabel
+            required
+            label="Vendor ID"
+            placeholder="Enter Vendor ID"
+            pattern="^0[xX][\da-fA-F]{4}$"
+            defaultValue={usbConfigState?.vendor_id}
+            onChange={e => handleUsbVendorIdChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+            required
+            label="Product ID"
+          placeholder="Enter Product ID"
+          pattern="^0[xX][\da-fA-F]{4}$"
+          defaultValue={usbConfigState?.product_id}
+          onChange={e => handleUsbProductIdChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Serial Number"
+          placeholder="Enter Serial Number"
+          defaultValue={usbConfigState?.serial_number}
+          onChange={e => handleUsbSerialChange(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Manufacturer"
+          placeholder="Enter Manufacturer"
+          defaultValue={usbConfigState?.manufacturer}
+          onChange={e => handleUsbManufacturer(e.target.value)}
+        />
+        <InputFieldWithLabel
+          required
+          label="Product Name"
+          placeholder="Enter Product Name"
+          defaultValue={usbConfigState?.product}
+          onChange={e => handleUsbProduct(e.target.value)}
+        />
+        <div className="flex gap-x-2">
+          <Button
+            size="SM"
+            theme="primary"
+            text="Update USB Config"
+            onClick={() => onSetUsbConfig(usbConfigState)}
+          />
+          <Button size="SM" theme="light" text="Not Now" onClick={onCancel} />
+        </div>
+        {error && <p className="text-sm text-red-500">{error}</p>}
+      </div>
+    </div>
+  );
+}
+
+function SuccessModal({
+  headline,
+  description,
+  onClose,
+}: {
+  headline: string;
+  description: string;
+  onClose: () => void;
+}) {
+  return (
+    <div className="flex flex-col items-start justify-start w-full max-w-lg space-y-4 text-left">
+      <div>
+        <img src={LogoWhiteIcon} alt="" className="h-[24px] hidden dark:block" />
+        <img src={LogoBlueIcon} alt="" className="h-[24px] dark:hidden" />
+      </div>
+      <div className="space-y-4">
+        <div>
+          <h2 className="text-lg font-semibold dark:text-white">{headline}</h2>
+          <p className="text-sm text-slate-600 dark:text-slate-400">{description}</p>
+        </div>
+        <Button size="SM" theme="primary" text="Close" onClick={onClose} />
+      </div>
+    </div>
+  );
+}