@stackcraftmx/calcita 0.0.0-stage → 0.25.0

package/dist/forms/applyServerProblem.js

@@ -0,0 +1,15 @@
+import { splitServerFieldErrors, formLevelMessageOf } from "./serverProblemFields.js";
+import { fieldErrorsOf } from "../problems.js";
+function applyServerProblem(error, { setFieldError, setStatus, values }) {
+  const errorsByField = fieldErrorsOf(error?.problem);
+  const formFieldNames = Object.keys(values ?? {});
+  const { fieldErrors } = splitServerFieldErrors(errorsByField, formFieldNames);
+  for (const [fieldName, message] of Object.entries(fieldErrors)) {
+    setFieldError(fieldName, message);
+  }
+  setStatus(formLevelMessageOf(errorsByField, formFieldNames, error?.message));
+}
+export {
+  applyServerProblem
+};
+//# sourceMappingURL=applyServerProblem.js.map

package/dist/forms/applyServerProblem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyServerProblem.js","sources":["../../src/forms/applyServerProblem.js"],"sourcesContent":["// Del error del servidor a los campos del formulario de Formik (validación de los dos lados).\n//\n// El backend responde RFC 9457 con dos tipos de queja:\n//   - un 422 trae `errors` por campo ({email: ['...']}) y eso se pinta EN ese campo: un error de campo mostrado como\n//     aviso obliga a adivinar cuál está mal;\n//   - lo demás (401, 409, 429, 500) es del formulario entero y va al aviso (status de Formik).\n// Si el campo del que se queja no existe en el formulario, el mensaje no se pierde: va al aviso.\n//\n// Función pura, no renderiza: function (regla de la casa).\nimport {formLevelMessageOf, splitServerFieldErrors} from '@/forms/serverProblemFields.js';\nimport {fieldErrorsOf} from '@/problems.js';\n\n/**\n * @param {unknown} error normalmente un ApiError (trae problem y message ya traducidos)\n * @param {{setFieldError: Function, setStatus: Function, values: object}} formikHelpers\n */\nexport function applyServerProblem(error, {setFieldError, setStatus, values}) {\n    const errorsByField = fieldErrorsOf(error?.problem);\n    const formFieldNames = Object.keys(values ?? {});\n    const {fieldErrors} = splitServerFieldErrors(errorsByField, formFieldNames);\n\n    for (const [fieldName, message] of Object.entries(fieldErrors)) {\n        setFieldError(fieldName, message);\n    }\n    setStatus(formLevelMessageOf(errorsByField, formFieldNames, error?.message));\n}\n"],"names":[],"mappings":";;AAgBO,SAAS,mBAAmB,OAAO,EAAC,eAAe,WAAW,OAAM,GAAG;AAC1E,QAAM,gBAAgB,cAAc,OAAO,OAAO;AAClD,QAAM,iBAAiB,OAAO,KAAK,UAAU,CAAA,CAAE;AAC/C,QAAM,EAAC,YAAW,IAAI,uBAAuB,eAAe,cAAc;AAE1E,aAAW,CAAC,WAAW,OAAO,KAAK,OAAO,QAAQ,WAAW,GAAG;AAC5D,kBAAc,WAAW,OAAO;AAAA,EACpC;AACA,YAAU,mBAAmB,eAAe,gBAAgB,OAAO,OAAO,CAAC;AAC/E;"}

package/dist/forms/auth/ChangePasswordForm.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Formik, Form } from "formik";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import Alert from "@mui/material/Alert";
+import Stack from "@mui/material/Stack";
+import PasswordChecklist from "../../auth/PasswordChecklist.js";
+import { isPasswordAccepted, DEFAULT_PASSWORD_POLICY } from "../../auth/passwordRules.js";
+import FormProblemAlert from "../FormProblemAlert.js";
+import FormTextField from "../FormTextField.js";
+import SubmitButton from "../SubmitButton.js";
+import { applyServerProblem } from "../applyServerProblem.js";
+import * as Yup from "yup";
+import ComponentTexts from "../../toolkit/ComponentTexts.js";
+function ChangePasswordForm({ onSubmit, requireCurrentPassword = true, policy = DEFAULT_PASSWORD_POLICY, texts }) {
+  const { t } = useToolkitTranslation("auth", texts);
+  const [isDone, setIsDone] = useState(false);
+  const schema = useMemo(() => Yup.object({
+    currentPassword: requireCurrentPassword ? Yup.string().required() : Yup.string(),
+    newPassword: Yup.string().required().test("accepted", { key: "auth:changePassword.notAccepted" }, (value) => isPasswordAccepted(value, policy)).test("different", { key: "auth:changePassword.sameAsCurrent" }, (value, context) => !requireCurrentPassword || value !== context.parent.currentPassword),
+    confirmPassword: Yup.string().required().oneOf([Yup.ref("newPassword")], { key: "auth:changePassword.mismatch" })
+  }), [policy, requireCurrentPassword]);
+  const submit = async (values, formikHelpers) => {
+    setIsDone(false);
+    try {
+      await onSubmit(requireCurrentPassword ? { currentPassword: values.currentPassword, newPassword: values.newPassword } : { newPassword: values.newPassword });
+      formikHelpers.resetForm();
+      setIsDone(true);
+    } catch (error) {
+      applyServerProblem(error, { ...formikHelpers, values });
+    }
+  };
+  return /* @__PURE__ */ jsx(ComponentTexts, { namespace: "auth", texts, children: /* @__PURE__ */ jsx(Formik, { initialValues: { currentPassword: "", newPassword: "", confirmPassword: "" }, validationSchema: schema, onSubmit: submit, children: ({ values }) => /* @__PURE__ */ jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    isDone && /* @__PURE__ */ jsx(Alert, { severity: "success", role: "status", children: t("changePassword.done") }),
+    /* @__PURE__ */ jsx(FormProblemAlert, {}),
+    requireCurrentPassword && /* @__PURE__ */ jsx(FormTextField, { name: "currentPassword", label: t("changePassword.current"), type: "password", autoComplete: "current-password" }),
+    /* @__PURE__ */ jsx(FormTextField, { name: "newPassword", label: t("changePassword.next"), type: "password", autoComplete: "new-password" }),
+    /* @__PURE__ */ jsx(PasswordChecklist, { password: values.newPassword, policy }),
+    /* @__PURE__ */ jsx(FormTextField, { name: "confirmPassword", label: t("changePassword.confirm"), type: "password", autoComplete: "new-password" }),
+    /* @__PURE__ */ jsx(SubmitButton, { sx: { alignSelf: "flex-start" }, children: t("changePassword.submit") })
+  ] }) }) }) });
+}
+export {
+  ChangePasswordForm as default
+};
+//# sourceMappingURL=ChangePasswordForm.js.map

package/dist/forms/auth/ChangePasswordForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChangePasswordForm.js","sources":["../../../src/forms/auth/ChangePasswordForm.jsx"],"sourcesContent":["// El formulario de cambiar la contraseña (formik): la actual (si se pide), la nueva con su lista de reglas que se va\n// palomeando, y la nueva otra vez. Sirve para «Mi perfil» y, sin la actual, para la pantalla del enlace del correo\n// («elegir una contraseña nueva»).\n//\n//   <ChangePasswordForm onSubmit={(values) => changePassword(values)} />\n//   <ChangePasswordForm requireCurrentPassword={false} onSubmit={(values) => resetPassword({token, ...values})} />\n//\n// Al cambiarla, los campos se vacían y el aviso dice que ya cambió (no se queda la contraseña escrita en pantalla).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {Form, Formik} from 'formik';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Alert from '@mui/material/Alert';\nimport Stack from '@mui/material/Stack';\n\nimport PasswordChecklist from '@/auth/PasswordChecklist.jsx';\nimport {DEFAULT_PASSWORD_POLICY, isPasswordAccepted} from '@/auth/passwordRules.js';\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\nimport ComponentTexts from '@/toolkit/ComponentTexts.jsx';\n\n/**\n * @param {object} props\n * @param {(values: {currentPassword?: string, newPassword: string}) => Promise<unknown>} props.onSubmit cambia la\n *     contraseña; si el servidor dice que no (la actual no es), truena con su problema\n * @param {boolean} [props.requireCurrentPassword] por omisión sí; sin ella para la pantalla del enlace del correo\n * @param {object} [props.policy] las reglas de la nueva; por omisión DEFAULT_PASSWORD_POLICY\n * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete\n */\nexport default function ChangePasswordForm({onSubmit, requireCurrentPassword = true, policy = DEFAULT_PASSWORD_POLICY, texts}) {\n    const {t} = useToolkitTranslation('auth', texts);\n    const [isDone, setIsDone] = useState(false);\n    const schema = useMemo(() => Yup.object({\n        currentPassword: requireCurrentPassword ? Yup.string().required() : Yup.string(),\n        newPassword: Yup.string().required()\n            .test('accepted', {key: 'auth:changePassword.notAccepted'}, (value) => isPasswordAccepted(value, policy))\n            .test('different', {key: 'auth:changePassword.sameAsCurrent'}, (value, context) => !requireCurrentPassword || value !== context.parent.currentPassword),\n        confirmPassword: Yup.string().required().oneOf([Yup.ref('newPassword')], {key: 'auth:changePassword.mismatch'}),\n    }), [policy, requireCurrentPassword]);\n\n    const submit = async (values, formikHelpers) => {\n        setIsDone(false);\n        try {\n            await onSubmit(requireCurrentPassword\n                ? {currentPassword: values.currentPassword, newPassword: values.newPassword}\n                : {newPassword: values.newPassword});\n            formikHelpers.resetForm();\n            setIsDone(true);\n        } catch (error) {\n            applyServerProblem(error, {...formikHelpers, values});\n        }\n    };\n\n    return (\n        <ComponentTexts namespace=\"auth\" texts={texts}>\n            <Formik initialValues={{currentPassword: '', newPassword: '', confirmPassword: ''}} validationSchema={schema} onSubmit={submit}>\n                {({values}) => (\n                    <Form noValidate>\n                        <Stack spacing={2}>\n                            {isDone && <Alert severity=\"success\" role=\"status\">{t('changePassword.done')}</Alert>}\n                            <FormProblemAlert />\n                            {requireCurrentPassword && (\n                                <FormTextField name=\"currentPassword\" label={t('changePassword.current')} type=\"password\" autoComplete=\"current-password\" />\n                            )}\n                            <FormTextField name=\"newPassword\" label={t('changePassword.next')} type=\"password\" autoComplete=\"new-password\" />\n                            <PasswordChecklist password={values.newPassword} policy={policy} />\n                            <FormTextField name=\"confirmPassword\" label={t('changePassword.confirm')} type=\"password\" autoComplete=\"new-password\" />\n                            <SubmitButton sx={{alignSelf: 'flex-start'}}>{t('changePassword.submit')}</SubmitButton>\n                        </Stack>\n                    </Form>\n                )}\n            </Formik>\n        </ComponentTexts>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiCA,SAAwB,mBAAmB,EAAC,UAAU,yBAAyB,MAAM,SAAS,yBAAyB,SAAQ;AAC3H,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ,KAAK;AAC/C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,SAAS,QAAQ,MAAM,IAAI,OAAO;AAAA,IACpC,iBAAiB,yBAAyB,IAAI,OAAA,EAAS,SAAA,IAAa,IAAI,OAAA;AAAA,IACxE,aAAa,IAAI,OAAA,EAAS,WACrB,KAAK,YAAY,EAAC,KAAK,kCAAA,GAAoC,CAAC,UAAU,mBAAmB,OAAO,MAAM,CAAC,EACvG,KAAK,aAAa,EAAC,KAAK,oCAAA,GAAsC,CAAC,OAAO,YAAY,CAAC,0BAA0B,UAAU,QAAQ,OAAO,eAAe;AAAA,IAC1J,iBAAiB,IAAI,SAAS,SAAA,EAAW,MAAM,CAAC,IAAI,IAAI,aAAa,CAAC,GAAG,EAAC,KAAK,gCAA+B;AAAA,EAAA,CACjH,GAAG,CAAC,QAAQ,sBAAsB,CAAC;AAEpC,QAAM,SAAS,OAAO,QAAQ,kBAAkB;AAC5C,cAAU,KAAK;AACf,QAAI;AACA,YAAM,SAAS,yBACT,EAAC,iBAAiB,OAAO,iBAAiB,aAAa,OAAO,YAAA,IAC9D,EAAC,aAAa,OAAO,aAAY;AACvC,oBAAc,UAAA;AACd,gBAAU,IAAI;AAAA,IAClB,SAAS,OAAO;AACZ,yBAAmB,OAAO,EAAC,GAAG,eAAe,QAAO;AAAA,IACxD;AAAA,EACJ;AAEA,SACI,oBAAC,gBAAA,EAAe,WAAU,QAAO,OAC7B,UAAA,oBAAC,QAAA,EAAO,eAAe,EAAC,iBAAiB,IAAI,aAAa,IAAI,iBAAiB,GAAA,GAAK,kBAAkB,QAAQ,UAAU,QACnH,UAAA,CAAC,EAAC,OAAA,MACC,oBAAC,MAAA,EAAK,YAAU,MACZ,UAAA,qBAAC,OAAA,EAAM,SAAS,GACX,UAAA;AAAA,IAAA,UAAU,oBAAC,SAAM,UAAS,WAAU,MAAK,UAAU,UAAA,EAAE,qBAAqB,EAAA,CAAE;AAAA,wBAC5E,kBAAA,EAAiB;AAAA,IACjB,0BACG,oBAAC,eAAA,EAAc,MAAK,mBAAkB,OAAO,EAAE,wBAAwB,GAAG,MAAK,YAAW,cAAa,mBAAA,CAAmB;AAAA,IAE9H,oBAAC,eAAA,EAAc,MAAK,eAAc,OAAO,EAAE,qBAAqB,GAAG,MAAK,YAAW,cAAa,eAAA,CAAe;AAAA,IAC/G,oBAAC,mBAAA,EAAkB,UAAU,OAAO,aAAa,QAAgB;AAAA,IACjE,oBAAC,eAAA,EAAc,MAAK,mBAAkB,OAAO,EAAE,wBAAwB,GAAG,MAAK,YAAW,cAAa,eAAA,CAAe;AAAA,IACtH,oBAAC,gBAAa,IAAI,EAAC,WAAW,aAAA,GAAgB,UAAA,EAAE,uBAAuB,EAAA,CAAE;AAAA,EAAA,GAC7E,EAAA,CACJ,GAER,GACJ;AAER;"}

package/dist/forms/auth/ForgotPasswordForm.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Formik, Form } from "formik";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import Alert from "@mui/material/Alert";
+import AlertTitle from "@mui/material/AlertTitle";
+import Link from "@mui/material/Link";
+import Stack from "@mui/material/Stack";
+import FormProblemAlert from "../FormProblemAlert.js";
+import FormTextField from "../FormTextField.js";
+import SubmitButton from "../SubmitButton.js";
+import { applyServerProblem } from "../applyServerProblem.js";
+import * as Yup from "yup";
+function ForgotPasswordForm({ onSubmit, signInPath, texts }) {
+  const { t } = useToolkitTranslation("auth", texts);
+  const { Link: RouterLink } = useToolkitNavigation();
+  const [sentToEmail, setSentToEmail] = useState(null);
+  const schema = useMemo(() => Yup.object({ email: Yup.string().trim().required().email() }), []);
+  const backToSignIn = signInPath && /* @__PURE__ */ jsx(Link, { component: RouterLink, to: signInPath, variant: "body2", children: t("forgotPassword.backToSignIn") });
+  const submit = async (values, formikHelpers) => {
+    const email = values.email.trim();
+    try {
+      await onSubmit({ email });
+      setSentToEmail(email);
+    } catch (error) {
+      applyServerProblem(error, { ...formikHelpers, values });
+    }
+  };
+  if (sentToEmail) {
+    return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+      /* @__PURE__ */ jsxs(Alert, { severity: "success", role: "status", children: [
+        /* @__PURE__ */ jsx(AlertTitle, { children: t("forgotPassword.sentTitle") }),
+        t("forgotPassword.sent", { email: sentToEmail })
+      ] }),
+      backToSignIn
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Formik, { initialValues: { email: "" }, validationSchema: schema, onSubmit: submit, children: /* @__PURE__ */ jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(FormProblemAlert, {}),
+    /* @__PURE__ */ jsx(FormTextField, { name: "email", label: t("forgotPassword.email"), type: "email", autoComplete: "username", autoFocus: true }),
+    /* @__PURE__ */ jsx(SubmitButton, { fullWidth: true, children: t("forgotPassword.submit") }),
+    backToSignIn
+  ] }) }) });
+}
+export {
+  ForgotPasswordForm as default
+};
+//# sourceMappingURL=ForgotPasswordForm.js.map

package/dist/forms/auth/ForgotPasswordForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForgotPasswordForm.js","sources":["../../../src/forms/auth/ForgotPasswordForm.jsx"],"sourcesContent":["// El formulario de «¿Olvidó su contraseña?» (formik): el correo, y al enviarlo, el aviso de que revise su correo en el\n// mismo lugar, con la liga para regresar.\n//\n// OJO, a propósito: el aviso dice «si {{correo}} tiene una cuenta», aunque el sistema sepa si la tiene. Decir «ese correo\n// no existe» le confirma a cualquiera qué correos sí tienen cuenta (enumeración de cuentas); el backend también contesta\n// igual en los dos casos.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo, useState} from 'react';\nimport {Form, Formik} from 'formik';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Alert from '@mui/material/Alert';\nimport AlertTitle from '@mui/material/AlertTitle';\nimport Link from '@mui/material/Link';\nimport Stack from '@mui/material/Stack';\n\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\n\n/**\n * @param {object} props\n * @param {(values: {email: string}) => Promise<unknown>} props.onSubmit pide el enlace; si el servidor falla, truena con su\n *     problema\n * @param {string} [props.signInPath] la liga para regresar a iniciar sesión\n * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete\n */\nexport default function ForgotPasswordForm({onSubmit, signInPath, texts}) {\n    const {t} = useToolkitTranslation('auth', texts);\n    const {Link: RouterLink} = useToolkitNavigation();\n    const [sentToEmail, setSentToEmail] = useState(null);\n    const schema = useMemo(() => Yup.object({email: Yup.string().trim().required().email()}), []);\n\n    const backToSignIn = signInPath && <Link component={RouterLink} to={signInPath} variant=\"body2\">{t('forgotPassword.backToSignIn')}</Link>;\n\n    const submit = async (values, formikHelpers) => {\n        const email = values.email.trim();\n        try {\n            await onSubmit({email});\n            setSentToEmail(email);\n        } catch (error) {\n            applyServerProblem(error, {...formikHelpers, values});\n        }\n    };\n\n    if (sentToEmail) {\n        return (\n            <Stack spacing={2}>\n                <Alert severity=\"success\" role=\"status\">\n                    <AlertTitle>{t('forgotPassword.sentTitle')}</AlertTitle>\n                    {t('forgotPassword.sent', {email: sentToEmail})}\n                </Alert>\n                {backToSignIn}\n            </Stack>\n        );\n    }\n\n    return (\n        <Formik initialValues={{email: ''}} validationSchema={schema} onSubmit={submit}>\n            <Form noValidate>\n                <Stack spacing={2}>\n                    <FormProblemAlert />\n                    <FormTextField name=\"email\" label={t('forgotPassword.email')} type=\"email\" autoComplete=\"username\" autoFocus />\n                    <SubmitButton fullWidth>{t('forgotPassword.submit')}</SubmitButton>\n                    {backToSignIn}\n                </Stack>\n            </Form>\n        </Formik>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA8BA,SAAwB,mBAAmB,EAAC,UAAU,YAAY,SAAQ;AACtE,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ,KAAK;AAC/C,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAC3B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,SAAS,QAAQ,MAAM,IAAI,OAAO,EAAC,OAAO,IAAI,OAAA,EAAS,KAAA,EAAO,WAAW,MAAA,GAAQ,GAAG,EAAE;AAE5F,QAAM,eAAe,cAAc,oBAAC,MAAA,EAAK,WAAW,YAAY,IAAI,YAAY,SAAQ,SAAS,UAAA,EAAE,6BAA6B,GAAE;AAElI,QAAM,SAAS,OAAO,QAAQ,kBAAkB;AAC5C,UAAM,QAAQ,OAAO,MAAM,KAAA;AAC3B,QAAI;AACA,YAAM,SAAS,EAAC,OAAM;AACtB,qBAAe,KAAK;AAAA,IACxB,SAAS,OAAO;AACZ,yBAAmB,OAAO,EAAC,GAAG,eAAe,QAAO;AAAA,IACxD;AAAA,EACJ;AAEA,MAAI,aAAa;AACb,WACI,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAM,UAAS,WAAU,MAAK,UAC3B,UAAA;AAAA,QAAA,oBAAC,YAAA,EAAY,UAAA,EAAE,0BAA0B,EAAA,CAAE;AAAA,QAC1C,EAAE,uBAAuB,EAAC,OAAO,aAAY;AAAA,MAAA,GAClD;AAAA,MACC;AAAA,IAAA,GACL;AAAA,EAER;AAEA,6BACK,QAAA,EAAO,eAAe,EAAC,OAAO,GAAA,GAAK,kBAAkB,QAAQ,UAAU,QACpE,8BAAC,MAAA,EAAK,YAAU,MACZ,UAAA,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,IAAA,oBAAC,kBAAA,EAAiB;AAAA,IAClB,oBAAC,eAAA,EAAc,MAAK,SAAQ,OAAO,EAAE,sBAAsB,GAAG,MAAK,SAAQ,cAAa,YAAW,WAAS,KAAA,CAAC;AAAA,wBAC5G,cAAA,EAAa,WAAS,MAAE,UAAA,EAAE,uBAAuB,GAAE;AAAA,IACnD;AAAA,EAAA,EAAA,CACL,GACJ,GACJ;AAER;"}

package/dist/forms/auth/SignInForm.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Formik, Form, useField } from "formik";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { useToolkitNavigation } from "../../toolkit/toolkitContext.js";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Link from "@mui/material/Link";
+import Stack from "@mui/material/Stack";
+import FormProblemAlert from "../FormProblemAlert.js";
+import FormTextField from "../FormTextField.js";
+import SubmitButton from "../SubmitButton.js";
+import { applyServerProblem } from "../applyServerProblem.js";
+import * as Yup from "yup";
+function RememberMeField({ label }) {
+  const [field] = useField({ name: "remember", type: "checkbox" });
+  return /* @__PURE__ */ jsx(FormControlLabel, { label, control: /* @__PURE__ */ jsx(Checkbox, { ...field }) });
+}
+function SignInForm({ onSubmit, forgotPasswordPath, showRememberMe = true, initialEmail = "", texts }) {
+  const { t } = useToolkitTranslation("auth", texts);
+  const { Link: RouterLink } = useToolkitNavigation();
+  const schema = useMemo(() => Yup.object({
+    email: Yup.string().trim().required().email(),
+    password: Yup.string().required()
+  }), []);
+  const submit = async (values, formikHelpers) => {
+    try {
+      await onSubmit({ ...values, email: values.email.trim() });
+    } catch (error) {
+      applyServerProblem(error, { ...formikHelpers, values });
+    }
+  };
+  return /* @__PURE__ */ jsx(Formik, { initialValues: { email: initialEmail, password: "", remember: false }, validationSchema: schema, onSubmit: submit, children: /* @__PURE__ */ jsx(Form, { noValidate: true, children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
+    /* @__PURE__ */ jsx(FormProblemAlert, {}),
+    /* @__PURE__ */ jsx(FormTextField, { name: "email", label: t("signIn.email"), type: "email", autoComplete: "username", autoFocus: true }),
+    /* @__PURE__ */ jsx(FormTextField, { name: "password", label: t("signIn.password"), type: "password", autoComplete: "current-password" }),
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 1 }, children: [
+      showRememberMe ? /* @__PURE__ */ jsx(RememberMeField, { label: t("signIn.remember") }) : /* @__PURE__ */ jsx("span", {}),
+      forgotPasswordPath && /* @__PURE__ */ jsx(Link, { component: RouterLink, to: forgotPasswordPath, variant: "body2", children: t("signIn.forgot") })
+    ] }),
+    /* @__PURE__ */ jsx(SubmitButton, { fullWidth: true, children: t("signIn.submit") })
+  ] }) }) });
+}
+export {
+  SignInForm as default
+};
+//# sourceMappingURL=SignInForm.js.map

package/dist/forms/auth/SignInForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInForm.js","sources":["../../../src/forms/auth/SignInForm.jsx"],"sourcesContent":["// El formulario de iniciar sesión (formik): correo, contraseña, «mantener la sesión abierta» y la liga a «¿Olvidó su\n// contraseña?». La pantalla solo dice qué hacer con los datos:\n//\n//   <AuthLayout title={t('auth:signIn.title')}>\n//       <SignInForm onSubmit={(values) => signIn(values)} forgotPasswordPath=\"/forgot-password\" />\n//   </AuthLayout>\n//\n// Si onSubmit truena con el problema del servidor (RFC 9457; un 401 «correo o contraseña incorrectos», un 429 «espere\n// un minuto»), el aviso sale arriba del formulario y lo de cada campo, en su campo (applyServerProblem).\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useMemo} from 'react';\nimport {Form, Formik, useField} from 'formik';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {useToolkitNavigation} from '@/toolkit/toolkitContext.js';\nimport Checkbox from '@mui/material/Checkbox';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport Link from '@mui/material/Link';\nimport Stack from '@mui/material/Stack';\n\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\n\n/** «Mantener la sesión abierta», conectado a formik. */\nfunction RememberMeField({label}) {\n    const [field] = useField({name: 'remember', type: 'checkbox'});\n    return <FormControlLabel label={label} control={<Checkbox {...field} />} />;\n}\n\n/**\n * @param {object} props\n * @param {(values: {email: string, password: string, remember: boolean}) => Promise<unknown>} props.onSubmit entra; si\n *     el servidor dice que no, truena con su problema\n * @param {string} [props.forgotPasswordPath] sin ella no sale la liga de «¿Olvidó su contraseña?»\n * @param {boolean} [props.showRememberMe] por omisión sí\n * @param {string} [props.initialEmail]\n * @param {object} [props.texts] los textos que cambian, con la forma de `auth` en los textos del paquete\n */\nexport default function SignInForm({onSubmit, forgotPasswordPath, showRememberMe = true, initialEmail = '', texts}) {\n    const {t} = useToolkitTranslation('auth', texts);\n    const {Link: RouterLink} = useToolkitNavigation();\n    // el esquema se arma al pintar y no al importar: yup toma sus mensajes al armarlo (buildYupLocale ya corrió)\n    const schema = useMemo(() => Yup.object({\n        email: Yup.string().trim().required().email(),\n        password: Yup.string().required(),\n    }), []);\n\n    const submit = async (values, formikHelpers) => {\n        try {\n            await onSubmit({...values, email: values.email.trim()});\n        } catch (error) {\n            applyServerProblem(error, {...formikHelpers, values});\n        }\n    };\n\n    return (\n        <Formik initialValues={{email: initialEmail, password: '', remember: false}} validationSchema={schema} onSubmit={submit}>\n            <Form noValidate>\n                <Stack spacing={2}>\n                    <FormProblemAlert />\n                    <FormTextField name=\"email\" label={t('signIn.email')} type=\"email\" autoComplete=\"username\" autoFocus />\n                    <FormTextField name=\"password\" label={t('signIn.password')} type=\"password\" autoComplete=\"current-password\" />\n                    <Stack direction=\"row\" sx={{alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 1}}>\n                        {showRememberMe ? <RememberMeField label={t('signIn.remember')} /> : <span />}\n                        {forgotPasswordPath && (\n                            <Link component={RouterLink} to={forgotPasswordPath} variant=\"body2\">{t('signIn.forgot')}</Link>\n                        )}\n                    </Stack>\n                    <SubmitButton fullWidth>{t('signIn.submit')}</SubmitButton>\n                </Stack>\n            </Form>\n        </Formik>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA2BA,SAAS,gBAAgB,EAAC,SAAQ;AAC9B,QAAM,CAAC,KAAK,IAAI,SAAS,EAAC,MAAM,YAAY,MAAM,YAAW;AAC7D,SAAO,oBAAC,oBAAiB,OAAc,6BAAU,UAAA,EAAU,GAAG,OAAO,GAAI;AAC7E;AAWA,SAAwB,WAAW,EAAC,UAAU,oBAAoB,iBAAiB,MAAM,eAAe,IAAI,SAAQ;AAChH,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ,KAAK;AAC/C,QAAM,EAAC,MAAM,WAAA,IAAc,qBAAA;AAE3B,QAAM,SAAS,QAAQ,MAAM,IAAI,OAAO;AAAA,IACpC,OAAO,IAAI,OAAA,EAAS,OAAO,SAAA,EAAW,MAAA;AAAA,IACtC,UAAU,IAAI,OAAA,EAAS,SAAA;AAAA,EAAS,CACnC,GAAG,CAAA,CAAE;AAEN,QAAM,SAAS,OAAO,QAAQ,kBAAkB;AAC5C,QAAI;AACA,YAAM,SAAS,EAAC,GAAG,QAAQ,OAAO,OAAO,MAAM,KAAA,GAAO;AAAA,IAC1D,SAAS,OAAO;AACZ,yBAAmB,OAAO,EAAC,GAAG,eAAe,QAAO;AAAA,IACxD;AAAA,EACJ;AAEA,SACI,oBAAC,UAAO,eAAe,EAAC,OAAO,cAAc,UAAU,IAAI,UAAU,MAAA,GAAQ,kBAAkB,QAAQ,UAAU,QAC7G,UAAA,oBAAC,MAAA,EAAK,YAAU,MACZ,UAAA,qBAAC,OAAA,EAAM,SAAS,GACZ,UAAA;AAAA,IAAA,oBAAC,kBAAA,EAAiB;AAAA,IAClB,oBAAC,eAAA,EAAc,MAAK,SAAQ,OAAO,EAAE,cAAc,GAAG,MAAK,SAAQ,cAAa,YAAW,WAAS,KAAA,CAAC;AAAA,IACrG,oBAAC,eAAA,EAAc,MAAK,YAAW,OAAO,EAAE,iBAAiB,GAAG,MAAK,YAAW,cAAa,mBAAA,CAAmB;AAAA,IAC5G,qBAAC,OAAA,EAAM,WAAU,OAAM,IAAI,EAAC,YAAY,UAAU,gBAAgB,iBAAiB,UAAU,QAAQ,KAAK,KACrG,UAAA;AAAA,MAAA,iBAAiB,oBAAC,mBAAgB,OAAO,EAAE,iBAAiB,GAAG,wBAAM,QAAA,CAAA,CAAK;AAAA,MAC1E,sBACG,oBAAC,MAAA,EAAK,WAAW,YAAY,IAAI,oBAAoB,SAAQ,SAAS,UAAA,EAAE,eAAe,EAAA,CAAE;AAAA,IAAA,GAEjG;AAAA,wBACC,cAAA,EAAa,WAAS,MAAE,UAAA,EAAE,eAAe,EAAA,CAAE;AAAA,EAAA,EAAA,CAChD,GACJ,GACJ;AAER;"}

package/dist/forms/security/SecondStepForm.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Formik, Form } from "formik";
+import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import Link from "@mui/material/Link";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined";
+import FormProblemAlert from "../FormProblemAlert.js";
+import FormTextField from "../FormTextField.js";
+import SubmitButton from "../SubmitButton.js";
+import { applyServerProblem } from "../applyServerProblem.js";
+import * as Yup from "yup";
+import { TOTP_CODE_MIN_LENGTH, TOTP_CODE_MAX_LENGTH, TOTP_CODE_PATTERN, RECOVERY_CODE_MIN_LENGTH, RECOVERY_CODE_MAX_LENGTH, RECOVERY_CODE_PATTERN, normalizeTotpCode, normalizeRecoveryCode } from "./securityRules.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+const SECOND_STEP_METHOD = Object.freeze({ passkey: "passkey", totp: "totp", recoveryCode: "recoveryCode" });
+const UNAUTHENTICATED_STATUS = 401;
+const ACCOUNT_LOCKED_CODE = "account_locked";
+function isOutOfAttempts(error) {
+  return error?.code === ACCOUNT_LOCKED_CODE || error?.status === UNAUTHENTICATED_STATUS && !Number.isInteger(error?.problem?.remaining_attempts);
+}
+function SecondStepForm({ methods, canUsePasskeys = false, onUsePasskey, onSubmitCode, onCancel, footer, texts }) {
+  const { t } = useToolkitTranslation("security", texts);
+  const hasApp = methods.includes(SECOND_STEP_METHOD.totp);
+  const hasRecovery = methods.includes(SECOND_STEP_METHOD.recoveryCode);
+  const hasPasskey = methods.includes(SECOND_STEP_METHOD.passkey) && canUsePasskeys && Boolean(onUsePasskey);
+  const [method, setMethod] = useState(hasApp ? SECOND_STEP_METHOD.totp : SECOND_STEP_METHOD.recoveryCode);
+  const [passkeyError, setPasskeyError] = useState(null);
+  const [isUsingPasskey, setIsUsingPasskey] = useState(false);
+  const isApp = method === SECOND_STEP_METHOD.totp;
+  const schema = isApp ? Yup.object({ code: Yup.string().trim().required(t("twoStep.codeRequired")).min(TOTP_CODE_MIN_LENGTH).max(TOTP_CODE_MAX_LENGTH).matches(TOTP_CODE_PATTERN, t("twoStep.codeFormat")) }) : Yup.object({ code: Yup.string().trim().required(t("secondStep.recoveryCodeRequired")).min(RECOVERY_CODE_MIN_LENGTH).max(RECOVERY_CODE_MAX_LENGTH).matches(RECOVERY_CODE_PATTERN, t("secondStep.recoveryCodeFormat")) });
+  const usePasskey = async () => {
+    setPasskeyError(null);
+    setIsUsingPasskey(true);
+    try {
+      await onUsePasskey();
+    } catch (error) {
+      if (!error?.cancelled) {
+        setPasskeyError(error?.message);
+      }
+    } finally {
+      setIsUsingPasskey(false);
+    }
+  };
+  const submit = async (values, formikHelpers) => {
+    formikHelpers.setStatus(null);
+    try {
+      const code = isApp ? normalizeTotpCode(values.code) : normalizeRecoveryCode(values.code);
+      await onSubmitCode({ method, code });
+    } catch (error) {
+      formikHelpers.setFieldValue("code", "", false);
+      if (isOutOfAttempts(error)) {
+        onCancel(error?.message ?? null);
+        return;
+      }
+      applyServerProblem(error, { ...formikHelpers, values });
+      const remainingAttempts = error?.problem?.remaining_attempts;
+      if (Number.isInteger(remainingAttempts)) {
+        formikHelpers.setStatus(`${error.message} ${t("secondStep.remainingAttempts", { count: remainingAttempts })}`);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 2.5, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("secondStep.intro") }),
+    hasPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "contained", size: "large", startIcon: /* @__PURE__ */ jsx(FingerprintOutlinedIcon, {}), onClick: usePasskey, disabled: isUsingPasskey, children: t("secondStep.usePasskey") }),
+      passkeyError && /* @__PURE__ */ jsx(Alert, { severity: "error", role: "alert", children: passkeyError }),
+      (hasApp || hasRecovery) && /* @__PURE__ */ jsx(Divider, { children: t("secondStep.or") })
+    ] }),
+    (hasApp || hasRecovery) && // key: al cambiar de método, el formulario empieza limpio
+    /* @__PURE__ */ jsx(Formik, { initialValues: { code: "" }, validationSchema: schema, onSubmit: submit, children: /* @__PURE__ */ jsxs(Stack, { component: Form, noValidate: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(FormProblemAlert, {}),
+      isApp ? /* @__PURE__ */ jsx(
+        FormTextField,
+        {
+          name: "code",
+          label: t("secondStep.appCodeLabel"),
+          autoFocus: true,
+          autoComplete: "one-time-code",
+          clearable: false,
+          helperText: t("secondStep.appCodeHelp"),
+          slotProps: { htmlInput: { inputMode: "numeric", maxLength: TOTP_CODE_MAX_LENGTH } }
+        }
+      ) : /* @__PURE__ */ jsx(
+        FormTextField,
+        {
+          name: "code",
+          label: t("secondStep.recoveryCodeLabel"),
+          autoFocus: true,
+          autoComplete: "off",
+          clearable: false,
+          helperText: t("secondStep.recoveryCodeHelp"),
+          slotProps: { htmlInput: { maxLength: RECOVERY_CODE_MAX_LENGTH } }
+        }
+      ),
+      /* @__PURE__ */ jsx(SubmitButton, { fullWidth: true, children: t("secondStep.confirm") }),
+      footer
+    ] }) }, method),
+    !hasApp && !hasRecovery && footer,
+    /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, sx: { alignItems: "center" }, children: [
+      hasApp && hasRecovery && /* @__PURE__ */ jsx(
+        Link,
+        {
+          component: "button",
+          type: "button",
+          variant: "body2",
+          onClick: () => setMethod(isApp ? SECOND_STEP_METHOD.recoveryCode : SECOND_STEP_METHOD.totp),
+          children: isApp ? t("secondStep.useRecovery") : t("secondStep.useApp")
+        }
+      ),
+      /* @__PURE__ */ jsx(Link, { component: "button", type: "button", variant: "body2", onClick: () => onCancel(null), children: t("secondStep.otherAccount") })
+    ] })
+  ] });
+}
+export {
+  SECOND_STEP_METHOD,
+  SecondStepForm as default
+};
+//# sourceMappingURL=SecondStepForm.js.map

package/dist/forms/security/SecondStepForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecondStepForm.js","sources":["../../../src/forms/security/SecondStepForm.jsx"],"sourcesContent":["// El segundo paso al entrar: la contraseña fue correcta y la cuenta tiene verificación en dos pasos.\n//\n// Los métodos van en el orden de su fuerza: primero la llave de acceso (no se la roba una página falsa), luego el código de\n// la app, y el de recuperación detrás de un enlace (es para emergencias y se gasta). Cada código equivocado cuenta para el\n// bloqueo de la cuenta: el servidor dice cuántos intentos quedan (problem.remaining_attempts) y se le dice a la persona.\n// Si se acabaron los intentos o se venció el tiempo (un 401 sin intentos, o code account_locked), se regresa a empezar.\n//\n// La pantalla no sabe del servidor: el proyecto le pasa qué hacer.\n//\n//   <SecondStepForm methods={['passkey', 'totp', 'recoveryCode']} canUsePasskeys={passkeysSupported()}\n//                   onUsePasskey={async () => finishWith(await api.post('/auth/second-step/passkey',\n//                       await signWithPasskey(await api.get('/auth/second-step/passkey-options'))))}\n//                   onSubmitCode={async ({method, code}) => finishWith(await api.post(`/auth/second-step/${method}`, {code}))}\n//                   onCancel={(message) => backToSignIn(message)} />\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {Form, Formik} from 'formik';\nimport Alert from '@mui/material/Alert';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport Link from '@mui/material/Link';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport FingerprintOutlinedIcon from '@mui/icons-material/FingerprintOutlined';\n\nimport FormProblemAlert from '@/forms/FormProblemAlert.jsx';\nimport FormTextField from '@/forms/FormTextField.jsx';\nimport SubmitButton from '@/forms/SubmitButton.jsx';\nimport {applyServerProblem} from '@/forms/applyServerProblem.js';\nimport {Yup} from '@/forms/validation.js';\nimport {\n    RECOVERY_CODE_MAX_LENGTH, RECOVERY_CODE_MIN_LENGTH, RECOVERY_CODE_PATTERN, TOTP_CODE_MAX_LENGTH, TOTP_CODE_MIN_LENGTH, TOTP_CODE_PATTERN,\n    normalizeRecoveryCode, normalizeTotpCode,\n} from '@/forms/security/securityRules.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\n/** Las formas de confirmar el segundo paso, como las manda el servidor. */\nexport const SECOND_STEP_METHOD = Object.freeze({passkey: 'passkey', totp: 'totp', recoveryCode: 'recoveryCode'});\n\nconst UNAUTHENTICATED_STATUS = 401;\nconst ACCOUNT_LOCKED_CODE = 'account_locked';\n\n/**\n * ¿Se acabó la oportunidad (bloqueo o se venció el tiempo)? Entonces hay que empezar de nuevo desde la contraseña.\n *\n * @param {Error & {status?: number, code?: string, problem?: object}} error\n * @returns {boolean}\n */\nfunction isOutOfAttempts(error) {\n    return error?.code === ACCOUNT_LOCKED_CODE\n        || (error?.status === UNAUTHENTICATED_STATUS && !Number.isInteger(error?.problem?.remaining_attempts));\n}\n\n/**\n * @param {object} props\n * @param {string[]} props.methods los que tiene la cuenta (SECOND_STEP_METHOD), como los mandó el servidor\n * @param {boolean} [props.canUsePasskeys] passkeysSupported() de /passkeys\n * @param {() => Promise<unknown>} [props.onUsePasskey] firma con la llave y termina de entrar; truena si no se pudo\n * @param {(input: {method: string, code: string}) => Promise<unknown>} props.onSubmitCode manda el código ya limpio y\n *     termina de entrar; truena con el ApiError si no\n * @param {(message: string|null) => void} props.onCancel regresa a escribir la contraseña (con el motivo, si lo hay)\n * @param {import('react').ReactNode} [props.footer] abajo del botón, dentro del formulario: puede llenar el código con\n *     useFormikContext (p. ej. el atajo de los ejemplos)\n * @param {object} [props.texts] los textos que cambian, con la forma de `security` en los textos del paquete\n */\nexport default function SecondStepForm({methods, canUsePasskeys = false, onUsePasskey, onSubmitCode, onCancel, footer, texts}) {\n    const {t} = useToolkitTranslation('security', texts);\n    const hasApp = methods.includes(SECOND_STEP_METHOD.totp);\n    const hasRecovery = methods.includes(SECOND_STEP_METHOD.recoveryCode);\n    const hasPasskey = methods.includes(SECOND_STEP_METHOD.passkey) && canUsePasskeys && Boolean(onUsePasskey);\n    const [method, setMethod] = useState(hasApp ? SECOND_STEP_METHOD.totp : SECOND_STEP_METHOD.recoveryCode);\n    const [passkeyError, setPasskeyError] = useState(null);\n    const [isUsingPasskey, setIsUsingPasskey] = useState(false);\n    const isApp = method === SECOND_STEP_METHOD.totp;\n\n    // el esquema se arma al pintar: yup toma sus mensajes al armarlo\n    const schema = isApp\n        ? Yup.object({code: Yup.string().trim().required(t('twoStep.codeRequired')).min(TOTP_CODE_MIN_LENGTH).max(TOTP_CODE_MAX_LENGTH)\n            .matches(TOTP_CODE_PATTERN, t('twoStep.codeFormat'))})\n        : Yup.object({code: Yup.string().trim().required(t('secondStep.recoveryCodeRequired')).min(RECOVERY_CODE_MIN_LENGTH)\n            .max(RECOVERY_CODE_MAX_LENGTH).matches(RECOVERY_CODE_PATTERN, t('secondStep.recoveryCodeFormat'))});\n\n    const usePasskey = async () => {\n        setPasskeyError(null);\n        setIsUsingPasskey(true);\n        try {\n            await onUsePasskey();\n        } catch (error) {\n            // cancelar el aviso del sistema no es un error que enseñar\n            if (!error?.cancelled) {\n                setPasskeyError(error?.message);\n            }\n        } finally {\n            setIsUsingPasskey(false);\n        }\n    };\n\n    const submit = async (values, formikHelpers) => {\n        formikHelpers.setStatus(null);\n        try {\n            const code = isApp ? normalizeTotpCode(values.code) : normalizeRecoveryCode(values.code);\n            await onSubmitCode({method, code});\n        } catch (error) {\n            formikHelpers.setFieldValue('code', '', false);\n            if (isOutOfAttempts(error)) {\n                onCancel(error?.message ?? null);\n                return;\n            }\n            applyServerProblem(error, {...formikHelpers, values});\n            // cuántos intentos quedan, junto al mensaje del servidor\n            const remainingAttempts = error?.problem?.remaining_attempts;\n            if (Number.isInteger(remainingAttempts)) {\n                formikHelpers.setStatus(`${error.message} ${t('secondStep.remainingAttempts', {count: remainingAttempts})}`);\n            }\n        }\n    };\n\n    return (\n        <Stack spacing={2.5}>\n            <Typography variant=\"body2\" color=\"text.secondary\">{t('secondStep.intro')}</Typography>\n\n            {hasPasskey && (\n                <>\n                    <Button variant=\"contained\" size=\"large\" startIcon={<FingerprintOutlinedIcon />} onClick={usePasskey} disabled={isUsingPasskey}>\n                        {t('secondStep.usePasskey')}\n                    </Button>\n                    {passkeyError && <Alert severity=\"error\" role=\"alert\">{passkeyError}</Alert>}\n                    {(hasApp || hasRecovery) && <Divider>{t('secondStep.or')}</Divider>}\n                </>\n            )}\n\n            {(hasApp || hasRecovery) && (\n                // key: al cambiar de método, el formulario empieza limpio\n                <Formik key={method} initialValues={{code: ''}} validationSchema={schema} onSubmit={submit}>\n                    <Stack component={Form} noValidate spacing={2}>\n                        <FormProblemAlert />\n                        {isApp ? (\n                            <FormTextField name=\"code\" label={t('secondStep.appCodeLabel')} autoFocus autoComplete=\"one-time-code\" clearable={false}\n                                           helperText={t('secondStep.appCodeHelp')}\n                                           slotProps={{htmlInput: {inputMode: 'numeric', maxLength: TOTP_CODE_MAX_LENGTH}}} />\n                        ) : (\n                            <FormTextField name=\"code\" label={t('secondStep.recoveryCodeLabel')} autoFocus autoComplete=\"off\" clearable={false}\n                                           helperText={t('secondStep.recoveryCodeHelp')} slotProps={{htmlInput: {maxLength: RECOVERY_CODE_MAX_LENGTH}}} />\n                        )}\n                        <SubmitButton fullWidth>{t('secondStep.confirm')}</SubmitButton>\n                        {footer}\n                    </Stack>\n                </Formik>\n            )}\n            {!hasApp && !hasRecovery && footer}\n\n            <Stack spacing={0.5} sx={{alignItems: 'center'}}>\n                {hasApp && hasRecovery && (\n                    <Link component=\"button\" type=\"button\" variant=\"body2\"\n                          onClick={() => setMethod(isApp ? SECOND_STEP_METHOD.recoveryCode : SECOND_STEP_METHOD.totp)}>\n                        {isApp ? t('secondStep.useRecovery') : t('secondStep.useApp')}\n                    </Link>\n                )}\n                <Link component=\"button\" type=\"button\" variant=\"body2\" onClick={() => onCancel(null)}>{t('secondStep.otherAccount')}</Link>\n            </Stack>\n        </Stack>\n    );\n}\n"],"names":[],"mappings":"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"}