feat(pwa): Telegram login primary + code fallback + TgWaitPage

driver-pwa/frontend/src/App.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 import { useAuth } from "@/store/auth";
 import { LoginPage } from "@/pages/LoginPage";
+import { TgWaitPage } from "@/pages/TgWaitPage";
 import { OnboardingPage } from "@/pages/OnboardingPage";
 import { BalancePage } from "@/pages/BalancePage";
 import { TopupPage } from "@/pages/TopupPage";
@@ -18,6 +19,7 @@ export default function App() {
     <div className="mx-auto max-w-md min-h-full px-4 pt-3 pb-8">
       <Routes>
         <Route path="/login" element={<LoginPage />} />
+        <Route path="/tg-wait" element={<TgWaitPage />} />
         <Route path="/onboarding" element={<OnboardingPage />} />
         <Route path="/" element={<RequireAuth><BalancePage /></RequireAuth>} />
         <Route path="/topup" element={<RequireAuth><TopupPage /></RequireAuth>} />

driver-pwa/frontend/src/pages/LoginPage.test.tsx

@@ -6,6 +6,7 @@ import { MemoryRouter } from "react-router-dom";
 vi.mock("@/api/driver", () => ({
   authRequest: vi.fn(async () => ({ status: "code_sent", channel: "tg" })),
   authVerify: vi.fn(async () => ({ token: "T", driver_id: 7 })),
+  tgSession: vi.fn(async () => ({ pair_session: "sess123", deep_link: null })),
 }));
 
 import { LoginPage } from "./LoginPage";
@@ -19,6 +20,7 @@ describe("LoginPage", () => {
   it("requests code then verifies and stores session", async () => {
     wrap();
     expect(screen.getByText(/Вход в приложение/i)).toBeInTheDocument();
+    await userEvent.click(screen.getByRole("button", { name: /Войти по коду/i }));
     await userEvent.type(screen.getByPlaceholderText(/телефон/i), "9143054400");
     await userEvent.click(screen.getByRole("button", { name: /Получить код/i }));
     expect(driver.authRequest).toHaveBeenCalledWith("79143054400");

driver-pwa/frontend/src/pages/LoginPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
-import { authRequest, authVerify } from "@/api/driver";
+import { authRequest, authVerify, tgSession } from "@/api/driver";
 import { digitsOnly, formatPhone } from "@/lib/format";
 import { useAuth } from "@/store/auth";
 import { Spinner } from "@/components/Spinner";
@@ -14,8 +14,22 @@ export function LoginPage() {
   const [step, setStep] = useState<"phone" | "code">("phone");
   const [channel, setChannel] = useState<string>("");
   const [busy, setBusy] = useState(false);
+  const [mode, setMode] = useState<"choose" | "code">("choose");
   const e164 = "7" + phone;
 
+  async function loginViaTelegram() {
+    setBusy(true);
+    try {
+      const r = await tgSession();
+      sessionStorage.setItem("pp-pair-session", r.pair_session);
+      if (r.deep_link) { window.location.href = r.deep_link; }
+      nav("/tg-wait");
+    } catch {
+      toast.error("Не удалось начать вход. Попробуйте «по коду».");
+      setBusy(false);
+    }
+  }
+
   async function requestCode() {
     if (phone.length < 10) return;
     setBusy(true);
@@ -59,34 +73,46 @@ export function LoginPage() {
       <h1 className="text-xl font-extrabold mb-1">Премиум Водитель</h1>
       <p className="text-muted text-sm mb-8">Вход в приложение</p>
 
-      {step === "phone" ? (
+      {mode === "choose" ? (
         <>
-          <input
-            inputMode="numeric"
-            placeholder="Номер телефона"
-            value={phone ? formatPhone(phone) : ""}
-            onChange={(e) => setPhone(digitsOnly(e.target.value).replace(/^7/, "").slice(0, 10))}
-            className="card w-full px-4 py-3 mb-3 text-base bg-white"
-          />
-          <button className="btn-primary" disabled={busy || phone.length < 10} onClick={requestCode}>
-            {busy ? <Spinner /> : "Получить код"}
+          <button className="btn-primary" disabled={busy} onClick={loginViaTelegram}>
+            {busy ? <Spinner /> : "Войти через Telegram"}
           </button>
-          <p className="text-muted text-xs mt-3">Код придёт в Telegram или MAX.</p>
+          <p className="text-muted text-xs mt-3">Telegram подтвердит ваш номер автоматически.</p>
+          <button className="btn-ghost mt-4" onClick={() => setMode("code")}>Войти по коду</button>
         </>
       ) : (
         <>
-          <p className="text-sm mb-2">Код отправлен в {channel === "max" ? "MAX" : "Telegram"}.</p>
-          <input
-            inputMode="numeric"
-            placeholder="Код из сообщения"
-            value={code}
-            onChange={(e) => setCode(digitsOnly(e.target.value).slice(0, 6))}
-            className="card w-full px-4 py-3 mb-3 text-base tracking-widest bg-white"
-          />
-          <button className="btn-primary" disabled={busy || code.length < 4} onClick={verify}>
-            {busy ? <Spinner /> : "Войти"}
-          </button>
-          <button className="btn-ghost mt-2" onClick={() => setStep("phone")}>Изменить номер</button>
+          {step === "phone" ? (
+            <>
+              <input
+                inputMode="numeric"
+                placeholder="Номер телефона"
+                value={phone ? formatPhone(phone) : ""}
+                onChange={(e) => setPhone(digitsOnly(e.target.value).replace(/^7/, "").slice(0, 10))}
+                className="card w-full px-4 py-3 mb-3 text-base bg-white"
+              />
+              <button className="btn-primary" disabled={busy || phone.length < 10} onClick={requestCode}>
+                {busy ? <Spinner /> : "Получить код"}
+              </button>
+              <p className="text-muted text-xs mt-3">Код придёт в Telegram или MAX.</p>
+            </>
+          ) : (
+            <>
+              <p className="text-sm mb-2">Код отправлен в {channel === "max" ? "MAX" : "Telegram"}.</p>
+              <input
+                inputMode="numeric"
+                placeholder="Код из сообщения"
+                value={code}
+                onChange={(e) => setCode(digitsOnly(e.target.value).slice(0, 6))}
+                className="card w-full px-4 py-3 mb-3 text-base tracking-widest bg-white"
+              />
+              <button className="btn-primary" disabled={busy || code.length < 4} onClick={verify}>
+                {busy ? <Spinner /> : "Войти"}
+              </button>
+              <button className="btn-ghost mt-2" onClick={() => setStep("phone")}>Изменить номер</button>
+            </>
+          )}
         </>
       )}
     </div>

driver-pwa/frontend/src/pages/TgWaitPage.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { usePairPoll } from "@/hooks/usePairPoll";
+import { Spinner } from "@/components/Spinner";
+
+export function TgWaitPage() {
+  const nav = useNavigate();
+  const pairSession = sessionStorage.getItem("pp-pair-session");
+  const { status } = usePairPoll(pairSession);
+
+  useEffect(() => {
+    if (status === "authenticated") { sessionStorage.removeItem("pp-pair-session"); nav("/", { replace: true }); }
+    if (status === "expired") { sessionStorage.removeItem("pp-pair-session"); nav("/login", { replace: true, state: { expired: true } }); }
+  }, [status, nav]);
+
+  return (
+    <div className="pt-16 text-center">
+      <h1 className="text-xl font-extrabold mb-2">Премиум Водитель</h1>
+      <p className="text-muted text-sm mb-8">Подтвердите номер в Telegram — нажмите «Поделиться номером», затем вернитесь сюда.</p>
+      <Spinner />
+    </div>
+  );
+}