382 lines
15 KiB
JavaScript
Executable File
382 lines
15 KiB
JavaScript
Executable File
import { d as defineComponent, r as ref, e as createBlock, g as openBlock, s as N8nCard, n as normalizeClass, w as withCtx, j as createBaseVNode, i as createVNode, ed as N8nActionToggle, h as createElementBlock, f as createCommentVNode, k as createTextVNode, t as toDisplayString, p as N8nText, c as useI18n, bd as DateTime, _ as _export_sfc, v as useSettingsStore, Q as useUIStore, bb as useCloudPlanStore, a as useToast, ax as useDocumentTitle, aA as usePageRedirectionHelper, es as useApiKeysStore, et as storeToRefs, at as useRootStore, o as onMounted, eu as DOCS_DOMAIN, a8 as resolveComponent, l as unref, m as N8nHeading, F as Fragment, A as renderList, C as N8nLink, q as N8nButton, dY as N8nActionBox, am as useMessage, an as MODAL_CONFIRM, al as useTelemetry, ev as API_KEY_CREATE_OR_EDIT_MODAL_KEY } from "./index--OJ5nhDf.js";
|
|
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
__name: "ApiKeyCard",
|
|
props: {
|
|
apiKey: {}
|
|
},
|
|
emits: ["edit", "delete"],
|
|
setup(__props, { emit: __emit }) {
|
|
const API_KEY_ITEM_ACTIONS = {
|
|
EDIT: "edit",
|
|
DELETE: "delete"
|
|
};
|
|
const ACTION_LIST = [
|
|
{
|
|
label: "Edit",
|
|
value: API_KEY_ITEM_ACTIONS.EDIT
|
|
},
|
|
{
|
|
label: "Delete",
|
|
value: API_KEY_ITEM_ACTIONS.DELETE
|
|
}
|
|
];
|
|
const i18n = useI18n();
|
|
const cardActions2 = ref(null);
|
|
const props = __props;
|
|
const emit = __emit;
|
|
async function onAction(action) {
|
|
if (action === API_KEY_ITEM_ACTIONS.EDIT) {
|
|
emit("edit", props.apiKey.id);
|
|
} else if (action === API_KEY_ITEM_ACTIONS.DELETE) {
|
|
emit("delete", props.apiKey.id);
|
|
}
|
|
}
|
|
const hasApiKeyExpired = (apiKey) => {
|
|
if (!apiKey.expiresAt) return false;
|
|
return apiKey.expiresAt <= Date.now() / 1e3;
|
|
};
|
|
const getExpirationTime = (apiKey) => {
|
|
if (!apiKey.expiresAt) return i18n.baseText("settings.api.neverExpires");
|
|
if (hasApiKeyExpired(apiKey)) return i18n.baseText("settings.api.expired");
|
|
const time = DateTime.fromSeconds(apiKey.expiresAt).toFormat("ccc, MMM d yyyy");
|
|
return i18n.baseText("settings.api.expirationTime", { interpolate: { time } });
|
|
};
|
|
return (_ctx, _cache) => {
|
|
const _component_n8n_text = N8nText;
|
|
const _component_N8nActionToggle = N8nActionToggle;
|
|
const _component_n8n_card = N8nCard;
|
|
return openBlock(), createBlock(_component_n8n_card, {
|
|
class: normalizeClass(_ctx.$style.cardLink),
|
|
"data-test-id": "api-key-card",
|
|
onClick: _cache[0] || (_cache[0] = ($event) => onAction("edit"))
|
|
}, {
|
|
header: withCtx(() => [
|
|
createBaseVNode("div", null, [
|
|
createVNode(_component_n8n_text, {
|
|
tag: "h2",
|
|
bold: "",
|
|
class: normalizeClass(_ctx.$style.cardHeading)
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(_ctx.apiKey.label), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass([_ctx.$style.cardDescription])
|
|
}, [
|
|
createVNode(_component_n8n_text, {
|
|
color: !hasApiKeyExpired(_ctx.apiKey) ? "text-light" : "warning",
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createBaseVNode("span", null, toDisplayString(getExpirationTime(_ctx.apiKey)), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["color"])
|
|
], 2)
|
|
]),
|
|
_ctx.apiKey.apiKey.includes("*") ? (openBlock(), createElementBlock("div", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.$style.cardApiKey)
|
|
}, [
|
|
createVNode(_component_n8n_text, {
|
|
color: "text-light",
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(_ctx.apiKey.apiKey), 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2)) : createCommentVNode("", true)
|
|
]),
|
|
append: withCtx(() => [
|
|
createBaseVNode("div", {
|
|
ref_key: "cardActions",
|
|
ref: cardActions2,
|
|
class: normalizeClass(_ctx.$style.cardActions)
|
|
}, [
|
|
createVNode(_component_N8nActionToggle, {
|
|
actions: ACTION_LIST,
|
|
theme: "dark",
|
|
onAction
|
|
})
|
|
], 2)
|
|
]),
|
|
_: 1
|
|
}, 8, ["class"]);
|
|
};
|
|
}
|
|
});
|
|
const cardLink = "_cardLink_ni149_123";
|
|
const cardHeading = "_cardHeading_ni149_133";
|
|
const cardDescription = "_cardDescription_ni149_140";
|
|
const cardActions = "_cardActions_ni149_147";
|
|
const cardApiKey = "_cardApiKey_ni149_156";
|
|
const style0$1 = {
|
|
cardLink,
|
|
cardHeading,
|
|
cardDescription,
|
|
cardActions,
|
|
cardApiKey
|
|
};
|
|
const cssModules$1 = {
|
|
"$style": style0$1
|
|
};
|
|
const __unplugin_components_2 = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules$1]]);
|
|
const _hoisted_1 = { style: { fontSize: "var(--font-size-s)", color: "var(--color-text-light)" } };
|
|
const _hoisted_2 = ["textContent"];
|
|
const _hoisted_3 = ["textContent"];
|
|
const _hoisted_4 = { class: "mt-m text-right" };
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
__name: "SettingsApiView",
|
|
setup(__props) {
|
|
const settingsStore = useSettingsStore();
|
|
const uiStore = useUIStore();
|
|
const cloudPlanStore = useCloudPlanStore();
|
|
const { showError, showMessage } = useToast();
|
|
const { confirm } = useMessage();
|
|
const documentTitle = useDocumentTitle();
|
|
const i18n = useI18n();
|
|
const { goToUpgrade } = usePageRedirectionHelper();
|
|
const telemetry = useTelemetry();
|
|
const loading = ref(false);
|
|
const apiKeysStore = useApiKeysStore();
|
|
const { getAndCacheApiKeys, deleteApiKey, getApiKeyAvailableScopes } = apiKeysStore;
|
|
const { apiKeysSortByCreationDate } = storeToRefs(apiKeysStore);
|
|
const { isSwaggerUIEnabled, publicApiPath, publicApiLatestVersion } = settingsStore;
|
|
const { baseUrl } = useRootStore();
|
|
const { isPublicApiEnabled } = settingsStore;
|
|
const apiDocsURL = ref("");
|
|
const onCreateApiKey = async () => {
|
|
telemetry.track("User clicked create API key button");
|
|
uiStore.openModalWithData({
|
|
name: API_KEY_CREATE_OR_EDIT_MODAL_KEY,
|
|
data: { mode: "new" }
|
|
});
|
|
};
|
|
onMounted(async () => {
|
|
documentTitle.set(i18n.baseText("settings.api"));
|
|
apiDocsURL.value = isSwaggerUIEnabled ? `${baseUrl}${publicApiPath}/v${publicApiLatestVersion}/docs` : `https://${DOCS_DOMAIN}/api/api-reference/`;
|
|
if (!isPublicApiEnabled) return;
|
|
await getApiKeysAndScopes();
|
|
});
|
|
function onUpgrade() {
|
|
void goToUpgrade("settings-n8n-api", "upgrade-api", "redirect");
|
|
}
|
|
async function getApiKeysAndScopes() {
|
|
try {
|
|
loading.value = true;
|
|
await Promise.all([getAndCacheApiKeys(), getApiKeyAvailableScopes()]);
|
|
} catch (error) {
|
|
showError(error, i18n.baseText("settings.api.view.error"));
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
async function onDelete(id) {
|
|
const confirmed = await confirm(
|
|
i18n.baseText("settings.api.delete.description"),
|
|
i18n.baseText("settings.api.delete.title"),
|
|
{
|
|
confirmButtonText: i18n.baseText("settings.api.delete.button"),
|
|
cancelButtonText: i18n.baseText("generic.cancel")
|
|
}
|
|
);
|
|
if (confirmed === MODAL_CONFIRM) {
|
|
try {
|
|
await deleteApiKey(id);
|
|
showMessage({
|
|
title: i18n.baseText("settings.api.delete.toast"),
|
|
type: "success"
|
|
});
|
|
} catch (e) {
|
|
showError(e, i18n.baseText("settings.api.delete.error"));
|
|
} finally {
|
|
telemetry.track("User clicked delete API key button");
|
|
}
|
|
}
|
|
}
|
|
function onEdit(id) {
|
|
uiStore.openModalWithData({
|
|
name: API_KEY_CREATE_OR_EDIT_MODAL_KEY,
|
|
data: { mode: "edit", activeId: id }
|
|
});
|
|
}
|
|
return (_ctx, _cache) => {
|
|
const _component_n8n_heading = N8nHeading;
|
|
const _component_I18nT = resolveComponent("I18nT");
|
|
const _component_n8n_text = N8nText;
|
|
const _component_ApiKeyCard = __unplugin_components_2;
|
|
const _component_el_col = resolveComponent("el-col");
|
|
const _component_el_row = resolveComponent("el-row");
|
|
const _component_N8nText = N8nText;
|
|
const _component_n8n_link = N8nLink;
|
|
const _component_n8n_button = N8nButton;
|
|
const _component_n8n_action_box = N8nActionBox;
|
|
return openBlock(), createElementBlock("div", {
|
|
class: normalizeClass(_ctx.$style.container)
|
|
}, [
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.header)
|
|
}, [
|
|
createVNode(_component_n8n_heading, { size: "2xlarge" }, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.api")) + " ", 1),
|
|
createBaseVNode("span", _hoisted_1, " (" + toDisplayString(unref(i18n).baseText("generic.beta")) + ") ", 1)
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2),
|
|
unref(isPublicApiEnabled) && unref(apiKeysSortByCreationDate).length ? (openBlock(), createElementBlock("p", {
|
|
key: 0,
|
|
class: normalizeClass(_ctx.$style.topHint)
|
|
}, [
|
|
createVNode(_component_n8n_text, null, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_I18nT, {
|
|
keypath: "settings.api.view.info",
|
|
tag: "span",
|
|
scope: "global"
|
|
}, {
|
|
apiAction: withCtx(() => [
|
|
createBaseVNode("a", {
|
|
"data-test-id": "api-docs-link",
|
|
href: "https://docs.n8n.io/api",
|
|
target: "_blank",
|
|
textContent: toDisplayString(unref(i18n).baseText("settings.api.view.info.api"))
|
|
}, null, 8, _hoisted_2)
|
|
]),
|
|
webhookAction: withCtx(() => [
|
|
createBaseVNode("a", {
|
|
"data-test-id": "webhook-docs-link",
|
|
href: "https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/",
|
|
target: "_blank",
|
|
textContent: toDisplayString(unref(i18n).baseText("settings.api.view.info.webhook"))
|
|
}, null, 8, _hoisted_3)
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
_: 1
|
|
})
|
|
], 2)) : createCommentVNode("", true),
|
|
createBaseVNode("div", {
|
|
class: normalizeClass(_ctx.$style.apiKeysContainer)
|
|
}, [
|
|
unref(apiKeysSortByCreationDate).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(apiKeysSortByCreationDate), (apiKey, index) => {
|
|
return openBlock(), createBlock(_component_el_row, {
|
|
key: apiKey.id,
|
|
gutter: 10,
|
|
class: normalizeClass([{ [_ctx.$style.destinationItem]: index !== unref(apiKeysSortByCreationDate).length - 1 }])
|
|
}, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_el_col, null, {
|
|
default: withCtx(() => [
|
|
createVNode(_component_ApiKeyCard, {
|
|
"api-key": apiKey,
|
|
onDelete,
|
|
onEdit
|
|
}, null, 8, ["api-key"])
|
|
]),
|
|
_: 2
|
|
}, 1024)
|
|
]),
|
|
_: 2
|
|
}, 1032, ["class"]);
|
|
}), 128)) : createCommentVNode("", true)
|
|
], 2),
|
|
unref(isPublicApiEnabled) && unref(apiKeysSortByCreationDate).length ? (openBlock(), createElementBlock("div", {
|
|
key: 1,
|
|
class: normalizeClass(_ctx.$style.BottomHint)
|
|
}, [
|
|
createVNode(_component_N8nText, {
|
|
size: "small",
|
|
color: "text-light"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText(
|
|
`settings.api.view.${unref(settingsStore).isSwaggerUIEnabled ? "tryapi" : "more-details"}`
|
|
)), 1)
|
|
]),
|
|
_: 1
|
|
}),
|
|
_cache[0] || (_cache[0] = createTextVNode(" " + toDisplayString(" ") + " ")),
|
|
unref(isSwaggerUIEnabled) ? (openBlock(), createBlock(_component_n8n_link, {
|
|
key: 0,
|
|
"data-test-id": "api-playground-link",
|
|
to: apiDocsURL.value,
|
|
"new-window": true,
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.api.view.apiPlayground")), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["to"])) : (openBlock(), createBlock(_component_n8n_link, {
|
|
key: 1,
|
|
"data-test-id": "api-endpoint-docs-link",
|
|
to: apiDocsURL.value,
|
|
"new-window": true,
|
|
size: "small"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText(`settings.api.view.external-docs`)), 1)
|
|
]),
|
|
_: 1
|
|
}, 8, ["to"]))
|
|
], 2)) : createCommentVNode("", true),
|
|
createBaseVNode("div", _hoisted_4, [
|
|
unref(isPublicApiEnabled) && unref(apiKeysSortByCreationDate).length ? (openBlock(), createBlock(_component_n8n_button, {
|
|
key: 0,
|
|
size: "large",
|
|
onClick: onCreateApiKey
|
|
}, {
|
|
default: withCtx(() => [
|
|
createTextVNode(toDisplayString(unref(i18n).baseText("settings.api.create.button")), 1)
|
|
]),
|
|
_: 1
|
|
})) : createCommentVNode("", true)
|
|
]),
|
|
!unref(isPublicApiEnabled) && unref(cloudPlanStore).userIsTrialing ? (openBlock(), createBlock(_component_n8n_action_box, {
|
|
key: 2,
|
|
"data-test-id": "public-api-upgrade-cta",
|
|
heading: unref(i18n).baseText("settings.api.trial.upgradePlan.title"),
|
|
description: unref(i18n).baseText("settings.api.trial.upgradePlan.description"),
|
|
"button-text": unref(i18n).baseText("settings.api.trial.upgradePlan.cta"),
|
|
"onClick:button": onUpgrade
|
|
}, null, 8, ["heading", "description", "button-text"])) : createCommentVNode("", true),
|
|
unref(isPublicApiEnabled) && !unref(apiKeysSortByCreationDate).length ? (openBlock(), createBlock(_component_n8n_action_box, {
|
|
key: 3,
|
|
"button-text": unref(i18n).baseText(loading.value ? "settings.api.create.button.loading" : "settings.api.create.button"),
|
|
description: unref(i18n).baseText("settings.api.create.description"),
|
|
"onClick:button": onCreateApiKey
|
|
}, null, 8, ["button-text", "description"])) : createCommentVNode("", true)
|
|
], 2);
|
|
};
|
|
}
|
|
});
|
|
const header = "_header_1hiim_123";
|
|
const card = "_card_1hiim_133";
|
|
const destinationItem = "_destinationItem_1hiim_137";
|
|
const topHint = "_topHint_1hiim_148";
|
|
const BottomHint = "_BottomHint_1hiim_159";
|
|
const apiKeysContainer = "_apiKeysContainer_1hiim_164";
|
|
const style0 = {
|
|
header,
|
|
card,
|
|
destinationItem,
|
|
"delete": "_delete_1hiim_141",
|
|
topHint,
|
|
BottomHint,
|
|
apiKeysContainer
|
|
};
|
|
const cssModules = {
|
|
"$style": style0
|
|
};
|
|
const SettingsApiView = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
|
|
export {
|
|
SettingsApiView as default
|
|
};
|