synapse-react-client
Version:
[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie
259 lines (258 loc) • 8.9 kB
JavaScript
import { jsx as t, jsxs as o } from "react/jsx-runtime";
import { StyledOuterContainer as I } from "../styled/LeftRightPanel.js";
import { useFinishTwoFactorEnrollment as k } from "../../synapse-queries/auth/useTwoFactorEnrollment.js";
import { styled as S, Box as s, Paper as E, IconButton as O, Typography as i, Link as a, Stack as y, Divider as x, Button as D } from "@mui/material";
import * as G from "qrcode";
import { useState as p, useRef as R, useEffect as B } from "react";
import W from "../FullWidthAlert/FullWidthAlert.js";
import _ from "../IconSvg/IconSvg.js";
import { SynapseSpinner as M } from "../LoadingScreen/LoadingScreen.js";
import Q from "../TextField/TextField.js";
import $ from "./TwoFactorSecretDialog.js";
const { toCanvas: j } = G;
function v(e) {
return `otpauth://totp/Synapse:${e.username}?secret=${e.secret}&issuer=Sage%20Bionetworks&algorithm=${e.alg}&digits=${e.digits}&period=${e.period}`;
}
const c = S(
(e) => /* @__PURE__ */ t(
s,
{
sx: {
my: 3,
...e.sx
},
...e
}
),
{
label: "Section"
}
)(() => ({})), h = S(s, { label: "SectionInnerGrid" })(
({ theme: e }) => ({
display: "grid",
gridTemplateColumns: "auto 200px",
columnGap: e.spacing(5),
[e.breakpoints.down("sm")]: {
gridTemplateColumns: "1fr",
gap: "18px"
}
})
), L = "https://help.synapse.org/docs/Managing-Your-Account.2055405596.html#Adding-Two-Factor-Authentication-(2FA)-to-your-account";
function J(e) {
const { onTwoFactorEnrollmentSuccess: b, onBackClicked: u, totpSecret: r } = e, [l, w] = p(""), [m, C] = p(!1), [A, f] = p(!1), d = R(null), {
mutate: F,
isPending: T,
error: g
} = k({
onSuccess: b
});
return B(() => {
async function n() {
r && d.current && (await j(d.current, v(r), {
version: 10,
margin: 0,
scale: 3.5
}), C(!0));
}
n();
}, [r]), /* @__PURE__ */ t(I, { children: /* @__PURE__ */ o(
E,
{
sx: {
position: "relative",
width: { xs: "100%", md: "800px" },
py: 6.5,
px: 8,
mx: "auto"
},
children: [
u && /* @__PURE__ */ t(
O,
{
type: "button",
onClick: () => {
u();
},
sx: (n) => ({
position: "absolute",
top: n.spacing(2),
left: n.spacing(2)
}),
children: /* @__PURE__ */ t(
_,
{
icon: "arrowBack",
wrap: !1,
sx: { height: "24px", width: "24px" }
}
)
}
),
/* @__PURE__ */ o(c, { children: [
/* @__PURE__ */ t(i, { variant: "headline2", sx: { mb: 3 }, children: "Activate Two-factor Authentication" }),
/* @__PURE__ */ o(i, { 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",
!1,
" or ORCiD account, you may need to use 2FA as part of",
"that process as well.",
" ",
/* @__PURE__ */ t(a, { href: L, children: "Learn more about 2FA" }),
"."
] })
] }),
/* @__PURE__ */ t(c, { children: /* @__PURE__ */ o(h, { children: [
/* @__PURE__ */ o(s, { children: [
/* @__PURE__ */ t(i, { variant: "body1", sx: { fontWeight: 700 }, children: "Step 1. Get one of these apps" }),
/* @__PURE__ */ t(i, { 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__ */ o(
y,
{
sx: (n) => ({
justifyContent: "space-between",
flexShrink: 0,
[n.breakpoints.down("sm")]: {
gap: "20px"
}
}),
children: [
/* @__PURE__ */ t(a, { href: "https://authy.com/download/", children: "Authy" }),
/* @__PURE__ */ t(
a,
{
href: "https://duo.com/product/multi-factor-authentication-mfa/duo-mobile-app",
children: "DUO Mobile"
}
),
/* @__PURE__ */ t(a, { href: "https://googleauthenticator.net/", children: "Google Authenticator" }),
/* @__PURE__ */ t(
a,
{
href: "https://www.microsoft.com/en-us/security/mobile-authenticator-app",
children: "Microsoft Authenticator"
}
)
]
}
)
] }) }),
/* @__PURE__ */ t(x, {}),
/* @__PURE__ */ t(c, { children: /* @__PURE__ */ o(h, { children: [
/* @__PURE__ */ o(s, { children: [
/* @__PURE__ */ t(i, { variant: "body1", sx: { fontWeight: 700 }, children: "Step 2. Scan the QR Code" }),
/* @__PURE__ */ o(i, { component: "ol", variant: "body1", sx: { pl: 2, my: 1 }, children: [
/* @__PURE__ */ t("li", { children: "Open your authenticator app" }),
/* @__PURE__ */ t("li", { children: 'Tap the "+" button' }),
/* @__PURE__ */ t("li", { children: "Use your camera to scan the image to the right" })
] }),
/* @__PURE__ */ t(
a,
{
onClick: () => {
f(!0);
},
children: "Can't use your camera?"
}
),
/* @__PURE__ */ t(
$,
{
secret: r?.secret ?? "",
open: A,
onClose: () => f(!1)
}
)
] }),
/* @__PURE__ */ o(
s,
{
sx: {
display: "flex",
justifyContent: "center",
alignItems: "middle",
height: "auto"
},
children: [
!m && /* @__PURE__ */ t(M, { size: 50 }),
/* @__PURE__ */ t(
"canvas",
{
style: { display: m ? void 0 : "none" },
ref: d
}
)
]
}
)
] }) }),
/* @__PURE__ */ t(x, {}),
/* @__PURE__ */ t(c, { children: /* @__PURE__ */ o(h, { children: [
/* @__PURE__ */ o(s, { children: [
/* @__PURE__ */ t(i, { variant: "body1", sx: { fontWeight: 700 }, children: "Step 3. Enter the Verification Code" }),
/* @__PURE__ */ t(i, { 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__ */ t(
"form",
{
onSubmit: (n) => {
n.preventDefault(), F({
secretId: r.secretId,
totp: l
});
},
children: /* @__PURE__ */ o(
y,
{
direction: "row",
sx: {
gap: 2,
height: "48px"
},
children: [
/* @__PURE__ */ t(
Q,
{
noWrapInFormControl: !0,
autoFocus: !0,
inputProps: { maxLength: r?.digits },
value: l,
onChange: (n) => {
w(n.target.value);
}
}
),
/* @__PURE__ */ t(
D,
{
type: "submit",
variant: "contained",
sx: { flexShrink: 0 },
disabled: T || l.length != r?.digits,
children: "Activate"
}
)
]
}
)
}
)
] }) }),
g && /* @__PURE__ */ t(
W,
{
variant: "danger",
isGlobal: !1,
description: g.reason
}
)
]
}
) });
}
const Z = { toOtpAuthUrl: v };
export {
Z as EXPORTED_FOR_UNIT_TESTING,
L as TWO_FACTOR_DOCS_LINK,
J as default
};
//# sourceMappingURL=TwoFactorEnrollmentForm.js.map