@boxyhq/react-ui
Version:
React UI components from BoxyHQ
1,565 lines • 88.4 kB
JavaScript
import { j as e, c as $, S as i, B as z, s as Ce, C as qe, I as Ve, a as Le } from "./index-CL4_ByuK.js";
import { useState as U, useEffect as ye } from "react";
import { s as Q, I as h, S as Pe, a as ge, C as pe, L as Se, P as He, b as ze, N as Be, c as ke, T as We } from "./index-YXTuPJxR.js";
import { I as Ne } from "./index-Ct6iuh8S.js";
const Je = (t, n) => `boxyhq-${t}-${n}`, Ue = (t, n) => {
let m = "";
return m = Je(t, n), m;
}, Xe = "_container_1p7w3_2", Ge = "_label_1p7w3_8", Ke = "_input_1p7w3_12", Ye = "_button_1p7w3_32", je = {
container: Xe,
label: Ge,
input: Ke,
button: Ye
}, Fe = "sso", ve = {
ssoIdentifier: "",
inputLabel: "Tenant",
placeholder: "",
buttonText: "Sign-in with SSO"
};
function xn(t) {
var A, F, L, T, p, c, r, a;
const [n, m] = U(
() => ve.ssoIdentifier
), [v, k] = U(() => ""), [I, d] = U(() => !1);
function S() {
return !!v;
}
function O() {
return !(n || t.ssoIdentifier) || I;
}
function x() {
return !t.ssoIdentifier;
}
function b() {
return Ue(Fe, "input");
}
function l() {
return Ue(Fe, "span");
}
function o() {
var s, f, N, _;
return {
container: $(
(s = t.classNames) == null ? void 0 : s.container,
je.container
),
label: $((f = t.classNames) == null ? void 0 : f.label, je.label),
input: $((N = t.classNames) == null ? void 0 : N.input, je.input),
button: $(
(_ = t.classNames) == null ? void 0 : _.button,
je.button
)
};
}
function g(s) {
var f;
k(""), m((f = s.currentTarget) == null ? void 0 : f.value);
}
function C(s) {
s.preventDefault(), d(!0);
const f = (n || t.ssoIdentifier) ?? "";
t.onSubmit({
ssoIdentifier: f,
cb: (N) => {
d(!1), N != null && N.error.message && k(N.error.message);
}
});
}
return /* @__PURE__ */ e.jsxs(
"div",
{
style: (A = t.styles) == null ? void 0 : A.container,
className: o().container,
...(F = t.innerProps) == null ? void 0 : F.container,
children: [
x() ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
"label",
{
htmlFor: b(),
style: (L = t.styles) == null ? void 0 : L.label,
className: o().label,
...(T = t.innerProps) == null ? void 0 : T.label,
children: t.inputLabel || ve.inputLabel
}
),
/* @__PURE__ */ e.jsx(
"input",
{
id: b(),
value: n,
placeholder: t.placeholder || ve.placeholder,
onInput: (s) => g(s),
style: (p = t.styles) == null ? void 0 : p.input,
className: o().input,
"aria-invalid": S(),
"aria-describedby": l(),
...(c = t.innerProps) == null ? void 0 : c.input
}
),
S() ? /* @__PURE__ */ e.jsx("span", { id: l(), children: v }) : null
] }) : null,
/* @__PURE__ */ e.jsx(
"button",
{
type: "button",
disabled: O(),
onClick: (s) => C(s),
style: (r = t.styles) == null ? void 0 : r.button,
className: o().button,
...(a = t.innerProps) == null ? void 0 : a.button,
children: t.buttonText || ve.buttonText
}
)
]
}
);
}
const _e = async ({
formObj: t,
isEditView: n,
connectionIsSAML: m,
connectionIsOIDC: v,
callback: k,
url: I
}) => {
const {
rawMetadata: d,
redirectUrl: S,
oidcDiscoveryUrl: O,
oidcMetadata: x,
oidcClientId: b,
oidcClientSecret: l,
metadataUrl: o,
...g
} = t, C = window.btoa(d || ""), A = await Q(I, {
method: n ? "PATCH" : "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
...g,
encodedRawMetadata: m ? C : void 0,
oidcDiscoveryUrl: v ? O : void 0,
oidcMetadata: v ? x : void 0,
oidcClientId: v ? b : void 0,
oidcClientSecret: v ? l : void 0,
redirectUrl: JSON.stringify(S),
// TODO: validate redirect url inside form to have atlease one entry
metadataUrl: m ? o : void 0
})
});
k(A);
}, Te = async ({
url: t,
clientId: n,
clientSecret: m,
callback: v
}) => {
const k = new URLSearchParams({
clientID: n,
clientSecret: m
}), I = await Q(`${t}?${k}`, {
method: "DELETE"
});
v(I);
}, Qe = "_h5_1dluy_3", Ze = "_hint_1dluy_10", et = "_formAction_1dluy_16", tt = "_selectContainer_1dluy_21", q = {
h5: Qe,
hint: Ze,
formAction: et,
selectContainer: tt
}, nt = "_separator_1r6oe_3", at = {
separator: nt
};
function Y(t) {
return /* @__PURE__ */ e.jsx("div", { className: at.separator, children: t.text });
}
const it = "_a_wfblf_2", lt = "_button_wfblf_29", Ae = {
"sr-only": "_sr-only_wfblf_1",
a: it,
button: lt
};
function Oe(t) {
function n() {
return Ae.a + (t.variant ? ` ${Ae[t.variant]}` : "") + (t.cssClass ? ` ${t.cssClass}` : "");
}
return /* @__PURE__ */ e.jsx("a", { target: "_blank", href: t.href, className: n(), children: t.linkText });
}
const st = {
variant: "basic"
}, ct = {
oidcConnection: {
name: "",
label: "",
description: "",
tenant: "",
product: "",
redirectUrl: [""],
defaultRedirectUrl: "",
oidcClientSecret: "",
oidcClientId: "",
oidcDiscoveryUrl: "",
"oidcMetadata.issuer": "",
"oidcMetadata.authorization_endpoint": "",
"oidcMetadata.token_endpoint": "",
"oidcMetadata.jwks_uri": "",
"oidcMetadata.userinfo_endpoint": "",
sortOrder: ""
}
};
function rt(t) {
var F, L, T, p;
const [n, m] = U(
() => ct.oidcConnection
), [v, k] = U(() => !1);
function I(c) {
return {
...n,
...c
};
}
function d(c) {
var f;
const a = c.target.id, s = (f = c.currentTarget) == null ? void 0 : f.value;
m(
I({
[a]: s
})
);
}
function S(c, r) {
m(
I({
[c]: r
})
);
}
function O(c) {
c.preventDefault();
const r = {};
Object.entries(n).map(([a, s]) => {
a.startsWith("oidcMetadata.") ? (r.oidcMetadata === void 0 && (r.oidcMetadata = {}), r.oidcMetadata[a.replace("oidcMetadata.", "")] = s) : a === "sortOrder" ? s !== "" && (r[a] = +s) : r[a] = s;
}), k(!0), _e({
url: t.urls.post,
formObj: r,
connectionIsOIDC: !0,
callback: async (a) => {
k(!1), a && typeof a == "object" && ("error" in a ? typeof t.errorCallback == "function" && t.errorCallback(a.error.message) : typeof t.successCallback == "function" && t.successCallback({
operation: "CREATE",
connection: a,
connectionIsOIDC: !0
}));
}
});
}
function x() {
var c, r, a, s, f, N, _, P, V;
return {
form: $((c = t.classNames) == null ? void 0 : c.form, q.form),
inputField: {
label: (r = t.classNames) == null ? void 0 : r.label,
input: (a = t.classNames) == null ? void 0 : a.input,
container: (s = t.classNames) == null ? void 0 : s.fieldContainer
},
select: {
label: (f = t.classNames) == null ? void 0 : f.label,
select: (N = t.classNames) == null ? void 0 : N.select
},
textarea: {
label: (_ = t.classNames) == null ? void 0 : _.label,
textarea: (P = t.classNames) == null ? void 0 : P.textarea,
container: (V = t.classNames) == null ? void 0 : V.fieldContainer
}
};
}
function b() {
return t.variant || st.variant;
}
function l(c) {
var r;
return !!((r = t.excludeFields) != null && r.includes(
c
));
}
function o(c) {
var r, a;
return c === "tenant" && Array.isArray((r = t.defaults) == null ? void 0 : r.tenant) && t.defaults.tenant.length === 1 ? !0 : !!((a = t.readOnlyFields) != null && a.includes(
c
));
}
function g() {
var c;
return Array.isArray((c = t.defaults) == null ? void 0 : c.tenant) && t.defaults.tenant.length > 1;
}
function C() {
var c, r;
return Array.isArray((c = t.defaults) == null ? void 0 : c.tenant) ? (r = t.defaults) == null ? void 0 : r.tenant.map((a) => ({
value: a,
text: a
})) : [];
}
function A() {
return t.displayHeader !== void 0 ? t.displayHeader : !0;
}
return ye(() => {
if (t.defaults) {
const { forceAuthn: c, tenant: r, ...a } = t.defaults, s = Array.isArray(r) ? r[0] : r;
m(
I({
...a,
tenant: s
})
);
}
}, [t.defaults]), /* @__PURE__ */ e.jsxs("div", { children: [
A() ? /* @__PURE__ */ e.jsx("h5", { className: q.h5, children: "Create SSO Connection" }) : null,
/* @__PURE__ */ e.jsxs(
"form",
{
method: "post",
onSubmit: (c) => O(c),
className: x().form,
children: [
b() === "advanced" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
l("name") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Connection name (Optional)",
id: "name",
placeholder: "MyApp",
classNames: x().inputField,
required: !1,
readOnly: o("name"),
value: n.name,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("label") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Connection label (Optional)",
id: "label",
placeholder: "An internal label to identify the connection",
classNames: x().inputField,
required: !1,
readOnly: o("label"),
value: n.label,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("description") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Description (Optional)",
id: "description",
placeholder: "A short description not more than 100 characters",
classNames: x().inputField,
required: !1,
readOnly: o("description"),
maxLength: 100,
value: n.description,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("tenant") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
g() ? null : /* @__PURE__ */ e.jsx(
h,
{
label: "Tenant",
id: "tenant",
placeholder: "acme.com",
"aria-describedby": "tenant-hint",
classNames: x().inputField,
required: !0,
readOnly: o("tenant"),
value: n.tenant,
handleInputChange: d
}
),
g() ? /* @__PURE__ */ e.jsx("div", { className: q.selectContainer, children: /* @__PURE__ */ e.jsx(
Pe,
{
label: "Tenant",
name: "tenant",
id: "tenant",
options: C(),
classNames: x().select,
selectedValue: n.tenant,
handleChange: d
}
) }) : null,
/* @__PURE__ */ e.jsxs("div", { id: "tenant-hint", className: q.hint, children: [
"Unique identifier for the tenant to which this SSO connection is linked.See",
/* @__PURE__ */ e.jsx(i, { x: 1 }),
/* @__PURE__ */ e.jsx(
Oe,
{
href: "https://boxyhq.com/guides/jackson/configuring-saml-sso#sso-connection-identifier",
linkText: "SSO connection identifier."
}
)
] }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("product") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Product",
id: "product",
placeholder: "demo",
"aria-describedby": "product-hint",
classNames: x().inputField,
required: !0,
readOnly: o("product"),
value: n.product,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx("div", { id: "product-hint", className: q.hint, children: "Identifies the product/app to which this SSO connection is linked." }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("redirectUrl") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
Ne,
{
inputType: "url",
label: "Allowed redirect URLs",
fieldName: "redirectUrl",
currentlist: n.redirectUrl,
handleItemListUpdate: S,
classNames: x().inputField
}
),
/* @__PURE__ */ e.jsx("div", { id: "redirectUrl-hint", className: q.hint, children: "URL(s) to redirect the user to after login. Only the URLs in this list are allowed in the OAuth flow." }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("defaultRedirectUrl") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Default redirect URL",
id: "defaultRedirectUrl",
"aria-describedby": "defaultRedirectUrl-hint",
placeholder: "http://localhost:3366",
type: "url",
classNames: x().inputField,
required: !0,
readOnly: o("defaultRedirectUrl"),
value: n.defaultRedirectUrl,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(
"div",
{
id: "defaultRedirectUrl-hint",
className: q.hint,
children: "URL to redirect the user to after an IdP initiated login."
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
/* @__PURE__ */ e.jsx(Y, { text: "OIDC Provider Metadata" }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }) : null,
/* @__PURE__ */ e.jsx(
h,
{
label: "Client ID",
id: "oidcClientId",
"aria-describedby": "oidc-clientid-hint",
classNames: x().inputField,
value: n.oidcClientId,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx("div", { id: "oidc-clientid-hint", className: q.hint, children: "ClientId of the app created on the OIDC Provider." }),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
ge,
{
label: "Client Secret",
id: "oidcClientSecret",
"aria-describedby": "oidc-clientsecret-hint",
readOnly: !1,
classNames: x().inputField,
handleChange: d,
value: n.oidcClientSecret,
required: !0
}
),
/* @__PURE__ */ e.jsx("div", { id: "oidc-clientsecret-hint", className: q.hint, children: "ClientSecret of the app created on the OIDC Provider." }),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
h,
{
id: "oidcDiscoveryUrl",
type: "url",
label: "Well-known URL of OpenID Provider",
placeholder: "https://example.com/.well-known/openid-configuration",
"aria-describedby": "oidc-metadata-hint",
classNames: x().inputField,
value: n.oidcDiscoveryUrl,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx("div", { id: "oidc-metadata-hint", className: q.hint, children: "Enter the well known discovery path of OpenID provider or manually enter the OpenId provider metadata below." }),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(Y, { text: "OR" }),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
h,
{
id: "oidcMetadata.issuer",
label: "Issuer",
placeholder: "https://example.com",
classNames: x().inputField,
value: n["oidcMetadata.issuer"],
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
h,
{
id: "oidcMetadata.authorization_endpoint",
type: "url",
label: "Authorization Endpoint",
placeholder: "https://example.com/oauth/authorize",
classNames: x().inputField,
value: n["oidcMetadata.authorization_endpoint"],
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
h,
{
id: "oidcMetadata.token_endpoint",
type: "url",
label: "Token endpoint",
placeholder: "https://example.com/oauth/token",
classNames: x().inputField,
value: n["oidcMetadata.token_endpoint"],
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
h,
{
id: "oidcMetadata.jwks_uri",
type: "url",
label: "JWKS URI",
placeholder: "https://example.com/.well-known/jwks.json",
classNames: x().inputField,
value: n["oidcMetadata.jwks_uri"],
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
h,
{
id: "oidcMetadata.userinfo_endpoint",
type: "url",
label: "UserInfo endpoint",
placeholder: "https://example.com/userinfo",
autoComplete: "one-time-code",
classNames: x().inputField,
value: n["oidcMetadata.userinfo_endpoint"],
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
b() === "advanced" ? /* @__PURE__ */ e.jsx(e.Fragment, { children: l("sortOrder") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Sort Order",
id: "sortOrder",
type: "number",
min: "0",
placeholder: "10",
classNames: x().inputField,
readOnly: o("sortOrder"),
value: n.sortOrder,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx("div", { id: "sortOrder-hint", className: q.hint, children: "Connections will be sorted (in a listing view like IdP Selection) using this setting. Higher values will be displayed first." })
] }) }) : null,
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsxs("div", { className: q.formAction, children: [
typeof t.cancelCallback == "function" ? /* @__PURE__ */ e.jsx(
z,
{
type: "button",
name: "Cancel",
variant: "outline",
handleClick: t.cancelCallback,
classNames: (L = (F = t.classNames) == null ? void 0 : F.button) == null ? void 0 : L.cancel
}
) : null,
/* @__PURE__ */ e.jsx(
z,
{
type: "submit",
name: "Save",
classNames: (p = (T = t.classNames) == null ? void 0 : T.button) == null ? void 0 : p.ctoa,
isLoading: v
}
)
] })
]
}
)
] });
}
const ot = "_h5_1se5f_3", dt = "_hint_1se5f_10", ut = "_formAction_1se5f_16", ht = "_selectContainer_1se5f_21", B = {
h5: ot,
hint: dt,
formAction: ut,
selectContainer: ht
};
function Re(t) {
function n() {
const { id: v, label: k, value: I, classNames: d, handleInputChange: S, ...O } = t;
return O;
}
function m() {
var v, k, I;
return {
container: $(
(v = t.classNames) == null ? void 0 : v.container,
Ce.container
),
textarea: $((k = t.classNames) == null ? void 0 : k.textarea, Ce.textarea),
label: $((I = t.classNames) == null ? void 0 : I.label, Ce.label)
};
}
return /* @__PURE__ */ e.jsxs("div", { className: Ce.container, children: [
/* @__PURE__ */ e.jsx("label", { htmlFor: t.id, className: Ce.label, children: t.label }),
/* @__PURE__ */ e.jsx(i, { y: 2 }),
/* @__PURE__ */ e.jsx(
"textarea",
{
id: t.id,
value: t.value,
className: m().textarea,
onChange: (v) => t.handleInputChange(v),
...n()
}
)
] });
}
const mt = {
variant: "basic"
}, ft = {
samlConnection: {
name: "",
label: "",
description: "",
tenant: "",
product: "",
redirectUrl: [""],
defaultRedirectUrl: "",
rawMetadata: "",
metadataUrl: "",
sortOrder: "",
forceAuthn: !1,
acsUrlOverride: ""
}
};
function xt(t) {
var F, L, T, p;
const [n, m] = U(
() => ft.samlConnection
);
function v(c) {
return {
...n,
...c
};
}
const [k, I] = U(() => !1);
function d(c) {
const r = c.target, a = r.id, s = a !== "forceAuthn" ? r.value : r.checked;
m(
v({
[a]: s
})
);
}
function S(c, r) {
m(
v({
[c]: r
})
);
}
function O(c) {
c.preventDefault(), I(!0);
const { sortOrder: r, ...a } = n, s = r === "" ? a : {
...n,
sortOrder: +r
};
_e({
url: t.urls.post,
formObj: s,
connectionIsSAML: !0,
callback: async (f) => {
I(!1), f && typeof f == "object" && ("error" in f ? typeof t.errorCallback == "function" && t.errorCallback(f.error.message) : typeof t.successCallback == "function" && t.successCallback({
operation: "CREATE",
connection: f,
connectionIsSAML: !0
}));
}
});
}
function x() {
return t.variant || mt.variant;
}
function b() {
var c, r, a, s, f, N, _, P, V;
return {
form: $((c = t.classNames) == null ? void 0 : c.form, B.form),
inputField: {
label: (r = t.classNames) == null ? void 0 : r.label,
input: (a = t.classNames) == null ? void 0 : a.input,
container: (s = t.classNames) == null ? void 0 : s.fieldContainer
},
select: {
label: (f = t.classNames) == null ? void 0 : f.label,
select: (N = t.classNames) == null ? void 0 : N.select
},
textarea: {
label: (_ = t.classNames) == null ? void 0 : _.label,
textarea: (P = t.classNames) == null ? void 0 : P.textarea,
container: (V = t.classNames) == null ? void 0 : V.fieldContainer
}
};
}
function l(c) {
var r;
return !!((r = t.excludeFields) != null && r.includes(
c
));
}
function o(c) {
var r, a;
return c === "tenant" && Array.isArray((r = t.defaults) == null ? void 0 : r.tenant) && t.defaults.tenant.length === 1 ? !0 : !!((a = t.readOnlyFields) != null && a.includes(
c
));
}
function g() {
var c;
return Array.isArray((c = t.defaults) == null ? void 0 : c.tenant) && t.defaults.tenant.length > 1;
}
function C() {
var c, r;
return Array.isArray((c = t.defaults) == null ? void 0 : c.tenant) ? (r = t.defaults) == null ? void 0 : r.tenant.map((a) => ({
value: a,
text: a
})) : [];
}
function A() {
return t.displayHeader !== void 0 ? t.displayHeader : !0;
}
return ye(() => {
if (t.defaults) {
const c = Array.isArray(t.defaults.tenant) ? t.defaults.tenant[0] : t.defaults.tenant;
m(
v({
...t.defaults,
tenant: c
})
);
}
}, [t.defaults]), /* @__PURE__ */ e.jsxs("div", { children: [
A() ? /* @__PURE__ */ e.jsx("h5", { className: B.h5, children: "Create SSO Connection" }) : null,
/* @__PURE__ */ e.jsxs(
"form",
{
method: "post",
onSubmit: (c) => O(c),
className: b().form,
children: [
x() === "advanced" ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
l("name") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Connection name (Optional)",
id: "name",
placeholder: "MyApp",
classNames: b().inputField,
required: !1,
readOnly: o("name"),
value: n.name,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("label") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Connection label (Optional)",
id: "label",
placeholder: "An internal label to identify the connection",
classNames: b().inputField,
required: !1,
readOnly: o("label"),
value: n.label,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("description") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Description (Optional)",
id: "description",
placeholder: "A short description not more than 100 characters",
classNames: b().inputField,
required: !1,
readOnly: o("description"),
maxLength: 100,
value: n.description,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("tenant") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
g() ? null : /* @__PURE__ */ e.jsx(
h,
{
label: "Tenant",
id: "tenant",
placeholder: "acme.com",
"aria-describedby": "tenant-hint",
classNames: b().inputField,
required: !0,
readOnly: o("tenant"),
value: n.tenant,
handleInputChange: d
}
),
g() ? /* @__PURE__ */ e.jsx("div", { className: B.selectContainer, children: /* @__PURE__ */ e.jsx(
Pe,
{
label: "Tenant",
name: "tenant",
id: "tenant",
options: C(),
classNames: b().select,
selectedValue: n.tenant,
handleChange: d
}
) }) : null,
/* @__PURE__ */ e.jsxs("div", { id: "tenant-hint", className: B.hint, children: [
"Unique identifier for the tenant to which this SSO connection is linked.See",
/* @__PURE__ */ e.jsx(i, { x: 1 }),
/* @__PURE__ */ e.jsx(
Oe,
{
href: "https://boxyhq.com/guides/jackson/configuring-saml-sso#sso-connection-identifier",
linkText: "SSO connection identifier."
}
)
] }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("product") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Product",
id: "product",
placeholder: "demo",
"aria-describedby": "product-hint",
classNames: b().inputField,
required: !0,
readOnly: o("product"),
value: n.product,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx("div", { id: "product-hint", className: B.hint, children: "Identifies the product/app to which this SSO connection is linked." }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("redirectUrl") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
Ne,
{
inputType: "url",
label: "Allowed redirect URLs",
fieldName: "redirectUrl",
currentlist: n.redirectUrl,
handleItemListUpdate: S,
classNames: b().inputField
}
),
/* @__PURE__ */ e.jsx("div", { id: "redirectUrl-hint", className: B.hint, children: "URL(s) to redirect the user to after login. Only the URLs in this list are allowed in the OAuth flow." }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }),
l("defaultRedirectUrl") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Default redirect URL",
id: "defaultRedirectUrl",
"aria-describedby": "defaultRedirectUrl-hint",
placeholder: "http://localhost:3366/login/saml",
type: "url",
classNames: b().inputField,
required: !0,
readOnly: o("defaultRedirectUrl"),
value: n.defaultRedirectUrl,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(
"div",
{
id: "defaultRedirectUrl-hint",
className: B.hint,
children: "URL to redirect the user to after an IdP initiated SAML login."
}
)
] }),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(Y, { text: "SAML Provider Metadata" }),
/* @__PURE__ */ e.jsx(i, { y: 6 })
] }) : null,
/* @__PURE__ */ e.jsx(
Re,
{
label: "Raw IdP XML",
id: "rawMetadata",
"aria-describedby": "xml-metadata-hint",
placeholder: "Paste the raw XML here",
classNames: b().textarea,
required: n.metadataUrl === "",
value: n.rawMetadata,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx("div", { id: "xml-metadata-hint", className: B.hint, children: "Paste the raw XML metadata obtained from SAML provider or enter the metadata URL below." }),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(Y, { text: "OR" }),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsx(
h,
{
label: "Metadata URL",
id: "metadataUrl",
type: "url",
placeholder: "Paste the Metadata URL here",
classNames: b().inputField,
required: n.rawMetadata === "",
value: n.metadataUrl,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx(i, { y: 6 }),
x() === "advanced" ? /* @__PURE__ */ e.jsx(e.Fragment, { children: l("sortOrder") ? null : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
/* @__PURE__ */ e.jsx(
h,
{
label: "Sort Order",
id: "sortOrder",
type: "number",
min: "0",
placeholder: "10",
classNames: b().inputField,
readOnly: o("sortOrder"),
value: n.sortOrder,
handleInputChange: d
}
),
/* @__PURE__ */ e.jsx("div", { id: "sortOrder-hint", className: B.hint, children: "Connections will be sorted (in a listing view like IdP Selection) using this setting. Higher values will be displayed first." })
] }) }) : null,
/* @__PURE__ */ e.jsx(i, { y: 6 }),
x() === "advanced" ? /* @__PURE__ */ e.jsx(e.Fragment, { children: l("acsUrlOverride") ? null : /* @__PURE__ */ e.jsx(
h,
{
label: "ACS URL Override",
id: "acsUrlOverride",
placeholder: "https://yourcompany.com/app/saml/acs",
type: "url",
classNames: b().inputField,
value: n.acsUrlOverride,
handleInputChange: d
}
) }) : null,
/* @__PURE__ */ e.jsx(i, { y: 6 }),
x() === "advanced" ? /* @__PURE__ */ e.jsx(e.Fragment, { children: l("forceAuthn") ? null : /* @__PURE__ */ e.jsx(
pe,
{
label: "Force Authentication",
name: "forceAuthn",
id: "forceAuthn",
checked: n.forceAuthn,
handleChange: d
}
) }) : null,
/* @__PURE__ */ e.jsx(i, { y: 6 }),
/* @__PURE__ */ e.jsxs("div", { className: B.formAction, children: [
typeof t.cancelCallback == "function" ? /* @__PURE__ */ e.jsx(
z,
{
type: "button",
name: "Cancel",
variant: "outline",
handleClick: t.cancelCallback,
classNames: (L = (F = t.classNames) == null ? void 0 : F.button) == null ? void 0 : L.cancel
}
) : null,
/* @__PURE__ */ e.jsx(
z,
{
type: "submit",
name: "Save",
classNames: (p = (T = t.classNames) == null ? void 0 : T.button) == null ? void 0 : p.ctoa,
isLoading: k
}
)
] })
]
}
)
] });
}
const bt = "_container_1c3hr_1", Ct = "_inputs_1c3hr_6", Ie = {
container: bt,
inputs: Ct
};
function yt(t) {
function n() {
return t.label.replace(/ /g, "");
}
function m() {
return t.orientation || "horizontal";
}
return /* @__PURE__ */ e.jsxs(
"div",
{
role: "radiogroup",
className: Ie.container,
"aria-labelledby": n(),
"aria-orientation": m(),
children: [
/* @__PURE__ */ e.jsx("div", { className: Ie.label, id: n(), children: t.label }),
m() === "horizontal" ? /* @__PURE__ */ e.jsx(i, { x: 1 }) : null,
m() === "horizontal" ? /* @__PURE__ */ e.jsx(i, { y: 1 }) : null,
/* @__PURE__ */ e.jsx("div", { className: Ie.inputs, children: t.children })
]
}
);
}
const jt = "_radioDiv_eeujj_3", vt = "_radio_eeujj_3", we = {
radioDiv: jt,
radio: vt
};
function De(t) {
function n() {
return t.value.replace(/ /g, "");
}
return /* @__PURE__ */ e.jsxs("div", { className: we.radioDiv, children: [
/* @__PURE__ */ e.jsx(
"input",
{
type: "radio",
value: t.value,
checked: t.checked,
name: t.name,
id: n(),
className: we.radio,
onChange: (m) => t.handleInputChange(m)
}
),
/* @__PURE__ */ e.jsx(i, { x: 1 }),
/* @__PURE__ */ e.jsx("label", { htmlFor: n(), children: t.children })
] });
}
function gt(t) {
var S, O, x, b, l, o;
const [n, m] = U(() => "saml");
function v() {
return n === "saml";
}
function k() {
return n === "oidc";
}
function I() {
var g, C;
return {
...t.defaults,
tenant: ((g = t.defaults) == null ? void 0 : g.tenants) || ((C = t.defaults) == null ? void 0 : C.tenant)
};
}
function d(g) {
m(g.target.value);
}
return /* @__PURE__ */ e.jsxs("div", { children: [
/* @__PURE__ */ e.jsxs(yt, { label: "Select SSO type:", children: [
/* @__PURE__ */ e.jsx(
De,
{
name: "connection",
value: "saml",
checked: n === "saml",
handleInputChange: d,
children: "SAML"
}
),
/* @__PURE__ */ e.jsx(
De,
{
name: "connection",
value: "oidc",
checked: n === "oidc",
handleInputChange: d,
children: "OIDC"
}
)
] }),
/* @__PURE__ */ e.jsx(i, { y: 4 }),
v() ? /* @__PURE__ */ e.jsx(
xt,
{
urls: t.urls,
excludeFields: (S = t.excludeFields) == null ? void 0 : S.saml,
readOnlyFields: (O = t.readOnlyFields) == null ? void 0 : O.saml,
classNames: t.classNames,
variant: (x = t.variant) == null ? void 0 : x.saml,
errorCallback: t.errorCallback,
successCallback: t.successCallback,
cancelCallback: t.cancelCallback,
displayHeader: !1,
defaults: I()
}
) : null,
k() ? /* @__PURE__ */ e.jsx(
rt,
{
urls: t.urls,
excludeFields: (b = t.excludeFields) == null ? void 0 : b.oidc,
readOnlyFields: (l = t.readOnlyFields) == null ? void 0 : l.oidc,
classNames: t.classNames,
variant: (o = t.variant) == null ? void 0 : o.oidc,
errorCallback: t.errorCallback,
successCallback: t.successCallback,
cancelCallback: t.cancelCallback,
displayHeader: !1,
defaults: I()
}
) : null
] });
}
const Nt = {
connectionListData: []
};
function _t(t) {
var r;
const [n, m] = U(
() => Nt.connectionListData
), [v, k] = U(
() => !0
), [I, d] = U(() => ({})), [S, O] = U(() => !1), [x, b] = U(() => "");
function l() {
return t.urls.get;
}
function o() {
var a;
return ((a = t.paginate) == null ? void 0 : a.itemsPerPage) !== void 0;
}
function g() {
return (t.cols || [
"name",
"provider",
"tenant",
"product",
"type",
"status",
"actions"
]).map((a) => a === "status" ? {
name: "status",
badge: {
position: "surround",
variantSelector(s) {
let f;
return s.deactivated && (f = "warning"), s.deactivated || (f = "success"), f;
}
}
} : a === "name" ? {
name: "name",
badge: {
position: "right",
badgeText: "System",
variant: "info",
shouldDisplayBadge(s) {
return s.isSystemSSO;
}
}
} : a);
}
function C(a) {
return "idpMetadata" in a ? a.idpMetadata.friendlyProviderName || a.idpMetadata.provider : "oidcProvider" in a ? a.oidcProvider.friendlyProviderName || a.oidcProvider.provider : "Unknown";
}
function A() {
return [
{
icon: "PencilIcon",
label: "Edit",
handleClick: (a) => t.handleActionClick("edit", a)
}
];
}
function F(a) {
let s = a.getUrl;
const [f, N] = s.split("?"), _ = new URLSearchParams(N);
if (a.tenant)
if (Array.isArray(a.tenant))
for (const P of a.tenant)
_.append("tenant", P);
else
_.set("tenant", a.tenant);
return a.product && _.set("product", a.product), a.pageToken && _.set("pageToken", a.pageToken), a.displaySorted && _.set("sort", "true"), (a == null ? void 0 : a.offset) !== void 0 && (_.set("pageOffset", `${a.offset}`), _.set("pageLimit", `${a.limit}`)), _.toString() ? `${f}?${_}` : s;
}
function L() {
return F({
getUrl: l(),
tenant: t.tenant,
product: t.product,
displaySorted: t.displaySorted
});
}
function T(a, s) {
return {
...I,
[a]: s
};
}
async function p(a) {
k(!0);
const s = await Q(a);
if (k(!1), s && typeof s == "object")
if ("error" in s && s.error)
O(!0), b(s.error.message), typeof t.errorCallback == "function" && t.errorCallback(s.error.message);
else {
const f = typeof s == "object" && "pageToken" in s, N = f ? s.data : s;
if (Array.isArray(N)) {
const _ = N.map(
(P) => ({
...P,
provider: C(P),
type: "oidcProvider" in P ? "OIDC" : "SAML",
status: P.deactivated ? "Inactive" : "Active",
isSystemSSO: P.isSystemSSO
})
);
m(_), typeof t.handleListFetchComplete == "function" && t.handleListFetchComplete(_);
}
if (f)
return s.pageToken;
}
}
async function c(a) {
const s = await p(
F({
getUrl: L(),
...a
})
);
s && d(T(a.offset, s));
}
return ye(() => {
o() || p(L());
}, [L(), o()]), /* @__PURE__ */ e.jsxs(Se, { isBusy: v, children: [
o() ? /* @__PURE__ */ e.jsx(
He,
{
itemsPerPage: t.paginate.itemsPerPage,
currentPageItemsCount: n.length,
handlePageChange: (r = t.paginate) == null ? void 0 : r.handlePageChange,
reFetch: c,
pageTokenMap: I,
children: /* @__PURE__ */ e.jsx(
ze,
{
emptyStateMessage: "No connections found.",
cols: g(),
data: n,
actions: A(),
showErrorComponent: S,
errorMessage: x,
tableProps: t.tableProps
}
)
}
) : null,
o() ? null : /* @__PURE__ */ e.jsx(
Be,
{
emptyStateMessage: "No connections found.",
cols: g(),
data: n,
actions: A(),
showErrorComponent: S,
errorMessage: x,
tableProps: t.tableProps
}
)
] });
}
const It = "_container_1xdqq_1", St = {
container: It
};
function $e(t) {
var b;
const [n, m] = U(() => !1);
function v() {
return t.connection.deactivated ? "Inactive" : "Active";
}
function k() {
return t.connection.deactivated ? "activate" : "deactivate";
}
function I() {
m(!0);
}
function d() {
m(!1);
}
function S() {
x(!t.connection.deactivated);
}
function O() {
var l;
return {
container: $(
(l = t.classNames) == null ? void 0 : l.container,
St.container
)
};
}
function x(l) {
async function o() {
const g = {
clientID: t.connection.clientID,
clientSecret: t.connection.clientSecret,
tenant: t.connection.tenant,
product: t.connection.product,
deactivated: l
}, C = "idpMetadata" in t.connection, A = "oidcProvider" in t.connection;
C ? g.isSAML = !0 : A && (g.isOIDC = !0);
const F = await Q(t.urls.patch, {
method: "PATCH",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(g)
});
m(!1), F != null && F.error ? typeof t.errorCallback == "function" && t.errorCallback(F.error.message) : typeof t.successCallback == "function" && t.successCallback({
operation: "UPDATE",
connectionIsSAML: C,
connectionIsOIDC: A
});
}
o();
}
return /* @__PURE__ */ e.jsx(e.Fragment, { children: t.connection !== void 0 || t.connection !== null ? /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs("div", { className: O().container, children: [
n ? /* @__PURE__ */ e.jsx(
ke,
{
ctoaVariant: t.connection.deactivated ? "primary" : "destructive",
classNames: (b = t.classNames) == null ? void 0 : b.confirmationPrompt,
cancelCallback: d,
confirmationCallback: S,
promptMessage: `Do you want to ${k()} the connection?`
}
) : null,
n ? null : /* @__PURE__ */ e.jsx(
We,
{
label: v(),
handleChange: I,
checked: !t.connection.deactivated,
disabled: n
}
)
] }) }) : null });
}
const kt = "_label_1wo5i_1", Ot = "_formDiv_1wo5i_8", Ut = "_headingContainer_1wo5i_14", Ft = "_h5_1wo5i_25", At = "_section_1wo5i_32", wt = "_info_1wo5i_44", Dt = "_sectionHeading_1wo5i_54", Mt = "_sectionPara_1wo5i_59", Lt = "_formAction_1wo5i_67", Pt = "_hint_1wo5i_72", E = {
label: kt,
formDiv: Ot,
headingContainer: Ut,
h5: Ft,
section: At,
info: wt,
sectionHeading: Dt,
sectionPara: Mt,
formAction: Lt,
hint: Pt
}, pt = "_container_hbehf_3", Tt = "_vertical_hbehf_13", Rt = "_title_hbehf_17", $t = "_body_hbehf_26", Et = "_info_hbehf_31", qt = "_success_hbehf_35", Vt = "_svg_hbehf_39", K = {
"sr-only": "_sr-only_hbehf_1",
container: pt,
vertical: Tt,
title: Rt,
body: $t,
info: Et,
success: qt,
svg: Vt
};
function Ee(t) {
function n() {
return t.variant ? " " + K[t.variant] : "";
}
function m() {
return t.arrangement === "vertical" ? " " + K.vertical : "";
}
function v() {
return typeof t.displayIcon == "boolean" ? t.displayIcon : !0;
}
return /* @__PURE__ */ e.jsxs("article", { className: `${K.container}${n()}${m()}`, children: [
t.title ? /* @__PURE__ */ e.jsxs("h3", { className: K.title, children: [
v() ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
t.variant === "success" ? /* @__PURE__ */ e.jsx(
qe,
{
svgAttrs: {
class: K.svg
}
}
) : null,
t.variant === "info" ? /* @__PURE__ */ e.jsx(
Ve,
{
svgAttrs: {
class: K.svg
}
}
) : null
] }) : null,
t.title
] }) : null,
/* @__PURE__ */ e.jsx("div", { className: K.body, children: t.children })
] });
}
const Ht = {
name: "",
tenant: "",
product: "",
description: "",
redirectUrl: [""],
defaultRedirectUrl: "",
oidcClientSecret: "",
oidcClientId: "",
oidcDiscoveryUrl: "",
"oidcMetadata.issuer": "",
"oidcMetadata.authorization_endpoint": "",
"oidcMetadata.token_endpoint": "",
"oidcMetadata.jwks_uri": "",
"oidcMetadata.userinfo_endpoint": ""
};
function zt(t) {
var a, s, f, N, _, P, V, Z, ee, te, ne, ae, ie, le, se, ce, re, oe, de, ue, he, me, fe, xe, be, w;
const [n, m] = U(() => Ht), [v, k] = U(() => !0), [I, d] = U(() => !1), [S, O] = U(() => !1);
function x() {
O(!S);
}
function b() {
return t.variant || "basic";
}
function l() {
var y, j, u, M, H, W, J, X, D;
return {
formDiv: $(
(y = t.classNames) == null ? void 0 : y.formDiv,
E.formDiv
),
label: $((j = t.classNames) == null ? void 0 : j.label, E.label),
inputField: {
label: (u = t.classNames) == null ? void 0 : u.label,
input: (M = t.classNames) == null ? void 0 : M.input,
container: (H = t.classNames) == null ? void 0 : H.fieldContainer
},
textarea: {
label: (W = t.classNames) == null ? void 0 : W.label,
textarea: (J = t.classNames) == null ? void 0 : J.textarea,
container: (X = t.classNames) == null ? void 0 : X.fieldContainer
},
section: $(
(D = t.classNames) == null ? void 0 : D.section,
E.section
)
};
}
function o(y) {
var j;
return !!((j = t.excludeFields) != null && j.includes(
y
));
}
function g(y) {
return {
...n,
...y
};
}
function C(y) {
var H;
const u = y.target.id, M = (H = y.currentTarget) == null ? void 0 : H.value;
m(
g({
[u]: M
})
);
}
function A(y, j) {
m(
g({
[y]: j
})
);
}
function F() {
m({
...n,
"oidcMetadata.issuer": "",
"oidcMetadata.authorization_endpoint": "",
"oidcMetadata.token_endpoint": "",
"oidcMetadata.jwks_uri": "",
"oidcMetadata.userinfo_endpoint": ""
});
}
function L(y) {
y.preventDefault();
const j = {
connectionIsOIDC: !0
};
Object.entries(n).map(([u, M]) => {
u.startsWith("oidcMetadata.") ? (j.oidcMetadata === void 0 && (j.oidcMetadata = {}), j.oidcMetadata[u.replace("oidcMetadata.", "")] = M) : u === "sortOrder" ? M !== "" && (j[u] = +M) : j[u] = M;
}), d(!0), _e({
url: t.urls.patch,
isEditView: !0,
formObj: j,
connectionIsOIDC: !0,
callback: async (u) => {
d(!1), u != null && u.error ? typeof t.errorCallback == "function" && t.errorCallback(u.error.message) : (n.oidcDiscoveryUrl && F(), typeof t.successCallback == "function" && t.succ