@stackframe/tanstack-start 0.0.1 → 2.8.91

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

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

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

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+
+//#region src/components-page/account-settings/email-and-auth/email-and-auth-page.tsx
+function EmailsAndAuthPage(props) {
+	return /* @__PURE__ */ jsxs(PageLayout, { children: [
+		/* @__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 })
+	] });
+}
+
+//#endregion
+export { EmailsAndAuthPage };
+//# sourceMappingURL=email-and-auth-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"email-and-auth-page.js","names":[],"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, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\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":";;;;;;;;;AAWA,SAAgB,kBAAkB,OAE/B;AACD,QACE,qBAAC;EACC,oBAAC,iBAAc,UAAU,OAAO,WAAW;EAC3C,oBAAC,mBAAgB,UAAU,OAAO,WAAY;EAC9C,oBAAC,kBAAe,UAAU,OAAO,WAAY;EAC7C,oBAAC,cAAW,UAAU,OAAO,WAAY;EACzC,oBAAC,cAAW,UAAU,OAAO,WAAY;KAC9B"}

package/dist/esm/components-page/account-settings/email-and-auth/emails-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/emails-section.d.ts
+declare function EmailsSection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { EmailsSection };
+//# sourceMappingURL=emails-section.d.ts.map

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

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

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

@@ -0,0 +1,179 @@
+import { yupResolver } from "@hookform/resolvers/yup";
+import { strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+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 { jsx, jsxs } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { KnownErrors } from "@stackframe/stack-shared/dist/known-errors";
+import { FormWarningText } from "../../../components/elements/form-warning.js";
+
+//#region src/components-page/account-settings/email-and-auth/emails-section.tsx
+function EmailsSection(props) {
+	const { t } = useTranslation();
+	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);
+	const [addedEmail, setAddedEmail] = useState(null);
+	const isLastEmailUsedForAuth = contactChannels.filter((x) => x.usedForAuth && x.type === "email").length === 1;
+	useEffect(() => {
+		if (addedEmail) runAsynchronously(async () => {
+			const cc = contactChannels.find((x) => x.value === addedEmail);
+			if (cc && !cc.isVerified) await cc.sendVerificationEmail();
+			setAddedEmail(null);
+		});
+	}, [contactChannels, addedEmail]);
+	const { register, handleSubmit, formState: { errors }, reset } = useForm({ resolver: yupResolver(yupObject({ email: strictEmailSchema(t("Please enter a valid email address")).notOneOf(contactChannels.map((x) => x.value), t("Email already exists")).defined().nonEmpty(t("Email is required")) })) });
+	const onSubmit = async (data) => {
+		setAddingEmailLoading(true);
+		try {
+			await user.createContactChannel({
+				type: "email",
+				value: data.email,
+				usedForAuth: false
+			});
+			setAddedEmail(data.email);
+		} finally {
+			setAddingEmailLoading(false);
+		}
+		setAddingEmail(false);
+		reset();
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col md:flex-row justify-between mb-4 gap-4",
+		children: [/* @__PURE__ */ jsx(Typography, {
+			className: "font-medium",
+			children: t("Emails")
+		}), addingEmail ? /* @__PURE__ */ jsxs("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				runAsynchronously(handleSubmit(onSubmit));
+			},
+			className: "flex flex-col",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Input, {
+						...register("email"),
+						placeholder: t("Enter email")
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						loading: addingEmailLoading,
+						children: t("Add")
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						onClick: () => {
+							setAddingEmail(false);
+							reset();
+						},
+						children: t("Cancel")
+					})
+				]
+			}), errors.email && /* @__PURE__ */ jsx(FormWarningText, { text: errors.email.message })]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex md:justify-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: () => setAddingEmail(true),
+				children: t("Add an email")
+			})
+		})]
+	}), contactChannels.length > 0 ? /* @__PURE__ */ jsx("div", {
+		className: "border rounded-md",
+		children: /* @__PURE__ */ jsx(Table, { children: /* @__PURE__ */ jsx(TableBody, { children: contactChannels.filter((x) => x.type === "email").sort((a, b) => {
+			if (a.isPrimary !== b.isPrimary) return a.isPrimary ? -1 : 1;
+			if (a.isVerified !== b.isVerified) return a.isVerified ? -1 : 1;
+			return 0;
+		}).map((x) => /* @__PURE__ */ jsxs(TableRow, { children: [/* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col md:flex-row gap-2 md:gap-4",
+			children: [x.value, /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-2",
+				children: [
+					x.isPrimary ? /* @__PURE__ */ jsx(Badge, { children: t("Primary") }) : null,
+					!x.isVerified ? /* @__PURE__ */ jsx(Badge, {
+						variant: "destructive",
+						children: t("Unverified")
+					}) : null,
+					x.usedForAuth ? /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						children: t("Used for sign-in")
+					}) : null
+				]
+			})]
+		}) }), /* @__PURE__ */ jsx(TableCell, {
+			className: "flex justify-end",
+			children: /* @__PURE__ */ jsx(ActionCell, { items: [
+				...!x.isVerified ? [{
+					item: t("Send verification email"),
+					onClick: async () => {
+						await x.sendVerificationEmail();
+					}
+				}] : [],
+				...!x.isPrimary && x.isVerified ? [{
+					item: t("Set as primary"),
+					onClick: async () => {
+						await x.update({ isPrimary: true });
+					}
+				}] : !x.isPrimary ? [{
+					item: t("Set as primary"),
+					onClick: async () => {},
+					disabled: true,
+					disabledTooltip: t("Please verify your email first")
+				}] : [],
+				...!x.usedForAuth && x.isVerified ? [{
+					item: t("Use for sign-in"),
+					onClick: async () => {
+						try {
+							await x.update({ usedForAuth: true });
+						} catch (e) {
+							if (KnownErrors.ContactChannelAlreadyUsedForAuthBySomeoneElse.isInstance(e)) alert(t("This email is already used for sign-in by another user."));
+						}
+					}
+				}] : [],
+				...x.usedForAuth && !isLastEmailUsedForAuth ? [{
+					item: t("Stop using for sign-in"),
+					onClick: async () => {
+						await x.update({ usedForAuth: false });
+					}
+				}] : x.usedForAuth ? [{
+					item: t("Stop using for sign-in"),
+					onClick: async () => {},
+					disabled: true,
+					disabledTooltip: t("You can not remove your last sign-in email")
+				}] : [],
+				...!isLastEmailUsedForAuth || !x.usedForAuth ? [{
+					item: t("Remove"),
+					onClick: async () => {
+						await x.delete();
+					},
+					danger: true
+				}] : [{
+					item: t("Remove"),
+					onClick: async () => {},
+					disabled: true,
+					disabledTooltip: t("You can not remove your last sign-in email")
+				}]
+			] })
+		})] }, x.id)) }) })
+	}) : null] });
+}
+
+//#endregion
+export { EmailsSection };
+//# sourceMappingURL=emails-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"emails-section.js","names":[],"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, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\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 isLastEmailUsedForAuth = 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 && !isLastEmailUsedForAuth ? [{\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                        // Determine if this email can be removed\n                        ...(!isLastEmailUsedForAuth || !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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"}

package/dist/esm/components-page/account-settings/email-and-auth/mfa-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/mfa-section.d.ts
+declare function MfaSection(props?: {
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { MfaSection };
+//# sourceMappingURL=mfa-section.d.ts.map

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

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

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

@@ -0,0 +1,118 @@
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Typography } from "@stackframe/stack-ui";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { createTOTPKeyURI, verifyTOTP } from "@oslojs/otp";
+import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
+import { generateRandomValues } from "@stackframe/stack-shared/dist/utils/crypto";
+import * as QRCode from "qrcode";
+import { Section } from "../section.js";
+
+//#region src/components-page/account-settings/email-and-auth/mfa-section.tsx
+function MfaSection(props) {
+	const { t } = useTranslation();
+	const project = useStackApp().useProject();
+	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("");
+	const [isMaybeWrong, setIsMaybeWrong] = useState(false);
+	const isEnabled = user.isMultiFactorRequired;
+	const [handleSubmit, isLoading] = useAsyncCallback(async () => {
+		await user.update({ totpMultiFactorSecret: generatedSecret });
+		setGeneratedSecret(null);
+		setQrCodeUrl(null);
+		setMfaCode("");
+	}, [generatedSecret, user]);
+	useEffect(() => {
+		setIsMaybeWrong(false);
+		runAsynchronouslyWithAlert(async () => {
+			if (generatedSecret && verifyTOTP(generatedSecret, 30, 6, mfaCode)) await handleSubmit();
+			setIsMaybeWrong(true);
+		});
+	}, [
+		mfaCode,
+		generatedSecret,
+		handleSubmit
+	]);
+	return /* @__PURE__ */ jsx(Section, {
+		title: t("Multi-factor authentication"),
+		description: isEnabled ? t("Multi-factor authentication is currently enabled.") : t("Multi-factor authentication is currently disabled."),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [!isEnabled && generatedSecret && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Typography, { children: t("Scan this QR code with your authenticator app:") }),
+				/* @__PURE__ */ jsx("img", {
+					width: 200,
+					height: 200,
+					src: qrCodeUrl ?? throwErr("TOTP QR code failed to generate"),
+					alt: t("TOTP multi-factor authentication QR code")
+				}),
+				/* @__PURE__ */ jsx(Typography, { children: t("Then, enter your six-digit MFA code:") }),
+				/* @__PURE__ */ jsx(Input, {
+					value: mfaCode,
+					onChange: (e) => {
+						setIsMaybeWrong(false);
+						setMfaCode(e.target.value);
+					},
+					placeholder: "123456",
+					maxLength: 6,
+					disabled: isLoading
+				}),
+				isMaybeWrong && mfaCode.length === 6 && /* @__PURE__ */ jsx(Typography, {
+					variant: "destructive",
+					children: t("Incorrect code. Please try again.")
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						onClick: () => {
+							setGeneratedSecret(null);
+							setQrCodeUrl(null);
+							setMfaCode("");
+						},
+						children: t("Cancel")
+					})
+				})
+			] }), /* @__PURE__ */ jsx("div", {
+				className: "flex gap-2",
+				children: isEnabled ? /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: async () => {
+						await user.update({ totpMultiFactorSecret: null });
+					},
+					children: t("Disable MFA")
+				}) : !generatedSecret && /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: async () => {
+						const secret = generateRandomValues(new Uint8Array(20));
+						setQrCodeUrl(await generateTotpQrCode(project, user, secret));
+						setGeneratedSecret(secret);
+					},
+					children: t("Enable MFA")
+				})
+			})]
+		})
+	});
+}
+async function generateTotpQrCode(project, user, secret) {
+	const uri = createTOTPKeyURI(project.displayName, user.primaryEmail ?? user.id, secret, 30, 6);
+	return await QRCode.toDataURL(uri);
+}
+
+//#endregion
+export { MfaSection };
+//# sourceMappingURL=mfa-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"mfa-section.js","names":[],"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,MAAM,gBAAgB;CAC9B,MAAM,UAAU,aAAa,CAAC,YAAY;CAC1C,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,oBAAC;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,EAAE,gDAAgD;YAE/D,oBAAC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,CAAC,iBAAiB,sBAAsB,SAA4B,KAAK;CAC/E,MAAM,CAAC,WAAW,gBAAgB,SAAwB,KAAK;CAC/D,MAAM,CAAC,SAAS,cAAc,SAAiB,GAAG;CAClD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,YAAY,KAAK;CAEvB,MAAM,CAAC,cAAc,aAAa,iBAAiB,YAAY;AAC7D,QAAM,KAAK,OAAO,EAChB,uBAAuB,iBACxB,CAAC;AACF,qBAAmB,KAAK;AACxB,eAAa,KAAK;AAClB,aAAW,GAAG;IACb,CAAC,iBAAiB,KAAK,CAAC;AAE3B,iBAAgB;AACd,kBAAgB,MAAM;AACtB,6BAA2B,YAAY;AACrC,OAAI,mBAAmB,WAAW,iBAAiB,IAAI,GAAG,QAAQ,CAChE,OAAM,cAAc;AAEtB,mBAAgB,KAAK;IACrB;IACD;EAAC;EAAS;EAAiB;EAAa,CAAC;AAE5C,QACE,oBAAC;EACC,OAAO,EAAE,8BAA8B;EACvC,aAAa,YACT,EAAE,oDAAoD,GACtD,EAAE,qDAAqD;YAE3D,qBAAC;GAAI,WAAU;cACZ,CAAC,aAAa,mBACb;IACE,oBAAC,wBAAY,EAAE,iDAAiD,GAAc;IAC9E,oBAAC;KAAI,OAAO;KAAK,QAAQ;KAAK,KAAK,aAAa,SAAS,kCAAkC;KAAE,KAAK,EAAE,2CAA2C;MAAI;IACnJ,oBAAC,wBAAY,EAAE,uCAAuC,GAAc;IACpE,oBAAC;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,oBAAC;KAAW,SAAQ;eAAe,EAAE,oCAAoC;MAAc;IAEzF,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,SAAQ;MACR,eAAe;AACb,0BAAmB,KAAK;AACxB,oBAAa,KAAK;AAClB,kBAAW,GAAG;;gBAGf,EAAE,SAAS;OACL;MACL;OACL,EAEL,oBAAC;IAAI,WAAU;cACZ,YACC,oBAAC;KACC,SAAQ;KACR,SAAS,YAAY;AACnB,YAAM,KAAK,OAAO,EAChB,uBAAuB,MACxB,CAAC;;eAGH,EAAE,cAAc;MACV,GACP,CAAC,mBACH,oBAAC;KACC,SAAQ;KACR,SAAS,YAAY;MACnB,MAAM,SAAS,qBAAqB,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,MAAM,iBAAiB,QAAQ,aAAa,KAAK,gBAAgB,KAAK,IAAI,QAAQ,IAAI,EAAE;AAC9F,QAAO,MAAM,OAAO,UAAU,IAAI"}

package/dist/esm/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/esm/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/esm/components-page/account-settings/email-and-auth/otp-section.js

@@ -0,0 +1,78 @@
+import { Button, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStackApp, useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+
+//#region src/components-page/account-settings/email-and-auth/otp-section.tsx
+function OtpSection(props) {
+	const { t } = useTranslation();
+	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;
+	const [disabling, setDisabling] = 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__ */ jsx(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__ */ jsx("div", {
+			className: "flex md:justify-end",
+			children: hasValidEmail ? user.otpAuthEnabled ? !isLastAuth ? !disabling ? /* @__PURE__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: () => setDisabling(true),
+				children: t("Disable OTP")
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx(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__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "destructive",
+						onClick: handleDisableOTP,
+						children: t("Disable")
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						onClick: () => setDisabling(false),
+						children: t("Cancel")
+					})]
+				})]
+			}) : /* @__PURE__ */ jsx(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__ */ jsx(Button, {
+				variant: "secondary",
+				onClick: async () => {
+					await user.update({ otpAuthEnabled: true });
+				},
+				children: t("Enable OTP")
+			}) : /* @__PURE__ */ jsx(Typography, {
+				variant: "secondary",
+				type: "label",
+				children: t("To enable OTP sign-in, please add a verified sign-in email.")
+			})
+		})
+	});
+}
+
+//#endregion
+export { OtpSection };
+//# sourceMappingURL=otp-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-section.js","names":[],"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,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,oBAAC;EACC,OAAO,EAAE,oBAAoB;EAC7B,aAAa,EAAE,gDAAgD;YAE/D,oBAAC;GAAW,SAAQ;aAAa,EAAE,gDAAgD;IAAc;GACzF;AAId,KAAI,CAAC,KACH,QAAO;CAET,MAAM,UAAU,aAAa,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,gBAAgB,SAAS,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,oBAAC;EAAQ,OAAO,EAAE,cAAc;EAAE,aAAa,KAAK,iBAAiB,EAAE,+CAA+C,GAAG,EAAE,oEAAoE;YAC7L,oBAAC;GAAI,WAAU;aACZ,gBACC,KAAK,iBACH,CAAC,aACC,CAAC,YACC,oBAAC;IACC,SAAQ;IACR,eAAe,aAAa,KAAK;cAEhC,EAAE,cAAc;KACV,GAET,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAW,SAAQ;eACjB,EAAE,0GAA0G;MAClG,EACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MACC,SAAQ;MACR,SAAS;gBAER,EAAE,UAAU;OACN,EACT,oBAAC;MACC,SAAQ;MACR,eAAe,aAAa,MAAM;gBAEjC,EAAE,SAAS;OACL;MACL;KACF,GAGR,oBAAC;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,2FAA2F;KAAc,GAG3J,oBAAC;IACC,SAAQ;IACR,SAAS,YAAY;AACnB,WAAM,KAAK,OAAO,EAAE,gBAAgB,MAAM,CAAC;;cAG5C,EAAE,aAAa;KACT,GAGX,oBAAC;IAAW,SAAQ;IAAY,MAAK;cAAS,EAAE,8DAA8D;KAAc;IAE1H;GACE"}

package/dist/esm/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/esm/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/esm/components-page/account-settings/email-and-auth/passkey-section.js

@@ -0,0 +1,87 @@
+import { Button, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useUser } from "../../../lib/hooks.js";
+import { useTranslation } from "../../../lib/translations.js";
+import { Section } from "../section.js";
+import { useStackApp as useStackApp$1 } from "../../../index.js";
+
+//#region src/components-page/account-settings/email-and-auth/passkey-section.tsx
+function PasskeySection(props) {
+	const { t } = useTranslation();
+	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 project = useStackApp$1().useProject();
+	const contactChannels = user.useContactChannels();
+	const hasPasskey = user.passkeyAuthEnabled;
+	const isLastAuth = user.passkeyAuthEnabled && !user.hasPassword && user.oauthProviders.length === 0 && !user.otpAuthEnabled;
+	const [showConfirmationModal, setShowConfirmationModal] = 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__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Section, {
+		title: t("Passkey"),
+		description: hasPasskey ? t("Passkey registered") : t("Register a passkey"),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex md:justify-end gap-2",
+			children: [
+				!hasValidEmail && /* @__PURE__ */ jsx(Typography, {
+					variant: "secondary",
+					type: "label",
+					children: t("To enable Passkey sign-in, please add a verified sign-in email.")
+				}),
+				hasValidEmail && hasPasskey && isLastAuth && /* @__PURE__ */ jsx(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__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+					onClick: handleAddNewPasskey,
+					variant: "secondary",
+					children: t("Add new passkey")
+				}) }),
+				hasValidEmail && hasPasskey && !isLastAuth && !showConfirmationModal && /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					onClick: () => setShowConfirmationModal(true),
+					children: t("Delete Passkey")
+				}),
+				hasValidEmail && hasPasskey && !isLastAuth && showConfirmationModal && /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-2",
+					children: [/* @__PURE__ */ jsx(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__ */ jsxs("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ jsx(Button, {
+							variant: "destructive",
+							onClick: handleDeletePasskey,
+							children: t("Disable")
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							onClick: () => setShowConfirmationModal(false),
+							children: t("Cancel")
+						})]
+					})]
+				})
+			]
+		})
+	}) });
+}
+
+//#endregion
+export { PasskeySection };
+//# sourceMappingURL=passkey-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"passkey-section.js","names":["useStackApp"],"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,MAAM,gBAAgB;CAC9B,MAAM,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,gBAAgB,SAAS,CAAC;AAGvE,KAAI,OAAO,YAAY,CAAC,KACtB,QACE,oBAAC;EACC,OAAO,EAAE,UAAU;EACnB,aAAa,EAAE,oDAAoD;YAEnE,oBAAC;GAAW,SAAQ;aAAa,EAAE,oDAAoD;IAAc;GAC7F;AAId,KAAI,CAAC,KACH,QAAO;CAGT,MAAM,UADWA,eAAa,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,4BAA4B,SAAS,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,0CACE,oBAAC;EAAQ,OAAO,EAAE,UAAU;EAAE,aAAa,aAAa,EAAE,qBAAqB,GAAG,EAAE,qBAAqB;YACvG,qBAAC;GAAI,WAAU;;IACZ,CAAC,iBACA,oBAAC;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,kEAAkE;MAAc;IAEjI,iBAAiB,cAAc,cAC9B,oBAAC;KAAW,SAAQ;KAAY,MAAK;eAAS,EAAE,+FAA+F;MAAc;IAE9J,CAAC,cAAc,iBACd,oBAAC,mBACC,oBAAC;KAAO,SAAS;KAAqB,SAAQ;eAAa,EAAE,kBAAkB;MAAU,GACrF;IAEP,iBAAiB,cAAc,CAAC,cAAc,CAAC,yBAC9C,oBAAC;KACC,SAAQ;KACR,eAAe,yBAAyB,KAAK;eAE5C,EAAE,iBAAiB;MACb;IAEV,iBAAiB,cAAc,CAAC,cAAc,yBAC7C,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAW,SAAQ;gBACjB,EAAE,+GAA+G;OACvG,EACb,qBAAC;MAAI,WAAU;iBACb,oBAAC;OACC,SAAQ;OACR,SAAS;iBAER,EAAE,UAAU;QACN,EACT,oBAAC;OACC,SAAQ;OACR,eAAe,yBAAyB,MAAM;iBAE7C,EAAE,SAAS;QACL;OACL;MACF;;IAEJ;GACE,GAGT"}