@stackframe/stack 2.7.23 → 2.7.25

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

@@ -14,7 +14,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCel
 import { Edit, Trash, icons } from "lucide-react";
 import { TOTPController, createTOTPKeyURI } from "oslo/otp";
 import * as QRCode from "qrcode";
-import React, { Suspense, useEffect, useState } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import * as yup from "yup";
 import { MessageCard, useStackApp, useUser } from "..";
@@ -102,22 +102,19 @@ function AccountSettings(props) {
   ) }) });
 }
 function Section(props) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "sm: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: "sm:flex-1 sm:items-end flex flex-col gap-2 ", children: props.children })
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sm: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: "sm:flex-1 sm:items-end 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, {})
-    ] }))
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6", children: props.children });
 }
 function ProfilePage() {
   const { t } = useTranslation();
@@ -305,16 +302,12 @@ function EmailsSection() {
   ] });
 }
 function EmailsAndAuthPage() {
-  const passwordSection = usePasswordSection();
-  const mfaSection = useMfaSection();
-  const otpSection = useOtpSection();
-  const passkeySection = usePasskeySection();
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
     /* @__PURE__ */ jsx(EmailsSection, {}),
-    passwordSection,
-    passkeySection,
-    otpSection,
-    mfaSection
+    /* @__PURE__ */ jsx(PasswordSection, {}),
+    /* @__PURE__ */ jsx(PasskeySection, {}),
+    /* @__PURE__ */ jsx(OtpSection, {}),
+    /* @__PURE__ */ jsx(MfaSection, {})
   ] });
 }
 function EmailsAndAuthPageSkeleton() {
@@ -325,7 +318,7 @@ function EmailsAndAuthPageSkeleton() {
     /* @__PURE__ */ jsx(Skeleton, { className: "h-9 w-full mt-1" })
   ] });
 }
-function usePasskeySection() {
+function PasskeySection() {
   const { t } = useTranslation();
   const user = useUser({ or: "throw" });
   const stackApp = useStackApp();
@@ -380,7 +373,7 @@ function usePasskeySection() {
     ] })
   ] }) }) });
 }
-function useOtpSection() {
+function OtpSection() {
   const { t } = useTranslation();
   const user = useUser({ or: "throw" });
   const project = useStackApp().useProject();
@@ -434,14 +427,12 @@ function useOtpSection() {
   ) : /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: t("To enable OTP sign-in, please add a verified sign-in email.") }) }) });
 }
 function SettingsPage() {
-  const deleteAccountSection = useDeleteAccountSection();
-  const signOutSection = useSignOutSection();
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    deleteAccountSection,
-    signOutSection
+    /* @__PURE__ */ jsx(DeleteAccountSection, {}),
+    /* @__PURE__ */ jsx(SignOutSection, {})
   ] });
 }
-function usePasswordSection() {
+function PasswordSection() {
   const { t } = useTranslation();
   const user = useUser({ or: "throw" });
   const contactChannels = user.useContactChannels();
@@ -564,7 +555,7 @@ function usePasswordSection() {
     }
   );
 }
-function useMfaSection() {
+function MfaSection() {
   const { t } = useTranslation();
   const project = useStackApp().useProject();
   const user = useUser({ or: "throw" });
@@ -658,7 +649,7 @@ async function generateTotpQrCode(project, user, secret) {
   const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);
   return await QRCode.toDataURL(uri);
 }
-function useSignOutSection() {
+function SignOutSection() {
   const { t } = useTranslation();
   const user = useUser({ or: "throw" });
   return /* @__PURE__ */ jsx(
@@ -678,22 +669,16 @@ function useSignOutSection() {
   );
 }
 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,
-    memberListSection,
-    memberInvitationSection,
-    teamProfileImageSection,
-    teamDisplayNameSection,
-    leaveTeamSection
+    /* @__PURE__ */ jsx(TeamUserProfileSection, { team: props.team }),
+    /* @__PURE__ */ jsx(MemberListSection, { team: props.team }),
+    /* @__PURE__ */ jsx(MemberInvitationSection, { team: props.team }),
+    /* @__PURE__ */ jsx(TeamProfileImageSection, { team: props.team }),
+    /* @__PURE__ */ jsx(TeamDisplayNameSection, { team: props.team }),
+    /* @__PURE__ */ jsx(LeaveTeamSection, { team: props.team })
   ] });
 }
-function useLeaveTeamSection(props) {
+function LeaveTeamSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const [leaving, setLeaving] = useState(false);
@@ -736,7 +721,7 @@ function useLeaveTeamSection(props) {
     }
   );
 }
-function useTeamProfileImageSection(props) {
+function TeamProfileImageSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const updateTeamPermission = user.usePermission(props.team, "$update_team");
@@ -760,7 +745,7 @@ function useTeamProfileImageSection(props) {
     }
   );
 }
-function useTeamDisplayNameSection(props) {
+function TeamDisplayNameSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const updateTeamPermission = user.usePermission(props.team, "$update_team");
@@ -782,7 +767,7 @@ function useTeamDisplayNameSection(props) {
     }
   );
 }
-function useTeamUserProfileSection(props) {
+function TeamUserProfileSection(props) {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const profile = user.useTeamProfile(props.team);
@@ -803,22 +788,39 @@ function useTeamUserProfileSection(props) {
     }
   );
 }
-function useMemberInvitationSection(props) {
-  const { t } = useTranslation();
-  const invitationSchema = yupObject({
-    email: strictEmailSchema(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address"))
-  });
+function MemberInvitationSection(props) {
   const user = useUser({ or: "redirect" });
   const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
-  const readMemberPermission = user.usePermission(props.team, "$read_members");
-  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
   if (!inviteMemberPermission) {
     return null;
   }
-  let invitationsToShow = [];
-  if (readMemberPermission) {
-    invitationsToShow = props.team.useInvitations();
-  }
+  return /* @__PURE__ */ jsx(MemberInvitationSectionInner, { team: props.team });
+}
+function MemberInvitationsSectionInvitationsList(props) {
+  const user = useUser({ or: "redirect" });
+  const { t } = useTranslation();
+  const invitationsToShow = props.team.useInvitations();
+  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Table, { className: "mt-6", children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Outstanding invitations") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-[60px]", children: t("Expires") }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-[36px] max-w-[36px]" })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
+      /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
+      /* @__PURE__ */ jsx(TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ jsx(Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" }) }) })
+    ] }, invitation.id)) })
+  ] }) });
+}
+function MemberInvitationSectionInner(props) {
+  const user = useUser({ or: "redirect" });
+  const { t } = useTranslation();
+  const readMemberPermission = user.usePermission(props.team, "$read_members");
+  const invitationSchema = yupObject({
+    email: strictEmailSchema(t("Please enter a valid email address")).defined().nonEmpty(t("Please enter an email address"))
+  });
   const { register, handleSubmit, formState: { errors }, watch } = useForm({
     resolver: yupResolver(invitationSchema)
   });
@@ -836,7 +838,7 @@ function useMemberInvitationSection(props) {
   useEffect(() => {
     setInvitedEmail(null);
   }, [watch("email")]);
-  return /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Section,
       {
@@ -869,32 +871,21 @@ function useMemberInvitationSection(props) {
         )
       }
     ),
-    invitationsToShow.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Table, { className: "mt-6", children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[200px]", children: t("Outstanding invitations") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[60px]", children: t("Expires") }),
-        /* @__PURE__ */ jsx(TableHead, { className: "w-[36px] max-w-[36px]" })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: invitationsToShow.map((invitation, i) => /* @__PURE__ */ jsxs(TableRow, { children: [
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { children: invitation.recipientEmail }) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: invitation.expiresAt.toLocaleString() }) }),
-        /* @__PURE__ */ jsx(TableCell, { align: "right", className: "max-w-[36px]", children: removeMemberPermission && /* @__PURE__ */ jsx(Button, { onClick: async () => await invitation.revoke(), size: "icon", variant: "ghost", children: /* @__PURE__ */ jsx(Trash, { className: "w-4 h-4" }) }) })
-      ] }, invitation.id)) })
-    ] }) })
+    readMemberPermission && /* @__PURE__ */ jsx(MemberInvitationsSectionInvitationsList, { team: props.team })
   ] });
 }
-function useMemberListSection(props) {
-  const { t } = useTranslation();
+function MemberListSection(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;
   }
+  return /* @__PURE__ */ jsx(MemberListSectionInner, { team: props.team });
+}
+function MemberListSectionInner(props) {
+  const { t } = useTranslation();
   const users = props.team.useUsers();
-  if (!readMemberPermission) {
-    return null;
-  }
   return /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Typography, { className: "font-medium mb-2", children: t("Members") }),
     /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: /* @__PURE__ */ jsxs(Table, { children: [
@@ -958,7 +949,7 @@ function TeamCreation() {
     }
   ) }) });
 }
-function useDeleteAccountSection() {
+function DeleteAccountSection() {
   const { t } = useTranslation();
   const user = useUser({ or: "redirect" });
   const app = useStackApp();
@@ -1051,8 +1042,6 @@ function EditableText(props) {
 }
 export {
   AccountSettings,
-  EditableText,
-  TeamCreation,
-  useDeleteAccountSection
+  EditableText
 };
 //# sourceMappingURL=account-settings.js.map