90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
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() {
|
|
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>
|
|
);
|
|
}
|