update session expiration dialog texts, add monitor aware position

2026-10-05 04:59:06 +02:00 · 2026-06-08 18:09:22 +02:00
parent b067544c8a
commit 6b2ae1c34c
19 changed files with 321 additions and 226 deletions
@@ -25,8 +25,7 @@ React 18 + TS 5.7 (`strict`, `noImplicitAny: false`) + Vite 6 + Tailwind 3 (`dar
 | `/` |  `MainPage` (modules/main/) | `AppLayout` | Main window default route |
 | `/dialog/browser-login` | `LoginWaitingForBrowserDialog` (modules/login/) | none | Auxiliary window (Go `WindowManager.OpenBrowserLogin`) |
 | `/dialog/install-progress` | `UpdateInProgressDialog` (modules/auto-update/) | none | Auxiliary window (Go `WindowManager.OpenInstallProgress(version)`, always-on-top). Owns the install-result polling + 5s daemon-down-grace; calls `Update.Quit()` on success. Opened by `ClientVersionContext.triggerUpdate` (enforced user-driven branch) and on the `installing` flip from `netbird:update:state` (force-install branch). |
-| `/dialog/session-expired` | `SessionExpiredDialog` (modules/session/) | none | Auxiliary window (Go `WindowManager.OpenSessionExpired`, always-on-top) |
-| `/dialog/session-about-to-expire` | `SessionAboutToExpireDialog` (modules/session/) | none | Auxiliary window (Go `WindowManager.OpenSessionAboutToExpire(seconds)`, always-on-top, mm:ss countdown via `?seconds=`) |
+| `/dialog/session-expiration` | `SessionExpirationDialog` (modules/session/) | none | Auxiliary window (Go `WindowManager.OpenSessionExpiration(seconds)`, always-on-top, mm:ss countdown via `?seconds=`). Drives both the soon-to-expire warning and (when seconds elapse to zero) the expired state. |
 | `/dialog/welcome` | `WelcomeDialog` (modules/welcome/) | none | Auxiliary window (Go `WindowManager.OpenWelcome`). First-launch onboarding — opened from `main.go`'s `ApplicationStarted` hook only when `prefStore.Get().OnboardingCompleted` is false. Two-step state machine: tray-screenshot pitch → Cloud-vs-self-hosted segmented control (conditional, see `shouldShowManagementStep`). Continue calls `Preferences.SetOnboardingCompleted(true)`, then `WindowManager.OpenMain()`, then `WindowManager.CloseWelcome()`. |
 | `/settings` |  `SettingsPage` (modules/settings/) | `AppLayout` | Auxiliary window (Go `WindowManager.OpenSettings(tab)`). Inherits the shared provider stack from `AppLayout`; the page itself adds the draggable strip + tabs. The `Profiles` tab (`modules/profiles/ProfilesTab.tsx`, `UserCircle` icon, between Security and SSH) lists profiles in a table with Deregister/Delete in a per-row kebab and an Add Profile button. The header `ProfileDropdown`'s "Manage Profiles" entry calls `OpenSettings("profiles")`. The window stays at `/#/settings` for its whole lifetime — no `SetURL` between opens, so `AppLayout`'s providers never remount. Tab is React local state, driven by the `netbird:settings:open` event Go emits before `Show`. Reset-to-General on close is handled in React via `document.visibilitychange` (Page Visibility API), which fires *before* WebKit throttles the hidden page, unlike Wails events from the Go close hook which race `Hide` and leave the previous tab visible for one frame on the next open. |
 | `/dialog/error` | `ErrorDialog` (modules/error/) | none | Auxiliary window (Go `WindowManager.OpenError(title, message)`, always-on-top). The app's single error surface — `lib/dialogs.ts`'s `errorDialog({Title, Message})` opens this instead of the old native OS MessageBox. `title` is the window chrome title (`"NetBird - <title>"`, set Go-side, not shown in body); `message` is read from `useSearchParams` and rendered as the left-aligned body next to a danger `SquareIcon`, with a bottom-right Close button (Escape also closes → `WindowManager.CloseError()`). |
@@ -53,7 +52,7 @@ Page-specific chrome lives next to the page, not in the layout:
    - `modules/main/advanced/` — advanced-mode-only surfaces. `Navigation.tsx` plus the three feature sub-modules whose tabs only render here: `peers/`, `networks/`, `exit-nodes/`.
  - `modules/settings/` — `SettingsPage.tsx`, shared helpers (`SettingsSection.tsx`, `SettingsNavigation.tsx`, `SettingsSkeleton.tsx`), and all tab files flat (`SettingsGeneral`, `SettingsNetwork`, `SettingsSSH`, `SettingsSecurity`, `SettingsAdvanced`, `SettingsTroubleshooting`, `SettingsAbout`, `SettingsAccent`). `ManagementServerSwitch` and `LanguagePicker` are shared in `components/`; `useManagementUrl` is in `hooks/`.
  - `modules/login/` — `LoginWaitingForBrowserDialog.tsx` (the SSO browser-wait window).
-  - `modules/session/` — `SessionExpiredDialog.tsx` and `SessionAboutToExpireDialog.tsx` (session lifecycle dialog windows).
+  - `modules/session/` — `SessionExpirationDialog.tsx` (session expiration warning + expired state).
  - `modules/auto-update/` — `UpdateInProgressDialog.tsx`, `UpdateBadge.tsx`, `UpdateVersionCard.tsx`. Context lives in `contexts/`.
  - `modules/profiles/` — `ProfileAvatar.tsx`, `ProfileDropdown.tsx`, `ProfileCreationModal.tsx`, `ProfilesTab.tsx`. Context lives in `contexts/`. The creation modal collects both the profile name and a management target (Cloud vs self-hosted + URL, reusing `ManagementServerSwitch` + the `useManagementUrl` helpers like the onboarding step); `ProfilesTab.handleCreate` adds the profile, `Settings.SetConfig`s the chosen `managementUrl` onto it (keyed by profile name, before switching), then switches to it. Row actions (switch/deregister/delete) confirm via the shared `useConfirm()` modal.
  - `modules/error/` — `ErrorDialog.tsx`, the custom always-on-top error window that replaced the native OS MessageBox. Opened by Go `WindowManager.OpenError(title, message)`, driven from the frontend by `errorDialog({Title, Message})` in `lib/dialogs.ts`.
@@ -158,7 +157,7 @@ Compare against the variable, never against an English literal.

 **Language picker.** `src/components/LanguagePicker.tsx` is mounted inside the Language section of `SettingsGeneral.tsx`. It populates from `I18n.Languages()` (matches `_index.json`) and calls `Preferences.SetLanguage(code)` on selection. The preference write triggers `netbird:preferences:changed`, which both the local i18next instance and every other open window listen to.

-**What gets translated.** Every user-facing string in the polished AppLayout/Settings/Update/BrowserLogin/SessionExpired/Peers surfaces. Don't add hard-coded user-facing English to new code — add the key, then `t()`. Internal log strings, dev-only forced-state strings in `ClientVersionContext`, and the `Update failed` fallback fed into `classifyError()` (which then renders a translated description) are not translated.
+**What gets translated.** Every user-facing string in the polished AppLayout/Settings/Update/BrowserLogin/SessionExpiration/Peers surfaces. Don't add hard-coded user-facing English to new code — add the key, then `t()`. Internal log strings, dev-only forced-state strings in `ClientVersionContext`, and the `Update failed` fallback fed into `classifyError()` (which then renders a translated description) are not translated.

 ## Login flow (`startLogin` in `ConnectionStatusSwitch.tsx`)

@@ -202,7 +201,7 @@ Defined in `tailwind.config.ts`. `nb-gray` is the neutral palette (background =
 ## Things in flight (don't be surprised by)

 - **`screens/Peers.tsx`** uses live `Peers.Get` data. **`modules/peers/Peers.tsx`** uses `mockPeers.ts`. The mock-driven one is mounted under `Main.tsx`'s `AppRightPanel` and is what the user sees today; the real-data one isn't wired into the route table.
- **`modules/session/SessionExpiredDialog.tsx`** and **`modules/session/SessionAboutToExpireDialog.tsx`** are the always-on-top auxiliary windows. No triggers wired today — 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})`.
+- **`modules/session/SessionExpirationDialog.tsx`** is the always-on-top auxiliary window for the SSO expiration warning. Triggered by the tray (`tray_session.go openSessionExpiration` at T-FinalWarningLead; `openSessionExtendFlow` from the "Expires in …" tray row). Sign-in / Stay-connected emit `EventTriggerLogin` so the main window's `startLogin()` orchestrator handles the SSO flow; Logout uses `Connection.Logout({profileName, username})`. When the countdown hits zero the same component flips to the "expired" copy (`sessionExpiration.expired*` keys).

 ## Wails Go API reference

@@ -2,8 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./globals.css";
 import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
-import SessionExpiredDialog from "@/modules/session/SessionExpiredDialog.tsx";
-import SessionAboutToExpireDialog from "@/modules/session/SessionAboutToExpireDialog.tsx";
+import SessionExpirationDialog from "@/modules/session/SessionExpirationDialog.tsx";
 import UpdateInProgressDialog from "@/modules/auto-update/UpdateInProgressDialog.tsx";
 import WelcomeDialog from "@/modules/welcome/WelcomeDialog.tsx";
 import ErrorDialog from "@/modules/error/ErrorDialog.tsx";
@@ -39,8 +38,7 @@ Promise.all([
                        <Route path="dialog">
                            <Route path="browser-login" element={<LoginWaitingForBrowserDialog />} />
                            <Route path="install-progress" element={<UpdateInProgressDialog />} />
-                            <Route path="session-expired" element={<SessionExpiredDialog />} />
-                            <Route path="session-about-to-expire" element={<SessionAboutToExpireDialog />} />
+                            <Route path="session-expiration" element={<SessionExpirationDialog />} />
                            <Route path="welcome" element={<WelcomeDialog />} />
                            <Route path="error" element={<ErrorDialog />} />
                        </Route>
@@ -3,7 +3,7 @@ import { cn } from "@/lib/cn.ts";
 import { isMacOS } from "@/lib/platform.ts";

 // ConfirmDialog is the shared layout wrapper used by dialog-style window
-// surfaces (SessionExpired, SessionAboutToExpire, …). Purely a layout
+// surfaces (SessionExpiration, …). Purely a layout
 // primitive — callers compose the contents (SquareIcon, DialogHeading,
 // DialogDescription, DialogActions) so each dialog can tweak its own
 // internal structure without growing the ConfirmDialog API.
@@ -13,7 +13,7 @@ import i18next from "@/lib/i18n";
 // measurements (content changes after mount) only adjust the size.
 //
 // Re-measures via ResizeObserver so adding/removing content (e.g. the
-// SessionAboutToExpire title swapping at countdown zero) keeps the chrome
+// SessionExpiration title swapping at countdown zero) keeps the chrome
 // tight to the content with no scrollbar.
 //
 // Also re-measures on i18next `languageChanged`. The ResizeObserver in
@@ -1,20 +1,16 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
+import { Events } from "@wailsio/runtime";
 import { errorDialog } from "@/lib/dialogs.ts";
-import { ClockIcon } from "lucide-react";
+import { AlertCircleIcon, ClockIcon } from "lucide-react";
 import { Button } from "@/components/buttons/Button";
 import { ConfirmDialog } from "@/components/dialog/ConfirmDialog";
 import { DialogActions } from "@/components/dialog/DialogActions";
 import { DialogDescription } from "@/components/dialog/DialogDescription";
 import { DialogHeading } from "@/components/dialog/DialogHeading";
 import { SquareIcon } from "@/components/SquareIcon";
-import {
-    Connection,
-    Profiles as ProfilesSvc,
-    Session,
-    WindowManager,
-} from "@bindings/services";
+import { Connection, Profiles as ProfilesSvc, Session, WindowManager } from "@bindings/services";
 import { useAutoSizeWindow } from "@/hooks/useAutoSizeWindow";
 import { formatErrorMessage } from "@/lib/errors.ts";

@@ -40,7 +36,7 @@ function formatRemaining(seconds: number): string {
    return `${pad(minutes)}:${pad(secs)}`;
 }

-export default function SessionAboutToExpireDialog() {
+export default function SessionExpirationDialog() {
    const { t } = useTranslation();
    const contentRef = useAutoSizeWindow<HTMLDivElement>(WINDOW_WIDTH);
    const [params] = useSearchParams();
@@ -68,6 +64,20 @@ export default function SessionAboutToExpireDialog() {
        return () => window.clearInterval(id);
    }, [remaining]);

+    // Auto-close when the daemon flips back to Connected — covers extend
+    // flows started from outside this window (tray notification action,
+    // another UI surface) so the user isn't left staring at a stale dialog.
+    useEffect(() => {
+        const off = Events.On("netbird:status", (ev: { data: { status?: string } }) => {
+            if (ev?.data?.status === "Connected") {
+                WindowManager.CloseSessionExpiration().catch(console.error);
+            }
+        });
+        return () => {
+            off();
+        };
+    }, []);
+
    // Mirrors tray.go::runExtendSession: starts the daemon SSO extend flow,
    // opens the browser for the user to sign in, blocks on the daemon until
    // the new deadline arrives. Tunnel stays up; success simply closes the
@@ -100,10 +110,10 @@ export default function SessionAboutToExpireDialog() {
                // relevant.
                return;
            }
-            WindowManager.CloseSessionAboutToExpire().catch(console.error);
+            WindowManager.CloseSessionExpiration().catch(console.error);
        } catch (e) {
            await errorDialog({
-                Title: t("sessionAboutToExpire.extendFailedTitle"),
+                Title: t("sessionExpiration.extendFailedTitle"),
                Message: formatErrorMessage(e),
            });
        } finally {
@@ -121,10 +131,10 @@ export default function SessionAboutToExpireDialog() {
                profileName: active.profileName || "default",
                username,
            });
-            WindowManager.CloseSessionAboutToExpire().catch(console.error);
+            WindowManager.CloseSessionExpiration().catch(console.error);
        } catch (e) {
            await errorDialog({
-                Title: t("sessionAboutToExpire.logoutFailedTitle"),
+                Title: t("sessionExpiration.logoutFailedTitle"),
                Message: formatErrorMessage(e),
            });
        } finally {
@@ -132,33 +142,41 @@ export default function SessionAboutToExpireDialog() {
        }
    }, [busy, t]);

+    const close = useCallback(() => {
+        WindowManager.CloseSessionExpiration().catch(console.error);
+    }, []);
+
    return (
        <ConfirmDialog ref={contentRef}>
-            <SquareIcon icon={ClockIcon} />
+            <SquareIcon icon={expired ? AlertCircleIcon : ClockIcon} />

            <div className={"flex flex-col items-center gap-1"}>
                <DialogHeading>
                    {expired
-                        ? t("sessionAboutToExpire.expired")
+                        ? t("sessionExpiration.expired")
                        : soon
-                          ? t("sessionAboutToExpire.title")
-                          : t("sessionAboutToExpire.titleLater")}
+                          ? t("sessionExpiration.title")
+                          : t("sessionExpiration.titleLater")}
                </DialogHeading>
                <DialogDescription>
-                    {soon
-                        ? t("sessionAboutToExpire.description")
-                        : t("sessionAboutToExpire.descriptionLater")}
+                    {expired
+                        ? t("sessionExpiration.expiredDescription")
+                        : soon
+                          ? t("sessionExpiration.description")
+                          : t("sessionExpiration.descriptionLater")}
                </DialogDescription>
            </div>

-            <div
-                className={
-                    "font-mono font-semibold text-2xl tabular-nums text-nb-gray-50 tracking-wider"
-                }
-                aria-live={"polite"}
-            >
-                {formatRemaining(remaining)}
-            </div>
+            {!expired && (
+                <div
+                    className={
+                        "font-mono font-semibold text-2xl tabular-nums text-nb-gray-50 tracking-wider"
+                    }
+                    aria-live={"polite"}
+                >
+                    {formatRemaining(remaining)}
+                </div>
+            )}

            <DialogActions>
                <Button
@@ -167,18 +185,20 @@ export default function SessionAboutToExpireDialog() {
                    size={"md"}
                    className={"w-full"}
                    onClick={stay}
-                    disabled={expired || busy}
+                    disabled={busy}
                >
-                    {t("sessionAboutToExpire.stay")}
+                    {expired
+                        ? t("sessionExpiration.authenticate")
+                        : t("sessionExpiration.stay")}
                </Button>
                <Button
                    variant={"secondary"}
                    size={"md"}
                    className={"w-full"}
-                    onClick={logout}
+                    onClick={expired ? close : logout}
                    disabled={busy}
                >
-                    {t("sessionAboutToExpire.logout")}
+                    {expired ? t("sessionExpiration.close") : t("sessionExpiration.logout")}
                </Button>
            </DialogActions>
        </ConfirmDialog>
@@ -1,55 +0,0 @@
-import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Events } from "@wailsio/runtime";
-import { AlertCircleIcon } from "lucide-react";
-import { Button } from "@/components/buttons/Button";
-import { ConfirmDialog } from "@/components/dialog/ConfirmDialog";
-import { DialogActions } from "@/components/dialog/DialogActions";
-import { DialogDescription } from "@/components/dialog/DialogDescription";
-import { DialogHeading } from "@/components/dialog/DialogHeading";
-import { SquareIcon } from "@/components/SquareIcon";
-import { WindowManager } from "@bindings/services";
-import { useAutoSizeWindow } from "@/hooks/useAutoSizeWindow";
-
-const EVENT_TRIGGER_LOGIN = "trigger-login";
-const WINDOW_WIDTH = 360;
-
-export default function SessionExpiredDialog() {
-    const { t } = useTranslation();
-    const contentRef = useAutoSizeWindow<HTMLDivElement>(WINDOW_WIDTH);
-
-    const signIn = useCallback(() => {
-        void Events.Emit(EVENT_TRIGGER_LOGIN);
-        WindowManager.CloseSessionExpired().catch(console.error);
-    }, []);
-
-    const later = useCallback(() => {
-        WindowManager.CloseSessionExpired().catch(console.error);
-    }, []);
-
-    return (
-        <ConfirmDialog ref={contentRef}>
-            <SquareIcon icon={AlertCircleIcon} />
-
-            <div className={"flex flex-col items-center gap-1"}>
-                <DialogHeading>{t("sessionExpired.title")}</DialogHeading>
-                <DialogDescription>{t("sessionExpired.description")}</DialogDescription>
-            </div>
-
-            <DialogActions>
-                <Button
-                    autoFocus
-                    variant={"primary"}
-                    size={"md"}
-                    className={"w-full"}
-                    onClick={signIn}
-                >
-                    {t("sessionExpired.signIn")}
-                </Button>
-                <Button variant={"secondary"} size={"md"} className={"w-full"} onClick={later}>
-                    {t("sessionExpired.later")}
-                </Button>
-            </DialogActions>
-        </ConfirmDialog>
-    );
-}