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

refactor(ui): Improve device access settings with conditional rendering and loader data handling (#204)

This commit is contained in:
Adam Shiervani 2025-02-27 17:18:56 +01:00 committed by GitHub
parent d49a567a38
commit a4863f6999
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 167 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/src/routes/devices.$id.settings.access._index.tsx
View File

@ -6,7 +6,6 @@ import { CLOUD_APP, DEVICE_API } from "../ui.config";
import api from "../api"; import api from "../api";
import { LocalDevice } from "./devices.$id"; import { LocalDevice } from "./devices.$id";
import { useDeviceUiNavigation } from "../hooks/useAppNavigation"; import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
import { isOnDevice } from "../main";
import { GridCard } from "../components/Card"; import { GridCard } from "../components/Card";
import { ShieldCheckIcon } from "@heroicons/react/24/outline"; import { ShieldCheckIcon } from "@heroicons/react/24/outline";
import notifications from "../notifications"; import notifications from "../notifications";
@ -15,16 +14,21 @@ import { useJsonRpc } from "../hooks/useJsonRpc";
import { InputFieldWithLabel } from "../components/InputField"; import { InputFieldWithLabel } from "../components/InputField";
import { SelectMenuBasic } from "../components/SelectMenuBasic"; import { SelectMenuBasic } from "../components/SelectMenuBasic";
import { SettingsSectionHeader } from "../components/SettingsSectionHeader"; import { SettingsSectionHeader } from "../components/SettingsSectionHeader";
import { isOnDevice } from "../main";
export const loader = async () => { export const loader = async () => {
if (isOnDevice) {
const status = await api const status = await api
.GET(`${DEVICE_API}/device`) .GET(`${DEVICE_API}/device`)
.then(res => res.json() as Promise<LocalDevice>); .then(res => res.json() as Promise<LocalDevice>);
return status; return status;
}
return null;
}; };
export default function SettingsAccessIndexRoute() { export default function SettingsAccessIndexRoute() {
const { authMode } = useLoaderData() as LocalDevice; const loaderData = useLoaderData() as LocalDevice | null;
const { navigateTo } = useDeviceUiNavigation(); const { navigateTo } = useDeviceUiNavigation();
const [send] = useJsonRpc(); const [send] = useJsonRpc();
@ -137,8 +141,6 @@ export default function SettingsAccessIndexRoute() {
syncCloudUrl(); syncCloudUrl();
}, [cloudProviders, syncCloudUrl]); }, [cloudProviders, syncCloudUrl]);
console.log("is adopted:", isAdopted);
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<SettingsPageHeader <SettingsPageHeader
@ -146,6 +148,8 @@ export default function SettingsAccessIndexRoute() {
description="Manage the Access Control of the device" description="Manage the Access Control of the device"
/> />
{loaderData?.authMode && (
<>
<div className="space-y-4"> <div className="space-y-4">
<SettingsSectionHeader <SettingsSectionHeader
title="Local" title="Local"
@ -153,9 +157,9 @@ export default function SettingsAccessIndexRoute() {
/> />
<SettingsItem <SettingsItem
title="Authentication Mode" title="Authentication Mode"
description={`Current mode: ${authMode === "password" ? "Password protected" : "No password"}`} description={`Current mode: ${loaderData.authMode === "password" ? "Password protected" : "No password"}`}
> >
{authMode === "password" ? ( {loaderData.authMode === "password" ? (
<Button <Button
size="SM" size="SM"
theme="light" theme="light"
@ -176,7 +180,7 @@ export default function SettingsAccessIndexRoute() {
)} )}
</SettingsItem> </SettingsItem>
{authMode === "password" && ( {loaderData.authMode === "password" && (
<SettingsItem <SettingsItem
title="Change Password" title="Change Password"
description="Update your device access password" description="Update your device access password"
@ -193,14 +197,15 @@ export default function SettingsAccessIndexRoute() {
)} )}
</div> </div>
<div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" /> <div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
</>
)}
<div className="space-y-4"> <div className="space-y-4">
<SettingsSectionHeader <SettingsSectionHeader
title="Remote" title="Remote"
description="Manage the mode of Remote access to the device" description="Manage the mode of Remote access to the device"
/> />
{isOnDevice && (
<>
<div className="space-y-4"> <div className="space-y-4">
{!isAdopted && ( {!isAdopted && (
<> <>
@ -323,8 +328,6 @@ export default function SettingsAccessIndexRoute() {
</div> </div>
)} )}
</div> </div>
</>
)}
</div> </div>
</div> </div>
); );