strapi-plugin-oidc 1.8.0 → 1.8.2

package/README.md

@@ -31,20 +31,16 @@ module.exports = ({ env }) => ({
   'strapi-plugin-oidc': {
     enabled: true,
     config: {
-      // Required — find these in your provider's OIDC discovery document
+      // Required
+      OIDC_DISCOVERY_URL: env('OIDC_DISCOVERY_URL'), // https://your-provider/.well-known/openid-configuration
       OIDC_CLIENT_ID: env('OIDC_CLIENT_ID'),
       OIDC_CLIENT_SECRET: env('OIDC_CLIENT_SECRET'),
       OIDC_REDIRECT_URI: env('OIDC_REDIRECT_URI'), // https://your-strapi.com/strapi-plugin-oidc/oidc/callback
-      OIDC_AUTHORIZATION_ENDPOINT: env('OIDC_AUTHORIZATION_ENDPOINT'),
-      OIDC_TOKEN_ENDPOINT: env('OIDC_TOKEN_ENDPOINT'),
-      OIDC_USERINFO_ENDPOINT: env('OIDC_USERINFO_ENDPOINT'),
 
       // Optional — defaults shown
-      OIDC_SCOPE: 'openid profile email',
-      OIDC_GRANT_TYPE: 'authorization_code',
+      OIDC_SCOPE: 'openid profile email', // space-separated scopes
       OIDC_FAMILY_NAME_FIELD: 'family_name',
       OIDC_GIVEN_NAME_FIELD: 'given_name',
-      OIDC_END_SESSION_ENDPOINT: '', // Provider end-session URL (from discovery `end_session_endpoint`)
       OIDC_SSO_BUTTON_TEXT: 'Login via SSO',
       OIDC_ENFORCE: null, // null = use Admin UI toggle; true/false = override in config
       REMEMBER_ME: false, // Persist session across browser restarts
@@ -53,19 +49,17 @@ module.exports = ({ env }) => ({
       OIDC_GROUP_ROLE_MAP: '{}', // JSON map of group names to Strapi role names
       OIDC_REQUIRE_EMAIL_VERIFIED: true, // Reject logins when provider does not report email_verified=true (set false to disable)
       OIDC_TRUSTED_IP_HEADER: '', // Optional: 'cf-connecting-ip' for Cloudflare; read only when Strapi trusts the proxy
-      OIDC_JWKS_URI: '', // Provider's JWKS URI (from discovery `jwks_uri`) — enables ID token signature verification
-      OIDC_ISSUER: '', // Provider's issuer (from discovery `issuer`) — verified against ID token's `iss`
       OIDC_FORCE_SECURE_COOKIES: false, // Set true when behind a trusted HTTPS proxy that Strapi can't auto-detect
     },
   },
 });
 ```
 
-All OIDC values come from your provider's discovery document, typically available at `https://your-provider/.well-known/openid-configuration`.
+`OIDC_DISCOVERY_URL` is the URL of your provider's OpenID Connect discovery document (`/.well-known/openid-configuration`). The plugin fetches it at startup and automatically configures all endpoints, JWKS URI, and issuer.
 
 ### Security features
 
-- **ID token verification** — `OIDC_JWKS_URI` and `OIDC_ISSUER` enable signature, issuer, audience, and expiry validation via [`jose`](https://github.com/panva/jose)
+- **ID token verification** — Enabled automatically when the discovery document includes a `jwks_uri`. Validates signature, issuer, audience, and expiry via [`jose`](https://github.com/panva/jose)
 - **Email verification** — `OIDC_REQUIRE_EMAIL_VERIFIED: true` (default) rejects unverified emails
 - **CSRF protection** — OIDC state/nonce and POST-only logout endpoint
 - **Rate limiting** — 1 000 req/min per IP+UA (in-process; use a reverse-proxy-level limiter for multi-node)
@@ -83,7 +77,7 @@ Navigate to `/strapi-plugin-oidc/oidc` to start the OIDC flow, or click the **Lo
 
 ## Logout
 
-When `OIDC_END_SESSION_ENDPOINT` is set, clicking logout redirects to the provider's end-session URL (RP-initiated logout). If the provider session has already expired, Strapi skips the redirect and goes straight to the login page.
+When the discovery document includes an `end_session_endpoint`, clicking logout redirects to the provider's end-session URL (RP-initiated logout). If the provider session has already expired, Strapi skips the redirect and goes straight to the login page.
 
 The logout endpoint is `POST /strapi-plugin-oidc/logout`. Using POST instead of GET prevents CSRF-forced-logout attacks.
 

package/dist/admin/{index-B-K4X_N9.mjs → index-Bb9-aYb4.mjs}

@@ -1,4 +1,7 @@
-import { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { jsx } from "react/jsx-runtime";
+import { DesignSystemProvider, darkTheme, lightTheme, Loader } from "@strapi/design-system";
 const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
   const v = glob[path];
   if (v) {
@@ -32,6 +35,42 @@ function Initializer({ setPlugin }) {
   }, []);
   return null;
 }
+const LOGOUT_EVENT = "strapi-oidc:logout";
+function Overlay({ bg }) {
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    const handler = () => setActive(true);
+    window.addEventListener(LOGOUT_EVENT, handler);
+    return () => window.removeEventListener(LOGOUT_EVENT, handler);
+  }, []);
+  if (!active) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: bg,
+        backdropFilter: "blur(2px)"
+      },
+      children: /* @__PURE__ */ jsx(Loader, {})
+    }
+  );
+}
+function resolveTheme() {
+  const stored = window.localStorage.getItem("STRAPI_THEME") ?? "system";
+  const isDark = stored === "dark" || stored === "system" && (window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false);
+  return isDark ? darkTheme : lightTheme;
+}
+function LogoutOverlay() {
+  const theme = resolveTheme();
+  const bg = theme === darkTheme ? "rgba(24, 24, 38, 0.85)" : "rgba(255, 255, 255, 0.85)";
+  return /* @__PURE__ */ jsx(DesignSystemProvider, { theme, children: /* @__PURE__ */ jsx(Overlay, { bg }) });
+}
 const en = {
   "global.plugins.strapi-plugin-oidc": "OIDC Plugin",
   "page.title": "Configure OIDC default role(s) and access controls.",
@@ -94,7 +133,6 @@ const en = {
   "auditlog.table.ip": "IP",
   "auditlog.table.details": "Details",
   "auditlog.table.empty": "No audit log entries",
-  "auditlog.loading": "Loading…",
   "auditlog.clear": "Clear Logs",
   "auditlog.clear.title": "Clear All Logs",
   "auditlog.clear.description": "This will permanently delete all {count, plural, one {# audit log entry} other {# audit log entries}}. This action cannot be undone.",
@@ -167,7 +205,7 @@ const index = {
           defaultMessage: "Configuration"
         },
         Component: async () => {
-          return await import("./index-8YTLPV3h.mjs");
+          return await import("./index-BqWd-Iiq.mjs");
         },
         permissions: [{ action: "plugin::strapi-plugin-oidc.read", subject: null }]
       }
@@ -179,6 +217,9 @@ const index = {
     });
   },
   bootstrap() {
+    const overlayContainer = document.createElement("div");
+    document.body.appendChild(overlayContainer);
+    createRoot(overlayContainer).render(React.createElement(LogoutOverlay));
     const defaultButtonText = t("login.sso");
     const isAuthRoute = (path) => /\/auth\/(login|register|forgot-password|reset-password)/.test(path);
     let ssoButtonInjected = false;
@@ -238,6 +279,7 @@ const index = {
         if (!isAuthRoute(window.location.pathname)) return;
         injectSSOButton(buttonText);
         if (enforced) removeEnforcedElements();
+        if (ssoButtonInjected && !enforced) loginObserver?.disconnect();
       };
       tick();
       loginObserver = new MutationObserver(tick);
@@ -258,27 +300,27 @@ const index = {
       }
     };
     applySettings();
+    if (window.__strapiOidcFetchPatched) return;
+    window.__strapiOidcFetchPatched = true;
     const originalFetch = window.fetch;
     window.fetch = async (...args) => {
       const url = typeof args[0] === "string" ? args[0] : args[0].url;
       const isLogout = url?.endsWith("/admin/logout") && args[1]?.method?.toUpperCase() === "POST";
-      const response = await originalFetch(...args);
-      if (isLogout && response.ok) {
+      if (isLogout) {
+        window.dispatchEvent(new CustomEvent(LOGOUT_EVENT));
         window.localStorage.removeItem("jwtToken");
         window.localStorage.removeItem("isLoggedIn");
         window.sessionStorage.removeItem("jwtToken");
         window.sessionStorage.removeItem("isLoggedIn");
         document.cookie = "jwtToken=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/";
         document.cookie = "jwtToken=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/admin";
-        const form = document.createElement("form");
-        form.method = "POST";
-        form.action = "/strapi-plugin-oidc/logout";
-        document.body.appendChild(form);
-        form.submit();
+        originalFetch(...args).catch(() => {
+        });
+        window.location.href = "/strapi-plugin-oidc/logout";
         return new Promise(() => {
         });
       }
-      return response;
+      return originalFetch(...args);
     };
   },
   async registerTrads({ locales }) {

package/dist/admin/{index-CgG_mHzZ.js → index-Bmg4eTYb.js}

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactRouterDom = require("react-router-dom");
 const admin = require("@strapi/strapi/admin");
-const react = require("react");
+const React = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const reactIntl = require("react-intl");
-const index = require("./index-BSgVStns.js");
+const index = require("./index-Dk6TYtio.js");
 const styled = require("styled-components");
 const lucideReact = require("lucide-react");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -125,8 +125,8 @@ function TagChip({ label, onRemove }) {
   ] });
 }
 function useTagState({ value, onChange }) {
-  const [inputValue, setInputValue] = react.useState("");
-  const inputRef = react.useRef(null);
+  const [inputValue, setInputValue] = React.useState("");
+  const inputRef = React.useRef(null);
   const addTag = (tag, predicate) => {
     const trimmed = tag.trim();
     if (trimmed && !value.includes(trimmed) && (!predicate || predicate(trimmed))) {
@@ -261,11 +261,11 @@ function ComboboxTagInput({ value, onChange, placeholder, startIcon, options })
     value,
     onChange
   });
-  const [showDropdown, setShowDropdown] = react.useState(false);
-  const [activeIndex, setActiveIndex] = react.useState(-1);
-  const wrapperRef = react.useRef(null);
-  const listboxId = react.useId();
-  const optionIdPrefix = react.useId();
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const wrapperRef = React.useRef(null);
+  const listboxId = React.useId();
+  const optionIdPrefix = React.useId();
   const filteredOptions = options.filter(
     (opt) => !value.includes(opt) && opt.toLowerCase().includes(inputValue.toLowerCase())
   );
@@ -333,7 +333,7 @@ function ComboboxTagInput({ value, onChange, placeholder, startIcon, options })
     setShowDropdown(true);
     setActiveIndex(-1);
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setShowDropdown(false);
@@ -546,13 +546,13 @@ const DAY_NAMES = Array.from(
 );
 function TagDateInput({ value = [], onChange, placeholder, startIcon }) {
   const { formatMessage } = reactIntl.useIntl();
-  const [isOpen, setIsOpen] = react.useState(false);
-  const [viewDate, setViewDate] = react.useState(() => /* @__PURE__ */ new Date());
-  const [pendingDates, setPendingDates] = react.useState([]);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [viewDate, setViewDate] = React.useState(() => /* @__PURE__ */ new Date());
+  const [pendingDates, setPendingDates] = React.useState([]);
   const today = /* @__PURE__ */ new Date();
-  const wrapperRef = react.useRef(null);
-  const dialogId = react.useId();
-  const dialogLabelId = react.useId();
+  const wrapperRef = React.useRef(null);
+  const dialogId = React.useId();
+  const dialogLabelId = React.useId();
   const year = viewDate.getFullYear();
   const month = viewDate.getMonth();
   const daysInMonth = getDaysInMonth(year, month);
@@ -594,7 +594,7 @@ function TagDateInput({ value = [], onChange, placeholder, startIcon }) {
   const removeTag = (indexToRemove) => {
     onChange(value.filter((_, i) => i !== indexToRemove));
   };
-  react.useEffect(() => {
+  React.useEffect(() => {
     const handleClickOutside = (e) => {
       if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -863,14 +863,14 @@ function Whitelist({
   onImport,
   onExport
 }) {
-  const [email, setEmail] = react.useState("");
-  const [page, setPage] = react.useState(1);
+  const [email, setEmail] = React.useState("");
+  const [page, setPage] = React.useState(1);
   const { formatMessage } = reactIntl.useIntl();
   const { toggleNotification } = admin.useNotification();
-  const fileInputRef = react.useRef(null);
+  const fileInputRef = React.useRef(null);
   const pageCount = Math.ceil(users.length / PAGE_SIZE$1) || 1;
   const paginatedUsers = users.slice((page - 1) * PAGE_SIZE$1, page * PAGE_SIZE$1);
-  const onSaveEmail = react.useCallback(() => {
+  const onSaveEmail = React.useCallback(() => {
     const emailText = email.trim();
     if (users.some((user) => user.email === emailText)) {
       toggleNotification({
@@ -882,7 +882,7 @@ function Whitelist({
       setEmail("");
     }
   }, [email, users, onSave, formatMessage, toggleNotification]);
-  const handleImport = react.useCallback(
+  const handleImport = React.useCallback(
     async (e) => {
       const file = e.target.files?.[0];
       if (!fileInputRef.current || !file) return;
@@ -1018,7 +1018,7 @@ function Whitelist({
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("whitelist.table.created")) }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { style: { paddingRight: 0 }, children: " " })
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage(index.getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage(index.getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: index$1 + 1 + (page - 1) * PAGE_SIZE$1 }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: user.email }),
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(LocalizedDate, { date: user.createdAt, options: { second: "2-digit" } }) }),
@@ -3622,6 +3622,7 @@ const AUDIT_ACTIONS = [
   "user_created"
 ];
 const PAGE_SIZE = 10;
+const MIN_SPINNER_MS = 400;
 const DETAILS_TEXT_STYLE = {
   display: "block",
   overflow: "hidden",
@@ -3652,8 +3653,8 @@ function buildQueryString(params) {
   );
 }
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = react.useState(value);
-  react.useEffect(() => {
+  const [debounced, setDebounced] = React.useState(value);
+  React.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -3663,40 +3664,47 @@ function AuditLog({ title } = {}) {
   const { formatMessage } = reactIntl.useIntl();
   const { get: get2, del } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
-  const [records, setRecords] = react.useState([]);
-  const [pagination, setPagination] = react.useState({
+  const [records, setRecords] = React.useState([]);
+  const [pagination, setPagination] = React.useState({
     page: 1,
     pageSize: PAGE_SIZE,
     total: 0,
     pageCount: 1
   });
-  const [page, setPage] = react.useState(1);
-  const [loading, setLoading] = react.useState(false);
-  const [filters, setFilters] = react.useState({});
+  const [page, setPage] = React.useState(1);
+  const [loading, setLoading] = React.useState(true);
+  const [filters, setFilters] = React.useState({});
+  const fetchGenRef = React.useRef(0);
   const debouncedFilters = useDebounced(filters);
-  const fetchLogs = react.useCallback(
+  const fetchLogs = React.useCallback(
     async (p, f) => {
+      const gen = ++fetchGenRef.current;
       setLoading(true);
+      const startTime = Date.now();
+      let newRecords = [];
+      let newPagination = { page: p, pageSize: PAGE_SIZE, total: 0, pageCount: 1 };
       try {
-        const queryString = buildQueryString({
-          filters: f,
-          page: p,
-          pageSize: PAGE_SIZE
-        });
+        const queryString = buildQueryString({ filters: f, page: p, pageSize: PAGE_SIZE });
         const response = await get2(`/strapi-plugin-oidc/audit-logs?${queryString}`);
-        setRecords(response.data.results ?? []);
-        setPagination(
-          response.data.pagination ?? { page: p, pageSize: PAGE_SIZE, total: 0, pageCount: 1 }
-        );
+        newRecords = response.data.results ?? [];
+        newPagination = response.data.pagination ?? {
+          page: p,
+          pageSize: PAGE_SIZE,
+          total: 0,
+          pageCount: 1
+        };
       } catch {
-        setRecords([]);
-      } finally {
-        setLoading(false);
       }
+      const remaining = MIN_SPINNER_MS - (Date.now() - startTime);
+      if (remaining > 0) await new Promise((r) => setTimeout(r, remaining));
+      if (gen !== fetchGenRef.current) return;
+      setRecords(newRecords);
+      setPagination(newPagination);
+      setLoading(false);
     },
     [get2]
   );
-  react.useEffect(() => {
+  React.useEffect(() => {
     fetchLogs(page, debouncedFilters);
   }, [fetchLogs, page, debouncedFilters]);
   const handleClearAll = async () => {
@@ -3869,37 +3877,54 @@ function AuditLog({ title } = {}) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.timestamp")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.action")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.email")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.ip")) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.details")) })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tbody, { children: [
-        loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: formatMessage(index.getTrad("auditlog.loading")) }) }) }) }),
-        !loading && records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(index.getTrad("auditlog.filters.empty")) : formatMessage(index.getTrad("auditlog.table.empty")) }) }) }) }),
-        !loading && records.map((record) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: /* @__PURE__ */ jsxRuntime.jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.action }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: formatMessage(index.getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsxRuntime.jsx(
-              icons.Information,
-              {
-                "aria-hidden": true,
-                style: { cursor: "help" },
-                width: "1.4rem",
-                height: "1.4rem",
-                fill: "primary600"
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.email ?? "—" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.ip ?? "—" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
-        ] }, record.id))
-      ] })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.timestamp")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.action")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.email")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.ip")) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: formatMessage(index.getTrad("auditlog.table.details")) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tbody, { children: [
+          records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(index.getTrad("auditlog.filters.empty")) : formatMessage(index.getTrad("auditlog.table.empty")) }) }) }) }),
+          records.map((record) => /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Tr,
+            {
+              style: { opacity: loading ? 0.4 : 1, transition: "opacity 0.15s" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: /* @__PURE__ */ jsxRuntime.jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.action }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: formatMessage(index.getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsxRuntime.jsx(
+                    icons.Information,
+                    {
+                      "aria-hidden": true,
+                      style: { cursor: "help" },
+                      width: "1.4rem",
+                      height: "1.4rem",
+                      fill: "primary600"
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.email ?? "—" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", children: record.ip ?? "—" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
+              ]
+            },
+            record.id
+          ))
+        ] })
+      ] }),
+      loading && records.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          style: { position: "absolute", inset: 0, pointerEvents: "none" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TablePagination,
@@ -4173,8 +4198,8 @@ function isDirtyArray(a, b) {
 }
 function useOidcSettings() {
   const { get: get2, put, post } = admin.useFetchClient();
-  const [state, dispatch] = react.useReducer(reducer, initialState);
-  react.useEffect(() => {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+  React.useEffect(() => {
     get2(`/strapi-plugin-oidc/oidc-roles`).then((response) => {
       dispatch({ type: "hydrate/oidcRoles", oidcRoles: response.data });
     });
@@ -4195,19 +4220,19 @@ function useOidcSettings() {
       });
     });
   }, [get2]);
-  const onChangeRole = react.useCallback((values, oidcId) => {
+  const onChangeRole = React.useCallback((values, oidcId) => {
     dispatch({ type: "patch/oidcRole", oidcId, values });
   }, []);
-  const onRegisterWhitelist = react.useCallback((email) => {
+  const onRegisterWhitelist = React.useCallback((email) => {
     dispatch({ type: "user/add", email });
   }, []);
-  const onDeleteWhitelist = react.useCallback((email) => {
+  const onDeleteWhitelist = React.useCallback((email) => {
     dispatch({ type: "user/delete", email });
   }, []);
-  const onDeleteAll = react.useCallback(() => {
+  const onDeleteAll = React.useCallback(() => {
     dispatch({ type: "users/clear" });
   }, []);
-  const onImport = react.useCallback(
+  const onImport = React.useCallback(
     async (emails) => {
       const response = await post("/strapi-plugin-oidc/whitelist/import", {
         users: emails.map((e) => ({ email: e }))
@@ -4219,22 +4244,22 @@ function useOidcSettings() {
     },
     [post, get2]
   );
-  const onExport = react.useCallback(async () => {
+  const onExport = React.useCallback(async () => {
     const response = await get2("/strapi-plugin-oidc/whitelist/export");
     const data = response.data;
     downloadJson("strapi-oidc-whitelist", data);
   }, [get2]);
-  const onToggleWhitelist = react.useCallback((e) => {
+  const onToggleWhitelist = React.useCallback((e) => {
     dispatch({ type: "toggle/useWhitelist", value: e.target.checked });
   }, []);
-  const onToggleEnforce = react.useCallback((e) => {
+  const onToggleEnforce = React.useCallback((e) => {
     dispatch({ type: "toggle/enforceOIDC", value: e.target.checked });
   }, []);
-  const isDirty = react.useMemo(
+  const isDirty = React.useMemo(
     () => isDirtyPrimitive(state.current.useWhitelist, state.initial.useWhitelist) || isDirtyPrimitive(state.current.enforceOIDC, state.initial.enforceOIDC) || isDirtyArray(state.current.oidcRoles, state.initial.oidcRoles) || isDirtyArray(state.current.users, state.initial.users),
     [state.current, state.initial]
   );
-  const onSaveAll = react.useCallback(async () => {
+  const onSaveAll = React.useCallback(async () => {
     dispatch({ type: "loading", value: true });
     try {
       await Promise.all([
@@ -4409,7 +4434,7 @@ function HomePage$1() {
     ] }) })
   ] });
 }
-const HomePage = react.memo(HomePage$1);
+const HomePage = React.memo(HomePage$1);
 function App() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Routes, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Route, { index: true, element: /* @__PURE__ */ jsxRuntime.jsx(HomePage, {}) }),