58 lines
1.9 KiB
JavaScript

import Alert from "@mui/material/Alert";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
import { Navigate, Outlet, useLocation } from "react-router-dom";
import { hasAnyExternalCapability } from "../config/capabilities.js";
import { useExternalI18n } from "../i18n/ExternalI18nProvider.jsx";
import { translateExternalError } from "../i18n/errors.js";
import { useExternalAuth } from "./ExternalAuthProvider.jsx";
export function RequireExternalAuth() {
const { initializationError, initializing, refresh, session } = useExternalAuth();
const { t } = useExternalI18n();
const location = useLocation();
if (initializing) {
return (
<Box className="external-full-state" role="status">
<CircularProgress size={28} />
<Typography color="text.secondary">{t("auth.checkingSession")}</Typography>
</Box>
);
}
if (!session) {
if (initializationError) {
return (
<Box className="external-full-state">
<Alert severity="error">{translateExternalError(initializationError, t, "auth.sessionFailed")}</Alert>
<Button onClick={refresh}>{t("auth.recheck")}</Button>
</Box>
);
}
return <Navigate replace state={{ from: location }} to="/login" />;
}
return <Outlet />;
}
export function RequireExternalCapability({ anyOf }) {
const { session } = useExternalAuth();
const { t } = useExternalI18n();
if (hasAnyExternalCapability(session, anyOf)) {
return <Outlet />;
}
return (
<Box className="external-page external-full-state">
<Alert severity="warning">{t("auth.noPermission")}</Alert>
<Button component="a" href="/external-admin/overview" variant="outlined">
{t("auth.returnOverview")}
</Button>
</Box>
);
}