@stackframe/stack 2.5.20 → 2.5.22

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { LucideIcon, XIcon } from 'lucide-react';\nimport { usePathname, useRouter } from 'next/navigation';\nimport React, { ReactNode } from 'react';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  subpath?: string,\n  icon?: LucideIcon,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, basePath: string }) {\n  const pathname = usePathname();\n  const selectedIndex = props.items.findIndex(item => item.subpath && (props.basePath + item.subpath === pathname));\n  const router = useRouter();\n  if (pathname !== props.basePath && selectedIndex === -1) {\n    router.push(props.basePath);\n  }\n\n  return (\n    <>\n      <div className=\"hidden sm:flex\">\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n      <div className=\"sm:hidden\">\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], basePath: string, selectedIndex: number }) {\n  const router = useRouter();\n\n  return props.items.map((item, index) => (\n    item.type === 'item' ?\n      <Button\n        key={index}\n        variant='ghost'\n        size='sm'\n        className={cn(\n          props.selectedIndex === index && \"bg-muted\",\n          \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2\",\n        )}\n        onClick={() => {\n          if (item.subpath) {\n            router.push(props.basePath + item.subpath);\n          }\n        }}\n      >\n        {item.icon && <item.icon className=\"mr-2 h-4 w-4\" />}\n        {item.title}\n      </Button> :\n      <Typography key={index}>\n        {item.title}\n      </Typography>\n  ));\n\n}\n\nfunction DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.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'>\n          <Typography type='h2' className=\"text-lg font-semibold text-zinc-800 dark:text-zinc-300\">{props.title}</Typography>\n        </div>}\n\n        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\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'>{selectedItem.title}</Typography>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const router = useRouter();\n\n  if (props.selectedIndex === -1) {\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        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\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'>{selectedItem.title}</Typography>\n            <Button variant='ghost' size='icon' onClick={() => {\n              router.push(props.basePath);\n            }}>\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/elements/sidebar-layout.tsx"],"sourcesContent":["'use client';\n\nimport { Button, Typography, cn } from '@stackframe/stack-ui';\nimport { LucideIcon, XIcon } from 'lucide-react';\nimport { usePathname, useRouter } from 'next/navigation';\nimport React, { ReactNode } from 'react';\n\nexport type SidebarItem = {\n  title: React.ReactNode,\n  type: 'item' | 'divider',\n  description?: React.ReactNode,\n  subpath?: string,\n  icon?: LucideIcon,\n  content?: React.ReactNode,\n  contentTitle?: React.ReactNode,\n}\n\nexport function SidebarLayout(props: { items: SidebarItem[], title?: ReactNode, basePath: string, className?: string }) {\n  const pathname = usePathname();\n  const selectedIndex = props.items.findIndex(item => item.subpath && (props.basePath + item.subpath === pathname));\n  const router = useRouter();\n  if (pathname !== props.basePath && selectedIndex === -1) {\n    router.push(props.basePath);\n  }\n\n  return (\n    <>\n      <div className={cn(\"hidden sm:flex stack-scope h-full\", props.className)}>\n        <DesktopLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n      <div className={cn(\"sm:hidden stack-scope h-full\", props.className)}>\n        <MobileLayout items={props.items} title={props.title} selectedIndex={selectedIndex} basePath={props.basePath} />\n      </div>\n    </>\n  );\n}\n\nfunction Items(props: { items: SidebarItem[], basePath: string, selectedIndex: number }) {\n  const router = useRouter();\n\n  return props.items.map((item, index) => (\n    item.type === 'item' ?\n      <Button\n        key={index}\n        variant='ghost'\n        size='sm'\n        className={cn(\n          props.selectedIndex === index && \"bg-muted\",\n          \"justify-start text-md text-zinc-800 dark:text-zinc-300 px-2\",\n        )}\n        onClick={() => {\n          if (item.subpath) {\n            router.push(props.basePath + item.subpath);\n          }\n        }}\n      >\n        {item.icon && <item.icon className=\"mr-2 h-4 w-4\" />}\n        {item.title}\n      </Button> :\n      <Typography key={index}>\n        {item.title}\n      </Typography>\n  ));\n\n}\n\nfunction DesktopLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex === -1 ? 0 : props.selectedIndex];\n\n  return (\n    <div className=\"stack-scope flex w-full h-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        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\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'>{selectedItem.title}</Typography>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MobileLayout(props: { items: SidebarItem[], title?: ReactNode, selectedIndex: number, basePath: string }) {\n  const selectedItem = props.items[props.selectedIndex];\n  const router = useRouter();\n\n  if (props.selectedIndex === -1) {\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        <Items items={props.items} basePath={props.basePath} selectedIndex={props.selectedIndex} />\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'>{selectedItem.title}</Typography>\n            <Button variant='ghost' size='icon' onClick={() => {\n              router.push(props.basePath);\n            }}>\n              <XIcon className='h-5 w-5' />\n            </Button>\n          </div>\n          {selectedItem.description && <Typography variant='secondary' type='label'>{selectedItem.description}</Typography>}\n        </div>\n        <div className='flex-1'>\n          {selectedItem.content}\n        </div>\n      </div>\n    );\n  }\n}"],"mappings":"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","names":[]}

package/dist/esm/components/oauth-button.js

@@ -35,6 +35,9 @@ function MicrosoftIcon({ iconSize: iconSize2 }) {
 function SpotifyIcon({ iconSize: iconSize2 }) {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 496 512", children: /* @__PURE__ */ jsx("path", { fill: "#ffffff", d: "M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z" }) });
 }
+function DiscordIcon({ iconSize: iconSize2 }) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: iconSize2, height: iconSize2, viewBox: "0 0 127.14 96.36", children: /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z" }) });
+}
 var changeColor = (c, value) => {
   if (c.isLight()) {
     value = -value;
@@ -96,6 +99,15 @@ function OAuthButton({
       };
       break;
     }
+    case "discord": {
+      style = {
+        backgroundColor: "#5865F2",
+        textColor: "#fff",
+        name: "Discord",
+        icon: /* @__PURE__ */ jsx(DiscordIcon, { iconSize })
+      };
+      break;
+    }
     default: {
       style = {
         name: provider,

package/dist/esm/components/oauth-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@stackframe/stack-ui';\nimport { useStackApp } from '..';\nimport Color from 'color';\nimport { useId } from 'react';\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n      <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n      <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n      <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n      <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n      <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n    </svg>\n  );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n      <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n    </svg>\n  );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n    </svg>\n  );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n      <title>{\"MS-SymbolLockup\"}</title>\n      <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n      <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n      <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n      <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n    </svg>\n  );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n    </svg>\n  );\n}\n\nconst changeColor = (c: Color, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <GoogleIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <GitHubIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <FacebookIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <MicrosoftIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <SpotifyIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <Button\n        onClick={() => stackApp.signInWithOAuth(provider)}\n        className={`stack-oauth-button-${styleId}`}\n      >\n        <div className='flex items-center w-full gap-4'>\n          {style.icon}\n          <span className='flex-1'>\n            {type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}\n          </span>\n        </div>\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":["iconSize"]}
+{"version":3,"sources":["../../../src/components/oauth-button.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@stackframe/stack-ui';\nimport { useStackApp } from '..';\nimport Color from 'color';\nimport { useId } from 'react';\n\nconst iconSize = 22;\n\nfunction GoogleIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 24 24\">\n      <path fill=\"#4285F4\" d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"/>\n      <path fill=\"#34A853\" d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"/>\n      <path fill=\"#FBBC05\" d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"/>\n      <path fill=\"#EA4335\" d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"/>\n      <path fill=\"none\" d=\"M1 1h22v22H1z\" />\n    </svg>\n  );\n}\n\nfunction FacebookIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 512 512\">\n      <path fill='#FFFFFF' d=\"M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z\"/>\n    </svg>\n  );\n}\n\nfunction GitHubIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#FFFFFF' d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z\"/>\n    </svg>\n  );\n}\n\nfunction MicrosoftIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 21 21\">\n      <title>{\"MS-SymbolLockup\"}</title>\n      <path fill=\"#f25022\" d=\"M1 1h9v9H1z\" />\n      <path fill=\"#00a4ef\" d=\"M1 11h9v9H1z\" />\n      <path fill=\"#7fba00\" d=\"M11 1h9v9h-9z\" />\n      <path fill=\"#ffb900\" d=\"M11 11h9v9h-9z\" />\n    </svg>\n  );\n}\n\nfunction SpotifyIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 496 512\">\n      <path fill='#ffffff' d=\"M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z\"/>\n    </svg>\n  );\n}\nfunction DiscordIcon({ iconSize } : { iconSize: number} ) {\n  return (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width={iconSize} height={iconSize} viewBox=\"0 0 127.14 96.36\">\n      <path fill=\"#fff\" d=\"M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z\"/>\n    </svg>\n  );\n}\n\n\nconst changeColor = (c: Color, value: number) => {\n  if (c.isLight()) {\n    value = -value;\n  }\n  return c.hsl(c.hue(), c.saturationl(), c.lightness() + value).toString();\n};\n\nexport function OAuthButton({\n  provider,\n  type,\n}: {\n  provider: string,\n  type: 'sign-in' | 'sign-up',\n}) {\n  const stackApp = useStackApp();\n  const styleId = useId().replaceAll(':', '-');\n\n  let style : {\n    backgroundColor?: string,\n    textColor?: string,\n    name: string,\n    icon: JSX.Element | null,\n    border?: string,\n  };\n  switch (provider) {\n    case 'google': {\n      style = {\n        backgroundColor: '#fff',\n        textColor: '#000',\n        name: 'Google',\n        border: '1px solid #ddd',\n        icon: <GoogleIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'github': {\n      style = {\n        backgroundColor: '#111',\n        textColor: '#fff',\n        border: '1px solid #333',\n        name: 'GitHub',\n        icon: <GitHubIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'facebook': {\n      style = {\n        backgroundColor: '#1877F2',\n        textColor: '#fff',\n        name: 'Facebook',\n        icon: <FacebookIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'microsoft': {\n      style = {\n        backgroundColor: '#2f2f2f',\n        textColor: '#fff',\n        name: 'Microsoft',\n        icon: <MicrosoftIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'spotify': {\n      style = {\n        backgroundColor: '#1DB954',\n        textColor: '#fff',\n        name: 'Spotify',\n        icon: <SpotifyIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    case 'discord': {\n      style = {\n        backgroundColor: '#5865F2',\n        textColor: '#fff',\n        name: 'Discord',\n        icon: <DiscordIcon iconSize={iconSize} />,\n      };\n      break;\n    }\n    default: {\n      style = {\n        name: provider,\n        icon: null,\n      };\n    }\n  }\n\n  const styleSheet = `\n    .stack-oauth-button-${styleId} {\n      background-color: ${style.backgroundColor} !important;\n      color: ${style.textColor} !important;\n      border: ${style.border} !important;\n    }\n    .stack-oauth-button-${styleId}:hover {\n      background-color: ${changeColor(Color(style.backgroundColor), 10)} !important;\n    }\n  `;\n\n  return (\n    <>\n      <style>{styleSheet}</style>\n      <Button\n        onClick={() => stackApp.signInWithOAuth(provider)}\n        className={`stack-oauth-button-${styleId}`}\n      >\n        <div className='flex items-center w-full gap-4'>\n          {style.icon}\n          <span className='flex-1'>\n            {type === 'sign-up' ? 'Sign up with ' : 'Sign in with '}{style.name}\n          </span>\n        </div>\n      </Button>\n    </>\n  );\n}\n"],"mappings":"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","names":["iconSize"]}

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

@@ -9,8 +9,8 @@ import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-field
 import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
 import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
-import { Button, 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 { Button, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from "@stackframe/stack-ui";
+import { CirclePlus, Contact, LogOut, ShieldCheck } from "lucide-react";
 import { TOTPController, createTOTPKeyURI } from "oslo/otp";
 import * as QRCode from "qrcode";
 import { useEffect, useState } from "react";
@@ -26,7 +26,7 @@ function AccountSettings({ fullPage = false }) {
   const user = useUser({ or: "redirect" });
   const teams = user.useTeams();
   const project = useStackApp().useProject();
-  const inner = /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     SidebarLayout,
     {
       items: [
@@ -49,10 +49,10 @@ function AccountSettings({ fullPage = false }) {
           ] })
         },
         {
-          title: "Settings",
-          subpath: "/settings",
+          title: "Sign Out",
+          subpath: "/sign-out",
           type: "item",
-          icon: Settings,
+          icon: LogOut,
           content: /* @__PURE__ */ jsx(SignOutSection, {})
         },
         ...teams.length > 0 || project.config.clientTeamCreationEnabled ? [{
@@ -86,11 +86,6 @@ function AccountSettings({ fullPage = false }) {
       basePath: "/handler/account-settings"
     }
   );
-  if (fullPage) {
-    return /* @__PURE__ */ jsx(Container, { size: 1e3, className: "stack-scope", children: inner });
-  } else {
-    return inner;
-  }
 }
 function ProfileSection() {
   const user = useUser({ or: "redirect" });
@@ -104,20 +99,25 @@ function ProfileSection() {
 function EmailVerificationSection() {
   const user = useUser({ or: "redirect" });
   const [emailSent, setEmailSent] = useState(false);
+  if (!user.primaryEmail) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(Label, { children: "Email Verification" }),
-    user.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified." }) : /* @__PURE__ */ 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"
-      }
-    ) })
+    user.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified." }),
+      /* @__PURE__ */ jsx("div", { className: "flex mt-4", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: emailSent,
+          onClick: async () => {
+            await user.sendVerificationEmail();
+            setEmailSent(true);
+          },
+          children: emailSent ? "Email sent!" : "Send Verification Email"
+        }
+      ) })
+    ] })
   ] }) });
 }
 var passwordSchema = yupObject({

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 { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, Container, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';\nimport { CirclePlus, Contact, Settings, ShieldCheck } from 'lucide-react';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { CurrentUser, MessageCard, Project, Team, useStackApp, useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { TeamIcon } from '../components/team-icon';\n\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser({ or: 'redirect' });\n  const teams = user.useTeams();\n  const project = useStackApp().useProject();\n\n  const inner = <SidebarLayout\n    items={([\n      {\n        title: 'My Profile',\n        type: 'item',\n        subpath: '/profile',\n        icon: Contact,\n        content: <ProfileSection/>,\n      },\n      {\n        title: 'Security',\n        type: 'item',\n        icon: ShieldCheck,\n        subpath: '/security',\n        content: (\n          <div className='flex flex-col gap-8'>\n            <EmailVerificationSection />\n            <PasswordSection />\n            <MfaSection />\n          </div>\n        ),\n      },\n      {\n        title: 'Settings',\n        subpath: '/settings',\n        type: 'item',\n        icon: Settings,\n        content: <SignOutSection />,\n      },\n      ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n        title: 'Teams',\n        type: 'divider',\n      }] as const : [],\n      ...teams.map(team => ({\n        title: <div className='flex gap-2 items-center'>\n          <TeamIcon team={team}/>\n          {team.displayName}\n        </div>,\n        type: 'item',\n        subpath: `/teams/${team.id}`,\n        content: (\n          <div className=\"flex flex-col gap-8\">\n            <ProfileSettings team={team}/>\n            <ManagementSettings team={team}/>\n            <MemberInvitation team={team}/>\n            <MembersSettings team={team}/>\n            <UserSettings team={team}/>\n          </div>\n        ),\n      } as const)),\n      ...project.config.clientTeamCreationEnabled ? [{\n        title: 'Create a team',\n        icon: CirclePlus,\n        type: 'item',\n        subpath: '/team-creation',\n        content: <TeamCreation />,\n      }] as const : [],\n    ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n    title='Account Settings'\n    basePath='/handler/account-settings'\n  />;\n\n  if (fullPage) {\n    return (\n      <Container size={1000} className='stack-scope'>\n        {inner}\n      </Container>\n    );\n  } else {\n    return inner;\n  }\n}\n\nfunction ProfileSection() {\n  const user = useUser({ or: 'redirect' });\n\n  return (\n    <div>\n      <div>\n        <Label>Display name</Label>\n        <EditableText value={user.displayName || ''} onSave={async (newDisplayName) => {\n          await user.update({ displayName: newDisplayName });\n        }}/>\n      </div>\n    </div>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser({ or: 'redirect' });\n  const [emailSent, setEmailSent] = useState(false);\n\n  return (\n    <>\n      <div>\n        <Label>Email Verification</Label>\n        {user.primaryEmailVerified ? (\n          <Typography variant='success'>Your email has been verified.</Typography>\n        ) : (\n          <Typography variant='destructive'>Your email has not been verified.</Typography>\n        )}\n        <div className='flex mt-4'>\n          <Button\n            disabled={emailSent}\n            onClick={async () => {\n              await user.sendVerificationEmail();\n            setEmailSent(true);\n            }}\n          >\n            {emailSent ? 'Email sent!' : 'Send Verification Email'}\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n}\n\nconst passwordSchema = yupObject({\n  oldPassword: yupString().required('Please enter your old password'),\n  newPassword: yupString().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], 'Passwords do not match').required('Please repeat your password')\n});\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [changingPassword, setChangingPassword] = useState(false);\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n  const [alreadyReset, setAlreadyReset] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = await user.updatePassword({ oldPassword, newPassword });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: 'Incorrect password' });\n      } else {\n        reset();\n        setAlreadyReset(true);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Change password</Label>\n      <div>\n        {\n          alreadyReset ?\n            <Typography variant='success'>Password changed successfully!</Typography> :\n            !changingPassword ?\n              <Button\n                variant='secondary'\n                onClick={async () => {\n                  setChangingPassword(true);\n                }}\n              >\n                Change Password\n              </Button> :\n              <form\n                onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n                noValidate\n              >\n                <Label htmlFor=\"old-password\" className=\"mb-1\">Old password</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  {...register('oldPassword')}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n\n                <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">Password</Label>\n                <PasswordInput\n                  id=\"new-password\"\n                  {...registerPassword}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPassword.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n                <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat password</Label>\n                <PasswordInput\n                  id=\"repeat-password\"\n                  {...registerPasswordRepeat}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPasswordRepeat.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n                <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n                  Change Password\n                </Button>\n              </form>\n        }\n      </div>\n    </div>\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    <div>\n      <div>\n        <Label>Multi-factor Authentication</Label>\n\n        <div>\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\n          <Button\n            className=\"mt-4\"\n            variant={isEnabled ? 'secondary' : 'default'}\n            onClick={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 ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n          </Button>\n        </div>\n      </div>\n    </div>\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    <div className='flex flex-col gap-2'>\n      <div>\n        <Button\n          variant='secondary'\n          onClick={() => user.signOut()}\n        >\n          Sign Out\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction UserSettings(props: { team: Team }) {\n  const app = useStackApp();\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        { !leaving ?\n          <Button\n            variant='secondary'\n            onClick={async () => setLeaving(true)}\n          >\n          Leave team\n          </Button> :\n          <div className=''>\n            <Typography variant='destructive'>Are you sure you want to leave the team?</Typography>\n            <div className='flex gap-2'>\n              <Button variant='destructive' onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}>\n                Leave\n              </Button>\n              <Button variant='secondary' onClick={() => setLeaving(false)}>\n                Cancel\n              </Button>\n            </div>\n          </div>}\n      </div>\n    </div>\n  );\n}\n\nfunction ManagementSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <>\n      <div>\n        <Label>Team display name</Label>\n        <EditableText\n          value={props.team.displayName}\n          onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n        />\n      </div>\n    </>\n  );\n}\n\nfunction ProfileSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const profile = user.useTeamProfile(props.team);\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"flex flex-col\">\n        <Label className=\"flex gap-2\">User display name <SimpleTooltip tooltip=\"This overwrites your user display name in the account setting\" type='info'/></Label>\n        <EditableText\n          value={profile.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await profile.update({ displayName: newDisplayName });\n          }}/>\n      </div>\n    </div>\n  );\n}\n\nconst invitationSchema = yupObject({\n  email: yupString().email().required('Please enter an email address'),\n});\n\nfunction MemberInvitation(props: { team: Team }) {\n  const project = useStackApp().useProject();\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return null;\n  }\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <div>\n      <Label>Invite a user to team</Label>\n      <form\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <div className=\"flex flex-col gap-4 md:flex-row\">\n          <div>\n            <Input\n              placeholder=\"Email\"\n              {...register('email')}\n            />\n          </div>\n          <Button type=\"submit\" loading={loading}>\n            Invite User\n          </Button>\n        </div>\n        <FormWarningText text={errors.email?.message?.toString()} />\n        {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n      </form>\n    </div>\n  );\n}\n\n\nfunction MembersSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!readMemberPermission && !inviteMemberPermission) {\n    return null;\n  }\n\n  const users = props.team.useUsers();\n\n  if (!readMemberPermission) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Members</Label>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">User</TableHead>\n            <TableHead className=\"w-[200px]\">Name</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {users.map(({ id, teamProfile }, i) => (\n            <TableRow key={id}>\n              <TableCell>\n                <UserAvatar user={teamProfile}/>\n              </TableCell>\n              <TableCell>\n                <Typography>{teamProfile.displayName}</Typography>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\nconst teamCreationSchema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation() {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\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 teamCreationSchema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div className='stack-scope flex flex-col items-stretch'>\n      <div className=\"mb-6\">\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <div className=\"flex items-end gap-4\">\n            <div>\n              <Label htmlFor=\"email\" className=\"mb-1\">Display name</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                {...register('displayName')}\n              />\n            </div>\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n\n            <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n              Create\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components-page/account-settings.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { useAsyncCallback } from '@stackframe/stack-shared/dist/hooks/use-async-callback';\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';\nimport { throwErr } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';\nimport { Button, EditableText, Input, Label, PasswordInput, SimpleTooltip, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';\nimport { CirclePlus, Contact, LogOut, ShieldCheck } from 'lucide-react';\nimport { TOTPController, createTOTPKeyURI } from \"oslo/otp\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from 'react';\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { CurrentUser, MessageCard, Project, Team, useStackApp, useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { SidebarLayout } from '../components/elements/sidebar-layout';\nimport { UserAvatar } from '../components/elements/user-avatar';\nimport { TeamIcon } from '../components/team-icon';\n\n\nexport function AccountSettings({ fullPage=false }: { fullPage?: boolean }) {\n  const user = useUser({ or: 'redirect' });\n  const teams = user.useTeams();\n  const project = useStackApp().useProject();\n\n  return (\n    <SidebarLayout\n      items={([\n        {\n          title: 'My Profile',\n          type: 'item',\n          subpath: '/profile',\n          icon: Contact,\n          content: <ProfileSection/>,\n        },\n        {\n          title: 'Security',\n          type: 'item',\n          icon: ShieldCheck,\n          subpath: '/security',\n          content: (\n            <div className='flex flex-col gap-8'>\n              <EmailVerificationSection />\n              <PasswordSection />\n              <MfaSection />\n            </div>\n          ),\n        },\n        {\n          title: 'Sign Out',\n          subpath: '/sign-out',\n          type: 'item',\n          icon: LogOut,\n          content: <SignOutSection />,\n        },\n        ...(teams.length > 0 || project.config.clientTeamCreationEnabled) ? [{\n          title: 'Teams',\n          type: 'divider',\n        }] as const : [],\n        ...teams.map(team => ({\n          title: <div className='flex gap-2 items-center'>\n            <TeamIcon team={team}/>\n            {team.displayName}\n          </div>,\n          type: 'item',\n          subpath: `/teams/${team.id}`,\n          content: (\n            <div className=\"flex flex-col gap-8\">\n              <ProfileSettings team={team}/>\n              <ManagementSettings team={team}/>\n              <MemberInvitation team={team}/>\n              <MembersSettings team={team}/>\n              <UserSettings team={team}/>\n            </div>\n          ),\n        } as const)),\n        ...project.config.clientTeamCreationEnabled ? [{\n          title: 'Create a team',\n          icon: CirclePlus,\n          type: 'item',\n          subpath: '/team-creation',\n          content: <TeamCreation />,\n        }] as const : [],\n      ] as const).filter((p) => p.type === 'divider' || (p as any).content )}\n      title='Account Settings'\n      basePath='/handler/account-settings'\n    />\n  );\n}\n\nfunction ProfileSection() {\n  const user = useUser({ or: 'redirect' });\n\n  return (\n    <div>\n      <div>\n        <Label>Display name</Label>\n        <EditableText value={user.displayName || ''} onSave={async (newDisplayName) => {\n          await user.update({ displayName: newDisplayName });\n        }}/>\n      </div>\n    </div>\n  );\n}\n\nfunction EmailVerificationSection() {\n  const user = useUser({ or: 'redirect' });\n  const [emailSent, setEmailSent] = useState(false);\n\n  if (!user.primaryEmail) {\n    return null;\n  }\n\n  return (\n    <>\n      <div>\n        <Label>Email Verification</Label>\n        {user.primaryEmailVerified ? (\n          <Typography variant='success'>Your email has been verified.</Typography>\n        ) : (\n          <>\n            <Typography variant='destructive'>Your email has not been verified.</Typography>\n            <div className='flex mt-4'>\n              <Button\n                disabled={emailSent}\n                onClick={async () => {\n                  await user.sendVerificationEmail();\n                  setEmailSent(true);\n                }}\n              >\n                {emailSent ? 'Email sent!' : 'Send Verification Email'}\n              </Button>\n            </div>\n          </>\n        )}\n\n      </div>\n    </>\n  );\n}\n\nconst passwordSchema = yupObject({\n  oldPassword: yupString().required('Please enter your old password'),\n  newPassword: yupString().required('Please enter your password').test({\n    name: 'is-valid-password',\n    test: (value, ctx) => {\n      const error = getPasswordError(value);\n      if (error) {\n        return ctx.createError({ message: error.message });\n      } else {\n        return true;\n      }\n    }\n  }),\n  newPasswordRepeat: yupString().nullable().oneOf([yup.ref('newPassword'), \"\", null], 'Passwords do not match').required('Please repeat your password')\n});\n\nfunction PasswordSection() {\n  const user = useUser({ or: \"throw\" });\n  const [changingPassword, setChangingPassword] = useState(false);\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n  const [alreadyReset, setAlreadyReset] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = await user.updatePassword({ oldPassword, newPassword });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: 'Incorrect password' });\n      } else {\n        reset();\n        setAlreadyReset(true);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!user.hasPassword) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Change password</Label>\n      <div>\n        {\n          alreadyReset ?\n            <Typography variant='success'>Password changed successfully!</Typography> :\n            !changingPassword ?\n              <Button\n                variant='secondary'\n                onClick={async () => {\n                  setChangingPassword(true);\n                }}\n              >\n                Change Password\n              </Button> :\n              <form\n                onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n                noValidate\n              >\n                <Label htmlFor=\"old-password\" className=\"mb-1\">Old password</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  {...register('oldPassword')}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n\n                <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">Password</Label>\n                <PasswordInput\n                  id=\"new-password\"\n                  {...registerPassword}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPassword.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPassword?.message?.toString()} />\n\n                <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat password</Label>\n                <PasswordInput\n                  id=\"repeat-password\"\n                  {...registerPasswordRepeat}\n                  onChange={(e) => {\n                    clearErrors('newPassword');\n                    clearErrors('newPasswordRepeat');\n                    runAsynchronously(registerPasswordRepeat.onChange(e));\n                  }}\n                />\n                <FormWarningText text={errors.newPasswordRepeat?.message?.toString()} />\n\n                <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n                  Change Password\n                </Button>\n              </form>\n        }\n      </div>\n    </div>\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    <div>\n      <div>\n        <Label>Multi-factor Authentication</Label>\n\n        <div>\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\n          <Button\n            className=\"mt-4\"\n            variant={isEnabled ? 'secondary' : 'default'}\n            onClick={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 ? 'Disable' : (generatedSecret ? 'Cancel' : 'Enable')}\n          </Button>\n        </div>\n      </div>\n    </div>\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    <div className='flex flex-col gap-2'>\n      <div>\n        <Button\n          variant='secondary'\n          onClick={() => user.signOut()}\n        >\n          Sign Out\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction UserSettings(props: { team: Team }) {\n  const app = useStackApp();\n  const user = useUser({ or: 'redirect' });\n  const [leaving, setLeaving] = useState(false);\n\n  return (\n    <div className='flex flex-col gap-2'>\n      <div>\n        { !leaving ?\n          <Button\n            variant='secondary'\n            onClick={async () => setLeaving(true)}\n          >\n          Leave team\n          </Button> :\n          <div className=''>\n            <Typography variant='destructive'>Are you sure you want to leave the team?</Typography>\n            <div className='flex gap-2'>\n              <Button variant='destructive' onClick={async () => {\n                await user.leaveTeam(props.team);\n                window.location.reload();\n              }}>\n                Leave\n              </Button>\n              <Button variant='secondary' onClick={() => setLeaving(false)}>\n                Cancel\n              </Button>\n            </div>\n          </div>}\n      </div>\n    </div>\n  );\n}\n\nfunction ManagementSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const updateTeamPermission = user.usePermission(props.team, '$update_team');\n\n  if (!updateTeamPermission) {\n    return null;\n  }\n\n  return (\n    <>\n      <div>\n        <Label>Team display name</Label>\n        <EditableText\n          value={props.team.displayName}\n          onSave={async (newDisplayName) => await props.team.update({ displayName: newDisplayName })}\n        />\n      </div>\n    </>\n  );\n}\n\nfunction ProfileSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const profile = user.useTeamProfile(props.team);\n\n  return (\n    <div className=\"flex flex-col\">\n      <div className=\"flex flex-col\">\n        <Label className=\"flex gap-2\">User display name <SimpleTooltip tooltip=\"This overwrites your user display name in the account setting\" type='info'/></Label>\n        <EditableText\n          value={profile.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await profile.update({ displayName: newDisplayName });\n          }}/>\n      </div>\n    </div>\n  );\n}\n\nconst invitationSchema = yupObject({\n  email: yupString().email().required('Please enter an email address'),\n});\n\nfunction MemberInvitation(props: { team: Team }) {\n  const project = useStackApp().useProject();\n\n  if (!project.config.clientTeamCreationEnabled) {\n    return null;\n  }\n\n  const { register, handleSubmit, formState: { errors }, watch } = useForm({\n    resolver: yupResolver(invitationSchema)\n  });\n  const [loading, setLoading] = useState(false);\n  const [invitedEmail, setInvitedEmail] = useState<string | null>(null);\n\n  const onSubmit = async (data: yup.InferType<typeof invitationSchema>) => {\n    setLoading(true);\n\n    try {\n      await props.team.inviteUser({ email: data.email });\n      setInvitedEmail(data.email);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    setInvitedEmail(null);\n  }, [watch('email')]);\n\n  return (\n    <div>\n      <Label>Invite a user to team</Label>\n      <form\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <div className=\"flex flex-col gap-4 md:flex-row\">\n          <div>\n            <Input\n              placeholder=\"Email\"\n              {...register('email')}\n            />\n          </div>\n          <Button type=\"submit\" loading={loading}>\n            Invite User\n          </Button>\n        </div>\n        <FormWarningText text={errors.email?.message?.toString()} />\n        {invitedEmail && <Typography type='label' variant='secondary'>Invited {invitedEmail}</Typography>}\n      </form>\n    </div>\n  );\n}\n\n\nfunction MembersSettings(props: { team: Team }) {\n  const user = useUser({ or: 'redirect' });\n  const readMemberPermission = user.usePermission(props.team, '$read_members');\n  const inviteMemberPermission = user.usePermission(props.team, '$invite_members');\n\n  if (!readMemberPermission && !inviteMemberPermission) {\n    return null;\n  }\n\n  const users = props.team.useUsers();\n\n  if (!readMemberPermission) {\n    return null;\n  }\n\n  return (\n    <div>\n      <Label>Members</Label>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-[100px]\">User</TableHead>\n            <TableHead className=\"w-[200px]\">Name</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {users.map(({ id, teamProfile }, i) => (\n            <TableRow key={id}>\n              <TableCell>\n                <UserAvatar user={teamProfile}/>\n              </TableCell>\n              <TableCell>\n                <Typography>{teamProfile.displayName}</Typography>\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n\nconst teamCreationSchema = yupObject({\n  displayName: yupString().required('Please enter a team name'),\n});\n\nexport function TeamCreation() {\n  const { register, handleSubmit, formState: { errors } } = useForm({\n    resolver: yupResolver(teamCreationSchema)\n  });\n  const app = useStackApp();\n  const project = app.useProject();\n  const user = useUser({ or: 'redirect' });\n  const [loading, setLoading] = useState(false);\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 teamCreationSchema>) => {\n    setLoading(true);\n\n    try {\n      const team = await user.createTeam({ displayName: data.displayName });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <div className='stack-scope flex flex-col items-stretch'>\n      <div className=\"mb-6\">\n        <form\n          className=\"flex flex-col items-stretch stack-scope\"\n          onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n          noValidate\n        >\n          <div className=\"flex items-end gap-4\">\n            <div>\n              <Label htmlFor=\"email\" className=\"mb-1\">Display name</Label>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                {...register('displayName')}\n              />\n            </div>\n            <FormWarningText text={errors.displayName?.message?.toString()} />\n\n            <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n              Create\n            </Button>\n          </div>\n        </form>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":[]}

package/dist/esm/lib/stack-app.js

@@ -24,7 +24,7 @@ import { constructRedirectUrl } from "../utils/url";
 import { addNewOAuthProviderOrScope, callOAuthCallback, signInWithOAuth } from "./auth";
 import { deleteCookie, getCookie, setOrDeleteCookie } from "./cookie";
 var NextNavigation = scrambleDuringCompileTime(NextNavigationUnscrambled);
-var clientVersion = "js @stackframe/stack@2.5.20";
+var clientVersion = "js @stackframe/stack@2.5.22";
 function getUrls(partial) {
   const handler = partial.handler ?? "/handler";
   const home = partial.home ?? "/";
@@ -586,6 +586,7 @@ var _StackClientAppImpl = class __StackClientAppImpl {
       profileImageUrl: crud.profile_image_url,
       signedUpAt: new Date(crud.signed_up_at_millis),
       clientMetadata: crud.client_metadata,
+      clientReadOnlyMetadata: crud.client_read_only_metadata,
       hasPassword: crud.has_password,
       emailAuthEnabled: crud.auth_with_email,
       oauthProviders: crud.oauth_providers,
@@ -1316,6 +1317,9 @@ var _StackServerAppImpl = class extends _StackClientAppImpl {
       async setClientMetadata(metadata) {
         return await this.update({ clientMetadata: metadata });
       },
+      async setClientReadOnlyMetadata(metadata) {
+        return await this.update({ clientReadOnlyMetadata: metadata });
+      },
       async setServerMetadata(metadata) {
         return await this.update({ serverMetadata: metadata });
       },
@@ -1832,6 +1836,7 @@ function serverUserUpdateOptionsToCrud(options) {
     display_name: options.displayName,
     primary_email: options.primaryEmail,
     client_metadata: options.clientMetadata,
+    client_read_only_metadata: options.clientReadOnlyMetadata,
     server_metadata: options.serverMetadata,
     selected_team_id: options.selectedTeamId,
     primary_email_auth_enabled: options.primaryEmailAuthEnabled,