cloud.go

@@ -5,15 +5,15 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
-	"github.com/coder/websocket/wsjson"
 	"net/http"
 	"net/url"
+	"github.com/coder/websocket/wsjson"
 	"time"
 
 	"github.com/coreos/go-oidc/v3/oidc"
 
-	"github.com/coder/websocket"
 	"github.com/gin-gonic/gin"
+	"github.com/coder/websocket"
 )
 
 type CloudRegisterRequest struct {

config.go

@@ -15,8 +15,8 @@ type UsbConfig struct {
 	UsbVendorId     string `json:"usb_vendor_id"`
 	UsbProductId    string `json:"usb_product_id"`
 	UsbSerialNumber string `json:"usb_serial_number"`
+	UsbName         string `json:"usb_name"`
 	UsbManufacturer string `json:"usb_manufacturer"`
-	UsbProduct      string `json:"usb_product"`
 }
 
 type Config struct {
@@ -38,13 +38,6 @@ const configPath = "/userdata/kvm_config.json"
 var defaultConfig = &Config{
 	CloudURL:          "https://api.jetkvm.com",
 	AutoUpdateEnabled: true, // Set a default value
-	UsbConfig: UsbConfig{
-		UsbVendorId:     "0x1d6b", //The Linux Foundation
-		UsbProductId:    "0x0104", //Multifunction Composite Gadget¬
-		UsbSerialNumber: "",
-		UsbManufacturer: "JetKVM",
-		UsbProduct:      "JetKVM USB Emulation Device",
-	},
 }
 
 var config *Config

jsonrpc.go

@@ -478,11 +478,6 @@ func rpcSetUsbEmulationState(enabled bool) error {
 	}
 }
 
-func rpcGetUsbConfig() (UsbConfig, error) {
-	LoadConfig()
-	return config.UsbConfig, nil
-}
-
 func rpcSetUsbConfig(usbConfig UsbConfig) error {
 	LoadConfig()
 	config.UsbConfig = usbConfig
@@ -565,7 +560,6 @@ 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},

ui/src/components/USBConfigDialog.tsx

@@ -1,216 +0,0 @@
-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";
-
-export interface UsbConfigState {
-  vendor_id: string;
-  product_id: string;
-  serial_number: string;
-  manufacturer: string;
-  product_name: string;
-}
-
-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 [usbConfig, setUsbConfig] = useState({
-    usb_vendor_id: '',
-    usb_product_id: '',
-    usb_serial_number: '',
-    usb_manufacturer: '',
-    usb_product: '',
-  })
-
-  const [usbConfigState, setUsbConfigState] = useState<UsbConfigState>();
-  const [send] = useJsonRpc();
-
-  const syncUsbConfig = useCallback(() => {
-    send("getUsbConfig", {}, resp => {
-      if ("result" in resp) {
-        console.info("Successfully synced USB Config: ", resp.result);
-        setUsbConfigState(resp.result as UsbConfigState);
-      } else {
-        console.error("Failed to load USB Config:", resp.error);
-      }
-    });
-  }, [send, setUsbConfigState]);
-
-  // Load stored usb config from the backend
-  useEffect(() => {
-    syncUsbConfig();
-  }, [syncUsbConfig]);
-
-  const handleUsbVendorIdChange = (vendorId: string) => {
-    setUsbConfig({... usbConfig, usb_vendor_id: vendorId})
-  };
-
-  const handleUsbProductIdChange = (productId: string) => {
-    setUsbConfig({... usbConfig, usb_product_id: productId})
-  };
-
-  const handleUsbSerialChange = (serialNumber: string) => {
-    setUsbConfig({... usbConfig, usb_serial_number: serialNumber})
-  };
-
-  const handleUsbManufacturer = (manufacturer: string) => {
-    setUsbConfig({... usbConfig, usb_manufacturer: manufacturer})
-  };
-
-  const handleUsbProduct = (name: string) => {
-    setUsbConfig({... usbConfig, usb_product: name})
-  };
-
-  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>
-        <InputFieldWithLabel
-          required
-          label="Vendor ID"
-          placeholder="Enter Vendor ID"
-          value={usbConfigState?.vendor_id}
-          onChange={e => handleUsbVendorIdChange(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Product ID"
-          placeholder="Enter Product ID"
-          value={usbConfigState?.product_id}
-          onChange={e => handleUsbProductIdChange(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Serial Number"
-          placeholder="Enter Serial Number"
-          value={usbConfigState?.serial_number}
-          onChange={e => handleUsbSerialChange(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Manufacturer"
-          placeholder="Enter Manufacturer"
-          value={usbConfigState?.manufacturer}
-          onChange={e => handleUsbManufacturer(e.target.value)}
-        />
-        <InputFieldWithLabel
-          required
-          label="Product Name"
-          placeholder="Enter Product Name"
-          value={usbConfigState?.product_name}
-          onChange={e => handleUsbProduct(e.target.value)}
-        />
-        <div className="flex gap-x-2">
-          <Button
-            size="SM"
-            theme="primary"
-            text="Update USB Config"
-            onClick={() => onSetUsbConfig(usbConfig)}
-          />
-          <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>
-  );
-}

ui/src/components/sidebar/settings.tsx

@@ -3,13 +3,14 @@ import {
   useLocalAuthModalStore,
   useSettingsStore,
   useUiStore,
-  useUpdateStore, useUsbConfigModalStore,
+  useUpdateStore,
 } from "@/hooks/stores";
 import { Checkbox } from "@components/Checkbox";
 import { Button, LinkButton } from "@components/Button";
 import { TextAreaWithLabel } from "@components/TextArea";
 import { SectionHeader } from "@components/SectionHeader";
 import { GridCard } from "@components/Card";
+import { InputFieldWithLabel } from "@components/InputField";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { cx } from "@/cva.config";
 import React, { useCallback, useEffect, useRef, useState } from "react";
@@ -25,7 +26,6 @@ import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
 import { LocalDevice } from "@routes/devices.$id";
 import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
-import USBConfigDialog from "@components/USBConfigDialog";
 
 export function SettingsItem({
   title,
@@ -110,6 +110,14 @@ export default function SettingsSidebar() {
     });
   }, [send]);
 
+  const [usbConfig, setUsbConfig] = useState({
+    usb_product_id: '',
+    usb_vendor_id: '',
+    usb_serial_number: '',
+    usb_manufacturer: '',
+    usb_name: '',
+  })
+
   const handleUsbEmulationToggle = useCallback(
       (enabled: boolean) => {
         send("setUsbEmulationState", { enabled: enabled }, resp => {
@@ -207,6 +215,17 @@ export default function SettingsSidebar() {
     });
   };
 
+  const handleUsbConfigChange = useCallback((usbConfig: object) => {
+    send("setUsbConfig", { usbConfig }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+            `Failed to update USB Config: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+    });
+  }, [send]);
+
   const handleSSHKeyChange = (newKey: string) => {
     setSSHKey(newKey);
   };
@@ -241,6 +260,26 @@ export default function SettingsSidebar() {
     });
   }, [send, sshKey]);
 
+  const handleUsbProductIdChange = (productId: string) => {
+    setUsbConfig({... usbConfig, usb_product_id: productId})
+  };
+
+  const handleUsbVendorIdChange = (vendorId: string) => {
+    setUsbConfig({... usbConfig, usb_vendor_id: vendorId})
+  };
+
+  const handleUsbSerialChange = (serialNumber: string) => {
+    setUsbConfig({... usbConfig, usb_serial_number: serialNumber})
+  };
+
+  const handleUsbName = (name: string) => {
+    setUsbConfig({... usbConfig, usb_name: name})
+  };
+
+  const handleUsbManufacturer = (manufacturer: string) => {
+    setUsbConfig({... usbConfig, usb_manufacturer: manufacturer})
+  };
+
   const { setIsUpdateDialogOpen, setModalView, otaState } = useUpdateStore();
   const handleCheckForUpdates = () => {
     if (otaState.updating) {
@@ -341,9 +380,7 @@ export default function SettingsSidebar() {
   }, []);
 
   const { setModalView: setLocalAuthModalView } = useLocalAuthModalStore();
-  const { setModalView: setUsbConfigModalView } = useUsbConfigModalStore();
   const [isLocalAuthDialogOpen, setIsLocalAuthDialogOpen] = useState(false);
-  const [isUsbConfigDialogOpen, setIsUsbConfigDialogOpen] = useState(false);
 
   useEffect(() => {
     if (isOnDevice) getDevice();
@@ -357,14 +394,6 @@ export default function SettingsSidebar() {
     }
   }, [getDevice, isLocalAuthDialogOpen]);
 
-  useEffect(() => {
-    if (!isOnDevice) return;
-    // Refresh device status when the local usb config dialog is closed
-    if (!isUsbConfigDialogOpen) {
-      getDevice();
-    }
-  }, [getDevice, isUsbConfigDialogOpen]);
-
   const revalidator = useRevalidator();
 
   const [currentTheme, setCurrentTheme] = useState(() => {
@@ -847,6 +876,55 @@ export default function SettingsSidebar() {
                     </div>
                   </div>
               )}
+              {settings.developerMode && (
+                  <div className="space-y-4">
+                    <InputFieldWithLabel
+                        label="USB Vendor Id"
+                        value={usbConfig.usb_vendor_id || ""}
+                        onChange={e => handleUsbVendorIdChange(e.target.value)}
+                        placeholder="Enter USB Vendor Id"
+                    />
+                    <InputFieldWithLabel
+                        label="USB Product Id"
+                        value={usbConfig.usb_product_id || ""}
+                        onChange={e => handleUsbProductIdChange(e.target.value)}
+                        placeholder="Enter USB Product Id"
+                    />
+                    <InputFieldWithLabel
+                        label="USB Serial Number"
+                        value={usbConfig.usb_serial_number || ""}
+                        onChange={e => handleUsbSerialChange(e.target.value)}
+                        placeholder="Enter USB Serial Number"
+                    />
+                    <InputFieldWithLabel
+                        label="USB Name"
+                        value={usbConfig.usb_name || ""}
+                        onChange={e => handleUsbName(e.target.value)}
+                        placeholder="Enter USB Name"
+                    />
+                    <InputFieldWithLabel
+                        label="USB Manufacturer"
+                        value={usbConfig.usb_manufacturer || ""}
+                        onChange={e => handleUsbManufacturer(e.target.value)}
+                        placeholder="Enter USB Manufacturer"
+                    />
+                    <div className="flex items-center gap-x-2">
+                      <Button
+                          size="SM"
+                          theme="primary"
+                          text="Update USB Config"
+                          onClick={() => {
+                            if (Object.values(usbConfig).every(function(i) { return Boolean(i); })) {
+                              handleUsbConfigChange(usbConfig);
+                              notifications.success("Successfully updated USB Config")
+                            } else {
+                              notifications.error("Failed to update USB config");
+                            }
+                          }}
+                      />
+                    </div>
+                  </div>
+              )}
               <SettingsItem
                   title="Troubleshooting Mode"
                   description="Diagnostic tools and additional controls for troubleshooting and development purposes"
@@ -858,22 +936,7 @@ export default function SettingsSidebar() {
                     }}
                 />
               </SettingsItem>
-              {settings.developerMode && (
+
-                  <SettingsItem
-                      title="USB Configuration"
-                      description="Set the USB Descriptors for the JetKVM"
-                  >
-                    <Button
-                        size="SM"
-                        theme="light"
-                        text="Update USB Config"
-                        onClick={() => {
-                          setUsbConfigModalView("updateUsbConfig")
-                          setIsUsbConfigDialogOpen(true);
-                        }}
-                    />
-                  </SettingsItem>
-              )}
               {settings.debugMode && (
                   <>
                     <SettingsItem
@@ -920,14 +983,6 @@ export default function SettingsSidebar() {
               setIsLocalAuthDialogOpen(x);
             }}
         />
-        <USBConfigDialog
-          open={isUsbConfigDialogOpen}
-          setOpen={x => {
-            // Revalidate the current route to refresh the local device status and dependent UI components
-            revalidator.revalidate();
-            setIsUsbConfigDialogOpen(x);
-          }}
-        />
       </div>
   );
 }

ui/src/hooks/stores.ts

@@ -528,19 +528,3 @@ export const useLocalAuthModalStore = create<LocalAuthModalState>(set => ({
   setModalView: view => set({ modalView: view }),
   setErrorMessage: message => set({ errorMessage: message }),
 }));
-
-interface UsbConfigModalState {
-  modalView:
-      | "updateUsbConfig"
-      | "updateUsbConfigSuccess";
-  errorMessage: string | null;
-  setModalView: (view: UsbConfigModalState["modalView"]) => void;
-  setErrorMessage: (message: string | null) => void;
-}
-
-export const useUsbConfigModalStore = create<UsbConfigModalState>(set => ({
-  modalView: "updateUsbConfig",
-  errorMessage: null,
-  setModalView: view => set({ modalView: view }),
-  setErrorMessage: message => set({ errorMessage: message }),
-}));

usb.go

@@ -74,7 +74,7 @@ func UpdateGadgetConfig() error {
 	strAttrs := [][]string{
 		{"serialnumber", config.UsbConfig.UsbSerialNumber},
 		{"manufacturer", config.UsbConfig.UsbManufacturer},
-		{"product", config.UsbConfig.UsbProduct},
+		{"product", config.UsbConfig.UsbName},
 	}
 	gadgetStringsPath := filepath.Join(kvmGadgetPath, "strings", "0x409")
 	err = os.MkdirAll(gadgetStringsPath, 0755)
@@ -117,11 +117,10 @@ func writeGadgetConfig() error {
 		return err
 	}
 
-	LoadConfig()
 	err = writeGadgetAttrs(kvmGadgetPath, [][]string{
-		{"bcdUSB", "0x0200"}, //USB 2.0
+		{"bcdUSB", "0x0200"},   //USB 2.0
-		{"idVendor", config.UsbConfig.UsbVendorId},
+		{"idVendor", "0x1d6b"}, //The Linux Foundation
-		{"idProduct", config.UsbConfig.UsbProductId},
+		{"idProduct", "0104"},  //Multifunction Composite Gadget¬
 		{"bcdDevice", "0100"},
 	})
 	if err != nil {
@@ -136,8 +135,8 @@ func writeGadgetConfig() error {
 
 	err = writeGadgetAttrs(gadgetStringsPath, [][]string{
 		{"serialnumber", GetDeviceID()},
-		{"manufacturer", config.UsbConfig.UsbManufacturer},
+		{"manufacturer", "JetKVM"},
-		{"product", config.UsbConfig.UsbProduct},
+		{"product", "JetKVM USB Emulation Device"},
 	})
 	if err != nil {
 		return err