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

formatting

This commit is contained in:
JackTheRooster 2025-03-04 20:47:52 -06:00
parent 4f1ec38af1
commit dade7ca564
1 changed files with 133 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -729,23 +729,23 @@ export default function SettingsSidebar() {
</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>
@ -759,8 +759,8 @@ export default function SettingsSidebar() {
<> <>
<div className="pb-2 space-y-4"> <div className="pb-2 space-y-4">
<SectionHeader <SectionHeader
title="Local Access" title="Local Access"
description="Manage the mode of local access to the device" description="Manage the mode of local access to the device"
/> />
<div className="space-y-4"> <div className="space-y-4">
@ -780,30 +780,30 @@ export default function SettingsSidebar() {
/> />
) : ( ) : (
<Button <Button
size="SM" size="SM"
theme="light" theme="light"
text="Enable Password" text="Enable Password"
onClick={() => { onClick={() => {
setLocalAuthModalView("createPassword"); setLocalAuthModalView("createPassword");
setIsLocalAuthDialogOpen(true); setIsLocalAuthDialogOpen(true);
}} }}
/> />
)} )}
</SettingsItem> </SettingsItem>
{localDevice?.authMode === "password" && ( {localDevice?.authMode === "password" && (
<SettingsItem <SettingsItem
title="Change Password" title="Change Password"
description="Update your device access password" description="Update your device access password"
> >
<Button <Button
size="SM" size="SM"
theme="light" theme="light"
text="Change Password" text="Change Password"
onClick={() => { onClick={() => {
setLocalAuthModalView("updatePassword"); setLocalAuthModalView("updatePassword");
setIsLocalAuthDialogOpen(true); setIsLocalAuthDialogOpen(true);
}} }}
/> />
</SettingsItem> </SettingsItem>
)} )}
@ -814,31 +814,31 @@ export default function SettingsSidebar() {
) : 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>
@ -846,33 +846,33 @@ export default function SettingsSidebar() {
<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"
description={`DNS Name: ${nameConfig.dns}`} description={`DNS Name: ${nameConfig.dns}`}
defaultValue={nameConfig.name} defaultValue={nameConfig.name}
onChange={e => handleDeviceNameChange(e.target.value)} onChange={e => handleDeviceNameChange(e.target.value)}
/> />
</SettingsItem> </SettingsItem>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
@ -892,40 +892,40 @@ export default function SettingsSidebar() {
</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" <SettingsItem title="Turn off Display After"
@ -955,39 +955,39 @@ export default function SettingsSidebar() {
<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"> <p className="text-xs text-slate-600 dark:text-slate-400">
The default SSH user is <strong>root</strong>. The default SSH user is <strong>root</strong>.
</p> </p>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Button <Button
size="SM" size="SM"
theme="primary" theme="primary"
text="Update SSH Key" text="Update SSH Key"
onClick={handleUpdateSSHKey} onClick={handleUpdateSSHKey}
/> />
</div> </div>
</div> </div>
@ -1007,18 +1007,18 @@ export default function SettingsSidebar() {
{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>
</> </>
@ -1029,13 +1029,13 @@ export default function SettingsSidebar() {
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>
)} )}
@ -1043,11 +1043,11 @@ export default function SettingsSidebar() {
</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>