@stackframe/stack 2.5.33 → 2.5.37

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

@@ -9,22 +9,24 @@ import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-field
 import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Button, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
-import { CirclePlus, Contact, LogOut, ShieldCheck } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, EditableText, Input, Label, PasswordInput, Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { CirclePlus, Contact, Settings, ShieldCheck } from "lucide-react";
 import { TOTPController, createTOTPKeyURI } from "oslo/otp";
 import * as QRCode from "qrcode";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { MessageCard, useStackApp, useUser } from "..";
 import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
 import { SidebarLayout } from "../components/elements/sidebar-layout";
 import { UserAvatar } from "../components/elements/user-avatar";
 import { ProfileImageEditor } from "../components/profile-image-editor";
 import { TeamIcon } from "../components/team-icon";
-import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { useTranslation } from "../lib/translations";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AccountSettings(props) {
+  const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const teams = user.useTeams();
   const stackApp = useStackApp();
@@ -34,29 +36,25 @@ function AccountSettings(props) {
     {
       items: [
         {
-          title: "My Profile",
+          title: t("My Profile"),
           type: "item",
           subpath: "/profile",
           icon: Contact,
-          content: /* @__PURE__ */ jsx(ProfileSection, {})
+          content: /* @__PURE__ */ jsx(ProfilePage, {})
         },
         {
-          title: "Security",
+          title: t("Security"),
           type: "item",
-          icon: ShieldCheck,
           subpath: "/security",
-          content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-            /* @__PURE__ */ jsx(EmailVerificationSection, {}),
-            /* @__PURE__ */ jsx(PasswordSection, {}),
-            /* @__PURE__ */ jsx(MfaSection, {})
-          ] })
+          icon: ShieldCheck,
+          content: /* @__PURE__ */ jsx(SecurityPage, {})
         },
         {
-          title: "Sign Out",
-          subpath: "/sign-out",
+          title: t("Settings"),
           type: "item",
-          icon: LogOut,
-          content: /* @__PURE__ */ jsx(SignOutSection, {})
+          subpath: "/settings",
+          icon: Settings,
+          content: /* @__PURE__ */ jsx(SettingsPage, {})
         },
         ...props.extraItems?.map((item) => ({
           title: item.title,
@@ -66,7 +64,7 @@ function AccountSettings(props) {
           content: item.content
         })) || [],
         ...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
-          title: "Teams",
+          title: t("Teams"),
           type: "divider"
         }] : [],
         ...teams.map((team) => ({
@@ -76,61 +74,108 @@ function AccountSettings(props) {
           ] }),
           type: "item",
           subpath: `/teams/${team.id}`,
-          content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-            /* @__PURE__ */ jsx(ProfileSettings, { team }),
-            /* @__PURE__ */ jsx(ManagementSettings, { team }),
-            /* @__PURE__ */ jsx(MemberInvitation, { team }),
-            /* @__PURE__ */ jsx(MembersSettings, { team }),
-            /* @__PURE__ */ jsx(UserSettings, { team })
-          ] })
+          content: /* @__PURE__ */ jsx(TeamPage, { team })
         })),
         ...project.config.clientTeamCreationEnabled ? [{
-          title: "Create a team",
+          title: t("Create a team"),
           icon: CirclePlus,
           type: "item",
           subpath: "/team-creation",
           content: /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col justify-center", children: [
+      /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: props.title }),
+      props.description && /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "footnote", children: props.description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col gap-2", children: props.children })
+  ] });
+}
+function PageLayout(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(Separator, {}),
+    React.Children.map(props.children, (child) => child && /* @__PURE__ */ jsxs(Fragment, { children: [
+      child,
+      /* @__PURE__ */ jsx(Separator, {})
+    ] }))
+  ] });
+}
+function ProfilePage() {
+  const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start", children: [
-      /* @__PURE__ */ jsx(Label, { className: "mb-2", children: "Profile image" }),
-      /* @__PURE__ */ jsx(
-        ProfileImageEditor,
-        {
-          user,
-          onProfileImageUrlChange: async (profileImageUrl) => {
-            await user.update({ profileImageUrl });
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("User name"),
+        description: t("This is a display name and is not used for authentication"),
+        children: /* @__PURE__ */ jsx(
+          EditableText,
+          {
+            value: user.displayName || "",
+            onSave: async (newDisplayName) => {
+              await user.update({ displayName: newDisplayName });
+            }
           }
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Label, { children: "Display name" }),
-      /* @__PURE__ */ jsx(EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
-        await user.update({ displayName: newDisplayName });
-      } })
-    ] })
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Profile image"),
+        description: t("Upload your own image as your avatar"),
+        children: /* @__PURE__ */ jsx(
+          ProfileImageEditor,
+          {
+            user,
+            onProfileImageUrlChange: async (profileImageUrl) => {
+              await user.update({ profileImageUrl });
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function SecurityPage() {
+  const emailVerificationSection = useEmailVerificationSection();
+  const passwordSection = usePasswordSection();
+  const mfaSection = useMfaSection();
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    emailVerificationSection,
+    passwordSection,
+    mfaSection
+  ] });
+}
+function SettingsPage() {
+  const deleteAccountSection = useDeleteAccountSection();
+  const signOutSection = useSignOutSection();
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    deleteAccountSection,
+    signOutSection
   ] });
 }
-function EmailVerificationSection() {
+function useEmailVerificationSection() {
+  const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const [emailSent, setEmailSent] = useState(false);
   if (!user.primaryEmail) {
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: "Email Verification" }),
-    user.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified." }),
-      /* @__PURE__ */ jsx("div", { className: "flex mt-4", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Email Verification"),
+      description: t("Verify your email address to secure your account"),
+      children: /* @__PURE__ */ jsx("div", { children: user.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: t("Your email has been verified.") }) : /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
         Button,
         {
           disabled: emailSent,
@@ -138,28 +183,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 = yupObject({
-  oldPassword: yupString().required("Please enter your old password"),
-  newPassword: yupString().required("Please enter your password").test({
-    name: "is-valid-password",
-    test: (value, ctx) => {
-      const error = getPasswordError(value);
-      if (error) {
-        return ctx.createError({ message: error.message });
-      } else {
-        return true;
+function usePasswordSection() {
+  const { t } = useTranslation();
+  const passwordSchema = yupObject({
+    oldPassword: yupString().required(t("Please enter your old password")),
+    newPassword: yupString().required(t("Please enter your password")).test({
+      name: "is-valid-password",
+      test: (value, ctx) => {
+        const error = getPasswordError(value);
+        if (error) {
+          return ctx.createError({ message: error.message });
+        } else {
+          return true;
+        }
       }
-    }
-  }),
-  newPasswordRepeat: yupString().nullable().oneOf([yup.ref("newPassword"), "", null], "Passwords do not match").required("Please repeat your password")
-});
-function PasswordSection() {
+    }),
+    newPasswordRepeat: yupString().nullable().oneOf([yup.ref("newPassword"), "", null], t("Passwords do not match")).required(t("Please repeat your password"))
+  });
   const user = useUser({ or: "throw" });
   const [changingPassword, setChangingPassword] = useState(false);
   const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({
@@ -173,7 +219,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);
@@ -188,15 +234,15 @@ function PasswordSection() {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: "Change password" }),
-    /* @__PURE__ */ jsx("div", { children: alreadyReset ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Password changed successfully!" }) : !changingPassword ? /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Label, { children: t("Change password") }),
+    /* @__PURE__ */ jsx("div", { children: alreadyReset ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: t("Password changed successfully!") }) : !changingPassword ? /* @__PURE__ */ jsx(
       Button,
       {
         variant: "secondary",
         onClick: async () => {
           setChangingPassword(true);
         },
-        children: "Change Password"
+        children: t("Change Password")
       }
     ) : /* @__PURE__ */ jsxs(
       "form",
@@ -204,7 +250,7 @@ function PasswordSection() {
         onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
         noValidate: true,
         children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: "Old password" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: t("Old password") }),
           /* @__PURE__ */ jsx(
             Input,
             {
@@ -214,7 +260,7 @@ function PasswordSection() {
             }
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: errors.oldPassword?.message?.toString() }),
-          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: "Password" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: t("Password") }),
           /* @__PURE__ */ jsx(
             PasswordInput,
             {
@@ -228,7 +274,7 @@ function PasswordSection() {
             }
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPassword?.message?.toString() }),
-          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat password" }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: t("Repeat password") }),
           /* @__PURE__ */ jsx(
             PasswordInput,
             {
@@ -242,13 +288,14 @@ function PasswordSection() {
             }
           ),
           /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
-          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Change Password" })
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: t("Change Password") })
         ]
       }
     ) })
   ] });
 }
-function MfaSection() {
+function useMfaSection() {
+  const { t } = useTranslation();
   const project = useStackApp().useProject();
   const user = useUser({ or: "throw" });
   const [generatedSecret, setGeneratedSecret] = useState(null);
@@ -273,100 +320,165 @@ function MfaSection() {
       setIsMaybeWrong(true);
     });
   }, [mfaCode, generatedSecret, handleSubmit]);
-  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: "Multi-factor Authentication" }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      isEnabled ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Multi-factor authentication is currently enabled." }) : generatedSecret ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 items-center", children: [
-        /* @__PURE__ */ jsx(Typography, { children: "Scan this QR code with your authenticator app:" }),
-        /* @__PURE__ */ jsx("img", { width: 200, height: 200, src: qrCodeUrl ?? throwErr("TOTP QR code failed to generate"), alt: "TOTP multi-factor authentication QR code" }),
-        /* @__PURE__ */ jsx(Typography, { children: "Then, enter your six-digit MFA code:" }),
-        /* @__PURE__ */ jsx(
-          Input,
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Multi-factor Authentication"),
+      description: isEnabled ? t("Multi-factor authentication is currently enabled.") : t("Multi-factor authentication is currently disabled."),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        !isEnabled && generatedSecret && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Typography, { children: t("Scan this QR code with your authenticator app:") }),
+          /* @__PURE__ */ jsx("img", { width: 200, height: 200, src: qrCodeUrl ?? throwErr("TOTP QR code failed to generate"), alt: t("TOTP multi-factor authentication QR code") }),
+          /* @__PURE__ */ jsx(Typography, { children: t("Then, enter your six-digit MFA code:") }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: mfaCode,
+              onChange: (e) => {
+                setIsMaybeWrong(false);
+                setMfaCode(e.target.value);
+              },
+              placeholder: "123456",
+              maxLength: 6,
+              disabled: isLoading
+            }
+          ),
+          isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Incorrect code. Please try again.") }),
+          /* @__PURE__ */ jsx("div", { className: "flex", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => {
+                setGeneratedSecret(null);
+                setQrCodeUrl(null);
+                setMfaCode("");
+              },
+              children: t("Cancel")
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: isEnabled ? /* @__PURE__ */ jsx(
+          Button,
           {
-            value: mfaCode,
-            onChange: (e) => {
-              setIsMaybeWrong(false);
-              setMfaCode(e.target.value);
-            },
-            placeholder: "123456",
-            maxLength: 6,
-            disabled: isLoading
-          }
-        ),
-        isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Incorrect code. Please try again." })
-      ] }) : /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Multi-factor authentication is currently disabled." }),
-      /* @__PURE__ */ jsx(
-        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__ */ jsx(
+          Button,
+          {
+            variant: "default",
+            onClick: async () => {
               const secret = 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 = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);
   return await QRCode.toDataURL(uri);
 }
-function SignOutSection() {
+function useSignOutSection() {
+  const { t } = useTranslation();
   const user = useUser({ or: "throw" });
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx(
+    Section,
     {
-      variant: "secondary",
-      onClick: () => user.signOut(),
-      children: "Sign Out"
+      title: t("Sign out"),
+      description: t("End your current session"),
+      children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => user.signOut(),
+          children: t("Sign out")
+        }
+      ) })
     }
-  ) }) });
+  );
+}
+function TeamPage(props) {
+  const teamUserProfileSection = useTeamUserProfileSection(props);
+  const teamProfileImageSection = useTeamProfileImageSection(props);
+  const teamDisplayNameSection = useTeamDisplayNameSection(props);
+  const leaveTeamSection = useLeaveTeamSection(props);
+  const memberInvitationSection = useMemberInvitationSection(props);
+  const memberListSection = useMemberListSection(props);
+  return /* @__PURE__ */ jsxs(PageLayout, { children: [
+    teamUserProfileSection,
+    memberInvitationSection,
+    memberListSection,
+    teamProfileImageSection,
+    teamDisplayNameSection,
+    leaveTeamSection
+  ] });
 }
-function UserSettings(props) {
+function useLeaveTeamSection(props) {
+  const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const [leaving, setLeaving] = useState(false);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("div", { children: !leaving ? /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ 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__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "secondary",
+          onClick: () => setLeaving(true),
+          children: t("Leave team")
+        }
+      ) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Are you sure you want to leave the team?") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "destructive",
+              onClick: async () => {
+                await user.leaveTeam(props.team);
+                window.location.reload();
+              },
+              children: t("Leave")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => setLeaving(false),
+              children: t("Cancel")
+            }
+          )
+        ] })
+      ] })
     }
-  ) : /* @__PURE__ */ jsxs("div", { className: "", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Are you sure you want to leave the team?" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "destructive", onClick: async () => {
-        await user.leaveTeam(props.team);
-        window.location.reload();
-      }, children: "Leave" }),
-      /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => setLeaving(false), children: "Cancel" })
-    ] })
-  ] }) }) });
+  );
 }
-function ManagementSettings(props) {
+function useTeamProfileImageSection(props) {
+  const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const updateTeamPermission = user.usePermission(props.team, "$update_team");
   if (!updateTeamPermission) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Label, { children: "Team display name" }),
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team profile image"),
+      description: t("Upload an image for your team"),
+      children: /* @__PURE__ */ jsx(
         ProfileImageEditor,
         {
           user: props.team,
@@ -375,42 +487,57 @@ function ManagementSettings(props) {
           }
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsx(Label, { children: "Team display name" }),
-      /* @__PURE__ */ jsx(
+    }
+  );
+}
+function useTeamDisplayNameSection(props) {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team display name"),
+      description: t("Change the display name of your team"),
+      children: /* @__PURE__ */ jsx(
         EditableText,
         {
           value: props.team.displayName,
           onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
         }
       )
-    ] })
-  ] });
+    }
+  );
 }
-function ProfileSettings(props) {
+function useTeamUserProfileSection(props) {
+  const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const profile = user.useTeamProfile(props.team);
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxs(Label, { className: "flex gap-2", children: [
-      "User display name ",
-      /* @__PURE__ */ jsx(SimpleTooltip, { tooltip: "This overwrites your user display name in the account setting", type: "info" })
-    ] }),
-    /* @__PURE__ */ jsx(
-      EditableText,
-      {
-        value: profile.displayName || "",
-        onSave: async (newDisplayName) => {
-          await profile.update({ displayName: newDisplayName });
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Team user name"),
+      description: t("Overwrite your user display name in this team"),
+      children: /* @__PURE__ */ jsx(
+        EditableText,
+        {
+          value: profile.displayName || "",
+          onSave: async (newDisplayName) => {
+            await profile.update({ displayName: newDisplayName });
+          }
         }
-      }
-    )
-  ] }) });
+      )
+    }
+  );
 }
-var invitationSchema = yupObject({
-  email: yupString().email().required("Please enter an email address")
-});
-function MemberInvitation(props) {
+function useMemberInvitationSection(props) {
+  const { t } = useTranslation();
+  const invitationSchema = yupObject({
+    email: yupString().email().required(t("Please enter an email address"))
+  });
   const user = useUser({ or: "redirect" });
   const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
   if (!inviteMemberPermission) {
@@ -433,35 +560,40 @@ function MemberInvitation(props) {
   useEffect(() => {
     setInvitedEmail(null);
   }, [watch("email")]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: "Invite a user to team" }),
-    /* @__PURE__ */ jsxs(
-      "form",
-      {
-        onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
-        noValidate: true,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row", children: [
-            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                placeholder: "Email",
-                ...register("email")
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: "Invite User" })
-          ] }),
-          /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
-          invitedEmail && /* @__PURE__ */ jsxs(Typography, { type: "label", variant: "secondary", children: [
-            "Invited ",
-            invitedEmail
-          ] })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Invite member"),
+      description: t("Invite a user to your team through email"),
+      children: /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+          noValidate: true,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:flex-row", children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  placeholder: t("Email"),
+                  ...register("email")
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Invite User") })
+            ] }),
+            /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+            invitedEmail && /* @__PURE__ */ jsxs(Typography, { type: "label", variant: "secondary", children: [
+              "Invited ",
+              invitedEmail
+            ] })
+          ]
+        }
+      )
+    }
+  );
 }
-function MembersSettings(props) {
+function useMemberListSection(props) {
+  const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const readMemberPermission = user.usePermission(props.team, "$read_members");
   const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
@@ -473,23 +605,24 @@ function MembersSettings(props) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Label, { children: "Members" }),
-    /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(Typography, { className: "font-medium mb-2", children: t("Members") }),
+    /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
       /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: "User" }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: "Name" })
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[100px]", children: t("User") }),
+        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Name") })
       ] }) }),
       /* @__PURE__ */ jsx(TableBody, { children: users.map(({ id, teamProfile }, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
         /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(UserAvatar, { user: teamProfile }) }),
         /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: teamProfile.displayName }) })
       ] }, id)) })
-    ] })
+    ] }) })
   ] });
 }
-var teamCreationSchema = yupObject({
-  displayName: yupString().required("Please enter a team name")
-});
 function TeamCreation() {
+  const { t } = useTranslation();
+  const teamCreationSchema = yupObject({
+    displayName: yupString().required(t("Please enter a team name"))
+  });
   const { register, handleSubmit, formState: { errors } } = useForm({
     resolver: yupResolver(teamCreationSchema)
   });
@@ -498,7 +631,7 @@ function TeamCreation() {
   const user = useUser({ or: "redirect" });
   const [loading, setLoading] = useState(false);
   if (!project.config.clientTeamCreationEnabled) {
-    return /* @__PURE__ */ jsx(MessageCard, { title: "Team creation is not enabled" });
+    return /* @__PURE__ */ jsx(MessageCard, { title: t("Team creation is not enabled") });
   }
   const onSubmit = async (data) => {
     setLoading(true);
@@ -508,32 +641,83 @@ function TeamCreation() {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(PageLayout, { children: /* @__PURE__ */ jsx(Section, { title: t("Create a Team"), description: t("Enter a display name for your new team"), children: /* @__PURE__ */ jsxs(
     "form",
     {
-      className: "flex flex-col items-stretch stack-scope",
       onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
       noValidate: true,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-4", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-1", children: "Display name" }),
+      className: "flex gap-2",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1", children: [
           /* @__PURE__ */ jsx(
             Input,
             {
-              id: "email",
-              type: "email",
+              id: "displayName",
+              type: "text",
               ...register("displayName")
             }
-          )
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() })
         ] }),
-        /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() }),
-        /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Create" })
-      ] })
+        /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: t("Create") })
+      ]
     }
   ) }) });
 }
+function useDeleteAccountSection() {
+  const { t } = useTranslation();
+  const user = useUser({ or: "redirect" });
+  const app = useStackApp();
+  const project = app.useProject();
+  const [deleting, setDeleting] = useState(false);
+  if (!project.config.clientUserDeletionEnabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Section,
+    {
+      title: t("Delete Account"),
+      description: t("Permanently remove your account and all associated data"),
+      children: /* @__PURE__ */ jsx("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: /* @__PURE__ */ jsxs(AccordionItem, { value: "item-1", children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { children: t("Danger zone") }),
+        /* @__PURE__ */ jsx(AccordionContent, { children: !deleting ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "destructive",
+            onClick: () => setDeleting(true),
+            children: t("Delete account")
+          }
+        ) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: t("Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "destructive",
+                onClick: async () => {
+                  await user.delete();
+                  await app.redirectToHome();
+                },
+                children: t("Delete Account")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                onClick: () => setDeleting(false),
+                children: t("Cancel")
+              }
+            )
+          ] })
+        ] }) })
+      ] }) }) })
+    }
+  );
+}
 export {
   AccountSettings,
-  TeamCreation
+  TeamCreation,
+  useDeleteAccountSection
 };
 //# sourceMappingURL=account-settings.js.map