Index: lan-frontend/src/components/TopBar.jsx =================================================================== --- lan-frontend/src/components/TopBar.jsx (revision 2058e5c694bb6097866a5fe6503c519e8f74970f) +++ lan-frontend/src/components/TopBar.jsx (revision 2058e5c694bb6097866a5fe6503c519e8f74970f) @@ -0,0 +1,532 @@ +import React, { useEffect, useMemo, useState } from "react"; + +export default function TopBar({ onOpenAI, onRefresh, lastUpdated, onEnvChange }) { + const [open, setOpen] = useState(false); + + // admin auth + const [adminKey, setAdminKey] = useState(""); + const [adminSession, setAdminSession] = useState(""); + + // env + tokens + const [envs, setEnvs] = useState(["default"]); + const [selectedEnv, setSelectedEnv] = useState("default"); + const [newEnvName, setNewEnvName] = useState(""); + const [token, setToken] = useState(""); + + const [busy, setBusy] = useState(false); + const [error, setError] = useState(""); + + // helper: fetch env list after login + async function loadEnvironments(session) { + const r = await fetch("/api/admin/environments", { + headers: { "X-Admin-Session": session }, + }); + const data = await r.json(); + if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); + + const list = data.environments?.length ? data.environments : ["default"]; + setEnvs(list); + + // ако тековниот не постои, стави првиот од листата + if (!list.includes(selectedEnv)) { + setSelectedEnv(list[0]); + onEnvChange?.(list[0]); + } + } + + async function login() { + setError(""); + setToken(""); + + if (!adminKey.trim()) { + setError("Внеси admin key."); + return; + } + + setBusy(true); + try { + const r = await fetch("/api/admin/login", { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ admin_key: adminKey.trim() }), + }); + const data = await r.json(); + if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); + + const session = data.session; + setAdminSession(session); + await loadEnvironments(session); + } catch (e) { + setError(String(e.message || e)); + } finally { + setBusy(false); + } + } + + function logout() { + setAdminSession(""); + setAdminKey(""); + setToken(""); + setError(""); + setEnvs(["default"]); + setSelectedEnv("default"); + onEnvChange?.("default"); + } + + async function createEnvironment() { + setError(""); + setToken(""); + if (!newEnvName.trim()) { + setError("Внеси име за environment."); + return; + } + + setBusy(true); + try { + const r = await fetch("/api/admin/environments", { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-Admin-Session": adminSession, + }, + body: JSON.stringify({ name: newEnvName.trim() }), + }); + + const data = await r.json(); + if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); + + // reload list, select new env + await loadEnvironments(adminSession); + setSelectedEnv(newEnvName.trim()); + onEnvChange?.(newEnvName.trim()); + setNewEnvName(""); + } catch (e) { + setError(String(e.message || e)); + } finally { + setBusy(false); + } + } + + async function generateToken() { + setError(""); + setToken(""); + if (!selectedEnv) { + setError("Избери environment."); + return; + } + + setBusy(true); + try { + const r = await fetch("/api/admin/tokens", { + method: "POST", + headers: { + "Content-Type": "application/json", + "X-Admin-Session": adminSession, + }, + body: JSON.stringify({ env: selectedEnv }), + }); + + const data = await r.json(); + if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`); + + setToken(data.token || ""); + } catch (e) { + setError(String(e.message || e)); + } finally { + setBusy(false); + } + } + + async function copyToken() { + if (!token) return; + await navigator.clipboard.writeText(token); + } + + function changeEnv(val) { + setSelectedEnv(val); + setToken(""); + onEnvChange?.(val); + } + + const prettyTime = useMemo(() => { + if (!lastUpdated) return "Loading…"; + try { + return `Updated ${new Date(lastUpdated).toLocaleTimeString()}`; + } catch { + return "Updated"; + } + }, [lastUpdated]); + + return ( + <> + + + {/* TOPBAR */} +
+
+
+
🛡️
+
+

LAN Security Monitor

+

+ Sysmon Edition • {prettyTime} +

+
+
+ +
+ + + Env: {selectedEnv} + + + + +
+
+
+ + {/* MODAL */} + {open && ( +
setOpen(false)}> +
e.stopPropagation()}> +
+
+
Admin Panel
+
Login ➜ Environments ➜ Generate token
+
+ +
+ +
+ {/* 1) LOGIN */} + {!adminSession ? ( +
+
+
Step 1: Admin login
+
+ +
+ setAdminKey(e.target.value)} + placeholder="Enter admin key" + /> + +
+ Admin key е само за логирање. После тоа користиме session token. +
+
+
+ ) : ( + <> + {/* 2) ENV SELECT */} +
+
+
Step 2: Choose environment
+ +
+ +
+ +
+ Овој env ќе се користи за dashboard филтрирање + token generation. +
+
+
+ + {/* 3) CREATE ENV */} +
+
+
Create new environment
+
+ +
+ setNewEnvName(e.target.value)} + placeholder="e.g. school-lab / staging" + /> + +
+
+ + {/* 4) TOKEN */} +
+
+
Step 3: Generate token (for clients)
+
+ +
+ + + {token && ( + <> +
+
+
Token
+
+ {token.slice(0, 12)}…{token.slice(-10)} +
+
+ +
+ +
+ Клиентот мора да праќа header: X-Env-Token со овој token на /receive. +
+ + )} +
+
+ + )} + + {error && ( +
+
Error
+
{error}
+
+ )} +
+
+
+ )} + + ); +}