Add support for Luckfox PicoKVM

Signed-off-by: luckfox-eng29 <eng29@luckfox.com>

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

@@ -19,6 +19,21 @@ import { TextAreaWithLabel } from "@components/TextArea";
 import { LocalDevice } from "./devices.$id";
 import { SettingsItem } from "./devices.$id.settings";
 import { CloudState } from "./adopt";
+import { useVpnStore } from "@/hooks/stores";
+import Checkbox from "../components/Checkbox";
+
+export interface TailScaleResponse {
+  state: string;
+  loginUrl: string;
+  ip: string;
+  xEdge: boolean;
+}
+
+export interface ZeroTierResponse {
+  state: string;
+  networkID: string;
+  ip: string;
+}
 
 export interface TLSState {
   mode: "self-signed" | "custom" | "disabled";
@@ -40,41 +55,34 @@ export default function SettingsAccessIndexRoute() {
   const loaderData = useLoaderData() as LocalDevice | null;
 
   const { navigateTo } = useDeviceUiNavigation();
-  const navigate = useNavigate();
 
   const [send] = useJsonRpc();
 
-  const [isAdopted, setAdopted] = useState(false);
   const [deviceId, setDeviceId] = useState<string | null>(null);
-  const [cloudApiUrl, setCloudApiUrl] = useState("");
-  const [cloudAppUrl, setCloudAppUrl] = useState("");
 
   // Use a simple string identifier for the selected provider
-  const [selectedProvider, setSelectedProvider] = useState<string>("jetkvm");
   const [tlsMode, setTlsMode] = useState<string>("unknown");
   const [tlsCert, setTlsCert] = useState<string>("");
   const [tlsKey, setTlsKey] = useState<string>("");
+    
+  const tailScaleConnectionState = useVpnStore(state => state.tailScaleConnectionState);
+  const tailScaleLoginUrl = useVpnStore(state => state.tailScaleLoginUrl);
+  const tailScaleXEdge = useVpnStore(state => state.tailScaleXEdge)
+  const tailScaleIP = useVpnStore(state => state.tailScaleIP);
+  const setTailScaleConnectionState = useVpnStore(state => state.setTailScaleConnectionState);
+  const setTailScaleLoginUrl = useVpnStore(state => state.setTailScaleLoginUrl); 
+  const setTailScaleXEdge = useVpnStore(state => state.setTailScaleXEdge);
+  const setTailScaleIP = useVpnStore(state => state.setTailScaleIP);
+  
+  const zeroTierConnectionState = useVpnStore(state => state.zeroTierConnectionState);
+  const zeroTierNetworkID = useVpnStore(state => state.zeroTierNetworkID);
+  const zeroTierIP = useVpnStore(state => state.zeroTierIP);
+  const setZeroTierConnectionState = useVpnStore(state => state.setZeroTierConnectionState);
+  const setZeroTierNetworkID = useVpnStore(state => state.setZeroTierNetworkID);
+  const setZeroTierIP = useVpnStore(state => state.setZeroTierIP);
 
-  const getCloudState = useCallback(() => {
-    send("getCloudState", {}, resp => {
-      if ("error" in resp) return console.error(resp.error);
-      const cloudState = resp.result as CloudState;
-      setAdopted(cloudState.connected);
-      setCloudApiUrl(cloudState.url);
-
-      if (cloudState.appUrl) setCloudAppUrl(cloudState.appUrl);
-
-      // Find if the API URL matches any of our predefined providers
-      const isAPIJetKVMProd = cloudState.url === "https://api.jetkvm.com";
-      const isAppJetKVMProd = cloudState.appUrl === "https://app.jetkvm.com";
-
-      if (isAPIJetKVMProd && isAppJetKVMProd) {
-        setSelectedProvider("jetkvm");
-      } else {
-        setSelectedProvider("custom");
-      }
-    });
-  }, [send]);
+  const [tempNetworkID, setTempNetworkID] = useState("");
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
 
   const getTLSState = useCallback(() => {
     send("getTLSState", {}, resp => {
@@ -87,66 +95,6 @@ export default function SettingsAccessIndexRoute() {
     });
   }, [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();
-      // In cloud mode, we need to navigate to the device overview page, as we don't a connection anymore
-      if (!isOnDevice) navigate("/");
-      return;
-    });
-  };
-
-  const onCloudAdoptClick = useCallback(
-    (cloudApiUrl: string, cloudAppUrl: string) => {
-      if (!deviceId) {
-        notifications.error("No device ID available");
-        return;
-      }
-
-      send("setCloudUrl", { apiUrl: cloudApiUrl, appUrl: cloudAppUrl }, resp => {
-        if ("error" in resp) {
-          notifications.error(
-            `Failed to update cloud URL: ${resp.error.data || "Unknown error"}`,
-          );
-          return;
-        }
-
-        const returnTo = new URL(window.location.href);
-        returnTo.pathname = "/adopt";
-        returnTo.search = "";
-        returnTo.hash = "";
-        window.location.href =
-          cloudAppUrl +
-          "/signup?deviceId=" +
-          deviceId +
-          `&returnTo=${returnTo.toString()}`;
-      });
-    },
-    [deviceId, send],
-  );
-
-  // Handle provider selection change
-  const handleProviderChange = (value: string) => {
-    setSelectedProvider(value);
-
-    // If selecting a predefined provider, update both URLs
-    if (value === "jetkvm") {
-      setCloudApiUrl("https://api.jetkvm.com");
-      setCloudAppUrl("https://app.jetkvm.com");
-    } else {
-      if (cloudApiUrl || cloudAppUrl) return;
-      setCloudApiUrl("");
-      setCloudAppUrl("");
-    }
-  };
-
   // Function to update TLS state - accepts a mode parameter
   const updateTlsState = useCallback(
     (mode: string, cert?: string, key?: string) => {
@@ -195,14 +143,124 @@ export default function SettingsAccessIndexRoute() {
 
   // Fetch device ID and cloud state on component mount
   useEffect(() => {
-    getCloudState();
     getTLSState();
 
     send("getDeviceID", {}, async resp => {
       if ("error" in resp) return console.error(resp.error);
       setDeviceId(resp.result as string);
     });
-  }, [send, getCloudState, getTLSState]);
+  }, [send, getTLSState]);
+
+  const handleTailScaleLogin = useCallback(() => {
+    setTailScaleConnectionState("connecting");
+
+    send("loginTailScale", { xEdge: tailScaleXEdge }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to login TailScale: ${resp.error.data || "Unknown error"}`,
+        );
+        setTailScaleConnectionState("closed");
+        setTailScaleLoginUrl("");
+        setTailScaleIP("");
+        return;
+      }
+      const result = resp.result as TailScaleResponse;
+      const validState = ["closed", "connecting", "connected", "disconnected" , "logined"].includes(result.state)
+      ? result.state as "closed" | "connecting" | "connected" | "disconnected" | "logined"
+      : "closed";
+      setTailScaleConnectionState(validState);
+      setTailScaleLoginUrl(result.loginUrl);
+      setTailScaleIP(result.ip);
+    });
+  }, [send, tailScaleXEdge]);
+
+  const handleTailScaleXEdgeChange = (enabled: boolean) => {
+    setTailScaleXEdge(enabled);
+  };
+
+  const handleTailScaleLogout = useCallback(() => { 
+    setIsDisconnecting(true);
+    send("logoutTailScale", {}, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to logout TailScale: ${resp.error.data || "Unknown error"}`,
+        );  
+        setIsDisconnecting(false);
+        return;
+      }
+      setTailScaleConnectionState("disconnected"); 
+      setTailScaleLoginUrl("");
+      setTailScaleIP("");  
+      setIsDisconnecting(false);
+    });
+  },[send]);
+
+  const handleTailScaleCanel = useCallback(() => { 
+    setIsDisconnecting(true);
+    send("canelTailScale", {}, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to logout TailScale: ${resp.error.data || "Unknown error"}`,
+        );  
+        setIsDisconnecting(false);
+        return;
+      }
+      setTailScaleConnectionState("disconnected"); 
+      setTailScaleLoginUrl("");
+      setTailScaleIP("");  
+      setIsDisconnecting(false);
+    });
+  },[send]);
+
+  const handleZeroTierLogin = useCallback(() => {  
+    setZeroTierConnectionState("connecting");
+    const currentNetworkID = tempNetworkID;
+    
+    if (!/^[0-9a-f]{16}$/.test(currentNetworkID)) {
+      notifications.error("Please enter a valid Network ID");
+    setZeroTierConnectionState("disconnected");
+      return;      
+    }
+    setZeroTierNetworkID(currentNetworkID);
+    send("loginZeroTier", { networkID: currentNetworkID }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to login ZeroTier: ${resp.error.data || "Unknown error"}`,
+        );
+
+        setZeroTierConnectionState("closed"); 
+        setZeroTierNetworkID("");
+        setZeroTierIP("");
+        return;
+      }
+
+      const result = resp.result as ZeroTierResponse;
+      const validState = ["closed", "connecting", "connected", "disconnected" , "logined" ].includes(result.state)
+      ? result.state as "closed" | "connecting" | "connected" | "disconnected" | "logined"
+      : "closed";
+      setZeroTierConnectionState(validState);
+      setZeroTierIP(result.ip);
+    });
+  }, [send, tempNetworkID]);
+  
+  const handleZeroTierNetworkIdChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value.trim();
+    setTempNetworkID(value);
+  }, []);
+
+  const handleZeroTierLogout = useCallback(() => {  
+    send("logoutZeroTier", { networkID: zeroTierNetworkID }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to logout ZeroTier: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      setZeroTierConnectionState("disconnected");
+      setZeroTierNetworkID("");
+      setZeroTierIP("");
+    });
+  },[send, zeroTierNetworkID]);
 
   return (
     <div className="space-y-4">
@@ -334,136 +392,172 @@ export default function SettingsAccessIndexRoute() {
           description="Manage the mode of Remote access to the device"
         />
 
-        <div className="space-y-4">
-          {!isAdopted && (
-            <>
-              <SettingsItem
-                title="Cloud Provider"
-                description="Select the cloud provider for your device"
-              >
-                <SelectMenuBasic
-                  size="SM"
-                  value={selectedProvider}
-                  onChange={e => handleProviderChange(e.target.value)}
-                  options={[
-                    { value: "jetkvm", label: "JetKVM Cloud" },
-                    { value: "custom", label: "Custom" },
-                  ]}
-                />
-              </SettingsItem>
-
-              {selectedProvider === "custom" && (
-                <div className="mt-4 space-y-4">
-                  <div className="flex items-end gap-x-2">
-                    <InputFieldWithLabel
-                      size="SM"
-                      label="Cloud API URL"
-                      value={cloudApiUrl}
-                      onChange={e => setCloudApiUrl(e.target.value)}
-                      placeholder="https://api.example.com"
-                    />
-                  </div>
-                  <div className="flex items-end gap-x-2">
-                    <InputFieldWithLabel
-                      size="SM"
-                      label="Cloud App URL"
-                      value={cloudAppUrl}
-                      onChange={e => setCloudAppUrl(e.target.value)}
-                      placeholder="https://app.example.com"
-                    />
-                  </div>
-                </div>
-              )}
-            </>
-          )}
-
-          {/* Show security info for JetKVM Cloud */}
-          {selectedProvider === "jetkvm" && (
-            <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 border-slate-800/20 dark:border-slate-300/20" />
-
-                  <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">
+      <div className="space-y-4">
+        {/* Add TailScale settings item */}
+        <SettingsItem
+          title="TailScale"
+          badge="Experimental"
+          description="Connect to TailScale VPN network"
+        >
+          <div className="space-y-4">
+            { ((tailScaleConnectionState === "disconnected") || (tailScaleConnectionState === "closed")) && (
               <Button
-                onClick={() => onCloudAdoptClick(cloudApiUrl, cloudAppUrl)}
                 size="SM"
-                theme="primary"
-                text="Adopt KVM to Cloud"
+                theme="light"
+                text="Enable TailScale"
+                onClick={handleTailScaleLogin}
+              />
+            )}
+          </div>
+        </SettingsItem>
+        <SettingsItem
+          title=""
+          description="TailScale use xEdge server"
+        >
+          <Checkbox
+            checked={tailScaleXEdge}
+            onChange={e => {
+              if (tailScaleConnectionState !== "disconnected") {
+                notifications.error("TailScale is running and this setting cannot be modified");
+                return;
+              }
+              handleTailScaleXEdgeChange(e.target.checked);
+            }}
+          />
+        </SettingsItem>
+      </div>
+              
+      <div className="space-y-4">
+        {tailScaleConnectionState === "connecting" && (
+          <div className="flex items-center justify-between gap-x-2">
+            <p>Connecting...</p>
+            <Button
+              size="SM"
+              theme="light"
+              text="Canel"
+              onClick={handleTailScaleCanel}
+            /> 
+          </div>
+        )}
+        {tailScaleConnectionState === "connected" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              {tailScaleLoginUrl && (
+                <p>Login URL: <a href={tailScaleLoginUrl} target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400">LoginUrl</a></p> 
+              )}
+              {!tailScaleLoginUrl && (
+                <p>Wait to obtain the Login URL</p> 
+              )} 
+              <Button
+                size="SM"
+                theme="light"
+                text= { isDisconnecting  ? "Quitting..." : "Quit"}
+                onClick={handleTailScaleLogout}
+                disabled={ isDisconnecting === true }
               />
             </div>
-          ) : (
-            <div>
-              <div className="space-y-2">
-                <p className="text-sm text-slate-600 dark:text-slate-300">
-                  Your device is adopted to the Cloud
-                </p>
-                <div>
-                  <Button
-                    size="SM"
-                    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>
+        )}
+        {tailScaleConnectionState === "logined" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>IP: {tailScaleIP}</p>
+              <Button
+                size="SM"
+                theme="light"
+                text= { isDisconnecting  ? "Quitting..." : "Quit"}
+                onClick={handleTailScaleLogout}
+                disabled={ isDisconnecting === true }
+              />
             </div>
-          )}
-        </div>
+          </div>
+        )}
+        {tailScaleConnectionState === "closed" && (
+          <div className="text-sm text-red-600 dark:text-red-400">
+            <p>Connect fail, please retry</p>
+          </div>    
+        )}  
+      </div>
+
+      <div className="space-y-4">
+        {/* Add ZeroTier settings item */}
+        <SettingsItem
+          title="ZeroTier"
+          badge="Experimental"
+          description="Connect to ZeroTier VPN network"
+        >
+        </SettingsItem>
+      </div>
+
+      <div className="space-y-4"> 
+        {zeroTierConnectionState === "connecting" && (
+          <div className="text-sm text-slate-700 dark:text-slate-300">
+            <p>Connecting...</p>
+          </div>
+        )}
+        {zeroTierConnectionState === "connected" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>Network ID: {zeroTierNetworkID}</p>
+              <Button
+                size="SM"
+                theme="light"
+                text="Quit"
+                onClick={handleZeroTierLogout}
+              />
+            </div>
+          </div>
+        )}
+       {zeroTierConnectionState === "logined" && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>Network ID: {zeroTierNetworkID}</p>
+              <Button
+                size="SM"
+                theme="light"
+                text="Quit"
+                onClick={handleZeroTierLogout}
+              />              
+            </div>
+            <div className="flex items-center gap-x-2 justify-between">
+              <p>Network IP: {zeroTierIP}</p>
+            </div>
+          </div>
+       )} 
+       {zeroTierConnectionState === "closed" && (
+          <div className="flex items-center gap-x-2 justify-between">
+            <p>Connect fail, please retry</p>
+            <Button
+              size="SM"
+              theme="light"
+              text="Retry"
+              onClick={handleZeroTierLogout}
+            /> 
+          </div>
+        )
+       }
+      </div>
+      
+      <div className="space-y-4"> 
+        {(zeroTierConnectionState === "disconnected") && (
+          <div className="flex items-end gap-x-2">
+            <InputFieldWithLabel
+              size="SM"
+              label="Network ID"
+              value={tempNetworkID}
+              onChange={handleZeroTierNetworkIdChange}
+              placeholder="Enter ZeroTier Network ID"
+            /> 
+            <Button
+              size="SM"
+              theme="light"
+              text="Join in"
+              onClick={handleZeroTierLogin}
+            />
+          </div> 
+        )}
+      </div>    
+
       </div>
     </div>
   );