@stackframe/stack 2.5.19 → 2.5.20

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

@@ -2,226 +2,227 @@
 "use client";
 
 // src/components-page/account-settings.tsx
+import { yupResolver } from "@hookform/resolvers/yup";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
 import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
 import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
-import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography } from "@stackframe/stack-ui";
-import { Contact, Settings, ShieldCheck } from "lucide-react";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Container, EditableText, Input, Label, PasswordInput, SimpleTooltip, 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 { useStackApp, useUser } from "..";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { MessageCard, useStackApp, useUser } from "..";
 import { FormWarningText } from "../components/elements/form-warning";
 import { SidebarLayout } from "../components/elements/sidebar-layout";
 import { UserAvatar } from "../components/elements/user-avatar";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { TeamIcon } from "../components/team-icon";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function AccountSettings({ fullPage = false }) {
   const user = useUser({ or: "redirect" });
+  const teams = user.useTeams();
+  const project = useStackApp().useProject();
   const inner = /* @__PURE__ */ jsx(
     SidebarLayout,
     {
       items: [
-        { title: "My Profile", content: /* @__PURE__ */ jsx(ProfileSection, {}), icon: Contact },
-        { title: "Security", content: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-          /* @__PURE__ */ jsx(EmailVerificationSection, {}),
-          /* @__PURE__ */ jsx(PasswordSection, {}),
-          /* @__PURE__ */ jsx(MfaSection, {})
-        ] }), icon: ShieldCheck },
-        { title: "Settings", content: /* @__PURE__ */ jsx(SignOutSection, {}), icon: Settings }
-      ].filter(({ content }) => content),
-      title: "Team Settings"
+        {
+          title: "My Profile",
+          type: "item",
+          subpath: "/profile",
+          icon: Contact,
+          content: /* @__PURE__ */ jsx(ProfileSection, {})
+        },
+        {
+          title: "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, {})
+          ] })
+        },
+        {
+          title: "Settings",
+          subpath: "/settings",
+          type: "item",
+          icon: Settings,
+          content: /* @__PURE__ */ jsx(SignOutSection, {})
+        },
+        ...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
+          title: "Teams",
+          type: "divider"
+        }] : [],
+        ...teams.map((team) => ({
+          title: /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+            /* @__PURE__ */ jsx(TeamIcon, { team }),
+            team.displayName
+          ] }),
+          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 })
+          ] })
+        })),
+        ...project.config.clientTeamCreationEnabled ? [{
+          title: "Create a team",
+          icon: CirclePlus,
+          type: "item",
+          subpath: "/team-creation",
+          content: /* @__PURE__ */ jsx(TeamCreation, {})
+        }] : []
+      ].filter((p) => p.type === "divider" || p.content),
+      title: "Account Settings",
+      basePath: "/handler/account-settings"
     }
   );
   if (fullPage) {
-    return /* @__PURE__ */ jsx(Container, { size: 800, className: "stack-scope", children: inner });
+    return /* @__PURE__ */ jsx(Container, { size: 1e3, className: "stack-scope", children: inner });
   } else {
     return inner;
   }
 }
-function SettingSection(props) {
-  return /* @__PURE__ */ jsxs(Card, { children: [
-    /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Typography, { type: "h4", children: props.title }),
-      /* @__PURE__ */ jsx(Typography, { type: "label", variant: "secondary", children: props.desc })
-    ] }) }),
-    props.children && /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: props.children }) }),
-    props.buttonText && /* @__PURE__ */ jsx(CardFooter, { children: /* @__PURE__ */ jsx("div", { className: "flex justify-end w-full", children: /* @__PURE__ */ jsx(
-      Button,
-      {
-        disabled: props.buttonDisabled,
-        onClick: props.onButtonClick,
-        variant: props.buttonVariant,
-        children: props.buttonText
-      }
-    ) }) })
-  ] });
-}
 function ProfileSection() {
-  const user = useUser();
-  const [userInfo, setUserInfo] = useState({ displayName: user.displayName || "" });
-  const [changed, setChanged] = useState(false);
-  return /* @__PURE__ */ jsxs(
-    SettingSection,
-    {
-      title: "Profile",
-      desc: "Your profile information",
-      buttonDisabled: !changed,
-      buttonText: "Save",
-      onButtonClick: async () => {
-        await user.update(userInfo);
-        setChanged(false);
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-4 items-center", children: [
-          /* @__PURE__ */ jsx(UserAvatar, { user, size: 50 }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx(Typography, { children: user.displayName }),
-            /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: user.primaryEmail })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "display-name", className: "mb-1", children: "Display Name" }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              id: "display-name",
-              value: userInfo.displayName,
-              onChange: (e) => {
-                setUserInfo((i) => ({ ...i, displayName: e.target.value }));
-                setChanged(true);
-              }
-            }
-          )
-        ] })
-      ]
-    }
-  );
+  const user = useUser({ or: "redirect" });
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Label, { children: "Display name" }),
+    /* @__PURE__ */ jsx(EditableText, { value: user.displayName || "", onSave: async (newDisplayName) => {
+      await user.update({ displayName: newDisplayName });
+    } })
+  ] }) });
 }
 function EmailVerificationSection() {
-  const user = useUser();
+  const user = useUser({ or: "redirect" });
   const [emailSent, setEmailSent] = useState(false);
-  return /* @__PURE__ */ jsx(
-    SettingSection,
-    {
-      title: "Email Verification",
-      desc: "We want to make sure that you own the email address.",
-      buttonDisabled: emailSent,
-      buttonText: !user?.primaryEmailVerified ? emailSent ? "Email sent!" : "Send Email" : void 0,
-      onButtonClick: async () => {
-        await user?.sendVerificationEmail();
-        setEmailSent(true);
-      },
-      children: user?.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified." }) : /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified." })
-    }
-  );
+  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__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified." }),
+    /* @__PURE__ */ jsx("div", { className: "flex mt-4", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        disabled: emailSent,
+        onClick: async () => {
+          await user.sendVerificationEmail();
+          setEmailSent(true);
+        },
+        children: emailSent ? "Email sent!" : "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;
+      }
+    }
+  }),
+  newPasswordRepeat: yupString().nullable().oneOf([yup.ref("newPassword"), "", null], "Passwords do not match").required("Please repeat your password")
+});
 function PasswordSection() {
   const user = useUser({ or: "throw" });
-  const [oldPassword, setOldPassword] = useState("");
-  const [oldPasswordError, setOldPasswordError] = useState("");
-  const [newPassword, setNewPassword] = useState("");
-  const [newPasswordError, setNewPasswordError] = useState("");
-  const [repeatNewPassword, setRepeatNewPassword] = useState("");
-  const [repeatNewPasswordError, setRepeatNewPasswordError] = useState("");
-  const [passwordChanged, setPasswordChanged] = useState(false);
+  const [changingPassword, setChangingPassword] = useState(false);
+  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({
+    resolver: yupResolver(passwordSchema)
+  });
+  const [alreadyReset, setAlreadyReset] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const { oldPassword, newPassword } = data;
+      const error = await user.updatePassword({ oldPassword, newPassword });
+      if (error) {
+        setError("oldPassword", { type: "manual", message: "Incorrect password" });
+      } else {
+        reset();
+        setAlreadyReset(true);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const registerPassword = register("newPassword");
+  const registerPasswordRepeat = register("newPasswordRepeat");
   if (!user.hasPassword) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
-    SettingSection,
-    {
-      title: "Password",
-      desc: "Change your password here.",
-      buttonDisabled: passwordChanged || !oldPassword && !newPassword && !repeatNewPassword,
-      buttonText: passwordChanged ? "Password changed!" : "Update Password",
-      onButtonClick: async () => {
-        setOldPasswordError("");
-        setNewPasswordError("");
-        setRepeatNewPasswordError("");
-        if (!oldPassword) {
-          setOldPasswordError("Please enter your old password");
-          return;
-        } else if (!newPassword) {
-          setNewPasswordError("Please enter a new password");
-          return;
-        } else if (!repeatNewPassword) {
-          setRepeatNewPasswordError("Please repeat your new password");
-          return;
-        } else {
-          const errorMessage = getPasswordError(newPassword);
-          if (errorMessage) {
-            setNewPasswordError(errorMessage.message);
-          } else {
-            if (newPassword !== repeatNewPassword) {
-              setRepeatNewPasswordError("Passwords do not match");
-              return;
-            }
-            const errorCode = await user.updatePassword({ oldPassword, newPassword });
-            if (errorCode) {
-              setOldPasswordError("Incorrect password");
-            } else {
-              setOldPassword("");
-              setNewPassword("");
-              setRepeatNewPassword("");
-              setPasswordChanged(true);
-            }
-          }
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: "Old Password" }),
+  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(
+      Button,
+      {
+        variant: "secondary",
+        onClick: async () => {
+          setChangingPassword(true);
+        },
+        children: "Change Password"
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "old-password", className: "mb-1", children: "Old password" }),
           /* @__PURE__ */ jsx(
-            PasswordInput,
+            Input,
             {
               id: "old-password",
-              value: oldPassword,
-              onChange: (e) => {
-                setOldPassword(e.target.value);
-                setOldPasswordError("");
-                setPasswordChanged(false);
-              }
+              type: "password",
+              ...register("oldPassword")
             }
           ),
-          /* @__PURE__ */ jsx(FormWarningText, { text: oldPasswordError })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mb-1", children: "New Password" }),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.oldPassword?.message?.toString() }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "new-password", className: "mt-4 mb-1", children: "Password" }),
           /* @__PURE__ */ jsx(
             PasswordInput,
             {
               id: "new-password",
-              value: newPassword,
+              ...registerPassword,
               onChange: (e) => {
-                setNewPassword(e.target.value);
-                setNewPasswordError("");
-                setPasswordChanged(false);
+                clearErrors("newPassword");
+                clearErrors("newPasswordRepeat");
+                runAsynchronously(registerPassword.onChange(e));
               }
             }
           ),
-          /* @__PURE__ */ jsx(FormWarningText, { text: newPasswordError })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-new-password", className: "mb-1", children: "Repeat New Password" }),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPassword?.message?.toString() }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat password" }),
           /* @__PURE__ */ jsx(
             PasswordInput,
             {
-              id: "repeat-new-password",
-              value: repeatNewPassword,
+              id: "repeat-password",
+              ...registerPasswordRepeat,
               onChange: (e) => {
-                setRepeatNewPassword(e.target.value);
-                setRepeatNewPasswordError("");
-                setPasswordChanged(false);
+                clearErrors("newPassword");
+                clearErrors("newPasswordRepeat");
+                runAsynchronously(registerPasswordRepeat.onChange(e));
               }
             }
           ),
-          /* @__PURE__ */ jsx(FormWarningText, { text: repeatNewPasswordError })
-        ] })
-      ]
-    }
-  );
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Change Password" })
+        ]
+      }
+    ) })
+  ] });
 }
 function MfaSection() {
   const project = useStackApp().useProject();
@@ -248,29 +249,10 @@ function MfaSection() {
       setIsMaybeWrong(true);
     });
   }, [mfaCode, generatedSecret, handleSubmit]);
-  return /* @__PURE__ */ jsx(
-    SettingSection,
-    {
-      title: "Multi-factor Authentication",
-      desc: "Secure your account with an additional layer of security.",
-      buttonVariant: "secondary",
-      buttonText: isEnabled ? "Disable" : generatedSecret ? "Cancel" : "Enable",
-      onButtonClick: async () => {
-        if (isEnabled) {
-          await user.update({
-            totpMultiFactorSecret: null
-          });
-        } else if (!generatedSecret) {
-          const secret = generateRandomValues(new Uint8Array(20));
-          setQrCodeUrl(await generateTotpQrCode(project, user, secret));
-          setGeneratedSecret(secret);
-        } else {
-          setGeneratedSecret(null);
-          setQrCodeUrl(null);
-          setMfaCode("");
-        }
-      },
-      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: [
+  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:" }),
@@ -288,9 +270,32 @@ function MfaSection() {
           }
         ),
         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(Typography, { variant: "destructive", children: "Multi-factor authentication is currently disabled." }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "mt-4",
+          variant: isEnabled ? "secondary" : "default",
+          onClick: async () => {
+            if (isEnabled) {
+              await user.update({
+                totpMultiFactorSecret: null
+              });
+            } else if (!generatedSecret) {
+              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"
+        }
+      )
+    ] })
+  ] }) });
 }
 async function generateTotpQrCode(project, user, secret) {
   const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);
@@ -298,18 +303,199 @@ async function generateTotpQrCode(project, user, secret) {
 }
 function SignOutSection() {
   const user = useUser({ or: "throw" });
-  return /* @__PURE__ */ jsx(
-    SettingSection,
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    Button,
     {
-      title: "Sign out",
-      desc: "Sign out of your account on this device.",
-      buttonVariant: "secondary",
-      buttonText: "Sign Out",
-      onButtonClick: () => user.signOut()
+      variant: "secondary",
+      onClick: () => user.signOut(),
+      children: "Sign Out"
     }
-  );
+  ) }) });
+}
+function UserSettings(props) {
+  const app = useStackApp();
+  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,
+    {
+      variant: "secondary",
+      onClick: async () => setLeaving(true),
+      children: "Leave team"
+    }
+  ) : /* @__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) {
+  const user = useUser({ or: "redirect" });
+  const updateTeamPermission = user.usePermission(props.team, "$update_team");
+  if (!updateTeamPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Label, { children: "Team display name" }),
+    /* @__PURE__ */ jsx(
+      EditableText,
+      {
+        value: props.team.displayName,
+        onSave: async (newDisplayName) => await props.team.update({ displayName: newDisplayName })
+      }
+    )
+  ] }) });
+}
+function ProfileSettings(props) {
+  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 });
+        }
+      }
+    )
+  ] }) });
+}
+var invitationSchema = yupObject({
+  email: yupString().email().required("Please enter an email address")
+});
+function MemberInvitation(props) {
+  const project = useStackApp().useProject();
+  if (!project.config.clientTeamCreationEnabled) {
+    return null;
+  }
+  const { register, handleSubmit, formState: { errors }, watch } = useForm({
+    resolver: yupResolver(invitationSchema)
+  });
+  const [loading, setLoading] = useState(false);
+  const [invitedEmail, setInvitedEmail] = useState(null);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      await props.team.inviteUser({ email: data.email });
+      setInvitedEmail(data.email);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    setInvitedEmail(null);
+  }, [watch("email")]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(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
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function MembersSettings(props) {
+  const user = useUser({ or: "redirect" });
+  const readMemberPermission = user.usePermission(props.team, "$read_members");
+  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
+  if (!readMemberPermission && !inviteMemberPermission) {
+    return null;
+  }
+  const users = props.team.useUsers();
+  if (!readMemberPermission) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(Label, { children: "Members" }),
+    /* @__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(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 { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(teamCreationSchema)
+  });
+  const app = useStackApp();
+  const project = app.useProject();
+  const user = useUser({ or: "redirect" });
+  const [loading, setLoading] = useState(false);
+  if (!project.config.clientTeamCreationEnabled) {
+    return /* @__PURE__ */ jsx(MessageCard, { title: "Team creation is not enabled" });
+  }
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const team = await user.createTeam({ displayName: data.displayName });
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: "stack-scope flex flex-col items-stretch", children: /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
+    "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" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "email",
+              type: "email",
+              ...register("displayName")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.displayName?.message?.toString() }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Create" })
+      ] })
+    }
+  ) }) });
 }
 export {
-  AccountSettings
+  AccountSettings,
+  TeamCreation
 };
 //# sourceMappingURL=account-settings.js.map