@stackframe/stack 2.5.33 → 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,18 +48,20 @@ 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) {
+  const { t } = (0, import_translations.useTranslation)();
   const user = (0, import__.useUser)({ or: "redirect" });
   const teams = user.useTeams();
   const stackApp = (0, import__.useStackApp)();
@@ -68,29 +71,25 @@ function AccountSettings(props) {
     {
       items: [
         {
-          title: "My Profile",
+          title: t("My Profile"),
           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: "Security",
+          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: "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,
@@ -100,7 +99,7 @@ function AccountSettings(props) {
           content: item.content
         })) || [],
         ...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
-          title: "Teams",
+          title: t("Teams"),
           type: "divider"
         }] : [],
         ...teams.map((team) => ({
@@ -110,61 +109,108 @@ 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: "Create a team",
+          title: t("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",
+      title: t("Account Settings"),
       basePath: stackApp.urls.accountSettings
     }
   ) }) });
 }
-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: "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: "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: "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.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__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)(
+  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,
@@ -172,28 +218,29 @@ function EmailVerificationSection() {
             await user.sendVerificationEmail();
             setEmailSent(true);
           },
-          children: emailSent ? "Email sent!" : "Send Verification Email"
+          children: emailSent ? t("Email sent!") : t("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;
+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")),
+    newPassword: (0, import_schema_fields.yupString)().required(t("Please enter your password")).test({
+      name: "is-valid-password",
+      test: (value, ctx) => {
+        const error = (0, import_password.getPasswordError)(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
       }
-    }
-  }),
-  newPasswordRepeat: (0, import_schema_fields.yupString)().nullable().oneOf([yup.ref("newPassword"), "", null], "Passwords do not match").required("Please repeat your password")
-});
-function PasswordSection() {
+    }),
+    newPasswordRepeat: (0, import_schema_fields.yupString)().nullable().oneOf([yup.ref("newPassword"), "", null], t("Passwords do not match")).required(t("Please repeat your password"))
+  });
   const user = (0, import__.useUser)({ or: "throw" });
   const [changingPassword, setChangingPassword] = (0, import_react.useState)(false);
   const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = (0, import_react_hook_form.useForm)({
@@ -207,7 +254,7 @@ function PasswordSection() {
       const { oldPassword, newPassword } = data;
       const error = await user.updatePassword({ oldPassword, newPassword });
       if (error) {
-        setError("oldPassword", { type: "manual", message: "Incorrect password" });
+        setError("oldPassword", { type: "manual", message: t("Incorrect password") });
       } else {
         reset();
         setAlreadyReset(true);
@@ -222,15 +269,15 @@ function PasswordSection() {
     return null;
   }
   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)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Label, { children: t("Change password") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: alreadyReset ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { variant: "success", children: t("Password changed successfully!") }) : !changingPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_stack_ui.Button,
       {
         variant: "secondary",
         onClick: async () => {
           setChangingPassword(true);
         },
-        children: "Change Password"
+        children: t("Change Password")
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "form",
@@ -238,7 +285,7 @@ function PasswordSection() {
         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.Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_stack_ui.Input,
             {
@@ -248,7 +295,7 @@ function PasswordSection() {
             }
           ),
           /* @__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.Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("Password") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_stack_ui.PasswordInput,
             {
@@ -262,7 +309,7 @@ function PasswordSection() {
             }
           ),
           /* @__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.Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat password") }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_stack_ui.PasswordInput,
             {
@@ -276,13 +323,14 @@ function PasswordSection() {
             }
           ),
           /* @__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" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Button, { type: "submit", className: "mt-6", loading, children: t("Change Password") })
         ]
       }
     ) })
   ] });
 }
-function MfaSection() {
+function useMfaSection() {
+  const { t } = (0, import_translations.useTranslation)();
   const project = (0, import__.useStackApp)().useProject();
   const user = (0, import__.useUser)({ or: "throw" });
   const [generatedSecret, setGeneratedSecret] = (0, import_react.useState)(null);
@@ -307,100 +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: "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:" }),
-        /* @__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: "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.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 ? "Disable" : generatedSecret ? "Cancel" : "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: "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 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 UserSettings(props) {
+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: "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: "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) {
+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: "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,
@@ -409,42 +522,57 @@ 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: "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: [
-      "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 });
+          }
         }
-      }
-    )
-  ] }) });
+      )
+    }
+  );
 }
-var invitationSchema = (0, import_schema_fields.yupObject)({
-  email: (0, import_schema_fields.yupString)().email().required("Please enter an email address")
-});
-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"))
+  });
   const user = (0, import__.useUser)({ or: "redirect" });
   const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
   if (!inviteMemberPermission) {
@@ -467,35 +595,40 @@ 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: "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
-          ] })
-        ]
-      }
-    )
-  ] });
+  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");
   const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
@@ -507,23 +640,24 @@ 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: "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: "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.TableHead, { className: "w-[100px]", children: t("User") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableHead, { className: "w-[200px]", children: t("Name") })
       ] }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableBody, { children: users.map(({ id, teamProfile }, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_stack_ui.TableRow, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_user_avatar.UserAvatar, { user: teamProfile }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.TableCell, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stack_ui.Typography, { children: teamProfile.displayName }) })
       ] }, id)) })
-    ] })
+    ] }) })
   ] });
 }
-var teamCreationSchema = (0, import_schema_fields.yupObject)({
-  displayName: (0, import_schema_fields.yupString)().required("Please enter a team name")
-});
 function TeamCreation() {
+  const { t } = (0, import_translations.useTranslation)();
+  const teamCreationSchema = (0, import_schema_fields.yupObject)({
+    displayName: (0, import_schema_fields.yupString)().required(t("Please enter a team name"))
+  });
   const { register, handleSubmit, formState: { errors } } = (0, import_react_hook_form.useForm)({
     resolver: (0, import_yup.yupResolver)(teamCreationSchema)
   });
@@ -532,7 +666,7 @@ function TeamCreation() {
   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" });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.MessageCard, { title: t("Team creation is not enabled") });
   }
   const onSubmit = async (data) => {
     setLoading(true);
@@ -542,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: "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: "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