strapi-plugin-oidc 1.8.3 → 1.8.5

package/README.md

@@ -48,7 +48,7 @@ module.exports = ({ env }) => ({
       OIDC_GROUP_FIELD: 'groups', // OIDC claim field containing group membership
       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_TRUSTED_IP_HEADER: '', // Optional: header set by your CDN/proxy containing the real client IP (see note below); only honoured when Koa proxy mode is enabled (see below)
       OIDC_FORCE_SECURE_COOKIES: false, // Set true when behind a trusted HTTPS proxy that Strapi can't auto-detect
     },
   },
@@ -67,9 +67,28 @@ module.exports = ({ env }) => ({
 
 ### Client IP attribution and reverse proxies
 
-The plugin logs client IPs for rate-limit buckets and audit logs. When Strapi runs behind a reverse proxy, **set `server.proxy: true`** so Koa trusts `X-Forwarded-For`; otherwise all IPs will be the proxy's.
+The plugin logs client IPs for rate-limit buckets and audit logs. When Strapi runs behind a reverse proxy, enable Koa proxy mode so Strapi trusts `X-Forwarded-For`; otherwise all IPs will be the proxy's internal address.
 
-Set `OIDC_TRUSTED_IP_HEADER: 'cf-connecting-ip'` when behind Cloudflare. The header is only honoured when `server.proxy: true` is set.
+In `config/server.ts`:
+
+```ts
+proxy: {
+  koa: true,
+},
+```
+
+Set `OIDC_TRUSTED_IP_HEADER` to the header your CDN or proxy uses to forward the real client IP. The header is only honoured when Koa proxy mode is enabled. Accepted values (all others are silently ignored):
+
+| Header                      | Provider                                          |
+| --------------------------- | ------------------------------------------------- |
+| `cf-connecting-ip`          | Cloudflare                                        |
+| `true-client-ip`            | Cloudflare Enterprise, Akamai                     |
+| `fastly-client-ip`          | Fastly                                            |
+| `fly-client-ip`             | Fly.io                                            |
+| `x-nf-client-connection-ip` | Netlify                                           |
+| `x-real-ip`                 | nginx (`proxy_set_header X-Real-IP $remote_addr`) |
+
+Only headers that CDN/proxy vendors guarantee to strip from inbound client requests are accepted, preventing IP spoofing via forged headers.
 
 ## Login
 

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

@@ -205,7 +205,7 @@ const index = {
           defaultMessage: "Configuration"
         },
         Component: async () => {
-          return await import("./index-BqWd-Iiq.mjs");
+          return await import("./index-DRFXk_MQ.mjs");
         },
         permissions: [{ action: "plugin::strapi-plugin-oidc.read", subject: null }]
       }

package/dist/admin/{index-Dk6TYtio.js → index-C8nfr95D.js}

@@ -208,7 +208,7 @@ const index = {
           defaultMessage: "Configuration"
         },
         Component: async () => {
-          return await Promise.resolve().then(() => require("./index-Bmg4eTYb.js"));
+          return await Promise.resolve().then(() => require("./index-DDCcJt16.js"));
         },
         permissions: [{ action: "plugin::strapi-plugin-oidc.read", subject: null }]
       }

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

@@ -7,7 +7,7 @@ const React = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const reactIntl = require("react-intl");
-const index = require("./index-Dk6TYtio.js");
+const index = require("./index-C8nfr95D.js");
 const styled = require("styled-components");
 const lucideReact = require("lucide-react");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -852,7 +852,7 @@ function TablePagination({ page, pageCount, onPageChange, total }) {
   ] }) });
 }
 const PAGE_SIZE$1 = 10;
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const EMAIL_REGEX$1 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function Whitelist({
   users,
   useWhitelist,
@@ -893,7 +893,7 @@ function Whitelist({
         if (!Array.isArray(parsed)) throw new Error();
         const emails = parsed.filter((item) => item?.email).map(
           (item) => String(item.email).trim().toLowerCase()
-        ).filter((email2) => EMAIL_REGEX.test(email2));
+        ).filter((email2) => EMAIL_REGEX$1.test(email2));
         const count = await onImport(emails);
         if (count === 0) {
           toggleNotification({
@@ -935,7 +935,7 @@ function Whitelist({
                   type: "text",
                   disabled: loading,
                   value: email,
-                  hasError: Boolean(email && !EMAIL_REGEX.test(email)),
+                  hasError: Boolean(email && !EMAIL_REGEX$1.test(email)),
                   onChange: (e) => setEmail(e.currentTarget.value),
                   placeholder: formatMessage(index.getTrad("whitelist.email.placeholder")),
                   style: { fontSize: "1.4rem", lineHeight: "2.2rem" }
@@ -946,7 +946,7 @@ function Whitelist({
                 {
                   size: "S",
                   startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-                  disabled: loading || email.trim() === "" || !EMAIL_REGEX.test(email),
+                  disabled: loading || email.trim() === "" || !EMAIL_REGEX$1.test(email),
                   loading,
                   onClick: onSaveEmail,
                   children: formatMessage(index.getTrad("page.add"))
@@ -1066,6 +1066,153 @@ function Whitelist({
     ] })
   ] });
 }
+const AUDIT_ACTIONS = [
+  "login_success",
+  "login_failure",
+  "missing_code",
+  "state_mismatch",
+  "nonce_mismatch",
+  "token_exchange_failed",
+  "whitelist_rejected",
+  "email_not_verified",
+  "id_token_invalid",
+  "logout",
+  "session_expired",
+  "user_created"
+];
+const IP_REGEX = /^(?:(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)|(?:(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,7}:|(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,6}|:(?::[0-9a-fA-F]{1,4}){1,7}|::))$/;
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function FilterBar({
+  filters,
+  hasActiveFilters,
+  onFiltersChange,
+  onResetPage,
+  onClear
+}) {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Box,
+    {
+      background: "neutral100",
+      hasRadius: true,
+      padding: 4,
+      marginBottom: 4,
+      borderColor: "neutral200",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", marginBottom: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { size: "1.6rem" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h3", children: formatMessage(index.getTrad("auditlog.filters")) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TagDateInput,
+            {
+              placeholder: formatMessage(index.getTrad("auditlog.filters.createdAt")),
+              value: filters.createdAt ?? [],
+              onChange: (selections) => {
+                onFiltersChange((prev) => {
+                  if (selections.length === 0) {
+                    const { createdAt, ...rest } = prev;
+                    return rest;
+                  }
+                  return { ...prev, createdAt: selections };
+                });
+                onResetPage();
+              },
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Calendar, { width: "1.4rem", height: "1.4rem" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TagInput,
+            {
+              value: filters.action ?? [],
+              onChange: (value) => onFiltersChange((prev) => ({ ...prev, action: value })),
+              options: AUDIT_ACTIONS,
+              placeholder: formatMessage(index.getTrad("auditlog.filters.action")),
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardList, { size: "1.4rem" }) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TagInput,
+            {
+              value: filters.email ?? [],
+              onChange: (value) => onFiltersChange((prev) => ({ ...prev, email: value })),
+              placeholder: formatMessage(index.getTrad("auditlog.filters.email")),
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Mail, { width: "1.4rem", height: "1.4rem" }) }),
+              validate: (v) => EMAIL_REGEX.test(v)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TagInput,
+            {
+              value: filters.ip ?? [],
+              onChange: (value) => onFiltersChange((prev) => ({ ...prev, ip: value })),
+              placeholder: formatMessage(index.getTrad("auditlog.filters.ip")),
+              startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Server, { size: "1.4rem" }) }),
+              validate: (v) => IP_REGEX.test(v)
+            }
+          ),
+          hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(SizedButton, { size: "S", variant: "danger-light", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}), onClick: onClear, children: formatMessage(index.getTrad("auditlog.filters.clear")) })
+        ] })
+      ]
+    }
+  );
+}
+const DETAILS_TEXT_STYLE = {
+  display: "block",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  maxWidth: "180px",
+  cursor: "help"
+};
+function LogTable({ records, loading, hasActiveFilters }) {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__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 })
+      }
+    )
+  ] });
+}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -3607,30 +3754,6 @@ function requireLib() {
 }
 var libExports = /* @__PURE__ */ requireLib();
 const qs = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
-const AUDIT_ACTIONS = [
-  "login_success",
-  "login_failure",
-  "missing_code",
-  "state_mismatch",
-  "nonce_mismatch",
-  "token_exchange_failed",
-  "whitelist_rejected",
-  "email_not_verified",
-  "id_token_invalid",
-  "logout",
-  "session_expired",
-  "user_created"
-];
-const PAGE_SIZE = 10;
-const MIN_SPINNER_MS = 400;
-const DETAILS_TEXT_STYLE = {
-  display: "block",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-  maxWidth: "180px",
-  cursor: "help"
-};
 function toWireFilters(f) {
   const out = {};
   if (f.action?.length) out.action = { $or: f.action.map((v) => ({ $eq: v })) };
@@ -3647,11 +3770,11 @@ function buildQueryString(params) {
   const { filters, ...rest } = params;
   return qs.stringify(
     { ...rest, filters: filters ? toWireFilters(filters) : void 0 },
-    {
-      encodeValuesOnly: true
-    }
+    { encodeValuesOnly: true }
   );
 }
+const PAGE_SIZE = 10;
+const MIN_SPINNER_MS = 400;
 function useDebounced(value, delay = 300) {
   const [debounced, setDebounced] = React.useState(value);
   React.useEffect(() => {
@@ -3660,10 +3783,8 @@ function useDebounced(value, delay = 300) {
   }, [value, delay]);
   return debounced;
 }
-function AuditLog({ title } = {}) {
-  const { formatMessage } = reactIntl.useIntl();
-  const { get: get2, del } = admin.useFetchClient();
-  const { toggleNotification } = admin.useNotification();
+function useAuditLogs(page, filters) {
+  const { get: get2 } = admin.useFetchClient();
   const [records, setRecords] = React.useState([]);
   const [pagination, setPagination] = React.useState({
     page: 1,
@@ -3671,9 +3792,7 @@ function AuditLog({ title } = {}) {
     total: 0,
     pageCount: 1
   });
-  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(
@@ -3707,6 +3826,15 @@ function AuditLog({ title } = {}) {
   React.useEffect(() => {
     fetchLogs(page, debouncedFilters);
   }, [fetchLogs, page, debouncedFilters]);
+  return { records, pagination, loading };
+}
+function AuditLog({ title } = {}) {
+  const { formatMessage } = reactIntl.useIntl();
+  const { del } = admin.useFetchClient();
+  const { toggleNotification } = admin.useNotification();
+  const [page, setPage] = React.useState(1);
+  const [filters, setFilters] = React.useState({});
+  const { records, pagination, loading } = useAuditLogs(page, filters);
   const handleClearAll = async () => {
     try {
       await del("/strapi-plugin-oidc/audit-logs");
@@ -3727,9 +3855,7 @@ function AuditLog({ title } = {}) {
     try {
       const cookieMatch = document.cookie.match(/(?:^|;\s*)jwtToken=([^;]+)/);
       const token = cookieMatch ? decodeURIComponent(cookieMatch[1]) : "";
-      const queryString = buildQueryString({
-        filters
-      });
+      const queryString = buildQueryString({ filters });
       const response = await fetch(`/strapi-plugin-oidc/audit-logs/export?${queryString}`, {
         headers: { Authorization: `Bearer ${token}` }
       });
@@ -3797,135 +3923,17 @@ function AuditLog({ title } = {}) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      designSystem.Box,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FilterBar,
       {
-        background: "neutral100",
-        hasRadius: true,
-        padding: 4,
-        marginBottom: 4,
-        borderColor: "neutral200",
-        borderWidth: "1px",
-        borderStyle: "solid",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", marginBottom: 3, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { size: "1.6rem" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h3", children: formatMessage(index.getTrad("auditlog.filters")) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, wrap: "wrap", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TagDateInput,
-              {
-                placeholder: formatMessage(index.getTrad("auditlog.filters.createdAt")),
-                value: filters.createdAt ?? [],
-                onChange: (selections) => {
-                  setFilters((prev) => {
-                    if (selections.length === 0) {
-                      const { createdAt: _removed, ...rest } = prev;
-                      return rest;
-                    }
-                    return { ...prev, createdAt: selections };
-                  });
-                  setPage(1);
-                },
-                startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Calendar, { width: "1.4rem", height: "1.4rem" }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TagInput,
-              {
-                value: filters.action ?? [],
-                onChange: (value) => setFilters((prev) => ({ ...prev, action: value })),
-                options: AUDIT_ACTIONS,
-                placeholder: formatMessage(index.getTrad("auditlog.filters.action")),
-                startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ClipboardList, { size: "1.4rem" }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TagInput,
-              {
-                value: filters.email ?? [],
-                onChange: (value) => setFilters((prev) => ({ ...prev, email: value })),
-                placeholder: formatMessage(index.getTrad("auditlog.filters.email")),
-                startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.Mail, { width: "1.4rem", height: "1.4rem" }) }),
-                validate: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TagInput,
-              {
-                value: filters.ip ?? [],
-                onChange: (value) => setFilters((prev) => ({ ...prev, ip: value })),
-                placeholder: formatMessage(index.getTrad("auditlog.filters.ip")),
-                startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Server, { size: "1.4rem" }) }),
-                validate: (v) => /^(?:(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)|(?:(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,7}:|(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:(?::[0-9a-fA-F]{1,4}){1,6}|:(?::[0-9a-fA-F]{1,4}){1,7}|::))$/.test(
-                  v
-                )
-              }
-            ),
-            hasActiveFilters && /* @__PURE__ */ jsxRuntime.jsx(
-              SizedButton,
-              {
-                size: "S",
-                variant: "danger-light",
-                startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
-                onClick: clearFilters,
-                children: formatMessage(index.getTrad("auditlog.filters.clear"))
-              }
-            )
-          ] })
-        ]
+        filters,
+        hasActiveFilters,
+        onFiltersChange: setFilters,
+        onResetPage: () => setPage(1),
+        onClear: clearFilters
       }
     ),
-    /* @__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(LogTable, { records, loading, hasActiveFilters }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TablePagination,
       {
@@ -4059,19 +4067,15 @@ function downloadJson(basename, data) {
   a.click();
   URL.revokeObjectURL(url);
 }
+const defaultSnapshot = {
+  oidcRoles: [],
+  users: [],
+  useWhitelist: false,
+  enforceOIDC: false
+};
 const initialState = {
-  current: {
-    oidcRoles: [],
-    users: [],
-    useWhitelist: false,
-    enforceOIDC: false
-  },
-  initial: {
-    oidcRoles: [],
-    users: [],
-    useWhitelist: false,
-    enforceOIDC: false
-  },
+  current: { ...defaultSnapshot },
+  initial: { ...defaultSnapshot },
   roles: [],
   enforceOIDCConfig: null,
   auditLogEnabled: true,