julian
5c6a21e2c3
The desktop shell is one generic .deb/.AppImage distributed via mca/public_releases, not built per-booth, but the backend origin was baked in at build time (VITE_API_BASE, hardcoded to http://127.0.0.1:3000) — the same installer could never point at a different appliance without a rebuild. Adds ConnectScreen (shown before Login in Tauri when no backend is saved), backed by tauri-plugin-store persisting the operator-entered URL across restarts. CSP's connect-src tightens to 'self' only — all backend traffic already routes through tauri-plugin-http/websocket, which run Rust-side and are outside connect-src's reach anyway — and the real access boundary moves to capabilities/default.json's http:default scope, wildcarded so an operator-chosen host is actually reachable. Adds a "Change server" control in Setup (desktop-only) to repoint an already-configured install. While tracing the desktop auth path for this: tauri-plugin-http's fetch() runs through Rust's reqwest, which keeps its own cookie jar separate from the webview, so document.cookie on tauri://localhost never sees the parking_csrf cookie the server sets (open upstream bug, tauri-apps/tauri#13045/#11518). This means the desktop app has likely been silently sending no CSRF header on every mutation since the shell was first built — pre-existing, independent of this change. Fixed by having sessionView() (routes/auth.ts) also echo the CSRF value in the login/me JSON body; the desktop client stashes it in memory and echoes that instead of reading document.cookie. assertCsrf() itself is untouched. Verified end-to-end against a real LAN-bound dev server: login returns a csrfToken matching the cookie, a mutation using the body-sourced token in X-CSRF-Token succeeds (200), and the same mutation without it still correctly 403s.
88 lines
3.0 KiB
TypeScript
88 lines
3.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { QueryClientProvider } from "@tanstack/react-query";
|
|
import { RouterProvider } from "@tanstack/react-router";
|
|
import { fetchMe, type SessionUser } from "./api.js";
|
|
import { Login } from "./Login.js";
|
|
import { ConnectScreen } from "./ConnectScreen.js";
|
|
import { queryClient } from "./lib/query.js";
|
|
import { setLanguage } from "./lib/i18n/index.js";
|
|
import { applyTheme, applyFontScale } from "./lib/theme.js";
|
|
import { router } from "./router.js";
|
|
import { initApiBase, inTauri } from "./lib/origin.js";
|
|
|
|
// App root: bootstraps the session (cookie-based, from /api/auth/me), then hands
|
|
// off to TanStack Router inside the QueryClient provider. The router renders the
|
|
// terminal chrome + screens; auth gating stays here (Login until signed in), and
|
|
// the signed-in user flows into the router context for role-based route guards.
|
|
// See wiki/entities/react-vite-spa.md and local-jwt-auth.md.
|
|
//
|
|
// Desktop shell only: BEFORE any of that, the backend origin itself must be
|
|
// known — the same installer is used at every booth (see lib/origin.ts /
|
|
// backend-config.ts), so on first launch (or after the operator clears it)
|
|
// there is no server to call fetchMe() against yet. ConnectScreen gates that;
|
|
// a browser build always has a same-origin backend, so `needsConnect` is
|
|
// always false there and this is skipped entirely.
|
|
|
|
export function App() {
|
|
const [user, setUser] = useState<SessionUser | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [needsConnect, setNeedsConnect] = useState(false);
|
|
|
|
useEffect(() => {
|
|
initApiBase().then((saved) => {
|
|
if (inTauri() && !saved) {
|
|
setNeedsConnect(true);
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
fetchMe()
|
|
.then(setUser)
|
|
.finally(() => setLoading(false));
|
|
});
|
|
}, []);
|
|
|
|
// Apply the signed-in user's preferred language + theme + font scale whenever they
|
|
// resolve/change (login, bootstrap, or a toggle). Albanian + dark + 100% are the defaults
|
|
// before auth resolves; on logout, fall back so the Login screen is consistent.
|
|
useEffect(() => {
|
|
if (user) {
|
|
setLanguage(user.language);
|
|
applyTheme(user.theme);
|
|
applyFontScale(user.fontScale);
|
|
} else {
|
|
applyTheme("dark");
|
|
applyFontScale(100);
|
|
}
|
|
}, [user]);
|
|
|
|
if (loading) {
|
|
return <div className="flex h-screen items-center justify-center text-term-muted">loading…</div>;
|
|
}
|
|
if (needsConnect) {
|
|
return (
|
|
<ConnectScreen
|
|
onConnected={() => {
|
|
setNeedsConnect(false);
|
|
setLoading(true);
|
|
fetchMe()
|
|
.then(setUser)
|
|
.finally(() => setLoading(false));
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
if (!user) {
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<Login onLoggedIn={setUser} />
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<RouterProvider router={router} context={{ user, setUser }} />
|
|
</QueryClientProvider>
|
|
);
|
|
}
|