synapse-react-client 4.0.38 → 4.0.41

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

@@ -1 +1 @@
-{"version":3,"file":"RegenerateBackupCodesWarning.js","names":[],"sources":["../../../src/components/Authentication/RegenerateBackupCodesWarning.tsx"],"sourcesContent":["import FrontHand from '@/assets/icons/FrontHand'\nimport { Avatar, Box, Button, Paper, Typography, useTheme } from '@mui/material'\n\ntype RegenerateBackupCodesWarningProps = {\n  onConfirm: () => void\n  onCancel: () => void\n}\n\nexport function RegenerateBackupCodesWarning(\n  props: RegenerateBackupCodesWarningProps,\n) {\n  const { onConfirm, onCancel } = props\n  const theme = useTheme()\n  return (\n    <Paper sx={{ m: 'auto', maxWidth: '500px', p: 8 }}>\n      <Avatar\n        sx={{\n          bgcolor: theme.palette.primary.main,\n          height: '100px',\n          width: '100px',\n        }}\n      >\n        <FrontHand sx={{ height: '54px', width: '54px' }} />\n      </Avatar>\n      <Box sx={{ my: 5 }}>\n        <Typography variant={'headline1'} sx={{ mb: 2 }}>\n          Really regenerate backup codes?\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          This will invalidate your old backup codes\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          If you click “yes”, below, we will generate 10 new backup codes,\n          replacing your old ones, which will no longer function.\n        </Typography>\n      </Box>\n      <Button\n        fullWidth\n        variant=\"contained\"\n        onClick={onConfirm}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Yes, regenerate backup codes\n      </Button>\n      <Button\n        fullWidth\n        variant=\"text\"\n        onClick={onCancel}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Nevermind\n      </Button>\n    </Paper>\n  )\n}\n"],"mappings":";;;;AAQA,SAAgB,EACd,GACA;CACA,IAAM,EAAE,cAAW,gBAAa;CAEhC,OACE,kBAAC,GAAD;EAAO,IAAI;GAAE,GAAG;GAAQ,UAAU;GAAS,GAAG;EAAE;YAAhD;GACE,kBAAC,GAAD;IACE,IAAI;KACF,SALM,EAKG,EAAM,QAAQ,QAAQ;KAC/B,QAAQ;KACR,OAAO;IACT;cAEA,kBAAC,GAAD,EAAW,IAAI;KAAE,QAAQ;KAAQ,OAAO;IAAO,EAAI,CAAA;GAC7C,CAAA;GACR,kBAAC,GAAD;IAAK,IAAI,EAAE,IAAI,EAAE;cAAjB;KACE,kBAAC,GAAD;MAAY,SAAS;MAAa,IAAI,EAAE,IAAI,EAAE;gBAAG;KAErC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAEjC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAGjC,CAAA;IACT;;GACL,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;GACR,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;EACH;;AAEX"}
+{"version":3,"file":"RegenerateBackupCodesWarning.js","names":[],"sources":["../../../src/components/Authentication/RegenerateBackupCodesWarning.tsx"],"sourcesContent":["import FrontHand from '@/assets/icons/FrontHand'\nimport { Avatar, Box, Button, Paper, Typography, useTheme } from '@mui/material'\n\ntype RegenerateBackupCodesWarningProps = {\n  onConfirm: () => void\n  onCancel: () => void\n}\n\nexport function RegenerateBackupCodesWarning(\n  props: RegenerateBackupCodesWarningProps,\n) {\n  const { onConfirm, onCancel } = props\n  const theme = useTheme()\n  return (\n    <Paper sx={{ m: 'auto', maxWidth: '500px', p: { xs: '20px', md: 8 } }}>\n      <Avatar\n        sx={{\n          bgcolor: theme.palette.primary.main,\n          height: '100px',\n          width: '100px',\n        }}\n      >\n        <FrontHand sx={{ height: '54px', width: '54px' }} />\n      </Avatar>\n      <Box sx={{ my: 5 }}>\n        <Typography variant={'headline1'} sx={{ mb: 2 }}>\n          Really regenerate backup codes?\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          This will invalidate your old backup codes\n        </Typography>\n        <Typography variant={'body1'} sx={{ my: 1 }}>\n          If you click “yes”, below, we will generate 10 new backup codes,\n          replacing your old ones, which will no longer function.\n        </Typography>\n      </Box>\n      <Button\n        fullWidth\n        variant=\"contained\"\n        onClick={onConfirm}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Yes, regenerate backup codes\n      </Button>\n      <Button\n        fullWidth\n        variant=\"text\"\n        onClick={onCancel}\n        sx={{ height: '50px', my: 1 }}\n      >\n        Nevermind\n      </Button>\n    </Paper>\n  )\n}\n"],"mappings":";;;;AAQA,SAAgB,EACd,GACA;CACA,IAAM,EAAE,cAAW,gBAAa;CAEhC,OACE,kBAAC,GAAD;EAAO,IAAI;GAAE,GAAG;GAAQ,UAAU;GAAS,GAAG;IAAE,IAAI;IAAQ,IAAI;GAAE;EAAE;YAApE;GACE,kBAAC,GAAD;IACE,IAAI;KACF,SALM,EAKG,EAAM,QAAQ,QAAQ;KAC/B,QAAQ;KACR,OAAO;IACT;cAEA,kBAAC,GAAD,EAAW,IAAI;KAAE,QAAQ;KAAQ,OAAO;IAAO,EAAI,CAAA;GAC7C,CAAA;GACR,kBAAC,GAAD;IAAK,IAAI,EAAE,IAAI,EAAE;cAAjB;KACE,kBAAC,GAAD;MAAY,SAAS;MAAa,IAAI,EAAE,IAAI,EAAE;gBAAG;KAErC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAEjC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAS;MAAS,IAAI,EAAE,IAAI,EAAE;gBAAG;KAGjC,CAAA;IACT;;GACL,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;GACR,kBAAC,GAAD;IACE,WAAA;IACA,SAAQ;IACR,SAAS;IACT,IAAI;KAAE,QAAQ;KAAQ,IAAI;IAAE;cAC7B;GAEO,CAAA;EACH;;AAEX"}

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

@@ -1 +1 @@
-{"version":3,"file":"TOTPForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TOTPForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAQ9C,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CACjD,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAwDpD"}
+{"version":3,"file":"TOTPForm.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TOTPForm.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAS9C,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,CAAA;CACjD,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,2CA6DpD"}

package/dist/components/Authentication/TOTPForm.js

@@ -1,9 +1,10 @@
-import { useState as e } from "react";
-import { Box as t, Button as n } from "@mui/material";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { MuiOtpInput as a } from "mui-one-time-password-input";
+import { NUMERIC_CODE_HTML_INPUT_PROPS as e } from "./Constants.js";
+import { useState as t } from "react";
+import { Box as n, Button as r } from "@mui/material";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { MuiOtpInput as o } from "mui-one-time-password-input";
 //#region src/components/Authentication/TOTPForm.tsx
-var o = 6, s = [
+var s = 6, c = [
 	"0",
 	"1",
 	"2",
@@ -15,15 +16,16 @@ var o = 6, s = [
 	"8",
 	"9"
 ];
-function c(c) {
-	let { onSubmit: l, loginIsPending: u } = c, [d, f] = e("");
-	return /* @__PURE__ */ i(t, { children: [/* @__PURE__ */ r(a, {
+function l(l) {
+	let { onSubmit: u, loginIsPending: d } = l, [f, p] = t("");
+	return /* @__PURE__ */ a(n, { children: [/* @__PURE__ */ i(o, {
 		autoFocus: !0,
-		length: o,
-		value: d,
-		onChange: f,
-		onComplete: l,
-		validateChar: (e) => s.includes(e) || e === "",
+		length: s,
+		TextFieldsProps: { slotProps: { htmlInput: e } },
+		value: f,
+		onChange: p,
+		onComplete: u,
+		validateChar: (e) => c.includes(e) || e === "",
 		gap: "2px",
 		sx: {
 			mx: "auto",
@@ -42,7 +44,7 @@ function c(c) {
 			},
 			".MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root": { borderRadius: 0 }
 		}
-	}), /* @__PURE__ */ r(n, {
+	}), /* @__PURE__ */ i(r, {
 		fullWidth: !0,
 		type: "submit",
 		color: "primary",
@@ -52,14 +54,14 @@ function c(c) {
 			mt: 4,
 			mb: 2
 		},
-		disabled: d.length !== o || u,
+		disabled: f.length !== s || d,
 		onClick: (e) => {
-			e.preventDefault(), l(d);
+			e.preventDefault(), u(f);
 		},
-		children: u ? "Verifying..." : "Submit"
+		children: d ? "Verifying..." : "Submit"
 	})] });
 }
 //#endregion
-export { c as default };
+export { l as default };
 
 //# sourceMappingURL=TOTPForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TOTPForm.js","names":[],"sources":["../../../src/components/Authentication/TOTPForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { MuiOtpInput } from 'mui-one-time-password-input'\nimport { useState } from 'react'\n\nconst TOTP_LENGTH = 6\nconst DIGIT_CHARACTERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']\n\ntype TOTPFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function TOTPForm(props: TOTPFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [verificationCode, setVerificationCode] = useState('')\n  return (\n    <Box>\n      <MuiOtpInput\n        autoFocus\n        length={TOTP_LENGTH}\n        value={verificationCode}\n        onChange={setVerificationCode}\n        onComplete={onSubmit}\n        validateChar={(character: string) => {\n          return DIGIT_CHARACTERS.includes(character) || character === ''\n        }}\n        gap={'2px'}\n        sx={{\n          mx: 'auto',\n          maxWidth: '350px',\n          '.MuiInputBase-root': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n          },\n          '.MuiFormControl-root:first-of-type > .MuiInputBase-root': {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '.MuiFormControl-root:last-of-type > .MuiInputBase-root': {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n          },\n          '.MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root':\n            {\n              borderRadius: 0,\n            },\n        }}\n      />\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={verificationCode.length !== TOTP_LENGTH || loginIsPending}\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(verificationCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,IAAc,GACd,IAAmB;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAO1E,SAAwB,EAAS,GAAsB;CACrD,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAkB,KAAuB,EAAS,EAAE;CAC3D,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAA;EACA,QAAQ;EACR,OAAO;EACP,UAAU;EACV,YAAY;EACZ,eAAe,MACN,EAAiB,SAAS,CAAS,KAAK,MAAc;EAE/D,KAAK;EACL,IAAI;GACF,IAAI;GACJ,UAAU;GACV,sBAAsB;IACpB,aAAa;IACb,cAAc;GAChB;GACA,2DAA2D;IACzD,sBAAsB;IACtB,yBAAyB;GAC3B;GACA,0DAA0D;IACxD,qBAAqB;IACrB,wBAAwB;GAC1B;GACA,oFACE,EACE,cAAc,EAChB;EACJ;CACD,CAAA,GACD,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UAAU,EAAiB,WAAW,KAAe;EACrD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAgB;EAC3B;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}
+{"version":3,"file":"TOTPForm.js","names":[],"sources":["../../../src/components/Authentication/TOTPForm.tsx"],"sourcesContent":["import { UseLoginReturn } from '@/utils/hooks'\nimport { Box, Button } from '@mui/material'\nimport { MuiOtpInput } from 'mui-one-time-password-input'\nimport { useState } from 'react'\nimport { NUMERIC_CODE_HTML_INPUT_PROPS } from './Constants'\n\nconst TOTP_LENGTH = 6\nconst DIGIT_CHARACTERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']\n\ntype TOTPFormProps = {\n  onSubmit: (value: string) => void\n  loginIsPending: UseLoginReturn['loginIsPending']\n}\n\nexport default function TOTPForm(props: TOTPFormProps) {\n  const { onSubmit, loginIsPending } = props\n  const [verificationCode, setVerificationCode] = useState('')\n  return (\n    <Box>\n      <MuiOtpInput\n        autoFocus\n        length={TOTP_LENGTH}\n        TextFieldsProps={{\n          slotProps: {\n            htmlInput: NUMERIC_CODE_HTML_INPUT_PROPS,\n          },\n        }}\n        value={verificationCode}\n        onChange={setVerificationCode}\n        onComplete={onSubmit}\n        validateChar={(character: string) => {\n          return DIGIT_CHARACTERS.includes(character) || character === ''\n        }}\n        gap={'2px'}\n        sx={{\n          mx: 'auto',\n          maxWidth: '350px',\n          '.MuiInputBase-root': {\n            paddingLeft: '5px',\n            paddingRight: '5px',\n          },\n          '.MuiFormControl-root:first-of-type > .MuiInputBase-root': {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n          '.MuiFormControl-root:last-of-type > .MuiInputBase-root': {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n          },\n          '.MuiFormControl-root:not(:first-of-type):not(:last-of-type) > .MuiInputBase-root':\n            {\n              borderRadius: 0,\n            },\n        }}\n      />\n      <Button\n        fullWidth\n        type=\"submit\"\n        color=\"primary\"\n        variant=\"contained\"\n        sx={{\n          height: '50px',\n          mt: 4,\n          mb: 2,\n        }}\n        disabled={verificationCode.length !== TOTP_LENGTH || loginIsPending}\n        onClick={e => {\n          e.preventDefault()\n          onSubmit(verificationCode)\n        }}\n      >\n        {loginIsPending ? 'Verifying...' : 'Submit'}\n      </Button>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,IAAc,GACd,IAAmB;CAAC;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;CAAK;AAAG;AAO1E,SAAwB,EAAS,GAAsB;CACrD,IAAM,EAAE,aAAU,sBAAmB,GAC/B,CAAC,GAAkB,KAAuB,EAAS,EAAE;CAC3D,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAA;EACA,QAAQ;EACR,iBAAiB,EACf,WAAW,EACT,WAAW,EACb,EACF;EACA,OAAO;EACP,UAAU;EACV,YAAY;EACZ,eAAe,MACN,EAAiB,SAAS,CAAS,KAAK,MAAc;EAE/D,KAAK;EACL,IAAI;GACF,IAAI;GACJ,UAAU;GACV,sBAAsB;IACpB,aAAa;IACb,cAAc;GAChB;GACA,2DAA2D;IACzD,sBAAsB;IACtB,yBAAyB;GAC3B;GACA,0DAA0D;IACxD,qBAAqB;IACrB,wBAAwB;GAC1B;GACA,oFACE,EACE,cAAc,EAChB;EACJ;CACD,CAAA,GACD,kBAAC,GAAD;EACE,WAAA;EACA,MAAK;EACL,OAAM;EACN,SAAQ;EACR,IAAI;GACF,QAAQ;GACR,IAAI;GACJ,IAAI;EACN;EACA,UAAU,EAAiB,WAAW,KAAe;EACrD,UAAS,MAAK;GAEZ,AADA,EAAE,eAAe,GACjB,EAAS,CAAgB;EAC3B;YAEC,IAAiB,iBAAiB;CAC7B,CAAA,CACL,EAAA,CAAA;AAET"}

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

@@ -1 +1 @@
-{"version":3,"file":"TwoFactorBackupCodes.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorBackupCodes.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,yBAAyB,GAAG;IAEtC,0BAA0B,CAAC,EAAE,OAAO,CAAA;IAEpC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAqK5E"}
+{"version":3,"file":"TwoFactorBackupCodes.d.ts","sourceRoot":"","sources":["../../../src/components/Authentication/TwoFactorBackupCodes.tsx"],"names":[],"mappings":"AAyBA,MAAM,MAAM,yBAAyB,GAAG;IAEtC,0BAA0B,CAAC,EAAE,OAAO,CAAA;IAEpC,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,2CAuL5E"}

package/dist/components/Authentication/TwoFactorBackupCodes.js

@@ -40,10 +40,15 @@ function S(S) {
 		className: M,
 		leftContent: /* @__PURE__ */ b(m, {
 			sx: {
-				py: 10,
-				px: 8,
-				height: "100%",
-				position: "relative"
+				py: {
+					xs: "10px",
+					md: 10
+				},
+				px: {
+					xs: "10px",
+					md: 8
+				},
+				height: "100%"
 			},
 			children: [
 				/* @__PURE__ */ y(g, {
@@ -52,8 +57,14 @@ function S(S) {
 					className: N,
 					sx: {
 						position: "absolute",
-						top: T.spacing(2),
-						left: T.spacing(2)
+						top: {
+							xs: 0,
+							md: T.spacing(2)
+						},
+						left: {
+							xs: 0,
+							md: T.spacing(2)
+						}
 					},
 					children: /* @__PURE__ */ y(i, {
 						icon: "arrowBack",
@@ -66,7 +77,10 @@ function S(S) {
 				}),
 				/* @__PURE__ */ y(_, {
 					variant: "headline1",
-					sx: { mt: 7 },
+					sx: { mt: {
+						xs: 0,
+						md: 7
+					} },
 					children: "Backup codes"
 				}),
 				C && /* @__PURE__ */ b(p, {
@@ -119,20 +133,35 @@ function S(S) {
 		}),
 		rightContent: /* @__PURE__ */ y(m, {
 			sx: {
-				py: 10,
+				padding: {
+					xs: "60px 0 0 0",
+					md: 10
+				},
 				height: "100%",
-				background: "url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom",
+				background: {
+					xs: "none",
+					md: "url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom"
+				},
 				backgroundSize: "100%"
 			},
 			children: /* @__PURE__ */ b(m, {
 				sx: {
-					mt: 7,
-					px: 9
+					mt: {
+						xs: 0,
+						md: 7
+					},
+					px: {
+						xs: "10px",
+						md: 9
+					}
 				},
 				children: [
 					/* @__PURE__ */ y(_, {
 						variant: "headline1",
-						sx: { mb: 2.5 },
+						sx: (e) => ({
+							mb: 2.5,
+							[e.breakpoints.down("md")]: { fontSize: "18px" }
+						}),
 						children: "Save these codes"
 					}),
 					/* @__PURE__ */ y(_, {

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: 10,\n            px: 8,\n            height: '100%',\n            position: 'relative',\n          }}\n        >\n          <IconButton\n            type=\"button\"\n            onClick={onClose}\n            className={hiddenOnPrintClassName}\n            sx={{\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          <Typography variant=\"headline1\" sx={{ mt: 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            py: 10,\n            height: '100%',\n            background: `url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom`,\n            backgroundSize: '100%',\n          }}\n        >\n          <Box\n            sx={{\n              mt: 7,\n              px: 9,\n            }}\n          >\n            <Typography variant=\"headline1\" sx={{ mb: 2.5 }}>\n              Save these codes\n            </Typography>\n            <Typography variant=\"body1\" sx={{ my: 2 }}>\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 variant=\"body1\" sx={{ my: 2 }}>\n              Each code can only be used once.\n            </Typography>\n          </Box>\n        </Box>\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAgCA,SAAwB,EAAqB,GAAkC;CAC7E,IAAM,EAAE,+BAA4B,eAAY,GAC1C,IAAQ,EAAS,GACjB,CAAC,GAA0B,KAA+B,EAC9D,CAAC,CACH,GAEM,EAAE,mBAAgB,EAAkB,GAEpC,EACJ,QAAQ,GACR,MAAM,GACN,aACE,EAA4D;EAC9D,kBAAkB,EAAoB,CAAW;EACjD,gBAAgB;GACd,EAA4B,EAAI;EAClC;CACF,CAAC;CAGD,QAAgB;EACd,AAAK,KACH,EAAc;CAIlB,GAAG,CAAC,CAAC;CAEL,IAAM,EAAE,4BAAyB,8BAC/B,EAAkB,GAEd,IAAuB,QAAkB;EAE7C,GADe,GAAe,SAAS,CAAC,GAAG,KAAK,IAC1B,CAAK,EAAE,WAAW;GACtC,EAAa,sCAAsC,SAAS;EAC9D,CAAC;CACH,GAAG,CAAC,CAAa,CAAC;CAalB,OAXI,KAA8B,CAAC,IAE/B,kBAAC,GAAD;EAAsB,IAAI;GAAE,SAAS;GAAQ,eAAe;EAAS;YACnE,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;EACX,CAAA;CACmB,CAAA,IAKxB,kBAAC,GAAD;EACE,WAAW;EACX,aACE,kBAAC,GAAD;GACE,IAAI;IACF,IAAI;IACJ,IAAI;IACJ,QAAQ;IACR,UAAU;GACZ;aANF;IAQE,kBAAC,GAAD;KACE,MAAK;KACL,SAAS;KACT,WAAW;KACX,IAAI;MACF,UAAU;MACV,KAAK,EAAM,QAAQ,CAAC;MACpB,MAAM,EAAM,QAAQ,CAAC;KACvB;eAEA,kBAAC,GAAD;MACE,MAAK;MACL,MAAM;MACN,IAAI;OAAE,QAAQ;OAAQ,OAAO;MAAO;KACrC,CAAA;IACS,CAAA;IACZ,kBAAC,GAAD;KAAY,SAAQ;KAAY,IAAI,EAAE,IAAI,EAAE;eAAG;IAEnC,CAAA;IACX,KACC,kBAAC,GAAD;KACE,UAAS;KACT,WAAW;KACX,IAAI,EACF,IAAI,EACN;KACA,MAAM;eANR;MAQE,kBAAC,UAAD,EAAA,UAAQ,gDAAqD,CAAA;MAAE;MAAI;KAE9D;;IAET,kBAAC,GAAD,EAAiC,iBAAgB,CAAA;IAChD,KACC,kBAAC,GAAD;KAAO,UAAU;KAAS,IAAI,EAAE,IAAI,EAAE;KAAG,MAAM;eAC5C,EAAM;IACF,CAAA;IAET,kBAAC,GAAD;KACE,WAAW;KACX,IAAI;MACF,SAAS;MACT,qBAAqB;MACrB,KAAK;MACL,IAAI;KACN;eAPF,CASE,kBAAC,GAAD;MACE,SAAS;MACT,SAAS;MACT,UAAU,CAAC;gBACZ;KAEO,CAAA,GACR,kBAAC,GAAD;MACE,SAAS;MACT,UAAU,CAAC;MACX,SAAS,OAAO;gBACjB;KAEO,CAAA,CACL;;IACL,kBAAC,GAAD;KACE,SAAS;KACT,WAAW;KACX,WAAA;KACA,UAAU,CAAC;KACX,SAAS;eACV;IAEO,CAAA;GACL;;EAEP,cACE,kBAAC,GAAD;GACE,IAAI;IACF,IAAI;IACJ,QAAQ;IACR,YAAY;IACZ,gBAAgB;GAClB;aAEA,kBAAC,GAAD;IACE,IAAI;KACF,IAAI;KACJ,IAAI;IACN;cAJF;KAME,kBAAC,GAAD;MAAY,SAAQ;MAAY,IAAI,EAAE,IAAI,IAAI;gBAAG;KAErC,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAQ;MAAQ,IAAI,EAAE,IAAI,EAAE;gBAAG;KAG/B,CAAA;KACZ,kBAAC,GAAD;MAAY,SAAQ;MAAQ,IAAI,EAAE,IAAI,EAAE;gBAAG;KAE/B,CAAA;IACT;;EACF,CAAA;CAER,CAAA;AAEL"}
+{"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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"}

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":"AAgBA,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,2CAgOpC;AAED,eAAO,MAAM,yBAAyB;;CAAmB,CAAA"}
+{"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"}

package/dist/components/Authentication/TwoFactorEnrollmentForm.js

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