mirror of https://github.com/jetkvm/kvm.git
refactor(ui): Reorganize device access and security settings
This commit introduces several changes to the device access and security settings: - Renamed "Security" section to "Access" in settings navigation - Moved local authentication routes from security to access - Removed deprecated security settings route - Added new route for device access settings with cloud and local authentication management - Updated cloud URL and adoption logic to be part of the access settings - Simplified routing and component structure for better user experience
This commit is contained in:
Adam Shiervani
parent
a4a6ded17f
commit
6beb41f30c
|
|
@ -780,6 +780,10 @@ func rpcResetCloudUrl() error {
|
|||
return nil
|
||||
}
|
||||
|
||||
func rpcGetDefaultCloudUrl() (string, error) {
|
||||
return defaultConfig.CloudURL, nil
|
||||
}
|
||||
|
||||
var rpcHandlers = map[string]RPCHandler{
|
||||
"ping": {Func: rpcPing},
|
||||
"getDeviceID": {Func: rpcGetDeviceID},
|
||||
|
|
@ -841,4 +845,5 @@ var rpcHandlers = map[string]RPCHandler{
|
|||
"setCloudUrl": {Func: rpcSetCloudUrl, Params: []string{"url"}},
|
||||
"getCloudUrl": {Func: rpcGetCloudUrl},
|
||||
"resetCloudUrl": {Func: rpcResetCloudUrl},
|
||||
"getDefaultCloudUrl": {Func: rpcGetDefaultCloudUrl},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
# Used in settings page to know where to link to when user wants to adopt a device to the cloud
|
||||
VITE_CLOUD_APP=http://localhost:5173
|
||||
VITE_CLOUD_APP=http://app.jetkvm.com
|
||||
|
|
|
|||
|
|
@ -21,11 +21,11 @@ const Modal = React.memo(function Modal({
|
|||
/>
|
||||
<div className="fixed inset-0 z-10 w-screen overflow-y-auto">
|
||||
{/* TODO: This doesn't work well with other-sessions */}
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-baseline sm:p-4">
|
||||
<div className="flex min-h-full items-end justify-center p-4 text-center md:items-baseline md:p-4">
|
||||
<DialogPanel
|
||||
transition
|
||||
className={cx(
|
||||
"pointer-events-none relative w-full sm:my-8 sm:!mt-[10vh]",
|
||||
"pointer-events-none relative w-full md:my-8 md:!mt-[10vh]",
|
||||
"transform transition-all data-[closed]:translate-y-8 data-[closed]:opacity-0 data-[enter]:duration-500 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in",
|
||||
className,
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ type SelectMenuProps = Pick<
|
|||
direction?: "vertical" | "horizontal";
|
||||
error?: string;
|
||||
fullWidth?: boolean;
|
||||
} & React.ComponentProps<typeof FieldLabel>;
|
||||
} & Partial<React.ComponentProps<typeof FieldLabel>>;
|
||||
|
||||
const sizes = {
|
||||
XS: "h-[24.5px] pl-3 pr-8 text-xs",
|
||||
|
|
@ -69,7 +69,7 @@ export const SelectMenuBasic = React.forwardRef<HTMLSelectElement, SelectMenuPro
|
|||
classes,
|
||||
|
||||
// General styling
|
||||
"block w-full cursor-pointer transition duration-300 rounded border-none py-0 font-medium shadow-none outline-0",
|
||||
"block w-full cursor-pointer rounded border-none py-0 font-medium shadow-none outline-0 transition duration-300",
|
||||
|
||||
// Hover
|
||||
"hover:bg-blue-50/80 active:bg-blue-100/60 disabled:hover:bg-white",
|
||||
|
|
|
|||
|
|
@ -28,19 +28,19 @@ import WelcomeRoute, { DeviceStatus } from "./routes/welcome-local";
|
|||
import WelcomeLocalPasswordRoute from "./routes/welcome-local.password";
|
||||
import { CLOUD_API, DEVICE_API } from "./ui.config";
|
||||
import OtherSessionRoute from "./routes/devices.$id.other-session";
|
||||
import LocalAuthRoute from "./routes/devices.$id.settings.security.local-auth";
|
||||
import MountRoute from "./routes/devices.$id.mount";
|
||||
import * as SettingsRoute from "./routes/devices.$id.settings";
|
||||
import SettingsKeyboardMouseRoute from "./routes/devices.$id.settings.mouse";
|
||||
import api from "./api";
|
||||
import * as SettingsIndexRoute from "./routes/devices.$id.settings._index";
|
||||
import SettingsAdvancedRoute from "./routes/devices.$id.settings.advanced";
|
||||
import * as SettingsSecurityIndexRoute from "./routes/devices.$id.settings.security._index";
|
||||
import * as SettingsAccessIndexRoute from "./routes/devices.$id.settings.access._index";
|
||||
import SettingsHardwareRoute from "./routes/devices.$id.settings.hardware";
|
||||
import SettingsVideoRoute from "./routes/devices.$id.settings.video";
|
||||
import SettingsAppearanceRoute from "./routes/devices.$id.settings.appearance";
|
||||
import * as SettingsGeneralIndexRoute from "./routes/devices.$id.settings.general._index";
|
||||
import SettingsGeneralUpdateRoute from "./routes/devices.$id.settings.general.update";
|
||||
import SecurityAccessLocalAuthRoute from "./routes/devices.$id.settings.access.local-auth";
|
||||
|
||||
export const isOnDevice = import.meta.env.MODE === "device";
|
||||
export const isInCloud = !isOnDevice;
|
||||
|
|
@ -114,11 +114,6 @@ if (isOnDevice) {
|
|||
path: "other-session",
|
||||
element: <OtherSessionRoute />,
|
||||
},
|
||||
|
||||
{
|
||||
path: "local-auth",
|
||||
element: <LocalAuthRoute />,
|
||||
},
|
||||
{
|
||||
path: "mount",
|
||||
element: <MountRoute />,
|
||||
|
|
@ -157,16 +152,16 @@ if (isOnDevice) {
|
|||
element: <SettingsHardwareRoute />,
|
||||
},
|
||||
{
|
||||
path: "security",
|
||||
path: "access",
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <SettingsSecurityIndexRoute.default />,
|
||||
loader: SettingsSecurityIndexRoute.loader,
|
||||
element: <SettingsAccessIndexRoute.default />,
|
||||
loader: SettingsAccessIndexRoute.loader,
|
||||
},
|
||||
{
|
||||
path: "local-auth",
|
||||
element: <LocalAuthRoute />,
|
||||
element: <SecurityAccessLocalAuthRoute />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -266,16 +261,16 @@ if (isOnDevice) {
|
|||
element: <SettingsHardwareRoute />,
|
||||
},
|
||||
{
|
||||
path: "security",
|
||||
path: "access",
|
||||
children: [
|
||||
{
|
||||
index: true,
|
||||
element: <SettingsSecurityIndexRoute.default />,
|
||||
loader: SettingsSecurityIndexRoute.loader,
|
||||
element: <SettingsAccessIndexRoute.default />,
|
||||
loader: SettingsAccessIndexRoute.loader,
|
||||
},
|
||||
{
|
||||
path: "local-auth",
|
||||
element: <LocalAuthRoute />,
|
||||
element: <SecurityAccessLocalAuthRoute />,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,330 @@
|
|||
import { SectionHeader } from "@/components/SectionHeader";
|
||||
import { SettingsItem } from "./devices.$id.settings";
|
||||
import { useLoaderData } from "react-router-dom";
|
||||
import { Button, LinkButton } from "../components/Button";
|
||||
import { CLOUD_APP, DEVICE_API } from "../ui.config";
|
||||
import api from "../api";
|
||||
import { LocalDevice } from "./devices.$id";
|
||||
import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
|
||||
import { isOnDevice } from "../main";
|
||||
import { GridCard } from "../components/Card";
|
||||
import { ShieldCheckIcon } from "@heroicons/react/24/outline";
|
||||
import notifications from "../notifications";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useJsonRpc } from "../hooks/useJsonRpc";
|
||||
import { InputFieldWithLabel } from "../components/InputField";
|
||||
import { SelectMenuBasic } from "../components/SelectMenuBasic";
|
||||
|
||||
export const loader = async () => {
|
||||
const status = await api
|
||||
.GET(`${DEVICE_API}/device`)
|
||||
.then(res => res.json() as Promise<LocalDevice>);
|
||||
return status;
|
||||
};
|
||||
|
||||
export default function SettingsAccessIndexRoute() {
|
||||
const { authMode } = useLoaderData() as LocalDevice;
|
||||
const { navigateTo } = useDeviceUiNavigation();
|
||||
|
||||
const [send] = useJsonRpc();
|
||||
|
||||
const [isAdopted, setAdopted] = useState(false);
|
||||
const [deviceId, setDeviceId] = useState<string | null>(null);
|
||||
const [cloudUrl, setCloudUrl] = useState("");
|
||||
const [cloudProviders, setCloudProviders] = useState<
|
||||
{ value: string; label: string }[] | null
|
||||
>([{ value: "https://api.jetkvm.com", label: "JetKVM Cloud" }]);
|
||||
|
||||
// The default value is just there so it doesn't flicker while we fetch the default Cloud URL and available providers
|
||||
const [selectedUrlOption, setSelectedUrlOption] = useState<string>(
|
||||
"https://api.jetkvm.com",
|
||||
);
|
||||
|
||||
const [defaultCloudUrl, setDefaultCloudUrl] = useState<string>("");
|
||||
|
||||
const syncCloudUrl = useCallback(() => {
|
||||
send("getCloudUrl", {}, resp => {
|
||||
if ("error" in resp) return;
|
||||
const url = resp.result as string;
|
||||
setCloudUrl(url);
|
||||
// Check if the URL matches any predefined option
|
||||
if (cloudProviders?.some(provider => provider.value === url)) {
|
||||
setSelectedUrlOption(url);
|
||||
} else {
|
||||
setSelectedUrlOption("custom");
|
||||
// setCustomCloudUrl(url);
|
||||
}
|
||||
});
|
||||
}, [cloudProviders, send]);
|
||||
|
||||
const getCloudState = useCallback(() => {
|
||||
send("getCloudState", {}, resp => {
|
||||
if ("error" in resp) return console.error(resp.error);
|
||||
const cloudState = resp.result as { connected: boolean };
|
||||
setAdopted(cloudState.connected);
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const deregisterDevice = async () => {
|
||||
send("deregisterDevice", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to de-register device: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
getCloudState();
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
const onCloudAdoptClick = useCallback(
|
||||
(url: string) => {
|
||||
if (!deviceId) {
|
||||
notifications.error("No device ID available");
|
||||
return;
|
||||
}
|
||||
|
||||
send("setCloudUrl", { url }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to update cloud URL: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
syncCloudUrl();
|
||||
notifications.success("Cloud URL updated successfully");
|
||||
|
||||
const returnTo = new URL(window.location.href);
|
||||
returnTo.pathname = "/adopt";
|
||||
returnTo.search = "";
|
||||
returnTo.hash = "";
|
||||
window.location.href =
|
||||
CLOUD_APP + "/signup?deviceId=" + deviceId + `&returnTo=${returnTo.toString()}`;
|
||||
});
|
||||
},
|
||||
[deviceId, syncCloudUrl, send],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!defaultCloudUrl) return;
|
||||
setSelectedUrlOption(defaultCloudUrl);
|
||||
setCloudProviders([
|
||||
{ value: defaultCloudUrl, label: "JetKVM Cloud" },
|
||||
{ value: "custom", label: "Custom" },
|
||||
]);
|
||||
}, [defaultCloudUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
getCloudState();
|
||||
|
||||
send("getDeviceID", {}, async resp => {
|
||||
if ("error" in resp) return console.error(resp.error);
|
||||
setDeviceId(resp.result as string);
|
||||
});
|
||||
}, [send, getCloudState]);
|
||||
|
||||
useEffect(() => {
|
||||
send("getDefaultCloudUrl", {}, resp => {
|
||||
if ("error" in resp) return console.error(resp.error);
|
||||
setDefaultCloudUrl(resp.result as string);
|
||||
});
|
||||
}, [cloudProviders, syncCloudUrl, send]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cloudProviders?.length) return;
|
||||
syncCloudUrl();
|
||||
}, [cloudProviders, syncCloudUrl]);
|
||||
|
||||
console.log("is adopted:", isAdopted);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<SectionHeader
|
||||
title="Access"
|
||||
description="Manage the Access Control of the device"
|
||||
/>
|
||||
|
||||
<div className="space-y-4">
|
||||
<SectionHeader
|
||||
title="Local"
|
||||
description="Manage the mode of local access to the device"
|
||||
/>
|
||||
<SettingsItem
|
||||
title="Authentication Mode"
|
||||
description={`Current mode: ${authMode === "password" ? "Password protected" : "No password"}`}
|
||||
>
|
||||
{authMode === "password" ? (
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Disable Protection"
|
||||
onClick={() => {
|
||||
navigateTo("./local-auth", { state: { init: "deletePassword" } });
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Enable Password"
|
||||
onClick={() => {
|
||||
navigateTo("./local-auth", { state: { init: "createPassword" } });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SettingsItem>
|
||||
|
||||
{authMode === "password" && (
|
||||
<SettingsItem
|
||||
title="Change Password"
|
||||
description="Update your device access password"
|
||||
>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Change Password"
|
||||
onClick={() => {
|
||||
navigateTo("./local-auth", { state: { init: "updatePassword" } });
|
||||
}}
|
||||
/>
|
||||
</SettingsItem>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-px w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
<div className="space-y-4">
|
||||
<SectionHeader
|
||||
title="Remote"
|
||||
description="Manage the mode of remote access to the device"
|
||||
/>
|
||||
|
||||
{isOnDevice && (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
{!isAdopted && (
|
||||
<>
|
||||
<SettingsItem
|
||||
title="Cloud Provider"
|
||||
description="Select the cloud provider for your device"
|
||||
>
|
||||
<SelectMenuBasic
|
||||
size="SM"
|
||||
value={selectedUrlOption}
|
||||
onChange={e => {
|
||||
const value = e.target.value;
|
||||
setSelectedUrlOption(value);
|
||||
}}
|
||||
options={cloudProviders ?? []}
|
||||
/>
|
||||
</SettingsItem>
|
||||
|
||||
{selectedUrlOption === "custom" && (
|
||||
<div className="mt-4 flex items-end gap-x-2 space-y-4">
|
||||
<InputFieldWithLabel
|
||||
size="SM"
|
||||
label="Custom Cloud URL"
|
||||
value={cloudUrl}
|
||||
onChange={e => setCloudUrl(e.target.value)}
|
||||
placeholder="https://api.example.com"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/*
|
||||
We do the harcoding here to avoid flickering when the default Cloud URL being fetched.
|
||||
I've tried to avoid harcoding api.jetkvm.com, but it's the only reasonable way I could think of to avoid flickering for now.
|
||||
*/}
|
||||
{selectedUrlOption === (defaultCloudUrl || "https://api.jetkvm.com") && (
|
||||
<GridCard>
|
||||
<div className="flex items-start gap-x-4 p-4">
|
||||
<ShieldCheckIcon className="mt-1 h-8 w-8 shrink-0 text-blue-600 dark:text-blue-500" />
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-base font-bold text-slate-900 dark:text-white">
|
||||
Cloud Security
|
||||
</h3>
|
||||
<div>
|
||||
<ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300">
|
||||
<li>End-to-end encryption using WebRTC (DTLS and SRTP)</li>
|
||||
<li>Zero Trust security model</li>
|
||||
<li>OIDC (OpenID Connect) authentication</li>
|
||||
<li>All streams encrypted in transit</li>
|
||||
</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>
|
||||
<hr className="block w-full dark:border-slate-600" />
|
||||
|
||||
<div>
|
||||
<LinkButton
|
||||
to="https://jetkvm.com/docs/networking/remote-access"
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Learn about our cloud security"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GridCard>
|
||||
)}
|
||||
|
||||
{!isAdopted ? (
|
||||
<div className="flex items-end gap-x-2">
|
||||
<Button
|
||||
onClick={() => onCloudAdoptClick(cloudUrl)}
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Adopt KVM to Cloud"
|
||||
/>
|
||||
</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");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@ import { useLocalAuthModalStore } from "@/hooks/stores";
|
|||
import { useLocation, useRevalidator } from "react-router-dom";
|
||||
import { useDeviceUiNavigation } from "@/hooks/useAppNavigation";
|
||||
|
||||
export default function LocalAuthRoute() {
|
||||
export default function SecurityAccessLocalAuthRoute() {
|
||||
const { setModalView } = useLocalAuthModalStore();
|
||||
const { navigateTo } = useDeviceUiNavigation();
|
||||
const location = useLocation();
|
||||
|
|
@ -8,7 +8,6 @@ import { useCallback, useState, useEffect } from "react";
|
|||
import notifications from "../notifications";
|
||||
import { TextAreaWithLabel } from "../components/TextArea";
|
||||
import { isOnDevice } from "../main";
|
||||
import { InputFieldWithLabel } from "../components/InputField";
|
||||
import { Button } from "../components/Button";
|
||||
import { useSettingsStore } from "../hooks/stores";
|
||||
import { GridCard } from "@components/Card";
|
||||
|
|
@ -16,16 +15,11 @@ import { GridCard } from "@components/Card";
|
|||
export default function SettingsAdvancedRoute() {
|
||||
const [send] = useJsonRpc();
|
||||
|
||||
const [cloudUrl, setCloudUrl] = useState("");
|
||||
const [sshKey, setSSHKey] = useState<string>("");
|
||||
const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
|
||||
const settings = useSettingsStore();
|
||||
|
||||
useEffect(() => {
|
||||
send("getCloudUrl", {}, resp => {
|
||||
if ("error" in resp) return;
|
||||
setCloudUrl(resp.result as string);
|
||||
});
|
||||
|
||||
send("getDevModeState", {}, resp => {
|
||||
if ("error" in resp) return;
|
||||
|
|
@ -51,12 +45,6 @@ export default function SettingsAdvancedRoute() {
|
|||
});
|
||||
}, [send]);
|
||||
|
||||
const getCloudUrl = useCallback(() => {
|
||||
send("getCloudUrl", {}, resp => {
|
||||
if ("error" in resp) return;
|
||||
setCloudUrl(resp.result as string);
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const handleUsbEmulationToggle = useCallback(
|
||||
(enabled: boolean) => {
|
||||
|
|
@ -74,35 +62,6 @@ export default function SettingsAdvancedRoute() {
|
|||
[getUsbEmulationState, send],
|
||||
);
|
||||
|
||||
const handleCloudUrlChange = useCallback(
|
||||
(url: string) => {
|
||||
send("setCloudUrl", { url }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to update cloud URL: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
getCloudUrl();
|
||||
notifications.success("Cloud URL updated successfully");
|
||||
});
|
||||
},
|
||||
[send, getCloudUrl],
|
||||
);
|
||||
|
||||
const handleResetCloudUrl = useCallback(() => {
|
||||
send("resetCloudUrl", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to reset cloud URL: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
getCloudUrl();
|
||||
notifications.success("Cloud URL reset to default successfully");
|
||||
});
|
||||
}, [send, getCloudUrl]);
|
||||
|
||||
const handleResetConfig = useCallback(() => {
|
||||
send("resetConfig", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
|
|
@ -244,37 +203,6 @@ export default function SettingsAdvancedRoute() {
|
|||
</GridCard>
|
||||
)}
|
||||
|
||||
{isOnDevice && settings.developerMode && (
|
||||
<div className="mt-4 space-y-4">
|
||||
<SettingsItem
|
||||
title="Cloud API URL"
|
||||
description="Connect to a custom JetKVM Cloud API"
|
||||
/>
|
||||
|
||||
<InputFieldWithLabel
|
||||
size="SM"
|
||||
label="Cloud URL"
|
||||
value={cloudUrl}
|
||||
onChange={e => setCloudUrl(e.target.value)}
|
||||
placeholder="https://api.jetkvm.com"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Button
|
||||
size="SM"
|
||||
theme="primary"
|
||||
text="Save Cloud URL"
|
||||
onClick={() => handleCloudUrlChange(cloudUrl)}
|
||||
/>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Restore to default"
|
||||
onClick={handleResetCloudUrl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{isOnDevice && settings.developerMode && (
|
||||
<div className="space-y-4">
|
||||
<SettingsItem
|
||||
|
|
|
|||
|
|
@ -5,12 +5,8 @@ import { useCallback, useState } from "react";
|
|||
import { useEffect } from "react";
|
||||
import { SystemVersionInfo } from "./devices.$id.settings.general.update";
|
||||
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import { Button, LinkButton } from "../components/Button";
|
||||
import { GridCard } from "../components/Card";
|
||||
import { ShieldCheckIcon } from "@heroicons/react/24/outline";
|
||||
import { CLOUD_APP } from "../ui.config";
|
||||
import { Button } from "../components/Button";
|
||||
import notifications from "../notifications";
|
||||
import { isOnDevice } from "../main";
|
||||
import Checkbox from "../components/Checkbox";
|
||||
import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
|
||||
|
||||
|
|
@ -20,34 +16,11 @@ export default function SettingsGeneralRoute() {
|
|||
|
||||
const [devChannel, setDevChannel] = useState(false);
|
||||
const [autoUpdate, setAutoUpdate] = useState(true);
|
||||
const [deviceId, setDeviceId] = useState<string | null>(null);
|
||||
const [isAdopted, setAdopted] = useState(false);
|
||||
const [currentVersions, setCurrentVersions] = useState<{
|
||||
appVersion: string;
|
||||
systemVersion: string;
|
||||
} | null>(null);
|
||||
|
||||
const getCloudState = useCallback(() => {
|
||||
send("getCloudState", {}, resp => {
|
||||
if ("error" in resp) return console.error(resp.error);
|
||||
const cloudState = resp.result as { connected: boolean };
|
||||
setAdopted(cloudState.connected);
|
||||
});
|
||||
}, [send]);
|
||||
|
||||
const deregisterDevice = async () => {
|
||||
send("deregisterDevice", {}, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to de-register device: ${resp.error.data || "Unknown error"}`,
|
||||
);
|
||||
return;
|
||||
}
|
||||
getCloudState();
|
||||
return;
|
||||
});
|
||||
};
|
||||
|
||||
const getCurrentVersions = useCallback(() => {
|
||||
send("getUpdateStatus", {}, resp => {
|
||||
if ("error" in resp) return;
|
||||
|
|
@ -61,12 +34,6 @@ export default function SettingsGeneralRoute() {
|
|||
|
||||
useEffect(() => {
|
||||
getCurrentVersions();
|
||||
getCloudState();
|
||||
send("getDeviceID", {}, async resp => {
|
||||
if ("error" in resp) return console.error(resp.error);
|
||||
setDeviceId(resp.result as string);
|
||||
});
|
||||
|
||||
send("getAutoUpdateState", {}, resp => {
|
||||
if ("error" in resp) return;
|
||||
setAutoUpdate(resp.result as boolean);
|
||||
|
|
@ -76,7 +43,7 @@ export default function SettingsGeneralRoute() {
|
|||
if ("error" in resp) return;
|
||||
setDevChannel(resp.result as boolean);
|
||||
});
|
||||
}, [getCurrentVersions, getCloudState, send]);
|
||||
}, [getCurrentVersions, send]);
|
||||
|
||||
const handleAutoUpdateChange = (enabled: boolean) => {
|
||||
send("setAutoUpdateState", { enabled }, resp => {
|
||||
|
|
@ -164,108 +131,6 @@ export default function SettingsGeneralRoute() {
|
|||
</SettingsItem>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isOnDevice && (
|
||||
<>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
|
||||
<div className="space-y-4">
|
||||
<SettingsItem
|
||||
title="JetKVM Cloud"
|
||||
description="Connect your device to the cloud for secure remote access and management"
|
||||
/>
|
||||
|
||||
<GridCard>
|
||||
<div className="flex items-start gap-x-4 p-4">
|
||||
<ShieldCheckIcon className="mt-1 h-8 w-8 shrink-0 text-blue-600 dark:text-blue-500" />
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-base font-bold text-slate-900 dark:text-white">
|
||||
Cloud Security
|
||||
</h3>
|
||||
<div>
|
||||
<ul className="list-disc space-y-1 pl-5 text-xs text-slate-700 dark:text-slate-300">
|
||||
<li>End-to-end encryption using WebRTC (DTLS and SRTP)</li>
|
||||
<li>Zero Trust security model</li>
|
||||
<li>OIDC (OpenID Connect) authentication</li>
|
||||
<li>All streams encrypted in transit</li>
|
||||
</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>
|
||||
<hr className="block w-full dark:border-slate-600" />
|
||||
|
||||
<div>
|
||||
<LinkButton
|
||||
to="https://jetkvm.com/docs/networking/remote-access"
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Learn about our cloud security"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GridCard>
|
||||
|
||||
{!isAdopted ? (
|
||||
<div>
|
||||
<LinkButton
|
||||
to={
|
||||
CLOUD_APP +
|
||||
"/signup?deviceId=" +
|
||||
deviceId +
|
||||
`&returnTo=${location.href}adopt`
|
||||
}
|
||||
size="SM"
|
||||
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");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,72 +0,0 @@
|
|||
import { SectionHeader } from "@/components/SectionHeader";
|
||||
import { SettingsItem } from "./devices.$id.settings";
|
||||
import { useLoaderData } from "react-router-dom";
|
||||
import { Button } from "../components/Button";
|
||||
import { DEVICE_API } from "../ui.config";
|
||||
import api from "../api";
|
||||
import { LocalDevice } from "./devices.$id";
|
||||
import { useDeviceUiNavigation } from "../hooks/useAppNavigation";
|
||||
|
||||
export const loader = async () => {
|
||||
const status = await api
|
||||
.GET(`${DEVICE_API}/device`)
|
||||
.then(res => res.json() as Promise<LocalDevice>);
|
||||
return status;
|
||||
};
|
||||
|
||||
export default function SettingsSecurityIndexRoute() {
|
||||
const { authMode } = useLoaderData() as LocalDevice;
|
||||
const { navigateTo } = useDeviceUiNavigation();
|
||||
|
||||
return (
|
||||
<div className="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: ${authMode === "password" ? "Password protected" : "No password"}`}
|
||||
>
|
||||
{authMode === "password" ? (
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Disable Protection"
|
||||
onClick={() => {
|
||||
navigateTo("./local-auth", { state: { init: "deletePassword" } });
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Enable Password"
|
||||
onClick={() => {
|
||||
navigateTo("./local-auth", { state: { init: "createPassword" } });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</SettingsItem>
|
||||
|
||||
{authMode === "password" && (
|
||||
<SettingsItem
|
||||
title="Change Password"
|
||||
description="Update your device access password"
|
||||
>
|
||||
<Button
|
||||
size="SM"
|
||||
theme="light"
|
||||
text="Change Password"
|
||||
onClick={() => {
|
||||
navigateTo("./local-auth", { state: { init: "updatePassword" } });
|
||||
}}
|
||||
/>
|
||||
</SettingsItem>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -79,15 +79,27 @@ export default function SettingsRoute() {
|
|||
<div className="w-full gap-x-8 gap-y-4 space-y-4 md:grid md:grid-cols-8 md:space-y-0">
|
||||
<div className="w-full select-none space-y-4 md:col-span-2">
|
||||
<Card className="flex w-full gap-x-4 overflow-hidden p-2 md:flex-col dark:bg-slate-800">
|
||||
<LinkButton
|
||||
to=".."
|
||||
size="SM"
|
||||
theme="blank"
|
||||
text="Back to KVM"
|
||||
LeadingIcon={LuArrowLeft}
|
||||
textAlign="left"
|
||||
fullWidth
|
||||
/>
|
||||
<div className="md:hidden">
|
||||
<LinkButton
|
||||
to=".."
|
||||
size="SM"
|
||||
theme="blank"
|
||||
text="Back to KVM"
|
||||
LeadingIcon={LuArrowLeft}
|
||||
textAlign="left"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<LinkButton
|
||||
to=".."
|
||||
size="SM"
|
||||
theme="blank"
|
||||
text="Back to KVM"
|
||||
LeadingIcon={LuArrowLeft}
|
||||
textAlign="left"
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="relative overflow-hidden">
|
||||
{/* Gradient overlay for left side - only visible on mobile when scrolled */}
|
||||
|
|
@ -160,12 +172,12 @@ export default function SettingsRoute() {
|
|||
</div>
|
||||
<div className="shrink-0">
|
||||
<NavLink
|
||||
to="security"
|
||||
to="access"
|
||||
className={({ isActive }) => (isActive ? "active" : "")}
|
||||
>
|
||||
<div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
|
||||
<LuShieldCheck className="h-4 w-4 shrink-0" />
|
||||
<h1>Security</h1>
|
||||
<h1>Access</h1>
|
||||
</div>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue