Changeset 505f39a for lan-frontend/src/App.jsx

Timestamp:

01/21/26 13:35:44 (6 months ago)

Author:

istevanoska <ilinastevanoska@…>

Branches:

master

Children:

d42aac3

Parents:

2058e5c

Message:

Added OAuth/prototype

File:

• lan-frontend/src/App.jsx (modified) (11 diffs)

lan-frontend/src/App.jsx

@@ -1 @@
-import React from "react";
-import {useEffect, useMemo, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import "./styles/theme.css";
 
+import Login from "./components/Login";
 import TopBar from "./components/TopBar";
 import ComputerCard from "./components/ComputerCard";
@@ -22 +22 @@
     const [selectedEnv, setSelectedEnv] = useState("default");
 
+    const [me, setMe] = useState(null);
+    const [meLoading, setMeLoading] = useState(true);
+
+    // const [openAI, setOpenAI] = useState(false);
+    // const [scope, setScope] = useState(null);
+
+
+    async function loadMe() {
+        setMeLoading(true);
+        try {
+            const r = await fetch("/api/me", {credentials: "include"});
+            if (r.ok) {
+                const data = await r.json();
+                setMe(data.user);
+            } else {
+                setMe(null);
+            }
+        } catch (e) {
+            console.error("loadMe error", e);
+            setMe(null);
+        } finally {
+            setMeLoading(false);
+        }
+    }
+
     async function refresh() {
         try {
             setLoading(true);
             const [s, c] = await Promise.all([
-                fetch("/api/stats").then((r) => r.json()),
+                fetch("/api/stats", {credentials: "include"}).then((r) => r.json()),
                 fetch("/api/computers", {
+                    credentials: "include",
                     headers: {"X-Env": selectedEnv},
                 }).then((r) => r.json()),
             ]);
+
             setStats(s);
             setComputers(Array.isArray(c) ? c : []);
@@ -41 +68 @@
     }
 
+    // on mount: check session
     useEffect(() => {
-        refresh();
-    }, [selectedEnv]);
+        loadMe();
+    }, []);
+
+    // when logged in OR env changed, refresh data
+    useEffect(() => {
+        if (me) refresh();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [me, selectedEnv]);
 
     const filtered = useMemo(() => {
@@ -51 +85 @@
             .filter((c) => {
                 if (!q) return true;
-                const hay = [c.name, c.user, c.ip, c.os, c.status].filter(Boolean).join(" ").toLowerCase();
+                const hay = [c.name, c.user, c.ip, c.os, c.status]
+                    .filter(Boolean)
+                    .join(" ")
+                    .toLowerCase();
                 return hay.includes(q);
             });
     }, [computers, query, status]);
+
+    // Gate UI
+    if (meLoading) return <div style={{padding: 20}}>Loading…</div>;
+    if (!me) return <Login onDone={loadMe}/>;
 
     return (
@@ -64 +105 @@
                 onEnvChange={(env) => setSelectedEnv(env)}
                 selectedEnv={selectedEnv}
+                me={me}
+                onLoggedOut={loadMe}
             />
+
 
             {/* STATS */}
@@ -104 +148 @@
                         />
 
-                        <select className="select" value={status} onChange={(e) => setStatus(e.target.value)}>
+                        <select
+                            className="select"
+                            value={status}
+                            onChange={(e) => setStatus(e.target.value)}
+                        >
                             <option value="">All status</option>
                             <option value="online">Online</option>
@@ -111 +159 @@
                         </select>
 
-                        <button className="btn primary" onClick={refresh}>Refresh</button>
+                        <button className="btn primary" onClick={refresh}>
+                            Refresh
+                        </button>
                     </div>
                 </div>
@@ -122 +172 @@
                     <div style={{display: "flex", gap: 10, alignItems: "center"}}>
                         <span className="pill">{filtered.length} computers</span>
-                        <button className="btn" onClick={() => {
-                            setQuery("");
-                            setStatus("");
-                        }}>Reset
+                        <button
+                            className="btn"
+                            onClick={() => {
+                                setQuery("");
+                                setStatus("");
+                            }}
+                        >
+                            Reset
                         </button>
                     </div>
@@ -142 +196 @@
                         ))}
                         {filtered.length === 0 && (
-                            <div style={{color: "var(--dim)"}}>No computers match filter.</div>
+                            <div style={{color: "var(--dim)"}}>
+                                No computers match filter.
+                            </div>
                         )}
                     </div>
@@ -160 +216 @@
 
             {/* AI DRAWER */}
+            {/*<button onClick={() => setOpenAI(true)}>AI</button>*/}
+
+            {/*<AIAssistantDrawer*/}
+            {/*    open={openAI}*/}
+            {/*    onClose={() => setOpenAI(false)}*/}
+            {/*    computers={computers}*/}
+            {/*    scope={scope}*/}
+            {/*    setScope={setScope}*/}
+            {/*    apiBase={import.meta.env.VITE_API_BASE}*/}
+            {/*/>*/}
+
             <AIAssistantDrawer
                 open={aiOpen}
@@ -166 +233 @@
                 scope={aiScope}
                 setScope={setAiScope}
+                apiBase={import.meta.env.VITE_API_BASE}
             />
+
+
         </div>
     );