@stackframe/stack 2.8.11 → 2.8.16

package/dist/esm/components-page/account-settings/email-and-auth/email-and-auth-page.js

@@ -1,18 +1,18 @@
 // src/components-page/account-settings/email-and-auth/email-and-auth-page.tsx
-import { PageLayout } from "../page-layout";
-import { EmailsSection } from "./emails-section";
-import { MfaSection } from "./mfa-section";
-import { OtpSection } from "./otp-section";
-import { PasskeySection } from "./passkey-section";
-import { PasswordSection } from "./password-section";
+import { PageLayout } from "../page-layout.js";
+import { EmailsSection } from "./emails-section.js";
+import { MfaSection } from "./mfa-section.js";
+import { OtpSection } from "./otp-section.js";
+import { PasskeySection } from "./passkey-section.js";
+import { PasswordSection } from "./password-section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function EmailsAndAuthPage() {
+function EmailsAndAuthPage(props) {
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(EmailsSection, {}),
-    /* @__PURE__ */ jsx(PasswordSection, {}),
-    /* @__PURE__ */ jsx(PasskeySection, {}),
-    /* @__PURE__ */ jsx(OtpSection, {}),
-    /* @__PURE__ */ jsx(MfaSection, {})
+    /* @__PURE__ */ jsx(EmailsSection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(PasswordSection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(PasskeySection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(OtpSection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(MfaSection, { mockMode: props?.mockMode })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/email-and-auth-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { PageLayout } from \"../page-layout\";\nimport { EmailsSection } from \"./emails-section\";\nimport { MfaSection } from \"./mfa-section\";\nimport { OtpSection } from \"./otp-section\";\nimport { PasskeySection } from \"./passkey-section\";\nimport { PasswordSection } from \"./password-section\";\n\nexport function EmailsAndAuthPage() {\n  return (\n    <PageLayout>\n      <EmailsSection/>\n      <PasswordSection />\n      <PasskeySection />\n      <OtpSection />\n      <MfaSection />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAI5B,SACE,KADF;AAFG,SAAS,oBAAoB;AAClC,SACE,qBAAC,cACC;AAAA,wBAAC,iBAAa;AAAA,IACd,oBAAC,mBAAgB;AAAA,IACjB,oBAAC,kBAAe;AAAA,IAChB,oBAAC,cAAW;AAAA,IACZ,oBAAC,cAAW;AAAA,KACd;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/email-and-auth-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { PageLayout } from \"../page-layout\";\nimport { EmailsSection } from \"./emails-section\";\nimport { MfaSection } from \"./mfa-section\";\nimport { OtpSection } from \"./otp-section\";\nimport { PasskeySection } from \"./passkey-section\";\nimport { PasswordSection } from \"./password-section\";\n\nexport function EmailsAndAuthPage(props?: {\n  mockMode?: boolean,\n}) {\n  return (\n    <PageLayout>\n      <EmailsSection mockMode={props?.mockMode}/>\n      <PasswordSection mockMode={props?.mockMode} />\n      <PasskeySection mockMode={props?.mockMode} />\n      <OtpSection mockMode={props?.mockMode} />\n      <MfaSection mockMode={props?.mockMode} />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAM5B,SACE,KADF;AAJG,SAAS,kBAAkB,OAE/B;AACD,SACE,qBAAC,cACC;AAAA,wBAAC,iBAAc,UAAU,OAAO,UAAS;AAAA,IACzC,oBAAC,mBAAgB,UAAU,OAAO,UAAU;AAAA,IAC5C,oBAAC,kBAAe,UAAU,OAAO,UAAU;AAAA,IAC3C,oBAAC,cAAW,UAAU,OAAO,UAAU;AAAA,IACvC,oBAAC,cAAW,UAAU,OAAO,UAAU;AAAA,KACzC;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/email-and-auth/emails-section.js

@@ -6,13 +6,22 @@ import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises"
 import { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from "@stackframe/stack-ui";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { FormWarningText } from "../../../components/elements/form-warning";
-import { useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
+import { FormWarningText } from "../../../components/elements/form-warning.js";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function EmailsSection() {
+function EmailsSection(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "redirect" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row justify-between mb-4 gap-4", children: /* @__PURE__ */ jsx(Typography, { className: "font-medium", children: t("Emails") }) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("Email management is not available in demo mode.") })
+    ] });
+  }
+  if (!user) {
+    return null;
+  }
   const contactChannels = user.useContactChannels();
   const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);
   const [addingEmailLoading, setAddingEmailLoading] = useState(false);
@@ -122,7 +131,7 @@ function EmailsSection() {
             try {
               await x.update({ usedForAuth: true });
             } catch (e) {
-              if (e instanceof KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse) {
+              if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {
                 alert(t("This email is already used for sign-in by another user."));
               }
             }

package/dist/esm/components-page/account-settings/email-and-auth/emails-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/emails-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared/dist/known-errors\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\n\nexport function EmailsSection() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const contactChannels = user.useContactChannels();\n  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);\n  const [addingEmailLoading, setAddingEmailLoading] = useState(false);\n  const [addedEmail, setAddedEmail] = useState<string | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const isLastEmail = contactChannels.filter(x => x.usedForAuth && x.type === 'email').length === 1;\n\n  useEffect(() => {\n    if (addedEmail) {\n      runAsynchronously(async () => {\n        const cc = contactChannels.find(x => x.value === addedEmail);\n        if (cc && !cc.isVerified) {\n          await cc.sendVerificationEmail();\n        }\n        setAddedEmail(null);\n      });\n    }\n  }, [contactChannels, addedEmail]);\n\n  const emailSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address'))\n      .notOneOf(contactChannels.map(x => x.value), t('Email already exists'))\n      .defined()\n      .nonEmpty(t('Email is required')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(emailSchema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {\n    setAddingEmailLoading(true);\n    try {\n      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });\n      setAddedEmail(data.email);\n    } finally {\n      setAddingEmailLoading(false);\n    }\n    setAddingEmail(false);\n    reset();\n  };\n\n  return (\n    <div>\n      <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n        <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        {addingEmail ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              runAsynchronously(handleSubmit(onSubmit));\n            }}\n            className='flex flex-col'\n          >\n            <div className='flex gap-2'>\n              <Input\n                {...register(\"email\")}\n                placeholder={t(\"Enter email\")}\n              />\n              <Button type=\"submit\" loading={addingEmailLoading}>\n                {t(\"Add\")}\n              </Button>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setAddingEmail(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n            {errors.email && <FormWarningText text={errors.email.message} />}\n          </form>\n        ) : (\n          <div className='flex md:justify-end'>\n            <Button variant='secondary' onClick={() => setAddingEmail(true)}>{t(\"Add an email\")}</Button>\n          </div>\n        )}\n      </div>\n\n      {contactChannels.length > 0 ? (\n        <div className='border rounded-md'>\n          <Table>\n            <TableBody>\n              {/*eslint-disable-next-line @typescript-eslint/no-unnecessary-condition*/}\n              {contactChannels.filter(x => x.type === 'email')\n                .sort((a, b) => {\n                  if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;\n                  if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;\n                  return 0;\n                })\n                .map(x => (\n                  <TableRow key={x.id}>\n                    <TableCell>\n                      <div className='flex flex-col md:flex-row gap-2 md:gap-4'>\n                        {x.value}\n                        <div className='flex gap-2'>\n                          {x.isPrimary ? <Badge>{t(\"Primary\")}</Badge> : null}\n                          {!x.isVerified ? <Badge variant='destructive'>{t(\"Unverified\")}</Badge> : null}\n                          {x.usedForAuth ? <Badge variant='outline'>{t(\"Used for sign-in\")}</Badge> : null}\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"flex justify-end\">\n                      <ActionCell items={[\n                        ...(!x.isVerified ? [{\n                          item: t(\"Send verification email\"),\n                          onClick: async () => { await x.sendVerificationEmail(); },\n                        }] : []),\n                        ...(!x.isPrimary && x.isVerified ? [{\n                          item: t(\"Set as primary\"),\n                          onClick: async () => { await x.update({ isPrimary: true }); },\n                        }] :\n                          !x.isPrimary ? [{\n                            item: t(\"Set as primary\"),\n                            onClick: async () => {},\n                            disabled: true,\n                            disabledTooltip: t(\"Please verify your email first\"),\n                          }] : []),\n                        ...(!x.usedForAuth && x.isVerified ? [{\n                          item: t(\"Use for sign-in\"),\n                          onClick: async () => {\n                            try {\n                              await x.update({ usedForAuth: true });\n                            } catch (e) {\n                              if (e instanceof KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse) {\n                                alert(t(\"This email is already used for sign-in by another user.\"));\n                              }\n                            }\n                          }\n                        }] : []),\n                        ...(x.usedForAuth && !isLastEmail ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => { await x.update({ usedForAuth: false }); },\n                        }] : x.usedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }] : []),\n                        ...(!isLastEmail || !x.usedForAuth ? [{\n                          item: t(\"Remove\"),\n                          onClick: async () => { await x.delete(); },\n                          danger: true,\n                        }] : [{\n                          item: t(\"Remove\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }]),\n                      ]}/>\n                    </TableCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </Table>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/emails-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { KnownErrors } from \"@stackframe/stack-shared/dist/known-errors\";\nimport { strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { ActionCell, Badge, Button, Input, Table, TableBody, TableCell, TableRow, Typography } from \"@stackframe/stack-ui\";\nimport { useEffect, useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\n\nexport function EmailsSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <div>\n        <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n          <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        </div>\n        <Typography variant='secondary'>{t(\"Email management is not available in demo mode.\")}</Typography>\n      </div>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to redirect\n  }\n\n  const contactChannels = user.useContactChannels();\n  const [addingEmail, setAddingEmail] = useState(contactChannels.length === 0);\n  const [addingEmailLoading, setAddingEmailLoading] = useState(false);\n  const [addedEmail, setAddedEmail] = useState<string | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const isLastEmail = contactChannels.filter(x => x.usedForAuth && x.type === 'email').length === 1;\n\n  useEffect(() => {\n    if (addedEmail) {\n      runAsynchronously(async () => {\n        const cc = contactChannels.find(x => x.value === addedEmail);\n        if (cc && !cc.isVerified) {\n          await cc.sendVerificationEmail();\n        }\n        setAddedEmail(null);\n      });\n    }\n  }, [contactChannels, addedEmail]);\n\n  const emailSchema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email address'))\n      .notOneOf(contactChannels.map(x => x.value), t('Email already exists'))\n      .defined()\n      .nonEmpty(t('Email is required')),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(emailSchema)\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof emailSchema>) => {\n    setAddingEmailLoading(true);\n    try {\n      await user.createContactChannel({ type: 'email', value: data.email, usedForAuth: false });\n      setAddedEmail(data.email);\n    } finally {\n      setAddingEmailLoading(false);\n    }\n    setAddingEmail(false);\n    reset();\n  };\n\n  return (\n    <div>\n      <div className='flex flex-col md:flex-row justify-between mb-4 gap-4'>\n        <Typography className='font-medium'>{t(\"Emails\")}</Typography>\n        {addingEmail ? (\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              runAsynchronously(handleSubmit(onSubmit));\n            }}\n            className='flex flex-col'\n          >\n            <div className='flex gap-2'>\n              <Input\n                {...register(\"email\")}\n                placeholder={t(\"Enter email\")}\n              />\n              <Button type=\"submit\" loading={addingEmailLoading}>\n                {t(\"Add\")}\n              </Button>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setAddingEmail(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n            {errors.email && <FormWarningText text={errors.email.message} />}\n          </form>\n        ) : (\n          <div className='flex md:justify-end'>\n            <Button variant='secondary' onClick={() => setAddingEmail(true)}>{t(\"Add an email\")}</Button>\n          </div>\n        )}\n      </div>\n\n      {contactChannels.length > 0 ? (\n        <div className='border rounded-md'>\n          <Table>\n            <TableBody>\n              {/*eslint-disable-next-line @typescript-eslint/no-unnecessary-condition*/}\n              {contactChannels.filter(x => x.type === 'email')\n                .sort((a, b) => {\n                  if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;\n                  if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;\n                  return 0;\n                })\n                .map(x => (\n                  <TableRow key={x.id}>\n                    <TableCell>\n                      <div className='flex flex-col md:flex-row gap-2 md:gap-4'>\n                        {x.value}\n                        <div className='flex gap-2'>\n                          {x.isPrimary ? <Badge>{t(\"Primary\")}</Badge> : null}\n                          {!x.isVerified ? <Badge variant='destructive'>{t(\"Unverified\")}</Badge> : null}\n                          {x.usedForAuth ? <Badge variant='outline'>{t(\"Used for sign-in\")}</Badge> : null}\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"flex justify-end\">\n                      <ActionCell items={[\n                        ...(!x.isVerified ? [{\n                          item: t(\"Send verification email\"),\n                          onClick: async () => { await x.sendVerificationEmail(); },\n                        }] : []),\n                        ...(!x.isPrimary && x.isVerified ? [{\n                          item: t(\"Set as primary\"),\n                          onClick: async () => { await x.update({ isPrimary: true }); },\n                        }] :\n                          !x.isPrimary ? [{\n                            item: t(\"Set as primary\"),\n                            onClick: async () => {},\n                            disabled: true,\n                            disabledTooltip: t(\"Please verify your email first\"),\n                          }] : []),\n                        ...(!x.usedForAuth && x.isVerified ? [{\n                          item: t(\"Use for sign-in\"),\n                          onClick: async () => {\n                            try {\n                              await x.update({ usedForAuth: true });\n                            } catch (e) {\n                              if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) {\n                                alert(t(\"This email is already used for sign-in by another user.\"));\n                              }\n                            }\n                          }\n                        }] : []),\n                        ...(x.usedForAuth && !isLastEmail ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => { await x.update({ usedForAuth: false }); },\n                        }] : x.usedForAuth ? [{\n                          item: t(\"Stop using for sign-in\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }] : []),\n                        ...(!isLastEmail || !x.usedForAuth ? [{\n                          item: t(\"Remove\"),\n                          onClick: async () => { await x.delete(); },\n                          danger: true,\n                        }] : [{\n                          item: t(\"Remove\"),\n                          onClick: async () => {},\n                          disabled: true,\n                          disabledTooltip: t(\"You can not remove your last sign-in email\"),\n                        }]),\n                      ]}/>\n                    </TableCell>\n                  </TableRow>\n                ))}\n            </TableBody>\n          </Table>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components-page/account-settings/email-and-auth/mfa-section.js

@@ -7,14 +7,27 @@ import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/
 import { Button, Input, Typography } from "@stackframe/stack-ui";
 import * as QRCode from "qrcode";
 import { useEffect, useState } from "react";
-import { useStackApp, useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function MfaSection() {
+function MfaSection(props) {
   const { t } = useTranslation();
   const project = useStackApp().useProject();
-  const user = useUser({ or: "throw" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Multi-factor authentication"),
+        description: t("MFA management is not available in demo mode."),
+        children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("MFA management is not available in demo mode.") })
+      }
+    );
+  }
+  if (!user) {
+    return null;
+  }
   const [generatedSecret, setGeneratedSecret] = useState(null);
   const [qrCodeUrl, setQrCodeUrl] = useState(null);
   const [mfaCode, setMfaCode] = useState("");

package/dist/esm/components-page/account-settings/email-and-auth/mfa-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/mfa-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { createTOTPKeyURI, verifyTOTP } from \"@oslojs/otp\";\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, Input, Typography } from \"@stackframe/stack-ui\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from \"react\";\nimport { CurrentUser, Project } from '../../..';\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function MfaSection() {\n  const { t } = useTranslation();\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 && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <Section\n      title={t(\"Multi-factor authentication\")}\n      description={isEnabled\n        ? t(\"Multi-factor authentication is currently enabled.\")\n        : t(\"Multi-factor authentication is currently disabled.\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!isEnabled && generatedSecret && (\n          <>\n            <Typography>{t(\"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={t(\"TOTP multi-factor authentication QR code\")} />\n            <Typography>{t(\"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\">{t(\"Incorrect code. Please try again.\")}</Typography>\n            )}\n            <div className='flex'>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setGeneratedSecret(null);\n                  setQrCodeUrl(null);\n                  setMfaCode(\"\");\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </>\n        )}\n        <div className='flex gap-2'>\n          {isEnabled ? (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              }}\n            >\n              {t(\"Disable MFA\")}\n            </Button>\n          ) : !generatedSecret && (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              }}\n            >\n              {t(\"Enable MFA\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </Section>\n  );\n}\n\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);\n  return await QRCode.toDataURL(uri) as any;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/mfa-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { createTOTPKeyURI, verifyTOTP } from \"@oslojs/otp\";\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, Input, Typography } from \"@stackframe/stack-ui\";\nimport * as QRCode from 'qrcode';\nimport { useEffect, useState } from \"react\";\nimport { CurrentUser, Project } from '../../..';\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function MfaSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const project = useStackApp().useProject();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Multi-factor authentication\")}\n        description={t(\"MFA management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"MFA management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\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 && verifyTOTP(generatedSecret, 30, 6, mfaCode)) {\n        await handleSubmit();\n      }\n      setIsMaybeWrong(true);\n    });\n  }, [mfaCode, generatedSecret, handleSubmit]);\n\n  return (\n    <Section\n      title={t(\"Multi-factor authentication\")}\n      description={isEnabled\n        ? t(\"Multi-factor authentication is currently enabled.\")\n        : t(\"Multi-factor authentication is currently disabled.\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!isEnabled && generatedSecret && (\n          <>\n            <Typography>{t(\"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={t(\"TOTP multi-factor authentication QR code\")} />\n            <Typography>{t(\"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\">{t(\"Incorrect code. Please try again.\")}</Typography>\n            )}\n            <div className='flex'>\n              <Button\n                variant='secondary'\n                onClick={() => {\n                  setGeneratedSecret(null);\n                  setQrCodeUrl(null);\n                  setMfaCode(\"\");\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </>\n        )}\n        <div className='flex gap-2'>\n          {isEnabled ? (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({\n                  totpMultiFactorSecret: null,\n                });\n              }}\n            >\n              {t(\"Disable MFA\")}\n            </Button>\n          ) : !generatedSecret && (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                const secret = generateRandomValues(new Uint8Array(20));\n                setQrCodeUrl(await generateTotpQrCode(project, user, secret));\n                setGeneratedSecret(secret);\n              }}\n            >\n              {t(\"Enable MFA\")}\n            </Button>\n          )}\n        </div>\n      </div>\n    </Section>\n  );\n}\n\n\nasync function generateTotpQrCode(project: Project, user: CurrentUser, secret: Uint8Array) {\n  const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);\n  return await QRCode.toDataURL(uri) as any;\n}\n"],"mappings":"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","names":[]}

package/dist/esm/components-page/account-settings/email-and-auth/otp-section.js

@@ -1,13 +1,26 @@
 // src/components-page/account-settings/email-and-auth/otp-section.tsx
 import { Button, Typography } from "@stackframe/stack-ui";
 import { useState } from "react";
-import { useStackApp, useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function OtpSection() {
+function OtpSection(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("One-Time Password"),
+        description: t("OTP management is not available in demo mode."),
+        children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("OTP management is not available in demo mode.") })
+      }
+    );
+  }
+  if (!user) {
+    return null;
+  }
   const project = useStackApp().useProject();
   const contactChannels = user.useContactChannels();
   const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;

package/dist/esm/components-page/account-settings/email-and-auth/otp-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function OtpSection() {\n  const { t } = useTranslation();\n  const user = useUser({ or: \"throw\" });\n  const project = useStackApp().useProject();\n  const contactChannels = user.useContactChannels();\n  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;\n  const [disabling, setDisabling] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.magicLinkEnabled) {\n    return null;\n  }\n\n  const handleDisableOTP = async () => {\n    await user.update({ otpAuthEnabled: false });\n    setDisabling(false);\n  };\n\n  return (\n    <Section title={t(\"OTP sign-in\")} description={user.otpAuthEnabled ? t(\"OTP/magic link sign-in is currently enabled.\") : t(\"Enable sign-in via magic link or OTP sent to your sign-in emails.\")}>\n      <div className='flex md:justify-end'>\n        {hasValidEmail ? (\n          user.otpAuthEnabled ? (\n            !isLastAuth ? (\n              !disabling ? (\n                <Button\n                  variant='secondary'\n                  onClick={() => setDisabling(true)}\n                >\n                  {t(\"Disable OTP\")}\n                </Button>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDisableOTP}\n                    >\n                      {t(\"Disable\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDisabling(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )\n            ) : (\n              <Typography variant='secondary' type='label'>{t(\"OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n            )\n          ) : (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({ otpAuthEnabled: true });\n              }}\n            >\n              {t(\"Enable OTP\")}\n            </Button>\n          )\n        ) : (\n          <Typography variant='secondary' type='label'>{t(\"To enable OTP sign-in, please add a verified sign-in email.\")}</Typography>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AA6BR,cAWE,YAXF;AA3BT,SAAS,aAAa;AAC3B,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,QAAQ,CAAC;AACpC,QAAM,UAAU,YAAY,EAAE,WAAW;AACzC,QAAM,kBAAkB,KAAK,mBAAmB;AAChD,QAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;AACzG,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,QAAM,gBAAgB,gBAAgB,OAAO,OAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS;AAEhH,MAAI,CAAC,QAAQ,OAAO,kBAAkB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,YAAY;AACnC,UAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;AAC3C,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE,oBAAC,WAAQ,OAAO,EAAE,aAAa,GAAG,aAAa,KAAK,iBAAiB,EAAE,8CAA8C,IAAI,EAAE,mEAAmE,GAC5L,8BAAC,SAAI,WAAU,uBACZ,0BACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM,aAAa,IAAI;AAAA,MAE/B,YAAE,aAAa;AAAA;AAAA,EAClB,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,cAAW,SAAQ,eACjB,YAAE,yGAAyG,GAC9G;AAAA,IACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UAER,YAAE,SAAS;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,aAAa,KAAK;AAAA,UAEhC,YAAE,QAAQ;AAAA;AAAA,MACb;AAAA,OACF;AAAA,KACF,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,0FAA0F,GAAE,IAG9I;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,YAAY;AACnB,cAAM,KAAK,OAAO,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AAAA,MAEC,YAAE,YAAY;AAAA;AAAA,EACjB,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,6DAA6D,GAAE,GAEnH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function OtpSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"One-Time Password\")}\n        description={t(\"OTP management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"OTP management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const project = useStackApp().useProject();\n  const contactChannels = user.useContactChannels();\n  const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;\n  const [disabling, setDisabling] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.magicLinkEnabled) {\n    return null;\n  }\n\n  const handleDisableOTP = async () => {\n    await user.update({ otpAuthEnabled: false });\n    setDisabling(false);\n  };\n\n  return (\n    <Section title={t(\"OTP sign-in\")} description={user.otpAuthEnabled ? t(\"OTP/magic link sign-in is currently enabled.\") : t(\"Enable sign-in via magic link or OTP sent to your sign-in emails.\")}>\n      <div className='flex md:justify-end'>\n        {hasValidEmail ? (\n          user.otpAuthEnabled ? (\n            !isLastAuth ? (\n              !disabling ? (\n                <Button\n                  variant='secondary'\n                  onClick={() => setDisabling(true)}\n                >\n                  {t(\"Disable OTP\")}\n                </Button>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDisableOTP}\n                    >\n                      {t(\"Disable\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDisabling(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )\n            ) : (\n              <Typography variant='secondary' type='label'>{t(\"OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n            )\n          ) : (\n            <Button\n              variant='secondary'\n              onClick={async () => {\n                await user.update({ otpAuthEnabled: true });\n              }}\n            >\n              {t(\"Enable OTP\")}\n            </Button>\n          )\n        ) : (\n          <Typography variant='secondary' type='label'>{t(\"To enable OTP sign-in, please add a verified sign-in email.\")}</Typography>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAehB,cA2CU,YA3CV;AAbD,SAAS,WAAW,OAExB;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;AAGtE,MAAI,OAAO,YAAY,CAAC,MAAM;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,mBAAmB;AAAA,QAC5B,aAAa,EAAE,+CAA+C;AAAA,QAE9D,8BAAC,cAAW,SAAQ,aAAa,YAAE,+CAA+C,GAAE;AAAA;AAAA,IACtF;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,QAAM,UAAU,YAAY,EAAE,WAAW;AACzC,QAAM,kBAAkB,KAAK,mBAAmB;AAChD,QAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;AACzG,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAGhD,QAAM,gBAAgB,gBAAgB,OAAO,OAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS;AAEhH,MAAI,CAAC,QAAQ,OAAO,kBAAkB;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,YAAY;AACnC,UAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;AAC3C,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE,oBAAC,WAAQ,OAAO,EAAE,aAAa,GAAG,aAAa,KAAK,iBAAiB,EAAE,8CAA8C,IAAI,EAAE,mEAAmE,GAC5L,8BAAC,SAAI,WAAU,uBACZ,0BACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM,aAAa,IAAI;AAAA,MAE/B,YAAE,aAAa;AAAA;AAAA,EAClB,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,wBAAC,cAAW,SAAQ,eACjB,YAAE,yGAAyG,GAC9G;AAAA,IACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS;AAAA,UAER,YAAE,SAAS;AAAA;AAAA,MACd;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,aAAa,KAAK;AAAA,UAEhC,YAAE,QAAQ;AAAA;AAAA,MACb;AAAA,OACF;AAAA,KACF,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,0FAA0F,GAAE,IAG9I;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,YAAY;AACnB,cAAM,KAAK,OAAO,EAAE,gBAAgB,KAAK,CAAC;AAAA,MAC5C;AAAA,MAEC,YAAE,YAAY;AAAA;AAAA,EACjB,IAGF,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,6DAA6D,GAAE,GAEnH,GACF;AAEJ;","names":[]}

package/dist/esm/components-page/account-settings/email-and-auth/passkey-section.js

@@ -1,14 +1,27 @@
 // src/components-page/account-settings/email-and-auth/passkey-section.tsx
 import { Button, Typography } from "@stackframe/stack-ui";
 import { useState } from "react";
-import { useStackApp } from "../../..";
-import { useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
+import { useStackApp } from "../../../index.js";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function PasskeySection() {
+function PasskeySection(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Passkey"),
+        description: t("Passkey management is not available in demo mode."),
+        children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("Passkey management is not available in demo mode.") })
+      }
+    );
+  }
+  if (!user) {
+    return null;
+  }
   const stackApp = useStackApp();
   const project = stackApp.useProject();
   const contactChannels = user.useContactChannels();

package/dist/esm/components-page/account-settings/email-and-auth/passkey-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/passkey-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function PasskeySection() {\n  const { t } = useTranslation();\n  const user = useUser({ or: \"throw\" });\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n  const contactChannels = user.useContactChannels();\n\n\n  // passkey is enabled if there is a passkey\n  const hasPasskey = user.passkeyAuthEnabled;\n\n  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;\n  const [showConfirmationModal, setShowConfirmationModal] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.passkeyEnabled) {\n    return null;\n  }\n\n  const handleDeletePasskey = async () => {\n    await user.update({ passkeyAuthEnabled: false });\n    setShowConfirmationModal(false);\n  };\n\n\n  const handleAddNewPasskey = async () => {\n    await user.registerPasskey();\n  };\n\n  return (\n    <>\n      <Section title={t(\"Passkey\")} description={hasPasskey ? t(\"Passkey registered\") : t(\"Register a passkey\")}>\n        <div className='flex md:justify-end gap-2'>\n          {!hasValidEmail && (\n            <Typography variant='secondary' type='label'>{t(\"To enable Passkey sign-in, please add a verified sign-in email.\")}</Typography>\n          )}\n          {hasValidEmail && hasPasskey && isLastAuth && (\n            <Typography variant='secondary' type='label'>{t(\"Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n          )}\n          {!hasPasskey && hasValidEmail && (\n            <div>\n              <Button onClick={handleAddNewPasskey} variant='secondary'>{t(\"Add new passkey\")}</Button>\n            </div>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && (\n            <Button\n              variant='secondary'\n              onClick={() => setShowConfirmationModal(true)}\n            >\n              {t(\"Delete Passkey\")}\n            </Button>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && (\n            <div className='flex flex-col gap-2'>\n              <Typography variant='destructive'>\n                {t(\"Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.\")}\n              </Typography>\n              <div className='flex gap-2'>\n                <Button\n                  variant='destructive'\n                  onClick={handleDeletePasskey}\n                >\n                  {t(\"Disable\")}\n                </Button>\n                <Button\n                  variant='secondary'\n                  onClick={() => setShowConfirmationModal(false)}\n                >\n                  {t(\"Cancel\")}\n                </Button>\n              </div>\n            </div>\n          )}\n        </div>\n      </Section>\n\n\n    </>\n\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAkCpB,mBAIQ,KAuBE,YA3BV;AAhCG,SAAS,iBAAiB;AAC/B,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,QAAQ,CAAC;AACpC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,SAAS,WAAW;AACpC,QAAM,kBAAkB,KAAK,mBAAmB;AAIhD,QAAM,aAAa,KAAK;AAExB,QAAM,aAAa,KAAK,sBAAsB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;AAC7G,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AAGxE,QAAM,gBAAgB,gBAAgB,OAAO,OAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS;AAEhH,MAAI,CAAC,QAAQ,OAAO,gBAAgB;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,sBAAsB,YAAY;AACtC,UAAM,KAAK,OAAO,EAAE,oBAAoB,MAAM,CAAC;AAC/C,6BAAyB,KAAK;AAAA,EAChC;AAGA,QAAM,sBAAsB,YAAY;AACtC,UAAM,KAAK,gBAAgB;AAAA,EAC7B;AAEA,SACE,gCACE,8BAAC,WAAQ,OAAO,EAAE,SAAS,GAAG,aAAa,aAAa,EAAE,oBAAoB,IAAI,EAAE,oBAAoB,GACtG,+BAAC,SAAI,WAAU,6BACZ;AAAA,KAAC,iBACA,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,iEAAiE,GAAE;AAAA,IAEpH,iBAAiB,cAAc,cAC9B,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,8FAA8F,GAAE;AAAA,IAEjJ,CAAC,cAAc,iBACd,oBAAC,SACC,8BAAC,UAAO,SAAS,qBAAqB,SAAQ,aAAa,YAAE,iBAAiB,GAAE,GAClF;AAAA,IAED,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,yBAAyB,IAAI;AAAA,QAE3C,YAAE,gBAAgB;AAAA;AAAA,IACrB;AAAA,IAED,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,qBAAC,SAAI,WAAU,uBACb;AAAA,0BAAC,cAAW,SAAQ,eACjB,YAAE,8GAA8G,GACnH;AAAA,MACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS;AAAA,YAER,YAAE,SAAS;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,yBAAyB,KAAK;AAAA,YAE5C,YAAE,QAAQ;AAAA;AAAA,QACb;AAAA,SACF;AAAA,OACF;AAAA,KAEJ,GACF,GAGF;AAGJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/passkey-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp } from \"../../..\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function PasskeySection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Passkey\")}\n        description={t(\"Passkey management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"Passkey management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const stackApp = useStackApp();\n  const project = stackApp.useProject();\n  const contactChannels = user.useContactChannels();\n\n\n  // passkey is enabled if there is a passkey\n  const hasPasskey = user.passkeyAuthEnabled;\n\n  const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;\n  const [showConfirmationModal, setShowConfirmationModal] = useState(false);\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.isVerified && x.usedForAuth).length > 0;\n\n  if (!project.config.passkeyEnabled) {\n    return null;\n  }\n\n  const handleDeletePasskey = async () => {\n    await user.update({ passkeyAuthEnabled: false });\n    setShowConfirmationModal(false);\n  };\n\n\n  const handleAddNewPasskey = async () => {\n    await user.registerPasskey();\n  };\n\n  return (\n    <>\n      <Section title={t(\"Passkey\")} description={hasPasskey ? t(\"Passkey registered\") : t(\"Register a passkey\")}>\n        <div className='flex md:justify-end gap-2'>\n          {!hasValidEmail && (\n            <Typography variant='secondary' type='label'>{t(\"To enable Passkey sign-in, please add a verified sign-in email.\")}</Typography>\n          )}\n          {hasValidEmail && hasPasskey && isLastAuth && (\n            <Typography variant='secondary' type='label'>{t(\"Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method\")}</Typography>\n          )}\n          {!hasPasskey && hasValidEmail && (\n            <div>\n              <Button onClick={handleAddNewPasskey} variant='secondary'>{t(\"Add new passkey\")}</Button>\n            </div>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && (\n            <Button\n              variant='secondary'\n              onClick={() => setShowConfirmationModal(true)}\n            >\n              {t(\"Delete Passkey\")}\n            </Button>\n          )}\n          {hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && (\n            <div className='flex flex-col gap-2'>\n              <Typography variant='destructive'>\n                {t(\"Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.\")}\n              </Typography>\n              <div className='flex gap-2'>\n                <Button\n                  variant='destructive'\n                  onClick={handleDeletePasskey}\n                >\n                  {t(\"Disable\")}\n                </Button>\n                <Button\n                  variant='secondary'\n                  onClick={() => setShowConfirmationModal(false)}\n                >\n                  {t(\"Cancel\")}\n                </Button>\n              </div>\n            </div>\n          )}\n        </div>\n      </Section>\n\n\n    </>\n\n  );\n}\n"],"mappings":";AAIA,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAehB,SAqCJ,UArCI,KAgEM,YAhEN;AAbD,SAAS,eAAe,OAE5B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;AAGtE,MAAI,OAAO,YAAY,CAAC,MAAM;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,SAAS;AAAA,QAClB,aAAa,EAAE,mDAAmD;AAAA,QAElE,8BAAC,cAAW,SAAQ,aAAa,YAAE,mDAAmD,GAAE;AAAA;AAAA,IAC1F;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,SAAS,WAAW;AACpC,QAAM,kBAAkB,KAAK,mBAAmB;AAIhD,QAAM,aAAa,KAAK;AAExB,QAAM,aAAa,KAAK,sBAAsB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;AAC7G,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AAGxE,QAAM,gBAAgB,gBAAgB,OAAO,OAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS;AAEhH,MAAI,CAAC,QAAQ,OAAO,gBAAgB;AAClC,WAAO;AAAA,EACT;AAEA,QAAM,sBAAsB,YAAY;AACtC,UAAM,KAAK,OAAO,EAAE,oBAAoB,MAAM,CAAC;AAC/C,6BAAyB,KAAK;AAAA,EAChC;AAGA,QAAM,sBAAsB,YAAY;AACtC,UAAM,KAAK,gBAAgB;AAAA,EAC7B;AAEA,SACE,gCACE,8BAAC,WAAQ,OAAO,EAAE,SAAS,GAAG,aAAa,aAAa,EAAE,oBAAoB,IAAI,EAAE,oBAAoB,GACtG,+BAAC,SAAI,WAAU,6BACZ;AAAA,KAAC,iBACA,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,iEAAiE,GAAE;AAAA,IAEpH,iBAAiB,cAAc,cAC9B,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,8FAA8F,GAAE;AAAA,IAEjJ,CAAC,cAAc,iBACd,oBAAC,SACC,8BAAC,UAAO,SAAS,qBAAqB,SAAQ,aAAa,YAAE,iBAAiB,GAAE,GAClF;AAAA,IAED,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,yBAAyB,IAAI;AAAA,QAE3C,YAAE,gBAAgB;AAAA;AAAA,IACrB;AAAA,IAED,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,qBAAC,SAAI,WAAU,uBACb;AAAA,0BAAC,cAAW,SAAQ,eACjB,YAAE,8GAA8G,GACnH;AAAA,MACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS;AAAA,YAER,YAAE,SAAS;AAAA;AAAA,QACd;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,yBAAyB,KAAK;AAAA,YAE5C,YAAE,QAAQ;AAAA;AAAA,QACb;AAAA,SACF;AAAA,OACF;AAAA,KAEJ,GACF,GAGF;AAGJ;","names":[]}

package/dist/esm/components-page/account-settings/email-and-auth/password-section.js

@@ -7,15 +7,28 @@ import { Button, Input, Label, PasswordInput, Typography } from "@stackframe/sta
 import { 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 { useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
+import { useStackApp } from "../../../index.js";
+import { FormWarningText } from "../../../components/elements/form-warning.js";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function PasswordSection() {
+function PasswordSection(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "throw" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "throw" });
+  if (props?.mockMode && !user) {
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: t("Password"),
+        description: t("Password management is not available in demo mode."),
+        children: /* @__PURE__ */ jsx(Typography, { variant: "secondary", children: t("Password management is not available in demo mode.") })
+      }
+    );
+  }
+  if (!user) {
+    return null;
+  }
   const contactChannels = user.useContactChannels();
   const [changingPassword, setChangingPassword] = useState(false);
   const [loading, setLoading] = useState(false);

package/dist/esm/components-page/account-settings/email-and-auth/password-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { passwordSchema as schemaFieldsPasswordSchema, yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from '../../..';\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function PasswordSection() {\n  const { t } = useTranslation();\n  const user = useUser({ or: \"throw\" });\n  const contactChannels = user.useContactChannels();\n  const [changingPassword, setChangingPassword] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const project = useStackApp().useProject();\n\n  const passwordSchema = yupObject({\n    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your old password')) : yupString(),\n    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty(t('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], t('Passwords do not match')).defined().nonEmpty(t('Please repeat your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.usedForAuth).length > 0;\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = user.hasPassword\n        ? await user.updatePassword({ oldPassword: oldPassword!, newPassword })\n        : await user.setPassword({ password: newPassword! });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: t('Incorrect password') });\n      } else {\n        reset();\n        setChangingPassword(false);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!project.config.credentialEnabled) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Password\")}\n      description={user.hasPassword ? t(\"Update your password\") : t(\"Set a password for your account\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!changingPassword ? (\n          hasValidEmail ? (\n            <Button\n              variant='secondary'\n              onClick={() => setChangingPassword(true)}\n            >\n              {user.hasPassword ? t(\"Update password\") : t(\"Set password\")}\n            </Button>\n          ) : (\n            <Typography variant='secondary' type='label'>{t(\"To set a password, please add a sign-in email.\")}</Typography>\n          )\n        ) : (\n          <form\n            onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n            noValidate\n          >\n            {user.hasPassword && (\n              <>\n                <Label htmlFor=\"old-password\" className=\"mb-1\">{t(\"Old password\")}</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  autoComplete=\"current-password\"\n                  {...register(\"oldPassword\")}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n              </>\n            )}\n\n            <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">{t(\"New password\")}</Label>\n            <PasswordInput\n              id=\"new-password\"\n              autoComplete=\"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\">{t(\"Repeat new password\")}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              autoComplete=\"new-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            <div className=\"mt-6 flex gap-4\">\n              <Button type=\"submit\" loading={loading}>\n                {user.hasPassword ? t(\"Update Password\") : t(\"Set Password\")}\n              </Button>\n              <Button\n                variant=\"secondary\"\n                onClick={() => {\n                  setChangingPassword(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </form>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from '@stackframe/stack-shared/dist/helpers/password';\nimport { passwordSchema as schemaFieldsPasswordSchema, yupObject, yupString } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from '../../..';\nimport { FormWarningText } from \"../../../components/elements/form-warning\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\n\nexport function PasswordSection(props?: {\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : \"throw\" });\n\n  // In mock mode, show a placeholder message\n  if (props?.mockMode && !user) {\n    return (\n      <Section\n        title={t(\"Password\")}\n        description={t(\"Password management is not available in demo mode.\")}\n      >\n        <Typography variant='secondary'>{t(\"Password management is not available in demo mode.\")}</Typography>\n      </Section>\n    );\n  }\n\n  if (!user) {\n    return null; // This shouldn't happen in non-mock mode due to throw\n  }\n  const contactChannels = user.useContactChannels();\n  const [changingPassword, setChangingPassword] = useState(false);\n  const [loading, setLoading] = useState(false);\n  const project = useStackApp().useProject();\n\n  const passwordSchema = yupObject({\n    oldPassword: user.hasPassword ? schemaFieldsPasswordSchema.defined().nonEmpty(t('Please enter your old password')) : yupString(),\n    newPassword: schemaFieldsPasswordSchema.defined().nonEmpty(t('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], t('Passwords do not match')).defined().nonEmpty(t('Please repeat your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = useForm({\n    resolver: yupResolver(passwordSchema)\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  const hasValidEmail = contactChannels.filter(x => x.type === 'email' && x.usedForAuth).length > 0;\n\n  const onSubmit = async (data: yup.InferType<typeof passwordSchema>) => {\n    setLoading(true);\n    try {\n      const { oldPassword, newPassword } = data;\n      const error = user.hasPassword\n        ? await user.updatePassword({ oldPassword: oldPassword!, newPassword })\n        : await user.setPassword({ password: newPassword! });\n      if (error) {\n        setError('oldPassword', { type: 'manual', message: t('Incorrect password') });\n      } else {\n        reset();\n        setChangingPassword(false);\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('newPassword');\n  const registerPasswordRepeat = register('newPasswordRepeat');\n\n  if (!project.config.credentialEnabled) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Password\")}\n      description={user.hasPassword ? t(\"Update your password\") : t(\"Set a password for your account\")}\n    >\n      <div className='flex flex-col gap-4'>\n        {!changingPassword ? (\n          hasValidEmail ? (\n            <Button\n              variant='secondary'\n              onClick={() => setChangingPassword(true)}\n            >\n              {user.hasPassword ? t(\"Update password\") : t(\"Set password\")}\n            </Button>\n          ) : (\n            <Typography variant='secondary' type='label'>{t(\"To set a password, please add a sign-in email.\")}</Typography>\n          )\n        ) : (\n          <form\n            onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n            noValidate\n          >\n            {user.hasPassword && (\n              <>\n                <Label htmlFor=\"old-password\" className=\"mb-1\">{t(\"Old password\")}</Label>\n                <Input\n                  id=\"old-password\"\n                  type=\"password\"\n                  autoComplete=\"current-password\"\n                  {...register(\"oldPassword\")}\n                />\n                <FormWarningText text={errors.oldPassword?.message?.toString()} />\n              </>\n            )}\n\n            <Label htmlFor=\"new-password\" className=\"mt-4 mb-1\">{t(\"New password\")}</Label>\n            <PasswordInput\n              id=\"new-password\"\n              autoComplete=\"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\">{t(\"Repeat new password\")}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              autoComplete=\"new-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            <div className=\"mt-6 flex gap-4\">\n              <Button type=\"submit\" loading={loading}>\n                {user.hasPassword ? t(\"Update Password\") : t(\"Set Password\")}\n              </Button>\n              <Button\n                variant=\"secondary\"\n                onClick={() => {\n                  setChangingPassword(false);\n                  reset();\n                }}\n              >\n                {t(\"Cancel\")}\n              </Button>\n            </div>\n          </form>\n        )}\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB,4BAA4B,WAAW,iBAAiB;AACnF,SAAS,mBAAmB,kCAAkC;AAC9D,SAAS,QAAQ,OAAO,OAAO,eAAe,kBAAkB;AAChE,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,YAAY,SAAS;AACrB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAgBhB,SAoFM,UApFN,KAoFM,YApFN;AAbD,SAAS,gBAAgB,OAE7B;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,QAAQ,CAAC;AAGtE,MAAI,OAAO,YAAY,CAAC,MAAM;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,UAAU;AAAA,QACnB,aAAa,EAAE,oDAAoD;AAAA,QAEnE,8BAAC,cAAW,SAAQ,aAAa,YAAE,oDAAoD,GAAE;AAAA;AAAA,IAC3F;AAAA,EAEJ;AAEA,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,QAAM,kBAAkB,KAAK,mBAAmB;AAChD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,UAAU,YAAY,EAAE,WAAW;AAEzC,QAAM,iBAAiB,UAAU;AAAA,IAC/B,aAAa,KAAK,cAAc,2BAA2B,QAAQ,EAAE,SAAS,EAAE,gCAAgC,CAAC,IAAI,UAAU;AAAA,IAC/H,aAAa,2BAA2B,QAAQ,EAAE,SAAS,EAAE,4BAA4B,CAAC,EAAE,KAAK;AAAA,MAC/F,MAAM;AAAA,MACN,MAAM,CAAC,OAAO,QAAQ;AACpB,cAAM,QAAQ,iBAAiB,KAAK;AACpC,YAAI,OAAO;AACT,iBAAO,IAAI,YAAY,EAAE,SAAS,MAAM,QAAQ,CAAC;AAAA,QACnD,OAAO;AACL,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACD,mBAAmB,UAAU,EAAE,SAAS,EAAE,MAAM,CAAK,QAAI,aAAa,GAAG,IAAI,IAAI,GAAG,EAAE,wBAAwB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,6BAA6B,CAAC;AAAA,EACtK,CAAC;AAED,QAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,OAAO,GAAG,aAAa,MAAM,IAAI,QAAQ;AAAA,IAC9F,UAAU,YAAY,cAAc;AAAA,EACtC,CAAC;AAGD,QAAM,gBAAgB,gBAAgB,OAAO,OAAK,EAAE,SAAS,WAAW,EAAE,WAAW,EAAE,SAAS;AAEhG,QAAM,WAAW,OAAO,SAA+C;AACrE,eAAW,IAAI;AACf,QAAI;AACF,YAAM,EAAE,aAAa,YAAY,IAAI;AACrC,YAAM,QAAQ,KAAK,cACf,MAAM,KAAK,eAAe,EAAE,aAA2B,YAAY,CAAC,IACpE,MAAM,KAAK,YAAY,EAAE,UAAU,YAAa,CAAC;AACrD,UAAI,OAAO;AACT,iBAAS,eAAe,EAAE,MAAM,UAAU,SAAS,EAAE,oBAAoB,EAAE,CAAC;AAAA,MAC9E,OAAO;AACL,cAAM;AACN,4BAAoB,KAAK;AAAA,MAC3B;AAAA,IACF,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,mBAAmB,SAAS,aAAa;AAC/C,QAAM,yBAAyB,SAAS,mBAAmB;AAE3D,MAAI,CAAC,QAAQ,OAAO,mBAAmB;AACrC,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,UAAU;AAAA,MACnB,aAAa,KAAK,cAAc,EAAE,sBAAsB,IAAI,EAAE,iCAAiC;AAAA,MAE/F,8BAAC,SAAI,WAAU,uBACZ,WAAC,mBACA,gBACE;AAAA,QAAC;AAAA;AAAA,UACC,SAAQ;AAAA,UACR,SAAS,MAAM,oBAAoB,IAAI;AAAA,UAEtC,eAAK,cAAc,EAAE,iBAAiB,IAAI,EAAE,cAAc;AAAA;AAAA,MAC7D,IAEA,oBAAC,cAAW,SAAQ,aAAY,MAAK,SAAS,YAAE,gDAAgD,GAAE,IAGpG;AAAA,QAAC;AAAA;AAAA,UACC,UAAU,OAAK,2BAA2B,aAAa,QAAQ,EAAE,CAAC,CAAC;AAAA,UACnE,YAAU;AAAA,UAET;AAAA,iBAAK,eACJ,iCACE;AAAA,kCAAC,SAAM,SAAQ,gBAAe,WAAU,QAAQ,YAAE,cAAc,GAAE;AAAA,cAClE;AAAA,gBAAC;AAAA;AAAA,kBACC,IAAG;AAAA,kBACH,MAAK;AAAA,kBACL,cAAa;AAAA,kBACZ,GAAG,SAAS,aAAa;AAAA;AAAA,cAC5B;AAAA,cACA,oBAAC,mBAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,eAClE;AAAA,YAGF,oBAAC,SAAM,SAAQ,gBAAe,WAAU,aAAa,YAAE,cAAc,GAAE;AAAA,YACvE;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,cAAa;AAAA,gBACZ,GAAG;AAAA,gBACJ,UAAU,CAAC,MAAM;AACf,8BAAY,aAAa;AACzB,8BAAY,mBAAmB;AAC/B,oCAAkB,iBAAiB,SAAS,CAAC,CAAC;AAAA,gBAChD;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,mBAAgB,MAAM,OAAO,aAAa,SAAS,SAAS,GAAG;AAAA,YAEhE,oBAAC,SAAM,SAAQ,mBAAkB,WAAU,aAAa,YAAE,qBAAqB,GAAE;AAAA,YACjF;AAAA,cAAC;AAAA;AAAA,gBACC,IAAG;AAAA,gBACH,cAAa;AAAA,gBACZ,GAAG;AAAA,gBACJ,UAAU,CAAC,MAAM;AACf,8BAAY,aAAa;AACzB,8BAAY,mBAAmB;AAC/B,oCAAkB,uBAAuB,SAAS,CAAC,CAAC;AAAA,gBACtD;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,mBAAgB,MAAM,OAAO,mBAAmB,SAAS,SAAS,GAAG;AAAA,YAEtE,qBAAC,SAAI,WAAU,mBACb;AAAA,kCAAC,UAAO,MAAK,UAAS,SACnB,eAAK,cAAc,EAAE,iBAAiB,IAAI,EAAE,cAAc,GAC7D;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,SAAS,MAAM;AACb,wCAAoB,KAAK;AACzB,0BAAM;AAAA,kBACR;AAAA,kBAEC,YAAE,QAAQ;AAAA;AAAA,cACb;AAAA,eACF;AAAA;AAAA;AAAA,MACF,GAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1,14 +1,24 @@
 // src/components-page/account-settings/profile-page/profile-page.tsx
-import { ProfileImageEditor } from "../../../components/profile-image-editor";
-import { useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { EditableText } from "../editable-text";
-import { PageLayout } from "../page-layout";
-import { Section } from "../section";
+import { ProfileImageEditor } from "../../../components/profile-image-editor.js";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { EditableText } from "../editable-text.js";
+import { PageLayout } from "../page-layout.js";
+import { Section } from "../section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function ProfilePage() {
+function ProfilePage(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
+  const userFromHook = useUser({ or: props?.mockUser ? "return-null" : "redirect" });
+  const user = props?.mockUser ? {
+    displayName: props.mockUser.displayName || "John Doe",
+    profileImageUrl: props.mockUser.profileImageUrl || null,
+    update: async () => {
+      console.log("Mock update called");
+    }
+  } : userFromHook;
+  if (!user) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
     /* @__PURE__ */ jsx(
       Section,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/profile-page/profile-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { ProfileImageEditor } from \"../../../components/profile-image-editor\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { PageLayout } from \"../page-layout\";\nimport { Section } from \"../section\";\n\nexport function ProfilePage() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n\n  return (\n    <PageLayout>\n      <Section\n        title={t(\"User name\")}\n        description={t(\"This is a display name and is not used for authentication\")}\n      >\n        <EditableText\n          value={user.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await user.update({ displayName: newDisplayName });\n          }}/>\n      </Section>\n\n      <Section\n        title={t(\"Profile image\")}\n        description={t(\"Upload your own image as your avatar\")}\n      >\n        <ProfileImageEditor\n          user={user}\n          onProfileImageUrlChange={async (profileImageUrl) => {\n            await user.update({ profileImageUrl });\n          }}\n        />\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAOpB,SAKI,KALJ;AALG,SAAS,cAAc;AAC5B,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AAEvC,SACE,qBAAC,cACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW;AAAA,QACpB,aAAa,EAAE,2DAA2D;AAAA,QAE1E;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,KAAK,eAAe;AAAA,YAC3B,QAAQ,OAAO,mBAAmB;AAChC,oBAAM,KAAK,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA,YACnD;AAAA;AAAA,QAAE;AAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,eAAe;AAAA,QACxB,aAAa,EAAE,sCAAsC;AAAA,QAErD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,yBAAyB,OAAO,oBAAoB;AAClD,oBAAM,KAAK,OAAO,EAAE,gBAAgB,CAAC;AAAA,YACvC;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/profile-page/profile-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { ProfileImageEditor } from \"../../../components/profile-image-editor\";\nimport { useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { EditableText } from \"../editable-text\";\nimport { PageLayout } from \"../page-layout\";\nimport { Section } from \"../section\";\n\nexport function ProfilePage(props?: {\n  mockUser?: {\n    displayName?: string,\n    profileImageUrl?: string,\n  },\n}) {\n  const { t } = useTranslation();\n  const userFromHook = useUser({ or: props?.mockUser ? 'return-null' : 'redirect' });\n\n  // Use mock data if provided, otherwise use real user\n  const user = props?.mockUser ? {\n    displayName: props.mockUser.displayName || 'John Doe',\n    profileImageUrl: props.mockUser.profileImageUrl || null,\n    update: async () => {\n      // Mock update - do nothing in demo mode\n      console.log('Mock update called');\n    }\n  } : userFromHook;\n\n  if (!user) {\n    return null; // This shouldn't happen in practice\n  }\n\n  return (\n    <PageLayout>\n      <Section\n        title={t(\"User name\")}\n        description={t(\"This is a display name and is not used for authentication\")}\n      >\n        <EditableText\n          value={user.displayName || ''}\n          onSave={async (newDisplayName) => {\n            await user.update({ displayName: newDisplayName });\n          }}/>\n      </Section>\n\n      <Section\n        title={t(\"Profile image\")}\n        description={t(\"Upload your own image as your avatar\")}\n      >\n        <ProfileImageEditor\n          user={user as any}\n          onProfileImageUrlChange={async (profileImageUrl: string | null) => {\n            await user.update({ profileImageUrl });\n          }}\n        />\n      </Section>\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,0BAA0B;AACnC,SAAS,eAAe;AACxB,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AA0BpB,SAKI,KALJ;AAxBG,SAAS,YAAY,OAKzB;AACD,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,eAAe,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AAGjF,QAAM,OAAO,OAAO,WAAW;AAAA,IAC7B,aAAa,MAAM,SAAS,eAAe;AAAA,IAC3C,iBAAiB,MAAM,SAAS,mBAAmB;AAAA,IACnD,QAAQ,YAAY;AAElB,cAAQ,IAAI,oBAAoB;AAAA,IAClC;AAAA,EACF,IAAI;AAEJ,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,cACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,WAAW;AAAA,QACpB,aAAa,EAAE,2DAA2D;AAAA,QAE1E;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,KAAK,eAAe;AAAA,YAC3B,QAAQ,OAAO,mBAAmB;AAChC,oBAAM,KAAK,OAAO,EAAE,aAAa,eAAe,CAAC;AAAA,YACnD;AAAA;AAAA,QAAE;AAAA;AAAA,IACN;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,EAAE,eAAe;AAAA,QACxB,aAAa,EAAE,sCAAsC;AAAA,QAErD;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,yBAAyB,OAAO,oBAAmC;AACjE,oBAAM,KAAK,OAAO,EAAE,gBAAgB,CAAC;AAAA,YACvC;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -1,19 +1,31 @@
 // src/components-page/account-settings/settings/delete-account-section.tsx
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from "@stackframe/stack-ui";
 import { useState } from "react";
-import { useStackApp, useUser } from "../../../lib/hooks";
-import { useTranslation } from "../../../lib/translations";
-import { Section } from "../section";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function DeleteAccountSection() {
+function DeleteAccountSection(props) {
   const { t } = useTranslation();
-  const user = useUser({ or: "redirect" });
+  const user = useUser({ or: props?.mockMode ? "return-null" : "redirect" });
   const app = useStackApp();
   const project = app.useProject();
   const [deleting, setDeleting] = useState(false);
-  if (!project.config.clientUserDeletionEnabled) {
+  const showDeleteSection = props?.mockMode || project.config.clientUserDeletionEnabled;
+  if (!showDeleteSection) {
     return null;
   }
+  const handleDeleteAccount = async () => {
+    if (props?.mockMode) {
+      alert("Mock mode: Account deletion clicked");
+      setDeleting(false);
+      return;
+    }
+    if (user) {
+      await user.delete();
+      await app.redirectToHome();
+    }
+  };
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -35,10 +47,7 @@ function DeleteAccountSection() {
               Button,
               {
                 variant: "destructive",
-                onClick: async () => {
-                  await user.delete();
-                  await app.redirectToHome();
-                },
+                onClick: handleDeleteAccount,
                 children: t("Delete Account")
               }
             ),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/delete-account-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function DeleteAccountSection() {\n  const { t } = useTranslation();\n  const user = useUser({ or: 'redirect' });\n  const app = useStackApp();\n  const project = app.useProject();\n  const [deleting, setDeleting] = useState(false);\n  if (!project.config.clientUserDeletionEnabled) {\n    return null;\n  }\n\n  return (\n    <Section\n      title={t(\"Delete Account\")}\n      description={t(\"Permanently remove your account and all associated data\")}\n    >\n      <div className='stack-scope flex flex-col items-stretch'>\n        <Accordion type=\"single\" collapsible className=\"w-full\">\n          <AccordionItem value=\"item-1\">\n            <AccordionTrigger>{t(\"Danger zone\")}</AccordionTrigger>\n            <AccordionContent>\n              {!deleting ? (\n                <div>\n                  <Button\n                    variant='destructive'\n                    onClick={() => setDeleting(true)}\n                  >\n                    {t(\"Delete account\")}\n                  </Button>\n                </div>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={async () => {\n                        await user.delete();\n                        await app.redirectToHome();\n                      }}\n                    >\n                      {t(\"Delete Account\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDeleting(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,WAAW,kBAAkB,eAAe,kBAAkB,QAAQ,kBAAkB;AACjG,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAoBZ,cAgBM,YAhBN;AAlBL,SAAS,uBAAuB;AACrC,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,WAAW,CAAC;AACvC,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,MAAI,CAAC,QAAQ,OAAO,2BAA2B;AAC7C,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,gBAAgB;AAAA,MACzB,aAAa,EAAE,yDAAyD;AAAA,MAExE,8BAAC,SAAI,WAAU,2CACb,8BAAC,aAAU,MAAK,UAAS,aAAW,MAAC,WAAU,UAC7C,+BAAC,iBAAc,OAAM,UACnB;AAAA,4BAAC,oBAAkB,YAAE,aAAa,GAAE;AAAA,QACpC,oBAAC,oBACE,WAAC,WACA,oBAAC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,YAAY,IAAI;AAAA,YAE9B,YAAE,gBAAgB;AAAA;AAAA,QACrB,GACF,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,cAAW,SAAQ,eACjB,YAAE,gHAAgH,GACrH;AAAA,UACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS,YAAY;AACnB,wBAAM,KAAK,OAAO;AAClB,wBAAM,IAAI,eAAe;AAAA,gBAC3B;AAAA,gBAEC,YAAE,gBAAgB;AAAA;AAAA,YACrB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS,MAAM,YAAY,KAAK;AAAA,gBAE/B,YAAE,QAAQ;AAAA;AAAA,YACb;AAAA,aACF;AAAA,WACF,GAEJ;AAAA,SACF,GACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/delete-account-section.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Typography } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useStackApp, useUser } from \"../../../lib/hooks\";\nimport { useTranslation } from \"../../../lib/translations\";\nimport { Section } from \"../section\";\n\nexport function DeleteAccountSection(props?: { mockMode?: boolean }) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props?.mockMode ? 'return-null' : 'redirect' });\n  const app = useStackApp();\n  const project = app.useProject();\n  const [deleting, setDeleting] = useState(false);\n\n  // In mock mode, always show the delete section\n  const showDeleteSection = props?.mockMode || project.config.clientUserDeletionEnabled;\n\n  if (!showDeleteSection) {\n    return null;\n  }\n\n  const handleDeleteAccount = async () => {\n    if (props?.mockMode) {\n      // Mock mode - just show an alert\n      alert(\"Mock mode: Account deletion clicked\");\n      setDeleting(false);\n      return;\n    }\n\n    if (user) {\n      await user.delete();\n      await app.redirectToHome();\n    }\n  };\n\n  return (\n    <Section\n      title={t(\"Delete Account\")}\n      description={t(\"Permanently remove your account and all associated data\")}\n    >\n      <div className='stack-scope flex flex-col items-stretch'>\n        <Accordion type=\"single\" collapsible className=\"w-full\">\n          <AccordionItem value=\"item-1\">\n            <AccordionTrigger>{t(\"Danger zone\")}</AccordionTrigger>\n            <AccordionContent>\n              {!deleting ? (\n                <div>\n                  <Button\n                    variant='destructive'\n                    onClick={() => setDeleting(true)}\n                  >\n                    {t(\"Delete account\")}\n                  </Button>\n                </div>\n              ) : (\n                <div className='flex flex-col gap-2'>\n                  <Typography variant='destructive'>\n                    {t(\"Are you sure you want to delete your account? This action is IRREVERSIBLE and will delete ALL associated data.\")}\n                  </Typography>\n                  <div className='flex gap-2'>\n                    <Button\n                      variant='destructive'\n                      onClick={handleDeleteAccount}\n                    >\n                      {t(\"Delete Account\")}\n                    </Button>\n                    <Button\n                      variant='secondary'\n                      onClick={() => setDeleting(false)}\n                    >\n                      {t(\"Cancel\")}\n                    </Button>\n                  </div>\n                </div>\n              )}\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n      </div>\n    </Section>\n  );\n}\n"],"mappings":";AAIA,SAAS,WAAW,kBAAkB,eAAe,kBAAkB,QAAQ,kBAAkB;AACjG,SAAS,gBAAgB;AACzB,SAAS,aAAa,eAAe;AACrC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAsCZ,cAgBM,YAhBN;AApCL,SAAS,qBAAqB,OAAgC;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,WAAW,CAAC;AACzE,QAAM,MAAM,YAAY;AACxB,QAAM,UAAU,IAAI,WAAW;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAG9C,QAAM,oBAAoB,OAAO,YAAY,QAAQ,OAAO;AAE5D,MAAI,CAAC,mBAAmB;AACtB,WAAO;AAAA,EACT;AAEA,QAAM,sBAAsB,YAAY;AACtC,QAAI,OAAO,UAAU;AAEnB,YAAM,qCAAqC;AAC3C,kBAAY,KAAK;AACjB;AAAA,IACF;AAEA,QAAI,MAAM;AACR,YAAM,KAAK,OAAO;AAClB,YAAM,IAAI,eAAe;AAAA,IAC3B;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,gBAAgB;AAAA,MACzB,aAAa,EAAE,yDAAyD;AAAA,MAExE,8BAAC,SAAI,WAAU,2CACb,8BAAC,aAAU,MAAK,UAAS,aAAW,MAAC,WAAU,UAC7C,+BAAC,iBAAc,OAAM,UACnB;AAAA,4BAAC,oBAAkB,YAAE,aAAa,GAAE;AAAA,QACpC,oBAAC,oBACE,WAAC,WACA,oBAAC,SACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM,YAAY,IAAI;AAAA,YAE9B,YAAE,gBAAgB;AAAA;AAAA,QACrB,GACF,IAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,cAAW,SAAQ,eACjB,YAAE,gHAAgH,GACrH;AAAA,UACA,qBAAC,SAAI,WAAU,cACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS;AAAA,gBAER,YAAE,gBAAgB;AAAA;AAAA,YACrB;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,SAAS,MAAM,YAAY,KAAK;AAAA,gBAE/B,YAAE,QAAQ;AAAA;AAAA,YACb;AAAA,aACF;AAAA,WACF,GAEJ;AAAA,SACF,GACF,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

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

@@ -1,12 +1,12 @@
 // src/components-page/account-settings/settings/settings-page.tsx
-import { PageLayout } from "../page-layout";
-import { DeleteAccountSection } from "./delete-account-section";
-import { SignOutSection } from "./sign-out-section";
+import { PageLayout } from "../page-layout.js";
+import { DeleteAccountSection } from "./delete-account-section.js";
+import { SignOutSection } from "./sign-out-section.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-function SettingsPage() {
+function SettingsPage(props) {
   return /* @__PURE__ */ jsxs(PageLayout, { children: [
-    /* @__PURE__ */ jsx(DeleteAccountSection, {}),
-    /* @__PURE__ */ jsx(SignOutSection, {})
+    /* @__PURE__ */ jsx(DeleteAccountSection, { mockMode: props?.mockMode }),
+    /* @__PURE__ */ jsx(SignOutSection, { mockMode: props?.mockMode })
   ] });
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/settings-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { PageLayout } from \"../page-layout\";\nimport { DeleteAccountSection } from \"./delete-account-section\";\nimport { SignOutSection } from \"./sign-out-section\";\n\n\nexport function SettingsPage() {\n  return (\n    <PageLayout>\n      <DeleteAccountSection />\n      <SignOutSection />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAK3B,SACE,KADF;AAFG,SAAS,eAAe;AAC7B,SACE,qBAAC,cACC;AAAA,wBAAC,wBAAqB;AAAA,IACtB,oBAAC,kBAAe;AAAA,KAClB;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../src/components-page/account-settings/settings/settings-page.tsx"],"sourcesContent":["\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY\n//===========================================\nimport { PageLayout } from \"../page-layout\";\nimport { DeleteAccountSection } from \"./delete-account-section\";\nimport { SignOutSection } from \"./sign-out-section\";\n\n\nexport function SettingsPage(props?: {\n  mockMode?: boolean,\n}) {\n  return (\n    <PageLayout>\n      <DeleteAccountSection mockMode={props?.mockMode} />\n      <SignOutSection mockMode={props?.mockMode} />\n    </PageLayout>\n  );\n}\n"],"mappings":";AAIA,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAO3B,SACE,KADF;AAJG,SAAS,aAAa,OAE1B;AACD,SACE,qBAAC,cACC;AAAA,wBAAC,wBAAqB,UAAU,OAAO,UAAU;AAAA,IACjD,oBAAC,kBAAe,UAAU,OAAO,UAAU;AAAA,KAC7C;AAEJ;","names":[]}