@stackframe/react 2.7.20

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

@@ -0,0 +1,1058 @@
+"use client";
+"use client";
+
+// src/components-page/account-settings.tsx
+import { yupResolver } from "@hookform/resolvers/yup";
+import { KnownErrors } from "@stackframe/stack-shared";
+import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
+import { passwordSchema as schemaFieldsPasswordSchema, strictEmailSchema, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, Badge, Button, Input, Label, PasswordInput, Separator, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { Edit, Trash, icons } from "lucide-react";
+import { TOTPController, createTOTPKeyURI } from "oslo/otp";
+import * as QRCode from "qrcode";
+import React, { Suspense, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { MessageCard, useStackApp, useUser } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { SidebarLayout } from "../components/elements/sidebar-layout";
+import { UserAvatar } from "../components/elements/user-avatar";
+import { ProfileImageEditor } from "../components/profile-image-editor";
+import { TeamIcon } from "../components/team-icon";
+import { useTranslation } from "../lib/translations";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Icon = ({ name }) => {
+  const LucideIcon = icons[name];
+  return /* @__PURE__ */ jsx(LucideIcon, { className: "mr-2 h-4 w-4" });
+};
+function AccountSettings(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const teams = user.useTeams();
+  const stackApp = useStackApp();
+  const project = stackApp.useProject();
+  return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage: !!props.fullPage, children: /* @__PURE__ */ jsx("div", { className: "self-stretch flex-grow w-full", children: /* @__PURE__ */ jsx(
+    SidebarLayout,
+    {
+      items: [
+        {
+          title: t("My Profile"),
+          type: "item",
+          id: "profile",
+          icon: /* @__PURE__ */ jsx(Icon, { name: "Contact" }),
+          content: /* @__PURE__ */ jsx(ProfilePage, {})
+        },
+        {
+          title: t("Emails & Auth"),
+          type: "item",
+          id: "auth",
+          icon: /* @__PURE__ */ jsx(Icon, { name: "ShieldCheck" }),
+          content: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(EmailsAndAuthPageSkeleton, {}), children: /* @__PURE__ */ jsx(EmailsAndAuthPage, {}) })
+        },
+        {
+          title: t("Settings"),
+          type: "item",
+          id: "settings",
+          icon: /* @__PURE__ */ jsx(Icon, { name: "Settings" }),
+          content: /* @__PURE__ */ jsx(SettingsPage, {})
+        },
+        ...props.extraItems?.map((item) => ({
+          title: item.title,
+          type: "item",
+          id: item.id,
+          icon: (() => {
+            const iconName = item.iconName;
+            if (iconName) {
+              return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex gap-2 items-center w-full", children: [
+            /* @__PURE__ */ jsx(TeamIcon, { team }),
+            /* @__PURE__ */ jsx(Typography, { className: "max-w-[320px] md:w-[90%] truncate", children: team.displayName })
+          ] }),
+          type: "item",
+          id: `team-${team.id}`,
+          content: /* @__PURE__ */ jsx(TeamPage, { team })
+        })),
+        ...project.config.clientTeamCreationEnabled ? [{
+          title: t("Create a team"),
+          icon: /* @__PURE__ */ jsx(Icon, { name: "CirclePlus" }),
+          type: "item",
+          id: "team-creation",
+          content: /* @__PURE__ */ jsx(TeamCreation, {})
+        }] : []
+      ].filter((p) => p.type === "divider" || p.content),
+      title: t("Account Settings")
+    }
+  ) }) });
+}
+function Section(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sm:flex-1 flex flex-col justify-center", children: [
+      /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: props.title }),
+      props.description && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "footnote", children: props.description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "sm:flex-1 sm:items-end flex flex-col gap-2 ", children: props.children })
+  ] });
+}
+function PageLayout(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(Separator, {}),
+    React.Children.map(props.children, (child) => child && /* @__PURE__ */ jsxs(Fragment, { children: [
+      child,
+      /* @__PURE__ */ jsx(Separator, {})
+    ] }))
+  ] });
+}
+function ProfilePage() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("User name"),
+        description: t("This is a display name and is not used for authentication"),
+        children: /* @__PURE__ */ jsx(
+          EditableText,
+          {
+            value: user.displayName || "",
+            onSave: async (newDisplayName) => {
+              await user.update({ displayName: newDisplayName });
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Profile image"),
+        description: t("Upload your own image as your avatar"),
+        children: /* @__PURE__ */ jsx(
+          ProfileImageEditor,
+          {
+            user,
+            onProfileImageUrlChange: async (profileImageUrl) => {
+              await user.update({ profileImageUrl });
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function EmailsSection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const contactChannels = user.useContactChannels();
+  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);
+  const [addingEmailLoading, setAddingEmailLoading] = useState(false);
+  const [addedEmail, setAddedEmail] = useState(null);
+  const isLastEmail = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
+  useEffect(() => {
+    if (addedEmail) {
+      runAsynchronously(async () => {
+        const cc = contactChannels.find((x) => x.value === addedEmail);
+        if (cc && !cc.isVerified) {
+          await cc.sendVerificationEmail();
+        }
+        setAddedEmail(null);
+      });
+    }
+  }, [contactChannels, addedEmail]);
+  const emailSchema = yupObject({
+    email: 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 } = useForm({
+    resolver: 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: [
+      /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: t("Emails") }),
+      addingEmail ? /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (e) => {
+            e.preventDefault();
+            runAsynchronously(handleSubmit(onSubmit));
+          },
+          className: "flex flex-col",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...register("email"),
+                  placeholder: t("Enter email")
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", loading: addingEmailLoading, children: t("Add") }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    setAddingEmail(false);
+                    reset();
+                  },
+                  children: t("Cancel")
+                }
+              )
+            ] }),
+            errors.email && /* @__PURE__ */ jsx(FormWarningText, { text: errors.email.message })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex md:justify-end", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setAddingEmail(true), children: t("Add an email") }) })
+    ] }),
+    contactChannels.length > 0 ? /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(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__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row gap-2 md:gap-4", children: [
+        x.value,
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          x.isPrimary ? /* @__PURE__ */ jsx(Badge, { children: t("Primary") }) : null,
+          !x.isVerified ? /* @__PURE__ */ jsx(Badge, { variant: "destructive", children: t("Unverified") }) : null,
+          x.usedForAuth ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: t("Used for sign-in") }) : null
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableCell, { className: "flex justify-end", children: /* @__PURE__ */ jsx(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 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__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(EmailsSection, {}),
+    passwordSection,
+    passkeySection,
+    otpSection,
+    mfaSection
+  ] });
+}
+function EmailsAndAuthPageSkeleton() {
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" })
+  ] });
+}
+function usePasskeySection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "throw" });
+  const stackApp = 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] = 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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Section, { title: t("Passkey"), description: hasPasskey ? t("Passkey registered") : t("Register a passkey"), children: /* @__PURE__ */ jsxs("div", { className: "flex md:justify-end gap-2", children: [
+    !hasValidEmail && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To enable Passkey sign-in, please add a verified sign-in email.") }),
+    hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ jsx(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__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { onClick: handleAddNewPasskey, variant: "secondary", children: t("Add new passkey") }) }),
+    hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: () => setShowConfirmationModal(true),
+        children: t("Delete Passkey")
+      }
+    ),
+    hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "destructive",
+            onClick: handleDeletePasskey,
+            children: t("Disable")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => setShowConfirmationModal(false),
+            children: t("Cancel")
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
+function useOtpSection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "throw" });
+  const project = useStackApp().useProject();
+  const contactChannels = user.useContactChannels();
+  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;
+  const [disabling, setDisabling] = 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__ */ 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__ */ jsx("div", { className: "flex md:justify-end", children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      onClick: () => setDisabling(true),
+      children: t("Disable OTP")
+    }
+  ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "destructive",
+          onClick: handleDisableOTP,
+          children: t("Disable")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setDisabling(false),
+          children: t("Cancel")
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ jsx(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__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      onClick: async () => {
+        await user.update({ otpAuthEnabled: true });
+      },
+      children: t("Enable OTP")
+    }
+  ) : /* @__PURE__ */ jsx(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__ */ jsxs(PageLayout, { children: [
+    deleteAccountSection,
+    signOutSection
+  ] });
+}
+function usePasswordSection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "throw" });
+  const contactChannels = user.useContactChannels();
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const passwordSchema = yupObject({
+    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t("Please enter your old password")) : yupString(),
+    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty(t("Please enter your password")).test({
+      name: "is-valid-password",
+      test: (value, ctx) => {
+        const error = getPasswordError(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
+      }
+    }),
+    newPasswordRepeat: 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 } = useForm({
+    resolver: 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__ */ jsx(
+    Section,
+    {
+      title: t("Password"),
+      description: user.hasPassword ? t("Update your password") : t("Set a password for your account"),
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: !changingPassword ? hasValidEmail ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setChangingPassword(true),
+          children: user.hasPassword ? t("Update password") : t("Set password")
+        }
+      ) : /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To set a password, please add a sign-in email.") }) : /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+          noValidate: true,
+          children: [
+            user.hasPassword && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "old-password",
+                  type: "password",
+                  autoComplete: "current-password",
+                  ...register("oldPassword")
+                }
+              ),
+              /* @__PURE__ */ jsx(FormWarningText, { text: errors.oldPassword?.message?.toString() })
+            ] }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("New password") }),
+            /* @__PURE__ */ jsx(
+              PasswordInput,
+              {
+                id: "new-password",
+                autoComplete: "new-password",
+                ...registerPassword,
+                onChange: (e) => {
+                  clearErrors("newPassword");
+                  clearErrors("newPasswordRepeat");
+                  runAsynchronously(registerPassword.onChange(e));
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPassword?.message?.toString() }),
+            /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat new password") }),
+            /* @__PURE__ */ jsx(
+              PasswordInput,
+              {
+                id: "repeat-password",
+                autoComplete: "new-password",
+                ...registerPasswordRepeat,
+                onChange: (e) => {
+                  clearErrors("newPassword");
+                  clearErrors("newPasswordRepeat");
+                  runAsynchronously(registerPasswordRepeat.onChange(e));
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-6 flex gap-4", children: [
+              /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: user.hasPassword ? t("Update Password") : t("Set Password") }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    setChangingPassword(false);
+                    reset();
+                  },
+                  children: t("Cancel")
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+function useMfaSection() {
+  const { t } = useTranslation();
+  const project = useStackApp().useProject();
+  const user = useUser({ or: "throw" });
+  const [generatedSecret, setGeneratedSecret] = useState(null);
+  const [qrCodeUrl, setQrCodeUrl] = useState(null);
+  const [mfaCode, setMfaCode] = useState("");
+  const [isMaybeWrong, setIsMaybeWrong] = useState(false);
+  const isEnabled = user.isMultiFactorRequired;
+  const [handleSubmit, isLoading] = useAsyncCallback(async () => {
+    await user.update({
+      totpMultiFactorSecret: generatedSecret
+    });
+    setGeneratedSecret(null);
+    setQrCodeUrl(null);
+    setMfaCode("");
+  }, [generatedSecret, user]);
+  useEffect(() => {
+    setIsMaybeWrong(false);
+    runAsynchronouslyWithAlert(async () => {
+      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {
+        await handleSubmit();
+      }
+      setIsMaybeWrong(true);
+    });
+  }, [mfaCode, generatedSecret, handleSubmit]);
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        !isEnabled && generatedSecret && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Typography, { children: t("Scan this QR code with your authenticator app:") }),
+          /* @__PURE__ */ jsx("img", { width: 200, height: 200, src: qrCodeUrl ?? throwErr("TOTP QR code failed to generate"), alt: t("TOTP multi-factor authentication QR code") }),
+          /* @__PURE__ */ jsx(Typography, { children: t("Then, enter your six-digit MFA code:") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: mfaCode,
+              onChange: (e) => {
+                setIsMaybeWrong(false);
+                setMfaCode(e.target.value);
+              },
+              placeholder: "123456",
+              maxLength: 6,
+              disabled: isLoading
+            }
+          ),
+          isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Incorrect code. Please try again.") }),
+          /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setGeneratedSecret(null);
+                setQrCodeUrl(null);
+                setMfaCode("");
+              },
+              children: t("Cancel")
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: isEnabled ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: async () => {
+              await user.update({
+                totpMultiFactorSecret: null
+              });
+            },
+            children: t("Disable MFA")
+          }
+        ) : !generatedSecret && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: async () => {
+              const secret = generateRandomValues(new Uint8Array(20));
+              setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+              setGeneratedSecret(secret);
+            },
+            children: t("Enable MFA")
+          }
+        ) })
+      ] })
+    }
+  );
+}
+async function generateTotpQrCode(project, user, secret) {
+  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);
+  return await QRCode.toDataURL(uri);
+}
+function useSignOutSection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "throw" });
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Sign out"),
+      description: t("End your current session"),
+      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        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__ */ jsxs(PageLayout, { children: [
+    teamUserProfileSection,
+    memberListSection,
+    memberInvitationSection,
+    teamProfileImageSection,
+    teamDisplayNameSection,
+    leaveTeamSection
+  ] });
+}
+function useLeaveTeamSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const [leaving, setLeaving] = useState(false);
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Leave Team"),
+      description: t("leave this team and remove your team profile"),
+      children: !leaving ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setLeaving(true),
+          children: t("Leave team")
+        }
+      ) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Are you sure you want to leave the team?") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              onClick: async () => {
+                await user.leaveTeam(props.team);
+                window.location.reload();
+              },
+              children: t("Leave")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => setLeaving(false),
+              children: t("Cancel")
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function useTeamProfileImageSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team profile image"),
+      description: t("Upload an image for your team"),
+      children: /* @__PURE__ */ jsx(
+        ProfileImageEditor,
+        {
+          user: props.team,
+          onProfileImageUrlChange: async (profileImageUrl) => {
+            await props.team.update({ profileImageUrl });
+          }
+        }
+      )
+    }
+  );
+}
+function useTeamDisplayNameSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team display name"),
+      description: t("Change the display name of your team"),
+      children: /* @__PURE__ */ jsx(
+        EditableText,
+        {
+          value: props.team.displayName,
+          onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+        }
+      )
+    }
+  );
+}
+function useTeamUserProfileSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const profile = user.useTeamProfile(props.team);
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team user name"),
+      description: t("Overwrite your user display name in this team"),
+      children: /* @__PURE__ */ jsx(
+        EditableText,
+        {
+          value: profile.displayName || "",
+          onSave: async (newDisplayName) => {
+            await profile.update({ displayName: newDisplayName });
+          }
+        }
+      )
+    }
+  );
+}
+function useMemberInvitationSection(props) {
+  const { t } = useTranslation();
+  const invitationSchema = yupObject({
+    email: strictEmailSchema(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address"))
+  });
+  const user = 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 } = useForm({
+    resolver: yupResolver(invitationSchema)
+  });
+  const [loading, setLoading] = useState(false);
+  const [invitedEmail, setInvitedEmail] = useState(null);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      await props.team.inviteUser({ email: data.email });
+      setInvitedEmail(data.email);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    setInvitedEmail(null);
+  }, [watch("email")]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Invite member"),
+        description: t("Invite a user to your team through email"),
+        children: /* @__PURE__ */ jsxs(
+          "form",
+          {
+            onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+            noValidate: true,
+            className: "w-full",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row w-full", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    placeholder: t("Email"),
+                    ...register("email")
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Invite User") })
+              ] }),
+              /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+              invitedEmail && /* @__PURE__ */ jsxs(Typography, { type: "label", variant: "secondary", children: [
+                "Invited ",
+                invitedEmail
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    invitationsToShow.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Table, { className: "mt-6", children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Outstanding invitations") }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[60px]", children: t("Expires") }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[36px] max-w-[36px]" })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
+        /* @__PURE__ */ jsx(TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ jsx(Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" }) }) })
+      ] }, invitation.id)) })
+    ] }) })
+  ] });
+}
+function useMemberListSection(props) {
+  const { t } = useTranslation();
+  const user = 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__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Typography, { className: "font-medium mb-2", children: t("Members") }),
+    /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: t("User") }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Name") })
+      ] }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: users.map(({ id, teamProfile }, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(UserAvatar, { user: teamProfile }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: teamProfile.displayName }) })
+      ] }, id)) })
+    ] }) })
+  ] });
+}
+function TeamCreation() {
+  const { t } = useTranslation();
+  const teamCreationSchema = yupObject({
+    displayName: yupString().defined().nonEmpty(t("Please enter a team name"))
+  });
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(teamCreationSchema)
+  });
+  const app = useStackApp();
+  const project = app.useProject();
+  const user = useUser({ or: "redirect" });
+  const navigate = app.useNavigate();
+  const [loading, setLoading] = useState(false);
+  if (!project.config.clientTeamCreationEnabled) {
+    return /* @__PURE__ */ jsx(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__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(Section, { title: t("Create a Team"), description: t("Enter a display name for your new team"), children: /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      className: "flex gap-2 flex-col sm:flex-row",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "displayName",
+              type: "text",
+              ...register("displayName")
+            }
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Create") })
+      ]
+    }
+  ) }) });
+}
+function useDeleteAccountSection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const app = useStackApp();
+  const project = app.useProject();
+  const [deleting, setDeleting] = useState(false);
+  if (!project.config.clientUserDeletionEnabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Delete Account"),
+      description: t("Permanently remove your account and all associated data"),
+      children: /* @__PURE__ */ jsx("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { children: t("Danger zone") }),
+        /* @__PURE__ */ jsx(AccordionContent, { children: !deleting ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "destructive",
+            onClick: () => setDeleting(true),
+            children: t("Delete account")
+          }
+        ) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "destructive",
+                onClick: async () => {
+                  await user.delete();
+                  await app.redirectToHome();
+                },
+                children: t("Delete Account")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => setDeleting(false),
+                children: t("Cancel")
+              }
+            )
+          ] })
+        ] }) })
+      ] }) }) })
+    }
+  );
+}
+function EditableText(props) {
+  const [editing, setEditing] = useState(false);
+  const [editingValue, setEditingValue] = useState(props.value);
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: editing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        value: editingValue,
+        onChange: (e) => setEditingValue(e.target.value)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        onClick: async () => {
+          await props.onSave?.(editingValue);
+          setEditing(false);
+        },
+        children: t("Save")
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        variant: "secondary",
+        onClick: () => {
+          setEditingValue(props.value);
+          setEditing(false);
+        },
+        children: t("Cancel")
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography, { children: props.value }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => setEditing(true), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Edit, { className: "w-4 h-4" }) })
+  ] }) });
+}
+export {
+  AccountSettings,
+  EditableText,
+  TeamCreation,
+  useDeleteAccountSection
+};
+//# sourceMappingURL=account-settings.js.map