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 21:10:15 -06:00
parent dade7ca564
commit 95d9a8edb0
1 changed files with 121 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -468,76 +468,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">
@ -554,8 +554,8 @@ export default function SettingsSidebar() {
</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">
@ -580,74 +580,74 @@ 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="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 <TextAreaWithLabel
label="EDID File" label="EDID File"
placeholder="00F..." placeholder="00F..."
rows={3} rows={3}
value={customEdidValue} value={customEdidValue}
onChange={e => setCustomEdidValue(e.target.value)} onChange={e => setCustomEdidValue(e.target.value)}
/> />
<div className="flex justify-start gap-x-2"> <div className="flex justify-start gap-x-2">
<Button <Button
size="MD" size="MD"
theme="primary" theme="primary"
text="Set Custom EDID" text="Set Custom EDID"
onClick={() => handleEDIDChange(customEdidValue)} onClick={() => handleEDIDChange(customEdidValue)}
/> />
<Button <Button
size="MD" size="MD"
theme="light" theme="light"
text="Restore to default" text="Restore to default"
onClick={() => { onClick={() => {
setCustomEdidValue(null); setCustomEdidValue(null);
handleEDIDChange(defaultEdid); handleEDIDChange(defaultEdid);
}} }}
/> />
</div> </div>
</> </>
@ -659,8 +659,8 @@ 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-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>
@ -683,10 +683,10 @@ export default function SettingsSidebar() {
<div className="text-xs text-slate-700 dark:text-slate-300"> <div className="text-xs text-slate-700 dark:text-slate-300">
All cloud components are open-source and available on{" "} All cloud components are open-source and available on{" "}
<a <a
href="https://github.com/jetkvm" href="https://github.com/jetkvm"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400" className="font-medium text-blue-600 hover:text-blue-800 dark:text-blue-500 dark:hover:text-blue-400"
> >
GitHub GitHub
</a> </a>
@ -697,10 +697,10 @@ export default function SettingsSidebar() {
<div> <div>
<LinkButton <LinkButton
to="https://jetkvm.com/docs/networking/remote-access" to="https://jetkvm.com/docs/networking/remote-access"
size="SM" size="SM"
theme="light" theme="light"
text="Learn about our cloud security" text="Learn about our cloud security"
/> />
</div> </div>
</div> </div>
@ -710,15 +710,15 @@ export default function SettingsSidebar() {
{!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="MD"
theme="primary" theme="primary"
text="Adopt KVM to Cloud account" text="Adopt KVM to Cloud account"
/> />
</div> </div>
) : ( ) : (
@ -765,18 +765,18 @@ export default function SettingsSidebar() {
<div className="space-y-4"> <div className="space-y-4">
<SettingsItem <SettingsItem
title="Authentication Mode" title="Authentication Mode"
description={`Current mode: ${localDevice?.authMode === "password" ? "Password protected" : "No password"}`} description={`Current mode: ${localDevice?.authMode === "password" ? "Password protected" : "No password"}`}
> >
{localDevice?.authMode === "password" ? ( {localDevice?.authMode === "password" ? (
<Button <Button
size="SM" size="SM"
theme="light" theme="light"
text="Disable Protection" text="Disable Protection"
onClick={() => { onClick={() => {
setLocalAuthModalView("deletePassword"); setLocalAuthModalView("deletePassword");
setIsLocalAuthDialogOpen(true); setIsLocalAuthDialogOpen(true);
}} }}
/> />
) : ( ) : (
<Button <Button
@ -993,14 +993,14 @@ export default function SettingsSidebar() {
</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>
@ -1025,8 +1025,8 @@ export default function SettingsSidebar() {
)} )}
{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"