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

refactor(ui): Remove SIGNAL_API env & Rename to DEVICE_API to make clear distinction between CLOUD_API and DEVICE_API.

This commit is contained in:
Adam Shiervani 2025-02-21 10:16:02 +01:00
parent 6c68a0d8eb
commit 44ea0201b1
14 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/.env.cloud-development
View File

@ -1,4 +1,4 @@
# No need for VITE_CLOUD_APP or VITE_SIGNAL_API, it's only needed for the device build # No need for VITE_CLOUD_APP it's only needed for the device build
# We use this for all the cloud API requests from the browser # We use this for all the cloud API requests from the browser
VITE_CLOUD_API=http://localhost:3000 VITE_CLOUD_API=http://localhost:3000

2
ui/.env.cloud-production
View File

@ -1,4 +1,4 @@
# No need for VITE_CLOUD_APP or VITE_SIGNAL_API, it's only needed for the device build # No need for VITE_CLOUD_APP it's only needed for the device build
# We use this for all the cloud API requests from the browser # We use this for all the cloud API requests from the browser
VITE_CLOUD_API=https://api.jetkvm.com VITE_CLOUD_API=https://api.jetkvm.com

2
ui/.env.cloud-staging
View File

@ -1,4 +1,4 @@
# No need for VITE_SIGNAL_API or VITE_CLOUD_APP it's only needed for the device build # No need for VITE_CLOUD_APP it's only needed for the device build
# We use this for all the cloud API requests from the browser # We use this for all the cloud API requests from the browser
VITE_CLOUD_API=https://staging-api.jetkvm.com VITE_CLOUD_API=https://staging-api.jetkvm.com

5
ui/.env.device
View File

@ -1,5 +1,2 @@
# Uses the KVM device's IP address as the signal API endpoint
VITE_SIGNAL_API=
# Used in settings page to know where to link to when user wants to adopt a device to the cloud # Used in settings page to know where to link to when user wants to adopt a device to the cloud
VITE_CLOUD_APP=https://app.jetkvm.com VITE_CLOUD_APP=http://localhost:5173

4
ui/src/components/Header.tsx
View File

@ -14,7 +14,7 @@ import PeerConnectionStatusCard from "@components/PeerConnectionStatusCard";
import api from "../api"; import api from "../api";
import { isOnDevice } from "../main"; import { isOnDevice } from "../main";
import { Button, LinkButton } from "./Button"; import { Button, LinkButton } from "./Button";
import { CLOUD_API, SIGNAL_API } from "@/ui.config"; import { CLOUD_API, DEVICE_API } from "@/ui.config";
interface NavbarProps { interface NavbarProps {
isLoggedIn: boolean; isLoggedIn: boolean;
@ -38,7 +38,7 @@ export default function DashboardNavbar({
const navigate = useNavigate(); const navigate = useNavigate();
const onLogout = useCallback(async () => { const onLogout = useCallback(async () => {
const logoutUrl = isOnDevice const logoutUrl = isOnDevice
? `${SIGNAL_API}/auth/logout` ? `${DEVICE_API}/auth/logout`
: `${CLOUD_API}/logout`; : `${CLOUD_API}/logout`;
const res = await api.POST(logoutUrl); const res = await api.POST(logoutUrl);
if (!res.ok) return; if (!res.ok) return;

4
ui/src/components/MountMediaDialog.tsx
View File

@ -35,7 +35,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
import notifications from "../notifications"; import notifications from "../notifications";
import Fieldset from "./Fieldset"; import Fieldset from "./Fieldset";
import { isOnDevice } from "../main"; import { isOnDevice } from "../main";
import { SIGNAL_API } from "@/ui.config"; import { DEVICE_API } from "@/ui.config";
export default function MountMediaModal({ export default function MountMediaModal({
open, open,
@ -1120,7 +1120,7 @@ function UploadFileView({
alreadyUploadedBytes: number, alreadyUploadedBytes: number,
dataChannel: string, dataChannel: string,
) { ) {
const uploadUrl = `${SIGNAL_API}/storage/upload?uploadId=${dataChannel}`; const uploadUrl = `${DEVICE_API}/storage/upload?uploadId=${dataChannel}`;
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.open("POST", uploadUrl, true); xhr.open("POST", uploadUrl, true);

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

@ -26,7 +26,7 @@ import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
import { LocalDevice } from "@routes/devices.$id"; import { LocalDevice } from "@routes/devices.$id";
import { useRevalidator } from "react-router-dom"; import { useRevalidator } from "react-router-dom";
import { ShieldCheckIcon } from "@heroicons/react/20/solid"; import { ShieldCheckIcon } from "@heroicons/react/20/solid";
import { CLOUD_APP, SIGNAL_API } from "@/ui.config"; import { CLOUD_APP, DEVICE_API } from "@/ui.config";
import { InputFieldWithLabel } from "../InputField"; import { InputFieldWithLabel } from "../InputField";
export function SettingsItem({ export function SettingsItem({
@ -421,7 +421,7 @@ export default function SettingsSidebar() {
const getDevice = useCallback(async () => { const getDevice = useCallback(async () => {
try { try {
const status = await api const status = await api
.GET(`${SIGNAL_API}/device`) .GET(`${DEVICE_API}/device`)
.then(res => res.json() as Promise<LocalDevice>); .then(res => res.json() as Promise<LocalDevice>);
setLocalDevice(status); setLocalDevice(status);
} catch (error) { } catch (error) {

4
ui/src/routes/adopt.tsx
View File

@ -1,6 +1,6 @@
import { LoaderFunctionArgs, redirect } from "react-router-dom"; import { LoaderFunctionArgs, redirect } from "react-router-dom";
import api from "../api"; import api from "../api";
import { CLOUD_APP, SIGNAL_API } from "@/ui.config"; import { CLOUD_APP, DEVICE_API } from "@/ui.config";
const loader = async ({ request }: LoaderFunctionArgs) => { const loader = async ({ request }: LoaderFunctionArgs) => {
const url = new URL(request.url); const url = new URL(request.url);
@ -11,7 +11,7 @@ const loader = async ({ request }: LoaderFunctionArgs) => {
const oidcGoogle = searchParams.get("oidcGoogle"); const oidcGoogle = searchParams.get("oidcGoogle");
const clientId = searchParams.get("clientId"); const clientId = searchParams.get("clientId");
const res = await api.POST(`${SIGNAL_API}/cloud/register`, { const res = await api.POST(`${DEVICE_API}/cloud/register`, {
token: tempToken, token: tempToken,
oidcGoogle, oidcGoogle,
clientId, clientId,

16
ui/src/routes/devices.$id.tsx
View File

@ -36,7 +36,7 @@ import { DeviceStatus } from "./welcome-local";
import FocusTrap from "focus-trap-react"; import FocusTrap from "focus-trap-react";
import OtherSessionConnectedModal from "@/components/OtherSessionConnectedModal"; import OtherSessionConnectedModal from "@/components/OtherSessionConnectedModal";
import Terminal from "@components/Terminal"; import Terminal from "@components/Terminal";
import { CLOUD_API, SIGNAL_API } from "@/ui.config"; import { CLOUD_API, DEVICE_API } from "@/ui.config";
interface LocalLoaderResp { interface LocalLoaderResp {
authMode: "password" | "noPassword" | null; authMode: "password" | "noPassword" | null;
@ -57,12 +57,12 @@ export interface LocalDevice {
const deviceLoader = async () => { const deviceLoader = async () => {
const res = await api const res = await api
.GET(`${SIGNAL_API}/device/status`) .GET(`${DEVICE_API}/device/status`)
.then(res => res.json() as Promise<DeviceStatus>); .then(res => res.json() as Promise<DeviceStatus>);
if (!res.isSetup) return redirect("/welcome"); if (!res.isSetup) return redirect("/welcome");
const deviceRes = await api.GET(`${SIGNAL_API}/device`); const deviceRes = await api.GET(`${DEVICE_API}/device`);
if (deviceRes.status === 401) return redirect("/login-local"); if (deviceRes.status === 401) return redirect("/login-local");
if (deviceRes.ok) { if (deviceRes.ok) {
const device = (await deviceRes.json()) as LocalDevice; const device = (await deviceRes.json()) as LocalDevice;
@ -78,9 +78,7 @@ const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> =>
const iceResp = await api.POST(`${CLOUD_API}/webrtc/ice_config`); const iceResp = await api.POST(`${CLOUD_API}/webrtc/ice_config`);
const iceConfig = await iceResp.json(); const iceConfig = await iceResp.json();
const deviceResp = await api.GET( const deviceResp = await api.GET(`${CLOUD_API}/devices/${params.id}`);
`${CLOUD_API}/devices/${params.id}`,
);
if (!deviceResp.ok) { if (!deviceResp.ok) {
if (deviceResp.status === 404) { if (deviceResp.status === 404) {
@ -143,7 +141,11 @@ export default function KvmIdRoute() {
try { try {
const sd = btoa(JSON.stringify(pc.localDescription)); const sd = btoa(JSON.stringify(pc.localDescription));
const res = await api.POST(`${SIGNAL_API}/webrtc/session`, {
const sessionUrl = isOnDevice
? `${DEVICE_API}/webrtc/session`
: `${CLOUD_API}/webrtc/session`;
const res = await api.POST(sessionUrl, {
sd, sd,
// When on device, we don't need to specify the device id, as it's already known // When on device, we don't need to specify the device id, as it's already known
...(isOnDevice ? {} : { id: params.id }), ...(isOnDevice ? {} : { id: params.id }),

8
ui/src/routes/login-local.tsx
View File

@ -12,16 +12,16 @@ import LogoWhiteIcon from "@/assets/logo-white.svg";
import api from "../api"; import api from "../api";
import { DeviceStatus } from "./welcome-local"; import { DeviceStatus } from "./welcome-local";
import ExtLink from "../components/ExtLink"; import ExtLink from "../components/ExtLink";
import { SIGNAL_API } from "@/ui.config"; import { DEVICE_API } from "@/ui.config";
const loader = async () => { const loader = async () => {
const res = await api const res = await api
.GET(`${SIGNAL_API}/device/status`) .GET(`${DEVICE_API}/device/status`)
.then(res => res.json() as Promise<DeviceStatus>); .then(res => res.json() as Promise<DeviceStatus>);
if (!res.isSetup) return redirect("/welcome"); if (!res.isSetup) return redirect("/welcome");
const deviceRes = await api.GET(`${SIGNAL_API}/device`); const deviceRes = await api.GET(`${DEVICE_API}/device`);
if (deviceRes.ok) return redirect("/"); if (deviceRes.ok) return redirect("/");
return null; return null;
}; };
@ -32,7 +32,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
try { try {
const response = await api.POST( const response = await api.POST(
`${SIGNAL_API}/auth/login-local`, `${DEVICE_API}/auth/login-local`,
{ {
password, password,
}, },

6
ui/src/routes/welcome-local.mode.tsx
View File

@ -9,11 +9,11 @@ import LogoWhiteIcon from "@/assets/logo-white.svg";
import { cx } from "../cva.config"; import { cx } from "../cva.config";
import api from "../api"; import api from "../api";
import { DeviceStatus } from "./welcome-local"; import { DeviceStatus } from "./welcome-local";
import { SIGNAL_API } from "@/ui.config"; import { DEVICE_API } from "@/ui.config";
const loader = async () => { const loader = async () => {
const res = await api const res = await api
.GET(`${SIGNAL_API}/device/status`) .GET(`${DEVICE_API}/device/status`)
.then(res => res.json() as Promise<DeviceStatus>); .then(res => res.json() as Promise<DeviceStatus>);
if (res.isSetup) return redirect("/login-local"); if (res.isSetup) return redirect("/login-local");
@ -31,7 +31,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
if (localAuthMode === "noPassword") { if (localAuthMode === "noPassword") {
try { try {
await api.POST(`${SIGNAL_API}/device/setup`, { await api.POST(`${DEVICE_API}/device/setup`, {
localAuthMode, localAuthMode,
}); });
return redirect("/"); return redirect("/");

6
ui/src/routes/welcome-local.password.tsx
View File

@ -10,11 +10,11 @@ import LogoBlueIcon from "@/assets/logo-blue.png";
import LogoWhiteIcon from "@/assets/logo-white.svg"; import LogoWhiteIcon from "@/assets/logo-white.svg";
import api from "../api"; import api from "../api";
import { DeviceStatus } from "./welcome-local"; import { DeviceStatus } from "./welcome-local";
import { SIGNAL_API } from "@/ui.config"; import { DEVICE_API } from "@/ui.config";
const loader = async () => { const loader = async () => {
const res = await api const res = await api
.GET(`${SIGNAL_API}/device/status`) .GET(`${DEVICE_API}/device/status`)
.then(res => res.json() as Promise<DeviceStatus>); .then(res => res.json() as Promise<DeviceStatus>);
if (res.isSetup) return redirect("/login-local"); if (res.isSetup) return redirect("/login-local");
@ -31,7 +31,7 @@ const action = async ({ request }: ActionFunctionArgs) => {
} }
try { try {
const response = await api.POST(`${SIGNAL_API}/device/setup`, { const response = await api.POST(`${DEVICE_API}/device/setup`, {
localAuthMode: "password", localAuthMode: "password",
password, password,
}); });

4
ui/src/routes/welcome-local.tsx
View File

@ -9,7 +9,7 @@ import LogoMark from "@/assets/logo-mark.png";
import { cx } from "cva"; import { cx } from "cva";
import api from "../api"; import api from "../api";
import { redirect } from "react-router-dom"; import { redirect } from "react-router-dom";
import { SIGNAL_API } from "@/ui.config"; import { DEVICE_API } from "@/ui.config";
export interface DeviceStatus { export interface DeviceStatus {
isSetup: boolean; isSetup: boolean;
@ -17,7 +17,7 @@ export interface DeviceStatus {
const loader = async () => { const loader = async () => {
const res = await api const res = await api
.GET(`${SIGNAL_API}/device/status`) .GET(`${DEVICE_API}/device/status`)
.then(res => res.json() as Promise<DeviceStatus>); .then(res => res.json() as Promise<DeviceStatus>);
if (res.isSetup) return redirect("/login-local"); if (res.isSetup) return redirect("/login-local");

4
ui/src/ui.config.ts
View File

@ -1,3 +1,5 @@
export const CLOUD_API = import.meta.env.VITE_CLOUD_API; export const CLOUD_API = import.meta.env.VITE_CLOUD_API;
export const CLOUD_APP = import.meta.env.VITE_CLOUD_APP; export const CLOUD_APP = import.meta.env.VITE_CLOUD_APP;
export const SIGNAL_API = import.meta.env.VITE_SIGNAL_API;
// In device mode, an empty string uses the current hostname (the JetKVM device's IP) as the API endpoint
export const DEVICE_API = "";