Merge 17b364b58a into 584768bacf

Addresses #304. In local mode will show the deviceId, in cloud connection will show the deviceName.

Would be nice to show the hostname, but that would require device-side code changes to the /device endpoint.

ui/src/routes/devices.$id.tsx

@@ -58,9 +58,11 @@ import { SystemVersionInfo } from "./devices.$id.settings.general.update";
 
 interface LocalLoaderResp {
   authMode: "password" | "noPassword" | null;
+  deviceId: string;
 }
 
 interface CloudLoaderResp {
+  deviceId: string;
   deviceName: string;
   user: User | null;
   iceConfig: {
@@ -85,7 +87,7 @@ const deviceLoader = async () => {
   if (deviceRes.status === 401) return redirect("/login-local");
   if (deviceRes.ok) {
     const device = (await deviceRes.json()) as LocalDevice;
-    return { authMode: device.authMode };
+    return { authMode: device.authMode, deviceId: device.deviceId };
   }
 
   throw new Error("Error fetching device");
@@ -111,7 +113,7 @@ const cloudLoader = async (params: Params<string>): Promise<CloudLoaderResp> =>
     device: { id: string; name: string; user: { googleId: string } };
   };
 
-  return { user, iceConfig, deviceName: device.name || device.id };
+  return { user, iceConfig, deviceName: device.name || device.id, deviceId: device.id };
 };
 
 const loader = async ({ params }: LoaderFunctionArgs) => {
@@ -123,6 +125,7 @@ export default function KvmIdRoute() {
   // Depending on the mode, we set the appropriate variables
   const user = "user" in loaderResp ? loaderResp.user : null;
   const deviceName = "deviceName" in loaderResp ? loaderResp.deviceName : null;
+  const deviceId = "deviceId" in loaderResp ? loaderResp.deviceId : null;
   const iceConfig = "iceConfig" in loaderResp ? loaderResp.iceConfig : null;
   const authMode = "authMode" in loaderResp ? loaderResp.authMode : null;
 
@@ -788,6 +791,14 @@ export default function KvmIdRoute() {
     setupPeerConnection,
   ]);
 
+  // update the browser tab title with the name of the JetKVM we're discussing
+  useEffect(() => {
+    const name = deviceName || deviceId;
+    document.title = (name && name.length > 0)
+                    ? "JetKVM-" + name
+                    : "JetKVM";
+  }, [deviceName, deviceId]);
+
   return (
     <FeatureFlagProvider appVersion={appVersion}>
       {!outlet && otaState.updating && (

web.go

@@ -97,9 +97,6 @@ func setupRouter() *gin.Engine {
 	// We use this to determine if the device is setup
 	r.GET("/device/status", handleDeviceStatus)
 
-	// We use this to provide the UI with the device configuration
-	r.GET("/device/ui-config.js", handleDeviceUIConfig)
-
 	// We use this to setup the device in the welcome page
 	r.POST("/device/setup", handleSetup)
 
@@ -694,21 +691,6 @@ func handleCloudState(c *gin.Context) {
 	c.JSON(http.StatusOK, response)
 }
 
-func handleDeviceUIConfig(c *gin.Context) {
-	config, _ := json.Marshal(gin.H{
-		"CLOUD_API":      config.CloudURL,
-		"DEVICE_VERSION": builtAppVersion,
-	})
-	if config == nil {
-		c.JSON(http.StatusInternalServerError, gin.H{"error": "Failed to marshal config"})
-		return
-	}
-
-	response := fmt.Sprintf("window.JETKVM_CONFIG = %s;", config)
-
-	c.Data(http.StatusOK, "text/javascript; charset=utf-8", []byte(response))
-}
-
 func handleSetup(c *gin.Context) {
 	// Check if the device is already set up
 	if config.LocalAuthMode != "" || config.HashedPassword != "" {