@stackframe/stack 2.5.17 → 2.5.19

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

@@ -2,14 +2,44 @@
 "use client";
 
 // src/components-page/account-settings.tsx
-import { 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 { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Card, CardContent, CardFooter, CardHeader, Container, Input, Label, PasswordInput, Typography } from "@stackframe/stack-ui";
+import { Contact, Settings, ShieldCheck } from "lucide-react";
+import { 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: [
@@ -83,12 +113,12 @@ function EmailVerificationSection() {
         await user?.sendVerificationEmail();
         setEmailSent(true);
       },
-      children: user?.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified" }) : /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified" })
+      children: user?.primaryEmailVerified ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Your email has been verified." }) : /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Your email has not been verified." })
     }
   );
 }
 function PasswordSection() {
-  const user = useUser();
+  const user = useUser({ or: "throw" });
   const [oldPassword, setOldPassword] = useState("");
   const [oldPasswordError, setOldPasswordError] = useState("");
   const [newPassword, setNewPassword] = useState("");
@@ -96,7 +126,7 @@ function PasswordSection() {
   const [repeatNewPassword, setRepeatNewPassword] = useState("");
   const [repeatNewPasswordError, setRepeatNewPasswordError] = useState("");
   const [passwordChanged, setPasswordChanged] = useState(false);
-  if (!user?.hasPassword) {
+  if (!user.hasPassword) {
     return null;
   }
   return /* @__PURE__ */ jsxs(
@@ -193,8 +223,81 @@ function PasswordSection() {
     }
   );
 }
+function MfaSection() {
+  const project = useStackApp().useProject();
+  const user = useUser({ or: "throw" });
+  const [generatedSecret, setGeneratedSecret] = useState(null);
+  const [qrCodeUrl, setQrCodeUrl] = useState(null);
+  const [mfaCode, setMfaCode] = useState("");
+  const [isMaybeWrong, setIsMaybeWrong] = useState(false);
+  const isEnabled = user.isMultiFactorRequired;
+  const [handleSubmit, isLoading] = useAsyncCallback(async () => {
+    await user.update({
+      totpMultiFactorSecret: generatedSecret
+    });
+    setGeneratedSecret(null);
+    setQrCodeUrl(null);
+    setMfaCode("");
+  }, [generatedSecret, user]);
+  useEffect(() => {
+    setIsMaybeWrong(false);
+    runAsynchronouslyWithAlert(async () => {
+      if (generatedSecret && await new TOTPController().verify(mfaCode, generatedSecret)) {
+        await handleSubmit();
+      }
+      setIsMaybeWrong(true);
+    });
+  }, [mfaCode, generatedSecret, handleSubmit]);
+  return /* @__PURE__ */ jsx(
+    SettingSection,
+    {
+      title: "Multi-factor Authentication",
+      desc: "Secure your account with an additional layer of security.",
+      buttonVariant: "secondary",
+      buttonText: isEnabled ? "Disable" : generatedSecret ? "Cancel" : "Enable",
+      onButtonClick: async () => {
+        if (isEnabled) {
+          await user.update({
+            totpMultiFactorSecret: null
+          });
+        } else if (!generatedSecret) {
+          const secret = generateRandomValues(new Uint8Array(20));
+          setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+          setGeneratedSecret(secret);
+        } else {
+          setGeneratedSecret(null);
+          setQrCodeUrl(null);
+          setMfaCode("");
+        }
+      },
+      children: isEnabled ? /* @__PURE__ */ jsx(Typography, { variant: "success", children: "Multi-factor authentication is currently enabled." }) : generatedSecret ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 items-center", children: [
+        /* @__PURE__ */ jsx(Typography, { children: "Scan this QR code with your authenticator app:" }),
+        /* @__PURE__ */ jsx("img", { width: 200, height: 200, src: qrCodeUrl ?? throwErr("TOTP QR code failed to generate"), alt: "TOTP multi-factor authentication QR code" }),
+        /* @__PURE__ */ jsx(Typography, { children: "Then, enter your six-digit MFA code:" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: mfaCode,
+            onChange: (e) => {
+              setIsMaybeWrong(false);
+              setMfaCode(e.target.value);
+            },
+            placeholder: "123456",
+            maxLength: 6,
+            disabled: isLoading
+          }
+        ),
+        isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Incorrect code. Please try again." })
+      ] }) : /* @__PURE__ */ jsx(Typography, { variant: "destructive", children: "Multi-factor authentication is currently disabled." })
+    }
+  );
+}
+async function generateTotpQrCode(project, user, secret) {
+  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret);
+  return await QRCode.toDataURL(uri);
+}
 function SignOutSection() {
-  const user = useUser();
+  const user = useUser({ or: "throw" });
   return /* @__PURE__ */ jsx(
     SettingSection,
     {
@@ -202,31 +305,10 @@ function SignOutSection() {
       desc: "Sign out of your account on this device.",
       buttonVariant: "secondary",
       buttonText: "Sign Out",
-      onButtonClick: () => user?.signOut()
+      onButtonClick: () => user.signOut()
     }
   );
 }
-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(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 from 'react';\nimport { 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';\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();\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 SignOutSection() {\n  const user = useUser();\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      <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/auth-page.js

@@ -34,11 +34,14 @@ function AuthPage({
   if (user && !mockProject) {
     return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "signedIn", fullPage });
   }
+  if (type === "sign-up" && !project.config.signUpEnabled) {
+    return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "signUpDisabled", fullPage });
+  }
   const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;
   return /* @__PURE__ */ jsx(MaybeFullPage, { fullPage, children: /* @__PURE__ */ jsxs("div", { className: "stack-scope flex flex-col items-stretch", children: [
     /* @__PURE__ */ jsxs("div", { className: "text-center mb-6", children: [
       /* @__PURE__ */ jsx(Typography, { type: "h2", children: type === "sign-in" ? "Sign in to your account" : "Create a new account" }),
-      type === "sign-in" ? /* @__PURE__ */ jsxs(Typography, { children: [
+      type === "sign-in" ? project.config.signUpEnabled && /* @__PURE__ */ jsxs(Typography, { children: [
         "Don't have an account? ",
         /* @__PURE__ */ jsx(StyledLink, { href: stackApp.urls.signUp, onClick: (e) => {
           runAsynchronously(stackApp.redirectToSignUp());

package/dist/esm/components-page/auth-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport { CredentialSignIn } from '../components/credential-sign-in';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { useUser, useStackApp } from '..';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { MagicLinkSignIn } from '../components/magic-link-sign-in';\nimport { CredentialSignUp } from '../components/credential-sign-up';\nimport { StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography } from '@stackframe/stack-ui';\nimport { Project } from '../lib/stack-app';\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { useEffect } from 'react';\n\nexport function AuthPage({\n  fullPage=false,\n  type,\n  automaticRedirect,\n  mockProject,\n}: {\n  fullPage?: boolean,\n  type: 'sign-in' | 'sign-up',\n  automaticRedirect?: boolean,\n  mockProject?: {\n    config: {\n      credentialEnabled: boolean,\n      magicLinkEnabled: boolean,\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = mockProject || projectFromHook;\n\n  useEffect(() => {\n    if (automaticRedirect) {\n      if (user && !mockProject) {\n        runAsynchronously(type === 'sign-in' ? stackApp.redirectToAfterSignIn() : stackApp.redirectToAfterSignUp());\n      }\n    }\n  }, [user, mockProject, stackApp, automaticRedirect]);\n\n  if (user && !mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className='stack-scope flex flex-col items-stretch'>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}\n          </Typography>\n          {type === 'sign-in' ? (\n            <Typography>\n              {\"Don't have an account? \"}\n              <StyledLink href={stackApp.urls.signUp} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignUp());\n                e.preventDefault();\n              }}>\n                Sign up\n              </StyledLink>\n            </Typography>\n          ) : (\n            <Typography>\n              {\"Already have an account? \"}\n              <StyledLink href={stackApp.urls.signIn} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignIn());\n                e.preventDefault();\n              }}>\n                Sign in\n              </StyledLink>\n            </Typography>\n          )}\n        </div>\n        <OAuthButtonGroup type={type} mockProject={mockProject} />\n        {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (\n          <Tabs defaultValue='magic-link'>\n            <TabsList className='w-full mb-2'>\n              <TabsTrigger value='magic-link' className='flex-1'>Magic Link</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>Password</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignIn/>\n            </TabsContent>\n            <TabsContent value='password'>\n              {type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}\n            </TabsContent>\n          </Tabs>\n        ) : project.config.credentialEnabled ? (\n          type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>\n        ) : project.config.magicLinkEnabled ? (\n          <MagicLinkSignIn/>\n        ) : null}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,YAAY,MAAM,aAAa,UAAU,aAAa,kBAAkB;AAEjF,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAmCf,cAaC,YAbD;AAjCJ,SAAS,SAAS;AAAA,EACvB,WAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAaG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,SAAS,WAAW;AAC5C,QAAM,UAAU,eAAe;AAE/B,YAAU,MAAM;AACd,QAAI,mBAAmB;AACrB,UAAI,QAAQ,CAAC,aAAa;AACxB,0BAAkB,SAAS,YAAY,SAAS,sBAAsB,IAAI,SAAS,sBAAsB,CAAC;AAAA,MAC5G;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,aAAa,UAAU,iBAAiB,CAAC;AAEnD,MAAI,QAAQ,CAAC,aAAa;AACxB,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,QAAM,mBAAmB,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,eAAe,SAAS;AAExI,SACE,oBAAC,iBAAc,UACb,+BAAC,SAAI,WAAU,2CACb;AAAA,yBAAC,SAAI,WAAU,oBACb;AAAA,0BAAC,cAAW,MAAK,MACd,mBAAS,YAAY,4BAA4B,wBACpD;AAAA,MACC,SAAS,YACR,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,SAAS,CAAC,MAAM;AACtD,4BAAkB,SAAS,iBAAiB,CAAC;AAC7C,YAAE,eAAe;AAAA,QACnB,GAAG,qBAEH;AAAA,SACF,IAEA,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,SAAS,CAAC,MAAM;AACtD,4BAAkB,SAAS,iBAAiB,CAAC;AAC7C,YAAE,eAAe;AAAA,QACnB,GAAG,qBAEH;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,oBAAC,oBAAiB,MAAY,aAA0B;AAAA,IACvD,mBAAmB,oBAAC,qBAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,mBAClD,qBAAC,QAAK,cAAa,cACjB;AAAA,2BAAC,YAAS,WAAU,eAClB;AAAA,4BAAC,eAAY,OAAM,cAAa,WAAU,UAAS,wBAAU;AAAA,QAC7D,oBAAC,eAAY,OAAM,YAAW,WAAU,UAAS,sBAAQ;AAAA,SAC3D;AAAA,MACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,mBAAe,GAClB;AAAA,MACA,oBAAC,eAAY,OAAM,YAChB,mBAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,GAC/D;AAAA,OACF,IACE,QAAQ,OAAO,oBACjB,SAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,IAC1D,QAAQ,OAAO,mBACjB,oBAAC,mBAAe,IACd;AAAA,KACN,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components-page/auth-page.tsx"],"sourcesContent":["'use client';\n\nimport { CredentialSignIn } from '../components/credential-sign-in';\nimport { SeparatorWithText } from '../components/elements/separator-with-text';\nimport { OAuthButtonGroup } from '../components/oauth-button-group';\nimport { MaybeFullPage } from '../components/elements/maybe-full-page';\nimport { useUser, useStackApp } from '..';\nimport { PredefinedMessageCard } from '../components/message-cards/predefined-message-card';\nimport { MagicLinkSignIn } from '../components/magic-link-sign-in';\nimport { CredentialSignUp } from '../components/credential-sign-up';\nimport { StyledLink, Tabs, TabsContent, TabsList, TabsTrigger, Typography } from '@stackframe/stack-ui';\nimport { Project } from '../lib/stack-app';\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { useEffect } from 'react';\n\nexport function AuthPage({\n  fullPage=false,\n  type,\n  automaticRedirect,\n  mockProject,\n}: {\n  fullPage?: boolean,\n  type: 'sign-in' | 'sign-up',\n  automaticRedirect?: boolean,\n  mockProject?: {\n    config: {\n      signUpEnabled: boolean,\n      credentialEnabled: boolean,\n      magicLinkEnabled: boolean,\n      oauthProviders: {\n        id: string,\n      }[],\n    },\n  },\n}) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const projectFromHook = stackApp.useProject();\n  const project = mockProject || projectFromHook;\n\n  useEffect(() => {\n    if (automaticRedirect) {\n      if (user && !mockProject) {\n        runAsynchronously(type === 'sign-in' ? stackApp.redirectToAfterSignIn() : stackApp.redirectToAfterSignUp());\n      }\n    }\n  }, [user, mockProject, stackApp, automaticRedirect]);\n\n  if (user && !mockProject) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  if (type === 'sign-up' && !project.config.signUpEnabled) {\n    return <PredefinedMessageCard type='signUpDisabled' fullPage={fullPage} />;\n  }\n\n  const enableSeparator = (project.config.credentialEnabled || project.config.magicLinkEnabled) && project.config.oauthProviders.length > 0;\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className='stack-scope flex flex-col items-stretch'>\n        <div className=\"text-center mb-6\">\n          <Typography type='h2'>\n            {type === 'sign-in' ? 'Sign in to your account' : 'Create a new account'}\n          </Typography>\n          {type === 'sign-in' ? (\n            project.config.signUpEnabled && (\n              <Typography>\n                {\"Don't have an account? \"}\n                <StyledLink href={stackApp.urls.signUp} onClick={(e) => {\n                  runAsynchronously(stackApp.redirectToSignUp());\n                  e.preventDefault();\n                }}>\n                  Sign up\n                </StyledLink>\n              </Typography>\n            )\n          ) : (\n            <Typography>\n              {\"Already have an account? \"}\n              <StyledLink href={stackApp.urls.signIn} onClick={(e) => {\n                runAsynchronously(stackApp.redirectToSignIn());\n                e.preventDefault();\n              }}>\n                Sign in\n              </StyledLink>\n            </Typography>\n          )}\n        </div>\n        <OAuthButtonGroup type={type} mockProject={mockProject} />\n        {enableSeparator && <SeparatorWithText text={'Or continue with'} />}\n        {project.config.credentialEnabled && project.config.magicLinkEnabled ? (\n          <Tabs defaultValue='magic-link'>\n            <TabsList className='w-full mb-2'>\n              <TabsTrigger value='magic-link' className='flex-1'>Magic Link</TabsTrigger>\n              <TabsTrigger value='password' className='flex-1'>Password</TabsTrigger>\n            </TabsList>\n            <TabsContent value='magic-link'>\n              <MagicLinkSignIn/>\n            </TabsContent>\n            <TabsContent value='password'>\n              {type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>}\n            </TabsContent>\n          </Tabs>\n        ) : project.config.credentialEnabled ? (\n          type === 'sign-up' ? <CredentialSignUp/> : <CredentialSignIn/>\n        ) : project.config.magicLinkEnabled ? (\n          <MagicLinkSignIn/>\n        ) : null}\n      </div>\n    </MaybeFullPage>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,YAAY,MAAM,aAAa,UAAU,aAAa,kBAAkB;AAEjF,SAAS,yBAAyB;AAClC,SAAS,iBAAiB;AAoCf,cAkBG,YAlBH;AAlCJ,SAAS,SAAS;AAAA,EACvB,WAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAcG;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,SAAS,WAAW;AAC5C,QAAM,UAAU,eAAe;AAE/B,YAAU,MAAM;AACd,QAAI,mBAAmB;AACrB,UAAI,QAAQ,CAAC,aAAa;AACxB,0BAAkB,SAAS,YAAY,SAAS,sBAAsB,IAAI,SAAS,sBAAsB,CAAC;AAAA,MAC5G;AAAA,IACF;AAAA,EACF,GAAG,CAAC,MAAM,aAAa,UAAU,iBAAiB,CAAC;AAEnD,MAAI,QAAQ,CAAC,aAAa;AACxB,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,MAAI,SAAS,aAAa,CAAC,QAAQ,OAAO,eAAe;AACvD,WAAO,oBAAC,yBAAsB,MAAK,kBAAiB,UAAoB;AAAA,EAC1E;AAEA,QAAM,mBAAmB,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,eAAe,SAAS;AAExI,SACE,oBAAC,iBAAc,UACb,+BAAC,SAAI,WAAU,2CACb;AAAA,yBAAC,SAAI,WAAU,oBACb;AAAA,0BAAC,cAAW,MAAK,MACd,mBAAS,YAAY,4BAA4B,wBACpD;AAAA,MACC,SAAS,YACR,QAAQ,OAAO,iBACb,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,SAAS,CAAC,MAAM;AACtD,4BAAkB,SAAS,iBAAiB,CAAC;AAC7C,YAAE,eAAe;AAAA,QACnB,GAAG,qBAEH;AAAA,SACF,IAGF,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,SAAS,CAAC,MAAM;AACtD,4BAAkB,SAAS,iBAAiB,CAAC;AAC7C,YAAE,eAAe;AAAA,QACnB,GAAG,qBAEH;AAAA,SACF;AAAA,OAEJ;AAAA,IACA,oBAAC,oBAAiB,MAAY,aAA0B;AAAA,IACvD,mBAAmB,oBAAC,qBAAkB,MAAM,oBAAoB;AAAA,IAChE,QAAQ,OAAO,qBAAqB,QAAQ,OAAO,mBAClD,qBAAC,QAAK,cAAa,cACjB;AAAA,2BAAC,YAAS,WAAU,eAClB;AAAA,4BAAC,eAAY,OAAM,cAAa,WAAU,UAAS,wBAAU;AAAA,QAC7D,oBAAC,eAAY,OAAM,YAAW,WAAU,UAAS,sBAAQ;AAAA,SAC3D;AAAA,MACA,oBAAC,eAAY,OAAM,cACjB,8BAAC,mBAAe,GAClB;AAAA,MACA,oBAAC,eAAY,OAAM,YAChB,mBAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,GAC/D;AAAA,OACF,IACE,QAAQ,OAAO,oBACjB,SAAS,YAAY,oBAAC,oBAAgB,IAAK,oBAAC,oBAAgB,IAC1D,QAAQ,OAAO,mBACjB,oBAAC,mBAAe,IACd;AAAA,KACN,GACF;AAEJ;","names":[]}

package/dist/esm/components-page/forgot-password.js

@@ -2,13 +2,59 @@
 "use client";
 
 // src/components-page/forgot-password.tsx
-import { ForgotPasswordForm } from "../components/forgot-password-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label, StyledLink, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useStackApp, useUser } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
 import { MaybeFullPage } from "../components/elements/maybe-full-page";
-import { useUser, useStackApp } from "..";
 import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
-import { useState } from "react";
-import { StyledLink, Typography } from "@stackframe/stack-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
+var schema = yupObject({
+  email: yupString().email("Please enter a valid email").required("Please enter your email")
+});
+function ForgotPasswordForm({ onSent }) {
+  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const stackApp = useStackApp();
+  const [loading, setLoading] = useState(false);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const { email } = data;
+      await stackApp.sendForgotPasswordEmail(email);
+      onSent?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      className: "flex flex-col items-stretch stack-scope",
+      onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+      noValidate: true,
+      children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "email", className: "mb-1", children: "Your Email" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            ...register("email"),
+            onChange: () => clearErrors("email")
+          }
+        ),
+        /* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Send Email" })
+      ]
+    }
+  );
+}
 function ForgotPassword({ fullPage = false }) {
   const stackApp = useStackApp();
   const user = useUser();
@@ -31,6 +77,7 @@ function ForgotPassword({ fullPage = false }) {
   ] });
 }
 export {
-  ForgotPassword
+  ForgotPassword,
+  ForgotPasswordForm
 };
 //# sourceMappingURL=forgot-password.js.map

package/dist/esm/components-page/forgot-password.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { ForgotPasswordForm } from \"../components/forgot-password-form\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { useUser, useStackApp } from \"..\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\nimport { useState } from \"react\";\nimport { StyledLink, Typography } from \"@stackframe/stack-ui\";\n\n\nexport function ForgotPassword({ fullPage=false }: { fullPage?: boolean }) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [sent, setSent] = useState(false);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  if (sent) {\n    return <PredefinedMessageCard type='emailSent' fullPage={fullPage} />;\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center mb-6 stack-scope\">\n        <Typography type='h2'>Reset Your Password</Typography>\n        <Typography>\n          {\"Don't need to reset? \"}\n          <StyledLink href={stackApp.urls['signUp']}>\n            Sign in\n          </StyledLink>\n        </Typography>\n      </div>\n      <ForgotPasswordForm onSent={() => setSent(true)} />\n    </MaybeFullPage>\n  );\n};\n"],"mappings":";;;AAEA,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,SAAS,mBAAmB;AACrC,SAAS,6BAA6B;AACtC,SAAS,gBAAgB;AACzB,SAAS,YAAY,kBAAkB;AAS5B,cAWH,YAXG;AANJ,SAAS,eAAe,EAAE,WAAS,MAAM,GAA2B;AACzE,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,aAAY,UAAoB;AAAA,EACrE;AAEA,SACE,qBAAC,iBAAc,UACb;AAAA,yBAAC,SAAI,WAAU,gCACb;AAAA,0BAAC,cAAW,MAAK,MAAK,iCAAmB;AAAA,MACzC,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,GAAG,qBAE3C;AAAA,SACF;AAAA,OACF;AAAA,IACA,oBAAC,sBAAmB,QAAQ,MAAM,QAAQ,IAAI,GAAG;AAAA,KACnD;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components-page/forgot-password.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, StyledLink, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp, useUser } from \"..\";\nimport { FormWarningText } from \"../components/elements/form-warning\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\n\nconst schema = yupObject({\n  email: yupString().email('Please enter a valid email').required('Please enter your email')\n});\n\nexport function ForgotPasswordForm({ onSent }: { onSent?: () => void }) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email } = data;\n      await stackApp.sendForgotPasswordEmail(email);\n    onSent?.();\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">Your Email</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        {...register('email')}\n        onChange={() => clearErrors('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        Send Email\n      </Button>\n    </form>\n  );\n}\n\n\nexport function ForgotPassword({ fullPage=false }: { fullPage?: boolean }) {\n  const stackApp = useStackApp();\n  const user = useUser();\n  const [sent, setSent] = useState(false);\n\n  if (user) {\n    return <PredefinedMessageCard type='signedIn' fullPage={fullPage} />;\n  }\n\n  if (sent) {\n    return <PredefinedMessageCard type='emailSent' fullPage={fullPage} />;\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center mb-6 stack-scope\">\n        <Typography type='h2'>Reset Your Password</Typography>\n        <Typography>\n          {\"Don't need to reset? \"}\n          <StyledLink href={stackApp.urls['signUp']}>\n            Sign in\n          </StyledLink>\n        </Typography>\n      </div>\n      <ForgotPasswordForm onSent={() => setSent(true)} />\n    </MaybeFullPage>\n  );\n};\n"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,SAAS,WAAW,iBAAiB;AACrC,SAAS,kCAAkC;AAC3C,SAAS,QAAQ,OAAO,OAAO,YAAY,kBAAkB;AAC7D,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,aAAa,eAAe;AACrC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,6BAA6B;AAyBlC,SAKE,KALF;AAvBJ,IAAM,SAAS,UAAU;AAAA,EACvB,OAAO,UAAU,EAAE,MAAM,4BAA4B,EAAE,SAAS,yBAAyB;AAC3F,CAAC;AAEM,SAAS,mBAAmB,EAAE,OAAO,GAA4B;AACtE,QAAM,EAAE,UAAU,cAAc,WAAW,EAAE,OAAO,GAAG,YAAY,IAAI,QAAQ;AAAA,IAC7E,UAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AACD,QAAM,WAAW,YAAY;AAC7B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,WAAW,OAAO,SAAuC;AAC7D,eAAW,IAAI;AACf,QAAI;AACF,YAAM,EAAE,MAAM,IAAI;AAClB,YAAM,SAAS,wBAAwB,KAAK;AAC9C,eAAS;AAAA,IACT,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,MACnE,YAAU;AAAA,MAEV;AAAA,4BAAC,SAAM,SAAQ,SAAQ,WAAU,QAAO,wBAAU;AAAA,QAClD;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAK;AAAA,YACJ,GAAG,SAAS,OAAO;AAAA,YACpB,UAAU,MAAM,YAAY,OAAO;AAAA;AAAA,QACrC;AAAA,QACA,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,SAAS,GAAG;AAAA,QAE1D,oBAAC,UAAO,MAAK,UAAS,WAAU,QAAO,SAAkB,wBAEzD;AAAA;AAAA;AAAA,EACF;AAEJ;AAGO,SAAS,eAAe,EAAE,WAAS,MAAM,GAA2B;AACzE,QAAM,WAAW,YAAY;AAC7B,QAAM,OAAO,QAAQ;AACrB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,YAAW,UAAoB;AAAA,EACpE;AAEA,MAAI,MAAM;AACR,WAAO,oBAAC,yBAAsB,MAAK,aAAY,UAAoB;AAAA,EACrE;AAEA,SACE,qBAAC,iBAAc,UACb;AAAA,yBAAC,SAAI,WAAU,gCACb;AAAA,0BAAC,cAAW,MAAK,MAAK,iCAAmB;AAAA,MACzC,qBAAC,cACE;AAAA;AAAA,QACD,oBAAC,cAAW,MAAM,SAAS,KAAK,QAAQ,GAAG,qBAE3C;AAAA,SACF;AAAA,OACF;AAAA,IACA,oBAAC,sBAAmB,QAAQ,MAAM,QAAQ,IAAI,GAAG;AAAA,KACnD;AAEJ;","names":[]}

package/dist/esm/components-page/password-reset.js

@@ -2,14 +2,105 @@
 "use client";
 
 // src/components-page/password-reset.tsx
-import { MessageCard } from "../components/message-cards/message-card";
-import { useStackApp } from "..";
-import React from "react";
-import PasswordResetForm from "../components/password-reset-form";
-import { cacheFunction } from "@stackframe/stack-shared/dist/utils/caches";
+import { yupResolver } from "@hookform/resolvers/yup";
 import { KnownErrors } from "@stackframe/stack-shared";
-import { Typography } from "@stackframe/stack-ui";
-import { jsx } from "react/jsx-runtime";
+import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { cacheFunction } from "@stackframe/stack-shared/dist/utils/caches";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Label, PasswordInput, Typography } from "@stackframe/stack-ui";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { useStackApp } from "..";
+import { FormWarningText } from "../components/elements/form-warning";
+import { MaybeFullPage } from "../components/elements/maybe-full-page";
+import { MessageCard } from "../components/message-cards/message-card";
+import { PredefinedMessageCard } from "../components/message-cards/predefined-message-card";
+import { jsx, jsxs } from "react/jsx-runtime";
+var schema = yupObject({
+  password: yupString().required("Please enter your password").test({
+    name: "is-valid-password",
+    test: (value, ctx) => {
+      const error = getPasswordError(value);
+      if (error) {
+        return ctx.createError({ message: error.message });
+      } else {
+        return true;
+      }
+    }
+  }),
+  passwordRepeat: yupString().nullable().oneOf([yup.ref("password"), null], "Passwords do not match").required("Please repeat your password")
+});
+function PasswordResetForm({ code, fullPage = false }) {
+  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({
+    resolver: yupResolver(schema)
+  });
+  const stackApp = useStackApp();
+  const [finished, setFinished] = useState(false);
+  const [resetError, setResetError] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const onSubmit = async (data) => {
+    setLoading(true);
+    try {
+      const { password } = data;
+      const errorCode = await stackApp.resetPassword({ password, code });
+      if (errorCode) {
+        setResetError(true);
+        return;
+      }
+      setFinished(true);
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (finished) {
+    return /* @__PURE__ */ jsx(PredefinedMessageCard, { type: "passwordReset", fullPage });
+  }
+  if (resetError) {
+    return /* @__PURE__ */ jsx(MessageCard, { title: "Failed to reset password", fullPage, children: "Failed to reset password. Please request a new password reset link" });
+  }
+  return /* @__PURE__ */ jsxs(MaybeFullPage, { fullPage, children: [
+    /* @__PURE__ */ jsx("div", { className: "text-center mb-6", children: /* @__PURE__ */ jsx(Typography, { type: "h2", children: "Reset Your Password" }) }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        style: { display: "flex", flexDirection: "column", alignItems: "stretch" },
+        onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+        noValidate: true,
+        children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "password", className: "mb-1", children: "New Password" }),
+          /* @__PURE__ */ jsx(
+            PasswordInput,
+            {
+              id: "password",
+              ...register("password"),
+              onChange: () => {
+                clearErrors("password");
+                clearErrors("passwordRepeat");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
+          /* @__PURE__ */ jsx(Label, { htmlFor: "repeat-password", className: "mt-4 mb-1", children: "Repeat New Password" }),
+          /* @__PURE__ */ jsx(
+            PasswordInput,
+            {
+              id: "repeat-password",
+              ...register("passwordRepeat"),
+              onChange: () => {
+                clearErrors("password");
+                clearErrors("passwordRepeat");
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(FormWarningText, { text: errors.passwordRepeat?.message?.toString() }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "mt-6", loading, children: "Reset Password" })
+        ]
+      }
+    )
+  ] });
+}
 var cachedVerifyPasswordResetCode = cacheFunction(async (stackApp, code) => {
   return await stackApp.verifyPasswordResetCode(code);
 });
@@ -21,7 +112,7 @@ function PasswordReset({
   const invalidJsx = /* @__PURE__ */ jsx(MessageCard, { title: "Invalid Password Reset Link", fullPage, children: /* @__PURE__ */ jsx(Typography, { children: "Please double check if you have the correct password reset link." }) });
   const expiredJsx = /* @__PURE__ */ jsx(MessageCard, { title: "Expired Password Reset Link", fullPage, children: /* @__PURE__ */ jsx(Typography, { children: "Your password reset link has expired. Please request a new password reset link from the login page." }) });
   const usedJsx = /* @__PURE__ */ jsx(MessageCard, { title: "Used Password Reset Link", fullPage, children: /* @__PURE__ */ jsx(Typography, { children: "This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page." }) });
-  const code = searchParams?.code;
+  const code = searchParams.code;
   if (!code) {
     return invalidJsx;
   }
@@ -38,6 +129,7 @@ function PasswordReset({
   return /* @__PURE__ */ jsx(PasswordResetForm, { code, fullPage });
 }
 export {
-  PasswordReset
+  PasswordReset,
+  PasswordResetForm as default
 };
 //# sourceMappingURL=password-reset.js.map

package/dist/esm/components-page/password-reset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components-page/password-reset.tsx"],"sourcesContent":["'use client';\n\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { StackClientApp, useStackApp } from \"..\";\nimport React from \"react\";\nimport PasswordResetForm from \"../components/password-reset-form\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { Typography } from \"@stackframe/stack-ui\";\n\nconst cachedVerifyPasswordResetCode = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.verifyPasswordResetCode(code);\n});\n\nexport function PasswordReset({\n  searchParams,\n  fullPage = false,\n}: {\n  searchParams?: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Password Reset Link\" fullPage={fullPage}>\n      <Typography>Please double check if you have the correct password reset link.</Typography>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Password Reset Link\" fullPage={fullPage}>\n      <Typography>Your password reset link has expired. Please request a new password reset link from the login page.</Typography>\n    </MessageCard>\n  );\n\n  const usedJsx = (\n    <MessageCard title=\"Used Password Reset Link\" fullPage={fullPage}>\n      <Typography>This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page.</Typography>\n    </MessageCard>\n  );\n\n  const code = searchParams?.code;\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = React.use(cachedVerifyPasswordResetCode(stackApp, code));\n\n  if (error instanceof KnownErrors.VerificationCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n    return usedJsx;\n  } else if (error) {\n    throw error;\n  }\n\n  return <PasswordResetForm code={code} fullPage={fullPage} />;\n}\n"],"mappings":";;;AAEA,SAAS,mBAAmB;AAC5B,SAAyB,mBAAmB;AAC5C,OAAO,WAAW;AAClB,OAAO,uBAAuB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAiBrB;AAfN,IAAM,gCAAgC,cAAc,OAAO,UAAgC,SAAiB;AAC1G,SAAO,MAAM,SAAS,wBAAwB,IAAI;AACpD,CAAC;AAEM,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,WAAW;AACb,GAGG;AACD,QAAM,WAAW,YAAY;AAE7B,QAAM,aACJ,oBAAC,eAAY,OAAM,+BAA8B,UAC/C,8BAAC,cAAW,8EAAgE,GAC9E;AAGF,QAAM,aACJ,oBAAC,eAAY,OAAM,+BAA8B,UAC/C,8BAAC,cAAW,iHAAmG,GACjH;AAGF,QAAM,UACJ,oBAAC,eAAY,OAAM,4BAA2B,UAC5C,8BAAC,cAAW,qKAAuJ,GACrK;AAGF,QAAM,OAAO,cAAc;AAC3B,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,MAAM,IAAI,8BAA8B,UAAU,IAAI,CAAC;AAErE,MAAI,iBAAiB,YAAY,0BAA0B;AACzD,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,yBAAyB;AAC/D,WAAO;AAAA,EACT,WAAW,iBAAiB,YAAY,6BAA6B;AACnE,WAAO;AAAA,EACT,WAAW,OAAO;AAChB,UAAM;AAAA,EACR;AAEA,SAAO,oBAAC,qBAAkB,MAAY,UAAoB;AAC5D;","names":[]}
+{"version":3,"sources":["../../../src/components-page/password-reset.tsx"],"sourcesContent":["'use client';\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { cacheFunction } from \"@stackframe/stack-shared/dist/utils/caches\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Label, PasswordInput, Typography } from \"@stackframe/stack-ui\";\nimport React, { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { StackClientApp, useStackApp } from \"..\";\nimport { FormWarningText } from \"../components/elements/form-warning\";\nimport { MaybeFullPage } from \"../components/elements/maybe-full-page\";\nimport { MessageCard } from \"../components/message-cards/message-card\";\nimport { PredefinedMessageCard } from \"../components/message-cards/predefined-message-card\";\n\nconst schema = yupObject({\n  password: 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  passwordRepeat: yupString().nullable().oneOf([yup.ref('password'), null], 'Passwords do not match').required('Please repeat your password')\n});\n\nexport default function PasswordResetForm(\n  { code, fullPage = false }:\n  { code: string, fullPage?: boolean }\n) {\n  const { register, handleSubmit, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const stackApp = useStackApp();\n  const [finished, setFinished] = useState(false);\n  const [resetError, setResetError] = useState(false);\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { password } = data;\n      const errorCode = await stackApp.resetPassword({ password, code });\n      if (errorCode) {\n        setResetError(true);\n        return;\n      }\n\n      setFinished(true);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  if (finished) {\n    return <PredefinedMessageCard type='passwordReset' fullPage={fullPage} />;\n  }\n\n  if (resetError) {\n    return (\n      <MessageCard title=\"Failed to reset password\" fullPage={fullPage}>\n        Failed to reset password. Please request a new password reset link\n      </MessageCard>\n    );\n  }\n\n  return (\n    <MaybeFullPage fullPage={fullPage}>\n      <div className=\"text-center mb-6\">\n        <Typography type='h2'>Reset Your Password</Typography>\n      </div>\n\n      <form\n        style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}\n        onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n        noValidate\n      >\n        <Label htmlFor=\"password\" className=\"mb-1\">New Password</Label>\n        <PasswordInput\n          id=\"password\"\n          {...register('password')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.password?.message?.toString()} />\n\n        <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">Repeat New Password</Label>\n        <PasswordInput\n          id=\"repeat-password\"\n          {...register('passwordRepeat')}\n          onChange={() => {\n            clearErrors('password');\n            clearErrors('passwordRepeat');\n          }}\n        />\n        <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n\n        <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n          Reset Password\n        </Button>\n      </form>\n    </MaybeFullPage>\n  );\n}\n\n\nconst cachedVerifyPasswordResetCode = cacheFunction(async (stackApp: StackClientApp<true>, code: string) => {\n  return await stackApp.verifyPasswordResetCode(code);\n});\n\nexport function PasswordReset({\n  searchParams,\n  fullPage = false,\n}: {\n  searchParams: Record<string, string>,\n  fullPage?: boolean,\n}) {\n  const stackApp = useStackApp();\n\n  const invalidJsx = (\n    <MessageCard title=\"Invalid Password Reset Link\" fullPage={fullPage}>\n      <Typography>Please double check if you have the correct password reset link.</Typography>\n    </MessageCard>\n  );\n\n  const expiredJsx = (\n    <MessageCard title=\"Expired Password Reset Link\" fullPage={fullPage}>\n      <Typography>Your password reset link has expired. Please request a new password reset link from the login page.</Typography>\n    </MessageCard>\n  );\n\n  const usedJsx = (\n    <MessageCard title=\"Used Password Reset Link\" fullPage={fullPage}>\n      <Typography>This password reset link has already been used. If you need to reset your password again, please request a new password reset link from the login page.</Typography>\n    </MessageCard>\n  );\n\n  const code = searchParams.code;\n  if (!code) {\n    return invalidJsx;\n  }\n\n  const error = React.use(cachedVerifyPasswordResetCode(stackApp, code));\n\n  if (error instanceof KnownErrors.VerificationCodeNotFound) {\n    return invalidJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeExpired) {\n    return expiredJsx;\n  } else if (error instanceof KnownErrors.VerificationCodeAlreadyUsed) {\n    return usedJsx;\n  } else if (error) {\n    throw error;\n  }\n\n  return <PasswordResetForm code={code} fullPage={fullPage} />;\n}\n"],"mappings":"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","names":[]}