@plumile/backoffice-react 0.1.107 → 0.1.108

package/lib/esm/auth/TotpQrCode.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import t from "react-qr-code";
+import { QRCode as t } from "react-qr-code";
 //#region src/auth/TotpQrCode.tsx
 function n({ secret: e, issuer: t, accountName: n, algorithm: r = "SHA1", digits: i = 6, period: a = 30 }) {
 	let o = n ?? t, s = new URLSearchParams({

package/lib/esm/auth/TotpQrCode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TotpQrCode.js","names":[],"sources":["../../../src/auth/TotpQrCode.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport QRCode from 'react-qr-code';\n\nexport type BuildTotpOtpAuthUriOptions = {\n  secret: string;\n  issuer: string;\n  accountName?: string;\n  algorithm?: string;\n  digits?: number;\n  period?: number;\n};\n\nexport type TotpQrCodeProps = BuildTotpOtpAuthUriOptions & {\n  otpauthUrl?: string;\n  size?: number;\n};\n\n/**\n *\n */\nexport function buildTotpOtpAuthUri({\n  secret,\n  issuer,\n  accountName,\n  algorithm = 'SHA1',\n  digits = 6,\n  period = 30,\n}: BuildTotpOtpAuthUriOptions): string {\n  const label = accountName ?? issuer;\n  const params = new URLSearchParams({\n    secret,\n    issuer,\n    algorithm,\n    digits: String(digits),\n    period: String(period),\n  });\n\n  return `otpauth://totp/${encodeURIComponent(label)}?${params.toString()}`;\n}\n\nexport const TotpQrCode = ({\n  secret,\n  issuer,\n  accountName,\n  otpauthUrl,\n  size = 220,\n  algorithm,\n  digits,\n  period,\n}: TotpQrCodeProps): JSX.Element => {\n  const otpAuthUri =\n    otpauthUrl ??\n    buildTotpOtpAuthUri({\n      secret,\n      issuer,\n      accountName,\n      algorithm,\n      digits,\n      period,\n    });\n\n  return <QRCode value={otpAuthUri} size={size} />;\n};\n\nexport default TotpQrCode;\n"],"mappings":";;;AAoBA,SAAgB,EAAoB,EAClC,WACA,WACA,gBACA,eAAY,QACZ,YAAS,GACT,YAAS,MAC4B;CACrC,IAAM,IAAQ,KAAe,GACvB,IAAS,IAAI,gBAAgB;EACjC;EACA;EACA;EACA,QAAQ,OAAO,EAAO;EACtB,QAAQ,OAAO,EAAO;EACvB,CAAC;CAEF,OAAO,kBAAkB,mBAAmB,EAAM,CAAC,GAAG,EAAO,UAAU;;AAGzE,IAAa,KAAc,EACzB,WACA,WACA,gBACA,eACA,UAAO,KACP,cACA,WACA,gBAaO,kBAAC,GAAD;CAAQ,OAVb,KACA,EAAoB;EAClB;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEoC;CAAQ,CAAA"}
+{"version":3,"file":"TotpQrCode.js","names":[],"sources":["../../../src/auth/TotpQrCode.tsx"],"sourcesContent":["import type { JSX } from 'react';\nimport { QRCode } from 'react-qr-code';\n\nexport type BuildTotpOtpAuthUriOptions = {\n  secret: string;\n  issuer: string;\n  accountName?: string;\n  algorithm?: string;\n  digits?: number;\n  period?: number;\n};\n\nexport type TotpQrCodeProps = BuildTotpOtpAuthUriOptions & {\n  otpauthUrl?: string;\n  size?: number;\n};\n\n/**\n *\n */\nexport function buildTotpOtpAuthUri({\n  secret,\n  issuer,\n  accountName,\n  algorithm = 'SHA1',\n  digits = 6,\n  period = 30,\n}: BuildTotpOtpAuthUriOptions): string {\n  const label = accountName ?? issuer;\n  const params = new URLSearchParams({\n    secret,\n    issuer,\n    algorithm,\n    digits: String(digits),\n    period: String(period),\n  });\n\n  return `otpauth://totp/${encodeURIComponent(label)}?${params.toString()}`;\n}\n\nexport const TotpQrCode = ({\n  secret,\n  issuer,\n  accountName,\n  otpauthUrl,\n  size = 220,\n  algorithm,\n  digits,\n  period,\n}: TotpQrCodeProps): JSX.Element => {\n  const otpAuthUri =\n    otpauthUrl ??\n    buildTotpOtpAuthUri({\n      secret,\n      issuer,\n      accountName,\n      algorithm,\n      digits,\n      period,\n    });\n\n  return <QRCode value={otpAuthUri} size={size} />;\n};\n\nexport default TotpQrCode;\n"],"mappings":";;;AAoBA,SAAgB,EAAoB,EAClC,WACA,WACA,gBACA,eAAY,QACZ,YAAS,GACT,YAAS,MAC4B;CACrC,IAAM,IAAQ,KAAe,GACvB,IAAS,IAAI,gBAAgB;EACjC;EACA;EACA;EACA,QAAQ,OAAO,EAAO;EACtB,QAAQ,OAAO,EAAO;EACvB,CAAC;CAEF,OAAO,kBAAkB,mBAAmB,EAAM,CAAC,GAAG,EAAO,UAAU;;AAGzE,IAAa,KAAc,EACzB,WACA,WACA,gBACA,eACA,UAAO,KACP,cACA,WACA,gBAaO,kBAAC,GAAD;CAAQ,OAVb,KACA,EAAoB;EAClB;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEoC;CAAQ,CAAA"}

package/lib/esm/auth/login/EmailCapturePanel.js

@@ -1,50 +1,54 @@
 import { actionsRow as e, formSurface as t, helper as n, inlineLink as r } from "./loginPage.css.js";
 import { AuthPanel as i } from "./AuthPanel.js";
 import { useBackofficeReactTranslation as a } from "../../i18n/useBackofficeReactTranslation.js";
-import { Button as o, FormError as s, FormField as c } from "@plumile/ui";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useCallback as o } from "react";
+import { Button as s, Form as c, FormError as l, FormField as u } from "@plumile/ui";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/auth/login/EmailCapturePanel.tsx
-var d = ({ email: d, errorMessage: f, isLoading: p, onEmailChange: m, onContinue: h, onForgotPassword: g }) => {
-	let { t: _ } = a();
-	return /* @__PURE__ */ l(i, { children: /* @__PURE__ */ u("div", {
+var p = ({ email: p, errorMessage: m, isLoading: h, onEmailChange: g, onContinue: _, onForgotPassword: v }) => {
+	let { t: y } = a();
+	return /* @__PURE__ */ d(i, { children: /* @__PURE__ */ f(c, {
 		className: t,
+		onSubmit: o((e) => {
+			e.preventDefault(), _();
+		}, [_]),
+		initialFocus: "first-form-control",
 		children: [
-			/* @__PURE__ */ l("p", {
+			/* @__PURE__ */ d("p", {
 				className: n,
-				children: _("auth.emailCapture.description")
+				children: y("auth.emailCapture.description")
 			}),
-			f != null && /* @__PURE__ */ l(s, { children: f }),
-			/* @__PURE__ */ l(c, {
-				label: _("auth.emailCapture.emailLabel"),
+			m != null && /* @__PURE__ */ d(l, { children: m }),
+			/* @__PURE__ */ d(u, {
+				label: y("auth.emailCapture.emailLabel"),
 				name: "email",
 				type: "email",
-				value: d,
+				value: p,
 				onChange: (e) => {
-					m(e.target.value);
+					g(e.target.value);
 				},
-				placeholder: _("auth.emailCapture.emailPlaceholder"),
+				placeholder: y("auth.emailCapture.emailPlaceholder"),
 				autoComplete: "email",
 				required: !0
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ f("div", {
 				className: e,
-				children: [/* @__PURE__ */ l(o, {
-					type: "button",
+				children: [/* @__PURE__ */ d(s, {
+					type: "submit",
 					variant: "primary",
-					onClick: h,
-					isLoading: p,
-					children: _("auth.emailCapture.continue")
-				}), /* @__PURE__ */ l("button", {
+					isLoading: h,
+					children: y("auth.emailCapture.continue")
+				}), /* @__PURE__ */ d("button", {
 					type: "button",
 					className: r,
-					onClick: g,
-					children: _("auth.emailCapture.forgotPassword")
+					onClick: v,
+					children: y("auth.emailCapture.forgotPassword")
 				})]
 			})
 		]
 	}) });
 };
 //#endregion
-export { d as EmailCapturePanel };
+export { p as EmailCapturePanel };
 
 //# sourceMappingURL=EmailCapturePanel.js.map

package/lib/esm/auth/login/EmailCapturePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailCapturePanel.js","names":[],"sources":["../../../../src/auth/login/EmailCapturePanel.tsx"],"sourcesContent":["import { type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button, FormError, FormField } from '@plumile/ui';\n\nimport { AuthPanel } from './AuthPanel.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  errorMessage: string | null;\n  isLoading: boolean;\n  onEmailChange: (value: string) => void;\n  onContinue: () => void;\n  onForgotPassword: () => void;\n};\n\nexport const EmailCapturePanel = ({\n  email,\n  errorMessage,\n  isLoading,\n  onEmailChange,\n  onContinue,\n  onForgotPassword,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  return (\n    <AuthPanel>\n      <div className={styles.formSurface}>\n        <p className={styles.helper}>{t('auth.emailCapture.description')}</p>\n        {errorMessage != null && <FormError>{errorMessage}</FormError>}\n        <FormField\n          label={t('auth.emailCapture.emailLabel')}\n          name=\"email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            onEmailChange(event.target.value);\n          }}\n          placeholder={t('auth.emailCapture.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n        <div className={styles.actionsRow}>\n          <Button\n            type=\"button\"\n            variant=\"primary\"\n            onClick={onContinue}\n            isLoading={isLoading}\n          >\n            {t('auth.emailCapture.continue')}\n          </Button>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.emailCapture.forgotPassword')}\n          </button>\n        </div>\n      </div>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KAAqB,EAChC,UACA,iBACA,cACA,kBACA,eACA,0BACwB;CACxB,IAAM,EAAE,SAAM,GAA+B;CAC7C,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACE,kBAAC,KAAD;IAAG,WAAW;cAAgB,EAAE,gCAAgC;IAAK,CAAA;GACpE,KAAgB,QAAQ,kBAAC,GAAD,EAAA,UAAY,GAAyB,CAAA;GAC9D,kBAAC,GAAD;IACE,OAAO,EAAE,+BAA+B;IACxC,MAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAU;KACnB,EAAc,EAAM,OAAO,MAAM;;IAEnC,aAAa,EAAE,qCAAqC;IACpD,cAAa;IACb,UAAA;IACA,CAAA;GACF,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,SAAS;KACE;eAEV,EAAE,6BAA6B;KACzB,CAAA,EACT,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,SAAS;eAER,EAAE,mCAAmC;KAC/B,CAAA,CACL;;GACF;KACI,CAAA"}
+{"version":3,"file":"EmailCapturePanel.js","names":[],"sources":["../../../../src/auth/login/EmailCapturePanel.tsx"],"sourcesContent":["import { useCallback, type FormEvent, type JSX } from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button, Form, FormError, FormField } from '@plumile/ui';\n\nimport { AuthPanel } from './AuthPanel.js';\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  email: string;\n  errorMessage: string | null;\n  isLoading: boolean;\n  onEmailChange: (value: string) => void;\n  onContinue: () => void;\n  onForgotPassword: () => void;\n};\n\nexport const EmailCapturePanel = ({\n  email,\n  errorMessage,\n  isLoading,\n  onEmailChange,\n  onContinue,\n  onForgotPassword,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const handleSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      onContinue();\n    },\n    [onContinue],\n  );\n\n  return (\n    <AuthPanel>\n      <Form\n        className={styles.formSurface}\n        onSubmit={handleSubmit}\n        initialFocus=\"first-form-control\"\n      >\n        <p className={styles.helper}>{t('auth.emailCapture.description')}</p>\n        {errorMessage != null && <FormError>{errorMessage}</FormError>}\n        <FormField\n          label={t('auth.emailCapture.emailLabel')}\n          name=\"email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            onEmailChange(event.target.value);\n          }}\n          placeholder={t('auth.emailCapture.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n        <div className={styles.actionsRow}>\n          <Button type=\"submit\" variant=\"primary\" isLoading={isLoading}>\n            {t('auth.emailCapture.continue')}\n          </Button>\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onForgotPassword}\n          >\n            {t('auth.emailCapture.forgotPassword')}\n          </button>\n        </div>\n      </Form>\n    </AuthPanel>\n  );\n};\n"],"mappings":";;;;;;;AAiBA,IAAa,KAAqB,EAChC,UACA,iBACA,cACA,kBACA,eACA,0BACwB;CACxB,IAAM,EAAE,SAAM,GAA+B;CAS7C,OACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZe,GAClB,MAAsC;GAErC,AADA,EAAM,gBAAgB,EACtB,GAAY;KAEd,CAAC,EAAW,CAOE;EACV,cAAa;YAHf;GAKE,kBAAC,KAAD;IAAG,WAAW;cAAgB,EAAE,gCAAgC;IAAK,CAAA;GACpE,KAAgB,QAAQ,kBAAC,GAAD,EAAA,UAAY,GAAyB,CAAA;GAC9D,kBAAC,GAAD;IACE,OAAO,EAAE,+BAA+B;IACxC,MAAK;IACL,MAAK;IACL,OAAO;IACP,WAAW,MAAU;KACnB,EAAc,EAAM,OAAO,MAAM;;IAEnC,aAAa,EAAE,qCAAqC;IACpD,cAAa;IACb,UAAA;IACA,CAAA;GACF,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACE,kBAAC,GAAD;KAAQ,MAAK;KAAS,SAAQ;KAAqB;eAChD,EAAE,6BAA6B;KACzB,CAAA,EACT,kBAAC,UAAD;KACE,MAAK;KACL,WAAW;KACX,SAAS;eAER,EAAE,mCAAmC;KAC/B,CAAA,CACL;;GACD;KACG,CAAA"}

package/lib/esm/auth/login/MfaChallengeForm.js

@@ -1,80 +1,82 @@
 import { actionsRow as e, formSurface as t, helper as n, inlineLink as r, stack as i } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as a } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as o, useEffect as s, useState as c } from "react";
-import { Button as l, FormError as u, FormField as d } from "@plumile/ui";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Button as l, Form as u, FormError as d, FormField as f } from "@plumile/ui";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/auth/login/MfaChallengeForm.tsx
-var m = ({ auth: m, onSuccess: h, onBack: g }) => {
-	let { t: _ } = a(), [v, y] = c(""), [b, x] = c(null);
+var h = ({ auth: h, onSuccess: g, onBack: _ }) => {
+	let { t: v } = a(), [y, b] = c(""), [x, S] = c(null);
 	s(() => {
-		m.clearError(), x(null);
-	}, [m]);
-	let S = o(async (e) => {
-		e.preventDefault(), x(null);
-		let t = v.trim();
+		h.clearError(), S(null);
+	}, [h]);
+	let C = o(async (e) => {
+		e.preventDefault(), S(null);
+		let t = y.trim();
 		if (t.length < 4) {
-			x(_("auth.mfa.errors.shortCode"));
+			S(v("auth.mfa.errors.shortCode"));
 			return;
 		}
 		try {
 			let e = { code: t };
-			await m.completeMfa(e), h();
+			await h.completeMfa(e), g();
 		} catch {
-			x(_("auth.mfa.errors.verificationFailed"));
+			S(v("auth.mfa.errors.verificationFailed"));
 		}
 	}, [
-		m,
-		v,
 		h,
-		_
-	]), C = m.emailHint == null ? _("auth.mfa.helper.default") : _("auth.mfa.helper.withEmail", { email: m.emailHint }), w = b;
-	return /* @__PURE__ */ p("form", {
+		y,
+		g,
+		v
+	]), w = h.emailHint == null ? v("auth.mfa.helper.default") : v("auth.mfa.helper.withEmail", { email: h.emailHint }), T = x;
+	return /* @__PURE__ */ m(u, {
 		className: t,
-		onSubmit: S,
+		onSubmit: o((e) => {
+			C(e).catch(() => {});
+		}, [C]),
 		noValidate: !0,
-		children: [/* @__PURE__ */ p("div", {
+		initialFocus: "first-form-control",
+		children: [/* @__PURE__ */ m("div", {
 			className: i,
 			children: [
-				/* @__PURE__ */ f("p", {
+				/* @__PURE__ */ p("p", {
 					className: n,
-					children: C
+					children: w
 				}),
-				w == null ? null : /* @__PURE__ */ f(u, { children: w }),
-				/* @__PURE__ */ f(d, {
-					label: _("auth.mfa.form.label"),
+				T == null ? null : /* @__PURE__ */ p(d, { children: T }),
+				/* @__PURE__ */ p(f, {
+					label: v("auth.mfa.form.label"),
 					name: "code",
 					type: "text",
-					value: v,
+					value: y,
 					onChange: (e) => {
-						y(e.target.value), x(null);
+						b(e.target.value), S(null);
 					},
-					placeholder: _("auth.mfa.form.placeholder"),
+					placeholder: v("auth.mfa.form.placeholder"),
 					autoComplete: "one-time-code",
-					autoFocus: !0,
 					required: !0
 				})
 			]
-		}), /* @__PURE__ */ p("div", {
+		}), /* @__PURE__ */ m("div", {
 			className: e,
-			children: [/* @__PURE__ */ f(l, {
+			children: [/* @__PURE__ */ p(l, {
 				type: "button",
 				variant: "text",
 				size: "small",
 				className: r,
 				onClick: () => {
-					m.reset(), g();
+					h.reset(), _();
 				},
-				children: _("auth.mfa.actions.back")
-			}), /* @__PURE__ */ f(l, {
+				children: v("auth.mfa.actions.back")
+			}), /* @__PURE__ */ p(l, {
 				type: "submit",
 				size: "large",
-				isLoading: m.isLoading,
-				children: _("auth.mfa.actions.submit")
+				isLoading: h.isLoading,
+				children: v("auth.mfa.actions.submit")
 			})]
 		})]
 	});
 };
 //#endregion
-export { m as MfaChallengeForm };
+export { h as MfaChallengeForm };
 
 //# sourceMappingURL=MfaChallengeForm.js.map

package/lib/esm/auth/login/MfaChallengeForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MfaChallengeForm.js","names":[],"sources":["../../../../src/auth/login/MfaChallengeForm.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button, FormError, FormField } from '@plumile/ui';\n\nimport type { TotpCredentials, UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    'completeMfa' | 'isLoading' | 'error' | 'emailHint' | 'reset' | 'clearError'\n  >;\n  onSuccess: () => void;\n  onBack: () => void;\n};\n\nexport const MfaChallengeForm = ({\n  auth,\n  onSuccess,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [code, setCode] = useState('');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  // Clear any stale errors when the MFA form is shown\n  useEffect(() => {\n    auth.clearError();\n    setLocalError(null);\n  }, [auth]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      const trimmed = code.trim();\n      if (trimmed.length < 4) {\n        setLocalError(t('auth.mfa.errors.shortCode'));\n        return;\n      }\n\n      try {\n        const credentials: TotpCredentials = {\n          code: trimmed,\n        };\n        await auth.completeMfa(credentials);\n        onSuccess();\n      } catch {\n        setLocalError(t('auth.mfa.errors.verificationFailed'));\n      }\n    },\n    [auth, code, onSuccess, t],\n  );\n\n  const helper =\n    auth.emailHint != null\n      ? t('auth.mfa.helper.withEmail', { email: auth.emailHint })\n      : t('auth.mfa.helper.default');\n\n  const formError = localError;\n\n  return (\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    <form className={styles.formSurface} onSubmit={handleSubmit} noValidate>\n      <div className={styles.stack}>\n        <p className={styles.helper}>{helper}</p>\n        {formError != null ? <FormError>{formError}</FormError> : null}\n        <FormField\n          label={t('auth.mfa.form.label')}\n          name=\"code\"\n          type=\"text\"\n          value={code}\n          onChange={(event) => {\n            setCode(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.mfa.form.placeholder')}\n          autoComplete=\"one-time-code\"\n          autoFocus\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button\n          type=\"button\"\n          variant=\"text\"\n          size=\"small\"\n          className={styles.inlineLink}\n          onClick={() => {\n            auth.reset();\n            onBack();\n          }}\n        >\n          {t('auth.mfa.actions.back')}\n        </Button>\n        <Button type=\"submit\" size=\"large\" isLoading={auth.isLoading}>\n          {t('auth.mfa.actions.submit')}\n        </Button>\n      </div>\n    </form>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,KAAoB,EAC/B,SACA,cACA,gBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAGjE,QAAgB;EAEd,AADA,EAAK,YAAY,EACjB,EAAc,KAAK;IAClB,CAAC,EAAK,CAAC;CAEV,IAAM,IAAe,EACnB,OAAO,MAAsC;EAE3C,AADA,EAAM,gBAAgB,EACtB,EAAc,KAAK;EAEnB,IAAM,IAAU,EAAK,MAAM;EAC3B,IAAI,EAAQ,SAAS,GAAG;GACtB,EAAc,EAAE,4BAA4B,CAAC;GAC7C;;EAGF,IAAI;GACF,IAAM,IAA+B,EACnC,MAAM,GACP;GAED,AADA,MAAM,EAAK,YAAY,EAAY,EACnC,GAAW;UACL;GACN,EAAc,EAAE,qCAAqC,CAAC;;IAG1D;EAAC;EAAM;EAAM;EAAW;EAAE,CAC3B,EAEK,IACJ,EAAK,aAAa,OAEd,EAAE,0BAA0B,GAD5B,EAAE,6BAA6B,EAAE,OAAO,EAAK,WAAW,CAAC,EAGzD,IAAY;CAElB,OAEE,kBAAC,QAAD;EAAM,WAAW;EAAoB,UAAU;EAAc,YAAA;YAA7D,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB;KAAW,CAAA;IACxC,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,sBAAsB;KAC/B,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAQ,EAAM,OAAO,MAAM,EAC3B,EAAc,KAAK;;KAErB,aAAa,EAAE,4BAA4B;KAC3C,cAAa;KACb,WAAA;KACA,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAW;IACX,eAAe;KAEb,AADA,EAAK,OAAO,EACZ,GAAQ;;cAGT,EAAE,wBAAwB;IACpB,CAAA,EACT,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,WAAW,EAAK;cAChD,EAAE,0BAA0B;IACtB,CAAA,CACL;KACD"}
+{"version":3,"file":"MfaChallengeForm.js","names":[],"sources":["../../../../src/auth/login/MfaChallengeForm.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button, Form, FormError, FormField } from '@plumile/ui';\n\nimport type { TotpCredentials, UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    'completeMfa' | 'isLoading' | 'error' | 'emailHint' | 'reset' | 'clearError'\n  >;\n  onSuccess: () => void;\n  onBack: () => void;\n};\n\nexport const MfaChallengeForm = ({\n  auth,\n  onSuccess,\n  onBack,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [code, setCode] = useState('');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  // Clear any stale errors when the MFA form is shown\n  useEffect(() => {\n    auth.clearError();\n    setLocalError(null);\n  }, [auth]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      const trimmed = code.trim();\n      if (trimmed.length < 4) {\n        setLocalError(t('auth.mfa.errors.shortCode'));\n        return;\n      }\n\n      try {\n        const credentials: TotpCredentials = {\n          code: trimmed,\n        };\n        await auth.completeMfa(credentials);\n        onSuccess();\n      } catch {\n        setLocalError(t('auth.mfa.errors.verificationFailed'));\n      }\n    },\n    [auth, code, onSuccess, t],\n  );\n\n  const helper =\n    auth.emailHint != null\n      ? t('auth.mfa.helper.withEmail', { email: auth.emailHint })\n      : t('auth.mfa.helper.default');\n\n  const formError = localError;\n\n  const handleSubmitEvent = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      handleSubmit(event).catch(() => {\n        return undefined;\n      });\n    },\n    [handleSubmit],\n  );\n\n  return (\n    <Form\n      className={styles.formSurface}\n      onSubmit={handleSubmitEvent}\n      noValidate\n      initialFocus=\"first-form-control\"\n    >\n      <div className={styles.stack}>\n        <p className={styles.helper}>{helper}</p>\n        {formError != null ? <FormError>{formError}</FormError> : null}\n        <FormField\n          label={t('auth.mfa.form.label')}\n          name=\"code\"\n          type=\"text\"\n          value={code}\n          onChange={(event) => {\n            setCode(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.mfa.form.placeholder')}\n          autoComplete=\"one-time-code\"\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button\n          type=\"button\"\n          variant=\"text\"\n          size=\"small\"\n          className={styles.inlineLink}\n          onClick={() => {\n            auth.reset();\n            onBack();\n          }}\n        >\n          {t('auth.mfa.actions.back')}\n        </Button>\n        <Button type=\"submit\" size=\"large\" isLoading={auth.isLoading}>\n          {t('auth.mfa.actions.submit')}\n        </Button>\n      </div>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;AAyBA,IAAa,KAAoB,EAC/B,SACA,cACA,gBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAM,KAAW,EAAS,GAAG,EAC9B,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAGjE,QAAgB;EAEd,AADA,EAAK,YAAY,EACjB,EAAc,KAAK;IAClB,CAAC,EAAK,CAAC;CAEV,IAAM,IAAe,EACnB,OAAO,MAAsC;EAE3C,AADA,EAAM,gBAAgB,EACtB,EAAc,KAAK;EAEnB,IAAM,IAAU,EAAK,MAAM;EAC3B,IAAI,EAAQ,SAAS,GAAG;GACtB,EAAc,EAAE,4BAA4B,CAAC;GAC7C;;EAGF,IAAI;GACF,IAAM,IAA+B,EACnC,MAAM,GACP;GAED,AADA,MAAM,EAAK,YAAY,EAAY,EACnC,GAAW;UACL;GACN,EAAc,EAAE,qCAAqC,CAAC;;IAG1D;EAAC;EAAM;EAAM;EAAW;EAAE,CAC3B,EAEK,IACJ,EAAK,aAAa,OAEd,EAAE,0BAA0B,GAD5B,EAAE,6BAA6B,EAAE,OAAO,EAAK,WAAW,CAAC,EAGzD,IAAY;CAWlB,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZsB,GACvB,MAAsC;GACrC,EAAa,EAAM,CAAC,YAAY,GAE9B;KAEJ,CAAC,EAAa,CAMF;EACV,YAAA;EACA,cAAa;YAJf,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB;KAAW,CAAA;IACxC,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,sBAAsB;KAC/B,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAQ,EAAM,OAAO,MAAM,EAC3B,EAAc,KAAK;;KAErB,aAAa,EAAE,4BAA4B;KAC3C,cAAa;KACb,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAW;IACX,eAAe;KAEb,AADA,EAAK,OAAO,EACZ,GAAQ;;cAGT,EAAE,wBAAwB;IACpB,CAAA,EACT,kBAAC,GAAD;IAAQ,MAAK;IAAS,MAAK;IAAQ,WAAW,EAAK;cAChD,EAAE,0BAA0B;IACtB,CAAA,CACL;KACD"}

package/lib/esm/auth/login/PasskeyLoginForm.js

@@ -1,81 +1,84 @@
 import { actionsRow as e, formSurface as t, helper as n, inlineLink as r, stack as i } from "./loginPage.css.js";
 import { useBackofficeReactTranslation as a } from "../../i18n/useBackofficeReactTranslation.js";
 import { useCallback as o, useEffect as s, useState as c } from "react";
-import { Button as l, FormError as u, FormField as d } from "@plumile/ui";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Button as l, Form as u, FormError as d, FormField as f } from "@plumile/ui";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/auth/login/PasskeyLoginForm.tsx
-var m = ({ auth: m, onSuccess: h, defaultEmail: g, isAttemptingPasskey: _ = !1, onShowMethods: v }) => {
-	let { t: y } = a(), [b, x] = c(m.emailHint ?? ""), [S, C] = c(null);
+var h = ({ auth: h, onSuccess: g, defaultEmail: _, isAttemptingPasskey: v = !1, onShowMethods: y }) => {
+	let { t: b } = a(), [x, S] = c(h.emailHint ?? ""), [C, w] = c(null);
 	s(() => {
-		m.emailHint != null && m.emailHint !== "" ? x(m.emailHint) : g != null && g !== "" && x(g);
-	}, [m.emailHint, g]);
-	let w = o(async (e) => {
-		if (e.preventDefault(), C(null), b.trim() === "") {
-			C(y("auth.passkey.errors.emailRequired"));
+		h.emailHint != null && h.emailHint !== "" ? S(h.emailHint) : _ != null && _ !== "" && S(_);
+	}, [h.emailHint, _]);
+	let T = o(async (e) => {
+		if (e.preventDefault(), w(null), x.trim() === "") {
+			w(b("auth.passkey.errors.emailRequired"));
 			return;
 		}
 		try {
-			let e = await m.beginAuthentication(b.trim());
+			let e = await h.beginAuthentication(x.trim());
 			if (Array.isArray(e.methods) && e.methods.length === 0) {
-				C(e.lockedUntil == null ? y("auth.passkey.errors.locked") : y("auth.passkey.errors.lockedWithTime", { time: new Date(e.lockedUntil).toLocaleString() }));
+				w(e.lockedUntil == null ? b("auth.passkey.errors.locked") : b("auth.passkey.errors.lockedWithTime", { time: new Date(e.lockedUntil).toLocaleString() }));
 				return;
 			}
 			if (Array.isArray(e.methods) && !e.methods.includes("PASSKEY")) {
-				C(y("auth.passkey.errors.notAvailable"));
+				w(b("auth.passkey.errors.notAvailable"));
 				return;
 			}
-			await m.loginWithPasskey({ email: b.trim() }) === "success" && h();
+			await h.loginWithPasskey({ email: x.trim() }) === "success" && g();
 		} catch {
-			C(y("auth.passkey.errors.failed"));
+			w(b("auth.passkey.errors.failed"));
 		}
 	}, [
-		m,
-		b,
 		h,
-		y
-	]), T = S;
-	return /* @__PURE__ */ p("form", {
+		x,
+		g,
+		b
+	]), E = C;
+	return /* @__PURE__ */ m(u, {
 		className: t,
-		onSubmit: w,
+		onSubmit: o((e) => {
+			T(e).catch(() => {});
+		}, [T]),
 		noValidate: !0,
-		children: [/* @__PURE__ */ p("div", {
+		initialFocus: "first-form-control",
+		children: [/* @__PURE__ */ m("div", {
 			className: i,
 			children: [
-				/* @__PURE__ */ f("p", {
+				/* @__PURE__ */ p("p", {
 					className: n,
-					children: y("auth.passkey.helper")
+					children: b("auth.passkey.helper")
 				}),
-				T == null ? null : /* @__PURE__ */ f(u, { children: T }),
-				/* @__PURE__ */ f(d, {
-					label: y("auth.passkey.form.emailLabel"),
+				E == null ? null : /* @__PURE__ */ p(d, { children: E }),
+				/* @__PURE__ */ p(f, {
+					label: b("auth.passkey.form.emailLabel"),
 					name: "passkey-email",
 					type: "email",
-					value: b,
+					value: x,
 					onChange: (e) => {
-						x(e.target.value), C(null);
+						S(e.target.value), w(null);
 					},
-					placeholder: y("auth.passkey.form.emailPlaceholder"),
+					placeholder: b("auth.passkey.form.emailPlaceholder"),
 					autoComplete: "email",
 					required: !0
 				})
 			]
-		}), /* @__PURE__ */ p("div", {
+		}), /* @__PURE__ */ m("div", {
 			className: e,
-			children: [/* @__PURE__ */ f(l, {
+			children: [/* @__PURE__ */ p(l, {
 				type: "submit",
 				variant: "primary",
-				isLoading: m.isLoading,
-				children: y(_ ? "auth.passkey.actions.submitting" : "auth.passkey.actions.submit")
-			}), v == null ? null : /* @__PURE__ */ f("button", {
+				isLoading: h.isLoading,
+				children: b(v ? "auth.passkey.actions.submitting" : "auth.passkey.actions.submit")
+			}), y == null ? null : /* @__PURE__ */ p("button", {
 				type: "button",
 				className: r,
-				onClick: v,
-				children: y("auth.passkey.actions.showMethods")
+				onClick: y,
+				children: b("auth.passkey.actions.showMethods")
 			})]
 		})]
 	});
 };
 //#endregion
-export { m as PasskeyLoginForm };
+export { h as PasskeyLoginForm };
 
 //# sourceMappingURL=PasskeyLoginForm.js.map

package/lib/esm/auth/login/PasskeyLoginForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasskeyLoginForm.js","names":[],"sources":["../../../../src/auth/login/PasskeyLoginForm.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button, FormError, FormField } from '@plumile/ui';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    | 'loginWithPasskey'\n    | 'isLoading'\n    | 'error'\n    | 'emailHint'\n    | 'nextStep'\n    | 'beginAuthentication'\n    | 'lockedUntil'\n    | 'availableMethods'\n  >;\n  onSuccess: () => void;\n  defaultEmail?: string;\n  isAttemptingPasskey?: boolean;\n  onShowMethods?: () => void;\n};\n\nexport const PasskeyLoginForm = ({\n  auth,\n  onSuccess,\n  defaultEmail,\n  isAttemptingPasskey = false,\n  onShowMethods,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState(auth.emailHint ?? '');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (auth.emailHint != null && auth.emailHint !== '') {\n      setEmail(auth.emailHint);\n    } else if (defaultEmail != null && defaultEmail !== '') {\n      setEmail(defaultEmail);\n    }\n  }, [auth.emailHint, defaultEmail]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      if (email.trim() === '') {\n        setLocalError(t('auth.passkey.errors.emailRequired'));\n        return;\n      }\n\n      try {\n        const result = await auth.beginAuthentication(email.trim());\n        if (Array.isArray(result.methods) && result.methods.length === 0) {\n          const lockedUntilMessage =\n            result.lockedUntil != null\n              ? t('auth.passkey.errors.lockedWithTime', {\n                  time: new Date(result.lockedUntil).toLocaleString(),\n                })\n              : t('auth.passkey.errors.locked');\n          setLocalError(lockedUntilMessage);\n          return;\n        }\n        if (\n          Array.isArray(result.methods) &&\n          !result.methods.includes('PASSKEY')\n        ) {\n          setLocalError(t('auth.passkey.errors.notAvailable'));\n          return;\n        }\n\n        const status = await auth.loginWithPasskey({ email: email.trim() });\n        if (status === 'success') {\n          onSuccess();\n        }\n      } catch {\n        setLocalError(t('auth.passkey.errors.failed'));\n      }\n    },\n    [auth, email, onSuccess, t],\n  );\n\n  const formError = localError;\n\n  return (\n    // eslint-disable-next-line @typescript-eslint/no-misused-promises\n    <form className={styles.formSurface} onSubmit={handleSubmit} noValidate>\n      <div className={styles.stack}>\n        <p className={styles.helper}>{t('auth.passkey.helper')}</p>\n        {formError != null ? <FormError>{formError}</FormError> : null}\n        <FormField\n          label={t('auth.passkey.form.emailLabel')}\n          name=\"passkey-email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            setEmail(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.passkey.form.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button type=\"submit\" variant=\"primary\" isLoading={auth.isLoading}>\n          {isAttemptingPasskey\n            ? t('auth.passkey.actions.submitting')\n            : t('auth.passkey.actions.submit')}\n        </Button>\n        {onShowMethods != null ? (\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onShowMethods}\n          >\n            {t('auth.passkey.actions.showMethods')}\n          </button>\n        ) : null}\n      </div>\n    </form>\n  );\n};\n"],"mappings":";;;;;;AAkCA,IAAa,KAAoB,EAC/B,SACA,cACA,iBACA,yBAAsB,IACtB,uBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAO,KAAY,EAAS,EAAK,aAAa,GAAG,EAClD,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAEjE,QAAgB;EACd,AAAI,EAAK,aAAa,QAAQ,EAAK,cAAc,KAC/C,EAAS,EAAK,UAAU,GACf,KAAgB,QAAQ,MAAiB,MAClD,EAAS,EAAa;IAEvB,CAAC,EAAK,WAAW,EAAa,CAAC;CAElC,IAAM,IAAe,EACnB,OAAO,MAAsC;EAI3C,IAHA,EAAM,gBAAgB,EACtB,EAAc,KAAK,EAEf,EAAM,MAAM,KAAK,IAAI;GACvB,EAAc,EAAE,oCAAoC,CAAC;GACrD;;EAGF,IAAI;GACF,IAAM,IAAS,MAAM,EAAK,oBAAoB,EAAM,MAAM,CAAC;GAC3D,IAAI,MAAM,QAAQ,EAAO,QAAQ,IAAI,EAAO,QAAQ,WAAW,GAAG;IAOhE,EALE,EAAO,eAAe,OAIlB,EAAE,6BAA6B,GAH/B,EAAE,sCAAsC,EACtC,MAAM,IAAI,KAAK,EAAO,YAAY,CAAC,gBAAgB,EACpD,CAAC,CAEyB;IACjC;;GAEF,IACE,MAAM,QAAQ,EAAO,QAAQ,IAC7B,CAAC,EAAO,QAAQ,SAAS,UAAU,EACnC;IACA,EAAc,EAAE,mCAAmC,CAAC;IACpD;;GAIF,AAAI,MADiB,EAAK,iBAAiB,EAAE,OAAO,EAAM,MAAM,EAAE,CAAC,KACpD,aACb,GAAW;UAEP;GACN,EAAc,EAAE,6BAA6B,CAAC;;IAGlD;EAAC;EAAM;EAAO;EAAW;EAAE,CAC5B,EAEK,IAAY;CAElB,OAEE,kBAAC,QAAD;EAAM,WAAW;EAAoB,UAAU;EAAc,YAAA;YAA7D,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB,EAAE,sBAAsB;KAAK,CAAA;IAC1D,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,+BAA+B;KACxC,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,MAAM,EAC5B,EAAc,KAAK;;KAErB,aAAa,EAAE,qCAAqC;KACpD,cAAa;KACb,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAU,WAAW,EAAK;cAElD,EADH,IACK,oCACA,8BAA8B;IAC7B,CAAA,EACR,KAAiB,OAQd,OAPF,kBAAC,UAAD;IACE,MAAK;IACL,WAAW;IACX,SAAS;cAER,EAAE,mCAAmC;IAC/B,CAAA,CAEP;KACD"}
+{"version":3,"file":"PasskeyLoginForm.js","names":[],"sources":["../../../../src/auth/login/PasskeyLoginForm.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type FormEvent,\n  type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button, Form, FormError, FormField } from '@plumile/ui';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport * as styles from './loginPage.css.js';\n\ntype Props = {\n  auth: Pick<\n    UseAuthReturn,\n    | 'loginWithPasskey'\n    | 'isLoading'\n    | 'error'\n    | 'emailHint'\n    | 'nextStep'\n    | 'beginAuthentication'\n    | 'lockedUntil'\n    | 'availableMethods'\n  >;\n  onSuccess: () => void;\n  defaultEmail?: string;\n  isAttemptingPasskey?: boolean;\n  onShowMethods?: () => void;\n};\n\nexport const PasskeyLoginForm = ({\n  auth,\n  onSuccess,\n  defaultEmail,\n  isAttemptingPasskey = false,\n  onShowMethods,\n}: Props): JSX.Element => {\n  const { t } = useBackofficeReactTranslation();\n  const [email, setEmail] = useState(auth.emailHint ?? '');\n  const [localError, setLocalError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (auth.emailHint != null && auth.emailHint !== '') {\n      setEmail(auth.emailHint);\n    } else if (defaultEmail != null && defaultEmail !== '') {\n      setEmail(defaultEmail);\n    }\n  }, [auth.emailHint, defaultEmail]);\n\n  const handleSubmit = useCallback(\n    async (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n      setLocalError(null);\n\n      if (email.trim() === '') {\n        setLocalError(t('auth.passkey.errors.emailRequired'));\n        return;\n      }\n\n      try {\n        const result = await auth.beginAuthentication(email.trim());\n        if (Array.isArray(result.methods) && result.methods.length === 0) {\n          const lockedUntilMessage =\n            result.lockedUntil != null\n              ? t('auth.passkey.errors.lockedWithTime', {\n                  time: new Date(result.lockedUntil).toLocaleString(),\n                })\n              : t('auth.passkey.errors.locked');\n          setLocalError(lockedUntilMessage);\n          return;\n        }\n        if (\n          Array.isArray(result.methods) &&\n          !result.methods.includes('PASSKEY')\n        ) {\n          setLocalError(t('auth.passkey.errors.notAvailable'));\n          return;\n        }\n\n        const status = await auth.loginWithPasskey({ email: email.trim() });\n        if (status === 'success') {\n          onSuccess();\n        }\n      } catch {\n        setLocalError(t('auth.passkey.errors.failed'));\n      }\n    },\n    [auth, email, onSuccess, t],\n  );\n\n  const formError = localError;\n\n  const handleSubmitEvent = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      handleSubmit(event).catch(() => {\n        return undefined;\n      });\n    },\n    [handleSubmit],\n  );\n\n  return (\n    <Form\n      className={styles.formSurface}\n      onSubmit={handleSubmitEvent}\n      noValidate\n      initialFocus=\"first-form-control\"\n    >\n      <div className={styles.stack}>\n        <p className={styles.helper}>{t('auth.passkey.helper')}</p>\n        {formError != null ? <FormError>{formError}</FormError> : null}\n        <FormField\n          label={t('auth.passkey.form.emailLabel')}\n          name=\"passkey-email\"\n          type=\"email\"\n          value={email}\n          onChange={(event) => {\n            setEmail(event.target.value);\n            setLocalError(null);\n          }}\n          placeholder={t('auth.passkey.form.emailPlaceholder')}\n          autoComplete=\"email\"\n          required\n        />\n      </div>\n      <div className={styles.actionsRow}>\n        <Button type=\"submit\" variant=\"primary\" isLoading={auth.isLoading}>\n          {isAttemptingPasskey\n            ? t('auth.passkey.actions.submitting')\n            : t('auth.passkey.actions.submit')}\n        </Button>\n        {onShowMethods != null ? (\n          <button\n            type=\"button\"\n            className={styles.inlineLink}\n            onClick={onShowMethods}\n          >\n            {t('auth.passkey.actions.showMethods')}\n          </button>\n        ) : null}\n      </div>\n    </Form>\n  );\n};\n"],"mappings":";;;;;;AAkCA,IAAa,KAAoB,EAC/B,SACA,cACA,iBACA,yBAAsB,IACtB,uBACwB;CACxB,IAAM,EAAE,SAAM,GAA+B,EACvC,CAAC,GAAO,KAAY,EAAS,EAAK,aAAa,GAAG,EAClD,CAAC,GAAY,KAAiB,EAAwB,KAAK;CAEjE,QAAgB;EACd,AAAI,EAAK,aAAa,QAAQ,EAAK,cAAc,KAC/C,EAAS,EAAK,UAAU,GACf,KAAgB,QAAQ,MAAiB,MAClD,EAAS,EAAa;IAEvB,CAAC,EAAK,WAAW,EAAa,CAAC;CAElC,IAAM,IAAe,EACnB,OAAO,MAAsC;EAI3C,IAHA,EAAM,gBAAgB,EACtB,EAAc,KAAK,EAEf,EAAM,MAAM,KAAK,IAAI;GACvB,EAAc,EAAE,oCAAoC,CAAC;GACrD;;EAGF,IAAI;GACF,IAAM,IAAS,MAAM,EAAK,oBAAoB,EAAM,MAAM,CAAC;GAC3D,IAAI,MAAM,QAAQ,EAAO,QAAQ,IAAI,EAAO,QAAQ,WAAW,GAAG;IAOhE,EALE,EAAO,eAAe,OAIlB,EAAE,6BAA6B,GAH/B,EAAE,sCAAsC,EACtC,MAAM,IAAI,KAAK,EAAO,YAAY,CAAC,gBAAgB,EACpD,CAAC,CAEyB;IACjC;;GAEF,IACE,MAAM,QAAQ,EAAO,QAAQ,IAC7B,CAAC,EAAO,QAAQ,SAAS,UAAU,EACnC;IACA,EAAc,EAAE,mCAAmC,CAAC;IACpD;;GAIF,AAAI,MADiB,EAAK,iBAAiB,EAAE,OAAO,EAAM,MAAM,EAAE,CAAC,KACpD,aACb,GAAW;UAEP;GACN,EAAc,EAAE,6BAA6B,CAAC;;IAGlD;EAAC;EAAM;EAAO;EAAW;EAAE,CAC5B,EAEK,IAAY;CAWlB,OACE,kBAAC,GAAD;EACE,WAAW;EACX,UAZsB,GACvB,MAAsC;GACrC,EAAa,EAAM,CAAC,YAAY,GAE9B;KAEJ,CAAC,EAAa,CAMF;EACV,YAAA;EACA,cAAa;YAJf,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,KAAD;KAAG,WAAW;eAAgB,EAAE,sBAAsB;KAAK,CAAA;IAC1D,KAAa,OAA4C,OAArC,kBAAC,GAAD,EAAA,UAAY,GAAsB,CAAA;IACvD,kBAAC,GAAD;KACE,OAAO,EAAE,+BAA+B;KACxC,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,MAAM,EAC5B,EAAc,KAAK;;KAErB,aAAa,EAAE,qCAAqC;KACpD,cAAa;KACb,UAAA;KACA,CAAA;IACE;MACN,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,GAAD;IAAQ,MAAK;IAAS,SAAQ;IAAU,WAAW,EAAK;cAElD,EADH,IACK,oCACA,8BAA8B;IAC7B,CAAA,EACR,KAAiB,OAQd,OAPF,kBAAC,UAAD;IACE,MAAK;IACL,WAAW;IACX,SAAS;cAER,EAAE,mCAAmC;IAC/B,CAAA,CAEP;KACD"}

package/lib/esm/auth/pages/AcceptInvitationScreen.js

@@ -3,115 +3,116 @@ import { AuthPanel as r } from "../login/AuthPanel.js";
 import { useBackofficeReactTranslation as i } from "../../i18n/useBackofficeReactTranslation.js";
 import { MfaChallengeForm as a } from "../login/MfaChallengeForm.js";
 import { useCallback as o, useMemo as s, useState as c } from "react";
-import { AuthLayout as l, Button as u, FormError as d, FormField as f } from "@plumile/ui";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { AuthLayout as l, Button as u, Form as d, FormError as f, FormField as p } from "@plumile/ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/auth/pages/AcceptInvitationScreen.tsx
-var h = ({ auth: h, onSuccessRedirect: g, onBackToLogin: _, token: v }) => {
-	let { t: y } = i(), { acceptInvitation: b } = h, [x, S] = c("idle"), [C, w] = c(""), [T, E] = c(""), [D, O] = c(!1), [k, A] = c(null), j = s(() => v ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [v]), M = o((e) => {
-		if (e.preventDefault(), j === "") {
-			A(y("auth.acceptInvitation.errors.missingToken")), S("error");
+var g = ({ auth: g, onSuccessRedirect: _, onBackToLogin: v, token: y }) => {
+	let { t: b } = i(), { acceptInvitation: x } = g, [S, C] = c("idle"), [w, T] = c(""), [E, D] = c(""), [O, k] = c(!1), [A, j] = c(null), M = s(() => y ?? (typeof window > "u" ? "" : new URLSearchParams(window.location.search).get("token") ?? ""), [y]), N = o((e) => {
+		if (e.preventDefault(), M === "") {
+			j(b("auth.acceptInvitation.errors.missingToken")), C("error");
 			return;
 		}
-		if (C !== T) {
-			A(y("auth.acceptInvitation.errors.passwordMismatch")), S("error");
+		if (w !== E) {
+			j(b("auth.acceptInvitation.errors.passwordMismatch")), C("error");
 			return;
 		}
-		S("pending"), A(null), O(!0), b({
-			token: j,
-			password: C,
-			passwordConfirmation: T
+		C("pending"), j(null), k(!0), x({
+			token: M,
+			password: w,
+			passwordConfirmation: E
 		}).then((e) => {
 			if (e === "mfa-required") {
-				S("mfa");
+				C("mfa");
 				return;
 			}
-			S("completed"), g();
+			C("completed"), _();
 		}).catch(() => {
-			S("error"), A(y("auth.acceptInvitation.errors.default"));
+			C("error"), j(b("auth.acceptInvitation.errors.default"));
 		}).finally(() => {
-			O(!1);
+			k(!1);
 		});
 	}, [
-		b,
-		g,
-		C,
-		T,
-		j,
-		y
-	]), N = o(() => {
-		S("completed"), g();
-	}, [g]), P = o(() => {
-		S("idle"), A(null), O(!1);
+		x,
+		_,
+		w,
+		E,
+		M,
+		b
+	]), P = o(() => {
+		C("completed"), _();
+	}, [_]), F = o(() => {
+		C("idle"), j(null), k(!1);
 	}, []);
-	if (x === "mfa") return /* @__PURE__ */ p(l, {
-		title: y("auth.acceptInvitation.mfaTitle"),
-		subtitle: y("auth.acceptInvitation.mfaSubtitle"),
-		children: /* @__PURE__ */ p(a, {
-			auth: h,
-			onSuccess: N,
+	if (S === "mfa") return /* @__PURE__ */ m(l, {
+		title: b("auth.acceptInvitation.mfaTitle"),
+		subtitle: b("auth.acceptInvitation.mfaSubtitle"),
+		children: /* @__PURE__ */ m(a, {
+			auth: g,
+			onSuccess: P,
 			onBack: () => {
-				h.reset(), P();
+				g.reset(), F();
 			}
 		})
 	});
-	let F;
-	return F = x === "completed" ? /* @__PURE__ */ p("div", {
+	let I;
+	return I = S === "completed" ? /* @__PURE__ */ m("div", {
 		className: n,
-		children: /* @__PURE__ */ p("p", {
+		children: /* @__PURE__ */ m("p", {
 			className: t,
-			children: y("auth.acceptInvitation.status.success")
+			children: b("auth.acceptInvitation.status.success")
 		})
-	}) : /* @__PURE__ */ p(r, {
-		description: y("auth.acceptInvitation.subtitle"),
-		children: /* @__PURE__ */ m("form", {
+	}) : /* @__PURE__ */ m(r, {
+		description: b("auth.acceptInvitation.subtitle"),
+		children: /* @__PURE__ */ h(d, {
 			className: e,
-			onSubmit: M,
+			onSubmit: N,
 			noValidate: !0,
+			initialFocus: "first-form-control",
 			children: [
-				k == null ? null : /* @__PURE__ */ p(d, { children: k }),
-				/* @__PURE__ */ p(f, {
-					label: y("auth.acceptInvitation.form.passwordLabel"),
+				A == null ? null : /* @__PURE__ */ m(f, { children: A }),
+				/* @__PURE__ */ m(p, {
+					label: b("auth.acceptInvitation.form.passwordLabel"),
 					name: "password",
 					type: "password",
-					value: C,
+					value: w,
 					onChange: (e) => {
-						w(e.target.value), A(null), x === "error" && S("idle");
+						T(e.target.value), j(null), S === "error" && C("idle");
 					},
-					placeholder: y("auth.acceptInvitation.form.passwordPlaceholder"),
+					placeholder: b("auth.acceptInvitation.form.passwordPlaceholder"),
 					autoComplete: "new-password",
 					required: !0
 				}),
-				/* @__PURE__ */ p(f, {
-					label: y("auth.acceptInvitation.form.confirmLabel"),
+				/* @__PURE__ */ m(p, {
+					label: b("auth.acceptInvitation.form.confirmLabel"),
 					name: "password-confirmation",
 					type: "password",
-					value: T,
+					value: E,
 					onChange: (e) => {
-						E(e.target.value), A(null), x === "error" && S("idle");
+						D(e.target.value), j(null), S === "error" && C("idle");
 					},
-					placeholder: y("auth.acceptInvitation.form.confirmPlaceholder"),
+					placeholder: b("auth.acceptInvitation.form.confirmPlaceholder"),
 					autoComplete: "new-password",
 					required: !0
 				}),
-				/* @__PURE__ */ p(u, {
+				/* @__PURE__ */ m(u, {
 					type: "submit",
-					isLoading: D,
-					children: y(x === "pending" ? "auth.acceptInvitation.status.workingButton" : "auth.acceptInvitation.form.submit")
+					isLoading: O,
+					children: b(S === "pending" ? "auth.acceptInvitation.status.workingButton" : "auth.acceptInvitation.form.submit")
 				}),
-				/* @__PURE__ */ p(u, {
+				/* @__PURE__ */ m(u, {
 					type: "button",
 					variant: "secondary",
-					onClick: _,
-					children: y("auth.acceptInvitation.actions.backToLogin")
+					onClick: v,
+					children: b("auth.acceptInvitation.actions.backToLogin")
 				})
 			]
 		})
-	}), /* @__PURE__ */ p(l, {
-		title: y("auth.acceptInvitation.title"),
-		children: F
+	}), /* @__PURE__ */ m(l, {
+		title: b("auth.acceptInvitation.title"),
+		children: I
 	});
 };
 //#endregion
-export { h as AcceptInvitationScreen };
+export { g as AcceptInvitationScreen };
 
 //# sourceMappingURL=AcceptInvitationScreen.js.map