feat(tradein-ui): Cian cookies upload admin page (paste JSON → POST /admin/scrape/cian/upload-cookies)
New page at /admin/scrape/cian-cookies: - Textarea for pasting Cookie-Editor array or plain dict JSON - Client-side format auto-detection and conversion - Live preview: detected N cookies with key names - Upload button → POST /api/v1/admin/scrape/cian/upload-cookies - Test Session button → GET /api/v1/admin/scrape/cian/test-auth - Error/success inline banners, collapsible instructions - Admin token from localStorage (same pattern as /admin/scrape) - Tab added to admin nav layout Backend endpoints from PR #457 (Stage 4).
This commit is contained in:
lekss361
parent
ae0fce3528
commit
b92eb81f2d
2 changed files with 463 additions and 0 deletions
|
|
@ -9,6 +9,7 @@ const TABS = [
|
||||||
{ href: "/admin/scrape/geo", label: "🗺 NSPD geo (rosreestr2coord)" },
|
{ href: "/admin/scrape/geo", label: "🗺 NSPD geo (rosreestr2coord)" },
|
||||||
{ href: "/admin/scrape/cadastre", label: "🏗 Cadastre bulk harvest" },
|
{ href: "/admin/scrape/cadastre", label: "🏗 Cadastre bulk harvest" },
|
||||||
{ href: "/admin/scrape/objective", label: "ETL Objective" },
|
{ href: "/admin/scrape/objective", label: "ETL Objective" },
|
||||||
|
{ href: "/admin/scrape/cian-cookies", label: "Cian Cookies" },
|
||||||
{ href: "/admin/leads", label: "Лиды PRINZIP" },
|
{ href: "/admin/leads", label: "Лиды PRINZIP" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
||||||
462
frontend/src/app/admin/scrape/cian-cookies/page.tsx
Normal file
462
frontend/src/app/admin/scrape/cian-cookies/page.tsx
Normal file
|
|
@ -0,0 +1,462 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||||
|
|
||||||
|
import { apiFetch } from "@/lib/api";
|
||||||
|
import { cardStyle, inputStyle, labelStyle } from "@/lib/adminStyles";
|
||||||
|
|
||||||
|
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 [token, setToken] = useState<string>(() =>
|
||||||
|
typeof window === "undefined"
|
||||||
|
? ""
|
||||||
|
: (localStorage.getItem("admin_token") ?? ""),
|
||||||
|
);
|
||||||
|
const [rawInput, setRawInput] = useState("");
|
||||||
|
const [showInstructions, setShowInstructions] = useState(false);
|
||||||
|
|
||||||
|
const saveToken = (v: string) => {
|
||||||
|
setToken(v);
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
localStorage.setItem("admin_token", v);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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",
|
||||||
|
headers: { "X-Admin-Token": token },
|
||||||
|
body: JSON.stringify(preview.cookies),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const testAuthQuery = useQuery({
|
||||||
|
queryKey: ["cian-test-auth", token],
|
||||||
|
queryFn: () =>
|
||||||
|
apiFetch<TestAuthResponse>("/api/v1/admin/scrape/cian/test-auth", {
|
||||||
|
headers: { "X-Admin-Token": token },
|
||||||
|
}),
|
||||||
|
enabled: false, // only on explicit button click
|
||||||
|
retry: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
const canUpload =
|
||||||
|
!!token &&
|
||||||
|
!!preview.cookies &&
|
||||||
|
previewKeys.length > 0 &&
|
||||||
|
!uploadMutation.isPending;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: 800 }}>
|
||||||
|
<h2 style={{ marginTop: 0, fontSize: 18 }}>
|
||||||
|
Cian Valuation Calculator — Upload Cookies
|
||||||
|
</h2>
|
||||||
|
<p style={{ color: "#5b6066", fontSize: 13, marginTop: 4 }}>
|
||||||
|
Позволяет обновить сессию Циан для скрапера оценщика без перезапуска
|
||||||
|
backend. Backend endpoints: POST{" "}
|
||||||
|
<code
|
||||||
|
style={{
|
||||||
|
background: "#f3f4f6",
|
||||||
|
padding: "1px 5px",
|
||||||
|
borderRadius: 3,
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
/api/v1/admin/scrape/cian/upload-cookies
|
||||||
|
</code>{" "}
|
||||||
|
· GET{" "}
|
||||||
|
<code
|
||||||
|
style={{
|
||||||
|
background: "#f3f4f6",
|
||||||
|
padding: "1px 5px",
|
||||||
|
borderRadius: 3,
|
||||||
|
fontSize: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
/api/v1/admin/scrape/cian/test-auth
|
||||||
|
</code>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Instructions collapsible */}
|
||||||
|
<section style={{ ...cardStyle, marginBottom: 16 }}>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowInstructions((v) => !v)}
|
||||||
|
style={{
|
||||||
|
background: "none",
|
||||||
|
border: "none",
|
||||||
|
padding: 0,
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "#1d4ed8",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{showInstructions ? "▼" : "▶"}</span>
|
||||||
|
Как получить cookies (инструкция)
|
||||||
|
</button>
|
||||||
|
{showInstructions && (
|
||||||
|
<ol
|
||||||
|
style={{
|
||||||
|
marginTop: 12,
|
||||||
|
paddingLeft: 20,
|
||||||
|
fontSize: 13,
|
||||||
|
color: "#374151",
|
||||||
|
lineHeight: 1.7,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<li>
|
||||||
|
Открой{" "}
|
||||||
|
<strong>
|
||||||
|
<a
|
||||||
|
href="https://www.cian.ru/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
style={{ color: "#1d4ed8" }}
|
||||||
|
>
|
||||||
|
cian.ru
|
||||||
|
</a>
|
||||||
|
</strong>{" "}
|
||||||
|
и войди под нужным аккаунтом.
|
||||||
|
</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
|
||||||
|
style={{
|
||||||
|
background: "#f3f4f6",
|
||||||
|
padding: "1px 4px",
|
||||||
|
borderRadius: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
[{"{"}name, value, ...{"}"}]
|
||||||
|
</code>
|
||||||
|
.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>DevTools (ручной способ):</strong> собери объект{" "}
|
||||||
|
<code
|
||||||
|
style={{
|
||||||
|
background: "#f3f4f6",
|
||||||
|
padding: "1px 4px",
|
||||||
|
borderRadius: 3,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{"{"}
|
||||||
|
{'"'}name1{'"'}: {'"'}val1{'"'}, ...{"}"}
|
||||||
|
</code>
|
||||||
|
.
|
||||||
|
</li>
|
||||||
|
<li>Вставь JSON в поле ниже — формат определится автоматически.</li>
|
||||||
|
<li>
|
||||||
|
Убедись что preview показывает нужные ключи, затем нажми Upload.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Admin token input */}
|
||||||
|
<section style={cardStyle}>
|
||||||
|
<label style={{ display: "block", marginBottom: 16 }}>
|
||||||
|
<span style={labelStyle}>Admin Token</span>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
value={token}
|
||||||
|
onChange={(e) => saveToken(e.target.value)}
|
||||||
|
placeholder="SCRAPE_ADMIN_TOKEN"
|
||||||
|
style={inputStyle}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{/* Textarea */}
|
||||||
|
<label style={{ display: "block", marginBottom: 8 }}>
|
||||||
|
<span style={labelStyle}>Cookie JSON (paste here)</span>
|
||||||
|
<textarea
|
||||||
|
value={rawInput}
|
||||||
|
onChange={(e) => {
|
||||||
|
setRawInput(e.target.value);
|
||||||
|
// reset mutation result when input changes
|
||||||
|
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={{
|
||||||
|
...inputStyle,
|
||||||
|
fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
|
||||||
|
fontSize: 12,
|
||||||
|
resize: "vertical",
|
||||||
|
minHeight: 240,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
{/* Preview */}
|
||||||
|
{rawInput.trim() && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginBottom: 16,
|
||||||
|
padding: "10px 12px",
|
||||||
|
borderRadius: 6,
|
||||||
|
border: "1px solid",
|
||||||
|
borderColor: preview.error ? "#fecaca" : "#bbf7d0",
|
||||||
|
background: preview.error ? "#fef2f2" : "#f0fdf4",
|
||||||
|
fontSize: 13,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{preview.error ? (
|
||||||
|
<span style={{ color: "#991b1b" }}>
|
||||||
|
JSON error: {preview.error}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<span style={{ color: "#065f46" }}>
|
||||||
|
Detected <strong>{previewKeys.length} cookies</strong>:{" "}
|
||||||
|
{previewKeys.slice(0, 8).join(", ")}
|
||||||
|
{previewKeys.length > 8
|
||||||
|
? ` … +${previewKeys.length - 8} more`
|
||||||
|
: ""}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Action buttons */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
gap: 12,
|
||||||
|
flexWrap: "wrap",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
uploadMutation.mutate();
|
||||||
|
}}
|
||||||
|
disabled={!canUpload}
|
||||||
|
title={
|
||||||
|
!token
|
||||||
|
? "Введите Admin Token"
|
||||||
|
: !preview.cookies
|
||||||
|
? "Вставьте корректный JSON"
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
style={primaryBtn}
|
||||||
|
>
|
||||||
|
{uploadMutation.isPending ? "Uploading…" : "Upload Cookies"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
void testAuthQuery.refetch();
|
||||||
|
}}
|
||||||
|
disabled={!token || testAuthQuery.isFetching}
|
||||||
|
title={!token ? "Введите Admin Token" : undefined}
|
||||||
|
style={secondaryBtn}
|
||||||
|
>
|
||||||
|
{testAuthQuery.isFetching ? "Checking…" : "Test Current Session"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{!token && (
|
||||||
|
<span style={{ fontSize: 13, color: "#9a6700" }}>
|
||||||
|
← введите Admin Token выше
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Upload result */}
|
||||||
|
{uploadMutation.isSuccess && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginTop: 14,
|
||||||
|
padding: 12,
|
||||||
|
background: uploadMutation.data.ok ? "#f0fdf4" : "#fef2f2",
|
||||||
|
border: "1px solid",
|
||||||
|
borderColor: uploadMutation.data.ok ? "#bbf7d0" : "#fecaca",
|
||||||
|
borderRadius: 6,
|
||||||
|
fontSize: 13,
|
||||||
|
color: uploadMutation.data.ok ? "#065f46" : "#991b1b",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{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
|
||||||
|
style={{
|
||||||
|
marginTop: 14,
|
||||||
|
padding: 12,
|
||||||
|
background: "#fef2f2",
|
||||||
|
border: "1px solid #fecaca",
|
||||||
|
borderRadius: 6,
|
||||||
|
fontSize: 13,
|
||||||
|
color: "#991b1b",
|
||||||
|
wordBreak: "break-word",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<strong>Error:</strong> {String(uploadMutation.error)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Test auth result */}
|
||||||
|
{(testAuthQuery.isSuccess || testAuthQuery.isError) && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginTop: 14,
|
||||||
|
padding: 12,
|
||||||
|
background:
|
||||||
|
testAuthQuery.isSuccess && testAuthQuery.data.authenticated
|
||||||
|
? "#f0fdf4"
|
||||||
|
: "#fef2f2",
|
||||||
|
border: "1px solid",
|
||||||
|
borderColor:
|
||||||
|
testAuthQuery.isSuccess && testAuthQuery.data.authenticated
|
||||||
|
? "#bbf7d0"
|
||||||
|
: "#fecaca",
|
||||||
|
borderRadius: 6,
|
||||||
|
fontSize: 13,
|
||||||
|
color:
|
||||||
|
testAuthQuery.isSuccess && testAuthQuery.data.authenticated
|
||||||
|
? "#065f46"
|
||||||
|
: "#991b1b",
|
||||||
|
wordBreak: "break-word",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{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>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const primaryBtn: React.CSSProperties = {
|
||||||
|
padding: "10px 18px",
|
||||||
|
background: "#1d4ed8",
|
||||||
|
color: "#fff",
|
||||||
|
border: "none",
|
||||||
|
borderRadius: 6,
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: 600,
|
||||||
|
cursor: "pointer",
|
||||||
|
};
|
||||||
|
|
||||||
|
const secondaryBtn: React.CSSProperties = {
|
||||||
|
padding: "8px 14px",
|
||||||
|
background: "#f3f4f6",
|
||||||
|
color: "#1f2937",
|
||||||
|
border: "1px solid #d1d5db",
|
||||||
|
borderRadius: 6,
|
||||||
|
fontSize: 13,
|
||||||
|
cursor: "pointer",
|
||||||
|
};
|
||||||
Loading…
Add table
Reference in a new issue