strapi-plugin-oidc 1.6.6 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,969 +0,0 @@
1
- import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
- import { useBlocker, Routes, Route } from "react-router-dom";
3
- import { useNotification, useFetchClient, Page, Layouts } from "@strapi/strapi/admin";
4
- import { useState, useRef, useCallback, useEffect, useReducer, useMemo, memo } from "react";
5
- import { Typography, Flex, Box, MultiSelect, MultiSelectOption, Dialog, Button, Table, Pagination, PreviousLink, NextLink, PageLink, Field, Divider, Thead, Tr, Th, Tbody, Td, IconButton, Tooltip, Alert } from "@strapi/design-system";
6
- import { WarningCircle, Download, Upload, Trash, Plus, Information } from "@strapi/icons";
7
- import { useIntl } from "react-intl";
8
- import { g as getTrad } from "./index-D2aMSVmR.mjs";
9
- import styled from "styled-components";
10
- function Role({ oidcRoles, roles, onChangeRole }) {
11
- const { formatMessage } = useIntl();
12
- return /* @__PURE__ */ jsxs(Fragment, { children: [
13
- /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textColor: "neutral600", marginBottom: 4, children: formatMessage(getTrad("roles.notes")) }),
14
- /* @__PURE__ */ jsx(Flex, { direction: "column", alignItems: "stretch", gap: 4, marginBottom: 4, children: oidcRoles.map((oidcRole) => /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
15
- MultiSelect,
16
- {
17
- withTags: true,
18
- placeholder: formatMessage(getTrad("roles.placeholder")),
19
- value: oidcRole.role ? oidcRole.role.map((r) => String(r)) : [],
20
- onChange: (value) => {
21
- if (value && value.length > 0) onChangeRole(value, oidcRole.oauth_type);
22
- },
23
- children: roles.map((role) => /* @__PURE__ */ jsx(MultiSelectOption, { value: String(role.id), children: role.name }, role.id))
24
- }
25
- ) }, oidcRole.oauth_type)) })
26
- ] });
27
- }
28
- function LocalizedDate({
29
- date,
30
- options
31
- }) {
32
- const userLocale = navigator.language || "en-US";
33
- return new Intl.DateTimeFormat(userLocale, {
34
- year: "numeric",
35
- month: "short",
36
- day: "numeric",
37
- hour: "2-digit",
38
- minute: "2-digit",
39
- ...options
40
- }).format(new Date(date));
41
- }
42
- const CustomTable = styled(Table)`
43
- th,
44
- td,
45
- th span,
46
- td span {
47
- font-size: 1.3rem !important;
48
- }
49
- `;
50
- function ConfirmDialog({
51
- trigger,
52
- title,
53
- body,
54
- confirmLabel,
55
- onConfirm,
56
- confirmVariant = "danger"
57
- }) {
58
- const { formatMessage } = useIntl();
59
- return /* @__PURE__ */ jsxs(Dialog.Root, { children: [
60
- /* @__PURE__ */ jsx(Dialog.Trigger, { children: trigger }),
61
- /* @__PURE__ */ jsxs(Dialog.Content, { children: [
62
- /* @__PURE__ */ jsx(Dialog.Header, { children: title }),
63
- /* @__PURE__ */ jsx(Dialog.Body, { icon: /* @__PURE__ */ jsx(WarningCircle, { fill: "danger600" }), children: body }),
64
- /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
65
- /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: "tertiary", children: formatMessage(getTrad("page.cancel")) }) }),
66
- /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { fullWidth: true, variant: confirmVariant, onClick: onConfirm, children: confirmLabel }) })
67
- ] })
68
- ] })
69
- ] });
70
- }
71
- function TablePagination({ page, pageCount, onPageChange }) {
72
- const { formatMessage } = useIntl();
73
- if (pageCount <= 1) return null;
74
- const handleClick = (e, num) => {
75
- e.preventDefault();
76
- onPageChange(num);
77
- };
78
- const pageLink = (num) => /* @__PURE__ */ jsx(PageLink, { number: num, href: "#", onClick: (e) => handleClick(e, num), children: formatMessage(getTrad("pagination.page"), { page: num }) }, num);
79
- const Ellipsis = () => /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", paddingLeft: 2, paddingRight: 2, children: "…" });
80
- let pages;
81
- if (pageCount <= 10) {
82
- pages = Array.from({ length: pageCount }, (_, i) => pageLink(i + 1));
83
- } else if (page <= 6) {
84
- pages = /* @__PURE__ */ jsxs(Fragment, { children: [
85
- Array.from({ length: 9 }, (_, i) => pageLink(i + 1)),
86
- /* @__PURE__ */ jsx(Ellipsis, {}),
87
- pageLink(pageCount)
88
- ] });
89
- } else if (page >= pageCount - 5) {
90
- pages = /* @__PURE__ */ jsxs(Fragment, { children: [
91
- pageLink(1),
92
- /* @__PURE__ */ jsx(Ellipsis, {}),
93
- Array.from({ length: 9 }, (_, i) => pageLink(pageCount - 8 + i))
94
- ] });
95
- } else {
96
- pages = /* @__PURE__ */ jsxs(Fragment, { children: [
97
- pageLink(1),
98
- /* @__PURE__ */ jsx(Ellipsis, {}),
99
- Array.from({ length: 7 }, (_, i) => pageLink(page - 3 + i)),
100
- /* @__PURE__ */ jsx(Ellipsis, {}),
101
- pageLink(pageCount)
102
- ] });
103
- }
104
- return /* @__PURE__ */ jsx(Box, { paddingTop: 4, children: /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsxs(Pagination, { activePage: page, pageCount, children: [
105
- /* @__PURE__ */ jsx(PreviousLink, { href: "#", onClick: (e) => handleClick(e, Math.max(1, page - 1)), children: formatMessage(getTrad("pagination.previous")) }),
106
- pages,
107
- /* @__PURE__ */ jsx(NextLink, { href: "#", onClick: (e) => handleClick(e, Math.min(pageCount, page + 1)), children: formatMessage(getTrad("pagination.next")) })
108
- ] }) }) });
109
- }
110
- const PAGE_SIZE$1 = 10;
111
- const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
112
- function Whitelist({
113
- users,
114
- useWhitelist,
115
- loading,
116
- onSave,
117
- onDelete,
118
- onDeleteAll,
119
- onImport,
120
- onExport
121
- }) {
122
- const [email, setEmail] = useState("");
123
- const [page, setPage] = useState(1);
124
- const { formatMessage } = useIntl();
125
- const { toggleNotification } = useNotification();
126
- const fileInputRef = useRef(null);
127
- const pageCount = Math.ceil(users.length / PAGE_SIZE$1) || 1;
128
- const paginatedUsers = users.slice((page - 1) * PAGE_SIZE$1, page * PAGE_SIZE$1);
129
- const onSaveEmail = useCallback(() => {
130
- const emailText = email.trim();
131
- if (users.some((user) => user.email === emailText)) {
132
- toggleNotification({
133
- type: "warning",
134
- message: formatMessage(getTrad("whitelist.error.unique"))
135
- });
136
- } else {
137
- onSave(emailText);
138
- setEmail("");
139
- }
140
- }, [email, users, onSave, formatMessage, toggleNotification]);
141
- const handleImport = useCallback(
142
- async (e) => {
143
- const file = e.target.files?.[0];
144
- if (!fileInputRef.current || !file) return;
145
- fileInputRef.current.value = "";
146
- try {
147
- const text = await file.text();
148
- const parsed = JSON.parse(text);
149
- if (!Array.isArray(parsed)) throw new Error();
150
- const emails = parsed.filter((item) => item?.email).map(
151
- (item) => String(item.email).trim().toLowerCase()
152
- ).filter((email2) => EMAIL_REGEX.test(email2));
153
- const count = await onImport(emails);
154
- if (count === 0) {
155
- toggleNotification({
156
- type: "info",
157
- message: formatMessage(getTrad("whitelist.import.none"))
158
- });
159
- } else {
160
- toggleNotification({
161
- type: "success",
162
- message: formatMessage(getTrad("whitelist.import.success"), { count })
163
- });
164
- }
165
- } catch {
166
- toggleNotification({
167
- type: "warning",
168
- message: formatMessage(getTrad("whitelist.import.error"))
169
- });
170
- }
171
- },
172
- [onImport, formatMessage, toggleNotification]
173
- );
174
- return /* @__PURE__ */ jsxs(Box, { children: [
175
- /* @__PURE__ */ jsx(Typography, { tag: "p", variant: "omega", textColor: "neutral600", marginBottom: 4, children: formatMessage(getTrad("whitelist.description")) }),
176
- useWhitelist && /* @__PURE__ */ jsxs(Fragment, { children: [
177
- /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
178
- /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage(getTrad("whitelist.count"), { count: users.length }) }),
179
- /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
180
- /* @__PURE__ */ jsx(
181
- Button,
182
- {
183
- size: "S",
184
- variant: "tertiary",
185
- startIcon: /* @__PURE__ */ jsx(Download, {}),
186
- onClick: onExport,
187
- disabled: users.length === 0,
188
- children: formatMessage(getTrad("whitelist.export"))
189
- }
190
- ),
191
- /* @__PURE__ */ jsx(
192
- Button,
193
- {
194
- size: "S",
195
- variant: "tertiary",
196
- startIcon: /* @__PURE__ */ jsx(Upload, {}),
197
- onClick: () => fileInputRef.current?.click(),
198
- children: formatMessage(getTrad("whitelist.import"))
199
- }
200
- ),
201
- /* @__PURE__ */ jsx(
202
- "input",
203
- {
204
- ref: fileInputRef,
205
- type: "file",
206
- accept: ".json,application/json",
207
- style: { display: "none" },
208
- onChange: handleImport
209
- }
210
- ),
211
- users.length > 0 && /* @__PURE__ */ jsx(
212
- ConfirmDialog,
213
- {
214
- trigger: /* @__PURE__ */ jsx(Button, { size: "S", variant: "danger-light", startIcon: /* @__PURE__ */ jsx(Trash, {}), children: formatMessage(getTrad("whitelist.delete.all.label")) }),
215
- title: formatMessage(getTrad("whitelist.delete.all.title")),
216
- body: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", textAlign: "center", children: formatMessage(getTrad("whitelist.delete.all.description"), {
217
- count: users.length
218
- }) }) }),
219
- confirmLabel: formatMessage(getTrad("whitelist.delete.all.label")),
220
- onConfirm: onDeleteAll
221
- }
222
- )
223
- ] })
224
- ] }),
225
- /* @__PURE__ */ jsxs(Flex, { gap: 4, marginTop: 5, marginBottom: 5, alignItems: "flex-start", children: [
226
- /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(
227
- Field.Input,
228
- {
229
- type: "text",
230
- disabled: loading,
231
- value: email,
232
- hasError: Boolean(email && !EMAIL_REGEX.test(email)),
233
- onChange: (e) => setEmail(e.currentTarget.value),
234
- placeholder: formatMessage(getTrad("whitelist.email.placeholder"))
235
- }
236
- ) }) }),
237
- /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
238
- Button,
239
- {
240
- size: "L",
241
- startIcon: /* @__PURE__ */ jsx(Plus, {}),
242
- disabled: loading || email.trim() === "" || !EMAIL_REGEX.test(email),
243
- loading,
244
- onClick: onSaveEmail,
245
- children: formatMessage(getTrad("page.add"))
246
- }
247
- ) })
248
- ] }),
249
- /* @__PURE__ */ jsx(Divider, {}),
250
- /* @__PURE__ */ jsxs(CustomTable, { colCount: 4, rowCount: users.length, children: [
251
- /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
252
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("whitelist.table.no")) }),
253
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("whitelist.table.email")) }),
254
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("whitelist.table.created")) }),
255
- /* @__PURE__ */ jsx(Th, { style: { paddingRight: 0 }, children: " " })
256
- ] }) }),
257
- /* @__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: [
258
- /* @__PURE__ */ jsx(Td, { children: index + 1 + (page - 1) * PAGE_SIZE$1 }),
259
- /* @__PURE__ */ jsx(Td, { children: user.email }),
260
- /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(LocalizedDate, { date: user.createdAt, options: { month: "long" } }) }),
261
- /* @__PURE__ */ jsx(Td, { style: { paddingRight: 0 }, children: /* @__PURE__ */ jsx(
262
- Flex,
263
- {
264
- justifyContent: "flex-end",
265
- onClick: (e) => e.stopPropagation(),
266
- style: { width: "100%" },
267
- children: /* @__PURE__ */ jsx(
268
- ConfirmDialog,
269
- {
270
- trigger: /* @__PURE__ */ jsx(
271
- IconButton,
272
- {
273
- label: formatMessage(getTrad("whitelist.delete.label")),
274
- withTooltip: false,
275
- children: /* @__PURE__ */ jsx(Trash, {})
276
- }
277
- ),
278
- title: formatMessage(getTrad("whitelist.delete.title")),
279
- body: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 2, children: [
280
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { id: "confirm-description", children: formatMessage(getTrad("whitelist.delete.description")) }) }),
281
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "omega", fontWeight: "bold", children: user.email }) }),
282
- /* @__PURE__ */ jsx(Flex, { justifyContent: "center", marginTop: 2, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage(getTrad("whitelist.delete.note")) }) })
283
- ] }),
284
- confirmLabel: formatMessage(getTrad("page.ok")),
285
- onConfirm: () => onDelete(user.email),
286
- confirmVariant: "danger-light"
287
- }
288
- )
289
- }
290
- ) })
291
- ] }, user.email)) })
292
- ] }),
293
- /* @__PURE__ */ jsx(TablePagination, { page, pageCount, onPageChange: setPage })
294
- ] })
295
- ] });
296
- }
297
- const PAGE_SIZE = 10;
298
- const DETAILS_TEXT_STYLE = {
299
- display: "block",
300
- overflow: "hidden",
301
- textOverflow: "ellipsis",
302
- whiteSpace: "nowrap",
303
- maxWidth: "180px",
304
- cursor: "help"
305
- };
306
- function AuditLog() {
307
- const { formatMessage } = useIntl();
308
- const { get, del } = useFetchClient();
309
- const { toggleNotification } = useNotification();
310
- const [records, setRecords] = useState([]);
311
- const [pagination, setPagination] = useState({
312
- page: 1,
313
- pageSize: PAGE_SIZE,
314
- total: 0,
315
- pageCount: 1
316
- });
317
- const [page, setPage] = useState(1);
318
- const [loading, setLoading] = useState(false);
319
- const fetchLogs = useCallback(
320
- async (p) => {
321
- setLoading(true);
322
- try {
323
- const response = await get(
324
- `/strapi-plugin-oidc/audit-logs?page=${p}&pageSize=${PAGE_SIZE}`
325
- );
326
- setRecords(response.data.results ?? []);
327
- setPagination(
328
- response.data.pagination ?? { page: p, pageSize: PAGE_SIZE, total: 0, pageCount: 1 }
329
- );
330
- } catch {
331
- setRecords([]);
332
- } finally {
333
- setLoading(false);
334
- }
335
- },
336
- [get]
337
- );
338
- useEffect(() => {
339
- fetchLogs(page);
340
- }, [fetchLogs, page]);
341
- const handleClearAll = async () => {
342
- try {
343
- await del("/strapi-plugin-oidc/audit-logs");
344
- toggleNotification({
345
- type: "success",
346
- message: formatMessage(getTrad("auditlog.clear.success"))
347
- });
348
- fetchLogs(1);
349
- } catch {
350
- toggleNotification({
351
- type: "danger",
352
- message: formatMessage(getTrad("auditlog.clear.error"))
353
- });
354
- }
355
- };
356
- const handleExport = async () => {
357
- try {
358
- const cookieMatch = document.cookie.match(/(?:^|;\s*)jwtToken=([^;]+)/);
359
- const token = cookieMatch ? decodeURIComponent(cookieMatch[1]) : "";
360
- const response = await fetch("/strapi-plugin-oidc/audit-logs/export", {
361
- headers: { Authorization: `Bearer ${token}` }
362
- });
363
- if (!response.ok) {
364
- toggleNotification({
365
- type: "danger",
366
- message: formatMessage(getTrad("auditlog.export.error"))
367
- });
368
- return;
369
- }
370
- const blob = await response.blob();
371
- const url = URL.createObjectURL(blob);
372
- const a = document.createElement("a");
373
- a.href = url;
374
- a.download = `oidc-audit-log-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}.ndjson`;
375
- a.click();
376
- URL.revokeObjectURL(url);
377
- } catch {
378
- toggleNotification({
379
- type: "danger",
380
- message: formatMessage(getTrad("auditlog.export.error"))
381
- });
382
- }
383
- };
384
- return /* @__PURE__ */ jsxs(Box, { children: [
385
- /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 4, children: [
386
- /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
387
- pagination.total,
388
- " ",
389
- pagination.total === 1 ? "entry" : "entries"
390
- ] }),
391
- /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
392
- /* @__PURE__ */ jsx(
393
- Button,
394
- {
395
- size: "S",
396
- variant: "tertiary",
397
- startIcon: /* @__PURE__ */ jsx(Download, {}),
398
- onClick: handleExport,
399
- disabled: pagination.total === 0,
400
- children: formatMessage(getTrad("auditlog.export"))
401
- }
402
- ),
403
- /* @__PURE__ */ jsx(
404
- ConfirmDialog,
405
- {
406
- trigger: /* @__PURE__ */ jsx(
407
- Button,
408
- {
409
- size: "S",
410
- variant: "danger-light",
411
- startIcon: /* @__PURE__ */ jsx(Trash, {}),
412
- disabled: pagination.total === 0,
413
- children: formatMessage(getTrad("auditlog.clear"))
414
- }
415
- ),
416
- title: formatMessage(getTrad("auditlog.clear.title")),
417
- body: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", textAlign: "center", children: formatMessage(getTrad("auditlog.clear.description"), {
418
- count: pagination.total
419
- }) }) }),
420
- confirmLabel: formatMessage(getTrad("auditlog.clear")),
421
- onConfirm: handleClearAll
422
- }
423
- )
424
- ] })
425
- ] }),
426
- /* @__PURE__ */ jsxs(CustomTable, { colCount: 5, rowCount: records.length, children: [
427
- /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
428
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.timestamp")) }),
429
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.action")) }),
430
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.email")) }),
431
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.ip")) }),
432
- /* @__PURE__ */ jsx(Th, { children: formatMessage(getTrad("auditlog.table.details")) })
433
- ] }) }),
434
- /* @__PURE__ */ jsxs(Tbody, { children: [
435
- 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")) }) }) }) }),
436
- !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: formatMessage(getTrad("auditlog.table.empty")) }) }) }) }),
437
- !loading && records.map((record) => /* @__PURE__ */ jsxs(Tr, { children: [
438
- /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: /* @__PURE__ */ jsx(LocalizedDate, { date: record.createdAt, options: { second: "2-digit" } }) }) }),
439
- /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
440
- /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.action }),
441
- /* @__PURE__ */ jsx(Tooltip, { label: formatMessage(getTrad(`auditlog.action.${record.action}`)), children: /* @__PURE__ */ jsx(
442
- Information,
443
- {
444
- "aria-hidden": true,
445
- style: { cursor: "help" },
446
- width: "1.4rem",
447
- height: "1.4rem",
448
- fill: "primary600"
449
- }
450
- ) })
451
- ] }) }),
452
- /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.email ?? "—" }) }),
453
- /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { variant: "omega", children: record.ip ?? "—" }) }),
454
- /* @__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: "—" }) })
455
- ] }, record.id))
456
- ] })
457
- ] }),
458
- /* @__PURE__ */ jsx(TablePagination, { page, pageCount: pagination.pageCount, onPageChange: setPage })
459
- ] });
460
- }
461
- const AlertMessage = styled.div`
462
- position: fixed;
463
- left: 50%;
464
- transform: translateX(-50%);
465
- top: 2.875rem;
466
- z-index: 10;
467
- width: 31.25rem;
468
- `;
469
- function SuccessAlertMessage({ onClose }) {
470
- const { formatMessage } = useIntl();
471
- return /* @__PURE__ */ jsx(AlertMessage, { children: /* @__PURE__ */ jsx(
472
- Alert,
473
- {
474
- title: formatMessage(getTrad("alert.title.success")),
475
- variant: "success",
476
- closeLabel: "",
477
- onClose,
478
- children: formatMessage(getTrad("page.save.success"))
479
- }
480
- ) });
481
- }
482
- function ErrorAlertMessage({ onClose }) {
483
- const { formatMessage } = useIntl();
484
- return /* @__PURE__ */ jsx(AlertMessage, { children: /* @__PURE__ */ jsx(
485
- Alert,
486
- {
487
- title: formatMessage(getTrad("alert.title.error")),
488
- variant: "danger",
489
- closeLabel: "",
490
- onClose,
491
- children: formatMessage(getTrad("page.save.error"))
492
- }
493
- ) });
494
- }
495
- const SwitchContainer = styled.label`
496
- position: relative;
497
- display: inline-block;
498
- width: 40px;
499
- height: 24px;
500
- cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
501
- opacity: ${({ $disabled }) => $disabled ? 0.5 : 1};
502
- `;
503
- const SwitchInput = styled.input`
504
- opacity: 0;
505
- width: 0;
506
- height: 0;
507
-
508
- &:checked + span {
509
- background-color: ${({ theme }) => theme.colors.primary600};
510
- }
511
-
512
- &:focus + span {
513
- box-shadow: 0 0 1px ${({ theme }) => theme.colors.primary600};
514
- }
515
-
516
- &:checked + span:before {
517
- transform: translateX(16px);
518
- }
519
-
520
- &:disabled + span {
521
- pointer-events: none;
522
- }
523
- `;
524
- const SwitchSlider = styled.span`
525
- position: absolute;
526
- cursor: inherit;
527
- top: 0;
528
- left: 0;
529
- right: 0;
530
- bottom: 0;
531
- background-color: ${({ theme }) => theme.colors.neutral300};
532
- transition: 0.4s;
533
- border-radius: 24px;
534
-
535
- &:before {
536
- position: absolute;
537
- content: "";
538
- height: 18px;
539
- width: 18px;
540
- left: 3px;
541
- bottom: 3px;
542
- background-color: white;
543
- transition: 0.4s;
544
- border-radius: 50%;
545
- }
546
- `;
547
- function CustomSwitch({ checked, onChange, label, disabled }) {
548
- return /* @__PURE__ */ jsxs(Flex, { gap: 3, children: [
549
- /* @__PURE__ */ jsxs(SwitchContainer, { $disabled: disabled, children: [
550
- /* @__PURE__ */ jsx(
551
- SwitchInput,
552
- {
553
- type: "checkbox",
554
- checked,
555
- onChange,
556
- disabled
557
- }
558
- ),
559
- /* @__PURE__ */ jsx(SwitchSlider, {})
560
- ] }),
561
- label && /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: disabled ? "neutral500" : "neutral800", children: label })
562
- ] });
563
- }
564
- function formatDatetimeForFilename(date) {
565
- const year = date.getFullYear();
566
- const month = String(date.getMonth() + 1).padStart(2, "0");
567
- const day = String(date.getDate()).padStart(2, "0");
568
- const hours = String(date.getHours()).padStart(2, "0");
569
- const minutes = String(date.getMinutes()).padStart(2, "0");
570
- const seconds = String(date.getSeconds()).padStart(2, "0");
571
- return `${year}${month}${day}_${hours}${minutes}${seconds}`;
572
- }
573
- function downloadJson(basename, data) {
574
- const datetime = formatDatetimeForFilename(/* @__PURE__ */ new Date());
575
- const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
576
- const url = URL.createObjectURL(blob);
577
- const a = document.createElement("a");
578
- a.href = url;
579
- a.download = `${basename}-${datetime}.json`;
580
- a.click();
581
- URL.revokeObjectURL(url);
582
- }
583
- const initialState = {
584
- current: {
585
- oidcRoles: [],
586
- users: [],
587
- useWhitelist: false,
588
- enforceOIDC: false
589
- },
590
- initial: {
591
- oidcRoles: [],
592
- users: [],
593
- useWhitelist: false,
594
- enforceOIDC: false
595
- },
596
- roles: [],
597
- enforceOIDCConfig: null,
598
- auditLogEnabled: true,
599
- loading: false,
600
- showSuccess: false,
601
- showError: false
602
- };
603
- function reducer(state, action) {
604
- switch (action.type) {
605
- case "hydrate/roles":
606
- return { ...state, roles: action.roles };
607
- case "hydrate/oidcRoles": {
608
- const snapshot = { oidcRoles: action.oidcRoles };
609
- return {
610
- ...state,
611
- current: { ...state.current, ...snapshot },
612
- initial: { ...state.initial, ...snapshot }
613
- };
614
- }
615
- case "hydrate/whitelist": {
616
- const snapshot = {
617
- oidcRoles: action.snapshot.oidcRoles ?? state.current.oidcRoles,
618
- users: action.snapshot.users ?? state.current.users,
619
- useWhitelist: action.snapshot.useWhitelist ?? state.current.useWhitelist,
620
- enforceOIDC: action.snapshot.enforceOIDC ?? state.current.enforceOIDC
621
- };
622
- return {
623
- ...state,
624
- current: snapshot,
625
- initial: structuredClone(snapshot),
626
- enforceOIDCConfig: action.enforceOIDCConfig,
627
- auditLogEnabled: action.auditLogEnabled
628
- };
629
- }
630
- case "patch/oidcRole":
631
- return {
632
- ...state,
633
- current: {
634
- ...state.current,
635
- oidcRoles: state.current.oidcRoles.map(
636
- (role) => role.oauth_type === action.oidcId ? { ...role, role: action.values } : role
637
- )
638
- }
639
- };
640
- case "user/add":
641
- return {
642
- ...state,
643
- current: {
644
- ...state.current,
645
- users: [
646
- ...state.current.users,
647
- { email: action.email, createdAt: (/* @__PURE__ */ new Date()).toISOString() }
648
- ]
649
- }
650
- };
651
- case "user/delete": {
652
- const updatedUsers = state.current.users.filter((u) => u.email !== action.email);
653
- const updated = { users: updatedUsers };
654
- let enforceOIDC = state.current.enforceOIDC;
655
- if (state.current.useWhitelist && updatedUsers.length === 0) {
656
- enforceOIDC = false;
657
- }
658
- return {
659
- ...state,
660
- current: { ...state.current, ...updated, enforceOIDC }
661
- };
662
- }
663
- case "users/clear": {
664
- const updated = { users: [] };
665
- let enforceOIDC = state.current.enforceOIDC;
666
- if (state.current.useWhitelist) {
667
- enforceOIDC = false;
668
- }
669
- return {
670
- ...state,
671
- current: { ...state.current, ...updated, enforceOIDC }
672
- };
673
- }
674
- case "users/replace":
675
- return {
676
- ...state,
677
- current: { ...state.current, users: action.users }
678
- };
679
- case "toggle/useWhitelist": {
680
- const useWhitelist = action.value;
681
- let enforceOIDC = state.current.enforceOIDC;
682
- if (useWhitelist && state.current.users.length === 0) {
683
- enforceOIDC = false;
684
- }
685
- return {
686
- ...state,
687
- current: { ...state.current, useWhitelist, enforceOIDC }
688
- };
689
- }
690
- case "toggle/enforceOIDC":
691
- return {
692
- ...state,
693
- current: { ...state.current, enforceOIDC: action.value }
694
- };
695
- case "commit":
696
- return {
697
- ...state,
698
- initial: structuredClone(
699
- action.snapshot ? { ...state.current, ...action.snapshot } : state.current
700
- )
701
- };
702
- case "loading":
703
- return { ...state, loading: action.value };
704
- case "flash/success":
705
- return { ...state, showSuccess: true };
706
- case "flash/error":
707
- return { ...state, showError: true };
708
- case "flash/clear":
709
- return {
710
- ...state,
711
- showSuccess: action.kind === "success" ? false : state.showSuccess,
712
- showError: action.kind === "error" ? false : state.showError
713
- };
714
- default:
715
- return state;
716
- }
717
- }
718
- function isDirtyPrimitive(a, b) {
719
- return a !== b;
720
- }
721
- function isDirtyArray(a, b) {
722
- return JSON.stringify(a) !== JSON.stringify(b);
723
- }
724
- function useOidcSettings() {
725
- const { get, put, post } = useFetchClient();
726
- const [state, dispatch] = useReducer(reducer, initialState);
727
- useEffect(() => {
728
- get(`/strapi-plugin-oidc/oidc-roles`).then((response) => {
729
- dispatch({ type: "hydrate/oidcRoles", oidcRoles: response.data });
730
- });
731
- get(`/admin/roles`).then((response) => {
732
- dispatch({ type: "hydrate/roles", roles: response.data.data });
733
- });
734
- get("/strapi-plugin-oidc/whitelist").then((response) => {
735
- const data = response.data;
736
- dispatch({
737
- type: "hydrate/whitelist",
738
- snapshot: {
739
- users: data.whitelistUsers,
740
- useWhitelist: data.useWhitelist,
741
- enforceOIDC: data.enforceOIDC
742
- },
743
- enforceOIDCConfig: data.enforceOIDCConfig ?? null,
744
- auditLogEnabled: data.auditLogEnabled ?? true
745
- });
746
- });
747
- }, [get]);
748
- const onChangeRole = useCallback((values, oidcId) => {
749
- dispatch({ type: "patch/oidcRole", oidcId, values });
750
- }, []);
751
- const onRegisterWhitelist = useCallback((email) => {
752
- dispatch({ type: "user/add", email });
753
- }, []);
754
- const onDeleteWhitelist = useCallback((email) => {
755
- dispatch({ type: "user/delete", email });
756
- }, []);
757
- const onDeleteAll = useCallback(() => {
758
- dispatch({ type: "users/clear" });
759
- }, []);
760
- const onImport = useCallback(
761
- async (emails) => {
762
- const response = await post("/strapi-plugin-oidc/whitelist/import", {
763
- users: emails.map((e) => ({ email: e }))
764
- });
765
- const refreshed = await get("/strapi-plugin-oidc/whitelist");
766
- dispatch({ type: "users/replace", users: refreshed.data.whitelistUsers });
767
- dispatch({ type: "commit" });
768
- return response.data.importedCount;
769
- },
770
- [post, get]
771
- );
772
- const onExport = useCallback(async () => {
773
- const response = await get("/strapi-plugin-oidc/whitelist/export");
774
- const data = response.data;
775
- downloadJson("strapi-oidc-whitelist", data);
776
- }, [get]);
777
- const onToggleWhitelist = useCallback((e) => {
778
- dispatch({ type: "toggle/useWhitelist", value: e.target.checked });
779
- }, []);
780
- const onToggleEnforce = useCallback((e) => {
781
- dispatch({ type: "toggle/enforceOIDC", value: e.target.checked });
782
- }, []);
783
- const isDirty = useMemo(
784
- () => 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),
785
- [state.current, state.initial]
786
- );
787
- const onSaveAll = useCallback(async () => {
788
- dispatch({ type: "loading", value: true });
789
- try {
790
- await Promise.all([
791
- put("/strapi-plugin-oidc/oidc-roles", {
792
- roles: state.current.oidcRoles.map((role) => ({
793
- oauth_type: role.oauth_type,
794
- role: role.role
795
- }))
796
- }),
797
- put("/strapi-plugin-oidc/whitelist/sync", {
798
- users: state.current.users.map((u) => ({ email: u.email }))
799
- }),
800
- put("/strapi-plugin-oidc/whitelist/settings", {
801
- useWhitelist: state.current.useWhitelist,
802
- enforceOIDC: state.current.enforceOIDC
803
- })
804
- ]);
805
- dispatch({ type: "commit" });
806
- const getResponse = await get("/strapi-plugin-oidc/whitelist");
807
- const data = getResponse.data;
808
- dispatch({
809
- type: "hydrate/whitelist",
810
- snapshot: {
811
- users: data.whitelistUsers,
812
- useWhitelist: data.useWhitelist,
813
- enforceOIDC: data.enforceOIDC
814
- },
815
- enforceOIDCConfig: data.enforceOIDCConfig ?? null,
816
- auditLogEnabled: data.auditLogEnabled ?? true
817
- });
818
- dispatch({ type: "flash/success" });
819
- setTimeout(() => dispatch({ type: "flash/clear", kind: "success" }), 3e3);
820
- } catch (e) {
821
- console.error(e);
822
- dispatch({ type: "flash/error" });
823
- setTimeout(() => dispatch({ type: "flash/clear", kind: "error" }), 3e3);
824
- } finally {
825
- dispatch({ type: "loading", value: false });
826
- }
827
- }, [put, get, state.current]);
828
- return {
829
- state: {
830
- loading: state.loading,
831
- showSuccess: state.showSuccess,
832
- showError: state.showError,
833
- oidcRoles: state.current.oidcRoles,
834
- roles: state.roles,
835
- useWhitelist: state.current.useWhitelist,
836
- enforceOIDC: state.current.enforceOIDC,
837
- enforceOIDCConfig: state.enforceOIDCConfig,
838
- initialEnforceOIDC: state.initial.enforceOIDC,
839
- users: state.current.users,
840
- isDirty,
841
- auditLogEnabled: state.auditLogEnabled
842
- },
843
- actions: {
844
- setSuccess: (val) => dispatch({ type: val ? "flash/success" : "flash/clear", kind: "success" }),
845
- setError: (val) => dispatch({ type: val ? "flash/error" : "flash/clear", kind: "error" }),
846
- onChangeRole,
847
- onRegisterWhitelist,
848
- onDeleteWhitelist,
849
- onDeleteAll,
850
- onImport,
851
- onExport,
852
- onToggleWhitelist,
853
- onToggleEnforce,
854
- onSaveAll
855
- }
856
- };
857
- }
858
- function HomePage() {
859
- const { formatMessage } = useIntl();
860
- const { state, actions } = useOidcSettings();
861
- const blocker = useBlocker(state.isDirty);
862
- return /* @__PURE__ */ jsxs(Page.Protect, { permissions: [{ action: "plugin::strapi-plugin-oidc.read", subject: null }], children: [
863
- /* @__PURE__ */ jsx(
864
- Layouts.Header,
865
- {
866
- title: formatMessage(getTrad("page.title.oidc")),
867
- subtitle: formatMessage(getTrad("page.title"))
868
- }
869
- ),
870
- state.showSuccess && /* @__PURE__ */ jsx(SuccessAlertMessage, { onClose: () => actions.setSuccess(false) }),
871
- state.showError && /* @__PURE__ */ jsx(ErrorAlertMessage, { onClose: () => actions.setError(false) }),
872
- /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 6, children: [
873
- /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "filterShadow", padding: 6, children: [
874
- /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: formatMessage(getTrad("roles.title")) }) }),
875
- /* @__PURE__ */ jsx(
876
- Role,
877
- {
878
- roles: state.roles,
879
- oidcRoles: state.oidcRoles,
880
- onChangeRole: actions.onChangeRole
881
- }
882
- )
883
- ] }),
884
- /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "filterShadow", padding: 6, children: [
885
- /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", paddingBottom: 4, children: [
886
- /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: formatMessage(getTrad("whitelist.title")) }),
887
- /* @__PURE__ */ jsx(
888
- CustomSwitch,
889
- {
890
- checked: state.useWhitelist,
891
- onChange: actions.onToggleWhitelist,
892
- label: state.useWhitelist ? formatMessage(getTrad("whitelist.toggle.enabled")) : formatMessage(getTrad("whitelist.toggle.disabled"))
893
- }
894
- )
895
- ] }),
896
- /* @__PURE__ */ jsx(
897
- Whitelist,
898
- {
899
- loading: state.loading,
900
- users: state.users,
901
- useWhitelist: state.useWhitelist,
902
- onSave: actions.onRegisterWhitelist,
903
- onDelete: actions.onDeleteWhitelist,
904
- onDeleteAll: actions.onDeleteAll,
905
- onImport: actions.onImport,
906
- onExport: actions.onExport
907
- }
908
- )
909
- ] }),
910
- /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "filterShadow", padding: 6, children: [
911
- /* @__PURE__ */ jsx(Box, { paddingBottom: 6, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: formatMessage(getTrad("login.settings.title")) }) }),
912
- /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
913
- /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 3, wrap: "wrap", children: [
914
- /* @__PURE__ */ jsx(Typography, { variant: "omega", style: { minWidth: "280px" }, children: formatMessage(getTrad("enforce.title")) }),
915
- /* @__PURE__ */ jsx(Box, { minWidth: "160px", children: /* @__PURE__ */ jsx(
916
- CustomSwitch,
917
- {
918
- checked: state.enforceOIDC,
919
- onChange: actions.onToggleEnforce,
920
- disabled: state.enforceOIDCConfig !== null || state.useWhitelist && state.users.length === 0,
921
- label: state.enforceOIDC ? formatMessage(getTrad("enforce.toggle.enabled")) : formatMessage(getTrad("enforce.toggle.disabled"))
922
- }
923
- ) })
924
- ] }),
925
- state.enforceOIDCConfig !== null && /* @__PURE__ */ jsx(Box, { background: "primary100", padding: 3, hasRadius: true, children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
926
- /* @__PURE__ */ jsx(Information, { fill: "primary600" }),
927
- /* @__PURE__ */ jsx(Typography, { textColor: "primary600", children: formatMessage(getTrad("enforce.config.info")) })
928
- ] }) }),
929
- state.enforceOIDCConfig === null && state.enforceOIDC && state.enforceOIDC !== state.initialEnforceOIDC && /* @__PURE__ */ jsx(Box, { background: "danger100", padding: 3, hasRadius: true, children: /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
930
- /* @__PURE__ */ jsx(WarningCircle, { fill: "danger600" }),
931
- /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: formatMessage(getTrad("enforce.warning")) })
932
- ] }) })
933
- ] })
934
- ] }),
935
- /* @__PURE__ */ jsx(Flex, { justifyContent: "flex-end", children: /* @__PURE__ */ jsx(
936
- Button,
937
- {
938
- size: "L",
939
- onClick: actions.onSaveAll,
940
- disabled: !state.isDirty || state.loading,
941
- loading: state.loading,
942
- children: formatMessage(getTrad("page.save"))
943
- }
944
- ) }),
945
- state.auditLogEnabled && /* @__PURE__ */ jsxs(Box, { background: "neutral0", hasRadius: true, shadow: "filterShadow", padding: 6, children: [
946
- /* @__PURE__ */ jsx(Box, { paddingBottom: 4, children: /* @__PURE__ */ jsx(Typography, { variant: "beta", tag: "h2", children: formatMessage(getTrad("auditlog.title")) }) }),
947
- /* @__PURE__ */ jsx(AuditLog, {})
948
- ] })
949
- ] }) }),
950
- /* @__PURE__ */ jsx(Dialog.Root, { open: blocker.state === "blocked", children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
951
- /* @__PURE__ */ jsx(Dialog.Header, { children: formatMessage(getTrad("unsaved.title")) }),
952
- /* @__PURE__ */ jsx(Dialog.Body, { children: formatMessage(getTrad("unsaved.description")) }),
953
- /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
954
- /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: () => blocker.reset?.(), children: formatMessage(getTrad("unsaved.cancel")) }) }),
955
- /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { variant: "danger", onClick: () => blocker.proceed?.(), children: formatMessage(getTrad("unsaved.confirm")) }) })
956
- ] })
957
- ] }) })
958
- ] });
959
- }
960
- const HomePage$1 = memo(HomePage);
961
- function App() {
962
- return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Routes, { children: [
963
- /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(HomePage$1, {}) }),
964
- /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
965
- ] }) });
966
- }
967
- export {
968
- App as default
969
- };