@stackframe/stack 2.5.35 → 2.5.37

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

@@ -33,7 +33,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var account_settings_exports = {};
 __export(account_settings_exports, {
   AccountSettings: () => AccountSettings,
-  TeamCreation: () => TeamCreation
+  TeamCreation: () => TeamCreation,
+  useDeleteAccountSection: () => useDeleteAccountSection
 });
 module.exports = __toCommonJS(account_settings_exports);
 var import_yup = require("@hookform/resolvers/yup");
@@ -47,16 +48,16 @@ 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 = __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_maybe_full_page = require("../components/elements/maybe-full-page");
 var import_translations = require("../lib/translations");
 var import_jsx_runtime = require("react/jsx-runtime");
 function AccountSettings(props) {
@@ -74,25 +75,21 @@ function AccountSettings(props) {
           type: "item",
           subpath: "/profile",
           icon: import_lucide_react.Contact,
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileSection, {})
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfilePage, {})
         },
         {
           title: t("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, {})
-          ] })
+          icon: import_lucide_react.ShieldCheck,
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SecurityPage, {})
         },
         {
-          title: t("Sign Out"),
-          subpath: "/sign-out",
+          title: t("Settings"),
           type: "item",
-          icon: import_lucide_react.LogOut,
-          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignOutSection, {})
+          subpath: "/settings",
+          icon: import_lucide_react.Settings,
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingsPage, {})
         },
         ...props.extraItems?.map((item) => ({
           title: item.title,
@@ -112,13 +109,7 @@ function AccountSettings(props) {
           ] }),
           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 })
-          ] })
+          content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamPage, { team })
         })),
         ...project.config.clientTeamCreationEnabled ? [{
           title: t("Create a team"),
@@ -133,42 +124,93 @@ function AccountSettings(props) {
     }
   ) }) });
 }
-function ProfileSection() {
+function Section(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "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: "flex-1 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)("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-start", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { className: "mb-2", children: t("Profile image") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_profile_image_editor.ProfileImageEditor,
-        {
-          user,
-          onProfileImageUrlChange: async (profileImageUrl) => {
-            await user.update({ profileImageUrl });
+  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)(
+          import_stack_ui.EditableText,
+          {
+            value: user.displayName || "",
+            onSave: async (newDisplayName) => {
+              await user.update({ displayName: newDisplayName });
+            }
           }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: t("Display name") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.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 EmailVerificationSection() {
+function SecurityPage() {
+  const emailVerificationSection = useEmailVerificationSection();
+  const passwordSection = usePasswordSection();
+  const mfaSection = useMfaSection();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    emailVerificationSection,
+    passwordSection,
+    mfaSection
+  ] });
+}
+function SettingsPage() {
+  const deleteAccountSection = useDeleteAccountSection();
+  const signOutSection = useSignOutSection();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PageLayout, { children: [
+    deleteAccountSection,
+    signOutSection
+  ] });
+}
+function useEmailVerificationSection() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const [emailSent, setEmailSent] = (0, import_react.useState)(false);
   if (!user.primaryEmail) {
     return null;
   }
-  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: t("Email Verification") }),
-    user.primaryEmailVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: t("Your email has been verified.") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "destructive", children: t("Your email has not been verified.") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
+    {
+      title: t("Email Verification"),
+      description: t("Verify your email address to secure your account"),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: user.primaryEmailVerified ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: t("Your email has been verified.") }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_stack_ui.Button,
         {
           disabled: emailSent,
@@ -178,11 +220,11 @@ function EmailVerificationSection() {
           },
           children: emailSent ? t("Email sent!") : t("Send Verification Email")
         }
-      ) })
-    ] })
-  ] }) });
+      ) }) })
+    }
+  );
 }
-function PasswordSection() {
+function usePasswordSection() {
   const { t } = (0, import_translations.useTranslation)();
   const passwordSchema = (0, import_schema_fields.yupObject)({
     oldPassword: (0, import_schema_fields.yupString)().required(t("Please enter your old password")),
@@ -287,7 +329,7 @@ function PasswordSection() {
     ) })
   ] });
 }
-function MfaSection() {
+function useMfaSection() {
   const { t } = (0, import_translations.useTranslation)();
   const project = (0, import__.useStackApp)().useProject();
   const user = (0, import__.useUser)({ or: "throw" });
@@ -313,103 +355,165 @@ function MfaSection() {
       setIsMaybeWrong(true);
     });
   }, [mfaCode, generatedSecret, handleSubmit]);
-  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: t("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: t("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: 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,
+  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,
           {
-            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)(import_stack_ui.Typography, { variant: "destructive", children: t("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) {
+            variant: "secondary",
+            onClick: async () => {
               await user.update({
                 totpMultiFactorSecret: null
               });
-            } else if (!generatedSecret) {
+            },
+            children: t("Disable")
+          }
+        ) : !generatedSecret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_stack_ui.Button,
+          {
+            variant: "default",
+            onClick: async () => {
               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 ? t("Disable") : generatedSecret ? t("Cancel") : t("Enable")
-        }
-      )
-    ] })
-  ] }) });
+            },
+            children: t("Enable")
+          }
+        ) })
+      ] })
+    }
+  );
 }
 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 SignOutSection() {
+function useSignOutSection() {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "throw" });
-  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,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
     {
-      variant: "secondary",
-      onClick: () => user.signOut(),
-      children: t("Sign Out")
+      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 UserSettings(props) {
+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,
+    memberInvitationSection,
+    memberListSection,
+    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)("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,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Section,
     {
-      variant: "secondary",
-      onClick: async () => setLeaving(true),
-      children: t("Leave team")
+      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")
+            }
+          )
+        ] })
+      ] })
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "", 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 ManagementSettings(props) {
+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.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: t("Team display name") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  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,
@@ -418,40 +522,53 @@ function ManagementSettings(props) {
           }
         }
       )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: t("Team display name") }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    }
+  );
+}
+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)(
         import_stack_ui.EditableText,
         {
           value: props.team.displayName,
           onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
         }
       )
-    ] })
-  ] });
+    }
+  );
 }
-function ProfileSettings(props) {
+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)("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: [
-      t("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)(
-      import_stack_ui.EditableText,
-      {
-        value: profile.displayName || "",
-        onSave: async (newDisplayName) => {
-          await profile.update({ displayName: newDisplayName });
+  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)(
+        import_stack_ui.EditableText,
+        {
+          value: profile.displayName || "",
+          onSave: async (newDisplayName) => {
+            await profile.update({ displayName: newDisplayName });
+          }
         }
-      }
-    )
-  ] }) });
+      )
+    }
+  );
 }
-function MemberInvitation(props) {
+function useMemberInvitationSection(props) {
   const { t } = (0, import_translations.useTranslation)();
   const invitationSchema = (0, import_schema_fields.yupObject)({
     email: (0, import_schema_fields.yupString)().email().required(t("Please enter an email address"))
@@ -478,35 +595,39 @@ function MemberInvitation(props) {
   (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: t("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: 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
-          ] })
-        ]
-      }
-    )
-  ] });
+  return /* @__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,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-4 md:flex-row", 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
+            ] })
+          ]
+        }
+      )
+    }
+  );
 }
-function MembersSettings(props) {
+function useMemberListSection(props) {
   const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const readMemberPermission = user.usePermission(props.team, "$read_members");
@@ -519,8 +640,8 @@ function MembersSettings(props) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: t("Members") }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.Table, { 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") })
@@ -529,7 +650,7 @@ function MembersSettings(props) {
         /* @__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() {
@@ -555,33 +676,84 @@ function TeamCreation() {
       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)(
+  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",
     {
-      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: t("Display name") }),
+      className: "flex gap-2",
+      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: "email",
-              type: "email",
+              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_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: t("Create") })
-      ] })
+        /* @__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")
+              }
+            )
+          ] })
+        ] }) })
+      ] }) }) })
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AccountSettings,
-  TeamCreation
+  TeamCreation,
+  useDeleteAccountSection
 });
 //# sourceMappingURL=account-settings.js.map