feat: use the api url from device config (#161)

Author: ym

ui/.env.development

@@ -2,3 +2,5 @@ VITE_SIGNAL_API=http://localhost:3000
 
 VITE_CLOUD_APP=http://localhost:5173
 VITE_CLOUD_API=http://localhost:3000
+
+VITE_JETKVM_HEAD=

ui/.env.device

@@ -2,3 +2,5 @@ VITE_SIGNAL_API= # Uses the KVM device's IP address as the signal API endpoint
 
 VITE_CLOUD_APP=https://app.jetkvm.com
 VITE_CLOUD_API=https://api.jetkvm.com
+
+VITE_JETKVM_HEAD=<script src="/device/ui-config.js"></script>

ui/.env.production

@@ -1,4 +1,6 @@
 VITE_SIGNAL_API=https://api.jetkvm.com
 
 VITE_CLOUD_APP=https://app.jetkvm.com
-VITE_CLOUD_API=https://api.jetkvm.com
+VITE_CLOUD_API=https://api.jetkvm.com
+
+VITE_JETKVM_HEAD=

ui/index.html

@@ -28,6 +28,7 @@
     <title>JetKVM</title>
     <link rel="stylesheet" href="/fonts/fonts.css" />
     <link rel="icon" href="/favicon.png" />
+    %VITE_JETKVM_HEAD%
     <script>
       // Initial theme setup
       document.documentElement.classList.toggle(

ui/src/components/AuthLayout.tsx

@@ -6,6 +6,7 @@ import { useLocation, useNavigation, useSearchParams } from "react-router-dom";
 import Fieldset from "@components/Fieldset";
 import GridBackground from "@components/GridBackground";
 import StepCounter from "@components/StepCounter";
+import { CLOUD_API } from "@/ui.config";
 
 type AuthLayoutProps = {
   title: string;
@@ -62,7 +63,7 @@ export default function AuthLayout({
               <Fieldset className="space-y-12">
                 <div className="max-w-sm mx-auto space-y-4">
                   <form
-                    action={`${import.meta.env.VITE_CLOUD_API}/oidc/google`}
+                    action={`${CLOUD_API}/oidc/google`}
                     method="POST"
                   >
                     {/*This could be the KVM ID*/}

ui/src/components/Header.tsx

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

ui/src/components/MountMediaDialog.tsx

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

ui/src/components/sidebar/settings.tsx

@@ -26,6 +26,7 @@ import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
 import { LocalDevice } from "@routes/devices.$id";
 import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
+import { CLOUD_APP, SIGNAL_API } from "@/ui.config";
 
 export function SettingsItem({
   title,
@@ -366,7 +367,7 @@ export default function SettingsSidebar() {
   const getDevice = useCallback(async () => {
     try {
       const status = await api
-        .GET(`${import.meta.env.VITE_SIGNAL_API}/device`)
+        .GET(`${SIGNAL_API}/device`)
         .then(res => res.json() as Promise<LocalDevice>);
       setLocalDevice(status);
     } catch (error) {
@@ -677,7 +678,7 @@ export default function SettingsSidebar() {
                 <div>
                   <LinkButton
                     to={
-                      import.meta.env.VITE_CLOUD_APP +
+                      CLOUD_APP +
                       "/signup?deviceId=" +
                       deviceId +
                       `&returnTo=${location.href}adopt`

ui/src/main.tsx

@@ -27,12 +27,13 @@ import LoginLocalRoute from "./routes/login-local";
 import WelcomeLocalModeRoute from "./routes/welcome-local.mode";
 import WelcomeRoute from "./routes/welcome-local";
 import WelcomeLocalPasswordRoute from "./routes/welcome-local.password";
+import { CLOUD_API } from "./ui.config";
 
 export const isOnDevice = import.meta.env.MODE === "device";
 export const isInCloud = !isOnDevice;
 
 export async function checkAuth() {
-  const res = await fetch(`${import.meta.env.VITE_CLOUD_API}/me`, {
+  const res = await fetch(`${CLOUD_API}/me`, {
     mode: "cors",
     credentials: "include",
     headers: { "Content-Type": "application/json" },

ui/src/routes/adopt.tsx

@@ -1,5 +1,6 @@
 import { LoaderFunctionArgs, redirect } from "react-router-dom";
 import api from "../api";
+import { CLOUD_API, CLOUD_APP, SIGNAL_API } from "@/ui.config";
 
 const loader = async ({ request }: LoaderFunctionArgs) => {
   const url = new URL(request.url);
@@ -11,17 +12,17 @@ const loader = async ({ request }: LoaderFunctionArgs) => {
   const clientId = searchParams.get("clientId");
 
   const res = await api.POST(
-    `${import.meta.env.VITE_SIGNAL_API}/cloud/register`,
+    `${SIGNAL_API}/cloud/register`,
     {
       token: tempToken,
-      cloudApi: import.meta.env.VITE_CLOUD_API,
+      cloudApi: CLOUD_API,
       oidcGoogle,
       clientId,
     },
   );
 
   if (!res.ok) throw new Error("Failed to register device");
-  return redirect(import.meta.env.VITE_CLOUD_APP + `/devices/${deviceId}/setup`);
+  return redirect(CLOUD_APP + `/devices/${deviceId}/setup`);
 };
 
 export default function AdoptRoute() {