added logging

now loads usb config values to set input values

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/gin-gonic/gin"
 	"github.com/coder/websocket"
+	"github.com/gin-gonic/gin"
 )
 
 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,6 +38,13 @@ 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,6 +478,11 @@ func rpcSetUsbEmulationState(enabled bool) error {
 	}
 }
 
+func rpcGetUsbConfig() (UsbConfig, error) {
+	LoadConfig()
+	return config.UsbConfig, nil
+}
+
 func rpcSetUsbConfig(usbConfig UsbConfig) error {
 	LoadConfig()
 	config.UsbConfig = usbConfig
@@ -560,6 +565,7 @@ 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

@@ -0,0 +1,216 @@
+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,14 +3,13 @@ import {
   useLocalAuthModalStore,
   useSettingsStore,
   useUiStore,
-  useUpdateStore,
+  useUpdateStore, useUsbConfigModalStore,
 } 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";
@@ -26,6 +25,7 @@ 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,14 +110,6 @@ 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 => {
@@ -215,17 +207,6 @@ 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);
   };
@@ -260,26 +241,6 @@ 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) {
@@ -380,7 +341,9 @@ 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();
@@ -394,6 +357,14 @@ 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(() => {
@@ -876,55 +847,6 @@ 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"
@@ -936,7 +858,22 @@ 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
@@ -983,6 +920,14 @@ 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,3 +528,19 @@ 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.UsbName},
+		{"product", config.UsbConfig.UsbProduct},
 	}
 	gadgetStringsPath := filepath.Join(kvmGadgetPath, "strings", "0x409")
 	err = os.MkdirAll(gadgetStringsPath, 0755)
@@ -117,10 +117,11 @@ func writeGadgetConfig() error {
 		return err
 	}
 
+	LoadConfig()
 	err = writeGadgetAttrs(kvmGadgetPath, [][]string{
-		{"bcdUSB", "0x0200"},   //USB 2.0
-		{"idVendor", "0x1d6b"}, //The Linux Foundation
-		{"idProduct", "0104"},  //Multifunction Composite Gadget¬
+		{"bcdUSB", "0x0200"}, //USB 2.0
+		{"idVendor", config.UsbConfig.UsbVendorId},
+		{"idProduct", config.UsbConfig.UsbProductId},
 		{"bcdDevice", "0100"},
 	})
 	if err != nil {
@@ -135,8 +136,8 @@ func writeGadgetConfig() error {
 
 	err = writeGadgetAttrs(gadgetStringsPath, [][]string{
 		{"serialnumber", GetDeviceID()},
-		{"manufacturer", "JetKVM"},
-		{"product", "JetKVM USB Emulation Device"},
+		{"manufacturer", config.UsbConfig.UsbManufacturer},
+		{"product", config.UsbConfig.UsbProduct},
 	})
 	if err != nil {
 		return err