@cosmicdrift/kumiko-samples 0.386.0 → 0.388.0

package/packages/bundled-features/src/auth-mfa/feature-exports.ts

@@ -8,7 +8,7 @@ import type { MfaTokenSecretsEnv } from "./token-secrets.ts";
 
 export type BindMfaRevokeAllOtherSessions = (
   revoker: (userId: string, currentSid: string | undefined) => Promise<number>,
-) => void;
+) => () => void;
 
 // Reads the late-bind setter off a mounted auth-mfa feature's exports —
 // mirrors sessions' own bindAutoRevokeFromFeature. run{Prod,Dev}App call
@@ -79,7 +79,7 @@ export function bindMfaTokenSecretsFromFeature(
   return undefined;
 }
 
-export type BindRevokeAllPatTokens = (revoker: (userId: string) => Promise<number>) => void;
+export type BindRevokeAllPatTokens = (revoker: (userId: string) => Promise<number>) => () => void;
 
 // Reads the late-bind setter off a mounted auth-mfa feature's exports —
 // run{Prod,Dev}App call this once the personal-access-tokens feature (if

package/packages/bundled-features/src/auth-mfa/feature.ts

@@ -220,10 +220,16 @@ export function createAuthMfaFeature(
 
     const bindRevokeAllOtherSessions: BindMfaRevokeAllOtherSessions = (revoker) => {
       revokeAllOtherSessions = revoker;
+      return () => {
+        if (revokeAllOtherSessions === revoker) revokeAllOtherSessions = undefined;
+      };
     };
 
     const bindRevokeAllPatTokens: BindRevokeAllPatTokens = (revoker) => {
       revokeAllPatTokens = revoker;
+      return () => {
+        if (revokeAllPatTokens === revoker) revokeAllPatTokens = undefined;
+      };
     };
 
     return {

package/packages/bundled-features/src/auth-mfa/handlers/disable.write.ts

@@ -45,9 +45,9 @@ export function createDisableHandler(opts: DisableOptions) {
       if (!row) return mfaNotEnabled();
 
       // Fail closed, matching verify.write.ts/enable-confirm-preauth.write.ts
-      // (#1467): without ctx.redis, verifyMfaFactor's TOTP-replay burn is
-      // skipped, and a code observed once (phishing proxy/shoulder-surfing)
-      // could be replayed within the ±1-step window to disable MFA outright.
+      // without ctx.redis, verifyMfaFactor's TOTP-replay burn is skipped, and
+      // a code observed once (phishing proxy/shoulder-surfing) could be
+      // replayed within the ±1-step window to disable MFA outright.
       // "no ctx.redis means no one gets through MFA login" doesn't cover
       // this route — it's session-authed, and JWTs issued before Redis was
       // unwired stay valid until they expire.

package/packages/bundled-features/src/auth-mfa/handlers/enable-confirm-preauth.write.ts

@@ -150,8 +150,8 @@ export function createEnableConfirmPreauthHandler(opts: EnableConfirmPreauthOpti
       // re-enrollment until an operator manually disables MFA. NOT fixed by
       // this ordering: burnToken() above still runs before this check, so a
       // mid-flight restricted/deleted user still burns their setup token
-      // (framework#1523/5) — moving the burn later would need care around
-      // the existing userId-unique-constraint backstop between the
+      // — moving the burn later would need care around the
+      // existing userId-unique-constraint backstop between the
       // `existing` check above and executor.create() below.
       const systemUser = createSystemUser(tenantId, ["SystemAdmin"]);
       const userRow = (await ctx.queryAs(systemUser, UserQueries.findForAuth, {
@@ -207,10 +207,10 @@ export function createEnableConfirmPreauthHandler(opts: EnableConfirmPreauthOpti
         id: userId,
         tenantId,
         roles: mergedRoles,
-        // This endpoint logs the user in directly (fw#1760), so a stored
+        // This endpoint logs the user in directly, so a stored
         // timezone must survive the preauth-MFA-enrollment login just like
         // a plain password login does — same helper as verify.write.ts /
-        // invite-accept-with-login.write.ts (#1759).
+        // invite-accept-with-login.write.ts.
         ...sessionTimezoneField(userRow?.timezone),
         ...sessionLocaleField(userRow?.locale),
       };

package/packages/bundled-features/src/auth-mfa/handlers/enable-confirm.write.ts

@@ -56,8 +56,8 @@ export function createEnableConfirmHandler(opts: EnableConfirmOptions) {
       // already rules that out).
       if (verify.payload.userId !== event.user.id) return invalidSetupToken();
 
-      // Fail closed, matching verify.write.ts/enable-confirm-preauth.write.ts
-      // (#1467): session-authed (lower risk — the caller already has a
+      // Fail closed, matching verify.write.ts/enable-confirm-preauth.write.ts:
+      // session-authed (lower risk — the caller already has a
       // valid JWT), but silently skipping the single-use burn here would
       // still let a double-confirm race complete twice instead of the
       // second seeing invalidSetupToken(). Checked before the TOTP verify

package/packages/bundled-features/src/auth-mfa/handlers/enable-start-preauth.write.ts

@@ -55,7 +55,7 @@ export function createEnableStartPreauthHandler(opts: EnableStartPreauthOptions)
       );
       // Same generic "sign in again" error as an expired/invalid MFA
       // challenge token — both mean the login-flow token expired, no
-      // distinct i18n needed (see #1465's scoping comment).
+      // distinct i18n needed.
       if (!verified.ok) return invalidChallengeToken();
       const { userId, tenantId } = verified.payload;
 

package/packages/bundled-features/src/auth-mfa/handlers/reencrypt.job.ts

@@ -154,7 +154,7 @@ export async function mfaReencryptJob(
 
     // After PII peel (when configured), values must be current-cipher
     // envelopes — non-JSON/non-envelope is not a supported legacy decrypt
-    // path (#1541, mirrors config #1513).
+    // path, matching config behavior.
     const totpClass = classifyStoredEnvelope(envelopeValues.totpSecret, targetVersion);
     const recoveryClass = classifyStoredEnvelope(envelopeValues.recoveryCodes, targetVersion);
     if (totpClass === "unrecognized" || recoveryClass === "unrecognized") {

package/packages/bundled-features/src/auth-mfa/handlers/regenerate-recovery.write.ts

@@ -47,11 +47,11 @@ export function createRegenerateRecoveryHandler(opts: RegenerateRecoveryOptions)
       // count, since either way the presented code is consumed/irrelevant
       // afterward.
       //
-      // Fail closed, matching verify.write.ts/enable-confirm-preauth.write.ts
-      // (#1467): without ctx.redis, verifyMfaFactor's TOTP-replay burn is
-      // skipped, letting an observed code be replayed within the ±1-step
-      // window to regenerate (and thus invalidate) recovery codes — a
-      // session-authed route, so pre-unwiring JWTs stay a valid attack path.
+      // Fail closed, matching verify.write.ts/enable-confirm-preauth.write.ts:
+      // without ctx.redis, verifyMfaFactor's TOTP-replay burn is skipped,
+      // letting an observed code be replayed within the ±1-step window to
+      // regenerate (and thus invalidate) recovery codes — a session-authed
+      // route, so pre-unwiring JWTs stay a valid attack path.
       if (!ctx.redis) {
         return writeFailure(
           new InternalError({

package/packages/bundled-features/src/auth-mfa/handlers/verify.write.ts

@@ -67,7 +67,7 @@ export function createMfaVerifyHandler(opts: MfaVerifyOptions) {
       if (!verified.ok) return invalidChallengeToken();
       const { userId, tenantId } = verified.payload;
 
-      // Fail closed, matching enable-confirm-preauth.write.ts (#1467):
+      // Fail closed, matching enable-confirm-preauth.write.ts:
       // this route sits behind a challenge token from a successful login,
       // but its own secret is still just a short TOTP/recovery code —
       // silently skipping the brute-force cap and single-use burn when

package/packages/bundled-features/src/auth-mfa/token-secrets.ts

@@ -18,7 +18,7 @@ const CHALLENGE_TOKEN_PURPOSE = "mfa-challenge-token-v1";
 
 // A blank or whitespace-only override is treated as absent — an empty env
 // var (MFA_SETUP_TOKEN_SECRET="") must fall back to derivation, not sign
-// tokens with an empty/near-empty HMAC key (fw#1623).
+// tokens with an empty/near-empty HMAC key.
 function resolveSecret(override: string | undefined, fallback: () => string): string {
   return override !== undefined && override.trim() !== "" ? override : fallback();
 }

package/packages/bundled-features/src/auth-mfa/web/client-plugin.ts

@@ -1,4 +1,4 @@
-// Client-Feature-Factory für auth-mfa — mirrors emailPasswordClient()'s
+// Client feature factory for auth-mfa — mirrors emailPasswordClient()'s
 // shape so apps register both the same way:
 // createKumikoApp({ clientFeatures: [emailPasswordClient(), authMfaClient()] }).
 // No gates: MfaVerifyScreen isn't a route gate, it's a state swap wired
@@ -12,7 +12,7 @@ import type { ComponentType, ReactNode } from "react";
 import { defaultTranslations, mergeTranslations } from "./i18n.ts";
 
 export type AuthMfaClientOptions = {
-  /** Key-Overrides pro Locale, gemerged mit den Default-Bundles (de/en). */
+  /** Key overrides per locale, merged with the default bundles (de/en). */
   readonly translations?: TranslationsByLocale;
 };
 

package/packages/bundled-features/src/auth-mfa/web/i18n.ts

@@ -1,6 +1,6 @@
-// Default-Bundles für die auth-mfa Feature-UI. Merged in mit
-// authMfaClient() analog zu emailPasswordClient() aus auth-email-password.
-// Keys folgen `auth.mfa.<area>.<slug>`.
+// Default bundles for the auth-mfa feature UI, merged by
+// authMfaClient() analogously to emailPasswordClient() from auth-email-password.
+// Keys follow `auth.mfa.<area>.<slug>`.
 
 import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 
@@ -13,6 +13,11 @@ export const defaultTranslations: TranslationsByLocale = {
     "auth.mfa.verify.submit": "Verify",
     "auth.mfa.verify.submitting": "…",
     "auth.mfa.verify.backToLogin": "Back to login",
+    "auth.mfa.verify.recoveryCode": "Recovery code",
+    "auth.mfa.verify.recoverySubtitle":
+      "Enter one of the recovery codes you saved when you set up two-factor authentication.",
+    "auth.mfa.verify.useAuthenticatorCode": "Use the code from your app",
+    "auth.mfa.verify.useRecoveryCode": "Use a recovery code instead",
     "auth.mfa.errors.invalidCode": "Invalid code. Please try again.",
     "auth.mfa.errors.invalidTotpCode": "Invalid code. Please try again.",
     "auth.mfa.errors.invalidChallengeToken": "Your sign-in has expired. Please sign in again.",
@@ -43,7 +48,7 @@ export const defaultTranslations: TranslationsByLocale = {
     "auth.mfa.disable.title": "Disable two-factor authentication",
     "auth.mfa.disable.description":
       "Confirm with a code from your authenticator app or a recovery code. Your account will then be protected by your password alone.",
-    "auth.mfa.disable.code": "Code from your authenticator app or a recovery code",
+    "auth.mfa.disable.code": "Code from your authenticator app",
     "auth.mfa.disable.confirm": "Disable",
     "auth.mfa.disable.cancel": "Cancel",
     "auth.mfa.disable.trigger": "Disable two-factor authentication",

package/packages/bundled-features/src/auth-mfa/web/index.ts

@@ -1,7 +1,7 @@
-// Public exports für die Browser-Seite des auth-mfa Features. Sub-Path-
-// Export `@cosmicdrift/kumiko-bundled-features/auth-mfa/web` — Server-Seite
-// (defineFeature) bleibt frei von React-/DOM-Deps, siehe auth-email-
-// password/web/index.ts für die selbe Trennung.
+// Public exports for the browser side of the auth-mfa feature. The subpath
+// export `@cosmicdrift/kumiko-bundled-features/auth-mfa/web` keeps the server
+// side (`defineFeature`) free of React/DOM dependencies, matching the same
+// separation in auth-email-password/web/index.ts.
 
 export type { AuthMfaClientFeature, AuthMfaClientOptions } from "./client-plugin.ts";
 export { authMfaClient } from "./client-plugin.ts";

package/packages/bundled-features/src/auth-mfa/web/mfa-client.ts

@@ -1,10 +1,10 @@
-// Browser-Seite von POST /api/auth/mfa/verify — completes the two-step
-// login LoginScreen started when the server responded mfaRequired. Same
-// fetch/CSRF pattern as auth-email-password's login() (pre-session, no
-// csrfHeader() — there's no session yet to protect). Response shape is
+// Browser side of POST /api/auth/mfa/verify — completes the two-step
+// login that LoginScreen started when the server responded with mfaRequired.
+// Uses the same fetch/CSRF pattern as auth-email-password's login(), but runs
+// before a session exists, so it does not call csrfHeader(). The response is
 // byte-identical to /auth/login's ({isSuccess, token, user} | {isSuccess:
-// false, error}) since auth-routes.ts mints via the same
-// mintSessionAndRespond() for both routes.
+// false, error}) because auth-routes.ts uses mintSessionAndRespond() for both
+// routes.
 
 // kumiko-lint-ignore cross-feature-import client-only types, the feature's server barrel has no web/ re-export
 import {
@@ -76,11 +76,12 @@ export type MfaSetupPreauthStartResult =
   | { readonly kind: "success"; readonly data: MfaSetupPreauthStart }
   | { readonly kind: "failure"; readonly error: LoginFailure };
 
-// Browser-Seite von POST /api/auth/mfa/preauth-enable-start — lets a user
+// Browser side of POST /api/auth/mfa/preauth-enable-start — lets a user
 // blocked at login by MFA enforcement generate a TOTP secret/QR without a
-// session, using the preauthSetupToken login()'s mfa-setup-required result
-// carries. No JWT/cookie here (see auth-routes.ts's route comment) — the
-// response's setupToken is consumed by confirmMfaSetupPreauth below.
+// session, using the preauthSetupToken carried by login()'s
+// mfa-setup-required result. No JWT/cookie is issued here (see the route
+// comment in auth-routes.ts); the response's
+// setupToken is consumed by confirmMfaSetupPreauth below.
 export async function startMfaSetupPreauth(
   preauthSetupToken: string,
   accountLabel: string,
@@ -139,12 +140,12 @@ export async function startMfaSetupPreauth(
   };
 }
 
-// Browser-Seite von POST /api/auth/mfa/preauth-confirm — completes both
-// the enrollment startMfaSetupPreauth began and the login mfa-setup-
-// required block. Response shape mirrors /auth/mfa/verify's (mints via
-// the same mintSessionAndRespond()), same as verifyMfaChallenge above —
-// kept as its own function rather than a shared helper so this file's
-// two already-tested request shapes stay independently editable.
+// Browser side of POST /api/auth/mfa/preauth-confirm — completes both the
+// enrollment started by startMfaSetupPreauth and the login
+// mfa-setup-required block. Its response mirrors /auth/mfa/verify's and is
+// minted via the same mintSessionAndRespond(). It remains a separate function
+// so this file's two already-tested request shapes stay independently
+// editable.
 export async function confirmMfaSetupPreauth(
   setupToken: string,
   code: string,

package/packages/bundled-features/src/auth-mfa/web/mfa-code-or-recovery-field.tsx

@@ -0,0 +1,68 @@
+import { usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+
+export type MfaCodeOrRecoveryFieldProps = {
+  readonly id: string;
+  readonly codeLabel: string;
+  readonly code: string;
+  readonly onCodeChange: (code: string) => void;
+  readonly useRecovery: boolean;
+  readonly onUseRecoveryChange: (useRecovery: boolean) => void;
+  readonly disabled?: boolean;
+};
+
+export function MfaCodeOrRecoveryField({
+  id,
+  codeLabel,
+  code,
+  onCodeChange,
+  useRecovery,
+  onUseRecoveryChange,
+  disabled,
+}: MfaCodeOrRecoveryFieldProps): ReactNode {
+  const t = useTranslation();
+  const { Button, Field, Input } = usePrimitives();
+
+  return (
+    <>
+      <Field id={id} label={useRecovery ? t("auth.mfa.verify.recoveryCode") : codeLabel} required>
+        {useRecovery ? (
+          <Input
+            kind="text"
+            id={id}
+            name={id}
+            value={code}
+            onChange={onCodeChange}
+            disabled={disabled}
+            autoFocus
+            autoComplete="off"
+          />
+        ) : (
+          <Input
+            kind="code"
+            length={6}
+            id={id}
+            name={id}
+            value={code}
+            onChange={onCodeChange}
+            disabled={disabled}
+            autoFocus
+          />
+        )}
+      </Field>
+      <Button
+        type="button"
+        variant="link"
+        disabled={disabled}
+        onClick={() => {
+          onUseRecoveryChange(!useRecovery);
+          onCodeChange("");
+        }}
+      >
+        {useRecovery
+          ? t("auth.mfa.verify.useAuthenticatorCode")
+          : t("auth.mfa.verify.useRecoveryCode")}
+      </Button>
+    </>
+  );
+}

package/packages/bundled-features/src/auth-mfa/web/mfa-disable-dialog.tsx

@@ -12,6 +12,7 @@
 import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
 import { AuthMfaHandlers } from "./constants.ts";
+import { MfaCodeOrRecoveryField } from "./mfa-code-or-recovery-field.tsx";
 
 export type MfaDisableDialogProps = {
   readonly open: boolean;
@@ -28,13 +29,24 @@ export function MfaDisableDialog({
   onError,
 }: MfaDisableDialogProps): ReactNode {
   const t = useTranslation();
-  const { Dialog, Field, Input } = usePrimitives();
+  const { Dialog } = usePrimitives();
   const dispatcher = useDispatcher();
   const [code, setCode] = useState("");
+  const [useRecovery, setUseRecovery] = useState(false);
+
+  const reset = (): void => {
+    setCode("");
+    setUseRecovery(false);
+  };
+
+  const handleOpenChange = (nextOpen: boolean): void => {
+    if (!nextOpen) reset();
+    onOpenChange(nextOpen);
+  };
 
   const confirm = async (): Promise<void> => {
     const res = await dispatcher.write<{ disabled: boolean }>(AuthMfaHandlers.disable, { code });
-    setCode("");
+    reset();
     if (!res.isSuccess) {
       onError(res.error.i18nKey);
       return;
@@ -45,7 +57,7 @@ export function MfaDisableDialog({
   return (
     <Dialog
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={handleOpenChange}
       variant="danger"
       title={t("auth.mfa.disable.title")}
       description={t("auth.mfa.disable.description")}
@@ -54,16 +66,14 @@ export function MfaDisableDialog({
       onConfirm={confirm}
       testId="mfa-disable-dialog"
     >
-      <Field id="mfa-disable-code" label={t("auth.mfa.disable.code")} required>
-        <Input
-          kind="text"
-          id="mfa-disable-code"
-          name="mfa-disable-code"
-          value={code}
-          onChange={setCode}
-          autoComplete="one-time-code"
-        />
-      </Field>
+      <MfaCodeOrRecoveryField
+        id="mfa-disable-code"
+        codeLabel={t("auth.mfa.disable.code")}
+        code={code}
+        onCodeChange={setCode}
+        useRecovery={useRecovery}
+        onUseRecoveryChange={setUseRecovery}
+      />
     </Dialog>
   );
 }

package/packages/bundled-features/src/auth-mfa/web/mfa-regenerate-recovery-dialog.tsx

@@ -9,6 +9,7 @@
 import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode, useState } from "react";
 import { AuthMfaHandlers } from "./constants.ts";
+import { MfaCodeOrRecoveryField } from "./mfa-code-or-recovery-field.tsx";
 
 export type MfaRegenerateRecoveryDialogProps = {
   readonly open: boolean;
@@ -25,16 +26,27 @@ export function MfaRegenerateRecoveryDialog({
   onError,
 }: MfaRegenerateRecoveryDialogProps): ReactNode {
   const t = useTranslation();
-  const { Dialog, Field, Input } = usePrimitives();
+  const { Dialog } = usePrimitives();
   const dispatcher = useDispatcher();
   const [code, setCode] = useState("");
+  const [useRecovery, setUseRecovery] = useState(false);
+
+  const reset = (): void => {
+    setCode("");
+    setUseRecovery(false);
+  };
+
+  const handleOpenChange = (nextOpen: boolean): void => {
+    if (!nextOpen) reset();
+    onOpenChange(nextOpen);
+  };
 
   const confirm = async (): Promise<void> => {
     const res = await dispatcher.write<{ recoveryCodes: readonly string[] }>(
       AuthMfaHandlers.regenerateRecovery,
       { code },
     );
-    setCode("");
+    reset();
     if (!res.isSuccess) {
       onError(res.error.i18nKey);
       return;
@@ -45,7 +57,7 @@ export function MfaRegenerateRecoveryDialog({
   return (
     <Dialog
       open={open}
-      onOpenChange={onOpenChange}
+      onOpenChange={handleOpenChange}
       title={t("auth.mfa.regenerate.title")}
       description={t("auth.mfa.regenerate.description")}
       confirmLabel={t("auth.mfa.regenerate.confirm")}
@@ -53,16 +65,14 @@ export function MfaRegenerateRecoveryDialog({
       onConfirm={confirm}
       testId="mfa-regenerate-recovery-dialog"
     >
-      <Field id="mfa-regenerate-code" label={t("auth.mfa.regenerate.code")} required>
-        <Input
-          kind="text"
-          id="mfa-regenerate-code"
-          name="mfa-regenerate-code"
-          value={code}
-          onChange={setCode}
-          autoComplete="one-time-code"
-        />
-      </Field>
+      <MfaCodeOrRecoveryField
+        id="mfa-regenerate-code"
+        codeLabel={t("auth.mfa.regenerate.code")}
+        code={code}
+        onCodeChange={setCode}
+        useRecovery={useRecovery}
+        onUseRecoveryChange={setUseRecovery}
+      />
     </Dialog>
   );
 }

package/packages/bundled-features/src/auth-mfa/web/mfa-setup-preauth-screen.tsx

@@ -79,6 +79,7 @@ export function MfaSetupPreauthScreen({
   const [setup, setSetup] = useState<SetupState | null>(null);
   const [acknowledged, setAcknowledged] = useState(false);
   const [code, setCode] = useState("");
+  const [attempt, setAttempt] = useState(0);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [retryAfterSeconds, setRetryAfterSeconds] = useState<number | null>(null);
@@ -109,13 +110,13 @@ export function MfaSetupPreauthScreen({
     }
   };
 
-  const confirmSetup = async (): Promise<void> => {
-    if (!setup) return;
+  const confirmSetup = async (submittedCode: string): Promise<void> => {
+    if (!setup || busy) return;
     setBusy(true);
     setError(null);
     setRetryAfterSeconds(null);
     try {
-      const res = await confirmMfaSetupPreauth(setup.setupToken, code);
+      const res = await confirmMfaSetupPreauth(setup.setupToken, submittedCode);
       if (res.kind !== "success") {
         setError(res.error.reason);
         setRetryAfterSeconds(res.error.retryAfterSeconds ?? null);
@@ -130,7 +131,11 @@ export function MfaSetupPreauthScreen({
           setSetup(null);
           setAcknowledged(false);
           setCode("");
+          return;
         }
+        // Remount: the field was disabled during confirm and lost focus.
+        setCode("");
+        setAttempt((n) => n + 1);
         return;
       }
       onSuccess?.(res.data.landingPath);
@@ -143,7 +148,7 @@ export function MfaSetupPreauthScreen({
 
   const onSubmit = (e?: FormEvent): void => {
     e?.preventDefault();
-    void confirmSetup();
+    void confirmSetup(code);
   };
 
   return (
@@ -226,13 +231,17 @@ export function MfaSetupPreauthScreen({
 
             <Field id="mfa-setup-preauth-code" label={t("auth.mfa.enable.code")} required>
               <Input
-                kind="text"
+                key={attempt}
+                kind="code"
+                length={6}
                 id="mfa-setup-preauth-code"
                 name="mfa-setup-preauth-code"
                 value={code}
                 onChange={setCode}
+                onComplete={(next) => void confirmSetup(next)}
                 disabled={busy || !acknowledged}
-                autoComplete="one-time-code"
+                hasError={error !== null}
+                autoFocus={attempt > 0}
               />
             </Field>