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

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},

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 };
@ -470,7 +472,7 @@ export default function SettingsSidebar() {
currentVersions ? ( currentVersions ? (
<> <>
App: {currentVersions.appVersion} App: {currentVersions.appVersion}
<br /> <br/>
System: {currentVersions.systemVersion} System: {currentVersions.systemVersion}
</> </>
) : ( ) : (
@ -487,7 +489,7 @@ export default function SettingsSidebar() {
/> />
</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"
@ -517,7 +519,7 @@ export default function SettingsSidebar() {
/> />
</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"
@ -539,7 +541,7 @@ 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>
@ -550,7 +552,7 @@ export default function SettingsSidebar() {
> >
<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,7 +570,7 @@ 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"
@ -584,9 +586,9 @@ export default function SettingsSidebar() {
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)}
/> />
@ -608,7 +610,7 @@ export default function SettingsSidebar() {
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 && (
@ -647,7 +649,7 @@ export default function SettingsSidebar() {
</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"
@ -656,7 +658,7 @@ export default function SettingsSidebar() {
<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">
@ -684,7 +686,7 @@ export default function SettingsSidebar() {
. .
</div> </div>
</div> </div>
<hr className="block w-full dark:border-slate-600" /> <hr className="block w-full dark:border-slate-600"/>
<div> <div>
<LinkButton <LinkButton
@ -745,7 +747,7 @@ export default function SettingsSidebar() {
</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 ? ( {isOnDevice ? (
<> <>
<div className="pb-2 space-y-4"> <div className="pb-2 space-y-4">
@ -800,7 +802,7 @@ export default function SettingsSidebar() {
)} )}
</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"/>
</> </>
) : null} ) : null}
<div className="pb-2 space-y-4"> <div className="pb-2 space-y-4">
@ -834,7 +836,7 @@ export default function SettingsSidebar() {
</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"
@ -846,9 +848,9 @@ export default function SettingsSidebar() {
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);
@ -865,7 +867,15 @@ export default function SettingsSidebar() {
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"
@ -878,10 +888,10 @@ export default function SettingsSidebar() {
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)
@ -897,12 +907,12 @@ export default function SettingsSidebar() {
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)
@ -910,17 +920,18 @@ export default function SettingsSidebar() {
}} }}
/> />
</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"
description="Set how long to wait before turning off the display">
<SelectMenuBasic <SelectMenuBasic
size="SM" size="SM"
label="" label=""
value={settings.backlightSettings.off_after.toString()} value={settings.backlightSettings.off_after.toString()}
options={[ options={[
{ value: "0", label: "Never" }, {value: "0", label: "Never"},
{ 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.off_after = parseInt(e.target.value) settings.backlightSettings.off_after = parseInt(e.target.value)
@ -933,7 +944,7 @@ export default function SettingsSidebar() {
<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"