mirror of https://github.com/jetkvm/kvm.git
988 lines
38 KiB
TypeScript
988 lines
38 KiB
TypeScript
import SidebarHeader from "@components/SidebarHeader";
|
|
import {
|
|
useLocalAuthModalStore,
|
|
useSettingsStore,
|
|
useUiStore,
|
|
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";
|
|
import { isOnDevice } from "@/main";
|
|
import PointingFinger from "@/assets/pointing-finger.svg";
|
|
import MouseIcon from "@/assets/mouse-icon.svg";
|
|
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
|
import { SelectMenuBasic } from "../SelectMenuBasic";
|
|
import { SystemVersionInfo } from "@components/UpdateDialog";
|
|
import notifications from "@/notifications";
|
|
import api from "../../api";
|
|
import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
|
|
import { LocalDevice } from "@routes/devices.$id";
|
|
import { useRevalidator } from "react-router-dom";
|
|
import { ShieldCheckIcon } from "@heroicons/react/20/solid";
|
|
|
|
export function SettingsItem({
|
|
title,
|
|
description,
|
|
children,
|
|
className,
|
|
}: {
|
|
title: string;
|
|
description: string | React.ReactNode;
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
name?: string;
|
|
}) {
|
|
return (
|
|
<label className={cx("flex items-center justify-between gap-x-4 rounded", className)}>
|
|
<div className="space-y-0.5">
|
|
<h3 className="text-base font-semibold text-black dark:text-white">{title}</h3>
|
|
<p className="text-sm text-slate-700 dark:text-slate-300">{description}</p>
|
|
</div>
|
|
{children ? <div>{children}</div> : null}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
const defaultEdid =
|
|
"00ffffffffffff0052620188008888881c150103800000780a0dc9a05747982712484c00000001010101010101010101010101010101023a801871382d40582c4500c48e2100001e011d007251d01e206e285500c48e2100001e000000fc00543734392d6648443732300a20000000fd00147801ff1d000a202020202020017b";
|
|
const edids = [
|
|
{
|
|
value: defaultEdid,
|
|
label: "JetKVM Default",
|
|
},
|
|
{
|
|
value:
|
|
"00FFFFFFFFFFFF00047265058A3F6101101E0104A53420783FC125A8554EA0260D5054BFEF80714F8140818081C081008B009500B300283C80A070B023403020360006442100001A000000FD00304C575716010A202020202020000000FC0042323436574C0A202020202020000000FF0054384E4545303033383532320A01F802031CF14F90020304050607011112131415161F2309070783010000011D8018711C1620582C250006442100009E011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E9600064421000018C344806E70B028401720A80406442100001E00000000000000000000000000000000000000000000000000000096",
|
|
label: "Acer B246WL, 1920x1200",
|
|
},
|
|
{
|
|
value:
|
|
"00FFFFFFFFFFFF0006B3872401010101021F010380342078EA6DB5A7564EA0250D5054BF6F00714F8180814081C0A9409500B300D1C0283C80A070B023403020360006442100001A000000FD00314B1E5F19000A202020202020000000FC00504132343851560A2020202020000000FF004D314C4D51533035323135370A014D02032AF14B900504030201111213141F230907078301000065030C001000681A00000101314BE6E2006A023A801871382D40582C450006442100001ECD5F80B072B0374088D0360006442100001C011D007251D01E206E28550006442100001E8C0AD08A20E02D10103E960006442100001800000000000000000000000000DC",
|
|
label: "ASUS PA248QV, 1920x1200",
|
|
},
|
|
{
|
|
value:
|
|
"00FFFFFFFFFFFF0010AC132045393639201E0103803C22782ACD25A3574B9F270D5054A54B00714F8180A9C0D1C00101010101010101023A801871382D40582C450056502100001E000000FF00335335475132330A2020202020000000FC0044454C4C204432373231480A20000000FD00384C1E5311000A202020202020018102031AB14F90050403020716010611121513141F65030C001000023A801871382D40582C450056502100001E011D8018711C1620582C250056502100009E011D007251D01E206E28550056502100001E8C0AD08A20E02D10103E960056502100001800000000000000000000000000000000000000000000000000000000004F",
|
|
label: "DELL D2721H, 1920x1080",
|
|
},
|
|
];
|
|
|
|
export default function SettingsSidebar() {
|
|
const setSidebarView = useUiStore(state => state.setSidebarView);
|
|
const settings = useSettingsStore();
|
|
const [send] = useJsonRpc();
|
|
const [streamQuality, setStreamQuality] = useState("1");
|
|
const [autoUpdate, setAutoUpdate] = useState(true);
|
|
const [devChannel, setDevChannel] = useState(false);
|
|
const [jiggler, setJiggler] = useState(false);
|
|
const [edid, setEdid] = useState<string | null>(null);
|
|
const [customEdidValue, setCustomEdidValue] = useState<string | null>(null);
|
|
|
|
const [isAdopted, setAdopted] = useState(false);
|
|
const [deviceId, setDeviceId] = useState<string | null>(null);
|
|
|
|
const [sshKey, setSSHKey] = useState<string>("");
|
|
const [localDevice, setLocalDevice] = useState<LocalDevice | null>(null);
|
|
|
|
const sidebarRef = useRef<HTMLDivElement>(null);
|
|
|
|
const hideCursor = useSettingsStore(state => state.isCursorHidden);
|
|
const setHideCursor = useSettingsStore(state => state.setCursorVisibility);
|
|
const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
|
|
|
|
const [currentVersions, setCurrentVersions] = useState<{
|
|
appVersion: string;
|
|
systemVersion: string;
|
|
} | null>(null);
|
|
|
|
const [usbEmulationEnabled, setUsbEmulationEnabled] = useState(false);
|
|
const getUsbEmulationState = useCallback(() => {
|
|
send("getUsbEmulationState", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setUsbEmulationEnabled(resp.result as boolean);
|
|
});
|
|
}, [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 => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to ${enabled ? "enable" : "disable"} USB emulation: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
setUsbEmulationEnabled(enabled);
|
|
getUsbEmulationState();
|
|
});
|
|
},
|
|
[getUsbEmulationState, send],
|
|
);
|
|
|
|
const getCloudState = useCallback(() => {
|
|
send("getCloudState", {}, resp => {
|
|
if ("error" in resp) return console.error(resp.error);
|
|
const cloudState = resp.result as { connected: boolean };
|
|
setAdopted(cloudState.connected);
|
|
});
|
|
}, [send]);
|
|
|
|
const deregisterDevice = async () => {
|
|
send("deregisterDevice", {}, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to de-register device: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
getCloudState();
|
|
return;
|
|
});
|
|
};
|
|
|
|
const handleStreamQualityChange = (factor: string) => {
|
|
send("setStreamQualityFactor", { factor: Number(factor) }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
setStreamQuality(factor);
|
|
});
|
|
};
|
|
|
|
const handleAutoUpdateChange = (enabled: boolean) => {
|
|
send("setAutoUpdateState", { enabled }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to set auto-update: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
setAutoUpdate(enabled);
|
|
});
|
|
};
|
|
|
|
const handleDevChannelChange = (enabled: boolean) => {
|
|
send("setDevChannelState", { enabled }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
setDevChannel(enabled);
|
|
});
|
|
};
|
|
|
|
const handleJigglerChange = (enabled: boolean) => {
|
|
send("setJigglerState", { enabled }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
setJiggler(enabled);
|
|
});
|
|
};
|
|
|
|
const handleEDIDChange = (newEdid: string) => {
|
|
send("setEDID", { edid: newEdid }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
|
|
return;
|
|
}
|
|
|
|
// Update the EDID value in the UI
|
|
setEdid(newEdid);
|
|
});
|
|
};
|
|
|
|
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);
|
|
};
|
|
|
|
const handleDevModeChange = useCallback(
|
|
(developerMode: boolean) => {
|
|
send("setDevModeState", { enabled: developerMode }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to set dev mode: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
setDeveloperMode(developerMode);
|
|
setTimeout(() => {
|
|
sidebarRef.current?.scrollTo({ top: 5000, behavior: "smooth" });
|
|
}, 0);
|
|
});
|
|
},
|
|
[send, setDeveloperMode],
|
|
);
|
|
|
|
const handleUpdateSSHKey = useCallback(() => {
|
|
send("setSSHKeyState", { sshKey }, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to update SSH key: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
notifications.success("SSH key updated successfully");
|
|
});
|
|
}, [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) {
|
|
setModalView("updating");
|
|
setIsUpdateDialogOpen(true);
|
|
} else {
|
|
setModalView("loading");
|
|
setIsUpdateDialogOpen(true);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
getCloudState();
|
|
|
|
send("getDeviceID", {}, async resp => {
|
|
if ("error" in resp) return console.error(resp.error);
|
|
setDeviceId(resp.result as string);
|
|
});
|
|
|
|
send("getJigglerState", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setJiggler(resp.result as boolean);
|
|
});
|
|
|
|
send("getAutoUpdateState", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setAutoUpdate(resp.result as boolean);
|
|
});
|
|
|
|
send("getDevChannelState", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setDevChannel(resp.result as boolean);
|
|
});
|
|
|
|
send("getStreamQualityFactor", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setStreamQuality(String(resp.result));
|
|
});
|
|
|
|
send("getEDID", {}, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(`Failed to get EDID: ${resp.error.data || "Unknown error"}`);
|
|
return;
|
|
}
|
|
|
|
const receivedEdid = resp.result as string;
|
|
|
|
const matchingEdid = edids.find(
|
|
x => x.value.toLowerCase() === receivedEdid.toLowerCase(),
|
|
);
|
|
|
|
if (matchingEdid) {
|
|
// EDID is stored in uppercase in the UI
|
|
setEdid(matchingEdid.value.toUpperCase());
|
|
// Reset custom EDID value
|
|
setCustomEdidValue(null);
|
|
} else {
|
|
setEdid("custom");
|
|
setCustomEdidValue(receivedEdid);
|
|
}
|
|
});
|
|
|
|
send("getDevModeState", {}, resp => {
|
|
if ("error" in resp) return;
|
|
const result = resp.result as { enabled: boolean };
|
|
setDeveloperMode(result.enabled);
|
|
});
|
|
|
|
send("getSSHKeyState", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setSSHKey(resp.result as string);
|
|
});
|
|
|
|
send("getUpdateStatus", {}, resp => {
|
|
if ("error" in resp) return;
|
|
const result = resp.result as SystemVersionInfo;
|
|
setCurrentVersions({
|
|
appVersion: result.local.appVersion,
|
|
systemVersion: result.local.systemVersion,
|
|
});
|
|
});
|
|
|
|
send("getUsbEmulationState", {}, resp => {
|
|
if ("error" in resp) return;
|
|
setUsbEmulationEnabled(resp.result as boolean);
|
|
});
|
|
}, [getCloudState, send, setDeveloperMode, setHideCursor, setJiggler]);
|
|
|
|
const getDevice = useCallback(async () => {
|
|
try {
|
|
const status = await api
|
|
.GET(`${import.meta.env.VITE_SIGNAL_API}/device`)
|
|
.then(res => res.json() as Promise<LocalDevice>);
|
|
setLocalDevice(status);
|
|
} catch (error) {
|
|
notifications.error("Failed to get authentication status");
|
|
}
|
|
}, []);
|
|
|
|
const { setModalView: setLocalAuthModalView } = useLocalAuthModalStore();
|
|
const [isLocalAuthDialogOpen, setIsLocalAuthDialogOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isOnDevice) getDevice();
|
|
}, [getDevice]);
|
|
|
|
useEffect(() => {
|
|
if (!isOnDevice) return;
|
|
// Refresh device status when the local auth dialog is closed
|
|
if (!isLocalAuthDialogOpen) {
|
|
getDevice();
|
|
}
|
|
}, [getDevice, isLocalAuthDialogOpen]);
|
|
|
|
const revalidator = useRevalidator();
|
|
|
|
const [currentTheme, setCurrentTheme] = useState(() => {
|
|
return localStorage.theme || "system";
|
|
});
|
|
|
|
const handleThemeChange = useCallback((value: string) => {
|
|
const root = document.documentElement;
|
|
|
|
if (value === "system") {
|
|
localStorage.removeItem("theme");
|
|
// Check system preference
|
|
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
|
|
? "dark"
|
|
: "light";
|
|
root.classList.remove("light", "dark");
|
|
root.classList.add(systemTheme);
|
|
} else {
|
|
localStorage.theme = value;
|
|
root.classList.remove("light", "dark");
|
|
root.classList.add(value);
|
|
}
|
|
}, []);
|
|
|
|
const handleResetConfig = useCallback(() => {
|
|
send("resetConfig", {}, resp => {
|
|
if ("error" in resp) {
|
|
notifications.error(
|
|
`Failed to reset configuration: ${resp.error.data || "Unknown error"}`,
|
|
);
|
|
return;
|
|
}
|
|
notifications.success("Configuration reset to default successfully");
|
|
});
|
|
}, [send]);
|
|
|
|
return (
|
|
<div
|
|
className="grid h-full shadow-sm grid-rows-headerBody"
|
|
// Prevent the keyboard entries from propagating to the document where they are listened for and sent to the KVM
|
|
onKeyDown={e => e.stopPropagation()}
|
|
onKeyUp={e => e.stopPropagation()}
|
|
>
|
|
<SidebarHeader title="Settings" setSidebarView={setSidebarView} />
|
|
<div
|
|
className="h-full px-4 py-2 space-y-4 overflow-y-scroll bg-white dark:bg-slate-900"
|
|
ref={sidebarRef}
|
|
>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between mt-2 gap-x-2">
|
|
<SettingsItem
|
|
title="Check for Updates"
|
|
description={
|
|
currentVersions ? (
|
|
<>
|
|
App: {currentVersions.appVersion}
|
|
<br />
|
|
System: {currentVersions.systemVersion}
|
|
</>
|
|
) : (
|
|
"Loading current versions..."
|
|
)
|
|
}
|
|
/>
|
|
<div>
|
|
<Button
|
|
size="SM"
|
|
theme="light"
|
|
text="Check for Updates"
|
|
onClick={handleCheckForUpdates}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
|
<SectionHeader
|
|
title="Mouse"
|
|
description="Customize mouse behavior and interaction settings"
|
|
/>
|
|
|
|
<div className="space-y-4">
|
|
<SettingsItem
|
|
title="Hide Cursor"
|
|
description="Hide the cursor when sending mouse movements"
|
|
>
|
|
<Checkbox
|
|
checked={hideCursor}
|
|
onChange={e => {
|
|
setHideCursor(e.target.checked);
|
|
}}
|
|
/>
|
|
</SettingsItem>
|
|
<SettingsItem
|
|
title="Jiggler"
|
|
description="Simulate movement of a computer mouse. Prevents sleep mode, standby mode or the screensaver from activating"
|
|
>
|
|
<Checkbox
|
|
checked={jiggler}
|
|
onChange={e => {
|
|
handleJigglerChange(e.target.checked);
|
|
}}
|
|
/>
|
|
</SettingsItem>
|
|
<div className="space-y-4">
|
|
<SettingsItem title="Modes" description="Choose the mouse input mode" />
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
className="block group grow"
|
|
onClick={() => console.log("Absolute mouse mode clicked")}
|
|
>
|
|
<GridCard>
|
|
<div className="flex items-center px-4 py-3 group gap-x-4">
|
|
<img
|
|
className="w-6 shrink-0"
|
|
src={PointingFinger}
|
|
alt="Finger touching a screen"
|
|
/>
|
|
<div className="flex items-center justify-between grow">
|
|
<div className="text-left">
|
|
<h3 className="text-sm font-semibold text-black dark:text-white">
|
|
Absolute
|
|
</h3>
|
|
<p className="text-xs leading-none text-slate-800 dark:text-slate-300">
|
|
Most convenient
|
|
</p>
|
|
</div>
|
|
<CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" />
|
|
</div>
|
|
</div>
|
|
</GridCard>
|
|
</button>
|
|
<button
|
|
className="block opacity-50 cursor-not-allowed group grow"
|
|
disabled
|
|
>
|
|
<GridCard>
|
|
<div className="flex items-center px-4 py-3 gap-x-4">
|
|
<img className="w-6 shrink-0" src={MouseIcon} alt="Mouse icon" />
|
|
<div className="flex items-center justify-between grow">
|
|
<div className="text-left">
|
|
<h3 className="text-sm font-semibold text-black dark:text-white">
|
|
Relative
|
|
</h3>
|
|
<p className="text-xs leading-none text-slate-800 dark:text-slate-300">
|
|
Coming soon
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</GridCard>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
|
<div className="pb-2 space-y-4">
|
|
<SectionHeader
|
|
title="Video"
|
|
description="Configure display settings and EDID for optimal compatibility"
|
|
/>
|
|
<div className="space-y-4">
|
|
<SettingsItem
|
|
title="Stream Quality"
|
|
description="Adjust the quality of the video stream"
|
|
>
|
|
<SelectMenuBasic
|
|
size="SM"
|
|
label=""
|
|
value={streamQuality}
|
|
options={[
|
|
{ value: "1", label: "High" },
|
|
{ value: "0.5", label: "Medium" },
|
|
{ value: "0.1", label: "Low" },
|
|
]}
|
|
onChange={e => handleStreamQualityChange(e.target.value)}
|
|
/>
|
|
</SettingsItem>
|
|
<SettingsItem
|
|
title="EDID"
|
|
description="Adjust the EDID settings for the display"
|
|
>
|
|
<SelectMenuBasic
|
|
size="SM"
|
|
label=""
|
|
fullWidth
|
|
value={customEdidValue ? "custom" : edid || "asd"}
|
|
onChange={e => {
|
|
if (e.target.value === "custom") {
|
|
setEdid("custom");
|
|
setCustomEdidValue("");
|
|
} else {
|
|
handleEDIDChange(e.target.value as string);
|
|
}
|
|
}}
|
|
options={[...edids, { value: "custom", label: "Custom" }]}
|
|
/>
|
|
</SettingsItem>
|
|
{customEdidValue !== null && (
|
|
<>
|
|
<SettingsItem
|
|
title="Custom EDID"
|
|
description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments."
|
|
/>
|
|
<TextAreaWithLabel
|
|
label="EDID File"
|
|
placeholder="00F..."
|
|
rows={3}
|
|
value={customEdidValue}
|
|
onChange={e => setCustomEdidValue(e.target.value)}
|
|
/>
|
|
<div className="flex justify-start gap-x-2">
|
|
<Button
|
|
size="MD"
|
|
theme="primary"
|
|
text="Set Custom EDID"
|
|
onClick={() => handleEDIDChange(customEdidValue)}
|
|
/>
|
|
<Button
|
|
size="MD"
|
|
theme="light"
|
|
text="Restore to default"
|
|
onClick={() => {
|
|
setCustomEdidValue(null);
|
|
handleEDIDChange(defaultEdid);
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{isOnDevice && (
|
|
<>
|
|
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
|
<div className="pb-4 space-y-4">
|
|
<SectionHeader
|
|
title="JetKVM Cloud"
|
|
description="Connect your device to the cloud for secure remote access and management"
|
|
/>
|
|
|
|
<GridCard>
|
|
<div className="flex items-start p-4 gap-x-4">
|
|
<ShieldCheckIcon className="w-8 h-8 mt-1 text-blue-600 shrink-0 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="space-y-1 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" />
|
|
|
|
<div>
|
|
<LinkButton
|
|
to="https://jetkvm.com/docs/networking/remote-access"
|
|
size="SM"
|
|
theme="light"
|
|
text="Learn about our cloud security"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</GridCard>
|
|
|
|
{!isAdopted ? (
|
|
<div>
|
|
<LinkButton
|
|
to={
|
|
import.meta.env.VITE_CLOUD_APP +
|
|
"/signup?deviceId=" +
|
|
deviceId +
|
|
`&returnTo=${location.href}adopt`
|
|
}
|
|
size="MD"
|
|
theme="primary"
|
|
text="Adopt KVM to Cloud account"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div className="space-y-2">
|
|
<p className="text-sm text-slate-600 dark:text-slate-300">
|
|
Your device is adopted to JetKVM Cloud
|
|
</p>
|
|
<div>
|
|
<Button
|
|
size="MD"
|
|
theme="light"
|
|
text="De-register from Cloud"
|
|
className="text-red-600"
|
|
onClick={() => {
|
|
if (deviceId) {
|
|
if (
|
|
window.confirm(
|
|
"Are you sure you want to de-register this device?",
|
|
)
|
|
) {
|
|
deregisterDevice();
|
|
}
|
|
} else {
|
|
notifications.error("No device ID available");
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
|
{isOnDevice ? (
|
|
<>
|
|
<div className="pb-2 space-y-4">
|
|
<SectionHeader
|
|
title="Local Access"
|
|
description="Manage the mode of local access to the device"
|
|
/>
|
|
|
|
<div className="space-y-4">
|
|
<SettingsItem
|
|
title="Authentication Mode"
|
|
description={`Current mode: ${localDevice?.authMode === "password" ? "Password protected" : "No password"}`}
|
|
>
|
|
{localDevice?.authMode === "password" ? (
|
|
<Button
|
|
size="SM"
|
|
theme="light"
|
|
text="Disable Protection"
|
|
onClick={() => {
|
|
setLocalAuthModalView("deletePassword");
|
|
setIsLocalAuthDialogOpen(true);
|
|
}}
|
|
/>
|
|
) : (
|
|
<Button
|
|
size="SM"
|
|
theme="light"
|
|
text="Enable Password"
|
|
onClick={() => {
|
|
setLocalAuthModalView("createPassword");
|
|
setIsLocalAuthDialogOpen(true);
|
|
}}
|
|
/>
|
|
)}
|
|
</SettingsItem>
|
|
|
|
{localDevice?.authMode === "password" && (
|
|
<SettingsItem
|
|
title="Change Password"
|
|
description="Update your device access password"
|
|
>
|
|
<Button
|
|
size="SM"
|
|
theme="light"
|
|
text="Change Password"
|
|
onClick={() => {
|
|
setLocalAuthModalView("updatePassword");
|
|
setIsLocalAuthDialogOpen(true);
|
|
}}
|
|
/>
|
|
</SettingsItem>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
|
</>
|
|
) : null}
|
|
<div className="pb-2 space-y-4">
|
|
<SectionHeader
|
|
title="Updates"
|
|
description="Manage software updates and version information"
|
|
/>
|
|
|
|
<div className="space-y-4">
|
|
<SettingsItem
|
|
title="Auto Update"
|
|
description="Automatically update the device to the latest version"
|
|
>
|
|
<Checkbox
|
|
checked={autoUpdate}
|
|
onChange={e => {
|
|
handleAutoUpdateChange(e.target.checked);
|
|
}}
|
|
/>
|
|
</SettingsItem>
|
|
<SettingsItem
|
|
title="Dev Channel Updates"
|
|
description="Receive early updates from the development channel"
|
|
>
|
|
<Checkbox
|
|
checked={devChannel}
|
|
onChange={e => {
|
|
handleDevChannelChange(e.target.checked);
|
|
}}
|
|
/>
|
|
</SettingsItem>
|
|
</div>
|
|
</div>
|
|
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
|
|
|
<SectionHeader
|
|
title="Appearance"
|
|
description="Customize the look and feel of the application"
|
|
/>
|
|
<SettingsItem title="Theme" description="Choose your preferred color theme">
|
|
<SelectMenuBasic
|
|
size="SM"
|
|
label=""
|
|
value={currentTheme}
|
|
options={[
|
|
{ value: "system", label: "System" },
|
|
{ value: "light", label: "Light" },
|
|
{ value: "dark", label: "Dark" },
|
|
]}
|
|
onChange={e => {
|
|
setCurrentTheme(e.target.value);
|
|
handleThemeChange(e.target.value);
|
|
}}
|
|
/>
|
|
</SettingsItem>
|
|
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
|
<div className="pb-2 space-y-4">
|
|
<SectionHeader
|
|
title="Advanced"
|
|
description="Access additional settings for troubleshooting and customization"
|
|
/>
|
|
|
|
<div className="pb-4 space-y-4">
|
|
<SettingsItem
|
|
title="Developer Mode"
|
|
description="Enable advanced features for developers"
|
|
>
|
|
<Checkbox
|
|
checked={settings.developerMode}
|
|
onChange={e => handleDevModeChange(e.target.checked)}
|
|
/>
|
|
</SettingsItem>
|
|
|
|
{settings.developerMode && (
|
|
<div className="space-y-4">
|
|
<TextAreaWithLabel
|
|
label="SSH Public Key"
|
|
value={sshKey || ""}
|
|
rows={3}
|
|
onChange={e => handleSSHKeyChange(e.target.value)}
|
|
placeholder="Enter your SSH public key"
|
|
/>
|
|
<p className="text-xs text-slate-600 dark:text-slate-400">
|
|
The default SSH user is <strong>root</strong>.
|
|
</p>
|
|
<div className="flex items-center gap-x-2">
|
|
<Button
|
|
size="SM"
|
|
theme="primary"
|
|
text="Update SSH Key"
|
|
onClick={handleUpdateSSHKey}
|
|
/>
|
|
</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"
|
|
>
|
|
<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>
|
|
<LocalAuthPasswordDialog
|
|
open={isLocalAuthDialogOpen}
|
|
setOpen={x => {
|
|
// Revalidate the current route to refresh the local device status and dependent UI components
|
|
revalidator.revalidate();
|
|
setIsLocalAuthDialogOpen(x);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
} |