feat(tradein-ui): Cian cookies upload admin page #481
2 changed files with 364 additions and 1 deletions
351
tradein-mvp/frontend/src/app/scrapers/cian-cookies/page.tsx
Normal file
351
tradein-mvp/frontend/src/app/scrapers/cian-cookies/page.tsx
Normal file
|
|
@ -0,0 +1,351 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
|
|
||||||
|
import "@/components/trade-in/trade-in.css";
|
||||||
|
import { Topbar } from "@/components/trade-in/Topbar";
|
||||||
|
import { apiFetch } from "@/lib/api";
|
||||||
|
|
||||||
|
interface UploadResponse {
|
||||||
|
ok?: boolean;
|
||||||
|
userId?: number;
|
||||||
|
cookieCount?: number;
|
||||||
|
detail?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TestAuthResponse {
|
||||||
|
authenticated: boolean;
|
||||||
|
userId?: number;
|
||||||
|
reason?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CookieEditorEntry {
|
||||||
|
name: string;
|
||||||
|
value: string | number | boolean;
|
||||||
|
[key: string]: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
function convertCookiesFormat(input: string): Record<string, string> {
|
||||||
|
const parsed: unknown = JSON.parse(input.trim());
|
||||||
|
if (Array.isArray(parsed)) {
|
||||||
|
// Cookie-Editor array format: [{name, value, domain, ...}, ...]
|
||||||
|
return (parsed as CookieEditorEntry[]).reduce<Record<string, string>>(
|
||||||
|
(acc, c) => {
|
||||||
|
if (
|
||||||
|
typeof c === "object" &&
|
||||||
|
c !== null &&
|
||||||
|
"name" in c &&
|
||||||
|
"value" in c
|
||||||
|
) {
|
||||||
|
acc[String(c.name)] = String(c.value);
|
||||||
|
}
|
||||||
|
return acc;
|
||||||
|
},
|
||||||
|
{},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
|
||||||
|
// Already a dict: {"name1": "val1", "name2": "val2"}
|
||||||
|
return Object.fromEntries(
|
||||||
|
Object.entries(parsed as Record<string, unknown>).map(([k, v]) => [
|
||||||
|
k,
|
||||||
|
String(v),
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
throw new Error("Expected JSON array or plain object");
|
||||||
|
}
|
||||||
|
|
||||||
|
function parsePreview(raw: string): {
|
||||||
|
cookies: Record<string, string> | null;
|
||||||
|
error: string | null;
|
||||||
|
} {
|
||||||
|
if (!raw.trim()) return { cookies: null, error: null };
|
||||||
|
try {
|
||||||
|
const cookies = convertCookiesFormat(raw);
|
||||||
|
return { cookies, error: null };
|
||||||
|
} catch (e) {
|
||||||
|
return { cookies: null, error: e instanceof Error ? e.message : String(e) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CianCookiesPage() {
|
||||||
|
const [rawInput, setRawInput] = useState("");
|
||||||
|
const [showInstructions, setShowInstructions] = useState(false);
|
||||||
|
|
||||||
|
const preview = parsePreview(rawInput);
|
||||||
|
const previewKeys = preview.cookies ? Object.keys(preview.cookies) : [];
|
||||||
|
|
||||||
|
const uploadMutation = useMutation({
|
||||||
|
mutationFn: () => {
|
||||||
|
if (!preview.cookies) {
|
||||||
|
throw new Error("Invalid JSON — fix the input first");
|
||||||
|
}
|
||||||
|
return apiFetch<UploadResponse>(
|
||||||
|
"/api/v1/admin/scrape/cian/upload-cookies",
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(preview.cookies),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
onSuccess: () => setRawInput(""),
|
||||||
|
});
|
||||||
|
|
||||||
|
const testAuthQuery = useQuery({
|
||||||
|
queryKey: ["cian-test-auth"],
|
||||||
|
queryFn: () =>
|
||||||
|
apiFetch<TestAuthResponse>("/api/v1/admin/scrape/cian/test-auth"),
|
||||||
|
enabled: false, // only on explicit button click
|
||||||
|
retry: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const canUpload =
|
||||||
|
!!preview.cookies && previewKeys.length > 0 && !uploadMutation.isPending;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Topbar active="cian-cookies" />
|
||||||
|
<main className="page scraper-page">
|
||||||
|
<h1 className="scraper-h1">Cian — обновление cookies</h1>
|
||||||
|
<p className="scraper-subtitle">
|
||||||
|
Позволяет обновить сессию Cian для скрапера оценщика без перезапуска
|
||||||
|
backend. Endpoints:{" "}
|
||||||
|
<code>POST /api/v1/admin/scrape/cian/upload-cookies</code> ·{" "}
|
||||||
|
<code>GET /api/v1/admin/scrape/cian/test-auth</code>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Instructions collapsible */}
|
||||||
|
<div className="scraper-section">
|
||||||
|
<button
|
||||||
|
onClick={() => setShowInstructions((v) => !v)}
|
||||||
|
style={{
|
||||||
|
background: "none",
|
||||||
|
border: "none",
|
||||||
|
padding: 0,
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "var(--accent, #1d4ed8)",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{showInstructions ? "▼" : "▶"}</span>
|
||||||
|
Как получить cookies (инструкция)
|
||||||
|
</button>
|
||||||
|
{showInstructions && (
|
||||||
|
<ol
|
||||||
|
style={{
|
||||||
|
marginTop: 12,
|
||||||
|
paddingLeft: 20,
|
||||||
|
fontSize: 13,
|
||||||
|
color: "var(--fg, #374151)",
|
||||||
|
lineHeight: 1.7,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
Открой{" "}
|
||||||
|
<a
|
||||||
|
href="https://www.cian.ru/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
cian.ru
|
||||||
|
</a>{" "}
|
||||||
|
и войди под нужным аккаунтом.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Установи расширение <strong>Cookie-Editor</strong>{" "}
|
||||||
|
(Chrome/Firefox) <em>или</em> открой DevTools → Application →
|
||||||
|
Cookies → www.cian.ru.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Cookie-Editor:</strong> нажми Export → Export as JSON →
|
||||||
|
скопируй массив{" "}
|
||||||
|
<code>[{"{"}name, value, ...{"}"}]</code>.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>DevTools (ручной способ):</strong> собери объект{" "}
|
||||||
|
<code>
|
||||||
|
{"{"}
|
||||||
|
{'"'}name1{'"'}: {'"'}val1{'"'}, ...{"}"}
|
||||||
|
</code>
|
||||||
|
.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Вставь JSON в поле ниже — формат определится автоматически.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Убедись что preview показывает нужные ключи, затем нажми
|
||||||
|
Upload.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Cookie input */}
|
||||||
|
<div className="scraper-section">
|
||||||
|
<h2>Cookie JSON</h2>
|
||||||
|
<p className="scraper-hint">
|
||||||
|
Вставьте Cookie-Editor array или plain dict. Формат определяется
|
||||||
|
автоматически.
|
||||||
|
</p>
|
||||||
|
<div className="scraper-form">
|
||||||
|
<label className="full">
|
||||||
|
<textarea
|
||||||
|
value={rawInput}
|
||||||
|
onChange={(e) => {
|
||||||
|
setRawInput(e.target.value);
|
||||||
|
uploadMutation.reset();
|
||||||
|
}}
|
||||||
|
rows={15}
|
||||||
|
placeholder={`Формат 1 — Cookie-Editor array:\n[\n {"name": "session_key", "value": "abc123", "domain": ".cian.ru"},\n {"name": "_CSRF", "value": "xyz", "domain": ".cian.ru"}\n]\n\nФормат 2 — dict (DevTools manual):\n{\n "session_key": "abc123",\n "_CSRF": "xyz"\n}`}
|
||||||
|
style={{
|
||||||
|
fontFamily: "var(--font-mono, ui-monospace, monospace)",
|
||||||
|
fontSize: 12,
|
||||||
|
resize: "vertical",
|
||||||
|
minHeight: 240,
|
||||||
|
padding: "8px 10px",
|
||||||
|
border: "1px solid var(--border-strong, #d1d5db)",
|
||||||
|
borderRadius: 6,
|
||||||
|
background: "#fff",
|
||||||
|
color: "var(--fg, #111)",
|
||||||
|
width: "100%",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{/* Preview */}
|
||||||
|
{rawInput.trim() && (
|
||||||
|
<div
|
||||||
|
className={`scraper-result${preview.error ? " scraper-result--error" : ""}`}
|
||||||
|
style={{ fontFamily: "inherit" }}
|
||||||
|
>
|
||||||
|
{preview.error ? (
|
||||||
|
<span>JSON error: {preview.error}</span>
|
||||||
|
) : (
|
||||||
|
<span style={{ color: "var(--success, #0a7a3a)" }}>
|
||||||
|
Detected <strong>{previewKeys.length} cookies</strong>:{" "}
|
||||||
|
{previewKeys.slice(0, 8).join(", ")}
|
||||||
|
{previewKeys.length > 8
|
||||||
|
? ` … +${previewKeys.length - 8} more`
|
||||||
|
: ""}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
uploadMutation.mutate();
|
||||||
|
}}
|
||||||
|
disabled={!canUpload}
|
||||||
|
title={!preview.cookies ? "Вставьте корректный JSON" : undefined}
|
||||||
|
>
|
||||||
|
{uploadMutation.isPending ? "Uploading…" : "Upload Cookies"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
void testAuthQuery.refetch();
|
||||||
|
}}
|
||||||
|
disabled={testAuthQuery.isFetching}
|
||||||
|
style={{
|
||||||
|
background: "var(--surface-2, #f3f4f6)",
|
||||||
|
color: "var(--fg, #1f2937)",
|
||||||
|
border: "1px solid var(--border-strong, #d1d5db)",
|
||||||
|
justifySelf: "start",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{testAuthQuery.isFetching ? "Checking…" : "Test Current Session"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upload result */}
|
||||||
|
{uploadMutation.isSuccess && (
|
||||||
|
<div
|
||||||
|
className="scraper-result"
|
||||||
|
style={{
|
||||||
|
fontFamily: "inherit",
|
||||||
|
background: uploadMutation.data.ok
|
||||||
|
? "var(--success-soft, #f0fdf4)"
|
||||||
|
: "var(--danger-soft, #fef2f2)",
|
||||||
|
borderColor: uploadMutation.data.ok
|
||||||
|
? "var(--success, #0a7a3a)"
|
||||||
|
: "var(--danger, #b3261e)",
|
||||||
|
color: uploadMutation.data.ok
|
||||||
|
? "var(--success, #0a7a3a)"
|
||||||
|
: "var(--danger, #b3261e)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{uploadMutation.data.ok ? (
|
||||||
|
<>
|
||||||
|
<strong>Cookies uploaded.</strong> userId={" "}
|
||||||
|
{uploadMutation.data.userId ?? "—"} · cookieCount={" "}
|
||||||
|
{uploadMutation.data.cookieCount ?? previewKeys.length}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<strong>Upload failed:</strong>{" "}
|
||||||
|
{uploadMutation.data.detail ?? "Unknown error"}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{uploadMutation.isError && (
|
||||||
|
<div className="scraper-result scraper-result--error">
|
||||||
|
<strong>Error:</strong> {String(uploadMutation.error)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Test auth result */}
|
||||||
|
{(testAuthQuery.isSuccess || testAuthQuery.isError) && (
|
||||||
|
<div
|
||||||
|
className="scraper-result"
|
||||||
|
style={{
|
||||||
|
fontFamily: "inherit",
|
||||||
|
background:
|
||||||
|
testAuthQuery.isSuccess && testAuthQuery.data.authenticated
|
||||||
|
? "var(--success-soft, #f0fdf4)"
|
||||||
|
: "var(--danger-soft, #fef2f2)",
|
||||||
|
borderColor:
|
||||||
|
testAuthQuery.isSuccess && testAuthQuery.data.authenticated
|
||||||
|
? "var(--success, #0a7a3a)"
|
||||||
|
: "var(--danger, #b3261e)",
|
||||||
|
color:
|
||||||
|
testAuthQuery.isSuccess && testAuthQuery.data.authenticated
|
||||||
|
? "var(--success, #0a7a3a)"
|
||||||
|
: "var(--danger, #b3261e)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{testAuthQuery.isError ? (
|
||||||
|
<>
|
||||||
|
<strong>Test auth error:</strong>{" "}
|
||||||
|
{String(testAuthQuery.error)}
|
||||||
|
</>
|
||||||
|
) : testAuthQuery.data.authenticated ? (
|
||||||
|
<>
|
||||||
|
<strong>Authenticated.</strong> userId={" "}
|
||||||
|
{testAuthQuery.data.userId ?? "—"}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<strong>Not authenticated.</strong>{" "}
|
||||||
|
{testAuthQuery.data.reason
|
||||||
|
? `Reason: ${testAuthQuery.data.reason}`
|
||||||
|
: "Session expired or cookies invalid."}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,14 @@
|
||||||
|
|
||||||
import { API_BASE_URL } from "@/lib/api";
|
import { API_BASE_URL } from "@/lib/api";
|
||||||
|
|
||||||
type ActiveTab = "estimate" | "history" | "cache" | "avito" | "cian" | "yandex";
|
type ActiveTab =
|
||||||
|
| "estimate"
|
||||||
|
| "history"
|
||||||
|
| "cache"
|
||||||
|
| "avito"
|
||||||
|
| "cian"
|
||||||
|
| "yandex"
|
||||||
|
| "cian-cookies";
|
||||||
|
|
||||||
interface TopbarProps {
|
interface TopbarProps {
|
||||||
active: ActiveTab;
|
active: ActiveTab;
|
||||||
|
|
@ -15,6 +22,11 @@ const NAV_ITEMS: Array<{ key: ActiveTab; href: string; label: string }> = [
|
||||||
{ key: "avito", href: "/scrapers/avito", label: "Авито" },
|
{ key: "avito", href: "/scrapers/avito", label: "Авито" },
|
||||||
{ key: "cian", href: "/scrapers/cian", label: "Циан" },
|
{ key: "cian", href: "/scrapers/cian", label: "Циан" },
|
||||||
{ key: "yandex", href: "/scrapers/yandex", label: "Яндекс" },
|
{ key: "yandex", href: "/scrapers/yandex", label: "Яндекс" },
|
||||||
|
{
|
||||||
|
key: "cian-cookies",
|
||||||
|
href: "/scrapers/cian-cookies",
|
||||||
|
label: "Cian Cookies",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export function Topbar({ active }: TopbarProps) {
|
export function Topbar({ active }: TopbarProps) {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue