@stackframe/stack 2.5.18 → 2.5.20

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

@@ -32,217 +32,239 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components-page/account-settings.tsx
 var account_settings_exports = {};
 __export(account_settings_exports, {
-  AccountSettings: () => AccountSettings
+  AccountSettings: () => AccountSettings,
+  TeamCreation: () => TeamCreation
 });
 module.exports = __toCommonJS(account_settings_exports);
-var import_react = require("react");
-var import__ = require("..");
-var import_predefined_message_card = require("../components/message-cards/predefined-message-card");
-var import_user_avatar = require("../components/elements/user-avatar");
-var import_react2 = require("react");
-var import_form_warning = require("../components/elements/form-warning");
+var import_yup = require("@hookform/resolvers/yup");
 var import_password = require("@stackframe/stack-shared/dist/helpers/password");
-var import_stack_ui = require("@stackframe/stack-ui");
+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_otp = require("oslo/otp");
-var QRCode = __toESM(require("qrcode"));
 var import_errors = require("@stackframe/stack-shared/dist/utils/errors");
-var import_use_async_callback = require("@stackframe/stack-shared/dist/hooks/use-async-callback");
 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 = 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_sidebar_layout = require("../components/elements/sidebar-layout");
+var import_user_avatar = require("../components/elements/user-avatar");
+var import_team_icon = require("../components/team-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
-function SettingSection(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.CardHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h4", children: props.title }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "label", variant: "secondary", children: props.desc })
-    ] }) }),
-    props.children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-4", children: props.children }) }),
-    props.buttonText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.CardFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_stack_ui.Button,
-      {
-        disabled: props.buttonDisabled,
-        onClick: props.onButtonClick,
-        variant: props.buttonVariant,
-        children: props.buttonText
-      }
-    ) }) })
-  ] });
-}
-function ProfileSection() {
-  const user = (0, import__.useUser)();
-  const [userInfo, setUserInfo] = (0, import_react2.useState)({ displayName: user.displayName || "" });
-  const [changed, setChanged] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    SettingSection,
+function AccountSettings({ fullPage = false }) {
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const teams = user.useTeams();
+  const project = (0, import__.useStackApp)().useProject();
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_sidebar_layout.SidebarLayout,
     {
-      title: "Profile",
-      desc: "Your profile information",
-      buttonDisabled: !changed,
-      buttonText: "Save",
-      onButtonClick: async () => {
-        await user.update(userInfo);
-        setChanged(false);
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-4 items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user, size: 50 }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: user.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: user.primaryEmail })
+      items: [
+        {
+          title: "My Profile",
+          type: "item",
+          subpath: "/profile",
+          icon: import_lucide_react.Contact,
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileSection, {})
+        },
+        {
+          title: "Security",
+          type: "item",
+          icon: import_lucide_react.ShieldCheck,
+          subpath: "/security",
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailVerificationSection, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasswordSection, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MfaSection, {})
           ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "display-name", className: "mb-1", children: "Display Name" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_stack_ui.Input,
-            {
-              id: "display-name",
-              value: userInfo.displayName,
-              onChange: (e) => {
-                setUserInfo((i) => ({ ...i, displayName: e.target.value }));
-                setChanged(true);
-              }
-            }
-          )
-        ] })
-      ]
+        },
+        {
+          title: "Settings",
+          subpath: "/settings",
+          type: "item",
+          icon: import_lucide_react.Settings,
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignOutSection, {})
+        },
+        ...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
+          title: "Teams",
+          type: "divider"
+        }] : [],
+        ...teams.map((team) => ({
+          title: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-2 items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_team_icon.TeamIcon, { team }),
+            team.displayName
+          ] }),
+          type: "item",
+          subpath: `/teams/${team.id}`,
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileSettings, { team }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ManagementSettings, { team }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemberInvitation, { team }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MembersSettings, { team }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserSettings, { team })
+          ] })
+        })),
+        ...project.config.clientTeamCreationEnabled ? [{
+          title: "Create a team",
+          icon: import_lucide_react.CirclePlus,
+          type: "item",
+          subpath: "/team-creation",
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamCreation, {})
+        }] : []
+      ].filter((p) => p.type === "divider" || p.content),
+      title: "Account Settings",
+      basePath: "/handler/account-settings"
     }
   );
+  if (fullPage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Container, { size: 1e3, className: "stack-scope", children: inner });
+  } else {
+    return inner;
+  }
+}
+function ProfileSection() {
+  const user = (0, import__.useUser)({ or: "redirect" });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Display name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
+      await user.update({ displayName: newDisplayName });
+    } })
+  ] }) });
 }
 function EmailVerificationSection() {
-  const user = (0, import__.useUser)();
-  const [emailSent, setEmailSent] = (0, import_react2.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    SettingSection,
-    {
-      title: "Email Verification",
-      desc: "We want to make sure that you own the email address.",
-      buttonDisabled: emailSent,
-      buttonText: !user?.primaryEmailVerified ? emailSent ? "Email sent!" : "Send Email" : void 0,
-      onButtonClick: async () => {
-        await user?.sendVerificationEmail();
-        setEmailSent(true);
-      },
-      children: user?.primaryEmailVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: "Your email has been verified." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: "Your email has not been verified." })
-    }
-  );
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const [emailSent, setEmailSent] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Email Verification" }),
+    user.primaryEmailVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: "Your email has been verified." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: "Your email has not been verified." }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
+      {
+        disabled: emailSent,
+        onClick: async () => {
+          await user.sendVerificationEmail();
+          setEmailSent(true);
+        },
+        children: emailSent ? "Email sent!" : "Send Verification Email"
+      }
+    ) })
+  ] }) });
 }
+var passwordSchema = (0, import_schema_fields.yupObject)({
+  oldPassword: (0, import_schema_fields.yupString)().required("Please enter your old password"),
+  newPassword: (0, import_schema_fields.yupString)().required("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], "Passwords do not match").required("Please repeat your password")
+});
 function PasswordSection() {
   const user = (0, import__.useUser)({ or: "throw" });
-  const [oldPassword, setOldPassword] = (0, import_react2.useState)("");
-  const [oldPasswordError, setOldPasswordError] = (0, import_react2.useState)("");
-  const [newPassword, setNewPassword] = (0, import_react2.useState)("");
-  const [newPasswordError, setNewPasswordError] = (0, import_react2.useState)("");
-  const [repeatNewPassword, setRepeatNewPassword] = (0, import_react2.useState)("");
-  const [repeatNewPasswordError, setRepeatNewPasswordError] = (0, import_react2.useState)("");
-  const [passwordChanged, setPasswordChanged] = (0, import_react2.useState)(false);
+  const [changingPassword, setChangingPassword] = (0, import_react.useState)(false);
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = (0, import_react_hook_form.useForm)({
+    resolver: (0, import_yup.yupResolver)(passwordSchema)
+  });
+  const [alreadyReset, setAlreadyReset] = (0, import_react.useState)(false);
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const { oldPassword, newPassword } = data;
+      const error = await user.updatePassword({ oldPassword, newPassword });
+      if (error) {
+        setError("oldPassword", { type: "manual", message: "Incorrect password" });
+      } else {
+        reset();
+        setAlreadyReset(true);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const registerPassword = register("newPassword");
+  const registerPasswordRepeat = register("newPasswordRepeat");
   if (!user.hasPassword) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    SettingSection,
-    {
-      title: "Password",
-      desc: "Change your password here.",
-      buttonDisabled: passwordChanged || !oldPassword && !newPassword && !repeatNewPassword,
-      buttonText: passwordChanged ? "Password changed!" : "Update Password",
-      onButtonClick: async () => {
-        setOldPasswordError("");
-        setNewPasswordError("");
-        setRepeatNewPasswordError("");
-        if (!oldPassword) {
-          setOldPasswordError("Please enter your old password");
-          return;
-        } else if (!newPassword) {
-          setNewPasswordError("Please enter a new password");
-          return;
-        } else if (!repeatNewPassword) {
-          setRepeatNewPasswordError("Please repeat your new password");
-          return;
-        } else {
-          const errorMessage = (0, import_password.getPasswordError)(newPassword);
-          if (errorMessage) {
-            setNewPasswordError(errorMessage.message);
-          } else {
-            if (newPassword !== repeatNewPassword) {
-              setRepeatNewPasswordError("Passwords do not match");
-              return;
-            }
-            const errorCode = await user.updatePassword({ oldPassword, newPassword });
-            if (errorCode) {
-              setOldPasswordError("Incorrect password");
-            } else {
-              setOldPassword("");
-              setNewPassword("");
-              setRepeatNewPassword("");
-              setPasswordChanged(true);
-            }
-          }
-        }
-      },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "old-password", className: "mb-1", children: "Old Password" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Change password" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: alreadyReset ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: "Password changed successfully!" }) : !changingPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.Button,
+      {
+        variant: "secondary",
+        onClick: async () => {
+          setChangingPassword(true);
+        },
+        children: "Change Password"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "old-password", className: "mb-1", children: "Old password" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_stack_ui.PasswordInput,
+            import_stack_ui.Input,
             {
               id: "old-password",
-              value: oldPassword,
-              onChange: (e) => {
-                setOldPassword(e.target.value);
-                setOldPasswordError("");
-                setPasswordChanged(false);
-              }
+              type: "password",
+              ...register("oldPassword")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: oldPasswordError })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "new-password", className: "mb-1", children: "New Password" }),
+          /* @__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: "Password" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_stack_ui.PasswordInput,
             {
               id: "new-password",
-              value: newPassword,
+              ...registerPassword,
               onChange: (e) => {
-                setNewPassword(e.target.value);
-                setNewPasswordError("");
-                setPasswordChanged(false);
+                clearErrors("newPassword");
+                clearErrors("newPasswordRepeat");
+                (0, import_promises.runAsynchronously)(registerPassword.onChange(e));
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: newPasswordError })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "repeat-new-password", className: "mb-1", children: "Repeat New Password" }),
+          /* @__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: "Repeat password" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_stack_ui.PasswordInput,
             {
-              id: "repeat-new-password",
-              value: repeatNewPassword,
+              id: "repeat-password",
+              ...registerPasswordRepeat,
               onChange: (e) => {
-                setRepeatNewPassword(e.target.value);
-                setRepeatNewPasswordError("");
-                setPasswordChanged(false);
+                clearErrors("newPassword");
+                clearErrors("newPasswordRepeat");
+                (0, import_promises.runAsynchronously)(registerPasswordRepeat.onChange(e));
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: repeatNewPasswordError })
-        ] })
-      ]
-    }
-  );
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form_warning.FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", className: "mt-6", loading, children: "Change Password" })
+        ]
+      }
+    ) })
+  ] });
 }
 function MfaSection() {
   const project = (0, import__.useStackApp)().useProject();
-  if (project.config.oauthProviders.length !== 0 || project.config.magicLinkEnabled) {
-    return null;
-  }
   const user = (0, import__.useUser)({ or: "throw" });
-  const [generatedSecret, setGeneratedSecret] = (0, import_react2.useState)(null);
-  const [qrCodeUrl, setQrCodeUrl] = (0, import_react2.useState)(null);
-  const [mfaCode, setMfaCode] = (0, import_react2.useState)("");
-  const [isMaybeWrong, setIsMaybeWrong] = (0, import_react2.useState)(false);
+  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({
@@ -261,29 +283,10 @@ function MfaSection() {
       setIsMaybeWrong(true);
     });
   }, [mfaCode, generatedSecret, handleSubmit]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    SettingSection,
-    {
-      title: "Multi-factor Authentication",
-      desc: "Secure your account with an additional layer of security.",
-      buttonVariant: "secondary",
-      buttonText: isEnabled ? "Disable" : generatedSecret ? "Cancel" : "Enable",
-      onButtonClick: async () => {
-        if (isEnabled) {
-          await user.update({
-            totpMultiFactorSecret: null
-          });
-        } else if (!generatedSecret) {
-          const secret = (0, import_crypto.generateRandomValues)(new Uint8Array(20));
-          setQrCodeUrl(await generateTotpQrCode(project, user, secret));
-          setGeneratedSecret(secret);
-        } else {
-          setGeneratedSecret(null);
-          setQrCodeUrl(null);
-          setMfaCode("");
-        }
-      },
-      children: isEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: "Multi-factor authentication is currently enabled." }) : generatedSecret ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 items-center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Multi-factor Authentication" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      isEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: "Multi-factor authentication is currently enabled." }) : generatedSecret ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 items-center", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: "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: "TOTP multi-factor authentication QR code" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: "Then, enter your six-digit MFA code:" }),
@@ -301,9 +304,32 @@ function MfaSection() {
           }
         ),
         isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: "Incorrect code. Please try again." })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: "Multi-factor authentication is currently disabled." })
-    }
-  );
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: "Multi-factor authentication is currently disabled." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_stack_ui.Button,
+        {
+          className: "mt-4",
+          variant: isEnabled ? "secondary" : "default",
+          onClick: async () => {
+            if (isEnabled) {
+              await user.update({
+                totpMultiFactorSecret: null
+              });
+            } else if (!generatedSecret) {
+              const secret = (0, import_crypto.generateRandomValues)(new Uint8Array(20));
+              setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+              setGeneratedSecret(secret);
+            } else {
+              setGeneratedSecret(null);
+              setQrCodeUrl(null);
+              setMfaCode("");
+            }
+          },
+          children: isEnabled ? "Disable" : generatedSecret ? "Cancel" : "Enable"
+        }
+      )
+    ] })
+  ] }) });
 }
 async function generateTotpQrCode(project, user, secret) {
   const uri = (0, import_otp.createTOTPKeyURI)(project.displayName, user.primaryEmail ?? user.id, secret);
@@ -311,41 +337,200 @@ async function generateTotpQrCode(project, user, secret) {
 }
 function SignOutSection() {
   const user = (0, import__.useUser)({ or: "throw" });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    SettingSection,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.Button,
     {
-      title: "Sign out",
-      desc: "Sign out of your account on this device.",
-      buttonVariant: "secondary",
-      buttonText: "Sign Out",
-      onButtonClick: () => user.signOut()
+      variant: "secondary",
+      onClick: () => user.signOut(),
+      children: "Sign Out"
     }
-  );
+  ) }) });
 }
-function AccountSettings({ fullPage = false }) {
-  const user = (0, import__.useUser)();
-  if (!user) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_predefined_message_card.PredefinedMessageCard, { type: "signedOut", fullPage });
+function UserSettings(props) {
+  const app = (0, import__.useStackApp)();
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const [leaving, setLeaving] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: !leaving ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_stack_ui.Button,
+    {
+      variant: "secondary",
+      onClick: async () => setLeaving(true),
+      children: "Leave team"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: "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: "Leave" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { variant: "secondary", onClick: () => setLeaving(false), children: "Cancel" })
+    ] })
+  ] }) }) });
+}
+function ManagementSettings(props) {
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
   }
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_stack_ui.cn)(fullPage ? "p-4" : "", "flex flex-col gap-4"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { type: "h2", children: "Account Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "secondary", type: "label", children: "Manage your account" })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: "Team display name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.EditableText,
+      {
+        value: props.team.displayName,
+        onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+      }
+    )
+  ] }) });
+}
+function ProfileSettings(props) {
+  const user = (0, import__.useUser)({ or: "redirect" });
+  const profile = user.useTeamProfile(props.team);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Label, { className: "flex gap-2", children: [
+      "User display name ",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.SimpleTooltip, { tooltip: "This overwrites your user display name in the account setting", type: "info" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmailVerificationSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PasswordSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MfaSection, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignOutSection, {})
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_stack_ui.EditableText,
+      {
+        value: profile.displayName || "",
+        onSave: async (newDisplayName) => {
+          await profile.update({ displayName: newDisplayName });
+        }
+      }
+    )
+  ] }) });
+}
+var invitationSchema = (0, import_schema_fields.yupObject)({
+  email: (0, import_schema_fields.yupString)().email().required("Please enter an email address")
+});
+function MemberInvitation(props) {
+  const project = (0, import__.useStackApp)().useProject();
+  if (!project.config.clientTeamCreationEnabled) {
+    return null;
+  }
+  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)(import_stack_ui.Label, { children: "Invite a user to team" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "form",
+      {
+        onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 md:flex-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_stack_ui.Input,
+              {
+                placeholder: "Email",
+                ...register("email")
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", loading, children: "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
+          ] })
+        ]
+      }
+    )
   ] });
-  if (fullPage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Container, { size: 600, className: "stack-scope", children: inner });
-  } else {
-    return inner;
+}
+function MembersSettings(props) {
+  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.Label, { children: "Members" }),
+    /* @__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: "User" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: "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)) })
+    ] })
+  ] });
+}
+var teamCreationSchema = (0, import_schema_fields.yupObject)({
+  displayName: (0, import_schema_fields.yupString)().required("Please enter a team name")
+});
+function TeamCreation() {
+  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 [loading, setLoading] = (0, import_react.useState)(false);
+  if (!project.config.clientTeamCreationEnabled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.MessageCard, { title: "Team creation is not enabled" });
+  }
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const team = await user.createTeam({ displayName: data.displayName });
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "form",
+    {
+      className: "flex flex-col items-stretch stack-scope",
+      onSubmit: (e) => (0, import_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-end gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { htmlFor: "email", className: "mb-1", children: "Display name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_stack_ui.Input,
+            {
+              id: "email",
+              type: "email",
+              ...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", className: "mt-6", loading, children: "Create" })
+      ] })
+    }
+  ) }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AccountSettings
+  AccountSettings,
+  TeamCreation
 });
 //# sourceMappingURL=account-settings.js.map