sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-05-20 07:39:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix open settings in tray, prevent loading profiles when daemon is down

Browse Source
This commit is contained in:
Eduard Gert
2026-05-18 13:07:34 +02:00
parent 6b44d65cac
commit 741ce8581d
24 changed files with 459 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/ui/CLAUDE.md
View File

@@ -88,10 +88,11 @@ Also: `ProfileSwitcher.SwitchActive` mirrors the daemon switch into the user-sid
The main window is created up front in `main.go`. Auxiliary windows are created on demand by `services.WindowManager`:
- **Settings** (`/#/settings`) — opened from the header gear icon (`layouts/Header.tsx → WindowManager.OpenSettings`). Frameless-look (translucent macOS backdrop, hidden inset title bar), fixed 900×640, no resize, no minimise/maximise.
- **Settings** (`/#/settings`) — opened from the header gear icon (`layouts/Header.tsx → WindowManager.OpenSettings`) **and** the tray's Settings menu entry (`tray.go openSettings` → `WindowManager.OpenSettings`). Both call sites go through `WindowManager` so the user sees the same dedicated frameless window from either trigger — the tray used to repurpose the main window via `SetURL("/#/settings")`, which replaced the main UI in place. Frameless-look (translucent macOS backdrop, hidden inset title bar), fixed 900×640, no resize, no minimise/maximise.
- **BrowserLogin** (`/#/browser-login?uri=…`) — opened by the connection toggle's SSO flow (`layouts/ConnectionStatusSwitch.tsx`). 460×440, fixed size. The close button (red X) fires `EventBrowserLoginCancel` so the JS-side `startLogin()` can tear down the daemon's pending `WaitSSOLogin`. `WindowManager.CloseBrowserLogin` closes it programmatically when the flow completes.
- **SessionExpired** (`/#/session-expired`) and **SessionAboutToExpire** (`/#/session-about-to-expire?seconds=<n>`) — opened by `WindowManager.OpenSessionExpired` / `OpenSessionAboutToExpire(seconds)`. 460×380, fixed size, `AlwaysOnTop: true` (the user can't miss them). The React-side buttons close the window via `WindowManager.CloseSession*` and (for Sign-in / Stay-connected) emit `EventTriggerLogin` so the main window's `startLogin()` orchestrator handles the SSO flow. Currently triggered only by the DEV-only "Development" Settings tab; daemon-status integration is a follow-up.
Both windows are **destroyed** on close (mutex-guarded singleton; `closing` hook nils the field). Destroying rather than hiding is deliberate — Wails' macOS dock-reopen handler resurrects hidden windows, which we don't want for auxiliaries.
All four auxiliary windows are **destroyed** on close (mutex-guarded singleton; `closing` hook nils the field). Destroying rather than hiding is deliberate — Wails' macOS dock-reopen handler resurrects hidden windows, which we don't want for auxiliaries.
The main window is **hidden** on close (the `WindowClosing` hook calls `e.Cancel(); window.Hide()`). The user reaches "really quit" through the tray → Quit menu entry.

11
client/ui/frontend/CLAUDE.md
View File

@@ -26,11 +26,12 @@ React 18 + TS 5.7 (`strict`, `noImplicitAny: false`) + Vite 6 + Tailwind 3 (`dar
| `/quick` | `QuickActions` | none | Standalone — **prototype**, not currently invoked by the Go side |
| `/browser-login` | `BrowserLogin` | none | Auxiliary window (Go `WindowManager.OpenBrowserLogin`) |
| `/update` | `Update` (pages) | none | Main window during enforced-update install |
| `/session-expired` | `SessionExpired` | none | Standalone — **prototype**, no buttons wired |
| `/session-expired` | `SessionExpired` (modules/session) | none | Auxiliary window (Go `WindowManager.OpenSessionExpired`, always-on-top) |
| `/session-about-to-expire` | `SessionAboutToExpire` (modules/session) | none | Auxiliary window (Go `WindowManager.OpenSessionAboutToExpire(seconds)`, always-on-top, mm:ss countdown via `?seconds=`) |
| `/settings` | `Settings` | `SettingsLayout` | Auxiliary window (Go `WindowManager.OpenSettings`) |
| `*` | `<Navigate to="/">` | `AppLayout` | Catch-all |
`AppLayout` wraps `Header + <Outlet/>` in this provider order: `ProfileProvider → DebugBundleProvider → ClientVersionProvider`. The order matters — `DebugBundleProvider` reads `useProfile`, and `ClientVersionProvider` paints the `<UpdatingOverlay/>` so it has to be outermost in terms of z-index but innermost in the tree. `AppLayout` also owns the wide/narrow `expanded` state as plain `useState` (no persistence) and passes it to `Header` via props and to `Main` via Outlet context (`MainOutletContext`).
`AppLayout` wraps `Header + <Outlet/>` in this provider order: `StatusProvider → ProfileProvider → DebugBundleProvider → ClientVersionProvider`. `StatusProvider` (in `modules/daemon-status/StatusContext.tsx`) owns the single `Peers.Get` + `netbird:status` subscription, exposes `{ status, error, refresh, isReady, isDaemonAvailable, isDaemonUnavailable }`, **and only renders its children when the daemon is reachable** — until the first `Peers.Get` resolves and on `DaemonUnavailable` it short-circuits to just the `<DaemonUnavailableOverlay/>` (also owned by the provider). The consequence: every context downstream (`ProfileProvider`, `DebugBundleProvider`, `ClientVersionProvider`) can assume the daemon is reachable at mount time — no per-context `useStatus` gating. When the daemon flips back to unavailable the whole downstream subtree unmounts and remounts fresh once it returns. The remaining order is structural — `DebugBundleProvider` reads `useProfile`, and `ClientVersionProvider` paints `<UpdatingOverlay/>` so it has to be outermost in z-index but innermost in the tree. `AppLayout` also owns the wide/narrow `expanded` state as plain `useState` (no persistence) and passes it to `Header` via props and to `Main` via Outlet context (`MainOutletContext`).
`SettingsLayout` uses the same provider stack minus the `Header`. It also reserves a 38px `wails-draggable` strip at the top so the macOS traffic-light buttons (the window uses `MacTitleBarHiddenInset`) don't overlap content.
@@ -44,7 +45,7 @@ Subscribe with `Events.On(name, handler)`. The handler receives `{ data: <typed
| Event name (string) | Payload | Emitted by | Consumed by |
|---|---|---|---|
| `netbird:status` | `Status` | `services/peers.go statusStreamLoop` | `hooks/useStatus` |
| `netbird:status` | `Status` | `services/peers.go statusStreamLoop` | `modules/daemon-status/StatusContext` (`useStatus`) |
| `netbird:event` | `SystemEvent` | `services/peers.go toastStreamLoop` | Not currently subscribed on the TS side — Status is read via `useStatus().status.events` instead. The tray (Go) consumes it for OS notifications. |
| `netbird:profile:changed` | `ProfileRef` | `services/profileswitcher.go SwitchActive` | `modules/profile/ProfileContext` refreshes so a tray-initiated switch paints in the React UI. |
| `netbird:update:available` | `UpdateAvailable` | `services/peers.go fanOutUpdateEvents` | Not directly subscribed on the TS side; `ClientVersionContext` derives `updateVersion` from `status.events` metadata instead. |
@@ -58,7 +59,7 @@ If you wire a new daemon-event subscriber on the TS side, prefer subscribing onc
State that crosses screens / windows lives in context. Each provider is mounted exactly once inside `AppLayout` or `SettingsLayout`.
- **`useStatus`** (`hooks/useStatus.ts`) — `{ status, error, refresh }`. Fetches `Peers.Get()` once, re-renders on every `netbird:status` push. `refresh()` after Connect/Disconnect to dodge a few hundred ms of event-stream lag.
- **`useStatus`** (`modules/daemon-status/StatusContext.tsx`) — `{ status, error, refresh, isReady, isDaemonAvailable, isDaemonUnavailable }`. The provider owns a single `Peers.Get()` + `netbird:status` subscription and renders `<DaemonUnavailableOverlay/>`. `refresh()` after Connect/Disconnect to dodge a few hundred ms of event-stream lag. Other contexts (e.g. `ProfileContext`) read the boolean flags to skip RPCs while the daemon socket is down.
- **`ProfileContext`** (`modules/profile/`) — `username`, `activeProfile`, `profiles`, plus `refresh` / `switchProfile` / `addProfile` / `removeProfile` / `logoutProfile`. `switchProfile` delegates to `ProfileSwitcher.SwitchActive` (the Go-side single source of truth — drives the optimistic-Connecting paint and `Peers` suppression). The other methods are thin wrappers over `Profiles.*` / `Connection.Logout` plus a `refresh()`.
@@ -160,7 +161,7 @@ Defined in `tailwind.config.ts`. `nb-gray` is the neutral palette (background =
- **`screens/Profiles.tsx`** still imports bindings via the deep relative path. It's the example of the preferred `ProfileSwitcher.SwitchActive` flow but otherwise pre-AppLayout.
- **`pages/Debug.tsx`** is the legacy debug-bundle screen. The polished flow is in `modules/settings/SettingsTroubleshooting.tsx` (via `useDebugBundle`). `pages/Debug.tsx` isn't currently routed.
- **`pages/Update.tsx`** and **`screens/Update.tsx`** are two different update pages. The route table points at `pages/Update.tsx` (the production one with the 15-minute timeout, daemon-down-grace, and error-mapping). The `screens/Update.tsx` is an older simpler variant.
- **`pages/SessionExpired.tsx`** is fully rendered but the Sign-in / Later buttons have no onClick handlers yet.
- **`modules/session/SessionExpired.tsx`** and **`modules/session/SessionAboutToExpire.tsx`** are the always-on-top auxiliary windows. Today they're only triggered via the DEV-only "Development" tab in Settings (`SettingsDevelopment.tsx`) — a daemon-status hook (status `SessionExpired`, plus a future "about-to-expire" signal) will drive them later. Sign-in / Stay-connected emit `EventTriggerLogin` so the main window's `startLogin()` orchestrator handles the SSO flow; Logout uses `Connection.Logout({profileName, username})`.
- **`screens/QuickActions.tsx`** is wired to `/quick` in the route table but nothing on the Go side currently navigates there.
- **`UpdateAvailableBanner`** is force-enabled via `FORCE_UPDATE_AVAILABLE = true` and additionally TODO-commented for the "only when management has auto updates enabled + force updates is disabled" case.
- **`lib/MainModuleContext.tsx`** is exported but unused. Candidate for deletion.

4
client/ui/frontend/src/app.tsx
View File

@@ -3,7 +3,8 @@ import ReactDOM from "react-dom/client";
import "./globals.css";
import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
import QuickActions from "@/screens/QuickActions.tsx";
import SessionExpired from "@/pages/SessionExpired.tsx";
import SessionExpired from "@/modules/session/SessionExpired.tsx";
import SessionAboutToExpire from "@/modules/session/SessionAboutToExpire.tsx";
import Update from "@/screens/Update.tsx";
import { AppLayout } from "@/layouts/AppLayout.tsx";
import { SettingsLayout } from "@/layouts/SettingsLayout.tsx";
@@ -34,6 +35,7 @@ initI18n()
<Route path="/browser-login" element={<BrowserLogin />} />
<Route path="/update" element={<Update />} />
<Route path="/session-expired" element={<SessionExpired />} />
<Route path="/session-about-to-expire" element={<SessionAboutToExpire />} />
<Route element={<SettingsLayout />}>
<Route path="settings" element={<Settings />} />
</Route>

45
client/ui/frontend/src/hooks/useStatus.ts
View File

@@ -1,45 +0,0 @@
import { useCallback, useEffect, useState } from "react";
import { Events } from "@wailsio/runtime";
import { Peers } from "@bindings/services";
import type { Status } from "@bindings/services/models.js";
const EVENT_STATUS = "netbird:status";
// useStatus loads the current daemon status once and re-renders whenever the
// peers service emits a fresh snapshot over the Wails event bus. Callers can
// also force a manual refresh (e.g. right after Connection.Up/Down) so the
// view never lags behind a user action even if the daemon event stream is
// briefly silent.
export function useStatus(): {
status: Status | null;
error: string | null;
refresh: () => Promise<void>;
} {
const [status, setStatus] = useState<Status | null>(null);
const [error, setError] = useState<string | null>(null);
const refresh = useCallback(async () => {
try {
const s = await Peers.Get();
setStatus(s);
setError(null);
} catch (e) {
setError(String(e));
}
}, []);
useEffect(() => {
void refresh();
const off = Events.On(EVENT_STATUS, (ev: { data: Status }) => {
setStatus(ev.data);
setError(null);
});
return () => {
off();
};
}, [refresh]);
return { status, error, refresh };
}

6
client/ui/frontend/src/i18n/locales/de/common.json
View File

@@ -268,6 +268,12 @@
"sessionExpired.later": "Später",
"sessionExpired.signIn": "Anmelden",
"sessionAboutToExpire.title": "Sitzung läuft bald ab",
"sessionAboutToExpire.description": "Ihre NetBird-Sitzung läuft in Kürze ab. Bleiben Sie verbunden, damit Ihre Geräte online bleiben.",
"sessionAboutToExpire.stay": "Verbunden bleiben",
"sessionAboutToExpire.logout": "Abmelden",
"sessionAboutToExpire.expired": "Sitzung abgelaufen",
"peers.search.placeholder": "Nach Peer-Name, DNS oder IP-Adresse suchen",
"peers.filter.all": "Alle",
"peers.filter.online": "Online",

6
client/ui/frontend/src/i18n/locales/en/common.json
View File

@@ -268,6 +268,12 @@
"sessionExpired.later": "Later",
"sessionExpired.signIn": "Sign in",
"sessionAboutToExpire.title": "Session expiring soon",
"sessionAboutToExpire.description": "Your NetBird session will expire shortly. Stay connected to keep your devices online.",
"sessionAboutToExpire.stay": "Stay connected",
"sessionAboutToExpire.logout": "Logout",
"sessionAboutToExpire.expired": "Session expired",
"peers.search.placeholder": "Search by peer name, DNS or IP address",
"peers.filter.all": "All",
"peers.filter.online": "Online",

6
client/ui/frontend/src/i18n/locales/hu/common.json
View File

@@ -268,6 +268,12 @@
"sessionExpired.later": "Később",
"sessionExpired.signIn": "Bejelentkezés",
"sessionAboutToExpire.title": "A munkamenet hamarosan lejár",
"sessionAboutToExpire.description": "A NetBird munkamenete hamarosan lejár. Maradjon csatlakoztatva, hogy az eszközei elérhetők maradjanak.",
"sessionAboutToExpire.stay": "Maradjon csatlakoztatva",
"sessionAboutToExpire.logout": "Kijelentkezés",
"sessionAboutToExpire.expired": "Munkamenet lejárt",
"peers.search.placeholder": "Keresés társ neve, DNS vagy IP-cím alapján",
"peers.filter.all": "Összes",
"peers.filter.online": "Online",

21
client/ui/frontend/src/layouts/AppLayout.tsx
View File

@@ -2,7 +2,7 @@ import { useState } from "react";
import { Outlet } from "react-router-dom";
import { Header } from "@/layouts/Header.tsx";
import { ClientVersionProvider } from "@/modules/auto-update/ClientVersionContext.tsx";
import { DaemonUnavailableOverlay } from "@/modules/daemon-status/DaemonUnavailableOverlay.tsx";
import { StatusProvider } from "@/modules/daemon-status/StatusContext.tsx";
import { DebugBundleProvider } from "@/modules/debug-bundle/DebugBundleContext.tsx";
import { ProfileProvider } from "@/modules/profile/ProfileContext.tsx";
@@ -16,15 +16,16 @@ export const AppLayout = () => {
const [expanded, setExpanded] = useState(false);
return (
<div className={"relative flex h-full flex-col"}>
<ProfileProvider>
<DebugBundleProvider>
<ClientVersionProvider>
<Header expanded={expanded} setExpanded={setExpanded} />
<Outlet context={{ expanded } satisfies MainOutletContext} />
<DaemonUnavailableOverlay />
</ClientVersionProvider>
</DebugBundleProvider>
</ProfileProvider>
<StatusProvider>
<ProfileProvider>
<DebugBundleProvider>
<ClientVersionProvider>
<Header expanded={expanded} setExpanded={setExpanded} />
<Outlet context={{ expanded } satisfies MainOutletContext} />
</ClientVersionProvider>
</DebugBundleProvider>
</ProfileProvider>
</StatusProvider>
</div>
);
};

2
client/ui/frontend/src/layouts/ConnectionStatusSwitch.tsx
View File

@@ -4,7 +4,7 @@ import { Dialogs, Events } from "@wailsio/runtime";
import { Connection, WindowManager } from "@bindings/services";
import i18next from "@/lib/i18n";
import { ToggleSwitch } from "@/components/ToggleSwitch.tsx";
import { useStatus } from "@/hooks/useStatus";
import { useStatus } from "@/modules/daemon-status/StatusContext.tsx";
import { useProfile } from "@/modules/profile/ProfileContext.tsx";
import { cn } from "@/lib/cn.ts";
import netbirdFullLogo from "@/assets/logos/netbird-full.svg";

29
client/ui/frontend/src/layouts/SettingsLayout.tsx
View File

@@ -1,6 +1,6 @@
import { Outlet } from "react-router-dom";
import { ClientVersionProvider } from "@/modules/auto-update/ClientVersionContext.tsx";
import { DaemonUnavailableOverlay } from "@/modules/daemon-status/DaemonUnavailableOverlay.tsx";
import { StatusProvider } from "@/modules/daemon-status/StatusContext.tsx";
import { DebugBundleProvider } from "@/modules/debug-bundle/DebugBundleContext.tsx";
import { ProfileProvider } from "@/modules/profile/ProfileContext.tsx";
@@ -18,19 +18,20 @@ import { ProfileProvider } from "@/modules/profile/ProfileContext.tsx";
export const SettingsLayout = () => {
return (
<div className={"relative flex h-full flex-col"}>
<ProfileProvider>
<DebugBundleProvider>
<ClientVersionProvider>
<div
className={
"wails-draggable cursor-default select-none h-[38px] shrink-0"
}
/>
<Outlet />
<DaemonUnavailableOverlay />
</ClientVersionProvider>
</DebugBundleProvider>
</ProfileProvider>
<StatusProvider>
<ProfileProvider>
<DebugBundleProvider>
<ClientVersionProvider>
<div
className={
"wails-draggable cursor-default select-none h-[38px] shrink-0"
}
/>
<Outlet />
</ClientVersionProvider>
</DebugBundleProvider>
</ProfileProvider>
</StatusProvider>
</div>
);
};

6
client/ui/frontend/src/modules/daemon-status/DaemonUnavailableOverlay.tsx
View File

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
import { AlertCircleIcon, BookText } from "lucide-react";
import { Browser } from "@wailsio/runtime";
import { Button } from "@/components/Button";
import { useStatus } from "@/hooks/useStatus";
import { useStatus } from "@/modules/daemon-status/StatusContext.tsx";
const DOCS_URL = "https://docs.netbird.io/how-to/installation";
@@ -12,9 +12,9 @@ function openUrl(url: string) {
export const DaemonUnavailableOverlay = () => {
const { t } = useTranslation();
const { status } = useStatus();
const { isDaemonUnavailable } = useStatus();
if (status?.status !== "DaemonUnavailable") return null;
if (!isDaemonUnavailable) return null;
return (
<div

96
client/ui/frontend/src/modules/daemon-status/StatusContext.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
import { Events } from "@wailsio/runtime";
import { Peers } from "@bindings/services";
import type { Status } from "@bindings/services/models.js";
import { DaemonUnavailableOverlay } from "@/modules/daemon-status/DaemonUnavailableOverlay.tsx";
const EVENT_STATUS = "netbird:status";
// StatusContext is the single subscription point for the daemon status
// stream. It owns the initial Peers.Get, the netbird:status event listener,
// and the synthetic DaemonUnavailable handling. The provider also renders
// the DaemonUnavailableOverlay so every layout that mounts it inherits the
// same blocker without re-importing the component.
//
// Boolean flags consumers should prefer over hand-rolled checks:
// - isReady first Peers.Get has resolved
// - isDaemonUnavailable ready and status === "DaemonUnavailable"
// - isDaemonAvailable ready and status !== "DaemonUnavailable"
type StatusContextValue = {
status: Status | null;
error: string | null;
refresh: () => Promise<void>;
isReady: boolean;
isDaemonUnavailable: boolean;
isDaemonAvailable: boolean;
};
const StatusContext = createContext<StatusContextValue | null>(null);
export const useStatus = () => {
const ctx = useContext(StatusContext);
if (!ctx) {
throw new Error("useStatus must be used inside StatusProvider");
}
return ctx;
};
export const StatusProvider = ({ children }: { children: ReactNode }) => {
const [status, setStatus] = useState<Status | null>(null);
const [error, setError] = useState<string | null>(null);
const refresh = useCallback(async () => {
try {
const s = await Peers.Get();
setStatus(s);
setError(null);
} catch (e) {
// Peers.Get returns a gRPC error when the socket itself is
// unreachable (daemon not running, missing socket, etc.); only
// the streaming path synthesizes a DaemonUnavailable status.
// Synthesize one here too so the overlay paints on cold start
// without a daemon — otherwise the whole UI stays blank since
// `isReady` would never flip and StatusProvider's short-circuit
// wouldn't render either children or the overlay.
setStatus({ status: "DaemonUnavailable" } as Status);
setError(String(e));
}
}, []);
useEffect(() => {
void refresh();
const off = Events.On(EVENT_STATUS, (ev: { data: Status }) => {
setStatus(ev.data);
setError(null);
});
return () => {
off();
};
}, [refresh]);
const isReady = status !== null;
const isDaemonUnavailable = isReady && status.status === "DaemonUnavailable";
const isDaemonAvailable = isReady && !isDaemonUnavailable;
// Don't mount children until the first Peers.Get has resolved and the
// daemon is reachable. Consumers (ProfileContext, SettingsContext, …)
// can then assume any daemon RPC they make at mount will reach the
// socket — no per-context availability gating. When the daemon flips
// back to unavailable the children unmount and remount fresh once it
// returns.
return (
<StatusContext.Provider
value={{
status,
error,
refresh,
isReady,
isDaemonUnavailable,
isDaemonAvailable,
}}
>
{isDaemonAvailable && children}
<DaemonUnavailableOverlay />
</StatusContext.Provider>
);
};

5
client/ui/frontend/src/modules/profile/ProfileContext.tsx
View File

@@ -74,7 +74,10 @@ export const ProfileProvider = ({ children }: { children: ReactNode }) => {
}, []);
useEffect(() => {
refresh();
void refresh();
}, [refresh]);
useEffect(() => {
// The tray and other windows drive switches through the same
// ProfileSwitcher.SwitchActive RPC, which emits this event on success.
// Without the subscription, a tray-initiated switch leaves this

118
client/ui/frontend/src/modules/session/SessionAboutToExpire.tsx Normal file
View File

@@ -0,0 +1,118 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useSearchParams } from "react-router-dom";
import { Events } from "@wailsio/runtime";
import { ClockIcon } from "lucide-react";
import { Button } from "@/components/Button";
import {
Connection,
Profiles as ProfilesSvc,
WindowManager,
} from "@bindings/services";
const EVENT_TRIGGER_LOGIN = "trigger-login";
const DEFAULT_SECONDS = 360;
function formatMMSS(seconds: number): string {
const s = Math.max(0, seconds | 0);
const m = Math.floor(s / 60);
const r = s % 60;
return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
}
export default function SessionAboutToExpire() {
const { t } = useTranslation();
const [params] = useSearchParams();
const initialSeconds = useMemo(() => {
const raw = params.get("seconds");
if (!raw) return DEFAULT_SECONDS;
const n = Number.parseInt(raw, 10);
return Number.isFinite(n) && n > 0 ? n : DEFAULT_SECONDS;
}, [params]);
const [remaining, setRemaining] = useState(initialSeconds);
const expired = remaining <= 0;
useEffect(() => {
setRemaining(initialSeconds);
}, [initialSeconds]);
useEffect(() => {
if (remaining <= 0) return;
const id = window.setInterval(() => {
setRemaining((s) => (s <= 1 ? 0 : s - 1));
}, 1000);
return () => window.clearInterval(id);
}, [remaining]);
const stay = useCallback(() => {
void Events.Emit(EVENT_TRIGGER_LOGIN);
WindowManager.CloseSessionAboutToExpire().catch(console.error);
}, []);
const logout = useCallback(async () => {
try {
const username = await ProfilesSvc.Username();
const active = await ProfilesSvc.GetActive();
await Connection.Logout({
profileName: active.profileName || "default",
username,
});
} catch (e) {
console.error("logout from session-about-to-expire failed", e);
} finally {
WindowManager.CloseSessionAboutToExpire().catch(console.error);
}
}, []);
return (
<div
className={
"h-screen w-full flex flex-col items-center justify-center text-center px-6 py-8 bg-nb-gray-950"
}
>
<div
className={
"h-12 w-12 rounded-full flex items-center justify-center bg-nb-gray-900 text-netbird mb-4"
}
>
<ClockIcon size={22} />
</div>
<h1 className={"text-base font-semibold text-nb-gray-100"}>
{expired
? t("sessionAboutToExpire.expired")
: t("sessionAboutToExpire.title")}
</h1>
<p className={"text-xs text-nb-gray-400 mt-1.5 max-w-[20rem] leading-snug"}>
{t("sessionAboutToExpire.description")}
</p>
<div
className={
"mt-5 font-mono text-3xl tabular-nums text-nb-gray-100 tracking-wider"
}
aria-live={"polite"}
>
{formatMMSS(remaining)}
</div>
<div className={"flex gap-2 mt-5 w-full max-w-[18rem]"}>
<Button
variant={"secondary"}
size={"xs"}
className={"flex-1"}
onClick={logout}
>
{t("sessionAboutToExpire.logout")}
</Button>
<Button
variant={"primary"}
size={"xs"}
className={"flex-1"}
onClick={stay}
disabled={expired}
>
{t("sessionAboutToExpire.stay")}
</Button>
</div>
</div>
);
}

31
client/ui/frontend/src/pages/SessionExpired.tsx → client/ui/frontend/src/modules/session/SessionExpired.tsx
View File

@@ -1,13 +1,28 @@
import { useCallback } from "react";
import { useTranslation } from "react-i18next";
import { Events } from "@wailsio/runtime";
import { ShieldAlertIcon } from "lucide-react";
import { Button } from "@/components/Button";
import { WindowManager } from "@bindings/services";
const EVENT_TRIGGER_LOGIN = "trigger-login";
export default function SessionExpired() {
const { t } = useTranslation();
const signIn = useCallback(() => {
void Events.Emit(EVENT_TRIGGER_LOGIN);
WindowManager.CloseSessionExpired().catch(console.error);
}, []);
const later = useCallback(() => {
WindowManager.CloseSessionExpired().catch(console.error);
}, []);
return (
<div
className={
"h-full w-full flex flex-col items-center justify-center text-center px-6 py-8 bg-nb-gray-950"
"h-screen w-full flex flex-col items-center justify-center text-center px-6 py-8 bg-nb-gray-950"
}
>
<div
@@ -24,10 +39,20 @@ export default function SessionExpired() {
{t("sessionExpired.description")}
</p>
<div className={"flex gap-2 mt-5 w-full max-w-[18rem]"}>
<Button variant={"secondary"} size={"xs"} className={"flex-1"}>
<Button
variant={"secondary"}
size={"xs"}
className={"flex-1"}
onClick={later}
>
{t("sessionExpired.later")}
</Button>
<Button variant={"primary"} size={"xs"} className={"flex-1"}>
<Button
variant={"primary"}
size={"xs"}
className={"flex-1"}
onClick={signIn}
>
{t("sessionExpired.signIn")}
</Button>
</div>

6
client/ui/frontend/src/modules/settings/Settings.tsx
View File

@@ -13,6 +13,7 @@ import { SettingsSSH } from "@/modules/settings/SettingsSSH.tsx";
import { SettingsAdvanced } from "@/modules/settings/SettingsAdvanced.tsx";
import { SettingsTroubleshooting } from "@/modules/settings/SettingsTroubleshooting.tsx";
import { SettingsAbout } from "@/modules/settings/SettingsAbout.tsx";
import { SettingsDevelopment } from "@/modules/settings/SettingsDevelopment.tsx";
// The settings window always opens at General. The only way to land on a
// different tab is via navigation state (e.g. the update-available header
@@ -59,6 +60,11 @@ export const Settings = () => {
<VerticalTabs.Content value={"about"}>
<SettingsAbout />
</VerticalTabs.Content>
{import.meta.env.DEV && (
<VerticalTabs.Content value={"development"}>
<SettingsDevelopment />
</VerticalTabs.Content>
)}
</SettingsProvider>
</div>
</ScrollArea.Viewport>

2
client/ui/frontend/src/modules/settings/SettingsAbout.tsx
View File

@@ -2,7 +2,7 @@ import { useTranslation } from "react-i18next";
import { Browser } from "@wailsio/runtime";
import netbirdFull from "@/assets/logos/netbird-full.svg";
import pkg from "../../../package.json";
import { useStatus } from "@/hooks/useStatus";
import { useStatus } from "@/modules/daemon-status/StatusContext.tsx";
import { UpdateVersionCard } from "@/modules/auto-update/UpdateVersionCard";
import { useAccentTrigger } from "@/modules/settings/SettingsAccent";

30
client/ui/frontend/src/modules/settings/SettingsDevelopment.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { Button } from "@/components/Button";
import { WindowManager } from "@bindings/services";
import { SectionGroup } from "@/modules/settings/SettingsSection.tsx";
export function SettingsDevelopment() {
return (
<SectionGroup title={"Session windows"}>
<div className={"flex flex-col gap-2 items-start"}>
<Button
variant={"secondary"}
onClick={() =>
WindowManager.OpenSessionExpired().catch(console.error)
}
>
Open “Session expired”
</Button>
<Button
variant={"secondary"}
onClick={() =>
WindowManager.OpenSessionAboutToExpire(336).catch(
console.error,
)
}
>
Open “About to expire” (5:36)
</Button>
</div>
</SectionGroup>
);
}

8
client/ui/frontend/src/modules/settings/SettingsNavigationTriggers.tsx
View File

@@ -5,6 +5,7 @@ import { UpdateBadge } from "@/modules/auto-update/UpdateBadge.tsx";
import { useClientVersion } from "@/modules/auto-update/ClientVersionContext.tsx";
import {
BoltIcon,
HammerIcon,
InfoIcon,
LifeBuoyIcon,
NetworkIcon,
@@ -62,6 +63,13 @@ export const SettingsNavigationTriggers = () => {
title={t("settings.tabs.about")}
adornment={aboutAdornment}
/>
{import.meta.env.DEV && (
<VerticalTabs.Trigger
value={"development"}
icon={HammerIcon}
title={"Development"}
/>
)}
</VerticalTabs.List>
</div>
);

2
client/ui/frontend/src/screens/Peers.tsx
View File

@@ -1,6 +1,6 @@
import { useMemo, useState } from "react";
import { ChevronDown, ChevronRight, Network, ShieldCheck, Zap } from "lucide-react";
import { useStatus } from "../hooks/useStatus";
import { useStatus } from "@/modules/daemon-status/StatusContext.tsx";
import type { PeerStatus } from "@bindings/services/models.js";
import { Card } from "../components/Card";
import { Input } from "../components/Input";

2
client/ui/frontend/src/screens/QuickActions.tsx
View File

@@ -1,5 +1,5 @@
import { CheckCircle2, Circle, Loader2, Power } from "lucide-react";
import { useStatus } from "../hooks/useStatus";
import { useStatus } from "@/modules/daemon-status/StatusContext.tsx";
import { Connection } from "@bindings/services";
import { Button } from "../components/Button";
import { cn } from "../lib/cn";

1
client/ui/main.go
View File

@@ -219,6 +219,7 @@ func main() {
Notifier: notifier,
Update: update,
ProfileSwitcher: profileSwitcher,
WindowManager: windowManager,
Localizer: localizer,
})
listenForShowSignal(context.Background(), tray)

107
client/ui/services/windowmanager.go
View File

@@ -4,6 +4,7 @@ package services
import (
"net/url"
"strconv"
"sync"
"github.com/wailsapp/wails/v3/pkg/application"
@@ -29,10 +30,12 @@ const EventBrowserLoginCancel = "browser-login:cancel"
// "Cleanup on close"). Destroying rather than hiding means the dock-reopen
// handler doesn't find a hidden window to resurrect.
type WindowManager struct {
app *application.App
settings *application.WebviewWindow
browserLogin *application.WebviewWindow
mu sync.Mutex
app *application.App
settings *application.WebviewWindow
browserLogin *application.WebviewWindow
sessionExpired *application.WebviewWindow
sessionAboutToExpire *application.WebviewWindow
mu sync.Mutex
}
func NewWindowManager(app *application.App) *WindowManager {
@@ -130,3 +133,99 @@ func (s *WindowManager) CloseBrowserLogin() {
w.Close()
}
}
// OpenSessionExpired shows the "session expired" prompt window above all
// other application windows. Singleton — destroyed on close.
func (s *WindowManager) OpenSessionExpired() {
s.mu.Lock()
defer s.mu.Unlock()
if s.sessionExpired == nil {
s.sessionExpired = s.app.Window.NewWithOptions(application.WebviewWindowOptions{
Name: "session-expired",
Title: "NetBird",
Width: 460,
Height: 380,
DisableResize: true,
AlwaysOnTop: true,
MinimiseButtonState: application.ButtonHidden,
MaximiseButtonState: application.ButtonHidden,
CloseButtonState: application.ButtonEnabled,
BackgroundColour: application.NewRGB(24, 26, 29),
URL: "/#/session-expired",
Mac: application.MacWindow{
InvisibleTitleBarHeight: 38,
Backdrop: application.MacBackdropTranslucent,
TitleBar: application.MacTitleBarHiddenInset,
CollectionBehavior: application.MacWindowCollectionBehaviorFullScreenNone,
},
})
s.sessionExpired.OnWindowEvent(events.Common.WindowClosing, func(_ *application.WindowEvent) {
s.mu.Lock()
s.sessionExpired = nil
s.mu.Unlock()
})
}
s.sessionExpired.Show()
s.sessionExpired.Focus()
}
// CloseSessionExpired destroys the session-expired window if open.
func (s *WindowManager) CloseSessionExpired() {
s.mu.Lock()
w := s.sessionExpired
s.sessionExpired = nil
s.mu.Unlock()
if w != nil {
w.Close()
}
}
// OpenSessionAboutToExpire shows the countdown warning window above all
// other application windows. `seconds` seeds the initial countdown value
// rendered as mm:ss in the React layer. Singleton — destroyed on close.
func (s *WindowManager) OpenSessionAboutToExpire(seconds int) {
s.mu.Lock()
defer s.mu.Unlock()
startURL := "/#/session-about-to-expire?seconds=" + strconv.Itoa(seconds)
if s.sessionAboutToExpire == nil {
s.sessionAboutToExpire = s.app.Window.NewWithOptions(application.WebviewWindowOptions{
Name: "session-about-to-expire",
Title: "NetBird",
Width: 460,
Height: 380,
DisableResize: true,
AlwaysOnTop: true,
MinimiseButtonState: application.ButtonHidden,
MaximiseButtonState: application.ButtonHidden,
CloseButtonState: application.ButtonEnabled,
BackgroundColour: application.NewRGB(24, 26, 29),
URL: startURL,
Mac: application.MacWindow{
InvisibleTitleBarHeight: 38,
Backdrop: application.MacBackdropTranslucent,
TitleBar: application.MacTitleBarHiddenInset,
CollectionBehavior: application.MacWindowCollectionBehaviorFullScreenNone,
},
})
s.sessionAboutToExpire.OnWindowEvent(events.Common.WindowClosing, func(_ *application.WindowEvent) {
s.mu.Lock()
s.sessionAboutToExpire = nil
s.mu.Unlock()
})
} else {
s.sessionAboutToExpire.SetURL(startURL)
}
s.sessionAboutToExpire.Show()
s.sessionAboutToExpire.Focus()
}
// CloseSessionAboutToExpire destroys the countdown warning window if open.
func (s *WindowManager) CloseSessionAboutToExpire() {
s.mu.Lock()
w := s.sessionAboutToExpire
s.sessionAboutToExpire = nil
s.mu.Unlock()
if w != nil {
w.Close()
}
}

3
client/ui/tray.go
View File

@@ -56,6 +56,7 @@ type TrayServices struct {
Notifier *notifications.NotificationService
Update *services.Update
ProfileSwitcher *services.ProfileSwitcher
WindowManager *services.WindowManager
// Localizer is the tray's bridge to translations. Constructed in main
// from i18n.Bundle + preferences.Store; the Wails-bound facades
// (services.I18n, services.Preferences) are registered separately for
@@ -294,7 +295,7 @@ func (t *Tray) buildMenu() *application.Menu {
// block-inbound, auto-connect, notifications) and profile switching
// all live in the in-window Settings page now. The tray menu only
// surfaces the day-to-day actions.
t.settingsItem = menu.Add(t.loc.T("tray.menu.settings")).OnClick(func(*application.Context) { t.openRoute("/settings") })
t.settingsItem = menu.Add(t.loc.T("tray.menu.settings")).OnClick(func(*application.Context) { t.svc.WindowManager.OpenSettings() })
t.debugItem = menu.Add(t.loc.T("tray.menu.debugBundle")).OnClick(func(*application.Context) { t.openRoute("/debug") })
menu.AddSeparator()