synapse-react-client 4.0.41 → 4.0.42

package/dist/components/AclEditor/AclEditor.js

@@ -5,8 +5,8 @@ import { AclEditorSkeleton as r } from "./AclEditorSkeleton.js";
 import { ResourceAccessItem as i } from "./ResourceAccessItem.js";
 import "react";
 import { noop as a } from "lodash-es";
-import { TransitionGroup as o } from "react-transition-group";
-import { Box as s, Button as c, Checkbox as l, Collapse as u, FormControlLabel as d, Tooltip as f, Typography as p } from "@mui/material";
+import { Box as o, Button as s, Checkbox as c, Collapse as l, FormControlLabel as u, Tooltip as d, Typography as f } from "@mui/material";
+import { TransitionGroup as p } from "react-transition-group";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/AclEditor/AclEditor.tsx
 var g = "Add a user or team", _ = "Make Public", v = "Remove Public Access", y = "Notify people via email";
@@ -38,19 +38,19 @@ function b(g) {
 			L && E(Number(L)), I && E(Number(I));
 		}
 	};
-	return /* @__PURE__ */ h(s, { children: [
-		/* @__PURE__ */ h(s, {
+	return /* @__PURE__ */ h(o, { children: [
+		/* @__PURE__ */ h(o, {
 			sx: { mb: "30px" },
-			children: [/* @__PURE__ */ m(p, {
+			children: [/* @__PURE__ */ m(f, {
 				variant: "headline3",
 				sx: { mb: "10px" },
 				children: "Users and Teams with Permissions"
-			}), y.length === 0 ? /* @__PURE__ */ m(p, {
+			}), y.length === 0 ? /* @__PURE__ */ m(f, {
 				variant: "body1Italic",
 				children: T
-			}) : /* @__PURE__ */ m(o, { children: y.map((e) => {
+			}) : /* @__PURE__ */ m(p, { children: y.map((e) => {
 				let t = typeof x == "function" ? x(e) : x, n = typeof C == "function" ? C(e) : C;
-				return /* @__PURE__ */ m(u, { children: /* @__PURE__ */ m(i, {
+				return /* @__PURE__ */ m(l, { children: /* @__PURE__ */ m(i, {
 					resourceAccess: e,
 					availablePermissionLevels: b,
 					canChangePermission: t,
@@ -61,13 +61,13 @@ function b(g) {
 				}) }, e.principalId);
 			}) })]
 		}),
-		x && /* @__PURE__ */ h(s, { children: [
-			/* @__PURE__ */ m(p, {
+		x && /* @__PURE__ */ h(o, { children: [
+			/* @__PURE__ */ m(f, {
 				variant: "headline3",
 				sx: { mb: "10px" },
 				children: "Add More"
 			}),
-			/* @__PURE__ */ m(p, {
+			/* @__PURE__ */ m(f, {
 				sx: {
 					mb: "20px",
 					variant: "body1",
@@ -77,9 +77,9 @@ function b(g) {
 				},
 				children: "Search for a username or team to add. You can search by username, first or last names, or team name."
 			}),
-			/* @__PURE__ */ h(s, {
+			/* @__PURE__ */ h(o, {
 				sx: { mb: 1 },
-				children: [/* @__PURE__ */ m(p, {
+				children: [/* @__PURE__ */ m(f, {
 					component: "label",
 					variant: "smallText2",
 					htmlFor: "reviewer-search",
@@ -94,25 +94,25 @@ function b(g) {
 					}
 				})]
 			}),
-			/* @__PURE__ */ h(s, {
+			/* @__PURE__ */ h(o, {
 				sx: {
 					display: "flex",
 					justifyContent: "space-between",
 					gap: 2
 				},
-				children: [/* @__PURE__ */ m(s, { children: k && /* @__PURE__ */ m(c, {
+				children: [/* @__PURE__ */ m(o, { children: k && /* @__PURE__ */ m(s, {
 					size: "small",
 					variant: "outlined",
 					...B
-				}) }), A && /* @__PURE__ */ m(f, {
+				}) }), A && /* @__PURE__ */ m(d, {
 					title: "Select to notify newly added people that this item has been shared with them",
-					children: /* @__PURE__ */ m(d, {
+					children: /* @__PURE__ */ m(u, {
 						sx: { mr: 0 },
-						control: /* @__PURE__ */ m(l, {
+						control: /* @__PURE__ */ m(c, {
 							value: j,
 							onChange: () => M(!j)
 						}),
-						label: /* @__PURE__ */ m(p, {
+						label: /* @__PURE__ */ m(f, {
 							variant: "smallText1",
 							children: "Notify people via email"
 						})
@@ -120,7 +120,7 @@ function b(g) {
 				})]
 			})
 		] }),
-		!x && !S && /* @__PURE__ */ m(p, {
+		!x && !S && /* @__PURE__ */ m(f, {
 			variant: "body1",
 			children: "You do not have sufficient privileges to modify the sharing settings."
 		})

package/dist/components/Authentication/TwoFactorBackupCodes.js

@@ -135,7 +135,7 @@ function S(S) {
 			sx: {
 				padding: {
 					xs: "60px 0 0 0",
-					md: 10
+					md: T.spacing(10, 0)
 				},
 				height: "100%",
 				background: {

package/dist/components/Authentication/TwoFactorBackupCodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoFactorBackupCodes.js","names":[],"sources":["../../../src/components/Authentication/TwoFactorBackupCodes.tsx"],"sourcesContent":["import {\n  LeftRightPanel,\n  StyledOuterContainer,\n} from '@/components/styled/LeftRightPanel'\nimport { createRecoveryCodes } from '@/synapse-client/SynapseClient'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { useMediaPrintOnly } from '@/utils/hooks/useMediaPrintOnly'\nimport {\n  Alert,\n  Box,\n  Button,\n  IconButton,\n  Typography,\n  useTheme,\n} from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { TwoFactorAuthRecoveryCodes } from '@sage-bionetworks/synapse-types'\nimport { useMutation } from '@tanstack/react-query'\nimport { useCallback, useEffect, useState } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { displayToast } from '../ToastMessage/ToastMessage'\nimport { RecoveryCodeGrid } from './RecoveryCodeGrid'\nimport { RegenerateBackupCodesWarning } from './RegenerateBackupCodesWarning'\nimport { copyStringToClipboard } from '@/utils/functions/StringUtils'\n\nexport type TwoFactorBackupCodesProps = {\n  /* Whether to show a warning before generating new codes, to prevent users from overwriting their existing codes */\n  showReplaceOldCodesWarning?: boolean\n  /* Invoked when the user decides not to generate new codes, or has acknowledged new codes. */\n  onClose: () => void\n}\n\nexport default function TwoFactorBackupCodes(props: TwoFactorBackupCodesProps) {\n  const { showReplaceOldCodesWarning, onClose } = props\n  const theme = useTheme()\n  const [hasConfirmedRegeneration, setHasConfirmedRegeneration] = useState(\n    !showReplaceOldCodesWarning,\n  )\n\n  const { accessToken } = useSynapseContext()\n\n  const {\n    mutate: generateCodes,\n    data: recoveryCodes,\n    error,\n  } = useMutation<TwoFactorAuthRecoveryCodes, SynapseClientError>({\n    mutationFn: () => createRecoveryCodes(accessToken),\n    onMutate: () => {\n      setHasConfirmedRegeneration(true)\n    },\n  })\n\n  // Generate codes on mount if no warning is shown\n  useEffect(() => {\n    if (!showReplaceOldCodesWarning) {\n      generateCodes()\n    }\n    // Run on mount only\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const { visibleOnPrintClassName, hiddenOnPrintClassName } =\n    useMediaPrintOnly()\n\n  const copyCodesToClipboard = useCallback(() => {\n    const codes = (recoveryCodes?.codes || []).join('\\n')\n    copyStringToClipboard(codes).then(() => {\n      displayToast('Recovery codes copied to clipboard', 'success')\n    })\n  }, [recoveryCodes])\n\n  if (showReplaceOldCodesWarning && !hasConfirmedRegeneration) {\n    return (\n      <StyledOuterContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n        <RegenerateBackupCodesWarning\n          onConfirm={generateCodes}\n          onCancel={onClose}\n        />\n      </StyledOuterContainer>\n    )\n  }\n\n  return (\n    <LeftRightPanel\n      className={visibleOnPrintClassName}\n      leftContent={\n        <Box\n          sx={{\n            py: { xs: '10px', md: 10 },\n            px: { xs: '10px', md: 8 },\n            height: '100%',\n          }}\n        >\n          <IconButton\n            type=\"button\"\n            onClick={onClose}\n            className={hiddenOnPrintClassName}\n            sx={{\n              position: 'absolute',\n              top: { xs: 0, md: theme.spacing(2) },\n              left: { xs: 0, md: theme.spacing(2) },\n            }}\n          >\n            <IconSvg\n              icon=\"arrowBack\"\n              wrap={false}\n              sx={{ height: '24px', width: '24px' }}\n            />\n          </IconButton>\n          <Typography variant=\"headline1\" sx={{ mt: { xs: 0, md: 7 } }}>\n            Backup codes\n          </Typography>\n          {showReplaceOldCodesWarning && (\n            <Alert\n              severity=\"warning\"\n              className={hiddenOnPrintClassName}\n              sx={{\n                my: 2,\n              }}\n              icon={false}\n            >\n              <strong>These new codes have replaced your old codes.</strong>{' '}\n              Please save these codes and use them from now on.\n            </Alert>\n          )}\n          <RecoveryCodeGrid recoveryCodes={recoveryCodes} />\n          {error && (\n            <Alert severity={'error'} sx={{ my: 2 }} icon={false}>\n              {error.message}\n            </Alert>\n          )}\n          <Box\n            className={hiddenOnPrintClassName}\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: '1fr 1fr',\n              gap: '10px',\n              mb: '10px',\n            }}\n          >\n            <Button\n              variant={'outlined'}\n              onClick={copyCodesToClipboard}\n              disabled={!recoveryCodes}\n            >\n              Copy Codes\n            </Button>\n            <Button\n              variant={'outlined'}\n              disabled={!recoveryCodes}\n              onClick={window.print}\n            >\n              Print Codes\n            </Button>\n          </Box>\n          <Button\n            variant={'contained'}\n            className={hiddenOnPrintClassName}\n            fullWidth\n            disabled={!recoveryCodes}\n            onClick={onClose}\n          >\n            Done\n          </Button>\n        </Box>\n      }\n      rightContent={\n        <Box\n          sx={{\n            padding: { xs: '60px 0 0 0', md: 10 },\n            height: '100%',\n            background: {\n              xs: 'none',\n              md: `url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom`,\n            },\n            backgroundSize: '100%',\n          }}\n        >\n          <Box\n            sx={{\n              mt: { xs: 0, md: 7 },\n              px: { xs: '10px', md: 9 },\n            }}\n          >\n            <Typography\n              variant=\"headline1\"\n              sx={theme => ({\n                mb: 2.5,\n                [theme.breakpoints.down('md')]: { fontSize: '18px' },\n              })}\n            >\n              Save these codes\n            </Typography>\n            <Typography\n              variant=\"body1\"\n              sx={{\n                my: 2,\n              }}\n            >\n              You can use these 10 backup codes to access your account if you\n              ever lose access to your authentication device.\n            </Typography>\n            <Typography\n              variant=\"body1\"\n              sx={{\n                my: 2,\n              }}\n            >\n              Each code can only be used once.\n            </Typography>\n          </Box>\n        </Box>\n      }\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TwoFactorBackupCodes.js","names":[],"sources":["../../../src/components/Authentication/TwoFactorBackupCodes.tsx"],"sourcesContent":["import {\n  LeftRightPanel,\n  StyledOuterContainer,\n} from '@/components/styled/LeftRightPanel'\nimport { createRecoveryCodes } from '@/synapse-client/SynapseClient'\nimport { useSynapseContext } from '@/utils/context/SynapseContext'\nimport { useMediaPrintOnly } from '@/utils/hooks/useMediaPrintOnly'\nimport {\n  Alert,\n  Box,\n  Button,\n  IconButton,\n  Typography,\n  useTheme,\n} from '@mui/material'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\nimport { TwoFactorAuthRecoveryCodes } from '@sage-bionetworks/synapse-types'\nimport { useMutation } from '@tanstack/react-query'\nimport { useCallback, useEffect, useState } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { displayToast } from '../ToastMessage/ToastMessage'\nimport { RecoveryCodeGrid } from './RecoveryCodeGrid'\nimport { RegenerateBackupCodesWarning } from './RegenerateBackupCodesWarning'\nimport { copyStringToClipboard } from '@/utils/functions/StringUtils'\n\nexport type TwoFactorBackupCodesProps = {\n  /* Whether to show a warning before generating new codes, to prevent users from overwriting their existing codes */\n  showReplaceOldCodesWarning?: boolean\n  /* Invoked when the user decides not to generate new codes, or has acknowledged new codes. */\n  onClose: () => void\n}\n\nexport default function TwoFactorBackupCodes(props: TwoFactorBackupCodesProps) {\n  const { showReplaceOldCodesWarning, onClose } = props\n  const theme = useTheme()\n  const [hasConfirmedRegeneration, setHasConfirmedRegeneration] = useState(\n    !showReplaceOldCodesWarning,\n  )\n\n  const { accessToken } = useSynapseContext()\n\n  const {\n    mutate: generateCodes,\n    data: recoveryCodes,\n    error,\n  } = useMutation<TwoFactorAuthRecoveryCodes, SynapseClientError>({\n    mutationFn: () => createRecoveryCodes(accessToken),\n    onMutate: () => {\n      setHasConfirmedRegeneration(true)\n    },\n  })\n\n  // Generate codes on mount if no warning is shown\n  useEffect(() => {\n    if (!showReplaceOldCodesWarning) {\n      generateCodes()\n    }\n    // Run on mount only\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  const { visibleOnPrintClassName, hiddenOnPrintClassName } =\n    useMediaPrintOnly()\n\n  const copyCodesToClipboard = useCallback(() => {\n    const codes = (recoveryCodes?.codes || []).join('\\n')\n    copyStringToClipboard(codes).then(() => {\n      displayToast('Recovery codes copied to clipboard', 'success')\n    })\n  }, [recoveryCodes])\n\n  if (showReplaceOldCodesWarning && !hasConfirmedRegeneration) {\n    return (\n      <StyledOuterContainer sx={{ display: 'flex', flexDirection: 'column' }}>\n        <RegenerateBackupCodesWarning\n          onConfirm={generateCodes}\n          onCancel={onClose}\n        />\n      </StyledOuterContainer>\n    )\n  }\n\n  return (\n    <LeftRightPanel\n      className={visibleOnPrintClassName}\n      leftContent={\n        <Box\n          sx={{\n            py: { xs: '10px', md: 10 },\n            px: { xs: '10px', md: 8 },\n            height: '100%',\n          }}\n        >\n          <IconButton\n            type=\"button\"\n            onClick={onClose}\n            className={hiddenOnPrintClassName}\n            sx={{\n              position: 'absolute',\n              top: { xs: 0, md: theme.spacing(2) },\n              left: { xs: 0, md: theme.spacing(2) },\n            }}\n          >\n            <IconSvg\n              icon=\"arrowBack\"\n              wrap={false}\n              sx={{ height: '24px', width: '24px' }}\n            />\n          </IconButton>\n          <Typography variant=\"headline1\" sx={{ mt: { xs: 0, md: 7 } }}>\n            Backup codes\n          </Typography>\n          {showReplaceOldCodesWarning && (\n            <Alert\n              severity=\"warning\"\n              className={hiddenOnPrintClassName}\n              sx={{\n                my: 2,\n              }}\n              icon={false}\n            >\n              <strong>These new codes have replaced your old codes.</strong>{' '}\n              Please save these codes and use them from now on.\n            </Alert>\n          )}\n          <RecoveryCodeGrid recoveryCodes={recoveryCodes} />\n          {error && (\n            <Alert severity={'error'} sx={{ my: 2 }} icon={false}>\n              {error.message}\n            </Alert>\n          )}\n          <Box\n            className={hiddenOnPrintClassName}\n            sx={{\n              display: 'grid',\n              gridTemplateColumns: '1fr 1fr',\n              gap: '10px',\n              mb: '10px',\n            }}\n          >\n            <Button\n              variant={'outlined'}\n              onClick={copyCodesToClipboard}\n              disabled={!recoveryCodes}\n            >\n              Copy Codes\n            </Button>\n            <Button\n              variant={'outlined'}\n              disabled={!recoveryCodes}\n              onClick={window.print}\n            >\n              Print Codes\n            </Button>\n          </Box>\n          <Button\n            variant={'contained'}\n            className={hiddenOnPrintClassName}\n            fullWidth\n            disabled={!recoveryCodes}\n            onClick={onClose}\n          >\n            Done\n          </Button>\n        </Box>\n      }\n      rightContent={\n        <Box\n          sx={{\n            padding: { xs: '60px 0 0 0', md: theme.spacing(10, 0) },\n            height: '100%',\n            background: {\n              xs: 'none',\n              md: `url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom`,\n            },\n            backgroundSize: '100%',\n          }}\n        >\n          <Box\n            sx={{\n              mt: { xs: 0, md: 7 },\n              px: { xs: '10px', md: 9 },\n            }}\n          >\n            <Typography\n              variant=\"headline1\"\n              sx={theme => ({\n                mb: 2.5,\n                [theme.breakpoints.down('md')]: { fontSize: '18px' },\n              })}\n            >\n              Save these codes\n            </Typography>\n            <Typography\n              variant=\"body1\"\n              sx={{\n                my: 2,\n              }}\n            >\n              You can use these 10 backup codes to access your account if you\n              ever lose access to your authentication device.\n            </Typography>\n            <Typography\n              variant=\"body1\"\n              sx={{\n                my: 2,\n              }}\n            >\n              Each code can only be used once.\n            </Typography>\n          </Box>\n        </Box>\n      }\n    />\n  )\n}\n"],"mappings":"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"}

package/dist/components/Authentication/TwoFactorEnrollmentForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TwoFactorEnrollmentForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAW5D;;;;GAIG;AACH,iBAAS,YAAY,CAAC,MAAM,EAAE,UAAU,UAEvC;AA6BD,eAAO,MAAM,oBAAoB,+HAC6F,CAAA;AAE9H,MAAM,MAAM,4BAA4B,GAAG;IACzC,UAAU,EAAE,UAAU,CAAA;IACtB,4BAA4B,EAAE,MAAM,IAAI,CAAA;IACxC,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,KAAK,EAAE,4BAA4B,2CAqOpC;AAED,eAAO,MAAM,yBAAyB;;CAAmB,CAAA"}
+{"version":3,"file":"TwoFactorEnrollmentForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA;AAY5D;;;;GAIG;AACH,iBAAS,YAAY,CAAC,MAAM,EAAE,UAAU,UAEvC;AAiCD,eAAO,MAAM,oBAAoB,+HAC6F,CAAA;AAE9H,MAAM,MAAM,4BAA4B,GAAG;IACzC,UAAU,EAAE,UAAU,CAAA;IACtB,4BAA4B,EAAE,MAAM,IAAI,CAAA;IACxC,aAAa,EAAE,MAAM,IAAI,CAAA;CAC1B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAC7C,KAAK,EAAE,4BAA4B,2CAmPpC;AAED,eAAO,MAAM,yBAAyB;;CAAmB,CAAA"}

package/dist/components/Authentication/TwoFactorEnrollmentForm.js

@@ -1,4 +1,4 @@
-import e from "../FullWidthAlert/FullWidthAlert.js";
+import { displayToast as e } from "../ToastMessage/ToastMessage.js";
 import { NUMERIC_CODE_HTML_INPUT_PROPS as t } from "./Constants.js";
 import { SynapseSpinner as n } from "../LoadingScreen/LoadingScreen.js";
 import { useFinishTwoFactorEnrollment as r } from "../../synapse-queries/auth/useTwoFactorEnrollment.js";
@@ -6,22 +6,25 @@ import i from "../IconSvg/IconSvg.js";
 import a from "../TextField/TextField.js";
 import { StyledOuterContainer as o } from "../styled/LeftRightPanel.js";
 import s from "./TwoFactorSecretDialog.js";
-import { useEffect as c, useRef as l, useState as u } from "react";
-import { Box as d, Button as f, Divider as p, IconButton as m, Link as h, Paper as g, Stack as _, Typography as v, styled as y } from "@mui/material";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import * as S from "qrcode";
+import { useEffect as c, useId as l, useRef as u, useState as d } from "react";
+import { Box as f, Button as p, Divider as m, FormHelperText as h, IconButton as g, Link as _, Paper as v, Stack as y, Typography as b, styled as x } from "@mui/material";
+import { jsx as S, jsxs as C } from "react/jsx-runtime";
+import * as w from "qrcode";
 //#region src/components/Authentication/TwoFactorEnrollmentForm.tsx
-var { toCanvas: C } = S;
-function w(e) {
+var { toCanvas: T } = w;
+function E(e) {
 	return `otpauth://totp/Synapse:${e.username}?secret=${e.secret}&issuer=Sage%20Bionetworks&algorithm=${e.alg}&digits=${e.digits}&period=${e.period}`;
 }
-var T = y((e) => /* @__PURE__ */ b(d, {
+function D(e) {
+	return e.reason.toLowerCase().includes("invalid totp code");
+}
+var O = x((e) => /* @__PURE__ */ S(f, {
 	sx: {
 		my: 3,
 		...e.sx
 	},
 	...e
-}), { label: "Section" })(() => ({})), E = y(d, { label: "SectionInnerGrid" })(({ theme: e }) => ({
+}), { label: "Section" })(() => ({})), k = x(f, { label: "SectionInnerGrid" })(({ theme: e }) => ({
 	display: "grid",
 	gridTemplateColumns: "auto 200px",
 	columnGap: e.spacing(5),
@@ -29,19 +32,24 @@ var T = y((e) => /* @__PURE__ */ b(d, {
 		gridTemplateColumns: "1fr",
 		gap: "18px"
 	}
-})), D = "https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account";
-function O(y) {
-	let { onTwoFactorEnrollmentSuccess: S, onBackClicked: O, totpSecret: k } = y, [A, j] = u(""), [M, N] = u(!1), [P, F] = u(!1), I = l(null), { mutate: L, isPending: R, error: z } = r({ onSuccess: S });
+})), A = "https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account";
+function j(x) {
+	let { onTwoFactorEnrollmentSuccess: w, onBackClicked: j, totpSecret: M } = x, [N, P] = d(""), [F, I] = d(!1), [L, R] = d(!1), z = u(null), B = l(), { mutate: V, isPending: H, error: U, reset: W } = r({
+		onSuccess: w,
+		onError: (t) => {
+			D(t) || e(t.reason, "danger");
+		}
+	}), G = U != null && D(U);
 	return c(() => {
 		async function e() {
-			k && I.current && (await C(I.current, w(k), {
+			M && z.current && (await T(z.current, E(M), {
 				version: 10,
 				margin: 0,
 				scale: 3.5
-			}), N(!0));
+			}), I(!0));
 		}
 		e();
-	}, [k]), /* @__PURE__ */ b(o, { children: /* @__PURE__ */ x(g, {
+	}, [M]), /* @__PURE__ */ S(o, { children: /* @__PURE__ */ C(v, {
 		sx: {
 			position: "relative",
 			width: {
@@ -53,17 +61,17 @@ function O(y) {
 			mx: "auto"
 		},
 		children: [
-			O && /* @__PURE__ */ b(m, {
+			j && /* @__PURE__ */ S(g, {
 				type: "button",
 				onClick: () => {
-					O();
+					j();
 				},
 				sx: (e) => ({
 					position: "absolute",
 					top: e.spacing(2),
 					left: e.spacing(2)
 				}),
-				children: /* @__PURE__ */ b(i, {
+				children: /* @__PURE__ */ S(i, {
 					icon: "arrowBack",
 					wrap: !1,
 					sx: {
@@ -72,11 +80,11 @@ function O(y) {
 					}
 				})
 			}),
-			/* @__PURE__ */ x(T, { children: [/* @__PURE__ */ b(v, {
+			/* @__PURE__ */ C(O, { children: [/* @__PURE__ */ S(b, {
 				variant: "headline2",
 				sx: { mb: 3 },
 				children: "Activate Two-factor Authentication"
-			}), /* @__PURE__ */ x(v, {
+			}), /* @__PURE__ */ C(b, {
 				variant: "body1",
 				children: [
 					"After setting up 2FA, you’ll use an authenticator app as part of your login process, in addition to your existing password. If you log in using your Google",
@@ -84,53 +92,53 @@ function O(y) {
 					" or ORCiD account, you may need to use 2FA as part of",
 					"that process as well.",
 					" ",
-					/* @__PURE__ */ b(h, {
-						href: D,
+					/* @__PURE__ */ S(_, {
+						href: A,
 						children: "Learn more about 2FA"
 					}),
 					"."
 				]
 			})] }),
-			/* @__PURE__ */ b(T, { children: /* @__PURE__ */ x(E, { children: [/* @__PURE__ */ x(d, { children: [/* @__PURE__ */ b(v, {
+			/* @__PURE__ */ S(O, { children: /* @__PURE__ */ C(k, { children: [/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S(b, {
 				variant: "body1",
 				sx: { fontWeight: 700 },
 				children: "Step 1. Get one of these apps"
-			}), /* @__PURE__ */ b(v, {
+			}), /* @__PURE__ */ S(b, {
 				variant: "body1",
 				children: "Download and install one of these authentication apps to set up 2FA on your mobile device, tablet, or desktop. If you have one of these apps already installed, you can skip this step."
-			})] }), /* @__PURE__ */ x(_, {
+			})] }), /* @__PURE__ */ C(y, {
 				sx: (e) => ({
 					justifyContent: "space-between",
 					flexShrink: 0,
 					[e.breakpoints.down("sm")]: { gap: "20px" }
 				}),
 				children: [
-					/* @__PURE__ */ b(h, {
+					/* @__PURE__ */ S(_, {
 						href: "https://authy.com/download/",
 						children: "Authy"
 					}),
-					/* @__PURE__ */ b(h, {
+					/* @__PURE__ */ S(_, {
 						href: "https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app",
 						children: "DUO Mobile"
 					}),
-					/* @__PURE__ */ b(h, {
+					/* @__PURE__ */ S(_, {
 						href: "https://googleauthenticator.net/",
 						children: "Google Authenticator"
 					}),
-					/* @__PURE__ */ b(h, {
+					/* @__PURE__ */ S(_, {
 						href: "https://www.microsoft.com/en-us/security/mobile-authenticator-app",
 						children: "Microsoft Authenticator"
 					})
 				]
 			})] }) }),
-			/* @__PURE__ */ b(p, {}),
-			/* @__PURE__ */ b(T, { children: /* @__PURE__ */ x(E, { children: [/* @__PURE__ */ x(d, { children: [
-				/* @__PURE__ */ b(v, {
+			/* @__PURE__ */ S(m, {}),
+			/* @__PURE__ */ S(O, { children: /* @__PURE__ */ C(k, { children: [/* @__PURE__ */ C(f, { children: [
+				/* @__PURE__ */ S(b, {
 					variant: "body1",
 					sx: { fontWeight: 700 },
 					children: "Step 2. Scan the QR Code"
 				}),
-				/* @__PURE__ */ x(v, {
+				/* @__PURE__ */ C(b, {
 					component: "ol",
 					variant: "body1",
 					sx: {
@@ -138,84 +146,86 @@ function O(y) {
 						my: 1
 					},
 					children: [
-						/* @__PURE__ */ b("li", { children: "Open your authenticator app" }),
-						/* @__PURE__ */ b("li", { children: "Tap the \"+\" button" }),
-						/* @__PURE__ */ b("li", { children: "Use your camera to scan the image to the right" })
+						/* @__PURE__ */ S("li", { children: "Open your authenticator app" }),
+						/* @__PURE__ */ S("li", { children: "Tap the \"+\" button" }),
+						/* @__PURE__ */ S("li", { children: "Use your camera to scan the image to the right" })
 					]
 				}),
-				/* @__PURE__ */ b(h, {
+				/* @__PURE__ */ S(_, {
 					onClick: () => {
-						F(!0);
+						R(!0);
 					},
 					children: "Can't use your camera?"
 				}),
-				/* @__PURE__ */ b(s, {
-					secret: k?.secret ?? "",
-					open: P,
-					onClose: () => F(!1)
+				/* @__PURE__ */ S(s, {
+					secret: M?.secret ?? "",
+					open: L,
+					onClose: () => R(!1)
 				})
-			] }), /* @__PURE__ */ x(d, {
+			] }), /* @__PURE__ */ C(f, {
 				sx: {
 					display: "flex",
 					justifyContent: "center",
 					alignItems: "middle",
 					height: "auto"
 				},
-				children: [!M && /* @__PURE__ */ b(n, { size: 50 }), /* @__PURE__ */ b("canvas", {
-					style: { display: M ? void 0 : "none" },
-					ref: I
+				children: [!F && /* @__PURE__ */ S(n, { size: 50 }), /* @__PURE__ */ S("canvas", {
+					style: { display: F ? void 0 : "none" },
+					ref: z
 				})]
 			})] }) }),
-			/* @__PURE__ */ b(p, {}),
-			/* @__PURE__ */ b(T, { children: /* @__PURE__ */ x(E, { children: [/* @__PURE__ */ x(d, { children: [/* @__PURE__ */ b(v, {
+			/* @__PURE__ */ S(m, {}),
+			/* @__PURE__ */ S(O, { children: /* @__PURE__ */ C(k, { children: [/* @__PURE__ */ C(f, { children: [/* @__PURE__ */ S(b, {
 				variant: "body1",
 				sx: { fontWeight: 700 },
 				children: "Step 3. Enter the Verification Code"
-			}), /* @__PURE__ */ b(v, {
+			}), /* @__PURE__ */ S(b, {
 				variant: "body1",
 				children: "After scanning in the QR code in step 2, your app will provide a 6-digit code. Enter it in in the field to the right."
-			})] }), /* @__PURE__ */ b("form", {
+			})] }), /* @__PURE__ */ C("form", {
 				onSubmit: (e) => {
-					e.preventDefault(), L({
-						secretId: k.secretId,
-						totp: A
+					e.preventDefault(), V({
+						secretId: M.secretId,
+						totp: N
 					});
 				},
-				children: /* @__PURE__ */ x(_, {
+				children: [/* @__PURE__ */ C(y, {
 					direction: "row",
 					sx: {
 						gap: 2,
 						height: "48px"
 					},
-					children: [/* @__PURE__ */ b(a, {
+					children: [/* @__PURE__ */ S(a, {
 						autoFocus: !0,
 						slotProps: { htmlInput: {
 							...t,
-							maxLength: k?.digits
+							maxLength: M?.digits,
+							"aria-describedby": G ? B : void 0
 						} },
-						value: A,
+						value: N,
+						error: G,
 						onChange: (e) => {
-							j(e.target.value);
+							U && W(), P(e.target.value);
 						}
-					}), /* @__PURE__ */ b(f, {
+					}), /* @__PURE__ */ S(p, {
 						type: "submit",
 						variant: "contained",
 						sx: { flexShrink: 0 },
-						disabled: R || A.length != k?.digits,
+						disabled: H || N.length != M?.digits,
 						children: "Activate"
 					})]
-				})
-			})] }) }),
-			z && /* @__PURE__ */ b(e, {
-				variant: "danger",
-				isGlobal: !1,
-				description: z.reason.toLowerCase().includes("invalid totp code") ? `${z.reason}. Please ensure automatic date and time is enabled in your device settings and try again.` : z.reason
-			})
+				}), G && /* @__PURE__ */ S(h, {
+					id: B,
+					error: !0,
+					sx: { mt: 1 },
+					children: `${U.reason}. Please ensure automatic date and time is enabled in your device settings and try again.`
+				})]
+			})] }) })
 		]
 	}) });
 }
-var k = { toOtpAuthUrl: w };
+var M = { toOtpAuthUrl: E };
 //#endregion
-export { k as EXPORTED_FOR_UNIT_TESTING, D as TWO_FACTOR_DOCS_LINK, O as default };
+export { M as EXPORTED_FOR_UNIT_TESTING, A as TWO_FACTOR_DOCS_LINK, j as default };
 
 //# sourceMappingURL=TwoFactorEnrollmentForm.js.map

package/dist/components/Authentication/TwoFactorEnrollmentForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TwoFactorEnrollmentForm.js","names":[],"sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"sourcesContent":["import { StyledOuterContainer } from '@/components/styled/LeftRightPanel'\nimport {\n  NUMERIC_CODE_HTML_INPUT_PROPS,\n  TOTP_CLOCK_SKEW_ERROR_APPENDAGE,\n} from '@/components/Authentication/Constants'\nimport { useFinishTwoFactorEnrollment } from '@/synapse-queries/auth/useTwoFactorEnrollment'\nimport { StyledComponent } from '@emotion/styled'\nimport {\n  Box,\n  BoxProps,\n  Button,\n  Divider,\n  IconButton,\n  Link,\n  Paper,\n  Stack,\n  styled,\n  Typography,\n} from '@mui/material'\nimport { TotpSecret } from '@sage-bionetworks/synapse-types'\nimport * as qrcode from 'qrcode'\n// qrcode is CJS-only; use namespace import for Vite dev mode CJS interop.\nconst { toCanvas } = qrcode\nimport { useEffect, useRef, useState } from 'react'\nimport FullWidthAlert from '../FullWidthAlert/FullWidthAlert'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport TextField from '../TextField/TextField'\nimport TwoFactorSecretDialog from './TwoFactorSecretDialog'\n\n/**\n * Returns a URL that can be used to generate a QR code that 2FA authenticator apps can interpret.\n * This uses the username fro TotpSecret to create the friendly name for the account in the authenticator app.\n * @param secret\n */\nfunction toOtpAuthUrl(secret: TotpSecret) {\n  return `otpauth://totp/Synapse:${secret.username}?secret=${secret.secret}&issuer=Sage%20Bionetworks&algorithm=${secret.alg}&digits=${secret.digits}&period=${secret.period}`\n}\n\nconst Section: StyledComponent<BoxProps> = styled(\n  (props: BoxProps) => (\n    <Box\n      sx={{\n        my: 3,\n        ...props.sx,\n      }}\n      {...props}\n    />\n  ),\n  {\n    label: 'Section',\n  },\n)(() => ({}))\n\nconst SectionInnerGrid = styled(Box, { label: 'SectionInnerGrid' })(\n  ({ theme }) => ({\n    display: 'grid',\n    gridTemplateColumns: 'auto 200px',\n    columnGap: theme.spacing(5),\n    [theme.breakpoints.down('sm')]: {\n      gridTemplateColumns: '1fr',\n      gap: '18px',\n    },\n  }),\n)\n\nexport const TWO_FACTOR_DOCS_LINK =\n  'https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account'\n\nexport type TwoFactorEnrollmentFormProps = {\n  totpSecret: TotpSecret\n  onTwoFactorEnrollmentSuccess: () => void\n  onBackClicked: () => void\n}\n\nexport default function TwoFactorEnrollmentForm(\n  props: TwoFactorEnrollmentFormProps,\n) {\n  const { onTwoFactorEnrollmentSuccess, onBackClicked, totpSecret } = props\n\n  const [totp, setTotp] = useState('')\n  const [hasQrCode, setHasQrCode] = useState(false)\n  const [showSecretInModal, setShowSecretInModal] = useState(false)\n  const qrCodeCanvasElement = useRef<HTMLCanvasElement>(null)\n\n  const {\n    mutate: finishEnrollment,\n    isPending: isFinishingEnrollment,\n    error,\n  } = useFinishTwoFactorEnrollment({\n    onSuccess: onTwoFactorEnrollmentSuccess,\n  })\n\n  useEffect(() => {\n    async function createQrCode() {\n      if (totpSecret && qrCodeCanvasElement.current) {\n        await toCanvas(qrCodeCanvasElement.current, toOtpAuthUrl(totpSecret), {\n          version: 10,\n          margin: 0,\n          scale: 3.5,\n        })\n        setHasQrCode(true)\n      }\n    }\n    void createQrCode()\n  }, [totpSecret])\n\n  return (\n    <StyledOuterContainer>\n      <Paper\n        sx={{\n          position: 'relative',\n          width: { xs: '100%', md: '800px' },\n          py: 6.5,\n          px: 8,\n          mx: 'auto',\n        }}\n      >\n        {onBackClicked && (\n          <IconButton\n            type=\"button\"\n            onClick={() => {\n              onBackClicked()\n            }}\n            sx={theme => ({\n              position: 'absolute',\n              top: theme.spacing(2),\n              left: theme.spacing(2),\n            })}\n          >\n            <IconSvg\n              icon=\"arrowBack\"\n              wrap={false}\n              sx={{ height: '24px', width: '24px' }}\n            />\n          </IconButton>\n        )}\n        <Section>\n          <Typography variant=\"headline2\" sx={{ mb: 3 }}>\n            Activate Two-factor Authentication\n          </Typography>\n          <Typography variant=\"body1\">\n            After setting up 2FA, you’ll use an authenticator app as part of\n            your login process, in addition to your existing password. If you\n            log in using your Google\n            {/* oxlint-disable-next-line no-constant-binary-expression -- Remove conditionality when NIH RAS login is supported */}\n            {false && ', NIH RAS,'} or ORCiD account, you may need to use 2FA as\n            part of\n            {/*those processes*/}\n            that process as well.{' '}\n            <Link href={TWO_FACTOR_DOCS_LINK}>Learn more about 2FA</Link>.\n          </Typography>\n        </Section>\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 1. Get one of these apps\n              </Typography>\n              <Typography variant=\"body1\">\n                Download and install one of these authentication apps to set up\n                2FA on your mobile device, tablet, or desktop. If you have one\n                of these apps already installed, you can skip this step.\n              </Typography>\n            </Box>\n            <Stack\n              sx={theme => ({\n                justifyContent: 'space-between',\n                flexShrink: 0,\n                [theme.breakpoints.down('sm')]: {\n                  gap: '20px',\n                },\n              })}\n            >\n              <Link href={'https://authy.com/download/'}>Authy</Link>\n              <Link\n                href={\n                  'https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app'\n                }\n              >\n                DUO Mobile\n              </Link>\n              <Link href={'https://googleauthenticator.net/'}>\n                Google Authenticator\n              </Link>\n              <Link\n                href={\n                  'https://www.microsoft.com/en-us/security/mobile-authenticator-app'\n                }\n              >\n                Microsoft Authenticator\n              </Link>\n            </Stack>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 2. Scan the QR Code\n              </Typography>\n              <Typography component=\"ol\" variant=\"body1\" sx={{ pl: 2, my: 1 }}>\n                <li>Open your authenticator app</li>\n                <li>Tap the &quot;+&quot; button</li>\n                <li>Use your camera to scan the image to the right</li>\n              </Typography>\n              <Link\n                onClick={() => {\n                  setShowSecretInModal(true)\n                }}\n              >\n                Can&apos;t use your camera?\n              </Link>\n              <TwoFactorSecretDialog\n                secret={totpSecret?.secret ?? ''}\n                open={showSecretInModal}\n                onClose={() => setShowSecretInModal(false)}\n              />\n            </Box>\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'middle',\n                height: 'auto',\n              }}\n            >\n              {!hasQrCode && <SynapseSpinner size={50} />}\n              <canvas\n                style={{ display: hasQrCode ? undefined : 'none' }}\n                ref={qrCodeCanvasElement}\n              />\n            </Box>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 3. Enter the Verification Code\n              </Typography>\n              <Typography variant=\"body1\">\n                After scanning in the QR code in step 2, your app will provide a\n                6-digit code. Enter it in in the field to the right.\n              </Typography>\n            </Box>\n            <form\n              onSubmit={e => {\n                e.preventDefault()\n                finishEnrollment({\n                  secretId: totpSecret.secretId,\n                  totp,\n                })\n              }}\n            >\n              <Stack\n                direction={'row'}\n                sx={{\n                  gap: 2,\n                  height: '48px',\n                }}\n              >\n                <TextField\n                  autoFocus\n                  slotProps={{\n                    htmlInput: {\n                      ...NUMERIC_CODE_HTML_INPUT_PROPS,\n                      maxLength: totpSecret?.digits,\n                    },\n                  }}\n                  value={totp}\n                  onChange={e => {\n                    setTotp(e.target.value)\n                  }}\n                />\n                <Button\n                  type={'submit'}\n                  variant={'contained'}\n                  sx={{ flexShrink: 0 }}\n                  disabled={\n                    isFinishingEnrollment || totp.length != totpSecret?.digits\n                  }\n                >\n                  Activate\n                </Button>\n              </Stack>\n            </form>\n          </SectionInnerGrid>\n        </Section>\n        {error && (\n          <FullWidthAlert\n            variant={'danger'}\n            isGlobal={false}\n            description={\n              error.reason.toLowerCase().includes('invalid totp code')\n                ? `${error.reason}. ${TOTP_CLOCK_SKEW_ERROR_APPENDAGE}`\n                : error.reason\n            }\n          />\n        )}\n      </Paper>\n    </StyledOuterContainer>\n  )\n}\n\nexport const EXPORTED_FOR_UNIT_TESTING = { toOtpAuthUrl }\n"],"mappings":"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"}
+{"version":3,"file":"TwoFactorEnrollmentForm.js","names":[],"sources":["../../../src/components/Authentication/TwoFactorEnrollmentForm.tsx"],"sourcesContent":["import { StyledOuterContainer } from '@/components/styled/LeftRightPanel'\nimport {\n  NUMERIC_CODE_HTML_INPUT_PROPS,\n  TOTP_CLOCK_SKEW_ERROR_APPENDAGE,\n} from '@/components/Authentication/Constants'\nimport { useFinishTwoFactorEnrollment } from '@/synapse-queries/auth/useTwoFactorEnrollment'\nimport { StyledComponent } from '@emotion/styled'\nimport {\n  Box,\n  BoxProps,\n  Button,\n  Divider,\n  FormHelperText,\n  IconButton,\n  Link,\n  Paper,\n  Stack,\n  styled,\n  Typography,\n} from '@mui/material'\nimport { TotpSecret } from '@sage-bionetworks/synapse-types'\nimport * as qrcode from 'qrcode'\n// qrcode is CJS-only; use namespace import for Vite dev mode CJS interop.\nconst { toCanvas } = qrcode\nimport { useEffect, useId, useRef, useState } from 'react'\nimport IconSvg from '../IconSvg/IconSvg'\nimport { SynapseSpinner } from '../LoadingScreen/LoadingScreen'\nimport TextField from '../TextField/TextField'\nimport TwoFactorSecretDialog from './TwoFactorSecretDialog'\nimport { displayToast } from '../ToastMessage/ToastMessage'\nimport { SynapseClientError } from '@sage-bionetworks/synapse-client/util/SynapseClientError'\n\n/**\n * Returns a URL that can be used to generate a QR code that 2FA authenticator apps can interpret.\n * This uses the username fro TotpSecret to create the friendly name for the account in the authenticator app.\n * @param secret\n */\nfunction toOtpAuthUrl(secret: TotpSecret) {\n  return `otpauth://totp/Synapse:${secret.username}?secret=${secret.secret}&issuer=Sage%20Bionetworks&algorithm=${secret.alg}&digits=${secret.digits}&period=${secret.period}`\n}\n\nfunction isInvalidTotpCodeError(error: SynapseClientError) {\n  return error.reason.toLowerCase().includes('invalid totp code')\n}\n\nconst Section: StyledComponent<BoxProps> = styled(\n  (props: BoxProps) => (\n    <Box\n      sx={{\n        my: 3,\n        ...props.sx,\n      }}\n      {...props}\n    />\n  ),\n  {\n    label: 'Section',\n  },\n)(() => ({}))\n\nconst SectionInnerGrid = styled(Box, { label: 'SectionInnerGrid' })(\n  ({ theme }) => ({\n    display: 'grid',\n    gridTemplateColumns: 'auto 200px',\n    columnGap: theme.spacing(5),\n    [theme.breakpoints.down('sm')]: {\n      gridTemplateColumns: '1fr',\n      gap: '18px',\n    },\n  }),\n)\n\nexport const TWO_FACTOR_DOCS_LINK =\n  'https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account'\n\nexport type TwoFactorEnrollmentFormProps = {\n  totpSecret: TotpSecret\n  onTwoFactorEnrollmentSuccess: () => void\n  onBackClicked: () => void\n}\n\nexport default function TwoFactorEnrollmentForm(\n  props: TwoFactorEnrollmentFormProps,\n) {\n  const { onTwoFactorEnrollmentSuccess, onBackClicked, totpSecret } = props\n\n  const [totp, setTotp] = useState('')\n  const [hasQrCode, setHasQrCode] = useState(false)\n  const [showSecretInModal, setShowSecretInModal] = useState(false)\n  const qrCodeCanvasElement = useRef<HTMLCanvasElement>(null)\n  const invalidCodeErrorId = useId()\n\n  const {\n    mutate: finishEnrollment,\n    isPending: isFinishingEnrollment,\n    error,\n    reset: resetEnrollmentError,\n  } = useFinishTwoFactorEnrollment({\n    onSuccess: onTwoFactorEnrollmentSuccess,\n    onError: error => {\n      // An invalid code is reported on the code field itself; anything else has no field to attach to\n      if (!isInvalidTotpCodeError(error)) {\n        displayToast(error.reason, 'danger')\n      }\n    },\n  })\n\n  const showInvalidCodeError = error != null && isInvalidTotpCodeError(error)\n\n  useEffect(() => {\n    async function createQrCode() {\n      if (totpSecret && qrCodeCanvasElement.current) {\n        await toCanvas(qrCodeCanvasElement.current, toOtpAuthUrl(totpSecret), {\n          version: 10,\n          margin: 0,\n          scale: 3.5,\n        })\n        setHasQrCode(true)\n      }\n    }\n    void createQrCode()\n  }, [totpSecret])\n\n  return (\n    <StyledOuterContainer>\n      <Paper\n        sx={{\n          position: 'relative',\n          width: { xs: '100%', md: '800px' },\n          py: 6.5,\n          px: 8,\n          mx: 'auto',\n        }}\n      >\n        {onBackClicked && (\n          <IconButton\n            type=\"button\"\n            onClick={() => {\n              onBackClicked()\n            }}\n            sx={theme => ({\n              position: 'absolute',\n              top: theme.spacing(2),\n              left: theme.spacing(2),\n            })}\n          >\n            <IconSvg\n              icon=\"arrowBack\"\n              wrap={false}\n              sx={{ height: '24px', width: '24px' }}\n            />\n          </IconButton>\n        )}\n        <Section>\n          <Typography variant=\"headline2\" sx={{ mb: 3 }}>\n            Activate Two-factor Authentication\n          </Typography>\n          <Typography variant=\"body1\">\n            After setting up 2FA, you’ll use an authenticator app as part of\n            your login process, in addition to your existing password. If you\n            log in using your Google\n            {/* oxlint-disable-next-line no-constant-binary-expression -- Remove conditionality when NIH RAS login is supported */}\n            {false && ', NIH RAS,'} or ORCiD account, you may need to use 2FA as\n            part of\n            {/*those processes*/}\n            that process as well.{' '}\n            <Link href={TWO_FACTOR_DOCS_LINK}>Learn more about 2FA</Link>.\n          </Typography>\n        </Section>\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 1. Get one of these apps\n              </Typography>\n              <Typography variant=\"body1\">\n                Download and install one of these authentication apps to set up\n                2FA on your mobile device, tablet, or desktop. If you have one\n                of these apps already installed, you can skip this step.\n              </Typography>\n            </Box>\n            <Stack\n              sx={theme => ({\n                justifyContent: 'space-between',\n                flexShrink: 0,\n                [theme.breakpoints.down('sm')]: {\n                  gap: '20px',\n                },\n              })}\n            >\n              <Link href={'https://authy.com/download/'}>Authy</Link>\n              <Link\n                href={\n                  'https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app'\n                }\n              >\n                DUO Mobile\n              </Link>\n              <Link href={'https://googleauthenticator.net/'}>\n                Google Authenticator\n              </Link>\n              <Link\n                href={\n                  'https://www.microsoft.com/en-us/security/mobile-authenticator-app'\n                }\n              >\n                Microsoft Authenticator\n              </Link>\n            </Stack>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 2. Scan the QR Code\n              </Typography>\n              <Typography component=\"ol\" variant=\"body1\" sx={{ pl: 2, my: 1 }}>\n                <li>Open your authenticator app</li>\n                <li>Tap the &quot;+&quot; button</li>\n                <li>Use your camera to scan the image to the right</li>\n              </Typography>\n              <Link\n                onClick={() => {\n                  setShowSecretInModal(true)\n                }}\n              >\n                Can&apos;t use your camera?\n              </Link>\n              <TwoFactorSecretDialog\n                secret={totpSecret?.secret ?? ''}\n                open={showSecretInModal}\n                onClose={() => setShowSecretInModal(false)}\n              />\n            </Box>\n            <Box\n              sx={{\n                display: 'flex',\n                justifyContent: 'center',\n                alignItems: 'middle',\n                height: 'auto',\n              }}\n            >\n              {!hasQrCode && <SynapseSpinner size={50} />}\n              <canvas\n                style={{ display: hasQrCode ? undefined : 'none' }}\n                ref={qrCodeCanvasElement}\n              />\n            </Box>\n          </SectionInnerGrid>\n        </Section>\n        <Divider />\n        <Section>\n          <SectionInnerGrid>\n            <Box>\n              <Typography variant=\"body1\" sx={{ fontWeight: 700 }}>\n                Step 3. Enter the Verification Code\n              </Typography>\n              <Typography variant=\"body1\">\n                After scanning in the QR code in step 2, your app will provide a\n                6-digit code. Enter it in in the field to the right.\n              </Typography>\n            </Box>\n            <form\n              onSubmit={e => {\n                e.preventDefault()\n                finishEnrollment({\n                  secretId: totpSecret.secretId,\n                  totp,\n                })\n              }}\n            >\n              <Stack\n                direction={'row'}\n                sx={{\n                  gap: 2,\n                  height: '48px',\n                }}\n              >\n                <TextField\n                  autoFocus\n                  slotProps={{\n                    htmlInput: {\n                      ...NUMERIC_CODE_HTML_INPUT_PROPS,\n                      maxLength: totpSecret?.digits,\n                      'aria-describedby': showInvalidCodeError\n                        ? invalidCodeErrorId\n                        : undefined,\n                    },\n                  }}\n                  value={totp}\n                  error={showInvalidCodeError}\n                  onChange={e => {\n                    // Clear a previous failure as soon as the user edits the code\n                    if (error) {\n                      resetEnrollmentError()\n                    }\n                    setTotp(e.target.value)\n                  }}\n                />\n                <Button\n                  type={'submit'}\n                  variant={'contained'}\n                  sx={{ flexShrink: 0 }}\n                  disabled={\n                    isFinishingEnrollment || totp.length != totpSecret?.digits\n                  }\n                >\n                  Activate\n                </Button>\n              </Stack>\n              {/* The message sits outside the input's form control so that it can wrap\n                  against the full width of the card rather than the width of the input */}\n              {showInvalidCodeError && (\n                <FormHelperText id={invalidCodeErrorId} error sx={{ mt: 1 }}>\n                  {`${error.reason}. ${TOTP_CLOCK_SKEW_ERROR_APPENDAGE}`}\n                </FormHelperText>\n              )}\n            </form>\n          </SectionInnerGrid>\n        </Section>\n      </Paper>\n    </StyledOuterContainer>\n  )\n}\n\nexport const EXPORTED_FOR_UNIT_TESTING = { toOtpAuthUrl }\n"],"mappings":"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"}

package/dist/components/DataGrid/SynapseGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/SynapseGrid.tsx"],"names":[],"mappings":"AAsBA,OAAO,EACL,iBAAiB,EAGlB,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EACL,GAAG,EAOJ,MAAM,OAAO,CAAA;AAkBd,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACpD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,CAAA;AAghBD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAM3C;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"SynapseGrid.d.ts","sourceRoot":"","sources":["../../../src/components/DataGrid/SynapseGrid.tsx"],"names":[],"mappings":"AAuBA,OAAO,EACL,iBAAiB,EAGlB,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EACL,GAAG,EAOJ,MAAM,OAAO,CAAA;AAqBd,MAAM,MAAM,gBAAgB,GAAG;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,cAAc,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACpD,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,CAAA;AAghBD,iBAAS,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAM3C;AAED,eAAe,WAAW,CAAA"}