add window manager

client/ui/frontend/bindings/github.com/netbirdio/netbird/client/ui/services/index.ts

@@ -10,7 +10,7 @@ import * as ProfileSwitcher from "./profileswitcher.js";
 import * as Profiles from "./profiles.js";
 import * as Settings from "./settings.js";
 import * as Update from "./update.js";
-import * as Windows from "./windows.js";
+import * as WindowManager from "./windowmanager.js";
 export {
     Connection,
     Debug,
@@ -21,7 +21,7 @@ export {
     Profiles,
     Settings,
     Update,
-    Windows
+    WindowManager
 };
 
 export {

client/ui/frontend/src/app.tsx

@@ -12,7 +12,7 @@ import { Settings } from "@/modules/settings/Settings.tsx";
 import { SkeletonTheme } from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import { welcome } from "@/lib/welcome";
-import Login from "@/pages/Login.tsx";
+import BrowserLogin from "@/pages/BrowserLogin.tsx";
 
 welcome();
 
@@ -22,7 +22,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
             <HashRouter>
                 <Routes>
                     <Route path="/quick" element={<QuickActions />} />
-                    <Route path="/login" element={<Login />} />
+                    <Route path="/browser-login" element={<BrowserLogin />} />
                     <Route path="/update" element={<Update />} />
                     <Route path="/session-expired" element={<SessionExpired />} />
                     <Route element={<SettingsLayout />}>

client/ui/frontend/src/layouts/ConnectionStatusSwitch.tsx

@@ -1,7 +1,6 @@
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Dialogs } from "@wailsio/runtime";
-import { Connection } from "@bindings/services";
+import { Dialogs, Events } from "@wailsio/runtime";
+import { Connection, WindowManager } from "@bindings/services";
 import { ConnectionState } from "@/components/NetBirdConnectToggle.tsx";
 import { ToggleSwitch } from "@/components/ToggleSwitch.tsx";
 import { useStatus } from "@/hooks/useStatus";
@@ -16,13 +15,87 @@ const STATUS_LABEL: Record<ConnectionState, string> = {
     [ConnectionState.Disconnecting]: "Disconnecting...",
 };
 
+const EVENT_BROWSER_LOGIN_CANCEL = "browser-login:cancel";
+
 const errorMessage = (e: unknown) =>
     e instanceof Error ? e.message : String(e);
 
+// startLogin drives the daemon's SSO login end-to-end. The BrowserLogin
+// popup window is the only login UI; errors surface as a native
+// Dialogs.Error. Concurrent calls are dropped via the inFlight guard.
+let loginInFlight = false;
+async function startLogin(): Promise<void> {
+    if (loginInFlight) return;
+    loginInFlight = true;
+
+    let cancelled = false;
+    let offCancel: (() => void) | undefined;
+
+    try {
+        const result = await Connection.Login({
+            profileName: "",
+            username: "",
+            managementUrl: "",
+            setupKey: "",
+            preSharedKey: "",
+            hostname: "",
+            hint: "",
+        });
+
+        if (result.needsSsoLogin) {
+            const uri = result.verificationUriComplete || result.verificationUri;
+            if (uri) {
+                Connection.OpenURL(uri).catch(console.error);
+                WindowManager.OpenBrowserLogin(uri).catch(console.error);
+            }
+
+            const cancelPromise = new Promise<void>((resolve) => {
+                offCancel = Events.On(EVENT_BROWSER_LOGIN_CANCEL, () => {
+                    cancelled = true;
+                    resolve();
+                });
+            });
+
+            const waitPromise = Connection.WaitSSOLogin({
+                userCode: result.userCode,
+                hostname: "",
+            });
+
+            try {
+                await Promise.race([waitPromise, cancelPromise]);
+            } finally {
+                WindowManager.CloseBrowserLogin().catch(console.error);
+            }
+
+            if (cancelled) {
+                // Tell the daemon to drop the in-flight WaitSSOLogin so a
+                // future Login starts fresh; see services/connection.go:74.
+                try {
+                    await Connection.Down();
+                } catch (e) {
+                    console.error(e);
+                }
+                return;
+            }
+        }
+
+        await Connection.Up({ profileName: "", username: "" });
+    } catch (e) {
+        WindowManager.CloseBrowserLogin().catch(console.error);
+        if (cancelled) return;
+        await Dialogs.Error({
+            Title: "Login Failed",
+            Message: errorMessage(e),
+        });
+    } finally {
+        offCancel?.();
+        loginInFlight = false;
+    }
+}
+
 export const ConnectionStatusSwitch = () => {
     const { status, refresh } = useStatus();
     const { activeProfile, username } = useProfile();
-    const navigate = useNavigate();
 
     const daemonState = status?.status ?? "Idle";
     const needsLogin =
@@ -89,7 +162,7 @@ export const ConnectionStatusSwitch = () => {
     const handleSwitch = (next: boolean) => {
         if (unreachable || action !== null) return;
         if (needsLogin) {
-            navigate("/login");
+            void startLogin().finally(() => refresh());
             return;
         }
         if (next && connState === ConnectionState.Disconnected) {

client/ui/frontend/src/layouts/Header.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { PanelRightCloseIcon, PanelRightOpenIcon, SettingsIcon } from "lucide-react";
 import { Window } from "@wailsio/runtime";
-import { Windows as WindowsSvc } from "@bindings/services";
+import { WindowManager } from "@bindings/services";
 import { ProfileSelector } from "@/components/ProfileSelector.tsx";
 import { IconButton } from "@/components/IconButton.tsx";
 import { useAppearance } from "@/modules/appearance/AppearanceContext.tsx";
@@ -47,7 +47,7 @@ export const Header = () => {
     };
 
     const openSettings = () => {
-        void WindowsSvc.OpenSettings().catch(() => {});
+        void WindowManager.OpenSettings().catch(() => {});
     };
 
     return (

client/ui/frontend/src/pages/BrowserLogin.tsx

@@ -0,0 +1,54 @@
+import { useCallback } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Events } from "@wailsio/runtime";
+import { Loader2 } from "lucide-react";
+import { Connection } from "@bindings/services";
+import { Button } from "../components/Button";
+import netbirdFull from "@/assets/logos/netbird-full.svg";
+
+const EVENT_CANCEL = "browser-login:cancel";
+
+export default function BrowserLogin() {
+  const [params] = useSearchParams();
+  const uri = params.get("uri") ?? "";
+
+  const tryAgain = useCallback(() => {
+    if (!uri) return;
+    Connection.OpenURL(uri).catch(console.error);
+  }, [uri]);
+
+  const cancel = useCallback(() => {
+    void Events.Emit(EVENT_CANCEL);
+  }, []);
+
+  return (
+    <div className="flex h-screen flex-col items-center justify-center gap-3 p-8 text-center">
+      <img src={netbirdFull} alt="NetBird" className="mb-2 h-9" />
+      <h1 className="text-lg font-semibold text-white">
+        Continue in your browser to complete the login
+      </h1>
+      <p className="max-w-sm text-sm text-nb-gray-400">
+        Please complete the account authentication process in the browser tab
+        and continue from there.
+      </p>
+      <div className="flex items-center gap-2 text-sm text-nb-gray-400">
+        <Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
+        Waiting for sign-in…
+      </div>
+      <p className="text-sm text-nb-gray-400">
+        Not seeing the browser tab?{" "}
+        <button
+          type="button"
+          onClick={tryAgain}
+          disabled={!uri}
+          className="text-netbird hover:underline disabled:opacity-40 disabled:cursor-not-allowed"
+        >
+          Try again
+        </button>
+      </p>
+      <Button variant="secondary" onClick={cancel} className="mt-2">
+        Cancel
+      </Button>
+    </div>
+  );
+}

client/ui/frontend/src/pages/Login.tsx

@@ -1,159 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { ExternalLink, Loader2, AlertTriangle, X, RotateCcw } from "lucide-react";
-import { Connection } from "../../bindings/github.com/netbirdio/netbird/client/ui/services";
-import { Button } from "../components/Button";
-
-type Phase = "starting" | "browser" | "connecting" | "error";
-
-export default function Login() {
-  const navigate = useNavigate();
-  const [phase, setPhase] = useState<Phase>("starting");
-  const [verificationUri, setVerificationUri] = useState<string>("");
-  const [errorMsg, setErrorMsg] = useState<string>("");
-  // attempt is bumped every time the user asks for a fresh start, which
-  // re-arms the useEffect below so the daemon's Login RPC is dialed again.
-  const [attempt, setAttempt] = useState(0);
-  const cancelledRef = useRef(false);
-
-  useEffect(() => {
-    cancelledRef.current = false;
-    setPhase("starting");
-    setVerificationUri("");
-    setErrorMsg("");
-
-    (async () => {
-      try {
-        const result = await Connection.Login({
-          profileName: "",
-          username: "",
-          managementUrl: "",
-          setupKey: "",
-          preSharedKey: "",
-          hostname: "",
-          hint: "",
-        });
-        if (cancelledRef.current) return;
-
-        if (result.needsSsoLogin) {
-          const uri = result.verificationUriComplete || result.verificationUri;
-          setVerificationUri(uri);
-          setPhase("browser");
-          if (uri) Connection.OpenURL(uri).catch(console.error);
-
-          await Connection.WaitSSOLogin({
-            userCode: result.userCode,
-            hostname: "",
-          });
-          if (cancelledRef.current) return;
-        }
-
-        setPhase("connecting");
-        await Connection.Up({ profileName: "", username: "" });
-        if (cancelledRef.current) return;
-
-        navigate("/", { replace: true });
-      } catch (e) {
-        if (cancelledRef.current) return;
-        setErrorMsg(String(e));
-        setPhase("error");
-      }
-    })();
-
-    return () => {
-      cancelledRef.current = true;
-    };
-  }, [navigate, attempt]);
-
-  // restart aborts any in-flight wait by toggling the cancellation flag,
-  // tells the daemon to drop whatever it's holding (a stale WaitSSOLogin
-  // can wedge the daemon for a previous UserCode), and then bumps attempt
-  // so the effect re-runs with a clean slate.
-  const restart = useCallback(async () => {
-    cancelledRef.current = true;
-    try {
-      await Connection.Down();
-    } catch (e) {
-      console.error(e);
-    }
-    setAttempt((n) => n + 1);
-  }, []);
-
-  // Cancel must also tell the daemon to abandon the in-flight WaitSSOLogin.
-  // Without Down(), the daemon stays parked on the OAuth flow's UserCode
-  // forever; subsequent Login calls re-use the cached flow but the user has
-  // no way out. Down() triggers the daemon's actCancel(), which unblocks
-  // WaitSSOLogin with a context-canceled error so our promise settles.
-  const cancel = useCallback(async () => {
-    cancelledRef.current = true;
-    try {
-      await Connection.Down();
-    } catch (e) {
-      console.error(e);
-    }
-    navigate("/", { replace: true });
-  }, [navigate]);
-
-  if (phase === "error") {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-4 p-6 text-center">
-        <AlertTriangle className="h-8 w-8 text-red-500" strokeWidth={1.5} />
-        <h1 className="text-xl font-semibold">Login failed</h1>
-        <p className="max-w-sm break-words text-sm text-nb-gray-500">{errorMsg}</p>
-        <div className="flex gap-2">
-          <Button onClick={restart}>
-            <RotateCcw className="h-4 w-4" strokeWidth={1.5} /> Try again
-          </Button>
-          <Button variant="secondary" onClick={cancel}>
-            Back
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  if (phase === "browser") {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-4 p-6 text-center">
-        <h1 className="text-xl font-semibold">Continue in your browser</h1>
-        <p className="max-w-sm text-sm text-nb-gray-500">
-          A browser tab should have opened. Sign in there — this window will
-          continue automatically once you're done.
-        </p>
-        {verificationUri && (
-          <Button onClick={() => Connection.OpenURL(verificationUri).catch(console.error)}>
-            <ExternalLink className="h-4 w-4" strokeWidth={1.5} />
-            Reopen URL
-          </Button>
-        )}
-        <p className="max-w-sm break-all font-mono text-xs text-nb-gray-500">
-          {verificationUri}
-        </p>
-        <div className="flex items-center gap-2 text-sm text-nb-gray-500">
-          <Loader2 className="h-4 w-4 animate-spin" strokeWidth={1.5} />
-          Waiting for sign-in…
-        </div>
-        <div className="flex gap-2 pt-2">
-          <Button variant="secondary" onClick={restart}>
-            <RotateCcw className="h-4 w-4" strokeWidth={1.5} /> Restart
-          </Button>
-          <Button variant="ghost" onClick={cancel}>
-            <X className="h-4 w-4" strokeWidth={1.5} /> Cancel
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  const message =
-    phase === "connecting" ? "Bringing the connection up…" : "Starting login…";
-  return (
-    <div className="flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
-      <Loader2 className="h-8 w-8 animate-spin text-netbird" strokeWidth={1.5} />
-      <p className="text-sm text-nb-gray-500">{message}</p>
-      <Button variant="ghost" onClick={cancel}>
-        <X className="h-4 w-4" strokeWidth={1.5} /> Cancel
-      </Button>
-    </div>
-  );
-}