Add public map with JWT admin login and protect admin APIs.

Keep map reads open; gate admin UI/nav and object mutations behind env-based admin credentials, and default parser batch limit to 10.

Co-authored-by: Cursor <cursoragent@cursor.com>

centers/analytics/frontend/src/api/client.ts

@@ -1,3 +1,5 @@
+import { clearToken, getToken } from "../auth";
+
 const API_BASE = "/api";
 const ADMIN_BASE = "/admin";
 
@@ -13,11 +15,24 @@ export async function request<T>(
     headers.set("Content-Type", "application/json");
   }
 
+  const token = getToken();
+  if (token && !headers.has("Authorization")) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+
   const response = await fetch(`${base}${url}`, {
     ...options,
     headers,
   });
 
+  if (response.status === 401 && token) {
+    clearToken();
+    if (typeof window !== "undefined" && !window.location.pathname.startsWith("/login")) {
+      const next = `${window.location.pathname}${window.location.search}`;
+      window.location.assign(`/login?next=${encodeURIComponent(next)}`);
+    }
+  }
+
   if (!response.ok) {
     const message = await response.text();
     throw new Error(message || `Ошибка запроса: ${response.status}`);

centers/analytics/frontend/src/auth.ts

@@ -0,0 +1,40 @@
+import { computed, ref } from "vue";
+
+const TOKEN_KEY = "mapmil_admin_token";
+const ADMIN_BASE = "/admin";
+
+const token = ref<string | null>(localStorage.getItem(TOKEN_KEY));
+
+export function getToken(): string | null {
+  return token.value;
+}
+
+export function setToken(value: string | null): void {
+  token.value = value;
+  if (value) localStorage.setItem(TOKEN_KEY, value);
+  else localStorage.removeItem(TOKEN_KEY);
+}
+
+export function clearToken(): void {
+  setToken(null);
+}
+
+export const isAuthenticated = computed(() => Boolean(token.value));
+
+export async function login(username: string, password: string): Promise<void> {
+  const response = await fetch(`${ADMIN_BASE}/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ username, password }),
+  });
+  if (!response.ok) {
+    const message = await response.text();
+    throw new Error(message || `Ошибка входа: ${response.status}`);
+  }
+  const data = (await response.json()) as { access_token: string };
+  setToken(data.access_token);
+}
+
+export function logout(): void {
+  clearToken();
+}

centers/analytics/frontend/src/components/MapView.vue

@@ -4,11 +4,15 @@ import { onMounted, onUnmounted, watch } from "vue";
 import { useLeafletMap } from "../composables/useLeafletMap";
 import type { MapObjectWithEvent } from "../types/map";
 
-const props = defineProps<{
-  objects: MapObjectWithEvent[];
-  selectedId: number | null;
-  openPopupId: number | null;
-}>();
+const props = withDefaults(
+  defineProps<{
+    objects: MapObjectWithEvent[];
+    selectedId: number | null;
+    openPopupId: number | null;
+    editable?: boolean;
+  }>(),
+  { editable: false },
+);
 
 const emit = defineEmits<{
   select: [object: MapObjectWithEvent];
@@ -53,7 +57,7 @@ function buildPopupHtml(obj: MapObjectWithEvent): string {
 }
 
 function isDraggable(obj: MapObjectWithEvent): boolean {
-  return obj.id === props.selectedId && !obj.event_id;
+  return props.editable && obj.id === props.selectedId && !obj.event_id;
 }
 
 function syncMarkers() {
@@ -170,7 +174,7 @@ onUnmounted(() => {
 });
 
 watch(
-  () => [props.objects, props.selectedId] as const,
+  () => [props.objects, props.selectedId, props.editable] as const,
   () => {
     syncMarkers();
     panToSelected(false);

centers/analytics/frontend/src/components/ObjectPanel.vue

@@ -9,9 +9,13 @@ import {
 import { MEDIA_ACCEPT, OBJECT_TYPE_LABELS } from "../types/object";
 import type { MapObjectWithEvent } from "../types/map";
 
-const props = defineProps<{
-  object: MapObjectWithEvent | null;
-}>();
+const props = withDefaults(
+  defineProps<{
+    object: MapObjectWithEvent | null;
+    canEdit?: boolean;
+  }>(),
+  { canEdit: false },
+);
 
 const emit = defineEmits<{
   openEvents: [];
@@ -151,7 +155,7 @@ watch(() => props.object?.id, () => loadMedia(), { immediate: true });
       <section v-if="!isIngested" class="media-section">
         <div class="media-header">
           <h4>Медиа</h4>
-          <label class="upload-btn">
+          <label v-if="canEdit" class="upload-btn">
             {{ uploading ? "Загрузка..." : "Добавить" }}
             <input
               type="file"
@@ -185,7 +189,14 @@ watch(() => props.object?.id, () => loadMedia(), { immediate: true });
               <span class="name" :title="item.original_name">{{ item.original_name }}</span>
               <span class="size">{{ formatFileSize(item.size) }}</span>
             </div>
-            <button type="button" class="delete-btn" @click="handleDelete(item.id)">Удалить</button>
+            <button
+              v-if="canEdit"
+              type="button"
+              class="delete-btn"
+              @click="handleDelete(item.id)"
+            >
+              Удалить
+            </button>
           </li>
         </ul>
       </section>

centers/analytics/frontend/src/composables/useAuth.ts

@@ -0,0 +1,41 @@
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+
+import { clearToken, getToken, isAuthenticated, login as doLogin, logout as doLogout } from "../auth";
+
+export function useAuth() {
+  const router = useRouter();
+  const busy = ref(false);
+  const error = ref("");
+
+  const authenticated = computed(() => isAuthenticated.value);
+
+  async function login(username: string, password: string): Promise<boolean> {
+    busy.value = true;
+    error.value = "";
+    try {
+      await doLogin(username, password);
+      return true;
+    } catch (err) {
+      clearToken();
+      error.value = err instanceof Error ? err.message : "Не удалось войти";
+      return false;
+    } finally {
+      busy.value = false;
+    }
+  }
+
+  function logout(): void {
+    doLogout();
+    void router.push({ name: "map" });
+  }
+
+  return {
+    authenticated,
+    busy,
+    error,
+    getToken,
+    login,
+    logout,
+  };
+}

centers/analytics/frontend/src/layouts/AppLayout.vue

@@ -2,10 +2,14 @@
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 
-const route = useRoute();
+import { useAuth } from "../composables/useAuth";
 
-const navItems = [
-  { to: "/", label: "Карта", exact: true },
+const route = useRoute();
+const { authenticated, logout } = useAuth();
+
+const publicNavItems = [{ to: "/", label: "Карта", exact: true }];
+
+const adminNavItems = [
   { to: "/channels", label: "Каналы" },
   { to: "/parser-profiles", label: "Профили" },
   { to: "/parsers", label: "Парсеры" },
@@ -14,13 +18,17 @@ const navItems = [
   { to: "/consumers", label: "ПИ" },
 ];
 
+const navItems = computed(() =>
+  authenticated.value ? [...publicNavItems, ...adminNavItems] : publicNavItems,
+);
+
 function isActive(path: string, exact = false): boolean {
   if (exact) return route.path === path;
   return route.path.startsWith(path);
 }
 
 const pageTitle = computed(() => {
-  const item = navItems.find((n) => isActive(n.to, n.exact));
+  const item = navItems.value.find((n) => isActive(n.to, n.exact));
   return item?.label ?? "MapMil";
 });
 </script>
@@ -42,6 +50,12 @@ const pageTitle = computed(() => {
         >
           {{ item.label }}
         </router-link>
+        <router-link v-if="!authenticated" to="/login" class="nav-link nav-auth">
+          Вход
+        </router-link>
+        <button v-else type="button" class="nav-link nav-auth nav-button" @click="logout">
+          Выход
+        </button>
       </nav>
     </header>
     <main class="admin-main">
@@ -87,6 +101,7 @@ const pageTitle = computed(() => {
 
 .nav {
   display: flex;
+  align-items: center;
   gap: 0.25rem;
 }
 
@@ -109,6 +124,19 @@ const pageTitle = computed(() => {
   font-weight: 500;
 }
 
+.nav-auth {
+  margin-left: 0.5rem;
+  color: #1565c0;
+  font-weight: 500;
+}
+
+.nav-button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
 .admin-main {
   flex: 1;
   min-height: 0;

centers/analytics/frontend/src/router/index.ts

@@ -1,10 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
 
+import { getToken } from "../auth";
 import AppLayout from "../layouts/AppLayout.vue";
 import AnalyticsView from "../views/AnalyticsView.vue";
 import ChannelsView from "../views/ChannelsView.vue";
 import ConsumersView from "../views/ConsumersView.vue";
 import EventsView from "../views/EventsView.vue";
+import LoginView from "../views/LoginView.vue";
 import MapViewPage from "../views/MapViewPage.vue";
 import ParserProfilesView from "../views/ParserProfilesView.vue";
 import ParsersView from "../views/ParsersView.vue";
@@ -12,20 +14,65 @@ import ParsersView from "../views/ParsersView.vue";
 const router = createRouter({
   history: createWebHistory(),
   routes: [
+    {
+      path: "/login",
+      name: "login",
+      component: LoginView,
+      meta: { public: true },
+    },
     {
       path: "/",
       component: AppLayout,
       children: [
-        { path: "", name: "map", component: MapViewPage },
-        { path: "channels", name: "channels", component: ChannelsView },
-        { path: "parser-profiles", name: "parser-profiles", component: ParserProfilesView },
-        { path: "parsers", name: "parsers", component: ParsersView },
-        { path: "events", name: "events", component: EventsView },
-        { path: "analytics", name: "analytics", component: AnalyticsView },
-        { path: "consumers", name: "consumers", component: ConsumersView },
+        { path: "", name: "map", component: MapViewPage, meta: { public: true } },
+        {
+          path: "channels",
+          name: "channels",
+          component: ChannelsView,
+          meta: { requiresAuth: true },
+        },
+        {
+          path: "parser-profiles",
+          name: "parser-profiles",
+          component: ParserProfilesView,
+          meta: { requiresAuth: true },
+        },
+        {
+          path: "parsers",
+          name: "parsers",
+          component: ParsersView,
+          meta: { requiresAuth: true },
+        },
+        {
+          path: "events",
+          name: "events",
+          component: EventsView,
+          meta: { requiresAuth: true },
+        },
+        {
+          path: "analytics",
+          name: "analytics",
+          component: AnalyticsView,
+          meta: { requiresAuth: true },
+        },
+        {
+          path: "consumers",
+          name: "consumers",
+          component: ConsumersView,
+          meta: { requiresAuth: true },
+        },
       ],
     },
   ],
 });
 
+router.beforeEach((to) => {
+  if (!to.meta.requiresAuth) return true;
+  if (getToken()) return true;
+  return {
+    name: "login",
+    query: { next: to.fullPath },
+  };
+});
+
 export default router;

centers/analytics/frontend/src/views/LoginView.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useAuth } from "../composables/useAuth";
+
+const route = useRoute();
+const router = useRouter();
+const { login, busy, error, authenticated } = useAuth();
+
+const username = ref("admin");
+const password = ref("");
+
+if (authenticated.value) {
+  const next = typeof route.query.next === "string" ? route.query.next : "/";
+  void router.replace(next || "/");
+}
+
+async function onSubmit() {
+  const ok = await login(username.value, password.value);
+  if (!ok) return;
+  const next = typeof route.query.next === "string" ? route.query.next : "/";
+  await router.replace(next || "/");
+}
+</script>
+
+<template>
+  <div class="login-page">
+    <form class="login-card" @submit.prevent="onSubmit">
+      <h1>Вход в админку</h1>
+      <p class="hint">Карта доступна без входа. Остальные разделы — после авторизации.</p>
+
+      <label>
+        Логин
+        <input v-model="username" type="text" autocomplete="username" required />
+      </label>
+
+      <label>
+        Пароль
+        <input v-model="password" type="password" autocomplete="current-password" required />
+      </label>
+
+      <p v-if="error" class="error">{{ error }}</p>
+
+      <button type="submit" class="btn-primary" :disabled="busy">
+        {{ busy ? "Вход..." : "Войти" }}
+      </button>
+
+      <router-link class="back-link" to="/">← К карте</router-link>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 2rem 1rem;
+  background: linear-gradient(160deg, #eef2f7 0%, #f5f5f5 45%, #e8edf3 100%);
+}
+
+.login-card {
+  width: 100%;
+  max-width: 380px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  padding: 1.75rem;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 650;
+}
+
+.hint {
+  margin: 0;
+  font-size: 0.875rem;
+  color: #666;
+  line-height: 1.4;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  color: #444;
+}
+
+input {
+  padding: 0.55rem 0.7rem;
+  border: 1px solid #d0d0d0;
+  border-radius: 6px;
+  background: #fff;
+}
+
+input:focus {
+  outline: 2px solid #bbdefb;
+  border-color: #64b5f6;
+}
+
+.error {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #b91c1c;
+}
+
+.btn-primary {
+  margin-top: 0.25rem;
+  padding: 0.65rem 1rem;
+  border: none;
+  border-radius: 6px;
+  background: #1565c0;
+  color: #fff;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.btn-primary:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+
+.btn-primary:not(:disabled):hover {
+  background: #0d47a1;
+}
+
+.back-link {
+  text-align: center;
+  font-size: 0.875rem;
+  color: #1565c0;
+  text-decoration: none;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+</style>

centers/analytics/frontend/src/views/MapViewPage.vue

@@ -16,12 +16,14 @@ import CoordsTools from "../components/map/CoordsTools.vue";
 import MapToolbar from "../components/map/MapToolbar.vue";
 import PlaceSearch from "../components/map/PlaceSearch.vue";
 import ObjectPanel from "../components/ObjectPanel.vue";
+import { useAuth } from "../composables/useAuth";
 import type { LeafletMapApi } from "../composables/useLeafletMap";
 import type { DateRangePreset, MapFilters, MapObjectWithEvent, MapQueryParams } from "../types/map";
 import type { MapObjectCreate, ObjectType } from "../types/object";
 
 const route = useRoute();
 const router = useRouter();
+const { authenticated } = useAuth();
 
 const objects = ref<MapObjectWithEvent[]>([]);
 const mapFilters = ref<MapFilters | null>(null);
@@ -162,6 +164,7 @@ function handleMapContextMenu(payload: {
   longitude: number;
   object: MapObjectWithEvent | null;
 }) {
+  if (!authenticated.value) return;
   contextMenu.value = {
     visible: true,
     x: payload.x,
@@ -257,6 +260,7 @@ async function handleMoveObject(payload: {
   latitude: number;
   longitude: number;
 }) {
+  if (!authenticated.value) return;
   if (payload.object.event_id) return;
   try {
     await updateObject(payload.object.id, {
@@ -327,17 +331,22 @@ onUnmounted(() => {
         :objects="objects"
         :selected-id="selectedId"
         :open-popup-id="openPopupId"
+        :editable="authenticated"
         @ready="onMapReady"
         @center-change="onCenterChange"
         @select="handleSelectObject"
         @contextmenu="handleMapContextMenu"
         @move="handleMoveObject"
       />
-      <ObjectPanel :object="selectedObject" @open-events="openInEvents" />
+      <ObjectPanel
+        :object="selectedObject"
+        :can-edit="authenticated"
+        @open-events="openInEvents"
+      />
     </div>
 
     <ContextMenu
-      v-if="contextMenu.visible"
+      v-if="contextMenu.visible && authenticated"
       :x="contextMenu.x"
       :y="contextMenu.y"
       :target="contextMenu.target"
@@ -350,7 +359,7 @@ onUnmounted(() => {
     />
 
     <CreateObjectModal
-      v-if="createModal.visible"
+      v-if="createModal.visible && authenticated"
       :latitude="createModal.latitude"
       :longitude="createModal.longitude"
       @close="closeCreateModal"
@@ -358,7 +367,7 @@ onUnmounted(() => {
     />
 
     <EditObjectModal
-      v-if="editModal.visible && editModal.object"
+      v-if="editModal.visible && editModal.object && authenticated"
       :object="editModal.object"
       @close="closeEditModal"
       @submit="handleEditObject"

centers/analytics/frontend/src/views/ParsersView.vue

@@ -25,14 +25,14 @@ const editingJob = ref<ParseJob | null>(null);
 const pairForm = ref({
   channel_id: null as number | null,
   profile_id: null as number | null,
-  limit: 100,
+  limit: 10,
   interval_seconds: 3600,
 });
 
 const editForm = ref({
   channel_id: null as number | null,
   profile_id: null as number | null,
-  limit: 100,
+  limit: 10,
   interval_seconds: 3600,
   is_active: true,
 });
@@ -62,7 +62,7 @@ function isPairJob(job: ParseJob | null): boolean {
 
 function limitFromConfig(config: Record<string, unknown>): number {
   const limit = config.limit;
-  return typeof limit === "number" ? limit : 100;
+  return typeof limit === "number" ? limit : 10;
 }
 
 function sourceSummary(job: ParseJob): string {