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
@@ -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>
+  );
 }