422 lines
17 KiB
TypeScript
422 lines
17 KiB
TypeScript
import { Navigate, Route, Routes } from "react-router-dom";
|
|
import { lazy, Suspense, useEffect, useMemo, useState } from "react";
|
|
import { fetchMe, updateProfile } from "./api/auth";
|
|
import { fetchPlatformModules, fetchPlatformStatus } from "./api/platform";
|
|
import { AUTH_REQUIRED_EVENT, loadApiSettings, saveApiSettings, type AuthRequiredEventDetail } from "./api/client";
|
|
import type { ApiSettings, AuthInfo, AuthTenant, AuthTenantMembership, AuthUser, LoginResponse, PlatformModuleInfo, PlatformWebModule, UserUiPreferences } from "./types";
|
|
import AppShell from "./layout/AppShell";
|
|
import PublicLandingPage from "./features/auth/PublicLandingPage";
|
|
import LoginModal from "./features/auth/LoginModal";
|
|
import { PermissionBoundary } from "./components/AccessBoundary";
|
|
import { firstAccessibleRoute, loadRemoteWebModules, moduleInstalled, navItemsForModules, resolveInstalledWebModules, routeContributionsForModules } from "./platform/modules";
|
|
import { PlatformModulesProvider } from "./platform/ModuleContext";
|
|
import { PLATFORM_MODULES_CHANGED_EVENT } from "./platform/moduleEvents";
|
|
import { UnsavedChangesProvider } from "./components/UnsavedChangesGuard";
|
|
import { PlatformLanguageProvider, type PlatformLanguage } from "./i18n/LanguageContext";
|
|
|
|
const DashboardPage = lazy(() => import("./features/dashboard/DashboardPage"));
|
|
const SettingsPage = lazy(() => import("./features/settings/SettingsPage"));
|
|
|
|
const DEFAULT_UI_PREFERENCES: UserUiPreferences = {
|
|
compact_tables: false,
|
|
show_inline_help_hints: true,
|
|
reduce_motion: false,
|
|
sticky_section_sidebars: true,
|
|
theme: "system"
|
|
};
|
|
|
|
export default function App() {
|
|
const [settings, setSettings] = useState<ApiSettings>(() => loadApiSettings());
|
|
const [auth, setAuth] = useState<AuthInfo | null>(null);
|
|
const [checkingSession, setCheckingSession] = useState(true);
|
|
const [platformModules, setPlatformModules] = useState<PlatformModuleInfo[] | null>(null);
|
|
const [remoteWebModules, setRemoteWebModules] = useState<PlatformWebModule[]>([]);
|
|
const [maintenanceMode, setMaintenanceMode] = useState<{enabled: boolean;message?: string | null;}>({ enabled: false, message: null });
|
|
const [systemLanguages, setSystemLanguages] = useState<{available: PlatformLanguage[];enabled: string[];defaultLanguage: string;} | null>(null);
|
|
const [reloginMessage, setReloginMessage] = useState("");
|
|
|
|
const localWebModules = useMemo(() => resolveInstalledWebModules(platformModules), [platformModules]);
|
|
const webModules = useMemo(() => mergeWebModules(localWebModules, remoteWebModules), [localWebModules, remoteWebModules]);
|
|
const navItems = useMemo(() => navItemsForModules(webModules), [webModules]);
|
|
const moduleRoutes = useMemo(() => routeContributionsForModules(webModules), [webModules]);
|
|
const moduleTranslations = useMemo(() => webModules.map((module) => module.translations).filter(Boolean), [webModules]);
|
|
const dashboardModuleInstalled = useMemo(() => moduleInstalled("dashboard", webModules), [webModules]);
|
|
|
|
function updateSettings(next: ApiSettings) {
|
|
setSettings(next);
|
|
saveApiSettings(next);
|
|
}
|
|
|
|
function updateAuth(next: AuthInfo | null, accessToken?: string) {
|
|
const nextSettings = accessToken !== undefined ? { ...settings, accessToken } : settings;
|
|
setAuth(next ? normalizeAuthInfo(next) : null);
|
|
if (accessToken !== undefined) {
|
|
setSettings(nextSettings);
|
|
saveApiSettings(nextSettings);
|
|
}
|
|
}
|
|
|
|
function authFromLoginResponse(response: LoginResponse): AuthInfo {
|
|
return normalizeAuthInfo(response);
|
|
}
|
|
|
|
function handlePublicLogin(response: LoginResponse) {
|
|
updateAuth(authFromLoginResponse(response), "");
|
|
}
|
|
|
|
function handleRelogin(response: LoginResponse) {
|
|
updateAuth(authFromLoginResponse(response), "");
|
|
setReloginMessage("");
|
|
}
|
|
|
|
useEffect(() => {
|
|
function handleAuthRequired(event: Event) {
|
|
if (!auth) return;
|
|
const detail = (event as CustomEvent<AuthRequiredEventDetail>).detail;
|
|
setReloginMessage(detail?.message || "i18n:govoplan-core.your_session_has_expired_sign_in_again_to_contin.4cc6a1b3");
|
|
}
|
|
|
|
window.addEventListener(AUTH_REQUIRED_EVENT, handleAuthRequired);
|
|
return () => window.removeEventListener(AUTH_REQUIRED_EVENT, handleAuthRequired);
|
|
}, [auth]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
|
|
async function refreshPlatformStatus() {
|
|
try {
|
|
const response = await fetchPlatformStatus(settings);
|
|
if (cancelled) return;
|
|
setMaintenanceMode(response.maintenance_mode);
|
|
if (response.i18n) {
|
|
setSystemLanguages({
|
|
available: response.i18n.available_languages.map((item) => ({
|
|
code: item.code,
|
|
label: item.label,
|
|
nativeLabel: item.native_label ?? undefined
|
|
})),
|
|
enabled: response.i18n.enabled_languages,
|
|
defaultLanguage: response.i18n.default_language
|
|
});
|
|
}
|
|
} catch {
|
|
if (!cancelled) setMaintenanceMode({ enabled: false, message: null });
|
|
}
|
|
}
|
|
|
|
void refreshPlatformStatus();
|
|
const interval = window.setInterval(() => {void refreshPlatformStatus();}, 30_000);
|
|
window.addEventListener("focus", refreshPlatformStatus);
|
|
return () => {
|
|
cancelled = true;
|
|
window.clearInterval(interval);
|
|
window.removeEventListener("focus", refreshPlatformStatus);
|
|
};
|
|
}, [settings.apiBaseUrl]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
setCheckingSession(true);
|
|
fetchMe(settings).
|
|
then((me) => {if (!cancelled) setAuth(normalizeAuthInfo(me));}).
|
|
catch(() => {
|
|
if (!cancelled) {
|
|
const cleared = { ...settings, accessToken: "" };
|
|
setSettings(cleared);
|
|
saveApiSettings(cleared);
|
|
setAuth(null);
|
|
setPlatformModules(null);
|
|
setRemoteWebModules([]);
|
|
}
|
|
}).
|
|
finally(() => {
|
|
if (!cancelled) setCheckingSession(false);
|
|
});
|
|
return () => {cancelled = true;};
|
|
}, [settings.apiBaseUrl, settings.apiKey]);
|
|
|
|
useEffect(() => {
|
|
if (!auth) return;
|
|
|
|
let cancelled = false;
|
|
let inFlight = false;
|
|
let lastRefreshAt = 0;
|
|
function loadModules() {
|
|
inFlight = true;
|
|
lastRefreshAt = Date.now();
|
|
return fetchPlatformModules(settings).
|
|
then((response) => {if (!cancelled) setPlatformModules(response.modules);}).
|
|
catch(() => {if (!cancelled) setPlatformModules(null);}).
|
|
finally(() => {inFlight = false;});
|
|
}
|
|
|
|
void loadModules();
|
|
|
|
function handleModulesChanged() {
|
|
void loadModules();
|
|
}
|
|
|
|
function refreshVisibleModules() {
|
|
if (document.visibilityState === "hidden" || inFlight) return;
|
|
if (Date.now() - lastRefreshAt < 5_000) return;
|
|
void loadModules();
|
|
}
|
|
|
|
window.addEventListener(PLATFORM_MODULES_CHANGED_EVENT, handleModulesChanged);
|
|
window.addEventListener("focus", refreshVisibleModules);
|
|
document.addEventListener("visibilitychange", refreshVisibleModules);
|
|
return () => {
|
|
cancelled = true;
|
|
window.removeEventListener(PLATFORM_MODULES_CHANGED_EVENT, handleModulesChanged);
|
|
window.removeEventListener("focus", refreshVisibleModules);
|
|
document.removeEventListener("visibilitychange", refreshVisibleModules);
|
|
};
|
|
}, [auth?.user?.id, auth?.active_tenant?.id, auth?.tenant.id, settings.apiBaseUrl, settings.apiKey]);
|
|
|
|
useEffect(() => {
|
|
const preferences = auth?.user.ui_preferences ?? DEFAULT_UI_PREFERENCES;
|
|
const root = document.documentElement;
|
|
root.classList.toggle("ui-compact-tables", preferences.compact_tables);
|
|
root.classList.toggle("ui-hide-help-hints", !preferences.show_inline_help_hints);
|
|
root.classList.toggle("ui-reduce-motion", preferences.reduce_motion);
|
|
root.classList.toggle("ui-no-sticky-section-sidebars", !preferences.sticky_section_sidebars);
|
|
if (preferences.theme === "system") {
|
|
delete root.dataset.theme;
|
|
} else {
|
|
root.dataset.theme = preferences.theme;
|
|
}
|
|
}, [
|
|
auth?.user.ui_preferences?.compact_tables,
|
|
auth?.user.ui_preferences?.show_inline_help_hints,
|
|
auth?.user.ui_preferences?.reduce_motion,
|
|
auth?.user.ui_preferences?.sticky_section_sidebars,
|
|
auth?.user.ui_preferences?.theme
|
|
]);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
if (!auth || !platformModules?.length) {
|
|
setRemoteWebModules([]);
|
|
return () => {cancelled = true;};
|
|
}
|
|
loadRemoteWebModules(platformModules, localWebModules).
|
|
then((modules) => {if (!cancelled) setRemoteWebModules(modules);}).
|
|
catch(() => {if (!cancelled) setRemoteWebModules([]);});
|
|
return () => {cancelled = true;};
|
|
}, [auth?.user?.id, auth?.active_tenant?.id, auth?.tenant.id, platformModules, localWebModules]);
|
|
|
|
useEffect(() => {
|
|
if (!auth) return;
|
|
|
|
let inFlight = false;
|
|
let lastRefreshAt = 0;
|
|
|
|
async function refreshVisibleSession() {
|
|
if (document.visibilityState === "hidden" || inFlight) return;
|
|
const now = Date.now();
|
|
if (now - lastRefreshAt < 5_000) return;
|
|
|
|
inFlight = true;
|
|
lastRefreshAt = now;
|
|
try {
|
|
setAuth(normalizeAuthInfo(await fetchMe(settings)));
|
|
} catch {
|
|
|
|
|
|
// A background refresh must not log the user out on a transient network error.
|
|
} finally {inFlight = false;}
|
|
}
|
|
|
|
window.addEventListener("focus", refreshVisibleSession);
|
|
document.addEventListener("visibilitychange", refreshVisibleSession);
|
|
return () => {
|
|
window.removeEventListener("focus", refreshVisibleSession);
|
|
document.removeEventListener("visibilitychange", refreshVisibleSession);
|
|
};
|
|
}, [auth?.user?.id, auth?.active_tenant?.id, auth?.tenant.id, settings.apiBaseUrl, settings.apiKey]);
|
|
|
|
if (checkingSession) {
|
|
return (
|
|
<PlatformLanguageProvider systemAvailableLanguages={systemLanguages?.available} systemEnabledLanguageCodes={systemLanguages?.enabled} defaultLanguage={systemLanguages?.defaultLanguage} moduleTranslations={moduleTranslations}>
|
|
<PlatformModulesProvider modules={webModules}>
|
|
<UnsavedChangesProvider>
|
|
<AppShell settings={settings} auth={null} onSettingsChange={updateSettings} onAuthChange={updateAuth} publicMode navItems={navItems} maintenanceMode={maintenanceMode}>
|
|
<div className="public-landing">
|
|
<section className="public-card">
|
|
<div className="public-kicker">i18n:govoplan-core.govoplan.a84c0a85</div>
|
|
<h1>i18n:govoplan-core.checking_session.e7d81968</h1>
|
|
<p>i18n:govoplan-core.please_wait_while_the_local_session_is_verified.1dbd8fd3</p>
|
|
</section>
|
|
</div>
|
|
</AppShell>
|
|
</UnsavedChangesProvider>
|
|
</PlatformModulesProvider>
|
|
</PlatformLanguageProvider>);
|
|
|
|
}
|
|
|
|
if (!auth) {
|
|
return (
|
|
<PlatformLanguageProvider systemAvailableLanguages={systemLanguages?.available} systemEnabledLanguageCodes={systemLanguages?.enabled} defaultLanguage={systemLanguages?.defaultLanguage} moduleTranslations={moduleTranslations}>
|
|
<PlatformModulesProvider modules={webModules}>
|
|
<UnsavedChangesProvider>
|
|
<AppShell settings={settings} auth={null} onSettingsChange={updateSettings} onAuthChange={updateAuth} publicMode navItems={navItems} maintenanceMode={maintenanceMode}>
|
|
<PublicLandingPage settings={settings} maintenanceMode={maintenanceMode} onLogin={handlePublicLogin} />
|
|
</AppShell>
|
|
</UnsavedChangesProvider>
|
|
</PlatformModulesProvider>
|
|
</PlatformLanguageProvider>);
|
|
|
|
}
|
|
|
|
const defaultRoute = firstAccessibleRoute(auth, webModules);
|
|
const authAvailableLanguages = auth.available_languages?.map((item) => ({
|
|
code: item.code,
|
|
label: item.label,
|
|
nativeLabel: item.native_label ?? undefined
|
|
}));
|
|
|
|
function persistLanguagePreference(code: string) {
|
|
void updateProfile(settings, { preferred_language: code }).then((next) => updateAuth(next)).catch(() => undefined);
|
|
}
|
|
|
|
return (
|
|
<PlatformLanguageProvider
|
|
systemAvailableLanguages={authAvailableLanguages ?? systemLanguages?.available}
|
|
systemEnabledLanguageCodes={auth.enabled_language_codes ?? systemLanguages?.enabled}
|
|
userEnabledLanguageCodes={auth.user?.enabled_language_codes}
|
|
defaultLanguage={auth.default_language ?? systemLanguages?.defaultLanguage ?? (auth.active_tenant ?? auth.tenant).default_locale}
|
|
preferredLanguageCode={auth.user?.preferred_language ?? auth.default_language}
|
|
onLanguageChange={persistLanguagePreference}
|
|
moduleTranslations={moduleTranslations}>
|
|
<PlatformModulesProvider modules={webModules}>
|
|
<UnsavedChangesProvider>
|
|
<AppShell settings={settings} auth={auth} onSettingsChange={updateSettings} onAuthChange={updateAuth} navItems={navItems} maintenanceMode={maintenanceMode}>
|
|
<Suspense fallback={<div className="content-pad"><p className="muted">i18n:govoplan-core.loading_module.50161f3c</p></div>}>
|
|
<Routes key={(auth.active_tenant ?? auth.tenant).id}>
|
|
<Route path="/" element={<Navigate to={defaultRoute} replace />} />
|
|
{!dashboardModuleInstalled && <Route path="/dashboard" element={<DashboardPage />} />}
|
|
{moduleRoutes.map((route) =>
|
|
<Route
|
|
key={route.path}
|
|
path={route.path}
|
|
element={
|
|
<PermissionBoundary auth={auth} anyOf={route.anyOf} allOf={route.allOf} fallback={defaultRoute}>
|
|
{route.render({ settings, auth, onAuthChange: updateAuth })}
|
|
</PermissionBoundary>
|
|
} />
|
|
|
|
)}
|
|
<Route path="/settings" element={<SettingsPage settings={settings} auth={auth} onSettingsChange={updateSettings} onAuthChange={updateAuth} />} />
|
|
<Route path="*" element={<Navigate to={defaultRoute} replace />} />
|
|
</Routes>
|
|
</Suspense>
|
|
{reloginMessage &&
|
|
<LoginModal
|
|
settings={settings}
|
|
title="i18n:govoplan-core.session_expired.b828190e"
|
|
message={reloginMessage}
|
|
onClose={() => setReloginMessage("")}
|
|
onLogin={handleRelogin} />
|
|
|
|
}
|
|
</AppShell>
|
|
</UnsavedChangesProvider>
|
|
</PlatformModulesProvider>
|
|
</PlatformLanguageProvider>);
|
|
|
|
}
|
|
|
|
type AuthPayload = Partial<AuthInfo> & {
|
|
principal?: AuthInfo["principal"];
|
|
user?: Partial<AuthUser> | null;
|
|
tenant?: AuthTenant | null;
|
|
active_tenant?: AuthTenant | null;
|
|
tenants?: AuthTenantMembership[] | null;
|
|
};
|
|
|
|
function normalizeAuthInfo(response: AuthPayload): AuthInfo {
|
|
const principal = response.principal ?? null;
|
|
const activeTenant = response.active_tenant ?? response.tenant ?? response.tenants?.[0] ?? null;
|
|
const user = normalizeAuthUser(response.user, principal);
|
|
|
|
if (!activeTenant) {
|
|
throw new Error("Authentication response did not include an active tenant.");
|
|
}
|
|
if (!user) {
|
|
throw new Error("Authentication response did not include a user.");
|
|
}
|
|
|
|
return {
|
|
user,
|
|
tenant: activeTenant,
|
|
active_tenant: activeTenant,
|
|
tenants: response.tenants ?? [activeTenant],
|
|
scopes: response.scopes ?? principal?.scopes ?? [],
|
|
roles: response.roles ?? [],
|
|
groups: response.groups ?? [],
|
|
principal,
|
|
available_languages: response.available_languages ?? [],
|
|
enabled_language_codes: response.enabled_language_codes ?? activeTenant.enabled_language_codes ?? [],
|
|
default_language: response.default_language ?? user.preferred_language ?? activeTenant.default_locale ?? "en"
|
|
};
|
|
}
|
|
|
|
function normalizeAuthUser(user: Partial<AuthUser> | null | undefined, principal: AuthInfo["principal"]): AuthUser | null {
|
|
if (user?.id && user.account_id) {
|
|
return {
|
|
id: user.id,
|
|
account_id: user.account_id,
|
|
email: user.email ?? principal?.email ?? "",
|
|
display_name: user.display_name ?? principal?.display_name ?? principal?.email ?? null,
|
|
tenant_display_name: user.tenant_display_name ?? null,
|
|
is_tenant_admin: user.is_tenant_admin ?? false,
|
|
password_reset_required: user.password_reset_required ?? false,
|
|
preferred_language: user.preferred_language ?? null,
|
|
enabled_language_codes: user.enabled_language_codes ?? [],
|
|
ui_preferences: normalizeUiPreferences(user.ui_preferences)
|
|
};
|
|
}
|
|
|
|
if (!principal?.membership_id || !principal.account_id) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
id: principal.membership_id,
|
|
account_id: principal.account_id,
|
|
email: principal.email ?? "",
|
|
display_name: principal.display_name ?? principal.email ?? null,
|
|
tenant_display_name: principal.display_name ?? null,
|
|
is_tenant_admin: false,
|
|
password_reset_required: false,
|
|
preferred_language: null,
|
|
enabled_language_codes: [],
|
|
ui_preferences: DEFAULT_UI_PREFERENCES
|
|
};
|
|
}
|
|
|
|
function normalizeUiPreferences(value: Partial<UserUiPreferences> | null | undefined): UserUiPreferences {
|
|
const theme = value?.theme === "light" || value?.theme === "dark" || value?.theme === "system" ? value.theme : "system";
|
|
return {
|
|
compact_tables: Boolean(value?.compact_tables ?? DEFAULT_UI_PREFERENCES.compact_tables),
|
|
show_inline_help_hints: Boolean(value?.show_inline_help_hints ?? DEFAULT_UI_PREFERENCES.show_inline_help_hints),
|
|
reduce_motion: Boolean(value?.reduce_motion ?? DEFAULT_UI_PREFERENCES.reduce_motion),
|
|
sticky_section_sidebars: Boolean(value?.sticky_section_sidebars ?? DEFAULT_UI_PREFERENCES.sticky_section_sidebars),
|
|
theme
|
|
};
|
|
}
|
|
|
|
function mergeWebModules(localModules: PlatformWebModule[], remoteModules: PlatformWebModule[]): PlatformWebModule[] {
|
|
if (remoteModules.length === 0) return localModules;
|
|
const seen = new Set(localModules.map((module) => module.id));
|
|
return [
|
|
...localModules,
|
|
...remoteModules.filter((module) => {
|
|
if (seen.has(module.id)) return false;
|
|
seen.add(module.id);
|
|
return true;
|
|
})];
|
|
|
|
}
|