@stackframe/tanstack-start 0.0.1 → 2.8.92

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

@@ -0,0 +1,121 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../../chunk-BE-pF4vm.js');
+let _stackframe_stack_shared_dist_utils_errors = require("@stackframe/stack-shared/dist/utils/errors");
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _________lib_hooks_js = require("../../../lib/hooks.js");
+let _________lib_translations_js = require("../../../lib/translations.js");
+let _oslojs_otp = require("@oslojs/otp");
+let _stackframe_stack_shared_dist_hooks_use_async_callback = require("@stackframe/stack-shared/dist/hooks/use-async-callback");
+let _stackframe_stack_shared_dist_utils_crypto = require("@stackframe/stack-shared/dist/utils/crypto");
+let qrcode = require("qrcode");
+qrcode = require_chunk.__toESM(qrcode);
+let ___section_js = require("../section.js");
+
+//#region src/components-page/account-settings/email-and-auth/mfa-section.tsx
+function MfaSection(props) {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	const project = (0, _________lib_hooks_js.useStackApp)().useProject();
+	const user = (0, _________lib_hooks_js.useUser)({ or: props?.mockMode ? "return-null" : "throw" });
+	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+		title: t("Multi-factor authentication"),
+		description: t("MFA management is not available in demo mode."),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			variant: "secondary",
+			children: t("MFA management is not available in demo mode.")
+		})
+	});
+	if (!user) return null;
+	const [generatedSecret, setGeneratedSecret] = (0, react.useState)(null);
+	const [qrCodeUrl, setQrCodeUrl] = (0, react.useState)(null);
+	const [mfaCode, setMfaCode] = (0, react.useState)("");
+	const [isMaybeWrong, setIsMaybeWrong] = (0, react.useState)(false);
+	const isEnabled = user.isMultiFactorRequired;
+	const [handleSubmit, isLoading] = (0, _stackframe_stack_shared_dist_hooks_use_async_callback.useAsyncCallback)(async () => {
+		await user.update({ totpMultiFactorSecret: generatedSecret });
+		setGeneratedSecret(null);
+		setQrCodeUrl(null);
+		setMfaCode("");
+	}, [generatedSecret, user]);
+	(0, react.useEffect)(() => {
+		setIsMaybeWrong(false);
+		(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(async () => {
+			if (generatedSecret && (0, _oslojs_otp.verifyTOTP)(generatedSecret, 30, 6, mfaCode)) await handleSubmit();
+			setIsMaybeWrong(true);
+		});
+	}, [
+		mfaCode,
+		generatedSecret,
+		handleSubmit
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+		title: t("Multi-factor authentication"),
+		description: isEnabled ? t("Multi-factor authentication is currently enabled.") : t("Multi-factor authentication is currently disabled."),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-4",
+			children: [!isEnabled && generatedSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: t("Scan this QR code with your authenticator app:") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+					width: 200,
+					height: 200,
+					src: qrCodeUrl ?? (0, _stackframe_stack_shared_dist_utils_errors.throwErr)("TOTP QR code failed to generate"),
+					alt: t("TOTP multi-factor authentication QR code")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: t("Then, enter your six-digit MFA code:") }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Input, {
+					value: mfaCode,
+					onChange: (e) => {
+						setIsMaybeWrong(false);
+						setMfaCode(e.target.value);
+					},
+					placeholder: "123456",
+					maxLength: 6,
+					disabled: isLoading
+				}),
+				isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					variant: "destructive",
+					children: t("Incorrect code. Please try again.")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+						variant: "secondary",
+						onClick: () => {
+							setGeneratedSecret(null);
+							setQrCodeUrl(null);
+							setMfaCode("");
+						},
+						children: t("Cancel")
+					})
+				})
+			] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex gap-2",
+				children: isEnabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					variant: "secondary",
+					onClick: async () => {
+						await user.update({ totpMultiFactorSecret: null });
+					},
+					children: t("Disable MFA")
+				}) : !generatedSecret && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					variant: "secondary",
+					onClick: async () => {
+						const secret = (0, _stackframe_stack_shared_dist_utils_crypto.generateRandomValues)(new Uint8Array(20));
+						setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+						setGeneratedSecret(secret);
+					},
+					children: t("Enable MFA")
+				})
+			})]
+		})
+	});
+}
+async function generateTotpQrCode(project, user, secret) {
+	const uri = (0, _oslojs_otp.createTOTPKeyURI)(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);
+	return await qrcode.toDataURL(uri);
+}
+
+//#endregion
+exports.MfaSection = MfaSection;
+//# sourceMappingURL=mfa-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mfa-section.js","names":["Section","Typography","Input","Button","QRCode"],"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, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\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":";;;;;;;;;;;;;;;;;AAiBA,SAAgB,WAAW,OAExB;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,kDAAuB,CAAC,YAAY;CAC1C,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,EAAE,gDAAgD;YAE/D,2CAACC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,CAAC,iBAAiB,0CAAkD,KAAK;CAC/E,MAAM,CAAC,WAAW,oCAAwC,KAAK;CAC/D,MAAM,CAAC,SAAS,kCAA+B,GAAG;CAClD,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAM,YAAY,KAAK;CAEvB,MAAM,CAAC,cAAc,0FAA8B,YAAY;AAC7D,QAAM,KAAK,OAAO,EAChB,uBAAuB,iBACxB,CAAC;AACF,qBAAmB,KAAK;AACxB,eAAa,KAAK;AAClB,aAAW,GAAG;IACb,CAAC,iBAAiB,KAAK,CAAC;AAE3B,4BAAgB;AACd,kBAAgB,MAAM;AACtB,+EAA2B,YAAY;AACrC,OAAI,+CAA8B,iBAAiB,IAAI,GAAG,QAAQ,CAChE,OAAM,cAAc;AAEtB,mBAAgB,KAAK;IACrB;IACD;EAAC;EAAS;EAAiB;EAAa,CAAC;AAE5C,QACE,2CAACD;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,YACT,EAAE,oDAAoD,GACtD,EAAE,qDAAqD;YAE3D,4CAAC;GAAI,WAAU;cACZ,CAAC,aAAa,mBACb;IACE,2CAACC,6CAAY,EAAE,iDAAiD,GAAc;IAC9E,2CAAC;KAAI,OAAO;KAAK,QAAQ;KAAK,KAAK,sEAAsB,kCAAkC;KAAE,KAAK,EAAE,2CAA2C;MAAI;IACnJ,2CAACA,6CAAY,EAAE,uCAAuC,GAAc;IACpE,2CAACC;KACC,OAAO;KACP,WAAW,MAAM;AACf,sBAAgB,MAAM;AACtB,iBAAW,EAAE,OAAO,MAAM;;KAE5B,aAAY;KACZ,WAAW;KACX,UAAU;MACV;IACD,gBAAgB,QAAQ,WAAW,KAClC,2CAACD;KAAW,SAAQ;eAAe,EAAE,oCAAoC;MAAc;IAEzF,2CAAC;KAAI,WAAU;eACb,2CAACE;MACC,SAAQ;MACR,eAAe;AACb,0BAAmB,KAAK;AACxB,oBAAa,KAAK;AAClB,kBAAW,GAAG;;gBAGf,EAAE,SAAS;OACL;MACL;OACL,EAEL,2CAAC;IAAI,WAAU;cACZ,YACC,2CAACA;KACC,SAAQ;KACR,SAAS,YAAY;AACnB,YAAM,KAAK,OAAO,EAChB,uBAAuB,MACxB,CAAC;;eAGH,EAAE,cAAc;MACV,GACP,CAAC,mBACH,2CAACA;KACC,SAAQ;KACR,SAAS,YAAY;MACnB,MAAM,8EAA8B,IAAI,WAAW,GAAG,CAAC;AACvD,mBAAa,MAAM,mBAAmB,SAAS,MAAM,OAAO,CAAC;AAC7D,yBAAmB,OAAO;;eAG3B,EAAE,aAAa;MACT;KAEP;IACF;GACE;;AAKd,eAAe,mBAAmB,SAAkB,MAAmB,QAAoB;CACzF,MAAM,wCAAuB,QAAQ,aAAa,KAAK,gBAAgB,KAAK,IAAI,QAAQ,IAAI,EAAE;AAC9F,QAAO,MAAMC,OAAO,UAAU,IAAI"}

package/dist/components-page/account-settings/email-and-auth/otp-section.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/email-and-auth/otp-section.d.ts
+declare function OtpSection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { OtpSection };
+//# sourceMappingURL=otp-section.d.ts.map

package/dist/components-page/account-settings/email-and-auth/otp-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-section.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/email-and-auth/otp-section.tsx"],"mappings":";;;iBAUgB,UAAA,CAAW,KAAA;EACzB,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,80 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _________lib_hooks_js = require("../../../lib/hooks.js");
+let _________lib_translations_js = require("../../../lib/translations.js");
+let ___section_js = require("../section.js");
+
+//#region src/components-page/account-settings/email-and-auth/otp-section.tsx
+function OtpSection(props) {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	const user = (0, _________lib_hooks_js.useUser)({ or: props?.mockMode ? "return-null" : "throw" });
+	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+		title: t("One-Time Password"),
+		description: t("OTP management is not available in demo mode."),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			variant: "secondary",
+			children: t("OTP management is not available in demo mode.")
+		})
+	});
+	if (!user) return null;
+	const project = (0, _________lib_hooks_js.useStackApp)().useProject();
+	const contactChannels = user.useContactChannels();
+	const isLastAuth = user.otpAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.passkeyAuthEnabled;
+	const [disabling, setDisabling] = (0, react.useState)(false);
+	const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
+	if (!project.config.magicLinkEnabled) return null;
+	const handleDisableOTP = async () => {
+		await user.update({ otpAuthEnabled: false });
+		setDisabling(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.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."),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex md:justify-end",
+			children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				variant: "secondary",
+				onClick: () => setDisabling(true),
+				children: t("Disable OTP")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					variant: "destructive",
+					children: t("Are you sure you want to disable OTP sign-in? You will not be able to sign in with only emails anymore.")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+						variant: "destructive",
+						onClick: handleDisableOTP,
+						children: t("Disable")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+						variant: "secondary",
+						onClick: () => setDisabling(false),
+						children: t("Cancel")
+					})]
+				})]
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				variant: "secondary",
+				type: "label",
+				children: t("OTP sign-in is enabled and cannot be disabled as it is currently the only sign-in method")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				variant: "secondary",
+				onClick: async () => {
+					await user.update({ otpAuthEnabled: true });
+				},
+				children: t("Enable OTP")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				variant: "secondary",
+				type: "label",
+				children: t("To enable OTP sign-in, please add a verified sign-in email.")
+			})
+		})
+	});
+}
+
+//#endregion
+exports.OtpSection = OtpSection;
+//# sourceMappingURL=otp-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-section.js","names":["Section","Typography","Button"],"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, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\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":";;;;;;;;;;AAUA,SAAgB,WAAW,OAExB;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,oBAAoB;EAC7B,aAAa,EAAE,gDAAgD;YAE/D,2CAACC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,kDAAuB,CAAC,YAAY;CAC1C,MAAM,kBAAkB,KAAK,oBAAoB;CACjD,MAAM,aAAa,KAAK,kBAAkB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CACzG,MAAM,CAAC,WAAW,oCAAyB,MAAM;CAGjD,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,YAAY,CAAC,SAAS;AAEhH,KAAI,CAAC,QAAQ,OAAO,iBAClB,QAAO;CAGT,MAAM,mBAAmB,YAAY;AACnC,QAAM,KAAK,OAAO,EAAE,gBAAgB,OAAO,CAAC;AAC5C,eAAa,MAAM;;AAGrB,QACE,2CAACD;EAAQ,OAAO,EAAE,cAAc;EAAE,aAAa,KAAK,iBAAiB,EAAE,+CAA+C,GAAG,EAAE,oEAAoE;YAC7L,2CAAC;GAAI,WAAU;aACZ,gBACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC,2CAACE;IACC,SAAQ;IACR,eAAe,aAAa,KAAK;cAEhC,EAAE,cAAc;KACV,GAET,4CAAC;IAAI,WAAU;eACb,2CAACD;KAAW,SAAQ;eACjB,EAAE,0GAA0G;MAClG,EACb,4CAAC;KAAI,WAAU;gBACb,2CAACC;MACC,SAAQ;MACR,SAAS;gBAER,EAAE,UAAU;OACN,EACT,2CAACA;MACC,SAAQ;MACR,eAAe,aAAa,MAAM;gBAEjC,EAAE,SAAS;OACL;MACL;KACF,GAGR,2CAACD;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,2FAA2F;KAAc,GAG3J,2CAACC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,WAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;;cAG5C,EAAE,aAAa;KACT,GAGX,2CAACD;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,8DAA8D;KAAc;IAE1H;GACE"}

package/dist/components-page/account-settings/email-and-auth/passkey-section.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/email-and-auth/passkey-section.d.ts
+declare function PasskeySection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { PasskeySection };
+//# sourceMappingURL=passkey-section.d.ts.map

package/dist/components-page/account-settings/email-and-auth/passkey-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-section.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/email-and-auth/passkey-section.tsx"],"mappings":";;;iBAWgB,cAAA,CAAe,KAAA;EAC7B,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,89 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _________lib_hooks_js = require("../../../lib/hooks.js");
+let _________lib_translations_js = require("../../../lib/translations.js");
+let ___section_js = require("../section.js");
+let _________index_js = require("../../../index.js");
+
+//#region src/components-page/account-settings/email-and-auth/passkey-section.tsx
+function PasskeySection(props) {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	const user = (0, _________lib_hooks_js.useUser)({ or: props?.mockMode ? "return-null" : "throw" });
+	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+		title: t("Passkey"),
+		description: t("Passkey management is not available in demo mode."),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			variant: "secondary",
+			children: t("Passkey management is not available in demo mode.")
+		})
+	});
+	if (!user) return null;
+	const project = (0, _________index_js.useStackApp)().useProject();
+	const contactChannels = user.useContactChannels();
+	const hasPasskey = user.passkeyAuthEnabled;
+	const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;
+	const [showConfirmationModal, setShowConfirmationModal] = (0, react.useState)(false);
+	const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.isVerified && x.usedForAuth).length > 0;
+	if (!project.config.passkeyEnabled) return null;
+	const handleDeletePasskey = async () => {
+		await user.update({ passkeyAuthEnabled: false });
+		setShowConfirmationModal(false);
+	};
+	const handleAddNewPasskey = async () => {
+		await user.registerPasskey();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+		title: t("Passkey"),
+		description: hasPasskey ? t("Passkey registered") : t("Register a passkey"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex md:justify-end gap-2",
+			children: [
+				!hasValidEmail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					variant: "secondary",
+					type: "label",
+					children: t("To enable Passkey sign-in, please add a verified sign-in email.")
+				}),
+				hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					variant: "secondary",
+					type: "label",
+					children: t("Passkey sign-in is enabled and cannot be disabled as it is currently the only sign-in method")
+				}),
+				!hasPasskey && hasValidEmail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					onClick: handleAddNewPasskey,
+					variant: "secondary",
+					children: t("Add new passkey")
+				}) }),
+				hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+					variant: "secondary",
+					onClick: () => setShowConfirmationModal(true),
+					children: t("Delete Passkey")
+				}),
+				hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+						variant: "destructive",
+						children: t("Are you sure you want to disable Passkey sign-in? You will not be able to sign in with your passkey anymore.")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+							variant: "destructive",
+							onClick: handleDeletePasskey,
+							children: t("Disable")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+							variant: "secondary",
+							onClick: () => setShowConfirmationModal(false),
+							children: t("Cancel")
+						})]
+					})]
+				})
+			]
+		})
+	}) });
+}
+
+//#endregion
+exports.PasskeySection = PasskeySection;
+//# sourceMappingURL=passkey-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-section.js","names":["Section","Typography","Button"],"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, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\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":";;;;;;;;;;;AAWA,SAAgB,eAAe,OAE5B;CACD,MAAM,EAAE,wDAAsB;CAC9B,MAAM,0CAAe,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,2CAACA;EACC,OAAO,EAAE,UAAU;EACnB,aAAa,EAAE,oDAAoD;YAEnE,2CAACC;GAAW,SAAQ;aAAa,EAAE,oDAAoD;IAAc;GAC7F;AAId,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,8CADwB,CACL,YAAY;CACrC,MAAM,kBAAkB,KAAK,oBAAoB;CAIjD,MAAM,aAAa,KAAK;CAExB,MAAM,aAAa,KAAK,sBAAsB,CAAC,KAAK,eAAe,KAAK,eAAe,WAAW,KAAK,CAAC,KAAK;CAC7G,MAAM,CAAC,uBAAuB,gDAAqC,MAAM;CAGzE,MAAM,gBAAgB,gBAAgB,QAAO,MAAK,EAAE,SAAS,WAAW,EAAE,cAAc,EAAE,YAAY,CAAC,SAAS;AAEhH,KAAI,CAAC,QAAQ,OAAO,eAClB,QAAO;CAGT,MAAM,sBAAsB,YAAY;AACtC,QAAM,KAAK,OAAO,EAAE,oBAAoB,OAAO,CAAC;AAChD,2BAAyB,MAAM;;CAIjC,MAAM,sBAAsB,YAAY;AACtC,QAAM,KAAK,iBAAiB;;AAG9B,QACE,mFACE,2CAACD;EAAQ,OAAO,EAAE,UAAU;EAAE,aAAa,aAAa,EAAE,qBAAqB,GAAG,EAAE,qBAAqB;YACvG,4CAAC;GAAI,WAAU;;IACZ,CAAC,iBACA,2CAACC;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,kEAAkE;MAAc;IAEjI,iBAAiB,cAAc,cAC9B,2CAACA;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,+FAA+F;MAAc;IAE9J,CAAC,cAAc,iBACd,2CAAC,mBACC,2CAACC;KAAO,SAAS;KAAqB,SAAQ;eAAa,EAAE,kBAAkB;MAAU,GACrF;IAEP,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C,2CAACA;KACC,SAAQ;KACR,eAAe,yBAAyB,KAAK;eAE5C,EAAE,iBAAiB;MACb;IAEV,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,4CAAC;KAAI,WAAU;gBACb,2CAACD;MAAW,SAAQ;gBACjB,EAAE,+GAA+G;OACvG,EACb,4CAAC;MAAI,WAAU;iBACb,2CAACC;OACC,SAAQ;OACR,SAAS;iBAER,EAAE,UAAU;QACN,EACT,2CAACA;OACC,SAAQ;OACR,eAAe,yBAAyB,MAAM;iBAE7C,EAAE,SAAS;QACL;OACL;MACF;;IAEJ;GACE,GAGT"}

package/dist/components-page/account-settings/email-and-auth/password-section.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/email-and-auth/password-section.d.ts
+declare function PasswordSection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { PasswordSection };
+//# sourceMappingURL=password-section.d.ts.map

package/dist/components-page/account-settings/email-and-auth/password-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"password-section.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/email-and-auth/password-section.tsx"],"mappings":";;;iBAmBgB,eAAA,CAAgB,KAAA;EAC9B,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,161 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../../chunk-BE-pF4vm.js');
+let _hookform_resolvers_yup = require("@hookform/resolvers/yup");
+let _stackframe_stack_shared_dist_schema_fields = require("@stackframe/stack-shared/dist/schema-fields");
+let _stackframe_stack_shared_dist_utils_promises = require("@stackframe/stack-shared/dist/utils/promises");
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react = require("react");
+let react_hook_form = require("react-hook-form");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _stackframe_stack_shared_dist_helpers_password = require("@stackframe/stack-shared/dist/helpers/password");
+let yup = require("yup");
+yup = require_chunk.__toESM(yup);
+let _________lib_hooks_js = require("../../../lib/hooks.js");
+let _________lib_translations_js = require("../../../lib/translations.js");
+let _________components_elements_form_warning_js = require("../../../components/elements/form-warning.js");
+let ___section_js = require("../section.js");
+let _________index_js = require("../../../index.js");
+
+//#region src/components-page/account-settings/email-and-auth/password-section.tsx
+function PasswordSection(props) {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	const user = (0, _________lib_hooks_js.useUser)({ or: props?.mockMode ? "return-null" : "throw" });
+	if (props?.mockMode && !user) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+		title: t("Password"),
+		description: t("Password management is not available in demo mode."),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+			variant: "secondary",
+			children: t("Password management is not available in demo mode.")
+		})
+	});
+	if (!user) return null;
+	const contactChannels = user.useContactChannels();
+	const [changingPassword, setChangingPassword] = (0, react.useState)(false);
+	const [loading, setLoading] = (0, react.useState)(false);
+	const project = (0, _________index_js.useStackApp)().useProject();
+	const { register, handleSubmit, setError, formState: { errors }, clearErrors, reset } = (0, react_hook_form.useForm)({ resolver: (0, _hookform_resolvers_yup.yupResolver)((0, _stackframe_stack_shared_dist_schema_fields.yupObject)({
+		oldPassword: user.hasPassword ? _stackframe_stack_shared_dist_schema_fields.passwordSchema.defined().nonEmpty(t("Please enter your old password")) : (0, _stackframe_stack_shared_dist_schema_fields.yupString)(),
+		newPassword: _stackframe_stack_shared_dist_schema_fields.passwordSchema.defined().nonEmpty(t("Please enter your password")).test({
+			name: "is-valid-password",
+			test: (value, ctx) => {
+				const error = (0, _stackframe_stack_shared_dist_helpers_password.getPasswordError)(value);
+				if (error) return ctx.createError({ message: error.message });
+				else return true;
+			}
+		}),
+		newPasswordRepeat: (0, _stackframe_stack_shared_dist_schema_fields.yupString)().nullable().oneOf([
+			yup.ref("newPassword"),
+			"",
+			null
+		], t("Passwords do not match")).defined().nonEmpty(t("Please repeat your password"))
+	})) });
+	const hasValidEmail = contactChannels.filter((x) => x.type === "email" && x.usedForAuth).length > 0;
+	const onSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const { oldPassword, newPassword } = data;
+			if (user.hasPassword ? await user.updatePassword({
+				oldPassword,
+				newPassword
+			}) : await user.setPassword({ password: newPassword })) setError("oldPassword", {
+				type: "manual",
+				message: t("Incorrect password")
+			});
+			else {
+				reset();
+				setChangingPassword(false);
+			}
+		} finally {
+			setLoading(false);
+		}
+	};
+	const registerPassword = register("newPassword");
+	const registerPasswordRepeat = register("newPasswordRepeat");
+	if (!project.config.credentialEnabled) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___section_js.Section, {
+		title: t("Password"),
+		description: user.hasPassword ? t("Update your password") : t("Set a password for your account"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-col gap-4",
+			children: !changingPassword ? hasValidEmail ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+				variant: "secondary",
+				onClick: () => setChangingPassword(true),
+				children: user.hasPassword ? t("Update password") : t("Set password")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				variant: "secondary",
+				type: "label",
+				children: t("To set a password, please add a sign-in email.")
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				onSubmit: (e) => (0, _stackframe_stack_shared_dist_utils_promises.runAsynchronouslyWithAlert)(handleSubmit(onSubmit)(e)),
+				noValidate: true,
+				children: [
+					user.hasPassword && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Label, {
+							htmlFor: "old-password",
+							className: "mb-1",
+							children: t("Old password")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Input, {
+							id: "old-password",
+							type: "password",
+							autoComplete: "current-password",
+							...register("oldPassword")
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_________components_elements_form_warning_js.FormWarningText, { text: errors.oldPassword?.message?.toString() })
+					] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Label, {
+						htmlFor: "new-password",
+						className: "mt-4 mb-1",
+						children: t("New password")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.PasswordInput, {
+						id: "new-password",
+						autoComplete: "new-password",
+						...registerPassword,
+						onChange: (e) => {
+							clearErrors("newPassword");
+							clearErrors("newPasswordRepeat");
+							(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(registerPassword.onChange(e));
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_________components_elements_form_warning_js.FormWarningText, { text: errors.newPassword?.message?.toString() }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Label, {
+						htmlFor: "repeat-password",
+						className: "mt-4 mb-1",
+						children: t("Repeat new password")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.PasswordInput, {
+						id: "repeat-password",
+						autoComplete: "new-password",
+						...registerPasswordRepeat,
+						onChange: (e) => {
+							clearErrors("newPassword");
+							clearErrors("newPasswordRepeat");
+							(0, _stackframe_stack_shared_dist_utils_promises.runAsynchronously)(registerPasswordRepeat.onChange(e));
+						}
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_________components_elements_form_warning_js.FormWarningText, { text: errors.newPasswordRepeat?.message?.toString() }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "mt-6 flex gap-4",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+							type: "submit",
+							loading,
+							children: user.hasPassword ? t("Update Password") : t("Set Password")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Button, {
+							variant: "secondary",
+							onClick: () => {
+								setChangingPassword(false);
+								reset();
+							},
+							children: t("Cancel")
+						})]
+					})
+				]
+			})
+		})
+	});
+}
+
+//#endregion
+exports.PasswordSection = PasswordSection;
+//# sourceMappingURL=password-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"password-section.js","names":["Section","Typography","schemaFieldsPasswordSchema","Button","Label","Input","FormWarningText","PasswordInput"],"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, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\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":"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"}

package/dist/components-page/account-settings/notifications/notifications-page.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components-page/account-settings/notifications/notifications-page.d.ts
+declare function NotificationsPage(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NotificationsPage };
+//# sourceMappingURL=notifications-page.d.ts.map

package/dist/components-page/account-settings/notifications/notifications-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notifications-page.d.ts","names":[],"sources":["../../../../src/components-page/account-settings/notifications/notifications-page.tsx"],"mappings":";;;iBAWgB,iBAAA,CAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,42 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../../chunk-BE-pF4vm.js');
+let _stackframe_stack_ui = require("@stackframe/stack-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _________lib_hooks_js = require("../../../lib/hooks.js");
+let _________lib_translations_js = require("../../../lib/translations.js");
+let ___page_layout_js = require("../page-layout.js");
+
+//#region src/components-page/account-settings/notifications/notifications-page.tsx
+function NotificationsPage() {
+	const { t } = (0, _________lib_translations_js.useTranslation)();
+	const notificationCategories = (0, _________lib_hooks_js.useUser)({ or: "redirect" }).useNotificationCategories();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(___page_layout_js.PageLayout, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Separator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "sm:flex-1 flex flex-col justify-center pb-2",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+				className: "font-medium",
+				children: t("Choose which emails you want to receive")
+			})
+		}), notificationCategories.map((category) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex justify-start gap-4 items-center",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Switch, {
+					checked: category.enabled,
+					onCheckedChange: (value) => void category.setEnabled(value),
+					disabled: !category.canDisable
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, { children: category.name }),
+				!category.canDisable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_stackframe_stack_ui.Typography, {
+					variant: "secondary",
+					type: "footnote",
+					children: "(cannot be disabled)"
+				})
+			]
+		}, category.id))]
+	})] });
+}
+
+//#endregion
+exports.NotificationsPage = NotificationsPage;
+//# sourceMappingURL=notifications-page.js.map