strapi-plugin-oidc 1.8.0 → 1.8.2

package/dist/admin/{index-8YTLPV3h.mjs → index-BqWd-Iiq.mjs}

@@ -2,10 +2,10 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useBlocker, Routes, Route } from "react-router-dom";
 import { useNotification, useFetchClient, Page, Layouts } from "@strapi/strapi/admin";
 import { useState, useRef, useId, useEffect, useCallback, useReducer, useMemo, memo } from "react";
-import { Typography, Flex, Box, MultiSelect, MultiSelectOption, Button, Dialog, Table, Pagination, PreviousLink, NextLink, PageLink, Field, Divider, Thead, Tr, Th, Tbody, Td, IconButton, Tooltip, Alert } from "@strapi/design-system";
+import { Typography, Flex, Box, MultiSelect, MultiSelectOption, Button, Dialog, Table, Pagination, PreviousLink, NextLink, PageLink, Field, Divider, Thead, Tr, Th, Tbody, Td, IconButton, Loader, Tooltip, Alert } from "@strapi/design-system";
 import { Cross, WarningCircle, Plus, Download, Upload, Trash, Calendar, Mail, Information } from "@strapi/icons";
 import { useIntl } from "react-intl";
-import { g as getTrad } from "./index-B-K4X_N9.mjs";
+import { g as getTrad } from "./index-Bb9-aYb4.mjs";
 import styled from "styled-components";
 import { Filter, ClipboardList, Server } from "lucide-react";
 function Role({ oidcRoles, roles, onChangeRole }) {
@@ -1014,7 +1014,7 @@ function Whitelist({
           /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("whitelist.table.created")) }),
           /* @__PURE__ */ jsx(Th, { style: { paddingRight: 0 }, children: " " })
         ] }) }),
-        /* @__PURE__ */ jsx(Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage(getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index) => /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Tbody, { children: users.length === 0 ? /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage(getTrad("whitelist.table.empty")) }) }) }) }) : paginatedUsers.map((user, index) => /* @__PURE__ */ jsxs(Tr, { children: [
           /* @__PURE__ */ jsx(Td, { children: index + 1 + (page - 1) * PAGE_SIZE$1 }),
           /* @__PURE__ */ jsx(Td, { children: user.email }),
           /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(LocalizedDate, { date: user.createdAt, options: { second: "2-digit" } }) }),
@@ -3618,6 +3618,7 @@ const AUDIT_ACTIONS = [
   "user_created"
 ];
 const PAGE_SIZE = 10;
+const MIN_SPINNER_MS = 400;
 const DETAILS_TEXT_STYLE = {
   display: "block",
   overflow: "hidden",
@@ -3667,28 +3668,35 @@ function AuditLog({ title } = {}) {
     pageCount: 1
   });
   const [page, setPage] = useState(1);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [filters, setFilters] = useState({});
+  const fetchGenRef = useRef(0);
   const debouncedFilters = useDebounced(filters);
   const fetchLogs = 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]
   );
@@ -3865,37 +3873,54 @@ function AuditLog({ title } = {}) {
         ]
       }
     ),
-    /* @__PURE__ */ jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
-      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.timestamp")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.action")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.email")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.ip")) }),
-        /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.details")) })
-      ] }) }),
-      /* @__PURE__ */ jsxs(Tbody, { children: [
-        loading && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: formatMessage(getTrad("auditlog.loading")) }) }) }) }),
-        !loading && records.length === 0 && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 4, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(getTrad("auditlog.filters.empty")) : formatMessage(getTrad("auditlog.table.empty")) }) }) }) }),
-        !loading && records.map((record) => /* @__PURE__ */ jsxs(Tr, { children: [
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: /* @__PURE__ */ jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.action }),
-            /* @__PURE__ */ jsx(Tooltip, { label: formatMessage(getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsx(
-              Information,
-              {
-                "aria-hidden": true,
-                style: { cursor: "help" },
-                width: "1.4rem",
-                height: "1.4rem",
-                fill: "primary600"
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.email ?? "—" }) }),
-          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.ip ?? "—" }) }),
-          /* @__PURE__ */ jsx(Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsx(Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
-        ] }, record.id))
-      ] })
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
+        /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.timestamp")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.action")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.email")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.ip")) }),
+          /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.details")) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(Tbody, { children: [
+          records.length === 0 && /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", alignItems: "center", style: { minHeight: "80px" }, children: loading ? /* @__PURE__ */ jsx(Loader, { small: true }) : /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: hasActiveFilters ? formatMessage(getTrad("auditlog.filters.empty")) : formatMessage(getTrad("auditlog.table.empty")) }) }) }) }),
+          records.map((record) => /* @__PURE__ */ jsxs(
+            Tr,
+            {
+              style: { opacity: loading ? 0.4 : 1, transition: "opacity 0.15s" },
+              children: [
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: /* @__PURE__ */ jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.action }),
+                  /* @__PURE__ */ jsx(Tooltip, { label: formatMessage(getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsx(
+                    Information,
+                    {
+                      "aria-hidden": true,
+                      style: { cursor: "help" },
+                      width: "1.4rem",
+                      height: "1.4rem",
+                      fill: "primary600"
+                    }
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.email ?? "—" }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.ip ?? "—" }) }),
+                /* @__PURE__ */ jsx(Td, { style: { maxWidth: "200px" }, children: record.details ? /* @__PURE__ */ jsx(Tooltip, { label: record.details, side: "top", children: /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", style: DETAILS_TEXT_STYLE, children: record.details }) }) : /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: "—" }) })
+              ]
+            },
+            record.id
+          ))
+        ] })
+      ] }),
+      loading && records.length > 0 && /* @__PURE__ */ jsx(
+        Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          style: { position: "absolute", inset: 0, pointerEvents: "none" },
+          children: /* @__PURE__ */ jsx(Loader, { small: true })
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       TablePagination,

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

@@ -1,5 +1,10 @@
 "use strict";
-const react = require("react");
+const React = require("react");
+const client = require("react-dom/client");
+const jsxRuntime = require("react/jsx-runtime");
+const designSystem = require("@strapi/design-system");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefault(React);
 const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
   const v = glob[path];
   if (v) {
@@ -24,15 +29,51 @@ const pluginPkg = {
 };
 const pluginId = pluginPkg.name.replace(/^@strapi\/plugin-/i, "");
 function Initializer({ setPlugin }) {
-  const ref = react.useRef();
+  const ref = React.useRef();
   ref.current = setPlugin;
-  react.useEffect(() => {
+  React.useEffect(() => {
     if (ref.current) {
       ref.current(pluginId);
     }
   }, []);
   return null;
 }
+const LOGOUT_EVENT = "strapi-oidc:logout";
+function Overlay({ bg }) {
+  const [active, setActive] = React.useState(false);
+  React.useEffect(() => {
+    const handler = () => setActive(true);
+    window.addEventListener(LOGOUT_EVENT, handler);
+    return () => window.removeEventListener(LOGOUT_EVENT, handler);
+  }, []);
+  if (!active) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1e4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: bg,
+        backdropFilter: "blur(2px)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.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 ? designSystem.darkTheme : designSystem.lightTheme;
+}
+function LogoutOverlay() {
+  const theme = resolveTheme();
+  const bg = theme === designSystem.darkTheme ? "rgba(24, 24, 38, 0.85)" : "rgba(255, 255, 255, 0.85)";
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(Overlay, { bg }) });
+}
 const en = {
   "global.plugins.strapi-plugin-oidc": "OIDC Plugin",
   "page.title": "Configure OIDC default role(s) and access controls.",
@@ -95,7 +136,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.",
@@ -168,7 +208,7 @@ const index = {
           defaultMessage: "Configuration"
         },
         Component: async () => {
-          return await Promise.resolve().then(() => require("./index-CgG_mHzZ.js"));
+          return await Promise.resolve().then(() => require("./index-Bmg4eTYb.js"));
         },
         permissions: [{ action: "plugin::strapi-plugin-oidc.read", subject: null }]
       }
@@ -180,6 +220,9 @@ const index = {
     });
   },
   bootstrap() {
+    const overlayContainer = document.createElement("div");
+    document.body.appendChild(overlayContainer);
+    client.createRoot(overlayContainer).render(React__default.default.createElement(LogoutOverlay));
     const defaultButtonText = t("login.sso");
     const isAuthRoute = (path) => /\/auth\/(login|register|forgot-password|reset-password)/.test(path);
     let ssoButtonInjected = false;
@@ -239,6 +282,7 @@ const index = {
         if (!isAuthRoute(window.location.pathname)) return;
         injectSSOButton(buttonText);
         if (enforced) removeEnforcedElements();
+        if (ssoButtonInjected && !enforced) loginObserver?.disconnect();
       };
       tick();
       loginObserver = new MutationObserver(tick);
@@ -259,27 +303,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.js

@@ -1,4 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const index = require("./index-BSgVStns.js");
+const index = require("./index-Dk6TYtio.js");
+require("react");
+require("react-dom/client");
 exports.default = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,6 @@
-import { i } from "./index-B-K4X_N9.mjs";
+import { i } from "./index-Bb9-aYb4.mjs";
+import "react";
+import "react-dom/client";
 export {
   i as default
 };