feat(driver-pwa): login (phone -> TG/MAX code)

Co-Authored-By: claude-flow <ruv@ruv.net>
2026-06-18 19:24:37 +10:00
parent f74f3688ae
commit 9a116ad94e
2 changed files with 117 additions and 1 deletions
@@ -0,0 +1,30 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+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 })),
+}));
+
+import { LoginPage } from "./LoginPage";
+import * as driver from "@/api/driver";
+import { useAuth } from "@/store/auth";
+
+const wrap = () => render(<MemoryRouter><LoginPage /></MemoryRouter>);
+
+describe("LoginPage", () => {
+  beforeEach(() => useAuth.getState().clear());
+  it("requests code then verifies and stores session", async () => {
+    wrap();
+    expect(screen.getByText(/Вход в приложение/i)).toBeInTheDocument();
+    await userEvent.type(screen.getByPlaceholderText(/телефон/i), "9143054400");
+    await userEvent.click(screen.getByRole("button", { name: /Получить код/i }));
+    expect(driver.authRequest).toHaveBeenCalledWith("79143054400");
+    const codeInput = await screen.findByPlaceholderText(/код/i);
+    await userEvent.type(codeInput, "123456");
+    await userEvent.click(screen.getByRole("button", { name: /Войти/i }));
+    expect(driver.authVerify).toHaveBeenCalledWith("79143054400", "123456");
+  });
+});
@@ -1,3 +1,89 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { authRequest, authVerify } from "@/api/driver";
+import { digitsOnly, formatPhone } from "@/lib/format";
+import { useAuth } from "@/store/auth";
+import { Spinner } from "@/components/Spinner";
+
 export function LoginPage() {
-  return <div>Вход в приложение</div>;
+  const nav = useNavigate();
+  const setSession = useAuth((s) => s.setSession);
+  const [phone, setPhone] = useState("");          // national 10 digits
+  const [code, setCode] = useState("");
+  const [step, setStep] = useState<"phone" | "code">("phone");
+  const [channel, setChannel] = useState<string>("");
+  const [busy, setBusy] = useState(false);
+  const e164 = "7" + phone;
+
+  async function requestCode() {
+    if (phone.length < 10) return;
+    setBusy(true);
+    try {
+      const r = await authRequest(e164);
+      if (r.status === "onboarding") {
+        sessionStorage.setItem("pp-onboarding", JSON.stringify({ ...r.deep_links, phone }));
+        nav("/onboarding");
+        return;
+      }
+      setChannel(r.channel);
+      setStep("code");
+    } catch (err: any) {
+      toast.error(err?.response?.status === 404 ? "Номер не найден. Обратитесь в парк." : "Не удалось отправить код");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function verify() {
+    if (code.length < 4) return;
+    setBusy(true);
+    try {
+      const r = await authVerify(e164, code);
+      setSession(r.token, r.driver_id);
+      nav("/");
+    } catch {
+      toast.error("Неверный или просроченный код");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="pt-16">
+      <h1 className="text-xl font-extrabold mb-1">Премиум Водитель</h1>
+      <p className="text-muted text-sm mb-8">Вход в приложение</p>
+
+      {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>
+  );
 }