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

added slug dependency 

device name slugified to dns name when set
This commit is contained in:
JackTheRooster 2025-03-02 21:41:05 -06:00
parent fa01d7c828
commit 10af116404
2 changed files with 416 additions and 399 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
jsonrpc.go
View File

@ -313,6 +313,11 @@ func rpcSetDeviceName(deviceName string) error {
return nil return nil
} }
func rpcGetDNSName() (string, error) {
LoadConfig()
return config.DNSName, nil
}
func rpcGetDevModeState() (DevModeState, error) { func rpcGetDevModeState() (DevModeState, error) {
devModeEnabled := false devModeEnabled := false
if _, err := os.Stat(devModeFile); err != nil { if _, err := os.Stat(devModeFile); err != nil {
@ -777,6 +782,7 @@ var rpcHandlers = map[string]RPCHandler{
"tryUpdate": {Func: rpcTryUpdate}, "tryUpdate": {Func: rpcTryUpdate},
"getDeviceName": {Func: rpcGetDeviceName}, "getDeviceName": {Func: rpcGetDeviceName},
"setDeviceName": {Func: rpcSetDeviceName, Params: []string{"deviceName"}}, "setDeviceName": {Func: rpcSetDeviceName, Params: []string{"deviceName"}},
"getDNSName": {Func: rpcGetDNSName},
"getDevModeState": {Func: rpcGetDevModeState}, "getDevModeState": {Func: rpcGetDevModeState},
"setDevModeState": {Func: rpcSetDevModeState, Params: []string{"enabled"}}, "setDevModeState": {Func: rpcSetDevModeState, Params: []string{"enabled"}},
"getSSHKeyState": {Func: rpcGetSSHKeyState}, "getSSHKeyState": {Func: rpcGetSSHKeyState},

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

@ -362,6 +362,8 @@ export default function SettingsSidebar() {
document.title = deviceName; document.title = deviceName;
}); });
send("getDevModeState", {}, resp => { send("getDevModeState", {}, resp => {
if ("error" in resp) return; if ("error" in resp) return;
const result = resp.result as { enabled: boolean }; const result = resp.result as { enabled: boolean };
@ -459,76 +461,76 @@ export default function SettingsSidebar() {
> >
<SidebarHeader title="Settings" setSidebarView={setSidebarView} /> <SidebarHeader title="Settings" setSidebarView={setSidebarView} />
<div <div
className="h-full px-4 py-2 space-y-4 overflow-y-scroll bg-white dark:bg-slate-900" className="h-full px-4 py-2 space-y-4 overflow-y-scroll bg-white dark:bg-slate-900"
ref={sidebarRef} ref={sidebarRef}
> >
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center justify-between mt-2 gap-x-2"> <div className="flex items-center justify-between mt-2 gap-x-2">
<SettingsItem <SettingsItem
title="Check for Updates" title="Check for Updates"
description={ description={
currentVersions ? ( currentVersions ? (
<> <>
App: {currentVersions.appVersion} App: {currentVersions.appVersion}
<br /> <br/>
System: {currentVersions.systemVersion} System: {currentVersions.systemVersion}
</> </>
) : ( ) : (
"Loading current versions..." "Loading current versions..."
) )
} }
/> />
<div> <div>
<Button <Button
size="SM" size="SM"
theme="light" theme="light"
text="Check for Updates" text="Check for Updates"
onClick={handleCheckForUpdates} onClick={handleCheckForUpdates}
/> />
</div> </div>
</div> </div>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
<SectionHeader <SectionHeader
title="Mouse" title="Mouse"
description="Customize mouse behavior and interaction settings" description="Customize mouse behavior and interaction settings"
/> />
<div className="space-y-4"> <div className="space-y-4">
<SettingsItem <SettingsItem
title="Hide Cursor" title="Hide Cursor"
description="Hide the cursor when sending mouse movements" description="Hide the cursor when sending mouse movements"
> >
<Checkbox <Checkbox
checked={hideCursor} checked={hideCursor}
onChange={e => { onChange={e => {
setHideCursor(e.target.checked); setHideCursor(e.target.checked);
}} }}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem <SettingsItem
title="Jiggler" title="Jiggler"
description="Simulate movement of a computer mouse. Prevents sleep mode, standby mode or the screensaver from activating" description="Simulate movement of a computer mouse. Prevents sleep mode, standby mode or the screensaver from activating"
> >
<Checkbox <Checkbox
checked={jiggler} checked={jiggler}
onChange={e => { onChange={e => {
handleJigglerChange(e.target.checked); handleJigglerChange(e.target.checked);
}} }}
/> />
</SettingsItem> </SettingsItem>
<div className="space-y-4"> <div className="space-y-4">
<SettingsItem title="Modes" description="Choose the mouse input mode" /> <SettingsItem title="Modes" description="Choose the mouse input mode"/>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<button <button
className="block group grow" className="block group grow"
onClick={() => console.log("Absolute mouse mode clicked")} onClick={() => console.log("Absolute mouse mode clicked")}
> >
<GridCard> <GridCard>
<div className="flex items-center px-4 py-3 group gap-x-4"> <div className="flex items-center px-4 py-3 group gap-x-4">
<img <img
className="w-6 shrink-0 dark:invert" className="w-6 shrink-0 dark:invert"
src={PointingFinger} src={PointingFinger}
alt="Finger touching a screen" alt="Finger touching a screen"
/> />
<div className="flex items-center justify-between grow"> <div className="flex items-center justify-between grow">
<div className="text-left"> <div className="text-left">
@ -539,18 +541,18 @@ export default function SettingsSidebar() {
Most convenient Most convenient
</p> </p>
</div> </div>
<CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" /> <CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500"/>
</div> </div>
</div> </div>
</GridCard> </GridCard>
</button> </button>
<button <button
className="block opacity-50 cursor-not-allowed group grow" className="block opacity-50 cursor-not-allowed group grow"
disabled disabled
> >
<GridCard> <GridCard>
<div className="flex items-center px-4 py-3 gap-x-4"> <div className="flex items-center px-4 py-3 gap-x-4">
<img className="w-6 shrink-0 dark:invert" src={MouseIcon} alt="Mouse icon" /> <img className="w-6 shrink-0 dark:invert" src={MouseIcon} alt="Mouse icon"/>
<div className="flex items-center justify-between grow"> <div className="flex items-center justify-between grow">
<div className="text-left"> <div className="text-left">
<h3 className="text-sm font-semibold text-black dark:text-white"> <h3 className="text-sm font-semibold text-black dark:text-white">
@ -568,467 +570,476 @@ export default function SettingsSidebar() {
</div> </div>
</div> </div>
</div> </div>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
<div className="pb-2 space-y-4"> <div className="pb-2 space-y-4">
<SectionHeader <SectionHeader
title="Video" title="Video"
description="Configure display settings and EDID for optimal compatibility" description="Configure display settings and EDID for optimal compatibility"
/> />
<div className="space-y-4"> <div className="space-y-4">
<SettingsItem <SettingsItem
title="Stream Quality" title="Stream Quality"
description="Adjust the quality of the video stream" description="Adjust the quality of the video stream"
> >
<SelectMenuBasic <SelectMenuBasic
size="SM" size="SM"
label="" label=""
value={streamQuality} value={streamQuality}
options={[ options={[
{ value: "1", label: "High" }, {value: "1", label: "High"},
{ value: "0.5", label: "Medium" }, {value: "0.5", label: "Medium"},
{ value: "0.1", label: "Low" }, {value: "0.1", label: "Low"},
]} ]}
onChange={e => handleStreamQualityChange(e.target.value)} onChange={e => handleStreamQualityChange(e.target.value)}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem <SettingsItem
title="EDID" title="EDID"
description="Adjust the EDID settings for the display" description="Adjust the EDID settings for the display"
> >
<SelectMenuBasic <SelectMenuBasic
size="SM" size="SM"
label="" label=""
fullWidth fullWidth
value={customEdidValue ? "custom" : edid || "asd"} value={customEdidValue ? "custom" : edid || "asd"}
onChange={e => { onChange={e => {
if (e.target.value === "custom") { if (e.target.value === "custom") {
setEdid("custom"); setEdid("custom");
setCustomEdidValue(""); setCustomEdidValue("");
} else { } else {
handleEDIDChange(e.target.value as string); handleEDIDChange(e.target.value as string);
} }
}} }}
options={[...edids, { value: "custom", label: "Custom" }]} options={[...edids, {value: "custom", label: "Custom"}]}
/> />
</SettingsItem> </SettingsItem>
{customEdidValue !== null && ( {customEdidValue !== null && (
<> <>
<SettingsItem <SettingsItem
title="Custom EDID" title="Custom EDID"
description="EDID details video mode compatibility. Default settings works in most cases, but unique UEFI/BIOS might need adjustments." 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 <TextAreaWithLabel
size="MD" label="EDID File"
theme="light" placeholder="00F..."
text="Restore to default" rows={3}
onClick={() => { value={customEdidValue}
setCustomEdidValue(null); onChange={e => setCustomEdidValue(e.target.value)}
handleEDIDChange(defaultEdid);
}}
/> />
</div> <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>
</div> </div>
{isOnDevice && ( {isOnDevice && (
<> <>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
<div className="pb-4 space-y-4"> <div className="pb-4 space-y-4">
<SectionHeader <SectionHeader
title="JetKVM Cloud" title="JetKVM Cloud"
description="Connect your device to the cloud for secure remote access and management" description="Connect your device to the cloud for secure remote access and management"
/> />
<GridCard> <GridCard>
<div className="flex items-start p-4 gap-x-4"> <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" /> <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-3">
<div className="space-y-2"> <div className="space-y-2">
<h3 className="text-base font-bold text-slate-900 dark:text-white"> <h3 className="text-base font-bold text-slate-900 dark:text-white">
Cloud Security Cloud Security
</h3> </h3>
<div> <div>
<ul className="space-y-1 text-xs text-slate-700 dark:text-slate-300"> <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>• End-to-end encryption using WebRTC (DTLS and SRTP)</li>
<li>• Zero Trust security model</li> <li>• Zero Trust security model</li>
<li>• OIDC (OpenID Connect) authentication</li> <li>• OIDC (OpenID Connect) authentication</li>
<li>• All streams encrypted in transit</li> <li>• All streams encrypted in transit</li>
</ul> </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> </div>
<hr className="block w-full dark:border-slate-600"/>
<div className="text-xs text-slate-700 dark:text-slate-300"> <div>
All cloud components are open-source and available on{" "} <LinkButton
<a to="https://jetkvm.com/docs/networking/remote-access"
href="https://github.com/jetkvm" size="SM"
target="_blank" theme="light"
rel="noopener noreferrer" text="Learn about our cloud security"
className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400" />
>
GitHub
</a>
.
</div> </div>
</div> </div>
<hr className="block w-full dark:border-slate-600" /> </div>
</GridCard>
{!isAdopted ? (
<div> <div>
<LinkButton <LinkButton
to="https://jetkvm.com/docs/networking/remote-access" to={
size="SM" CLOUD_APP +
theme="light" "/signup?deviceId=" +
text="Learn about our cloud security" deviceId +
/> `&returnTo=${location.href}adopt`
</div>
</div>
</div>
</GridCard>
{!isAdopted ? (
<div>
<LinkButton
to={
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");
} }
}} size="MD"
theme="primary"
text="Adopt KVM to Cloud account"
/> />
</div> </div>
</div> ) : (
</div> <div>
)} <div className="space-y-2">
</div> <p className="text-sm text-slate-600 dark:text-slate-300">
</> Your device is adopted to JetKVM Cloud
)} </p>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div>
{isOnDevice ? ( <Button
<> size="MD"
<div className="pb-2 space-y-4"> theme="light"
<SectionHeader text="De-register from Cloud"
title="Local Access" className="text-red-600"
description="Manage the mode of local access to the device" onClick={() => {
/> if (deviceId) {
if (
<div className="space-y-4"> window.confirm(
<SettingsItem "Are you sure you want to de-register this device?",
title="Authentication Mode" )
description={`Current mode: ${localDevice?.authMode === "password" ? "Password protected" : "No password"}`} ) {
> deregisterDevice();
{localDevice?.authMode === "password" ? ( }
<Button } else {
size="SM" notifications.error("No device ID available");
theme="light" }
text="Disable Protection" }}
onClick={() => { />
setLocalAuthModalView("deletePassword"); </div>
setIsLocalAuthDialogOpen(true); </div>
}} </div>
/>
) : (
<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> </>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> )}
</> <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} ) : null}
<div className="pb-2 space-y-4"> <div className="pb-2 space-y-4">
<SectionHeader <SectionHeader
title="Updates" title="Updates"
description="Manage software updates and version information" description="Manage software updates and version information"
/> />
<div className="space-y-4"> <div className="space-y-4">
<SettingsItem <SettingsItem
title="Auto Update" title="Auto Update"
description="Automatically update the device to the latest version" description="Automatically update the device to the latest version"
> >
<Checkbox <Checkbox
checked={autoUpdate} checked={autoUpdate}
onChange={e => { onChange={e => {
handleAutoUpdateChange(e.target.checked); handleAutoUpdateChange(e.target.checked);
}} }}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem <SettingsItem
title="Dev Channel Updates" title="Dev Channel Updates"
description="Receive early updates from the development channel" description="Receive early updates from the development channel"
> >
<Checkbox <Checkbox
checked={devChannel} checked={devChannel}
onChange={e => { onChange={e => {
handleDevChannelChange(e.target.checked); handleDevChannelChange(e.target.checked);
}} }}
/> />
</SettingsItem> </SettingsItem>
</div> </div>
</div> </div>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
<SectionHeader <SectionHeader
title="Appearance" title="Appearance"
description="Customize the look and feel of the application" description="Customize the look and feel of the application"
/> />
<SettingsItem title="Theme" description="Choose your preferred color theme"> <SettingsItem title="Theme" description="Choose your preferred color theme">
<SelectMenuBasic <SelectMenuBasic
size="SM" size="SM"
label="" label=""
value={currentTheme} value={currentTheme}
options={[ options={[
{ value: "system", label: "System" }, {value: "system", label: "System"},
{ value: "light", label: "Light" }, {value: "light", label: "Light"},
{ value: "dark", label: "Dark" }, {value: "dark", label: "Dark"},
]} ]}
onChange={e => { onChange={e => {
setCurrentTheme(e.target.value); setCurrentTheme(e.target.value);
handleThemeChange(e.target.value); handleThemeChange(e.target.value);
}} }}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem title="Device Name" description="Set your device name"> <SettingsItem title="Device Name" description="Set your device name">
<InputFieldWithLabel <InputFieldWithLabel
required required
label="" label=""
placeholder="Enter Device Name" placeholder="Enter Device Name"
defaultValue={settings.deviceName} defaultValue={settings.deviceName}
onChange={e => handleDeviceNameChange(e.target.value)} onChange={e => handleDeviceNameChange(e.target.value)}
/> />
</SettingsItem> </SettingsItem>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="flex items-center gap-x-2">
<Button
size="SM"
theme="primary"
text="Update Device Name"
onClick={handleDeviceNameChange}
/>
</div>
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
<div className="pb-2 space-y-4"> <div className="pb-2 space-y-4">
<SectionHeader <SectionHeader
title="Hardware" title="Hardware"
description="Configure the JetKVM Hardware" description="Configure the JetKVM Hardware"
/> />
</div> </div>
<SettingsItem title="Display Brightness" description="Set the brightness of the display"> <SettingsItem title="Display Brightness" description="Set the brightness of the display">
<SelectMenuBasic <SelectMenuBasic
size="SM" size="SM"
label="" label=""
value={settings.backlightSettings.max_brightness.toString()} value={settings.backlightSettings.max_brightness.toString()}
options={[ options={[
{ value: "0", label: "Off" }, {value: "0", label: "Off"},
{ value: "10", label: "Low" }, {value: "10", label: "Low"},
{ value: "35", label: "Medium" }, {value: "35", label: "Medium"},
{ value: "64", label: "High" }, {value: "64", label: "High"},
]} ]}
onChange={e => { onChange={e => {
settings.backlightSettings.max_brightness = parseInt(e.target.value) settings.backlightSettings.max_brightness = parseInt(e.target.value)
handleBacklightSettingsChange(settings.backlightSettings); handleBacklightSettingsChange(settings.backlightSettings);
}} }}
/> />
</SettingsItem> </SettingsItem>
{settings.backlightSettings.max_brightness != 0 && ( {settings.backlightSettings.max_brightness != 0 && (
<> <>
<SettingsItem title="Dim Display After" description="Set how long to wait before dimming the display"> <SettingsItem title="Dim Display After" description="Set how long to wait before dimming the display">
<SelectMenuBasic <SelectMenuBasic
size="SM" size="SM"
label="" label=""
value={settings.backlightSettings.dim_after.toString()} value={settings.backlightSettings.dim_after.toString()}
options={[ options={[
{ value: "0", label: "Never" }, {value: "0", label: "Never"},
{ value: "60", label: "1 Minute" }, {value: "60", label: "1 Minute"},
{ value: "300", label: "5 Minutes" }, {value: "300", label: "5 Minutes"},
{ value: "600", label: "10 Minutes" }, {value: "600", label: "10 Minutes"},
{ value: "1800", label: "30 Minutes" }, {value: "1800", label: "30 Minutes"},
{ value: "3600", label: "1 Hour" }, {value: "3600", label: "1 Hour"},
]} ]}
onChange={e => { onChange={e => {
settings.backlightSettings.dim_after = parseInt(e.target.value) settings.backlightSettings.dim_after = parseInt(e.target.value)
handleBacklightSettingsChange(settings.backlightSettings); handleBacklightSettingsChange(settings.backlightSettings);
}} }}
/> />
</SettingsItem> </SettingsItem>
<SettingsItem title="Turn off Display After" description="Set how long to wait before turning off the display"> <SettingsItem title="Turn off Display After"
<SelectMenuBasic description="Set how long to wait before turning off the display">
size="SM" <SelectMenuBasic
label="" size="SM"
value={settings.backlightSettings.off_after.toString()} label=""
options={[ value={settings.backlightSettings.off_after.toString()}
{ value: "0", label: "Never" }, options={[
{ value: "300", label: "5 Minutes" }, {value: "0", label: "Never"},
{ value: "600", label: "10 Minutes" }, {value: "300", label: "5 Minutes"},
{ value: "1800", label: "30 Minutes" }, {value: "600", label: "10 Minutes"},
{ value: "3600", label: "1 Hour" }, {value: "1800", label: "30 Minutes"},
]} {value: "3600", label: "1 Hour"},
onChange={e => { ]}
settings.backlightSettings.off_after = parseInt(e.target.value) onChange={e => {
handleBacklightSettingsChange(settings.backlightSettings); settings.backlightSettings.off_after = parseInt(e.target.value)
}} handleBacklightSettingsChange(settings.backlightSettings);
/> }}
</SettingsItem> />
</> </SettingsItem>
</>
)} )}
<p className="text-xs text-slate-600 dark:text-slate-400"> <p className="text-xs text-slate-600 dark:text-slate-400">
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 className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
<div className="pb-2 space-y-4"> <div className="pb-2 space-y-4">
<SectionHeader <SectionHeader
title="Advanced" title="Advanced"
description="Access additional settings for troubleshooting and customization" description="Access additional settings for troubleshooting and customization"
/> />
<div className="pb-4 space-y-4"> <div className="pb-4 space-y-4">
<SettingsItem <SettingsItem
title="Developer Mode" title="Developer Mode"
description="Enable advanced features for developers" description="Enable advanced features for developers"
> >
<Checkbox <Checkbox
checked={settings.developerMode} checked={settings.developerMode}
onChange={e => handleDevModeChange(e.target.checked)} onChange={e => handleDevModeChange(e.target.checked)}
/> />
</SettingsItem> </SettingsItem>
{settings.developerMode && ( {settings.developerMode && (
<div className="space-y-4"> <div className="space-y-4">
<TextAreaWithLabel <TextAreaWithLabel
label="SSH Public Key" label="SSH Public Key"
value={sshKey || ""} value={sshKey || ""}
rows={3} rows={3}
onChange={e => handleSSHKeyChange(e.target.value)} onChange={e => handleSSHKeyChange(e.target.value)}
placeholder="Enter your SSH public key" 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}
/> />
<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> </div>
</div>
)} )}
<SettingsItem <SettingsItem
title="Troubleshooting Mode" title="Troubleshooting Mode"
description="Diagnostic tools and additional controls for troubleshooting and development purposes" description="Diagnostic tools and additional controls for troubleshooting and development purposes"
> >
<Checkbox <Checkbox
defaultChecked={settings.debugMode} defaultChecked={settings.debugMode}
onChange={e => { onChange={e => {
settings.setDebugMode(e.target.checked); settings.setDebugMode(e.target.checked);
}} }}
/> />
</SettingsItem> </SettingsItem>
{settings.debugMode && ( {settings.debugMode && (
<> <>
<SettingsItem <SettingsItem
title="USB Emulation" title="USB Emulation"
description="Control the USB emulation state" description="Control the USB emulation state"
> >
<Button <Button
size="SM" size="SM"
theme="light" theme="light"
text={ text={
usbEmulationEnabled usbEmulationEnabled
? "Disable USB Emulation" ? "Disable USB Emulation"
: "Enable USB Emulation" : "Enable USB Emulation"
} }
onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)} onClick={() => handleUsbEmulationToggle(!usbEmulationEnabled)}
/> />
</SettingsItem> </SettingsItem>
</> </>
)} )}
{settings.debugMode && ( {settings.debugMode && (
<SettingsItem <SettingsItem
title="Reset Configuration" title="Reset Configuration"
description="Reset the configuration file to its default state. This will log you out of the device." description="Reset the configuration file to its default state. This will log you out of the device."
> >
<Button <Button
size="SM" size="SM"
theme="light" theme="light"
text="Reset Config" text="Reset Config"
onClick={() => { onClick={() => {
handleResetConfig(); handleResetConfig();
window.location.reload(); window.location.reload();
}} }}
/> />
</SettingsItem> </SettingsItem>
)} )}
</div> </div>
</div> </div>
</div> </div>
<LocalAuthPasswordDialog <LocalAuthPasswordDialog
open={isLocalAuthDialogOpen} open={isLocalAuthDialogOpen}
setOpen={x => { setOpen={x => {
// Revalidate the current route to refresh the local device status and dependent UI components // Revalidate the current route to refresh the local device status and dependent UI components
revalidator.revalidate(); revalidator.revalidate();
setIsLocalAuthDialogOpen(x); setIsLocalAuthDialogOpen(x);
}} }}
/> />
</div> </div>