@stackframe/react 2.7.20

package/dist/components-page/account-settings.js

@@ -0,0 +1,1095 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components-page/account-settings.tsx
+var account_settings_exports = {};
+__export(account_settings_exports, {
+  AccountSettings: () => AccountSettings,
+  EditableText: () => EditableText,
+  TeamCreation: () => TeamCreation,
+  useDeleteAccountSection: () => useDeleteAccountSection
+});
+module.exports = __toCommonJS(account_settings_exports);
+var import_yup = require("@hookform/resolvers/yup");
+var import_stack_shared = require("@stackframe/stack-shared");
+var import_password = require("@stackframe/stack-shared/dist/helpers/password");
+var import_use_async_callback = require("@stackframe/stack-shared/dist/hooks/use-async-callback");
+var import_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
+var import_crypto = require("@stackframe/stack-shared/dist/utils/crypto");
+var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
+var import_promises = require("@stackframe/stack-shared/dist/utils/promises");
+var import_stack_ui = require("@stackframe/stack-ui");
+var import_lucide_react = require("lucide-react");
+var import_otp = require("oslo/otp");
+var QRCode = __toESM(require("qrcode"));
+var import_react = __toESM(require("react"));
+var import_react_hook_form = require("react-hook-form");
+var yup = __toESM(require("yup"));
+var import__ = require("..");
+var import_form_warning = require("../components/elements/form-warning");
+var import_maybe_full_page = require("../components/elements/maybe-full-page");
+var import_sidebar_layout = require("../components/elements/sidebar-layout");
+var import_user_avatar = require("../components/elements/user-avatar");
+var import_profile_image_editor = require("../components/profile-image-editor");
+var import_team_icon = require("../components/team-icon");
+var import_translations = require("../lib/translations");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Icon = ({ name }) => {
+  const LucideIcon = import_lucide_react.icons[name];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LucideIcon, { className: "mr-2 h-4 w-4" });
+};
+function AccountSettings(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const teams = user.useTeams();
+  const stackApp = (0, import__.useStackApp)();
+  const project = stackApp.useProject();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maybe_full_page.MaybeFullPage, { fullPage: !!props.fullPage, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "self-stretch flex-grow w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_sidebar_layout.SidebarLayout,
+    {
+      items: [
+        {
+          title: t("My Profile"),
+          type: "item",
+          id: "profile",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Contact" }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfilePage, {})
+        },
+        {
+          title: t("Emails & Auth"),
+          type: "item",
+          id: "auth",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "ShieldCheck" }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, { fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsAndAuthPageSkeleton, {}), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsAndAuthPage, {}) })
+        },
+        {
+          title: t("Settings"),
+          type: "item",
+          id: "settings",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "Settings" }),
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingsPage, {})
+        },
+        ...props.extraItems?.map((item) => ({
+          title: item.title,
+          type: "item",
+          id: item.id,
+          icon: (() => {
+            const iconName = item.iconName;
+            if (iconName) {
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: iconName });
+            } else if (item.icon) {
+              return item.icon;
+            }
+            return null;
+          })(),
+          content: item.content
+        })) || [],
+        ...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
+          title: t("Teams"),
+          type: "divider"
+        }] : [],
+        ...teams.map((team) => ({
+          title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_icon.TeamIcon, { team }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "max-w-[320px] md:w-[90%] truncate", children: team.displayName })
+          ] }),
+          type: "item",
+          id: `team-${team.id}`,
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamPage, { team })
+        })),
+        ...project.config.clientTeamCreationEnabled ? [{
+          title: t("Create a team"),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { name: "CirclePlus" }),
+          type: "item",
+          id: "team-creation",
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCreation, {})
+        }] : []
+      ].filter((p) => p.type === "divider" || p.content),
+      title: t("Account Settings")
+    }
+  ) }) });
+}
+function Section(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "sm:flex-1 flex flex-col justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium", children: props.title }),
+      props.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "footnote", children: props.description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sm:flex-1 sm:items-end flex flex-col gap-2 ", children: props.children })
+  ] });
+}
+function PageLayout(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Separator, {}),
+    import_react.default.Children.map(props.children, (child) => child && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      child,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Separator, {})
+    ] }))
+  ] });
+}
+function ProfilePage() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Section,
+      {
+        title: t("User name"),
+        description: t("This is a display name and is not used for authentication"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          EditableText,
+          {
+            value: user.displayName || "",
+            onSave: async (newDisplayName) => {
+              await user.update({ displayName: newDisplayName });
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Section,
+      {
+        title: t("Profile image"),
+        description: t("Upload your own image as your avatar"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_profile_image_editor.ProfileImageEditor,
+          {
+            user,
+            onProfileImageUrlChange: async (profileImageUrl) => {
+              await user.update({ profileImageUrl });
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function EmailsSection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const contactChannels = user.useContactChannels();
+  const [addingEmail, setAddingEmail] = (0, import_react.useState)(contactChannels.length === 0);
+  const [addingEmailLoading, setAddingEmailLoading] = (0, import_react.useState)(false);
+  const [addedEmail, setAddedEmail] = (0, import_react.useState)(null);
+  const isLastEmail = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
+  (0, import_react.useEffect)(() => {
+    if (addedEmail) {
+      (0, import_promises.runAsynchronously)(async () => {
+        const cc = contactChannels.find((x) => x.value === addedEmail);
+        if (cc && !cc.isVerified) {
+          await cc.sendVerificationEmail();
+        }
+        setAddedEmail(null);
+      });
+    }
+  }, [contactChannels, addedEmail]);
+  const emailSchema = (0, import_schema_fields.yupObject)({
+    email: (0, import_schema_fields.strictEmailSchema)(t("Please enter a valid email address")).notOneOf(contactChannels.map((x) => x.value), t("Email already exists")).defined().nonEmpty(t("Email is required"))
+  });
+  const { register, handleSubmit, formState: { errors }, reset } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(emailSchema)
+  });
+  const onSubmit = async (data) => {
+    setAddingEmailLoading(true);
+    try {
+      await user.createContactChannel({ type: "email", value: data.email, usedForAuth: false });
+      setAddedEmail(data.email);
+    } finally {
+      setAddingEmailLoading(false);
+    }
+    setAddingEmail(false);
+    reset();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium", children: t("Emails") }),
+      addingEmail ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            (0, import_promises.runAsynchronously)(handleSubmit(onSubmit));
+          },
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Input,
+                {
+                  ...register("email"),
+                  placeholder: t("Enter email")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading: addingEmailLoading, children: t("Add") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    setAddingEmail(false);
+                    reset();
+                  },
+                  children: t("Cancel")
+                }
+              )
+            ] }),
+            errors.email && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email.message })
+          ]
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex md:justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { variant: "secondary", onClick: () => setAddingEmail(true), children: t("Add an email") }) })
+    ] }),
+    contactChannels.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Table, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: contactChannels.filter((x) => x.type === "email").sort((a, b) => {
+      if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+      if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
+      return 0;
+    }).map((x) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4", children: [
+        x.value,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+          x.isPrimary ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { children: t("Primary") }) : null,
+          !x.isVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "destructive", children: t("Unverified") }) : null,
+          x.usedForAuth ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Badge, { variant: "outline", children: t("Used for sign-in") }) : null
+        ] })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.ActionCell, { items: [
+        ...!x.isVerified ? [{
+          item: t("Send verification email"),
+          onClick: async () => {
+            await x.sendVerificationEmail();
+          }
+        }] : [],
+        ...!x.isPrimary && x.isVerified ? [{
+          item: t("Set as primary"),
+          onClick: async () => {
+            await x.update({ isPrimary: true });
+          }
+        }] : !x.isPrimary ? [{
+          item: t("Set as primary"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("Please verify your email first")
+        }] : [],
+        ...!x.usedForAuth && x.isVerified ? [{
+          item: t("Use for sign-in"),
+          onClick: async () => {
+            try {
+              await x.update({ usedForAuth: true });
+            } catch (e) {
+              if (e instanceof import_stack_shared.KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse) {
+                alert(t("This email is already used for sign-in by another user."));
+              }
+            }
+          }
+        }] : [],
+        ...x.usedForAuth && !isLastEmail ? [{
+          item: t("Stop using for sign-in"),
+          onClick: async () => {
+            await x.update({ usedForAuth: false });
+          }
+        }] : x.usedForAuth ? [{
+          item: t("Stop using for sign-in"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("You can not remove your last sign-in email")
+        }] : [],
+        ...!isLastEmail || !x.usedForAuth ? [{
+          item: t("Remove"),
+          onClick: async () => {
+            await x.delete();
+          },
+          danger: true
+        }] : [{
+          item: t("Remove"),
+          onClick: async () => {
+          },
+          disabled: true,
+          disabledTooltip: t("You can not remove your last sign-in email")
+        }]
+      ] }) })
+    ] }, x.id)) }) }) }) : null
+  ] });
+}
+function EmailsAndAuthPage() {
+  const passwordSection = usePasswordSection();
+  const mfaSection = useMfaSection();
+  const otpSection = useOtpSection();
+  const passkeySection = usePasskeySection();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailsSection, {}),
+    passwordSection,
+    passkeySection,
+    otpSection,
+    mfaSection
+  ] });
+}
+function EmailsAndAuthPageSkeleton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Skeleton, { className: "h-9 w-full mt-1" })
+  ] });
+}
+function usePasskeySection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "throw" });
+  const stackApp = (0, import__.useStackApp)();
+  const project = stackApp.useProject();
+  const contactChannels = user.useContactChannels();
+  const hasPasskey = user.passkeyAuthEnabled;
+  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;
+  const [showConfirmationModal, setShowConfirmationModal] = (0, import_react.useState)(false);
+  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
+  if (!project.config.passkeyEnabled) {
+    return null;
+  }
+  const handleDeletePasskey = async () => {
+    await user.update({ passkeyAuthEnabled: false });
+    setShowConfirmationModal(false);
+  };
+  const handleAddNewPasskey = async () => {
+    await user.registerPasskey();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("Passkey"), description: hasPasskey ? t("Passkey registered") : t("Register a passkey"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex md:justify-end gap-2", children: [
+    !hasValidEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("To enable Passkey sign-in, please add a verified sign-in email.") }),
+    hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method") }),
+    !hasPasskey && hasValidEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: handleAddNewPasskey, variant: "secondary", children: t("Add new passkey") }) }),
+    hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
+      {
+        variant: "secondary",
+        onClick: () => setShowConfirmationModal(true),
+        children: t("Delete Passkey")
+      }
+    ),
+    hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "destructive",
+            onClick: handleDeletePasskey,
+            children: t("Disable")
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "secondary",
+            onClick: () => setShowConfirmationModal(false),
+            children: t("Cancel")
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
+function useOtpSection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "throw" });
+  const project = (0, import__.useStackApp)().useProject();
+  const contactChannels = user.useContactChannels();
+  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;
+  const [disabling, setDisabling] = (0, import_react.useState)(false);
+  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
+  if (!project.config.magicLinkEnabled) {
+    return null;
+  }
+  const handleDisableOTP = async () => {
+    await user.update({ otpAuthEnabled: false });
+    setDisabling(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("OTP sign-in"), description: user.otpAuthEnabled ? t("OTP/magic link sign-in is currently enabled.") : t("Enable sign-in via magic link or OTP sent to your sign-in emails."), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex md:justify-end", children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.Button,
+    {
+      variant: "secondary",
+      onClick: () => setDisabling(true),
+      children: t("Disable OTP")
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "destructive",
+          onClick: handleDisableOTP,
+          children: t("Disable")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "secondary",
+          onClick: () => setDisabling(false),
+          children: t("Cancel")
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.Button,
+    {
+      variant: "secondary",
+      onClick: async () => {
+        await user.update({ otpAuthEnabled: true });
+      },
+      children: t("Enable OTP")
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("To enable OTP sign-in, please add a verified sign-in email.") }) }) });
+}
+function SettingsPage() {
+  const deleteAccountSection = useDeleteAccountSection();
+  const signOutSection = useSignOutSection();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    deleteAccountSection,
+    signOutSection
+  ] });
+}
+function usePasswordSection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "throw" });
+  const contactChannels = user.useContactChannels();
+  const [changingPassword, setChangingPassword] = (0, import_react.useState)(false);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const passwordSchema = (0, import_schema_fields.yupObject)({
+    oldPassword: user.hasPassword ? import_schema_fields.passwordSchema.defined().nonEmpty(t("Please enter your old password")) : (0, import_schema_fields.yupString)(),
+    newPassword: import_schema_fields.passwordSchema.defined().nonEmpty(t("Please enter your password")).test({
+      name: "is-valid-password",
+      test: (value, ctx) => {
+        const error = (0, import_password.getPasswordError)(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
+      }
+    }),
+    newPasswordRepeat: (0, import_schema_fields.yupString)().nullable().oneOf([yup.ref("newPassword"), "", null], t("Passwords do not match")).defined().nonEmpty(t("Please repeat your password"))
+  });
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(passwordSchema)
+  });
+  const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.usedForAuth).length > 0;
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const { oldPassword, newPassword } = data;
+      const error = user.hasPassword ? await user.updatePassword({ oldPassword, newPassword }) : await user.setPassword({ password: newPassword });
+      if (error) {
+        setError("oldPassword", { type: "manual", message: t("Incorrect password") });
+      } else {
+        reset();
+        setChangingPassword(false);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const registerPassword = register("newPassword");
+  const registerPasswordRepeat = register("newPasswordRepeat");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Password"),
+      description: user.hasPassword ? t("Update your password") : t("Set a password for your account"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4", children: !changingPassword ? hasValidEmail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "secondary",
+          onClick: () => setChangingPassword(true),
+          children: user.hasPassword ? t("Update password") : t("Set password")
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: t("To set a password, please add a sign-in email.") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "form",
+        {
+          onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+          noValidate: true,
+          children: [
+            user.hasPassword && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Input,
+                {
+                  id: "old-password",
+                  type: "password",
+                  autoComplete: "current-password",
+                  ...register("oldPassword")
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.oldPassword?.message?.toString() })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("New password") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_stack_ui.PasswordInput,
+              {
+                id: "new-password",
+                autoComplete: "new-password",
+                ...registerPassword,
+                onChange: (e) => {
+                  clearErrors("newPassword");
+                  clearErrors("newPasswordRepeat");
+                  (0, import_promises.runAsynchronously)(registerPassword.onChange(e));
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.newPassword?.message?.toString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat new password") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_stack_ui.PasswordInput,
+              {
+                id: "repeat-password",
+                autoComplete: "new-password",
+                ...registerPasswordRepeat,
+                onChange: (e) => {
+                  clearErrors("newPassword");
+                  clearErrors("newPasswordRepeat");
+                  (0, import_promises.runAsynchronously)(registerPasswordRepeat.onChange(e));
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-6 flex gap-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: user.hasPassword ? t("Update Password") : t("Set Password") }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_stack_ui.Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    setChangingPassword(false);
+                    reset();
+                  },
+                  children: t("Cancel")
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function useMfaSection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const project = (0, import__.useStackApp)().useProject();
+  const user = (0, import__.useUser)({ or: "throw" });
+  const [generatedSecret, setGeneratedSecret] = (0, import_react.useState)(null);
+  const [qrCodeUrl, setQrCodeUrl] = (0, import_react.useState)(null);
+  const [mfaCode, setMfaCode] = (0, import_react.useState)("");
+  const [isMaybeWrong, setIsMaybeWrong] = (0, import_react.useState)(false);
+  const isEnabled = user.isMultiFactorRequired;
+  const [handleSubmit, isLoading] = (0, import_use_async_callback.useAsyncCallback)(async () => {
+    await user.update({
+      totpMultiFactorSecret: generatedSecret
+    });
+    setGeneratedSecret(null);
+    setQrCodeUrl(null);
+    setMfaCode("");
+  }, [generatedSecret, user]);
+  (0, import_react.useEffect)(() => {
+    setIsMaybeWrong(false);
+    (0, import_promises.runAsynchronouslyWithAlert)(async () => {
+      if (generatedSecret && await new import_otp.TOTPController().verify(mfaCode, generatedSecret)) {
+        await handleSubmit();
+      }
+      setIsMaybeWrong(true);
+    });
+  }, [mfaCode, generatedSecret, handleSubmit]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Multi-factor authentication"),
+      description: isEnabled ? t("Multi-factor authentication is currently enabled.") : t("Multi-factor authentication is currently disabled."),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4", children: [
+        !isEnabled && generatedSecret && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: t("Scan this QR code with your authenticator app:") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { width: 200, height: 200, src: qrCodeUrl ?? (0, import_errors.throwErr)("TOTP QR code failed to generate"), alt: t("TOTP multi-factor authentication QR code") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: t("Then, enter your six-digit MFA code:") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Input,
+            {
+              value: mfaCode,
+              onChange: (e) => {
+                setIsMaybeWrong(false);
+                setMfaCode(e.target.value);
+              },
+              placeholder: "123456",
+              maxLength: 6,
+              disabled: isLoading
+            }
+          ),
+          isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Incorrect code. Please try again.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Button,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setGeneratedSecret(null);
+                setQrCodeUrl(null);
+                setMfaCode("");
+              },
+              children: t("Cancel")
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-2", children: isEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "secondary",
+            onClick: async () => {
+              await user.update({
+                totpMultiFactorSecret: null
+              });
+            },
+            children: t("Disable MFA")
+          }
+        ) : !generatedSecret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "secondary",
+            onClick: async () => {
+              const secret = (0, import_crypto.generateRandomValues)(new Uint8Array(20));
+              setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+              setGeneratedSecret(secret);
+            },
+            children: t("Enable MFA")
+          }
+        ) })
+      ] })
+    }
+  );
+}
+async function generateTotpQrCode(project, user, secret) {
+  const uri = (0, import_otp.createTOTPKeyURI)(project.displayName, user.primaryEmail ?? user.id, secret);
+  return await QRCode.toDataURL(uri);
+}
+function useSignOutSection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "throw" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Sign out"),
+      description: t("End your current session"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "secondary",
+          onClick: () => user.signOut(),
+          children: t("Sign out")
+        }
+      ) })
+    }
+  );
+}
+function TeamPage(props) {
+  const teamUserProfileSection = useTeamUserProfileSection(props);
+  const teamProfileImageSection = useTeamProfileImageSection(props);
+  const teamDisplayNameSection = useTeamDisplayNameSection(props);
+  const leaveTeamSection = useLeaveTeamSection(props);
+  const memberInvitationSection = useMemberInvitationSection(props);
+  const memberListSection = useMemberListSection(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    teamUserProfileSection,
+    memberListSection,
+    memberInvitationSection,
+    teamProfileImageSection,
+    teamDisplayNameSection,
+    leaveTeamSection
+  ] });
+}
+function useLeaveTeamSection(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const [leaving, setLeaving] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Leave Team"),
+      description: t("leave this team and remove your team profile"),
+      children: !leaving ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          variant: "secondary",
+          onClick: () => setLeaving(true),
+          children: t("Leave team")
+        }
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to leave the team?") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Button,
+            {
+              variant: "destructive",
+              onClick: async () => {
+                await user.leaveTeam(props.team);
+                window.location.reload();
+              },
+              children: t("Leave")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Button,
+            {
+              variant: "secondary",
+              onClick: () => setLeaving(false),
+              children: t("Cancel")
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function useTeamProfileImageSection(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Team profile image"),
+      description: t("Upload an image for your team"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_profile_image_editor.ProfileImageEditor,
+        {
+          user: props.team,
+          onProfileImageUrlChange: async (profileImageUrl) => {
+            await props.team.update({ profileImageUrl });
+          }
+        }
+      )
+    }
+  );
+}
+function useTeamDisplayNameSection(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Team display name"),
+      description: t("Change the display name of your team"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        EditableText,
+        {
+          value: props.team.displayName,
+          onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+        }
+      )
+    }
+  );
+}
+function useTeamUserProfileSection(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const profile = user.useTeamProfile(props.team);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Team user name"),
+      description: t("Overwrite your user display name in this team"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        EditableText,
+        {
+          value: profile.displayName || "",
+          onSave: async (newDisplayName) => {
+            await profile.update({ displayName: newDisplayName });
+          }
+        }
+      )
+    }
+  );
+}
+function useMemberInvitationSection(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const invitationSchema = (0, import_schema_fields.yupObject)({
+    email: (0, import_schema_fields.strictEmailSchema)(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address"))
+  });
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
+  const readMemberPermission = user.usePermission(props.team, "$read_members");
+  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
+  if (!inviteMemberPermission) {
+    return null;
+  }
+  let invitationsToShow = [];
+  if (readMemberPermission) {
+    invitationsToShow = props.team.useInvitations();
+  }
+  const { register, handleSubmit, formState: { errors }, watch } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(invitationSchema)
+  });
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [invitedEmail, setInvitedEmail] = (0, import_react.useState)(null);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      await props.team.inviteUser({ email: data.email });
+      setInvitedEmail(data.email);
+    } finally {
+      setLoading(false);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    setInvitedEmail(null);
+  }, [watch("email")]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Section,
+      {
+        title: t("Invite member"),
+        description: t("Invite a user to your team through email"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "form",
+          {
+            onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+            noValidate: true,
+            className: "w-full",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 sm:flex-row w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_stack_ui.Input,
+                  {
+                    placeholder: t("Email"),
+                    ...register("email")
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: t("Invite User") })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.email?.message?.toString() }),
+              invitedEmail && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Typography, { type: "label", variant: "secondary", children: [
+                "Invited ",
+                invitedEmail
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    invitationsToShow.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Table, { className: "mt-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: t("Outstanding invitations") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[60px]", children: t("Expires") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[36px] max-w-[36px]" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: invitationsToShow.map((invitation, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: invitation.recipientEmail }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Trash, { className: "w-4 h-4" }) }) })
+      ] }, invitation.id)) })
+    ] }) })
+  ] });
+}
+function useMemberListSection(props) {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const readMemberPermission = user.usePermission(props.team, "$read_members");
+  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
+  if (!readMemberPermission && !inviteMemberPermission) {
+    return null;
+  }
+  const users = props.team.useUsers();
+  if (!readMemberPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { className: "font-medium mb-2", children: t("Members") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Table, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[100px]", children: t("User") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: t("Name") })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: users.map(({ id, teamProfile }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user: teamProfile }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: teamProfile.displayName }) })
+      ] }, id)) })
+    ] }) })
+  ] });
+}
+function TeamCreation() {
+  const { t } = (0, import_translations.useTranslation)();
+  const teamCreationSchema = (0, import_schema_fields.yupObject)({
+    displayName: (0, import_schema_fields.yupString)().defined().nonEmpty(t("Please enter a team name"))
+  });
+  const { register, handleSubmit, formState: { errors } } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(teamCreationSchema)
+  });
+  const app = (0, import__.useStackApp)();
+  const project = app.useProject();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const navigate = app.useNavigate();
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  if (!project.config.clientTeamCreationEnabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.MessageCard, { title: t("Team creation is not enabled") });
+  }
+  const onSubmit = async (data) => {
+    setLoading(true);
+    let team;
+    try {
+      team = await user.createTeam({ displayName: data.displayName });
+    } finally {
+      setLoading(false);
+    }
+    navigate(`#team-${team.id}`);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PageLayout, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: t("Create a Team"), description: t("Enter a display name for your new team"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "form",
+    {
+      onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      className: "flex gap-2 flex-col sm:flex-row",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Input,
+            {
+              id: "displayName",
+              type: "text",
+              ...register("displayName")
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.displayName?.message?.toString() })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: t("Create") })
+      ]
+    }
+  ) }) });
+}
+function useDeleteAccountSection() {
+  const { t } = (0, import_translations.useTranslation)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const app = (0, import__.useStackApp)();
+  const project = app.useProject();
+  const [deleting, setDeleting] = (0, import_react.useState)(false);
+  if (!project.config.clientUserDeletionEnabled) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Delete Account"),
+      description: t("Permanently remove your account and all associated data"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.AccordionItem, { value: "item-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AccordionTrigger, { children: t("Danger zone") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.AccordionContent, { children: !deleting ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "destructive",
+            onClick: () => setDeleting(true),
+            children: t("Delete account")
+          }
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_stack_ui.Button,
+              {
+                variant: "destructive",
+                onClick: async () => {
+                  await user.delete();
+                  await app.redirectToHome();
+                },
+                children: t("Delete Account")
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_stack_ui.Button,
+              {
+                variant: "secondary",
+                onClick: () => setDeleting(false),
+                children: t("Cancel")
+              }
+            )
+          ] })
+        ] }) })
+      ] }) }) })
+    }
+  );
+}
+function EditableText(props) {
+  const [editing, setEditing] = (0, import_react.useState)(false);
+  const [editingValue, setEditingValue] = (0, import_react.useState)(props.value);
+  const { t } = (0, import_translations.useTranslation)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: editing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Input,
+      {
+        value: editingValue,
+        onChange: (e) => setEditingValue(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
+      {
+        size: "sm",
+        onClick: async () => {
+          await props.onSave?.(editingValue);
+          setEditing(false);
+        },
+        children: t("Save")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
+      {
+        size: "sm",
+        variant: "secondary",
+        onClick: () => {
+          setEditingValue(props.value);
+          setEditing(false);
+        },
+        children: t("Cancel")
+      }
+    )
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: props.value }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { onClick: () => setEditing(true), size: "icon", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Edit, { className: "w-4 h-4" }) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccountSettings,
+  EditableText,
+  TeamCreation,
+  useDeleteAccountSection
+});
+//# sourceMappingURL=account-settings.js.map