transcriptor-web/bootstrap/ssr/assets/APITokenManager-iZxUx3eK.js
2025-04-05 15:58:14 +02:00

307 lines
12 KiB
JavaScript

import { jsxs, jsx, Fragment } from "react/jsx-runtime";
import { useForm } from "@inertiajs/react";
import classNames from "classnames";
import { useState } from "react";
import { u as useRoute } from "../app.js";
import { A as ActionMessage } from "./ActionMessage-s_mcCJ3s.js";
import { A as ActionSection } from "./Modal-D5yHmTM4.js";
import { C as Checkbox } from "./Checkbox-XR8K_oHK.js";
import { C as ConfirmationModal } from "./ConfirmationModal-BYr2Juy2.js";
import { D as DangerButton } from "./DangerButton-BAZynYAq.js";
import { D as DialogModal } from "./DialogModal-D0pyMzH2.js";
import { F as FormSection } from "./FormSection-DI6t3wFC.js";
import { T as TextInput, I as InputError } from "./TextInput-CMJy2hIv.js";
import { I as InputLabel } from "./InputLabel-DhqxoV6M.js";
import { P as PrimaryButton } from "./PrimaryButton-C2B8UWiv.js";
import { S as SecondaryButton } from "./SecondaryButton-G68tKuYQ.js";
import { S as SectionBorder } from "./SectionBorder-Dh4nHf2e.js";
import { u as useTypedPage } from "./useTypedPage-Do3SqtsL.js";
import "axios";
import "lodash";
import "react-dom/client";
import "@headlessui/react";
import "./SectionTitle-DnuUNpyS.js";
import "react-dom";
function APITokenManager({
tokens,
availablePermissions,
defaultPermissions
}) {
var _a, _b, _c;
const route = useRoute();
const createApiTokenForm = useForm({
name: "",
permissions: defaultPermissions
});
const updateApiTokenForm = useForm({
permissions: []
});
const deleteApiTokenForm = useForm({});
const [displayingToken, setDisplayingToken] = useState(false);
const [managingPermissionsFor, setManagingPermissionsFor] = useState(null);
const [apiTokenBeingDeleted, setApiTokenBeingDeleted] = useState(null);
const page = useTypedPage();
function createApiToken() {
createApiTokenForm.post(route("api-tokens.store"), {
preserveScroll: true,
onSuccess: () => {
setDisplayingToken(true);
createApiTokenForm.reset();
}
});
}
function manageApiTokenPermissions(token) {
updateApiTokenForm.setData("permissions", token.abilities);
setManagingPermissionsFor(token);
}
function updateApiToken() {
if (!managingPermissionsFor) {
return;
}
updateApiTokenForm.put(
route("api-tokens.update", [managingPermissionsFor]),
{
preserveScroll: true,
preserveState: true,
onSuccess: () => setManagingPermissionsFor(null)
}
);
}
function confirmApiTokenDeletion(token) {
setApiTokenBeingDeleted(token);
}
function deleteApiToken() {
if (!apiTokenBeingDeleted) {
return;
}
deleteApiTokenForm.delete(
route("api-tokens.destroy", [apiTokenBeingDeleted]),
{
preserveScroll: true,
preserveState: true,
onSuccess: () => setApiTokenBeingDeleted(null)
}
);
}
return /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsxs(
FormSection,
{
onSubmit: createApiToken,
title: "Create API Token",
description: "API tokens allow third-party services to authenticate with our application on your behalf.",
renderActions: () => /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
ActionMessage,
{
on: createApiTokenForm.recentlySuccessful,
className: "mr-3",
children: "Created."
}
),
/* @__PURE__ */ jsx(
PrimaryButton,
{
className: classNames({
"opacity-25": createApiTokenForm.processing
}),
disabled: createApiTokenForm.processing,
children: "Create"
}
)
] }),
children: [
/* @__PURE__ */ jsxs("div", { className: "col-span-6 sm:col-span-4", children: [
/* @__PURE__ */ jsx(InputLabel, { htmlFor: "name", children: "Name" }),
/* @__PURE__ */ jsx(
TextInput,
{
id: "name",
type: "text",
className: "mt-1 block w-full",
value: createApiTokenForm.data.name,
onChange: (e) => createApiTokenForm.setData("name", e.currentTarget.value),
autoFocus: true
}
),
/* @__PURE__ */ jsx(
InputError,
{
message: createApiTokenForm.errors.name,
className: "mt-2"
}
)
] }),
availablePermissions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "col-span-6", children: [
/* @__PURE__ */ jsx(InputLabel, { htmlFor: "permissions", children: "Permissions" }),
/* @__PURE__ */ jsx("div", { className: "mt-2 grid grid-cols-1 md:grid-cols-2 gap-4", children: availablePermissions.map((permission) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("label", { className: "flex items-center", children: [
/* @__PURE__ */ jsx(
Checkbox,
{
value: permission,
checked: createApiTokenForm.data.permissions.includes(
permission
),
onChange: (e) => {
if (createApiTokenForm.data.permissions.includes(
e.currentTarget.value
)) {
createApiTokenForm.setData(
"permissions",
createApiTokenForm.data.permissions.filter(
(p) => p !== e.currentTarget.value
)
);
} else {
createApiTokenForm.setData("permissions", [
e.currentTarget.value,
...createApiTokenForm.data.permissions
]);
}
}
}
),
/* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-gray-600 dark:text-gray-400", children: permission })
] }) }, permission)) })
] })
]
}
),
tokens.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx(SectionBorder, {}),
/* @__PURE__ */ jsx("div", { className: "mt-10 sm:mt-0", children: /* @__PURE__ */ jsx(
ActionSection,
{
title: "Manage API Tokens",
description: "You may delete any of your existing tokens if they are no longer needed.",
children: /* @__PURE__ */ jsx("div", { className: "space-y-6", children: tokens.map((token) => /* @__PURE__ */ jsxs(
"div",
{
className: "flex items-center justify-between",
children: [
/* @__PURE__ */ jsx("div", { className: "break-all dark:text-white", children: token.name }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
token.last_used_ago && /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-400", children: [
"Last used ",
token.last_used_ago
] }),
availablePermissions.length > 0 ? /* @__PURE__ */ jsx(
PrimaryButton,
{
className: "cursor-pointer ml-6 text-sm text-gray-400 underline",
onClick: () => manageApiTokenPermissions(token),
children: "Permissions"
}
) : null,
/* @__PURE__ */ jsx(
PrimaryButton,
{
className: "cursor-pointer ml-6 text-sm text-red-500",
onClick: () => confirmApiTokenDeletion(token),
children: "Delete"
}
)
] })
]
},
token.id
)) })
}
) })
] }) : null,
/* @__PURE__ */ jsxs(
DialogModal,
{
isOpen: displayingToken,
onClose: () => setDisplayingToken(false),
children: [
/* @__PURE__ */ jsxs(DialogModal.Content, { title: "API Token", children: [
/* @__PURE__ */ jsx("div", { children: "Please copy your new API token. For your security, it won't be shown again." }),
/* @__PURE__ */ jsx("div", { className: "mt-4 bg-gray-100 dark:bg-gray-900 px-4 py-2 rounded-sm font-mono text-sm text-gray-500", children: (_c = (_b = (_a = page.props) == null ? void 0 : _a.jetstream) == null ? void 0 : _b.flash) == null ? void 0 : _c.token })
] }),
/* @__PURE__ */ jsx(DialogModal.Footer, { children: /* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setDisplayingToken(false), children: "Close" }) })
]
}
),
/* @__PURE__ */ jsxs(
DialogModal,
{
isOpen: !!managingPermissionsFor,
onClose: () => setManagingPermissionsFor(null),
children: [
/* @__PURE__ */ jsx(DialogModal.Content, { title: "API Token Permissions", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: availablePermissions.map((permission) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("label", { className: "flex items-center", children: [
/* @__PURE__ */ jsx(
Checkbox,
{
value: permission,
checked: updateApiTokenForm.data.permissions.includes(
permission
),
onChange: (e) => {
if (updateApiTokenForm.data.permissions.includes(
e.currentTarget.value
)) {
updateApiTokenForm.setData(
"permissions",
updateApiTokenForm.data.permissions.filter(
(p) => p !== e.currentTarget.value
)
);
} else {
updateApiTokenForm.setData("permissions", [
e.currentTarget.value,
...updateApiTokenForm.data.permissions
]);
}
}
}
),
/* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-gray-600 dark:text-gray-400", children: permission })
] }) }, permission)) }) }),
/* @__PURE__ */ jsxs(DialogModal.Footer, { children: [
/* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setManagingPermissionsFor(null), children: "Cancel" }),
/* @__PURE__ */ jsx(
PrimaryButton,
{
onClick: updateApiToken,
className: classNames("ml-2", {
"opacity-25": updateApiTokenForm.processing
}),
disabled: updateApiTokenForm.processing,
children: "Save"
}
)
] })
]
}
),
/* @__PURE__ */ jsxs(
ConfirmationModal,
{
isOpen: !!apiTokenBeingDeleted,
onClose: () => setApiTokenBeingDeleted(null),
children: [
/* @__PURE__ */ jsx(ConfirmationModal.Content, { title: "Delete API Token", children: "Are you sure you would like to delete this API token?" }),
/* @__PURE__ */ jsxs(ConfirmationModal.Footer, { children: [
/* @__PURE__ */ jsx(SecondaryButton, { onClick: () => setApiTokenBeingDeleted(null), children: "Cancel" }),
/* @__PURE__ */ jsx(
DangerButton,
{
onClick: deleteApiToken,
className: classNames("ml-2", {
"opacity-25": deleteApiTokenForm.processing
}),
disabled: deleteApiTokenForm.processing,
children: "Delete"
}
)
] })
]
}
)
] });
}
export {
APITokenManager as default
};