synapse-react-client/dist/components/Authentication/TwoFactorBackupCodes.js

[](https://badge.fury.io/js/synapse-react-client) [](https://github.com/prettier/prettie

import { jsx as e, jsxs as r } from "react/jsx-runtime";
import { StyledOuterContainer as v, LeftRightPanel as b } from "../styled/LeftRightPanel.js";
import { createRecoveryCodes as k } from "../../synapse-client/SynapseClient.js";
import { useSynapseContext as w } from "../../utils/context/SynapseContext.js";
import { useMediaPrintOnly as T } from "../../utils/hooks/useMediaPrintOnly.js";
import { useTheme as R, Box as s, Typography as i, IconButton as B, Alert as p, Button as c } from "@mui/material";
import { useMutation as N } from "@tanstack/react-query";
import { useState as S, useEffect as P, useCallback as O } from "react";
import j from "../IconSvg/IconSvg.js";
import { displayToast as M } from "../ToastMessage/ToastMessage.js";
import { RecoveryCodeGrid as W } from "./RecoveryCodeGrid.js";
import { RegenerateBackupCodesWarning as z } from "./RegenerateBackupCodesWarning.js";
import { copyStringToClipboard as D } from "../../utils/functions/StringUtils.js";
function V(h) {
  const { showReplaceOldCodesWarning: t, onClose: a } = h, d = R(), [u, f] = S(
    !t
  ), { accessToken: y } = w(), {
    mutate: l,
    data: o,
    error: m
  } = N({
    mutationFn: () => k(y),
    onMutate: () => {
      f(!0);
    }
  });
  P(() => {
    t || l();
  }, []);
  const { visibleOnPrintClassName: C, hiddenOnPrintClassName: n } = T(), g = O(() => {
    const x = (o?.codes || []).join(`
`);
    D(x).then(() => {
      M("Recovery codes copied to clipboard", "success");
    });
  }, [o]);
  return t && !u ? /* @__PURE__ */ e(v, { sx: { display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ e(
    z,
    {
      onConfirm: l,
      onCancel: a
    }
  ) }) : /* @__PURE__ */ e(
    b,
    {
      className: C,
      leftContent: /* @__PURE__ */ r(
        s,
        {
          sx: {
            py: 10,
            px: 8,
            height: "100%",
            position: "relative"
          },
          children: [
            /* @__PURE__ */ e(
              B,
              {
                type: "button",
                onClick: a,
                className: n,
                sx: {
                  position: "absolute",
                  top: d.spacing(2),
                  left: d.spacing(2)
                },
                children: /* @__PURE__ */ e(
                  j,
                  {
                    icon: "arrowBack",
                    wrap: !1,
                    sx: { height: "24px", width: "24px" }
                  }
                )
              }
            ),
            /* @__PURE__ */ e(i, { variant: "headline1", sx: { mt: 7 }, children: "Backup codes" }),
            t && /* @__PURE__ */ r(
              p,
              {
                severity: "warning",
                className: n,
                sx: {
                  my: 2
                },
                icon: !1,
                children: [
                  /* @__PURE__ */ e("strong", { children: "These new codes have replaced your old codes." }),
                  " ",
                  "Please save these codes and use them from now on."
                ]
              }
            ),
            /* @__PURE__ */ e(W, { recoveryCodes: o }),
            m && /* @__PURE__ */ e(p, { severity: "error", sx: { my: 2 }, icon: !1, children: m.message }),
            /* @__PURE__ */ r(
              s,
              {
                className: n,
                sx: {
                  display: "grid",
                  gridTemplateColumns: "1fr 1fr",
                  gap: "10px",
                  mb: "10px"
                },
                children: [
                  /* @__PURE__ */ e(
                    c,
                    {
                      variant: "outlined",
                      onClick: g,
                      disabled: !o,
                      children: "Copy Codes"
                    }
                  ),
                  /* @__PURE__ */ e(
                    c,
                    {
                      variant: "outlined",
                      disabled: !o,
                      onClick: window.print,
                      children: "Print Codes"
                    }
                  )
                ]
              }
            ),
            /* @__PURE__ */ e(
              c,
              {
                variant: "contained",
                className: n,
                fullWidth: !0,
                disabled: !o,
                onClick: a,
                children: "Done"
              }
            )
          ]
        }
      ),
      rightContent: /* @__PURE__ */ e(
        s,
        {
          sx: {
            py: 10,
            height: "100%",
            background: "url(https://s3.amazonaws.com/static.synapse.org/images/twofactor-graphic.svg) no-repeat right bottom",
            backgroundSize: "100%"
          },
          children: /* @__PURE__ */ r(
            s,
            {
              sx: {
                mt: 7,
                px: 9
              },
              children: [
                /* @__PURE__ */ e(i, { variant: "headline1", sx: { mb: 2.5 }, children: "Save these codes" }),
                /* @__PURE__ */ e(i, { variant: "body1", sx: { my: 2 }, children: "You can use these 10 backup codes to access your account if you ever lose access to your authentication device." }),
                /* @__PURE__ */ e(i, { variant: "body1", sx: { my: 2 }, children: "Each code can only be used once." })
              ]
            }
          )
        }
      )
    }
  );
}
export {
  V as default
};
//# sourceMappingURL=TwoFactorBackupCodes.js.map