Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): Move USB configuration to new settings setup 

This commit introduces several improvements to the USB configuration workflow:
- Refactored USB configuration dialog component
- Simplified USB config state management
- Moved USB configuration to hardware settings route
- Updated JSON-RPC type definitions
- Cleaned up unused imports and components
- Improved error handling and notifications
This commit is contained in:
Adam Shiervani 2025-02-27 11:49:55 +01:00
parent 1f2b140527
commit 078e719133
8 changed files with 404 additions and 1581 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.go
View File

@ -53,7 +53,7 @@ var defaultConfig = &Config{
ProductId: "0x0104", //Multifunction Composite Gadget ProductId: "0x0104", //Multifunction Composite Gadget
SerialNumber: "", SerialNumber: "",
Manufacturer: "JetKVM", Manufacturer: "JetKVM",
Product: "JetKVM USB Emulation Device", Product: "USB Emulation Device",
}, },
} }

173
ui/src/components/USBConfigDialog.tsx
View File

@ -1,83 +1,25 @@
import { GridCard } from "@/components/Card";
import {useCallback, useEffect, useState} from "react";
import { Button } from "@components/Button"; 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 { InputFieldWithLabel } from "./InputField";
import { useJsonRpc } from "@/hooks/useJsonRpc"; import { UsbConfigState } from "@/hooks/stores";
import { useUsbConfigModalStore } from "@/hooks/stores"; import { useEffect, useCallback, useState } from "react";
import ExtLink from "@components/ExtLink"; import { useJsonRpc } from "../hooks/useJsonRpc";
import { UsbConfigState } from "@/hooks/stores" import { USBConfig } from "../routes/devices.$id.settings.hardware";
export default function USBConfigDialog({ export default function UpdateUsbConfigModal({
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, onSetUsbConfig,
onCancel, onRestoreToDefault,
error,
}: { }: {
onSetUsbConfig: (usb_config: object) => void; onSetUsbConfig: (usbConfig: USBConfig) => void;
onCancel: () => void; onRestoreToDefault: () => void;
error: string | null;
}) { }) {
const [usbConfigState, setUsbConfigState] = useState<UsbConfigState>({ const [usbConfigState, setUsbConfigState] = useState<USBConfig>({
vendor_id: '', vendor_id: "",
product_id: '', product_id: "",
serial_number: '', serial_number: "",
manufacturer: '', manufacturer: "",
product: '' product: "",
}); });
const [send] = useJsonRpc(); const [send] = useJsonRpc();
const syncUsbConfig = useCallback(() => { const syncUsbConfig = useCallback(() => {
@ -90,53 +32,34 @@ function UpdateUsbConfigModal({
}); });
}, [send, setUsbConfigState]); }, [send, setUsbConfigState]);
// Load stored usb config from the backend // Load stored usb config from the backend
useEffect(() => { useEffect(() => {
syncUsbConfig(); syncUsbConfig();
}, [syncUsbConfig]); }, [syncUsbConfig]);
const handleUsbVendorIdChange = (value: string) => { const handleUsbVendorIdChange = (value: string) => {
setUsbConfigState({... usbConfigState, vendor_id: value}) setUsbConfigState({ ...usbConfigState, vendor_id: value });
}; };
const handleUsbProductIdChange = (value: string) => { const handleUsbProductIdChange = (value: string) => {
setUsbConfigState({... usbConfigState, product_id: value}) setUsbConfigState({ ...usbConfigState, product_id: value });
}; };
const handleUsbSerialChange = (value: string) => { const handleUsbSerialChange = (value: string) => {
setUsbConfigState({... usbConfigState, serial_number: value}) setUsbConfigState({ ...usbConfigState, serial_number: value });
}; };
const handleUsbManufacturer = (value: string) => { const handleUsbManufacturer = (value: string) => {
setUsbConfigState({... usbConfigState, manufacturer: value}) setUsbConfigState({ ...usbConfigState, manufacturer: value });
}; };
const handleUsbProduct = (value: string) => { const handleUsbProduct = (value: string) => {
setUsbConfigState({... usbConfigState, product: value}) setUsbConfigState({ ...usbConfigState, product: value });
}; };
return ( return (
<div className="flex flex-col items-start justify-start space-y-4 text-left"> <div className="space-y-6">
<div> <div className="grid grid-cols-2 gap-4">
<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`}
className="hover:underline"
>
Look up USB Device IDs here
</ExtLink>
</div>
</div>
<InputFieldWithLabel <InputFieldWithLabel
required required
label="Vendor ID" label="Vendor ID"
@ -174,43 +97,21 @@ function UpdateUsbConfigModal({
defaultValue={usbConfigState?.product} defaultValue={usbConfigState?.product}
onChange={e => handleUsbProduct(e.target.value)} onChange={e => handleUsbProduct(e.target.value)}
/> />
<div className="flex gap-x-2"> </div>
<Button <div className="flex gap-x-2">
size="SM" <Button
theme="primary" size="SM"
text="Update USB Config" theme="primary"
onClick={() => onSetUsbConfig(usbConfigState)} text="Update USB Config"
/> onClick={() => onSetUsbConfig(usbConfigState)}
<Button size="SM" theme="light" text="Not Now" onClick={onCancel} /> />
</div> <Button
{error && <p className="text-sm text-red-500">{error}</p>} size="SM"
theme="light"
text="Restore to Default"
onClick={onRestoreToDefault}
/>
</div> </div>
</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>
);
}

1254
ui/src/components/sidebar/settings.tsx
View File

File diff suppressed because it is too large Load Diff

30
ui/src/hooks/useJsonRpc.ts
View File

@ -8,17 +8,25 @@ export interface JsonRpcRequest {
id: number | string; id: number | string;
} }
type JsonRpcResponse = export interface JsonRpcError {
| { code: number;
jsonrpc: string; data?: string;
result: boolean | number | object | string | []; message: string;
id: string | number; }
}
| { export interface JsonRpcSuccessResponse {
jsonrpc: string; jsonrpc: string;
error: { code: number; data?: string; message: string }; result: boolean | number | object | string | [];
id: string | number; id: string | number;
}; }
export interface JsonRpcErrorResponse {
jsonrpc: string;
error: JsonRpcError;
id: string | number;
}
export type JsonRpcResponse = JsonRpcSuccessResponse | JsonRpcErrorResponse;
const callbackStore = new Map<number | string, (resp: JsonRpcResponse) => void>(); const callbackStore = new Map<number | string, (resp: JsonRpcResponse) => void>();
let requestCounter = 0; let requestCounter = 0;

163
ui/src/routes/devices.$id.settings.advanced.tsx
View File

@ -11,7 +11,7 @@ import { isOnDevice } from "../main";
import { InputFieldWithLabel } from "../components/InputField"; import { InputFieldWithLabel } from "../components/InputField";
import { Button } from "../components/Button"; import { Button } from "../components/Button";
import { useSettingsStore } from "../hooks/stores"; import { useSettingsStore } from "../hooks/stores";
import { GridCard } from "@/components/Card"; import { GridCard } from "@components/Card";
export default function SettingsAdvancedRoute() { export default function SettingsAdvancedRoute() {
const [send] = useJsonRpc(); const [send] = useJsonRpc();
@ -152,6 +152,52 @@ export default function SettingsAdvancedRoute() {
/> />
<div className="space-y-4"> <div className="space-y-4">
<SettingsItem
title="Troubleshooting Mode"
description="Diagnostic tools and additional controls for troubleshooting and development purposes"
>
<Checkbox
defaultChecked={settings.debugMode}
onChange={e => {
settings.setDebugMode(e.target.checked);
}}
/>
</SettingsItem>
{settings.debugMode && (
<>
<SettingsItem
title="USB Emulation"
description="Control the USB emulation state"
>
<Button
size="SM"
theme="light"
text={
usbEmulationEnabled ? "Disable USB Emulation" : "Enable USB Emulation"
}
onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
/>
</SettingsItem>
<SettingsItem
title="Reset Configuration"
description="Reset configuration to default. This will log you out."
>
<Button
size="SM"
theme="light"
text="Reset Config"
onClick={() => {
handleResetConfig();
window.location.reload();
}}
/>
</SettingsItem>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
</>
)}
<SettingsItem <SettingsItem
title="Developer Mode" title="Developer Mode"
description="Enable advanced features for developers" description="Enable advanced features for developers"
@ -198,8 +244,43 @@ export default function SettingsAdvancedRoute() {
</GridCard> </GridCard>
)} )}
{settings.developerMode && ( {isOnDevice && settings.developerMode && (
<div> <div className="mt-4 space-y-4">
<SettingsItem
title="Cloud API URL"
description="Connect to a custom JetKVM Cloud API"
/>
<InputFieldWithLabel
size="SM"
label="Cloud URL"
value={cloudUrl}
onChange={e => setCloudUrl(e.target.value)}
placeholder="https://api.jetkvm.com"
/>
<div className="flex items-center gap-x-2">
<Button
size="SM"
theme="primary"
text="Save Cloud URL"
onClick={() => handleCloudUrlChange(cloudUrl)}
/>
<Button
size="SM"
theme="light"
text="Restore to default"
onClick={handleResetCloudUrl}
/>
</div>
</div>
)}
{isOnDevice && settings.developerMode && (
<div className="space-y-4">
<SettingsItem
title="SSH Access"
description="Add your SSH public key to enable secure remote access to the device"
/>
<div className="space-y-4"> <div className="space-y-4">
<TextAreaWithLabel <TextAreaWithLabel
label="SSH Public Key" label="SSH Public Key"
@ -220,84 +301,8 @@ export default function SettingsAdvancedRoute() {
/> />
</div> </div>
</div> </div>
{isOnDevice && (
<div className="mt-4 space-y-4">
<SettingsItem
title="Cloud API URL"
description="Connect to a custom JetKVM Cloud API"
/>
<InputFieldWithLabel
size="SM"
label="Cloud URL"
value={cloudUrl}
onChange={e => setCloudUrl(e.target.value)}
placeholder="https://api.jetkvm.com"
/>
<div className="flex items-center gap-x-2">
<Button
size="SM"
theme="primary"
text="Save Cloud URL"
onClick={() => handleCloudUrlChange(cloudUrl)}
/>
<Button
size="SM"
theme="light"
text="Restore to default"
onClick={handleResetCloudUrl}
/>
</div>
</div>
)}
</div> </div>
)} )}
<SettingsItem
title="Troubleshooting Mode"
description="Diagnostic tools and additional controls for troubleshooting and development purposes"
>
<Checkbox
defaultChecked={settings.debugMode}
onChange={e => {
settings.setDebugMode(e.target.checked);
}}
/>
</SettingsItem>
{settings.debugMode && (
<>
<SettingsItem
title="USB Emulation"
description="Control the USB emulation state"
>
<Button
size="SM"
theme="light"
text={
usbEmulationEnabled ? "Disable USB Emulation" : "Enable USB Emulation"
}
onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
/>
</SettingsItem>
</>
)}
{settings.debugMode && (
<SettingsItem
title="Reset Configuration"
description="Reset the configuration file to its default state. This will log you out of the device."
>
<Button
size="SM"
theme="light"
text="Reset Config"
onClick={() => {
handleResetConfig();
window.location.reload();
}}
/>
</SettingsItem>
)}
</div> </div>
</div> </div>
); );

176
ui/src/routes/devices.$id.settings.general._index.tsx
View File

@ -169,101 +169,105 @@ export default function SettingsGeneralRoute() {
</div> </div>
{isOnDevice && ( {isOnDevice && (
<div className="space-y-4"> <>
<SettingsItem <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
title="JetKVM Cloud"
description="Connect your device to the cloud for secure remote access and management" <div className="space-y-4">
/> <SettingsItem
title="JetKVM Cloud"
description="Connect your device to the cloud for secure remote access and management"
/>
<GridCard>
<div className="flex items-start gap-x-4 p-4">
<ShieldCheckIcon className="mt-1 h-8 w-8 shrink-0 text-blue-600 dark:text-blue-500" />
<div className="space-y-3">
<div className="space-y-2">
<h3 className="text-base font-bold text-slate-900 dark:text-white">
Cloud Security
</h3>
<div>
<ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300">
<li>End-to-end encryption using WebRTC (DTLS and SRTP)</li>
<li>Zero Trust security model</li>
<li>OIDC (OpenID Connect) authentication</li>
<li>All streams encrypted in transit</li>
</ul>
</div>
<div className="text-xs text-slate-700 dark:text-slate-300">
All cloud components are open-source and available on{" "}
<a
href="https://github.com/jetkvm"
target="_blank"
rel="noopener noreferrer"
className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400"
>
GitHub
</a>
.
</div>
</div>
<hr className="block w-full dark:border-slate-600" />
<GridCard>
<div className="flex items-start gap-x-4 p-4">
<ShieldCheckIcon className="mt-1 h-8 w-8 shrink-0 text-blue-600 dark:text-blue-500" />
<div className="space-y-3">
<div className="space-y-2">
<h3 className="text-base font-bold text-slate-900 dark:text-white">
Cloud Security
</h3>
<div> <div>
<ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300"> <LinkButton
<li>End-to-end encryption using WebRTC (DTLS and SRTP)</li> to="https://jetkvm.com/docs/networking/remote-access"
<li>Zero Trust security model</li> size="SM"
<li>OIDC (OpenID Connect) authentication</li> theme="light"
<li>All streams encrypted in transit</li> text="Learn about our cloud security"
</ul> />
</div> </div>
<div className="text-xs text-slate-700 dark:text-slate-300">
All cloud components are open-source and available on{" "}
<a
href="https://github.com/jetkvm"
target="_blank"
rel="noopener noreferrer"
className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400"
>
GitHub
</a>
.
</div>
</div>
<hr className="block w-full dark:border-slate-600" />
<div>
<LinkButton
to="https://jetkvm.com/docs/networking/remote-access"
size="SM"
theme="light"
text="Learn about our cloud security"
/>
</div> </div>
</div> </div>
</div> </GridCard>
</GridCard>
{!isAdopted ? ( {!isAdopted ? (
<div> <div>
<LinkButton <LinkButton
to={ to={
CLOUD_APP + CLOUD_APP +
"/signup?deviceId=" + "/signup?deviceId=" +
deviceId + deviceId +
`&returnTo=${location.href}adopt` `&returnTo=${location.href}adopt`
} }
size="MD" size="SM"
theme="primary" theme="primary"
text="Adopt KVM to Cloud account" text="Adopt KVM to Cloud account"
/> />
</div> </div>
) : ( ) : (
<div> <div>
<div className="space-y-2"> <div className="space-y-2">
<p className="text-sm text-slate-600 dark:text-slate-300"> <p className="text-sm text-slate-600 dark:text-slate-300">
Your device is adopted to JetKVM Cloud Your device is adopted to JetKVM Cloud
</p> </p>
<div> <div>
<Button <Button
size="MD" size="MD"
theme="light" theme="light"
text="De-register from Cloud" text="De-register from Cloud"
className="text-red-600" className="text-red-600"
onClick={() => { onClick={() => {
if (deviceId) { if (deviceId) {
if ( if (
window.confirm( window.confirm(
"Are you sure you want to de-register this device?", "Are you sure you want to de-register this device?",
) )
) { ) {
deregisterDevice(); deregisterDevice();
}
} else {
notifications.error("No device ID available");
} }
} else { }}
notifications.error("No device ID available"); />
} </div>
}}
/>
</div> </div>
</div> </div>
</div> )}
)} </div>
</div> </>
)} )}
</div> </div>
</div> </div>

183
ui/src/routes/devices.$id.settings.hardware.tsx
View File

@ -1,17 +1,97 @@
import { SectionHeader } from "../components/SectionHeader"; import { SectionHeader } from "@components/SectionHeader";
import { SettingsItem } from "@routes/devices.$id.settings";
import { SettingsItem } from "./devices.$id.settings"; import { BacklightSettings, UsbConfigState, useSettingsStore } from "@/hooks/stores";
import { BacklightSettings, useSettingsStore } from "../hooks/stores"; import { useCallback, useEffect, useMemo, useState } from "react";
import { useEffect } from "react";
import { useJsonRpc } from "@/hooks/useJsonRpc"; import { useJsonRpc } from "@/hooks/useJsonRpc";
import notifications from "../notifications"; import notifications from "../notifications";
import { SelectMenuBasic } from "../components/SelectMenuBasic"; import { SelectMenuBasic } from "@components/SelectMenuBasic";
import USBConfigDialog from "@components/USBConfigDialog";
const generatedSerialNumber = [generateNumber(1, 9), generateHex(7, 7), 0, 1].join("&");
function generateNumber(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateHex(min: number, max: number) {
const len = generateNumber(min, max);
const n = (Math.random() * 0xfffff * 1000000).toString(16);
return n.slice(0, len);
}
export interface USBConfig {
vendor_id: string;
product_id: string;
serial_number: string;
manufacturer: string;
product: string;
}
const usbConfigs = [
{
label: "JetKVM Default",
value: "USB Emulation Device",
},
{
label: "Logitech Universal Adapter",
value: "Logitech USB Input Device",
},
{
label: "Microsoft Wireless MultiMedia Keyboard",
value: "Wireless MultiMedia Keyboard",
},
{
label: "Dell Multimedia Pro Keyboard",
value: "Multimedia Pro Keyboard",
},
];
type UsbConfigMap = Record<string, USBConfig>;
export default function SettingsHardwareRoute() { export default function SettingsHardwareRoute() {
const setBacklightSettings = useSettingsStore(state => state.setBacklightSettings); const [send] = useJsonRpc();
const settings = useSettingsStore(); const settings = useSettingsStore();
const [usbConfigProduct, setUsbConfigProduct] = useState("");
const [deviceId, setDeviceId] = useState("");
const setBacklightSettings = useSettingsStore(state => state.setBacklightSettings);
const usbConfigData: UsbConfigMap = useMemo(
() => ({
"USB Emulation Device": {
vendor_id: "0x1d6b",
product_id: "0x0104",
serial_number: deviceId,
manufacturer: "JetKVM",
product: "USB Emulation Device",
},
"Logitech USB Input Device": {
vendor_id: "0x046d",
product_id: "0xc52b",
serial_number: generatedSerialNumber,
manufacturer: "Logitech (x64)",
product: "Logitech USB Input Device",
},
"Wireless MultiMedia Keyboard": {
vendor_id: "0x045e",
product_id: "0x005f",
serial_number: generatedSerialNumber,
manufacturer: "Microsoft",
product: "Wireless MultiMedia Keyboard",
},
"Multimedia Pro Keyboard": {
vendor_id: "0x413c",
product_id: "0x2011",
serial_number: generatedSerialNumber,
manufacturer: "Dell Inc.",
product: "Multimedia Pro Keyboard",
},
}),
[deviceId],
);
const handleBacklightSettingsChange = (settings: BacklightSettings) => { const handleBacklightSettingsChange = (settings: BacklightSettings) => {
// If the user has set the display to dim after it turns off, set the dim_after // If the user has set the display to dim after it turns off, set the dim_after
// value to never. // value to never.
@ -34,24 +114,72 @@ export default function SettingsHardwareRoute() {
notifications.success("Backlight settings updated successfully"); notifications.success("Backlight settings updated successfully");
}); });
}; };
const [send] = useJsonRpc(); const syncUsbConfigProduct = useCallback(() => {
send("getUsbConfig", {}, resp => {
if ("error" in resp) {
console.error("Failed to load USB Config:", resp.error);
notifications.error(
`Failed to load USB Config: ${resp.error.data || "Unknown error"}`,
);
} else {
console.log("syncUsbConfigProduct#getUsbConfig result:", resp.result);
const usbConfigState = resp.result as UsbConfigState;
const product = usbConfigs.map(u => u.value).includes(usbConfigState.product)
? usbConfigState.product
: "custom";
setUsbConfigProduct(product);
}
});
}, [send]);
const handleUsbConfigChange = useCallback(
(usbConfig: USBConfig) => {
send("setUsbConfig", { usbConfig }, resp => {
if ("error" in resp) {
notifications.error(
`Failed to set usb config: ${resp.error.data || "Unknown error"}`,
);
return;
}
// setUsbConfigProduct(usbConfig.product);
notifications.success(
`USB Config set to ${usbConfig.manufacturer} ${usbConfig.product}`,
);
syncUsbConfigProduct();
});
},
[send, syncUsbConfigProduct],
);
useEffect(() => { useEffect(() => {
send("getBacklightSettings", {}, resp => { send("getBacklightSettings", {}, resp => {
if ("error" in resp) { if ("error" in resp) {
notifications.error( return notifications.error(
`Failed to get backlight settings: ${resp.error.data || "Unknown error"}`, `Failed to get backlight settings: ${resp.error.data || "Unknown error"}`,
); );
return;
} }
const result = resp.result as BacklightSettings; const result = resp.result as BacklightSettings;
setBacklightSettings(result); setBacklightSettings(result);
}); });
}, [send, setBacklightSettings]);
send("getDeviceID", {}, async resp => {
if ("error" in resp) {
return notifications.error(
`Failed to get device ID: ${resp.error.data || "Unknown error"}`,
);
}
setDeviceId(resp.result as string);
});
syncUsbConfigProduct();
}, [send, setBacklightSettings, syncUsbConfigProduct]);
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<SectionHeader title="Hardware" description="Configure display settings and hardware options for your JetKVM device" /> <SectionHeader
title="Hardware"
description="Configure display settings and hardware options for your JetKVM device"
/>
<div className="space-y-4"> <div className="space-y-4">
<SettingsItem <SettingsItem
title="Display Brightness" title="Display Brightness"
@ -124,6 +252,37 @@ export default function SettingsHardwareRoute() {
The display will wake up when the connection state changes, or when touched. The display will wake up when the connection state changes, or when touched.
</p> </p>
</div> </div>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
<SettingsItem
title="USB Device Emulation"
description="Set a Preconfigured USB Device"
>
<SelectMenuBasic
size="SM"
label=""
className="max-w-[192px]"
value={usbConfigProduct}
onChange={e => {
if (e.target.value === "custom") {
setUsbConfigProduct(e.target.value);
} else {
const usbConfig = usbConfigData[e.target.value];
handleUsbConfigChange(usbConfig);
}
}}
options={[...usbConfigs, { value: "custom", label: "Custom" }]}
/>
</SettingsItem>
{usbConfigProduct === "custom" && (
<USBConfigDialog
onSetUsbConfig={usbConfig => handleUsbConfigChange(usbConfig)}
onRestoreToDefault={() =>
handleUsbConfigChange(usbConfigData[usbConfigs[0].value])
}
/>
)}
</div> </div>
); );
} }

4
ui/src/routes/devices.$id.settings.video.tsx
View File

@ -160,13 +160,13 @@ export default function SettingsVideoRoute() {
/> />
<div className="flex justify-start gap-x-2"> <div className="flex justify-start gap-x-2">
<Button <Button
size="MD" size="SM"
theme="primary" theme="primary"
text="Set Custom EDID" text="Set Custom EDID"
onClick={() => handleEDIDChange(customEdidValue)} onClick={() => handleEDIDChange(customEdidValue)}
/> />
<Button <Button
size="MD" size="SM"
theme="light" theme="light"
text="Restore to default" text="Restore to default"
onClick={() => { onClick={() => {