Add seed/Telegram login button and traffic usage indicator

New non-blocking login panel on the Home screen (seed backup/restore + Telegram magic-link via the bot deep-link, polled through the new backend endpoints) — uses its own popover instead of a full-screen Dialog so the burger menu stays clickable while it's open. VpnStats now shows a used/limit usage bar backed by a new useUsageStore. Also registers tauri-plugin-shell (needed to open the t.me deep-link) and threads an optional auth token from the app down through TunnelConfig to the proxy client (desktop + Android), for instances running --require-auth. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-07 00:31:27 +07:00
parent bf50824833
commit 0cb6ad2860
17 changed files with 596 additions and 26 deletions
@@ -0,0 +1,161 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { open } from "@tauri-apps/plugin-shell";
+import {
+  IconUserCircle,
+  IconCopy,
+  IconCheck,
+  IconBrandTelegram,
+} from "@tabler/icons-react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useAuthStore } from "@/store/useAuthStore";
+
+// Кнопка входа по seed/Telegram на экране VPN. Панель — не полноэкранный
+// Dialog (его затемнение перекрывает весь вьюпорт, включая хедер, и блокирует
+// клик по бургеру), а собственный поповер с затемнением только ниже хедера —
+// тот же приём, что и в BurgerMenu (см. `top-25`), чтобы боковое меню всегда
+// оставалось доступным, даже пока эта панель открыта.
+export function LoginButton() {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [seedInput, setSeedInput] = useState("");
+  const [copied, setCopied] = useState(false);
+
+  const seed = useAuthStore((s) => s.seed);
+  const seedLoading = useAuthStore((s) => s.seedLoading);
+  const seedError = useAuthStore((s) => s.seedError);
+  const loadSeed = useAuthStore((s) => s.loadSeed);
+  const loginSeed = useAuthStore((s) => s.loginSeed);
+  const telegramDeepLink = useAuthStore((s) => s.telegramDeepLink);
+  const telegramStatus = useAuthStore((s) => s.telegramStatus);
+  const startTelegram = useAuthStore((s) => s.startTelegram);
+  const cancelTelegram = useAuthStore((s) => s.cancelTelegram);
+
+  useEffect(() => {
+    if (isOpen) loadSeed();
+  }, [isOpen, loadSeed]);
+
+  useEffect(() => {
+    if (telegramDeepLink) {
+      open(telegramDeepLink).catch(() => {});
+    }
+  }, [telegramDeepLink]);
+
+  const handleCopy = async () => {
+    if (!seed) return;
+    await navigator.clipboard.writeText(seed);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  const handleSeedSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!seedInput.trim()) return;
+    await loginSeed(seedInput.trim());
+  };
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpen(true)}
+        className="absolute top-3 right-3 z-10 flex items-center gap-1.5 rounded-full border border-white/10 bg-background/30 px-3 py-1.5 text-xs font-medium text-foreground/80 backdrop-blur-md transition-colors hover:border-white/20 hover:text-foreground"
+      >
+        <IconUserCircle className="size-4" />
+        {t("login_button")}
+      </button>
+
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-x-0 bottom-0 top-25 z-30 bg-black/20 backdrop-blur-sm"
+            onClick={() => setIsOpen(false)}
+          />
+          <div className="fixed left-1/2 top-25 z-40 mt-4 w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 rounded-2xl border border-white/10 bg-card p-5 shadow-xl animate-in slide-in-from-top-4">
+            <h2 className="mb-4 text-base font-semibold">{t("login_title")}</h2>
+
+            <Tabs defaultValue="seed">
+              <TabsList className="w-full">
+                <TabsTrigger value="seed">{t("login_tab_seed")}</TabsTrigger>
+                <TabsTrigger value="telegram">{t("login_tab_telegram")}</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="seed" className="mt-4 flex flex-col gap-4">
+                {seed ? (
+                  <div>
+                    <label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+                      {t("login_seed_current_label")}
+                    </label>
+                    <div className="mt-1 flex items-center gap-2">
+                      <code className="flex-1 truncate rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs font-mono">
+                        {seed}
+                      </code>
+                      <Button type="button" size="icon-sm" variant="outline" onClick={handleCopy}>
+                        {copied ? <IconCheck className="size-4" /> : <IconCopy className="size-4" />}
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  !seedLoading && (
+                    <p className="text-sm text-muted-foreground">{t("login_seed_no_seed")}</p>
+                  )
+                )}
+
+                <form onSubmit={handleSeedSubmit} className="flex flex-col gap-2">
+                  <label className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+                    {t("login_seed_input_label")}
+                  </label>
+                  <input
+                    type="text"
+                    value={seedInput}
+                    onChange={(e) => setSeedInput(e.target.value)}
+                    placeholder={t("login_seed_input_placeholder")}
+                    className="w-full rounded-xl border border-white/10 bg-white/5 p-3 text-sm text-foreground outline-none transition-colors focus:border-primary"
+                  />
+                  {seedError && (
+                    <p className="text-xs text-destructive">{t("login_seed_invalid")}</p>
+                  )}
+                  <Button type="submit" disabled={seedLoading}>
+                    {t("login_seed_submit")}
+                  </Button>
+                </form>
+              </TabsContent>
+
+              <TabsContent value="telegram" className="mt-4 flex flex-col gap-3">
+                <p className="text-sm text-muted-foreground">{t("login_telegram_desc")}</p>
+
+                {telegramStatus === "idle" && (
+                  <Button type="button" onClick={startTelegram} className="gap-2">
+                    <IconBrandTelegram className="size-4" />
+                    {t("login_telegram_start")}
+                  </Button>
+                )}
+                {telegramStatus === "waiting" && (
+                  <div className="flex flex-col gap-2">
+                    <p className="animate-pulse text-sm text-muted-foreground">
+                      {t("login_telegram_waiting")}
+                    </p>
+                    <Button type="button" variant="outline" onClick={cancelTelegram}>
+                      {t("login_telegram_cancel")}
+                    </Button>
+                  </div>
+                )}
+                {telegramStatus === "success" && (
+                  <p className="text-sm font-medium text-primary">{t("login_telegram_success")}</p>
+                )}
+                {telegramStatus === "error" && (
+                  <div className="flex flex-col gap-2">
+                    <p className="text-sm text-destructive">{t("login_telegram_error")}</p>
+                    <Button type="button" onClick={startTelegram}>
+                      {t("login_telegram_start")}
+                    </Button>
+                  </div>
+                )}
+              </TabsContent>
+            </Tabs>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
@@ -10,6 +10,7 @@ import VpnControlButton from "@/components/shared/VpnControlButton";
 import { useTheme } from "@/ThemeProvider";
 import { useSettingsStore } from "@/store/useSettingsStore";
 import { useNodesStore } from "@/store/useNodesStore";
+import { getCachedToken } from "@/lib/api";

 export function VpnControl() {
  const { status, setStatus } = useVpnStore();
@@ -37,6 +38,9 @@ export function VpnControl() {
          killswitchEnabled: killSwitch,
          excludedApps: excludedApps,
          excludedDomains: excludedDomains,
+          // Есть только если сервер требует `--require-auth`; на инстансах без
+          // этого флага прокси значение просто игнорирует.
+          authToken: getCachedToken() ?? undefined,
        };
        await startVpn(config, node.ipAddress, node.port, node.sni);
      } else {
@@ -1,4 +1,7 @@
+import { useEffect } from "react";
 import { useTrafficStore } from "@/store/useTrafficStore"; // путь к твоему стору
+import { useUsageStore } from "@/store/useUsageStore";
+import { useVpnStore } from "@/store/useVpnStore";
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";

@@ -19,33 +22,77 @@ export function VpnStats({ className }: { className?: string }) {
  const rx = useTrafficStore((state) => state.rx);
  const tx = useTrafficStore((state) => state.tx);

+  const status = useVpnStore((state) => state.status);
+  const usedBytes = useUsageStore((state) => state.usedBytes);
+  const limitBytes = useUsageStore((state) => state.limitBytes);
+  const startAutoRefresh = useUsageStore((state) => state.startAutoRefresh);
+  const stopAutoRefresh = useUsageStore((state) => state.stopAutoRefresh);
+
+  useEffect(() => {
+    if (status === "connected") {
+      startAutoRefresh();
+    } else {
+      stopAutoRefresh();
+    }
+    return () => stopAutoRefresh();
+  }, [status, startAutoRefresh, stopAutoRefresh]);
+
+  const usagePercent =
+    usedBytes !== null && limitBytes ? Math.min(100, (usedBytes / limitBytes) * 100) : null;
+
  return (
    <div
      className={cn(
-        "w-full max-w-70 relative flex items-center justify-between px-8 py-4 rounded-2xl",
+        "w-full max-w-70 relative flex flex-col gap-3 px-8 py-4 rounded-2xl",
        "bg-background/20 backdrop-blur-md border border-white/10 shadow-lg",
        className,
      )}
    >
-      <div className="flex flex-col items-center flex-1">
-        <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
-          {t("rx")}
-        </span>
-        <span className="text-sm font-mono text-foreground font-semibold">
-          {formatBytes(rx)}
-        </span>
+      <div className="flex items-center justify-between">
+        <div className="flex flex-col items-center flex-1">
+          <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
+            {t("rx")}
+          </span>
+          <span className="text-sm font-mono text-foreground font-semibold">
+            {formatBytes(rx)}
+          </span>
+        </div>
+
+        <div className="h-8 w-px bg-border/50 mx-4" />
+
+        <div className="flex flex-col items-center flex-1">
+          <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
+            {t("tx")}
+          </span>
+          <span className="text-sm font-mono text-foreground font-semibold">
+            {formatBytes(tx)}
+          </span>
+        </div>
      </div>

-      <div className="h-8 w-px bg-border/50 mx-4" />
-
-      <div className="flex flex-col items-center flex-1">
-        <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
-          {t("tx")}
-        </span>
-        <span className="text-sm font-mono text-foreground font-semibold">
-          {formatBytes(tx)}
-        </span>
-      </div>
+      {usedBytes !== null && (
+        <div className="flex flex-col gap-1 pt-1 border-t border-white/10">
+          <div className="flex items-center justify-between text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
+            <span>{t("usage_label")}</span>
+            <span className="font-mono normal-case tracking-normal">
+              {limitBytes
+                ? `${formatBytes(usedBytes)} / ${formatBytes(limitBytes)}`
+                : `${formatBytes(usedBytes)} / ${t("usage_unlimited")}`}
+            </span>
+          </div>
+          {usagePercent !== null && (
+            <div className="h-1.5 w-full rounded-full bg-white/10 overflow-hidden">
+              <div
+                className={cn(
+                  "h-full rounded-full transition-all",
+                  usagePercent >= 90 ? "bg-destructive" : "bg-primary",
+                )}
+                style={{ width: `${usagePercent}%` }}
+              />
+            </div>
+          )}
+        </div>
+      )}
    </div>
  );
 }