imeeting/frontend/src/routes/index.tsx

106 lines
3.3 KiB
TypeScript

import { Suspense, lazy } from "react";
import { Navigate, Route, Routes, useLocation } from "react-router-dom";
import AppLayout from "@/layouts/AppLayout";
import { useAuth } from "@/hooks/useAuth";
import { menuRoutes,extraRoutes } from "./routes";
const Login = lazy(() => import("@/pages/auth/login"));
const ResetPassword = lazy(() => import("@/pages/auth/reset-password"));
const MeetingPreview = lazy(() => import("@/pages/business/MeetingPreview"));
const PublicDeviceMeetingCreate = lazy(() => import("@/pages/business/PublicDeviceMeetingCreate"));
function RouteFallback() {
let platformName = "iMeeting";
try {
const configStr = sessionStorage.getItem("platformConfig");
if (configStr) {
const config = JSON.parse(configStr);
if (config.projectName) {
platformName = config.projectName;
}
}
} catch (e) {
// ignore
}
return (
<div className="ai-meeting-loader">
<div className="ai-meeting-loader-backdrop" />
<div className="ai-meeting-loader-content">
<div className="ai-audio-core">
<div className="ai-ring" />
<div className="ai-ring" />
<div className="ai-ring" />
<div className="ai-core-glow" />
<div className="ai-spectrum">
<span className="ai-bar" />
<span className="ai-bar" />
<span className="ai-bar" />
<span className="ai-bar" />
<span className="ai-bar" />
</div>
</div>
<div className="ai-meeting-text">
<div className="ai-platform-name">{platformName}</div>
<div className="ai-loading-status">A.I. ENGINE INITIALIZING</div>
</div>
</div>
</div>
);
}
function RequireAuth({ children }: { children: JSX.Element }) {
const { isAuthed, profile } = useAuth();
const location = useLocation();
if (!isAuthed) {
const redirect = encodeURIComponent(`${location.pathname}${location.search}`);
return <Navigate to={`/login?redirect=${redirect}`} replace />;
}
if (profile?.pwdResetRequired === 1) {
return <Navigate to="/reset-password" replace />;
}
return children;
}
export default function AppRoutes() {
return (
<Suspense fallback={<RouteFallback />}>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/reset-password" element={<ResetPassword />} />
<Route
path="/meetings/:id/preview"
element={<MeetingPreview />}
/>
<Route
path="/public-device-meetings/:sessionId/create"
element={
<RequireAuth>
<PublicDeviceMeetingCreate />
</RequireAuth>
}
/>
<Route
path="/"
element={
<RequireAuth>
<AppLayout />
</RequireAuth>
}
>
{menuRoutes.map((route) => (
<Route key={route.path} index={route.path === "/"} path={route.path === "/" ? undefined : route.path.slice(1)} element={route.element} />
))}
{extraRoutes && extraRoutes.map((route) => (
<Route key={route.path} path={route.path.startsWith('/') ? route.path.slice(1) : route.path} element={route.element} />
))}
</Route>
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</Suspense>
);
}