UNPKG

synapse-react-client

Version:

[![npm version](https://badge.fury.io/js/synapse-react-client.svg)](https://badge.fury.io/js/synapse-react-client) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettie

364 lines (363 loc) 12.1 kB
import { jsx as t, Fragment as g, jsxs as a } from "react/jsx-runtime"; import "../../synapse-client/SynapseClient.js"; import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode"; import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse"; import "@sage-bionetworks/synapse-client/util/SynapseClientError"; import "@sage-bionetworks/synapse-types"; import "../../utils/functions/EntityTypeUtils.js"; import "../../utils/SynapseConstants.js"; import "lodash-es"; import "@sage-bionetworks/synapse-client/util/synapseClientFetch"; import "@tanstack/react-query"; import "../../utils/PermissionLevelToAccessType.js"; import { useDebouncedEffect as me } from "../../utils/hooks/useDebouncedEffect.js"; import { useState as o, useMemo as pe, useEffect as he } from "react"; import { useSynapseContext as ge } from "../../utils/context/SynapseContext.js"; import "use-deep-compare-effect"; import { TextField as m, InputAdornment as fe, IconButton as Ce, Button as V, Typography as _, GridLegacy as l, MenuItem as Y, Box as ve, Alert as ye } from "@mui/material"; import "../../utils/hooks/useCookiePreferences.js"; import "../../utils/hooks/useSourceAppConfigs.js"; import "universal-cookie"; import "../../utils/AppUtils/session/ApplicationSessionContext.js"; import "../../utils/context/FullContextProvider.js"; import "../../utils/context/DocumentMetadataContext.js"; import { SynapseSpinner as _e } from "../LoadingScreen/LoadingScreen.js"; import "@tanstack/query-core"; import "lodash-es/isEmpty"; import "lodash-es/isEqual"; import "lodash-es/xorWith"; import "react-router"; import "@sage-bionetworks/synapse-client"; import "../../utils/types/IsType.js"; import { useCreateOAuthClient as xe, useUpdateOAuthClient as Ie, useDeleteOAuthClient as Se } from "../../synapse-queries/oauth/useOAuthClient.js"; import z from "@mui/icons-material/DeleteTwoTone"; import { OIDCSigningAlgorithm as Re } from "@sage-bionetworks/synapse-client/generated/models/OIDCSigningAlgorithm"; import { ConfirmationDialog as Ue } from "../ConfirmationDialog/ConfirmationDialog.js"; import { WarningDialog as be } from "../SynapseForm/WarningDialog.js"; import { displayToast as f } from "../ToastMessage/ToastMessage.js"; const C = "JSON", Ae = "Are you absolutely sure?", De = "Editing this detail will render your client invalid and will require you to resubmit verification. This action cannot be undone.", Ne = 500, s = 12, c = 6, Z = 1, $ = 2; function pt({ isShowingModal: w = !1, isEdit: d, onClose: K, client: r, setIsShowingConfirmModal: x, isShowingConfirmModal: P, setIsShowingModal: Q }) { const { synapseClient: B } = ge(), [I, S] = o(""), [n, p] = o([{ uri: "" }]), [R, U] = o(""), [b, A] = o(""), [D, N] = o(""), [T, O] = o(""), [v, W] = o(C), [X, ee] = o(!1), [te, L] = o(!1), [re, ie] = o(), [k, h] = o(), u = pe(() => ({ client_id: r?.client_id, client_name: I, redirect_uris: n?.map((e) => e.uri) ?? [""], policy_uri: R, client_uri: b, sector_identifier_uri: D, userinfo_signed_response_alg: v === C ? void 0 : v, tos_uri: T, etag: r?.etag }), [ r?.client_id, r?.etag, I, b, R, n, D, v, T ]); he(() => { S(r?.client_name ?? ""), p( r?.redirect_uris?.map((e) => ({ uri: e })) ?? [ { uri: "" } ] ), U(r?.policy_uri ?? ""), A(r?.client_uri ?? ""), N(r?.sector_identifier_uri ?? ""), W( r?.userinfo_signed_response_alg ?? C ), O(r?.tos_uri ?? ""); }, [w, r]), me( () => { u.client_id && B.openIDConnectServicesClient.putAuthV1Oauth2ClientIdVerificationPrecheck({ id: u.client_id, oAuthClient: u }).then((e) => { ee(e.reverificationRequired); }); }, [u, B.openIDConnectServicesClient], Ne ); const y = () => { S(""), p([{ uri: "" }]), U(""), A(""), N(""), W(C), O(""), K(); }, G = () => { x(!1), L(!1); }, { mutate: ne } = xe({ onSuccess: () => { f("Successfully created", "success"), h(void 0), y(); }, onError: (e) => { h(e); } }), { mutate: q, isPending: H } = Ie({ onSuccess: () => { f("Successfully saved", "success"), h(void 0), y(); }, onError: (e) => { h(e), Q(!0); } }), { mutate: oe } = Se({ onSuccess: () => { f("Successfully deleted", "success"), y(); }, onError: (e) => { f(e.reason, "danger"); } }), le = () => { try { ie(u), X === !0 ? x(!0) : d ? q(u) : ne(u); } catch (e) { f(e.reason, "danger"); } }, ae = () => { n && p([...n, { uri: "" }]); }, se = (e) => { if (n) { const i = [...n]; i.splice(e, 1), p(i); } }, ce = (e, i) => { if (n) { const { name: E, value: ue } = e.target, M = [...n]; M[i][E] = ue, p(M); } }, J = { color: d ? "error.main" : void 0, "&.Mui-focused": { color: d ? "error.main" : void 0 } }, j = /* @__PURE__ */ t( m, { onChange: (e) => N(e.target.value), placeholder: "https://", type: "text", value: D, id: "sectorURI", label: "Sector Identifier URI", margin: "normal", fullWidth: !0, slotProps: { inputLabel: { sx: J } } } ), F = /* @__PURE__ */ t(g, { children: n?.map((e, i) => /* @__PURE__ */ a("div", { children: [ /* @__PURE__ */ t( m, { required: i === 0, label: i === 0 && "Redirect URI(s)", name: "uri", fullWidth: !0, id: `redirect-uri-${i}`, onChange: (E) => ce(E, i), value: e.uri, placeholder: "https://", type: "text", margin: i === 0 ? "normal" : "dense", slotProps: { input: { endAdornment: n.length > 1 && /* @__PURE__ */ t(fe, { position: "end", children: /* @__PURE__ */ t(Ce, { onClick: () => se(i), children: /* @__PURE__ */ t(z, { sx: { color: "error.main" } }) }) }) }, inputLabel: { sx: J } } } ), n.length - 1 === i && /* @__PURE__ */ t( V, { variant: "contained", color: "primary", onClick: ae, disabled: e.uri.length === 0, sx: { my: "10px" }, children: "Add URI" } ) ] }, i)) }), de = /* @__PURE__ */ a(g, { children: [ H && /* @__PURE__ */ t("div", { className: "SRC-center-text", children: /* @__PURE__ */ t(_e, { size: 40 }) }), !H && /* @__PURE__ */ a(g, { children: [ /* @__PURE__ */ t( _, { variant: "body1", sx: { mb: "10px" }, children: "To protect you and your users, your consent screen and application will need to be verified by Sage Bionetworks. Before your consent screen and application are verified by Sage Bionetworks, you can still test your application with limitations." } ), d && /* @__PURE__ */ a(_, { sx: { mt: "16px" }, variant: "label", children: [ "Client ID: ", r?.client_id ] }), /* @__PURE__ */ a( l, { container: !0, rowSpacing: Z, columnSpacing: $, children: [ /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: /* @__PURE__ */ t( m, { label: "Client Name", required: !0, onChange: (e) => S(e.target.value), placeholder: "Client Name", type: "text", value: I, id: "clientName", margin: "normal", fullWidth: !0 } ) }), /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: /* @__PURE__ */ t( m, { label: "Client Homepage", onChange: (e) => A(e.target.value), placeholder: "https://", type: "text", value: b, id: "clientUri", fullWidth: !0, margin: "normal" } ) }), !d && /* @__PURE__ */ a(g, { children: [ /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: F }), /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: j }) ] }), /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: /* @__PURE__ */ t( m, { label: "Link to Privacy Policy", onChange: (e) => U(e.target.value), placeholder: "https://", type: "text", value: R, fullWidth: !0, margin: "normal" } ) }), /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: /* @__PURE__ */ t( m, { label: "Links to Terms of Service", onChange: (e) => O(e.target.value), placeholder: "https://", type: "text", value: T, fullWidth: !0, margin: "normal" } ) }), /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: /* @__PURE__ */ a( m, { label: "User Info Signed Response Algorithm", value: v, onChange: (e) => W( e.target.value ), select: !0, fullWidth: !0, margin: "normal", children: [ /* @__PURE__ */ t(Y, { value: C, children: "JSON" }), /* @__PURE__ */ t(Y, { value: Re.RS256, children: "JWT" }) ] } ) }) ] } ), d && /* @__PURE__ */ a( ve, { sx: { mt: "10px", padding: 1, backgroundColor: "rgb(178, 36, 42, 0.03)" }, children: [ /* @__PURE__ */ t(_, { sx: { my: 1 }, color: "error", variant: "headline3", children: "DANGER ZONE" }), /* @__PURE__ */ t(_, { variant: "smallText1", children: "Editing the following information will render your client invalid and will require you to create it again and resubmit verification if needed." }), /* @__PURE__ */ a( l, { container: !0, rowSpacing: Z, columnSpacing: $, children: [ /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: F }), /* @__PURE__ */ t(l, { item: !0, md: c, xs: s, children: j }) ] } ), /* @__PURE__ */ t( V, { onClick: () => { L(!0), x(!0); }, color: "error", variant: "text", startIcon: /* @__PURE__ */ t(z, {}), sx: { padding: 0, mb: 1 }, children: "DELETE CLIENT" } ) ] } ) ] }), k && /* @__PURE__ */ t(ye, { severity: "error", children: k?.reason }) ] }); return /* @__PURE__ */ a(g, { children: [ /* @__PURE__ */ t( Ue, { open: w && !P, onCancel: () => { y(), h(void 0); }, maxWidth: "md", title: d ? "Client Details" : "Create New OAuth Client", content: de, onConfirm: le, confirmButtonProps: { children: "Save" } } ), /* @__PURE__ */ t( be, { open: P, title: Ae, content: De, onCancel: G, onConfirm: () => { te ? oe(r?.client_id) : q(re), G(); }, confirmButtonColor: "error", confirmButtonText: "Yes, Continue" } ) ] }); } export { pt as CreateOAuthModal, C as defaultUserInfoSignedResponseAlgorithm, De as warningBody, Ae as warningHeader }; //# sourceMappingURL=CreateOAuthClient.js.map