| 1 | /** |
| 2 | * The attributes every one-time-code field shares: the sign-in's second |
| 3 | * step, two-factor settings and email confirmation. Password managers |
| 4 | * (1Password, iCloud Keychain, Bitwarden) and phones' SMS/email code |
| 5 | * suggestions find the field by `autocomplete="one-time-code"` and a |
| 6 | * stable id, so it carries no ignore attributes. A field that also takes |
| 7 | * a recovery code (`k7m2q-9xw4d`) has a text keyboard and room for one: |
| 8 | * a numeric `pattern` or a six-character `maxLength` would refuse or cut |
| 9 | * a pasted recovery code before identity could check it. |
| 10 | */ |
| 11 | export function otpInputProps({ id, recovery = false }: { id: string; recovery?: boolean }) { |
| 12 | return { |
| 13 | id, |
| 14 | name: "code", |
| 15 | type: "text", |
| 16 | autoComplete: "one-time-code", |
| 17 | autoCapitalize: "none", |
| 18 | autoCorrect: "off", |
| 19 | spellCheck: false, |
| 20 | inputMode: recovery ? "text" : "numeric", |
| 21 | maxLength: recovery ? 20 : 7, |
| 22 | pattern: recovery ? undefined : "[0-9 ]{6,7}", |
| 23 | placeholder: recovery ? "k7m2q-9xw4d" : "123 456", |
| 24 | } as const; |
| 25 | } |