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).
2026-05-23 17:46:44 +03:00 · 2026-05-23 17:46:44 +03:00 · b92eb81f2d
commit b92eb81f2d
parent ae0fce3528
2 changed files with 463 additions and 0 deletions
--- a/frontend/src/app/admin/layout.tsx
+++ b/frontend/src/app/admin/layout.tsx
@ -9,6 +9,7 @@ const TABS = [
  { href: "/admin/scrape/geo", label: "🗺 NSPD geo (rosreestr2coord)" },
  { href: "/admin/scrape/cadastre", label: "🏗 Cadastre bulk harvest" },
  { href: "/admin/scrape/objective", label: "ETL Objective" },
+  { href: "/admin/scrape/cian-cookies", label: "Cian Cookies" },
  { href: "/admin/leads", label: "Лиды PRINZIP" },
 ];

--- a/frontend/src/app/admin/scrape/cian-cookies/page.tsx
+++ b/frontend/src/app/admin/scrape/cian-cookies/page.tsx
@ -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",
+};