@stackframe/stack 2.5.18 → 2.5.19

package/dist/esm/components/elements/sidebar-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { ArrowLeft, LucideIcon, XIcon } from 'lucide-react';\nimport React, { ReactNode } from 'react';\n\ntype Item = {\n  title: React.ReactNode,\n  description?: React.ReactNode,\n  icon?: LucideIcon,\n  content: React.ReactNode,\n}\n\nexport function SidebarNavItem(props: { item: Item, selected: boolean, onClick: () => void }) {\n  return (\n    <Button\n      variant='ghost'\n      size='sm'\n      className={cn(\n        props.selected && \"bg-muted\",\n        \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2\",\n      )}\n      onClick={props.onClick}\n    >\n      {props.item.icon && <props.item.icon className=\"mr-2 h-4 w-4\" />}\n      {props.item.title}\n    </Button>\n  );\n}\n\nexport function SidebarLayout(props: { items: Item[], title?: ReactNode }) {\n  return (\n    <>\n      <div className=\"hidden sm:flex\">\n        <DesktopLayout items={props.items} title={props.title} />\n      </div>\n      <div className=\"sm:hidden\">\n        <MobileLayout items={props.items} title={props.title} />\n      </div>\n    </>\n  );\n}\n\nfunction DesktopLayout(props: { items: Item[], title?: ReactNode }) {\n  const [selectedIndex, setSelectedIndex] = React.useState(0);\n  const currentItem = props.items[selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex p-2 w-full\">\n      <div className=\"flex w-[200px] border-r flex-col items-stretch gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        {props.items.map((item, index) => (\n          <SidebarNavItem\n            key={index}\n            item={item}\n            onClick={() => setSelectedIndex(index)}\n            selected={index === selectedIndex}\n          />\n        ))}\n      </div>\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='mb-4'>\n          <Typography type='h4'>{currentItem.title}</Typography>\n          {currentItem.description && <Typography variant='secondary' type='label'>{currentItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {currentItem.content}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: Item[], title?: ReactNode }) {\n  const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null);\n\n  if (selectedIndex === null) {\n    return (\n      <div className=\"flex flex-col gap-2 p-2\">\n        {props.title && <div className='mb-2 ml-2'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        {props.items.map((item, index) => (\n          <SidebarNavItem\n            key={index}\n            item={item}\n            onClick={() => setSelectedIndex(index)}\n            selected={false}\n          />\n        ))}\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex-1 flex flex-col gap-4 py-2 px-4\">\n        <div className='flex flex-col'>\n          <div className='flex justify-between'>\n            <Typography type='h4'>{props.items[selectedIndex].title}</Typography>\n            <Button variant='ghost' size='icon' onClick={() => setSelectedIndex(null)}>\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {props.items[selectedIndex].description && <Typography variant='secondary' type='label'>{props.items[selectedIndex].description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {props.items[selectedIndex].content}\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","names":[]}

package/dist/esm/components/elements/user-avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { User } from \"../../lib/stack-app\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\n\nexport function UserAvatar(props: { size?: number, user: User | null }) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || '34px', width: props.size || '34px' }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium'>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"h-5 w-5 text-zinc-500\" />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAE1B,SAAS,QAAQ,gBAAgB,mBAAmB;AAKhD,SACE,KADF;AAHG,SAAS,WAAW,OAA6C;AACtE,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO,GACzE;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,SAAI,WAAU,eACX,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,oBAAC,aAAU,WAAU,yBAAwB,GACjD;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/elements/user-avatar.tsx"],"sourcesContent":["import { UserRound } from \"lucide-react\";\nimport { User } from \"../../lib/stack-app\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@stackframe/stack-ui\";\n\nexport function UserAvatar(props: {\n  size?: number,\n  user?: {\n    profileImageUrl?: string | null,\n    displayName?: string | null,\n    primaryEmail?: string | null,\n  } | null,\n}) {\n  const user = props.user;\n  return (\n    <Avatar style={{ height: props.size || '34px', width: props.size || '34px' }}>\n      <AvatarImage src={user?.profileImageUrl || ''} />\n      <AvatarFallback>\n        {user ?\n          <div className='font-medium'>\n            {(user.displayName || user.primaryEmail)?.slice(0, 2).toUpperCase()}\n          </div> :\n          <UserRound className=\"h-5 w-5 text-zinc-500\" />}\n      </AvatarFallback>\n    </Avatar>\n  );\n}\n"],"mappings":";AAAA,SAAS,iBAAiB;AAE1B,SAAS,QAAQ,gBAAgB,mBAAmB;AAYhD,SACE,KADF;AAVG,SAAS,WAAW,OAOxB;AACD,QAAM,OAAO,MAAM;AACnB,SACE,qBAAC,UAAO,OAAO,EAAE,QAAQ,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,OAAO,GACzE;AAAA,wBAAC,eAAY,KAAK,MAAM,mBAAmB,IAAI;AAAA,IAC/C,oBAAC,kBACE,iBACC,oBAAC,SAAI,WAAU,eACX,gBAAK,eAAe,KAAK,eAAe,MAAM,GAAG,CAAC,EAAE,YAAY,GACpE,IACA,oBAAC,aAAU,WAAU,yBAAwB,GACjD;AAAA,KACF;AAEJ;","names":[]}

package/dist/esm/components/selected-team-switcher.js

@@ -4,20 +4,23 @@
 // src/components/selected-team-switcher.tsx
 import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import {
+  Button,
   Select,
   SelectContent,
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
   Typography
 } from "@stackframe/stack-ui";
 import { useRouter } from "next/navigation";
 import { useEffect, useMemo } from "react";
-import { useUser } from "..";
+import { useStackApp, useUser } from "..";
 import Image from "next/image";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { PlusCircle, Settings } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function TeamIcon(props) {
   if (props.team.profileImageUrl) {
     return /* @__PURE__ */ jsx("div", { className: "w-6 h-6 mr-2 rounded bg-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx(Image, { src: props.team.profileImageUrl, alt: props.team.displayName, className: "w-6 h-6" }) });
@@ -26,7 +29,9 @@ function TeamIcon(props) {
   }
 }
 function SelectedTeamSwitcher(props) {
+  const app = useStackApp();
   const user = useUser();
+  const project = app.useProject();
   const router = useRouter();
   const selectedTeam = user?.selectedTeam || props.selectedTeam;
   const rawTeams = user?.useTeams();
@@ -57,11 +62,38 @@ function SelectedTeamSwitcher(props) {
       children: [
         /* @__PURE__ */ jsx(SelectTrigger, { className: "stack-scope", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select team" }) }),
         /* @__PURE__ */ jsxs(SelectContent, { className: "stack-scope", children: [
-          teams && teams.map((team) => /* @__PURE__ */ jsx(SelectItem, { value: team.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsx(TeamIcon, { team }),
-            /* @__PURE__ */ jsx(Typography, { children: team.displayName })
-          ] }) }, team.id)),
-          teams?.length === 0 && /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectLabel, { children: "No teams" }) })
+          user?.selectedTeam ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
+            /* @__PURE__ */ jsx(SelectLabel, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              "Current team",
+              /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-6 w-6", onClick: () => router.push(`${app.urls.handler}/team-settings/${user.selectedTeam?.id}`), children: /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(SelectItem, { value: user.selectedTeam.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx(TeamIcon, { team: user.selectedTeam }),
+              /* @__PURE__ */ jsx(Typography, { children: user.selectedTeam.displayName })
+            ] }) })
+          ] }) : void 0,
+          teams?.length ? /* @__PURE__ */ jsxs(SelectGroup, { children: [
+            /* @__PURE__ */ jsx(SelectLabel, { children: "Other teams" }),
+            teams.filter((team) => team.id !== user?.selectedTeam?.id).map((team) => /* @__PURE__ */ jsx(SelectItem, { value: team.id, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx(TeamIcon, { team }),
+              /* @__PURE__ */ jsx(Typography, { children: team.displayName })
+            ] }) }, team.id))
+          ] }) : /* @__PURE__ */ jsx(SelectGroup, { children: /* @__PURE__ */ jsx(SelectLabel, { children: "No teams yet" }) }),
+          project.config.clientTeamCreationEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(SelectSeparator, {}),
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                onClick: () => router.push(app.urls.teamCreation),
+                className: "w-full",
+                variant: "ghost",
+                children: [
+                  /* @__PURE__ */ jsx(PlusCircle, { className: "mr-2 h-4 w-4" }),
+                  " Create a team"
+                ]
+              }
+            ) })
+          ] })
         ] })
       ]
     }

package/dist/esm/components/selected-team-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useMemo } from \"react\";\nimport { Team, useUser } from \"..\";\nimport Image from \"next/image\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nfunction TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <div className=\"w-6 h-6 mr-2 rounded bg-gray-200 overflow-hidden\">\n        <Image src={props.team.profileImageUrl} alt={props.team.displayName} className=\"w-6 h-6\" />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200\">\n        <Typography>{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const user = useUser();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {teams && teams.map(team => (\n          <SelectItem value={team.id} key={team.id}>\n            <div className=\"flex items-center\">\n              <TeamIcon team={team} />\n              <Typography>{team.displayName}</Typography>\n            </div>\n          </SelectItem>\n        ))}\n\n        {teams?.length === 0 && (\n          <SelectGroup>\n            <SelectLabel>No teams</SelectLabel>\n          </SelectGroup>\n        )}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";;;AACA,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,WAAW,eAAe;AACnC,SAAe,eAAe;AAC9B,OAAO,WAAW;AAYV,cAkDI,YAlDJ;AAJR,SAAS,SAAS,OAAuB;AACvC,MAAI,MAAM,KAAK,iBAAiB;AAC9B,WACE,oBAAC,SAAI,WAAU,oDACb,8BAAC,SAAM,KAAK,MAAM,KAAK,iBAAiB,KAAK,MAAM,KAAK,aAAa,WAAU,WAAU,GAC3F;AAAA,EAEJ,OAAO;AACL,WACE,oBAAC,SAAI,WAAU,qEACb,8BAAC,cAAY,gBAAM,KAAK,YAAY,MAAM,GAAG,CAAC,EAAE,YAAY,GAAE,GAChE;AAAA,EAEJ;AACF;AAEO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,UAAU;AACzB,QAAM,eAAe,MAAM,gBAAgB,MAAM;AACjD,QAAM,WAAW,MAAM,SAAS;AAChC,QAAM,QAAQ,QAAQ,MAAM,UAAU,KAAK,CAAC,GAAG,MAAM,EAAE,OAAO,cAAc,KAAK,IAAI,EAAE,GAAG,CAAC,UAAU,YAAY,CAAC;AAElH,YAAU,MAAM;AACd,QAAI,CAAC,MAAM,wBAAwB,MAAM,cAAc;AACrD,iCAA2B,MAAM,gBAAgB,MAAM,YAAY,CAAC;AAAA,IACtE;AAAA,EACF,GAAG,CAAC,MAAM,sBAAsB,MAAM,YAAY,CAAC;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,cAAc;AAAA,MACrB,eAAe,CAAC,UAAU;AACxB,mCAA2B,YAAY;AACrC,gBAAM,OAAO,OAAO,KAAK,CAAAA,UAAQA,MAAK,OAAO,KAAK;AAClD,cAAI,CAAC,MAAM;AACT,kBAAM,IAAI,MAAM,wCAAwC;AAAA,UAC1D;AAEA,cAAI,CAAC,MAAM,sBAAsB;AAC/B,kBAAM,MAAM,gBAAgB,IAAI;AAAA,UAClC;AACA,cAAI,MAAM,QAAQ;AAChB,mBAAO,KAAK,MAAM,OAAO,IAAI,CAAC;AAAA,UAChC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MAEA;AAAA,4BAAC,iBAAc,WAAU,eACvB,8BAAC,eAAY,aAAY,eAAa,GACxC;AAAA,QACA,qBAAC,iBAAc,WAAU,eACtB;AAAA,mBAAS,MAAM,IAAI,UAClB,oBAAC,cAAW,OAAO,KAAK,IACtB,+BAAC,SAAI,WAAU,qBACb;AAAA,gCAAC,YAAS,MAAY;AAAA,YACtB,oBAAC,cAAY,eAAK,aAAY;AAAA,aAChC,KAJ+B,KAAK,EAKtC,CACD;AAAA,UAEA,OAAO,WAAW,KACjB,oBAAC,eACC,8BAAC,eAAY,sBAAQ,GACvB;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["team"]}
+{"version":3,"sources":["../../../src/components/selected-team-switcher.tsx"],"sourcesContent":["'use client';\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport {\n  Button,\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n  Typography\n} from \"@stackframe/stack-ui\";\nimport { useRouter } from \"next/navigation\";\nimport { useEffect, useMemo } from \"react\";\nimport { Team, useStackApp, useUser } from \"..\";\nimport Image from \"next/image\";\nimport { PlusCircle, Settings } from \"lucide-react\";\n\ntype SelectedTeamSwitcherProps = {\n  urlMap?: (team: Team) => string,\n  selectedTeam?: Team,\n  noUpdateSelectedTeam?: boolean,\n};\n\nfunction TeamIcon(props: { team: Team }) {\n  if (props.team.profileImageUrl) {\n    return (\n      <div className=\"w-6 h-6 mr-2 rounded bg-gray-200 overflow-hidden\">\n        <Image src={props.team.profileImageUrl} alt={props.team.displayName} className=\"w-6 h-6\" />\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"flex items-center justify-center w-6 h-6 mr-2 rounded bg-gray-200\">\n        <Typography>{props.team.displayName.slice(0, 1).toUpperCase()}</Typography>\n      </div>\n    );\n  }\n}\n\nexport function SelectedTeamSwitcher(props: SelectedTeamSwitcherProps) {\n  const app = useStackApp();\n  const user = useUser();\n  const project = app.useProject();\n  const router = useRouter();\n  const selectedTeam = user?.selectedTeam || props.selectedTeam;\n  const rawTeams = user?.useTeams();\n  const teams = useMemo(() => rawTeams?.sort((a, b) => b.id === selectedTeam?.id ? 1 : -1), [rawTeams, selectedTeam]);\n\n  useEffect(() => {\n    if (!props.noUpdateSelectedTeam && props.selectedTeam) {\n      runAsynchronouslyWithAlert(user?.setSelectedTeam(props.selectedTeam));\n    }\n  }, [props.noUpdateSelectedTeam, props.selectedTeam]);\n\n  return (\n    <Select\n      value={selectedTeam?.id}\n      onValueChange={(value) => {\n        runAsynchronouslyWithAlert(async () => {\n          const team = teams?.find(team => team.id === value);\n          if (!team) {\n            throw new Error('Team not found, this should not happen');\n          }\n\n          if (!props.noUpdateSelectedTeam) {\n            await user?.setSelectedTeam(team);\n          }\n          if (props.urlMap) {\n            router.push(props.urlMap(team));\n          }\n        });\n      }}\n    >\n      <SelectTrigger className=\"stack-scope\">\n        <SelectValue placeholder=\"Select team\"/>\n      </SelectTrigger>\n      <SelectContent className=\"stack-scope\">\n        {user?.selectedTeam ? <SelectGroup>\n          <SelectLabel>\n            <div className=\"flex items-center justify-between\">\n              Current team\n              <Button variant='ghost' size='icon' className=\"h-6 w-6\" onClick={() => router.push(`${app.urls.handler}/team-settings/${user.selectedTeam?.id}`)}>\n                <Settings className=\"h-4 w-4\"/>\n              </Button>\n            </div>\n          </SelectLabel>\n          <SelectItem value={user.selectedTeam.id}>\n            <div className=\"flex items-center\">\n              <TeamIcon team={user.selectedTeam} />\n              <Typography>{user.selectedTeam.displayName}</Typography>\n            </div>\n          </SelectItem>\n        </SelectGroup> : undefined}\n\n        {teams?.length ?\n          <SelectGroup>\n            <SelectLabel>Other teams</SelectLabel>\n            {teams.filter(team => team.id !== user?.selectedTeam?.id)\n              .map(team => (\n                <SelectItem value={team.id} key={team.id}>\n                  <div className=\"flex items-center\">\n                    <TeamIcon team={team} />\n                    <Typography>{team.displayName}</Typography>\n                  </div>\n                </SelectItem>\n              ))}\n          </SelectGroup> :\n          <SelectGroup>\n            <SelectLabel>No teams yet</SelectLabel>\n          </SelectGroup>}\n\n        {project.config.clientTeamCreationEnabled && <>\n          <SelectSeparator/>\n          <div>\n            <Button\n              onClick={() => router.push(app.urls.teamCreation)}\n              className=\"w-full\"\n              variant='ghost'\n            >\n              <PlusCircle className=\"mr-2 h-4 w-4\"/> Create a team\n            </Button>\n          </div>\n        </>}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":"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","names":["team"]}

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

@@ -2,21 +2,44 @@
 "use client";
 
 // src/components-page/account-settings.tsx
-import { useEffect } from "react";
-import { useStackApp, useUser } from "..";
-import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
-import { UserAvatar } from "../components/elements/user-avatar";
-import { useState } from "react";
-import { FormWarningText } from "../components/elements/form-warning";
 import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
-import { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography, cn } from "@stackframe/stack-ui";
+import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
 import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
-import { TOTPController, createTOTPKeyURI } from "oslo/otp";
-import * as QRCode from "qrcode";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
-import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
 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 { TOTPController, createTOTPKeyURI } from "oslo/otp";
+import * as QRCode from "qrcode";
+import { useEffect, useState } from "react";
+import { 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";
+function AccountSettings({ fullPage = false }) {
+  const user = useUser({ or: "redirect" });
+  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"
+    }
+  );
+  if (fullPage) {
+    return /* @__PURE__ */ jsx(Container, { size: 800, className: "stack-scope", children: inner });
+  } else {
+    return inner;
+  }
+}
 function SettingSection(props) {
   return /* @__PURE__ */ jsxs(Card, { children: [
     /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsxs("div", { children: [
@@ -202,9 +225,6 @@ function PasswordSection() {
 }
 function MfaSection() {
   const project = useStackApp().useProject();
-  if (project.config.oauthProviders.length !== 0 || project.config.magicLinkEnabled) {
-    return null;
-  }
   const user = useUser({ or: "throw" });
   const [generatedSecret, setGeneratedSecret] = useState(null);
   const [qrCodeUrl, setQrCodeUrl] = useState(null);
@@ -289,28 +309,6 @@ function SignOutSection() {
     }
   );
 }
-function AccountSettings({ fullPage = false }) {
-  const user = useUser();
-  if (!user) {
-    return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "signedOut", fullPage });
-  }
-  const inner = /* @__PURE__ */ jsxs("div", { className: cn(fullPage ? "p-4" : "", "flex flex-col gap-4"), children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Account Settings" }),
-      /* @__PURE__ */ jsx(Typography, { variant: "secondary", type: "label", children: "Manage your account" })
-    ] }),
-    /* @__PURE__ */ jsx(ProfileSection, {}),
-    /* @__PURE__ */ jsx(EmailVerificationSection, {}),
-    /* @__PURE__ */ jsx(PasswordSection, {}),
-    /* @__PURE__ */ jsx(MfaSection, {}),
-    /* @__PURE__ */ jsx(SignOutSection, {})
-  ] });
-  if (fullPage) {
-    return /* @__PURE__ */ jsx(Container, { size: 600, className: "stack-scope", children: inner });
-  } else {
-    return inner;
-  }
-}
 export {
   AccountSettings
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect } from 'react';\nimport { CurrentUser, Project, useStackApp, useUser } from '..';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { useState } from 'react';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography, cn } from '@stackframe/stack-ui';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { set } from 'react-hook-form';\n\nfunction SettingSection(props: {\n  title: string,\n  desc: string,\n  buttonText?: string,\n  buttonDisabled?: boolean,\n  onButtonClick?: React.ComponentProps<typeof Button>[\"onClick\"],\n  buttonVariant?: 'default' | 'secondary',\n  children?: React.ReactNode,\n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <Typography type='h4'>{props.title}</Typography>\n          <Typography type='label' variant='secondary'>{props.desc}</Typography>\n        </div>\n      </CardHeader>\n      {props.children && <CardContent>\n        <div className='flex flex-col gap-4'>\n          {props.children}\n        </div>\n      </CardContent>}\n      {props.buttonText && <CardFooter>\n        <div className='flex justify-end w-full'>\n          <Button\n            disabled={props.buttonDisabled}\n            onClick={props.onButtonClick}\n            variant={props.buttonVariant}\n          >\n            {props.buttonText}\n          </Button>\n        </div>\n      </CardFooter>}\n    </Card>\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser()!;\n  const [userInfo, setUserInfo] = useState<{ displayName: string }>({ displayName: user.displayName || '' });\n  const [changed, setChanged] = useState(false);\n\n  return (\n    <SettingSection\n      title='Profile'\n      desc='Your profile information'\n      buttonDisabled={!changed}\n      buttonText='Save'\n      onButtonClick={async () => {\n        await user.update(userInfo);\n        setChanged(false);\n      }}\n    >\n      <div className='flex gap-4 items-center'>\n        <UserAvatar user={user} size={50}/>\n        <div className='flex flex-col'>\n          <Typography>{user.displayName}</Typography>\n          <Typography variant='secondary' type='label'>{user.primaryEmail}</Typography>\n        </div>\n      </div>\n\n      <div className='flex flex-col'>\n        <Label htmlFor='display-name' className='mb-1'>Display Name</Label>\n        <Input\n          id='display-name'\n          value={userInfo.displayName}\n          onChange={(e) => {\n            setUserInfo((i) => ({...i, displayName: e.target.value }));\n            setChanged(true);\n          }}\n        />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser();\n  const [emailSent, setEmailSent] = useState(false);\n\n  return (\n    <SettingSection\n      title='Email Verification'\n      desc='We want to make sure that you own the email address.'\n      buttonDisabled={emailSent}\n      buttonText={\n        !user?.primaryEmailVerified ?\n          emailSent ?\n            'Email sent!' :\n            'Send Email'\n          : undefined\n      }\n      onButtonClick={async () => {\n        await user?.sendVerificationEmail();\n        setEmailSent(true);\n      }}\n    >\n      {user?.primaryEmailVerified ?\n        <Typography variant='success'>Your email has been verified.</Typography> :\n        <Typography variant='destructive'>Your email has not been verified.</Typography>}\n    </SettingSection>\n  );\n}\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [oldPassword, setOldPassword] = useState<string>('');\n  const [oldPasswordError, setOldPasswordError] = useState<string>('');\n  const [newPassword, setNewPassword] = useState<string>('');\n  const [newPasswordError, setNewPasswordError] = useState<string>('');\n  const [repeatNewPassword, setRepeatNewPassword] = useState<string>('');\n  const [repeatNewPasswordError, setRepeatNewPasswordError] = useState<string>('');\n  const [passwordChanged, setPasswordChanged] = useState(false);\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <SettingSection\n      title='Password'\n      desc='Change your password here.'\n      buttonDisabled={passwordChanged || (!oldPassword && !newPassword && !repeatNewPassword)}\n      buttonText={passwordChanged ? \"Password changed!\" : 'Update Password'}\n      onButtonClick={async () => {\n        setOldPasswordError('');\n        setNewPasswordError('');\n        setRepeatNewPasswordError('');\n        if (!oldPassword) {\n          setOldPasswordError('Please enter your old password');\n          return;\n        } else if (!newPassword) {\n          setNewPasswordError('Please enter a new password');\n          return;\n        } else if (!repeatNewPassword) {\n            setRepeatNewPasswordError('Please repeat your new password');\n            return;\n        } else {\n          const errorMessage = getPasswordError(newPassword);\n          if (errorMessage) {\n            setNewPasswordError(errorMessage.message);\n          } else {\n            if (newPassword !== repeatNewPassword) {\n              setRepeatNewPasswordError('Passwords do not match');\n              return;\n            }\n            const errorCode = await user.updatePassword({ oldPassword, newPassword });\n            if (errorCode) {\n              setOldPasswordError('Incorrect password');\n            } else {\n              setOldPassword('');\n              setNewPassword('');\n              setRepeatNewPassword('');\n              setPasswordChanged(true);\n            }\n          }\n        }\n      }}\n    >\n      <div className='flex flex-col'>\n        <Label htmlFor='old-password' className='mb-1'>Old Password</Label>\n        <PasswordInput\n          id='old-password'\n          value={oldPassword}\n          onChange={(e) => {\n            setOldPassword(e.target.value);\n            setOldPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={oldPasswordError} />\n      </div>\n      <div className='flex flex-col'>\n        <Label htmlFor='new-password' className='mb-1'>New Password</Label>\n        <PasswordInput\n          id='new-password'\n          value={newPassword}\n          onChange={(e) => {\n            setNewPassword(e.target.value);\n            setNewPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={newPasswordError} />\n      </div>\n      <div className='flex flex-col'>\n        <Label htmlFor='repeat-new-password' className='mb-1'>Repeat New Password</Label>\n        <PasswordInput\n          id='repeat-new-password'\n          value={repeatNewPassword}\n          onChange={(e) => {\n            setRepeatNewPassword(e.target.value);\n            setRepeatNewPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={repeatNewPasswordError} />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction MfaSection() {\n  const project = useStackApp().useProject();\n  if (project.config.oauthProviders.length !== 0 || project.config.magicLinkEnabled) {\n    // TODO next-release support MFA for OAuth and magic link\n    return null;\n  }\n\n  const user = useUser({ or: \"throw\" });\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <SettingSection\n      title='Multi-factor Authentication'\n      desc='Secure your account with an additional layer of security.'\n      buttonVariant='secondary'\n      buttonText={isEnabled ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n      onButtonClick={async () => {\n        if (isEnabled) {\n          await user.update({\n            totpMultiFactorSecret: null,\n          });\n        } else if (!generatedSecret) {\n          const secret = generateRandomValues(new Uint8Array(20));\n          setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n          setGeneratedSecret(secret);\n        } else {\n          setGeneratedSecret(null);\n          setQrCodeUrl(null);\n          setMfaCode(\"\");\n        }\n      }}\n    >\n      {isEnabled ? (\n        <Typography variant=\"success\">Multi-factor authentication is currently enabled.</Typography>\n      ) : (\n        generatedSecret ? (\n          <div className='flex flex-col gap-4 items-center'>\n            <Typography>Scan this QR code with your authenticator app:</Typography>\n            <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt=\"TOTP multi-factor authentication QR code\" />\n            <Typography>Then, enter your six-digit MFA code:</Typography>\n            <Input\n              value={mfaCode}\n              onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n              }}\n              placeholder=\"123456\"\n              maxLength={6}\n              disabled={isLoading}\n            />\n            {isMaybeWrong && mfaCode.length === 6 && (\n              <Typography variant=\"destructive\">Incorrect code. Please try again.</Typography>\n            )}\n          </div>\n        ) : (\n          <Typography variant=\"destructive\">Multi-factor authentication is currently disabled.</Typography>\n        )\n      )}\n    </SettingSection>\n  );\n}\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);\n  return await QRCode.toDataURL(uri) as any;\n}\n\nfunction SignOutSection() {\n  const user = useUser({ or: \"throw\" });\n  return (\n    <SettingSection\n      title='Sign out'\n      desc='Sign out of your account on this device.'\n      buttonVariant='secondary'\n      buttonText='Sign Out'\n      onButtonClick={() => user.signOut()}\n    >\n    </SettingSection>\n  );\n}\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser();\n  if (!user) {\n    return <PredefinedMessageCard type='signedOut' fullPage={fullPage} />;\n  }\n\n  const inner = (\n    <div className={cn(fullPage ? 'p-4' : '', 'flex flex-col gap-4')}>\n      <div>\n        <Typography type='h2'>Account Settings</Typography>\n        <Typography variant='secondary' type='label'>Manage your account</Typography>\n      </div>\n\n      <ProfileSection />\n      <EmailVerificationSection />\n      <PasswordSection />\n      <MfaSection />\n      <SignOutSection />\n    </div>\n  );\n\n  if (fullPage) {\n    return (\n      <Container size={600} className='stack-scope'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography } from '@stackframe/stack-ui';\nimport { Contact, Settings, Shield, ShieldCheck } from 'lucide-react';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport React, { useEffect, useState } from 'react';\nimport { CurrentUser, Project, useStackApp, useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { UserAvatar } from '../components/elements/user-avatar';\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser({ or: 'redirect' });\n\n  const inner = <SidebarLayout\n    items={[\n      { title: 'My Profile', content: <ProfileSection/>, icon: Contact },\n      { title: 'Security', content: <div className='flex flex-col gap-4'>\n        <EmailVerificationSection />\n        <PasswordSection />\n        <MfaSection />\n      </div>, icon: ShieldCheck },\n      { title: 'Settings', content: <SignOutSection />, icon: Settings },\n    ].filter(({ content }) => content as any)}\n    title='Team Settings'\n  />;\n\n  if (fullPage) {\n    return (\n      <Container size={800} className='stack-scope'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n\n\nfunction SettingSection(props: {\n  title: string,\n  desc: string,\n  buttonText?: string,\n  buttonDisabled?: boolean,\n  onButtonClick?: React.ComponentProps<typeof Button>[\"onClick\"],\n  buttonVariant?: 'default' | 'secondary',\n  children?: React.ReactNode,\n}) {\n  return (\n    <Card>\n      <CardHeader>\n        <div>\n          <Typography type='h4'>{props.title}</Typography>\n          <Typography type='label' variant='secondary'>{props.desc}</Typography>\n        </div>\n      </CardHeader>\n      {props.children && <CardContent>\n        <div className='flex flex-col gap-4'>\n          {props.children}\n        </div>\n      </CardContent>}\n      {props.buttonText && <CardFooter>\n        <div className='flex justify-end w-full'>\n          <Button\n            disabled={props.buttonDisabled}\n            onClick={props.onButtonClick}\n            variant={props.buttonVariant}\n          >\n            {props.buttonText}\n          </Button>\n        </div>\n      </CardFooter>}\n    </Card>\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser()!;\n  const [userInfo, setUserInfo] = useState<{ displayName: string }>({ displayName: user.displayName || '' });\n  const [changed, setChanged] = useState(false);\n\n  return (\n    <SettingSection\n      title='Profile'\n      desc='Your profile information'\n      buttonDisabled={!changed}\n      buttonText='Save'\n      onButtonClick={async () => {\n        await user.update(userInfo);\n        setChanged(false);\n      }}\n    >\n      <div className='flex gap-4 items-center'>\n        <UserAvatar user={user} size={50}/>\n        <div className='flex flex-col'>\n          <Typography>{user.displayName}</Typography>\n          <Typography variant='secondary' type='label'>{user.primaryEmail}</Typography>\n        </div>\n      </div>\n\n      <div className='flex flex-col'>\n        <Label htmlFor='display-name' className='mb-1'>Display Name</Label>\n        <Input\n          id='display-name'\n          value={userInfo.displayName}\n          onChange={(e) => {\n            setUserInfo((i) => ({...i, displayName: e.target.value }));\n            setChanged(true);\n          }}\n        />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser();\n  const [emailSent, setEmailSent] = useState(false);\n\n  return (\n    <SettingSection\n      title='Email Verification'\n      desc='We want to make sure that you own the email address.'\n      buttonDisabled={emailSent}\n      buttonText={\n        !user?.primaryEmailVerified ?\n          emailSent ?\n            'Email sent!' :\n            'Send Email'\n          : undefined\n      }\n      onButtonClick={async () => {\n        await user?.sendVerificationEmail();\n        setEmailSent(true);\n      }}\n    >\n      {user?.primaryEmailVerified ?\n        <Typography variant='success'>Your email has been verified.</Typography> :\n        <Typography variant='destructive'>Your email has not been verified.</Typography>}\n    </SettingSection>\n  );\n}\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [oldPassword, setOldPassword] = useState<string>('');\n  const [oldPasswordError, setOldPasswordError] = useState<string>('');\n  const [newPassword, setNewPassword] = useState<string>('');\n  const [newPasswordError, setNewPasswordError] = useState<string>('');\n  const [repeatNewPassword, setRepeatNewPassword] = useState<string>('');\n  const [repeatNewPasswordError, setRepeatNewPasswordError] = useState<string>('');\n  const [passwordChanged, setPasswordChanged] = useState(false);\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <SettingSection\n      title='Password'\n      desc='Change your password here.'\n      buttonDisabled={passwordChanged || (!oldPassword && !newPassword && !repeatNewPassword)}\n      buttonText={passwordChanged ? \"Password changed!\" : 'Update Password'}\n      onButtonClick={async () => {\n        setOldPasswordError('');\n        setNewPasswordError('');\n        setRepeatNewPasswordError('');\n        if (!oldPassword) {\n          setOldPasswordError('Please enter your old password');\n          return;\n        } else if (!newPassword) {\n          setNewPasswordError('Please enter a new password');\n          return;\n        } else if (!repeatNewPassword) {\n            setRepeatNewPasswordError('Please repeat your new password');\n            return;\n        } else {\n          const errorMessage = getPasswordError(newPassword);\n          if (errorMessage) {\n            setNewPasswordError(errorMessage.message);\n          } else {\n            if (newPassword !== repeatNewPassword) {\n              setRepeatNewPasswordError('Passwords do not match');\n              return;\n            }\n            const errorCode = await user.updatePassword({ oldPassword, newPassword });\n            if (errorCode) {\n              setOldPasswordError('Incorrect password');\n            } else {\n              setOldPassword('');\n              setNewPassword('');\n              setRepeatNewPassword('');\n              setPasswordChanged(true);\n            }\n          }\n        }\n      }}\n    >\n      <div className='flex flex-col'>\n        <Label htmlFor='old-password' className='mb-1'>Old Password</Label>\n        <PasswordInput\n          id='old-password'\n          value={oldPassword}\n          onChange={(e) => {\n            setOldPassword(e.target.value);\n            setOldPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={oldPasswordError} />\n      </div>\n      <div className='flex flex-col'>\n        <Label htmlFor='new-password' className='mb-1'>New Password</Label>\n        <PasswordInput\n          id='new-password'\n          value={newPassword}\n          onChange={(e) => {\n            setNewPassword(e.target.value);\n            setNewPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={newPasswordError} />\n      </div>\n      <div className='flex flex-col'>\n        <Label htmlFor='repeat-new-password' className='mb-1'>Repeat New Password</Label>\n        <PasswordInput\n          id='repeat-new-password'\n          value={repeatNewPassword}\n          onChange={(e) => {\n            setRepeatNewPassword(e.target.value);\n            setRepeatNewPasswordError('');\n            setPasswordChanged(false);\n          }}\n        />\n        <FormWarningText text={repeatNewPasswordError} />\n      </div>\n    </SettingSection>\n  );\n}\n\nfunction MfaSection() {\n  const project = useStackApp().useProject();\n  const user = useUser({ or: \"throw\" });\n  const [generatedSecret, setGeneratedSecret] = useState<Uint8Array | null>(null);\n  const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null);\n  const [mfaCode, setMfaCode] = useState<string>(\"\");\n  const [isMaybeWrong, setIsMaybeWrong] = useState(false);\n  const isEnabled = user.isMultiFactorRequired;\n\n  const [handleSubmit, isLoading] = useAsyncCallback(async () => {\n    await user.update({\n      totpMultiFactorSecret: generatedSecret,\n    });\n    setGeneratedSecret(null);\n    setQrCodeUrl(null);\n    setMfaCode(\"\");\n  }, [generatedSecret, user]);\n\n  useEffect(() => {\n    setIsMaybeWrong(false);\n    runAsynchronouslyWithAlert(async () => {\n      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <SettingSection\n      title='Multi-factor Authentication'\n      desc='Secure your account with an additional layer of security.'\n      buttonVariant='secondary'\n      buttonText={isEnabled ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n      onButtonClick={async () => {\n        if (isEnabled) {\n          await user.update({\n            totpMultiFactorSecret: null,\n          });\n        } else if (!generatedSecret) {\n          const secret = generateRandomValues(new Uint8Array(20));\n          setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n          setGeneratedSecret(secret);\n        } else {\n          setGeneratedSecret(null);\n          setQrCodeUrl(null);\n          setMfaCode(\"\");\n        }\n      }}\n    >\n      {isEnabled ? (\n        <Typography variant=\"success\">Multi-factor authentication is currently enabled.</Typography>\n      ) : (\n        generatedSecret ? (\n          <div className='flex flex-col gap-4 items-center'>\n            <Typography>Scan this QR code with your authenticator app:</Typography>\n            <img width={200} height={200} src={qrCodeUrl ?? throwErr(\"TOTP QR code failed to generate\")} alt=\"TOTP multi-factor authentication QR code\" />\n            <Typography>Then, enter your six-digit MFA code:</Typography>\n            <Input\n              value={mfaCode}\n              onChange={(e) => {\n                setIsMaybeWrong(false);\n                setMfaCode(e.target.value);\n              }}\n              placeholder=\"123456\"\n              maxLength={6}\n              disabled={isLoading}\n            />\n            {isMaybeWrong && mfaCode.length === 6 && (\n              <Typography variant=\"destructive\">Incorrect code. Please try again.</Typography>\n            )}\n          </div>\n        ) : (\n          <Typography variant=\"destructive\">Multi-factor authentication is currently disabled.</Typography>\n        )\n      )}\n    </SettingSection>\n  );\n}\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);\n  return await QRCode.toDataURL(uri) as any;\n}\n\nfunction SignOutSection() {\n  const user = useUser({ or: \"throw\" });\n  return (\n    <SettingSection\n      title='Sign out'\n      desc='Sign out of your account on this device.'\n      buttonVariant='secondary'\n      buttonText='Sign Out'\n      onButtonClick={() => user.signOut()}\n    >\n    </SettingSection>\n  );\n}"],"mappings":"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","names":[]}

package/dist/esm/components-page/stack-handler.js

@@ -12,6 +12,8 @@ import { OAuthCallback } from "./oauth-callback";
 import { PasswordReset } from "./password-reset";
 import { SignOut } from "./sign-out";
 import { TeamInvitation } from "./team-invitation";
+import { TeamSettings } from "./team-settings";
+import { TeamCreation } from "./team-creation";
 import { jsx } from "react/jsx-runtime";
 async function StackHandler({
   app,
@@ -46,9 +48,19 @@ async function StackHandler({
     accountSettings: "account-settings",
     magicLinkCallback: "magic-link-callback",
     teamInvitation: "team-invitation",
+    teamCreation: "team-creation",
     error: "error"
   };
   const path = stack.join("/");
+  if (/team-settings\/[a-zA-Z0-9-]+/.test(path)) {
+    const teamId = path.split("/")[1];
+    const user = await app.getUser();
+    const team = await user?.getTeam(teamId);
+    if (!team) {
+      return notFound();
+    }
+    return /* @__PURE__ */ jsx(TeamSettings, { fullPage, teamId });
+  }
   switch (path) {
     case availablePaths.signIn: {
       redirectIfNotHandler("signIn");
@@ -90,6 +102,14 @@ async function StackHandler({
       redirectIfNotHandler("teamInvitation");
       return /* @__PURE__ */ jsx(TeamInvitation, { searchParams, fullPage });
     }
+    case availablePaths.teamCreation: {
+      const project = await app.getProject();
+      if (!project.config.clientTeamCreationEnabled) {
+        return notFound();
+      }
+      redirectIfNotHandler("teamCreation");
+      return /* @__PURE__ */ jsx(TeamCreation, { fullPage });
+    }
     case availablePaths.error: {
       return /* @__PURE__ */ jsx(ErrorPage, { searchParams, fullPage });
     }

package/dist/esm/components-page/stack-handler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/stack-handler.tsx"],"sourcesContent":["import { getRelativePart } from \"@stackframe/stack-shared/dist/utils/urls\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport { AuthPage, StackServerApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport { AccountSettings } from \"./account-settings\";\nimport { EmailVerification } from \"./email-verification\";\nimport { ErrorPage } from \"./error-page\";\nimport { ForgotPassword } from \"./forgot-password\";\nimport { MagicLinkCallback } from \"./magic-link-callback\";\nimport { OAuthCallback } from \"./oauth-callback\";\nimport { PasswordReset } from \"./password-reset\";\nimport { SignOut } from \"./sign-out\";\nimport { TeamInvitation } from \"./team-invitation\";\n\nexport default async function StackHandler<HasTokenStore extends boolean>({\n  app,\n  params: { stack } = {},\n  searchParams = {},\n  fullPage = false,\n}: {\n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] },\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  if (!stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" fullPage={fullPage}>\n        <p>Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack].</p>\n      </MessageCard>\n    );\n  }\n\n  function redirectIfNotHandler(name: keyof HandlerUrls) {\n    const url = app.urls[name];\n    const handlerUrl = app.urls.handler;\n\n    if (url !== handlerUrl && url.startsWith(handlerUrl + \"/\")) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    const urlObj = new URL(url, \"http://example.com\");\n    for (const [key, value] of Object.entries(searchParams)) {\n      urlObj.searchParams.set(key, value);\n    }\n\n    redirect(getRelativePart(urlObj), RedirectType.replace);\n  };\n\n  const availablePaths = {\n    signIn: 'sign-in',\n    signUp: 'sign-up',\n    emailVerification: 'email-verification',\n    passwordReset: 'password-reset',\n    forgotPassword: 'forgot-password',\n    signOut: 'sign-out',\n    oauthCallback: 'oauth-callback',\n    accountSettings: 'account-settings',\n    magicLinkCallback: 'magic-link-callback',\n    teamInvitation: 'team-invitation',\n    error: 'error',\n  };\n\n  const path = stack.join('/');\n  switch (path) {\n    case availablePaths.signIn: {\n      redirectIfNotHandler('signIn');\n      return <AuthPage fullPage={fullPage} type='sign-in' automaticRedirect />;\n    }\n    case availablePaths.signUp: {\n      redirectIfNotHandler('signUp');\n      return <AuthPage fullPage={fullPage} type='sign-up' automaticRedirect />;\n    }\n    case availablePaths.emailVerification: {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.passwordReset: {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.forgotPassword: {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword fullPage={fullPage} />;\n    }\n    case availablePaths.signOut: {\n      redirectIfNotHandler('signOut');\n      return <SignOut fullPage={fullPage} />;\n    }\n    case availablePaths.oauthCallback: {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback fullPage={fullPage} />;\n    }\n    case availablePaths.accountSettings: {\n      redirectIfNotHandler('accountSettings');\n      return <AccountSettings fullPage={fullPage} />;\n    }\n    case availablePaths.magicLinkCallback: {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.teamInvitation: {\n      redirectIfNotHandler('teamInvitation');\n      return <TeamInvitation searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.error: {\n      return <ErrorPage searchParams={searchParams} fullPage={fullPage} />;\n    }\n    default: {\n      for (const [key, value] of Object.entries(availablePaths)) {\n        if (path === value.replaceAll('-', '')) {\n          redirect(`${app.urls.handler}/${value}`, RedirectType.replace);\n        }\n      }\n      return notFound();\n    }\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components-page/stack-handler.tsx"],"sourcesContent":["import { getRelativePart } from \"@stackframe/stack-shared/dist/utils/urls\";\nimport { RedirectType, notFound, redirect } from 'next/navigation';\nimport { AuthPage, StackServerApp } from \"..\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { HandlerUrls } from \"../lib/stack-app\";\nimport { AccountSettings } from \"./account-settings\";\nimport { EmailVerification } from \"./email-verification\";\nimport { ErrorPage } from \"./error-page\";\nimport { ForgotPassword } from \"./forgot-password\";\nimport { MagicLinkCallback } from \"./magic-link-callback\";\nimport { OAuthCallback } from \"./oauth-callback\";\nimport { PasswordReset } from \"./password-reset\";\nimport { SignOut } from \"./sign-out\";\nimport { TeamInvitation } from \"./team-invitation\";\nimport { TeamSettings } from \"./team-settings\";\nimport { TeamCreation } from \"./team-creation\";\n\nexport default async function StackHandler<HasTokenStore extends boolean>({\n  app,\n  params: { stack } = {},\n  searchParams = {},\n  fullPage = false,\n}: {\n  app: StackServerApp<HasTokenStore>,\n  params?: { stack?: string[] },\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  if (!stack) {\n    return (\n      <MessageCard title=\"Invalid Stack Handler Setup\" fullPage={fullPage}>\n        <p>Can't use Stack handler at this location. Make sure that the file is in a folder called [...stack].</p>\n      </MessageCard>\n    );\n  }\n\n  function redirectIfNotHandler(name: keyof HandlerUrls) {\n    const url = app.urls[name];\n    const handlerUrl = app.urls.handler;\n\n    if (url !== handlerUrl && url.startsWith(handlerUrl + \"/\")) {\n      // don't redirect if the url is a handler url\n      return;\n    }\n\n    const urlObj = new URL(url, \"http://example.com\");\n    for (const [key, value] of Object.entries(searchParams)) {\n      urlObj.searchParams.set(key, value);\n    }\n\n    redirect(getRelativePart(urlObj), RedirectType.replace);\n  };\n\n  const availablePaths = {\n    signIn: 'sign-in',\n    signUp: 'sign-up',\n    emailVerification: 'email-verification',\n    passwordReset: 'password-reset',\n    forgotPassword: 'forgot-password',\n    signOut: 'sign-out',\n    oauthCallback: 'oauth-callback',\n    accountSettings: 'account-settings',\n    magicLinkCallback: 'magic-link-callback',\n    teamInvitation: 'team-invitation',\n    teamCreation: 'team-creation',\n    error: 'error',\n  };\n\n  const path = stack.join('/');\n\n  if (/team-settings\\/[a-zA-Z0-9-]+/.test(path)) {\n    const teamId = path.split('/')[1];\n    const user = await app.getUser();\n    const team = await user?.getTeam(teamId);\n\n    if (!team) {\n      return notFound();\n    }\n\n    return <TeamSettings fullPage={fullPage} teamId={teamId} />;\n  }\n\n\n  switch (path) {\n    case availablePaths.signIn: {\n      redirectIfNotHandler('signIn');\n      return <AuthPage fullPage={fullPage} type='sign-in' automaticRedirect />;\n    }\n    case availablePaths.signUp: {\n      redirectIfNotHandler('signUp');\n      return <AuthPage fullPage={fullPage} type='sign-up' automaticRedirect />;\n    }\n    case availablePaths.emailVerification: {\n      redirectIfNotHandler('emailVerification');\n      return <EmailVerification searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.passwordReset: {\n      redirectIfNotHandler('passwordReset');\n      return <PasswordReset searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.forgotPassword: {\n      redirectIfNotHandler('forgotPassword');\n      return <ForgotPassword fullPage={fullPage} />;\n    }\n    case availablePaths.signOut: {\n      redirectIfNotHandler('signOut');\n      return <SignOut fullPage={fullPage} />;\n    }\n    case availablePaths.oauthCallback: {\n      redirectIfNotHandler('oauthCallback');\n      return <OAuthCallback fullPage={fullPage} />;\n    }\n    case availablePaths.accountSettings: {\n      redirectIfNotHandler('accountSettings');\n      return <AccountSettings fullPage={fullPage} />;\n    }\n    case availablePaths.magicLinkCallback: {\n      redirectIfNotHandler('magicLinkCallback');\n      return <MagicLinkCallback searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.teamInvitation: {\n      redirectIfNotHandler('teamInvitation');\n      return <TeamInvitation searchParams={searchParams} fullPage={fullPage} />;\n    }\n    case availablePaths.teamCreation: {\n      const project = await app.getProject();\n      if (!project.config.clientTeamCreationEnabled) {\n        return notFound();\n      }\n\n      redirectIfNotHandler('teamCreation');\n      return <TeamCreation fullPage={fullPage} />;\n    }\n    case availablePaths.error: {\n      return <ErrorPage searchParams={searchParams} fullPage={fullPage} />;\n    }\n    default: {\n      for (const [key, value] of Object.entries(availablePaths)) {\n        if (path === value.replaceAll('-', '')) {\n          redirect(`${app.urls.handler}/${value}`, RedirectType.replace);\n        }\n      }\n      return notFound();\n    }\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components-page/team-creation.js

@@ -0,0 +1,68 @@
+"use client";
+"use client";
+
+// src/components-page/team-creation.tsx
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { MessageCard, useStackApp, useUser } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { useRouter } from "next/navigation";
+import { jsx, jsxs } from "react/jsx-runtime";
+var schema = yupObject({
+  displayName: yupString().required("Please enter a team name")
+});
+function TeamCreation(props) {
+  const { register, handleSubmit, formState: { errors } } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const app = useStackApp();
+  const project = app.useProject();
+  const user = useUser({ or: "redirect" });
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  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 });
+      router.push(`${app.urls.handler}/team-settings/${team.id}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage: props.fullPage, children: /* @__PURE__ */ jsxs("div", { className: "stack-scope flex flex-col items-stretch", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-center mb-6", children: /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Create a Team" }) }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: "flex flex-col items-stretch stack-scope",
+        onSubmit: (e) => runAsynchronously(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        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 {
+  TeamCreation
+};
+//# sourceMappingURL=team-creation.js.map

package/dist/esm/components-page/team-creation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components-page/team-creation.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { MessageCard, useStackApp, useUser } from \"..\";\nimport { FormWarningText } from \"../components/elements/form-warning\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { useRouter } from \"next/navigation\";\n\nconst schema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation(props: { fullPage?: boolean }) {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\n  const router = useRouter();\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return <MessageCard title='Team creation is not enabled' />;\n  }\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n      router.push(`${app.urls.handler}/team-settings/${team.id}`);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <MaybeFullPage fullPage={props.fullPage}>\n      <div className='stack-scope flex flex-col items-stretch'>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            Create a Team\n          </Typography>\n        </div>\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronously(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <Label htmlFor=\"email\" className=\"mb-1\">Display name</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            {...register('displayName')}\n          />\n          <FormWarningText text={errors.displayName?.message?.toString()} />\n\n          <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n            Create\n          </Button>\n        </form>\n      </div>\n    </MaybeFullPage>\n  );\n}"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,iBAAiB;AACrC,SAAS,yBAAyB;AAClC,SAAS,QAAQ,OAAO,OAAO,kBAAkB;AACjD,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,aAAa,aAAa,eAAe;AAClD,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,iBAAiB;AAiBf,cAsBH,YAtBG;AAfX,IAAM,SAAS,UAAU;AAAA,EACvB,aAAa,UAAU,EAAE,SAAS,0BAA0B;AAC9D,CAAC;AAEM,SAAS,aAAa,OAA+B;AAC1D,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,EAAE,IAAI,QAAQ;AAAA,IAChE,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,SAAS,UAAU;AAEzB,MAAI,CAAC,QAAQ,OAAO,2BAA2B;AAC7C,WAAO,oBAAC,eAAY,OAAM,gCAA+B;AAAA,EAC3D;AAEA,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AAEf,QAAI;AACF,YAAM,OAAO,MAAM,KAAK,WAAW,EAAE,aAAa,KAAK,YAAY,CAAC;AACpE,aAAO,KAAK,GAAG,IAAI,KAAK,OAAO,kBAAkB,KAAK,EAAE,EAAE;AAAA,IAC5D,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE,oBAAC,iBAAc,UAAU,MAAM,UAC7B,+BAAC,SAAI,WAAU,2CACb;AAAA,wBAAC,SAAI,WAAU,oBACb,8BAAC,cAAW,MAAK,MAAK,2BAEtB,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,UAAU,OAAK,kBAAkB,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,QAC1D,YAAU;AAAA,QAEV;AAAA,8BAAC,SAAM,SAAQ,SAAQ,WAAU,QAAO,0BAAY;AAAA,UACpD;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,MAAK;AAAA,cACJ,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,UACA,oBAAC,mBAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,UAEhE,oBAAC,UAAO,MAAK,UAAS,WAAU,QAAO,SAAkB,oBAEzD;AAAA;AAAA;AAAA,IACF;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,115 @@
+"use client";
+"use client";
+
+// src/components-page/team-settings.tsx
+import { ActionDialog, Button, Container, EditableText, Input, Label, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { Contact, Info, Users } from "lucide-react";
+import { useEffect, useState } from "react";
+import { MessageCard, useStackApp, useUser } from "..";
+import { SidebarLayout } from "../components/elements/sidebar-layout";
+import { UserAvatar } from "../components/elements/user-avatar";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function TeamSettings(props) {
+  const user = useUser({ or: "redirect" });
+  const team = user.useTeam(props.teamId);
+  if (!team) {
+    return /* @__PURE__ */ jsx(MessageCard, { title: "Team not found" });
+  }
+  const inner = /* @__PURE__ */ jsx(
+    SidebarLayout,
+    {
+      items: [
+        { title: "My Profile", content: profileSettings({ team }), icon: Contact, description: `Your profile in the team "${team.displayName}"` },
+        { title: "Members", content: membersSettings({ team }), icon: Users },
+        { title: "Team Info", content: managementSettings({ team }), icon: Info }
+        // { title: 'Settings', content: userSettings({ team }), icon: Settings },
+      ].filter(({ content }) => content),
+      title: "Team Settings"
+    }
+  );
+  if (props.fullPage) {
+    return /* @__PURE__ */ jsx(Container, { size: 800, className: "stack-scope", children: inner });
+  } else {
+    return inner;
+  }
+}
+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: () => {
+    } })
+  ] }) });
+}
+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: [
+      "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 });
+        }
+      }
+    )
+  ] }) });
+}
+function membersSettings(props) {
+  const [removeModalOpen, setRemoveModalOpen] = useState(false);
+  const user = useUser({ or: "redirect" });
+  const removeMemberPermission = user.usePermission(props.team, "$remove_members");
+  const readMemberPermission = user.usePermission(props.team, "$read_members");
+  const inviteMemberPermission = user.usePermission(props.team, "$invite_members");
+  const [email, setEmail] = useState("");
+  const [invited, setInvited] = useState(false);
+  if (!readMemberPermission && !inviteMemberPermission) {
+    return null;
+  }
+  const users = props.team.useUsers();
+  useEffect(() => {
+    if (invited && email) {
+      setInvited(false);
+    }
+  }, [email]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8", children: [
+    inviteMemberPermission && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Label, { children: "Invite a user to team" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 md:flex-row", children: [
+        /* @__PURE__ */ jsx(Input, { placeholder: "Email", value: email, onChange: (e) => setEmail(e.target.value) }),
+        /* @__PURE__ */ jsx(Button, { onClick: async () => {
+          await props.team.inviteUser({ email });
+          setEmail("");
+          setInvited(true);
+        }, children: "Invite" })
+      ] }),
+      invited && /* @__PURE__ */ jsx(Typography, { type: "label", variant: "secondary", children: "User invited." })
+    ] }),
+    readMemberPermission && /* @__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)) })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  TeamSettings
+};
+//# sourceMappingURL=team-settings.js.map