synapse-react-client 4.0.41 → 4.0.43

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"}