mirror of
https://github.com/netbirdio/netbird.git
synced 2026-09-21 14:19:08 +02:00
update dialogs, hide main window on browser login, keep state as disconnected when needslogin
This commit is contained in:
Eduard Gert
@@ -1,118 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
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-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"
|
||||
}
|
||||
>
|
||||
<ShieldAlertIcon size={22} />
|
||||
</div>
|
||||
<h1 className={"text-base font-semibold text-nb-gray-100"}>
|
||||
{t("sessionExpired.title")}
|
||||
</h1>
|
||||
<p className={"text-xs text-nb-gray-400 mt-1.5 max-w-[20rem] leading-snug"}>
|
||||
{t("sessionExpired.description")}
|
||||
</p>
|
||||
<div className={"flex gap-2 mt-5 w-full max-w-[18rem]"}>
|
||||
<Button
|
||||
variant={"secondary"}
|
||||
size={"xs"}
|
||||
className={"flex-1"}
|
||||
onClick={later}
|
||||
>
|
||||
{t("sessionExpired.later")}
|
||||
</Button>
|
||||
<Button
|
||||
variant={"primary"}
|
||||
size={"xs"}
|
||||
className={"flex-1"}
|
||||
onClick={signIn}
|
||||
>
|
||||
{t("sessionExpired.signIn")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user