strapi-identity 0.1.0 → 0.1.2

package/dist/admin/AdminReset-C0QibZXW.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const WarningAlert = require("./WarningAlert-DFE5euMk.js");
+const designSystem = require("@strapi/design-system");
+const index = require("./index-BXZI8nMZ.js");
+const tokenHelpers = require("./tokenHelpers-jtoRu0q5.js");
+const reactIntl = require("react-intl");
+const AdminReset = ({ id }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [is2FAEnabled, setIs2FAEnabled] = React.useState(false);
+  const [warningOpen, setWarningOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const handleReset = async () => {
+    const token = tokenHelpers.getToken();
+    setLoading(true);
+    try {
+      const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+        method: "DELETE"
+      });
+      if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+      setIs2FAEnabled(false);
+    } catch (error) {
+      console.error("Error resetting 2FA for user:", error);
+    } finally {
+      setLoading(false);
+      setWarningOpen(false);
+    }
+  };
+  React.useEffect(() => {
+    if (!id) return;
+    const ac = new AbortController();
+    const token = tokenHelpers.getToken();
+    (async () => {
+      try {
+        const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+          headers: { Authorization: `Bearer ${token}` },
+          signal: ac.signal
+        });
+        if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+        const data = await response.json();
+        setIs2FAEnabled(data.data);
+      } catch (error) {
+        console.error("Error fetching 2FA status for user:", error);
+      }
+    })();
+  }, [id]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
+              id: index.getTranslation("admin.title"),
+              defaultMessage: "Two-Factor Authentication"
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+              id: index.getTranslation("admin.subtitle"),
+              defaultMessage: "Reset the Two-Factor Authentication for a user."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              disabled: !is2FAEnabled,
+              variant: "danger",
+              onClick: () => setWarningOpen(true),
+              children: formatMessage({
+                id: index.getTranslation("app.components.Button.reset"),
+                defaultMessage: "Reset"
+              })
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      WarningAlert.WarningAlert,
+      {
+        loading,
+        title: formatMessage({
+          id: index.getTranslation("admin.warn-title"),
+          defaultMessage: "Reset 2FA for this user?"
+        }),
+        open: warningOpen,
+        onCancel: () => setWarningOpen(false),
+        onConfirm: handleReset,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textAlign: "center", children: formatMessage({
+            id: index.getTranslation("admin.warning"),
+            defaultMessage: "Resetting the Two-Factor Authentication will allow the user to set it up again with a new device. This action cannot be undone."
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", fontWeight: "semiBold", children: formatMessage({
+            id: index.getTranslation("app.confirm.body"),
+            defaultMessage: "Are you sure?"
+          }) })
+        ]
+      }
+    )
+  ] });
+};
+exports.default = AdminReset;

package/dist/admin/AdminReset-H453s-DE.mjs

@@ -0,0 +1,112 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { W as WarningAlert } from "./WarningAlert-VU011LVF.mjs";
+import { Box, Flex, Typography, Grid, Button } from "@strapi/design-system";
+import { g as getTranslation } from "./index-D45I6rWF.mjs";
+import { g as getToken } from "./tokenHelpers-DagDzpso.mjs";
+import { useIntl } from "react-intl";
+const AdminReset = ({ id }) => {
+  const { formatMessage } = useIntl();
+  const [is2FAEnabled, setIs2FAEnabled] = useState(false);
+  const [warningOpen, setWarningOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const handleReset = async () => {
+    const token = getToken();
+    setLoading(true);
+    try {
+      const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+        method: "DELETE"
+      });
+      if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+      setIs2FAEnabled(false);
+    } catch (error) {
+      console.error("Error resetting 2FA for user:", error);
+    } finally {
+      setLoading(false);
+      setWarningOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (!id) return;
+    const ac = new AbortController();
+    const token = getToken();
+    (async () => {
+      try {
+        const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+          headers: { Authorization: `Bearer ${token}` },
+          signal: ac.signal
+        });
+        if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+        const data = await response.json();
+        setIs2FAEnabled(data.data);
+      } catch (error) {
+        console.error("Error fetching 2FA status for user:", error);
+      }
+    })();
+  }, [id]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({
+              id: getTranslation("admin.title"),
+              defaultMessage: "Two-Factor Authentication"
+            }) }),
+            /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+              id: getTranslation("admin.subtitle"),
+              defaultMessage: "Reset the Two-Factor Authentication for a user."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(Grid.Root, { children: /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: !is2FAEnabled,
+              variant: "danger",
+              onClick: () => setWarningOpen(true),
+              children: formatMessage({
+                id: getTranslation("app.components.Button.reset"),
+                defaultMessage: "Reset"
+              })
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      WarningAlert,
+      {
+        loading,
+        title: formatMessage({
+          id: getTranslation("admin.warn-title"),
+          defaultMessage: "Reset 2FA for this user?"
+        }),
+        open: warningOpen,
+        onCancel: () => setWarningOpen(false),
+        onConfirm: handleReset,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", textAlign: "center", children: formatMessage({
+            id: getTranslation("admin.warning"),
+            defaultMessage: "Resetting the Two-Factor Authentication will allow the user to set it up again with a new device. This action cannot be undone."
+          }) }),
+          /* @__PURE__ */ jsx(Typography, { textAlign: "center", fontWeight: "semiBold", children: formatMessage({
+            id: getTranslation("app.confirm.body"),
+            defaultMessage: "Are you sure?"
+          }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  AdminReset as default
+};

package/dist/admin/ProfileToggle-BFmIWCrN.js

@@ -0,0 +1,336 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const styled = require("styled-components");
+const index = require("./index-BXZI8nMZ.js");
+const qrcode_react = require("qrcode.react");
+const reactIntl = require("react-intl");
+const tokenHelpers = require("./tokenHelpers-jtoRu0q5.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+function ConfirmModal({
+  open,
+  onOpenChange,
+  onSubmit,
+  qrCodeUri,
+  secret,
+  passcodes
+}) {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
+      id: index.getTranslation("profile.setup"),
+      defaultMessage: "Set up Two-Factor Authentication"
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: passcodes ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", children: formatMessage({
+        id: index.getTranslation("profile.recovery_codes"),
+        defaultMessage: "Please save the following recovery codes in a safe place. Each code can only be used once to access your account if you lose access to your authenticator app."
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, marginTop: 4, marginBottom: 4, children: passcodes.map((code) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: code }) }, code)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textAlign: "center", children: formatMessage({
+        id: index.getTranslation("profile.recovery_codes_warning"),
+        defaultMessage: "If you lose both your authenticator app and your recovery codes, you will need to contact an administrator to regain access to your account."
+      }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+          id: index.getTranslation("profile.scan_qr"),
+          defaultMessage: "You will need an authenticator app to scan the QR code below."
+        }) }),
+        qrCodeUri && /* @__PURE__ */ jsxRuntime.jsx(qrcode_react.QRCodeCanvas, { value: qrCodeUri, size: 256 }),
+        secret && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: secret || "" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Rule, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+          id: index.getTranslation("profile.enter_otp"),
+          defaultMessage: "Enter the 6-digit code from your authenticator app to confirm."
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTP, { maxLength: 6, name: "otp", id: "otp", autoFocus: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 0 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 2 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSeparator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 3 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 4 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 5 })
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+      passcodes && /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: passcodes ? void 0 : "tertiary", children: passcodes ? formatMessage({ id: "global.close", defaultMessage: "Close" }) : formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }) }),
+      !passcodes && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", children: formatMessage({ id: "app.components.Button.confirm", defaultMessage: "Confirm" }) })
+    ] })
+  ] }) }) });
+}
+const Rule = styled__default.default.hr`
+  height: 1px;
+  border: 0;
+  background-color: #e5e5e5;
+`;
+function RemoveModal({ open, onOpenChange, onSubmit }) {
+  const { formatMessage } = reactIntl.useIntl();
+  const [showRecovery, setShowRecovery] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
+      id: index.getTranslation("profile.disable_title"),
+      defaultMessage: "Disable Two-Factor Authentication"
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+        id: index.getTranslation("profile.disable_instruction"),
+        defaultMessage: "Enter the 6-digit code from your authenticator app to disable Two-Factor Authentication."
+      }) }),
+      showRecovery ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { name: "otp", id: "otp", autoFocus: true }) : /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTP, { maxLength: 6, name: "otp", id: "otp", autoFocus: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 0 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 1 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 2 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 3 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 4 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 5 })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          variant: "ghost",
+          type: "button",
+          onClick: () => setShowRecovery((prev) => !prev),
+          children: showRecovery ? formatMessage({
+            id: index.getTranslation("general.use_verification_code"),
+            defaultMessage: "Use verification code"
+          }) : formatMessage({
+            id: index.getTranslation("general.use_recovery_code"),
+            defaultMessage: "Use recovery code"
+          })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", children: formatMessage({ id: "app.components.Button.confirm", defaultMessage: "Confirm" }) })
+    ] })
+  ] }) }) });
+}
+const ProfileToggle = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [enabled, setEnabled] = React.useState(null);
+  const [mfaEnabled, setMfaEnabled] = React.useState(false);
+  const [disableDialogOpen, setDisableDialogOpen] = React.useState(false);
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [uri, setUri] = React.useState(null);
+  const [secret, setSecret] = React.useState(null);
+  const [passcodes, setPasscodes] = React.useState(null);
+  const handleToggle = async ({ target }) => {
+    const token = tokenHelpers.getToken();
+    const enable = target?.checked || false;
+    if (!enable && enabled === "full") {
+      setDisableDialogOpen(true);
+      return;
+    }
+    try {
+      const response = await fetch("/strapi-identity/enable", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+        body: JSON.stringify({ enable })
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(`${response.status} - ${body.error || "Failed to update MFA status"}`);
+      }
+      const data = body.data;
+      if (!data) {
+        throw new Error("No data returned from server");
+      }
+      if (enable) setModalOpen(true);
+      setUri(data?.uri || null);
+      setSecret(data?.secret || null);
+      setEnabled(enable ? "temp" : null);
+    } catch (error) {
+      console.error(error);
+      setEnabled(null);
+    }
+  };
+  const handleConfirm = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const code = formData.get("otp");
+    const token = tokenHelpers.getToken();
+    try {
+      const response = await fetch("/strapi-identity/setup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+        body: JSON.stringify({ code })
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(`${response.status} - ${body.error || "Failed to set up MFA"}`);
+      }
+      if (body.data?.recoveryCodes) {
+        setPasscodes(body.data.recoveryCodes);
+      } else {
+        setModalOpen(false);
+      }
+      setUri(null);
+      setSecret(null);
+      setEnabled("full");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const handleClose = () => {
+    if (!passcodes) setEnabled(null);
+    setModalOpen(false);
+    setUri(null);
+    setSecret(null);
+    setPasscodes(null);
+  };
+  const handleDisable = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const code = formData.get("otp");
+    const token = tokenHelpers.getToken();
+    try {
+      const response = await fetch("/strapi-identity/disable", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+        body: JSON.stringify({ code })
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(`${response.status} - ${body.error || "Failed to disable MFA"}`);
+      }
+      setDisableDialogOpen(false);
+      setUri(null);
+      setSecret(null);
+      setEnabled(null);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  React.useEffect(() => {
+    const ac = new AbortController();
+    (async () => {
+      const token = tokenHelpers.getToken();
+      try {
+        const [status, enabled2] = await Promise.all([
+          fetch("/strapi-identity/status", {
+            method: "GET",
+            headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+            signal: ac.signal
+          }),
+          fetch("/strapi-identity/config/enabled", {
+            method: "GET",
+            headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+            signal: ac.signal
+          })
+        ]);
+        const statusBody = await status.json();
+        const enabledBody = await enabled2.json();
+        if (!status.ok) {
+          throw new Error(`${status.status} - ${statusBody.error || "Failed to set up MFA"}`);
+        }
+        if (!enabled2.ok) {
+          throw new Error(`${enabled2.status} - ${enabledBody.error || "Failed to get MFA config"}`);
+        }
+        setMfaEnabled(enabledBody.data);
+        setEnabled(statusBody.data?.status || null);
+      } catch (error) {
+        if (error.name === "AbortError") return;
+        console.error("Failed to fetch MFA status:", error);
+      }
+    })();
+    return () => ac.abort();
+  }, []);
+  if (!mfaEnabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
+              id: index.getTranslation("profile.title"),
+              defaultMessage: "Two-Factor Authentication"
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+              id: index.getTranslation("profile.subtitle"),
+              defaultMessage: "Add an additional layer of security to your account."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { tag: "div", gap: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Field.Root,
+            {
+              width: "100%",
+              name: "two-factor-authentication",
+              id: "two-factor-authentication",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                  id: index.getTranslation("profile.toggle_label"),
+                  defaultMessage: "Enable Two-Factor Authentication"
+                }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Toggle,
+                  {
+                    offLabel: formatMessage({
+                      id: "app.components.ToggleCheckbox.off-label",
+                      defaultMessage: "False"
+                    }),
+                    onLabel: formatMessage({
+                      id: "app.components.ToggleCheckbox.on-label",
+                      defaultMessage: "True"
+                    }),
+                    checked: enabled !== null,
+                    onChange: handleToggle
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+              ]
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmModal,
+      {
+        open: modalOpen,
+        onOpenChange: handleClose,
+        qrCodeUri: uri,
+        secret,
+        passcodes,
+        onSubmit: handleConfirm
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RemoveModal,
+      {
+        open: disableDialogOpen,
+        onOpenChange: setDisableDialogOpen,
+        onSubmit: handleDisable
+      }
+    )
+  ] });
+};
+exports.default = ProfileToggle;