#843
Sign-in form
A sign-in form with a Turnstile captcha: no token without the check, reset() after a submit.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Sign-in form" pattern (@codeatlasdev/ui demo #843, inputs/turnstile) in my app.
Call get_demo({ ids: ["#843"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Public forms (sign-in, sign-up, waitlist, reset) that need a captcha token to verify on the server.
Keep these library parts, with the props and tokens the demo uses:
- Button, Stack, TextField from "@codeatlasdev/ui"
- Turnstile, TurnstileHandle from "@codeatlasdev/ui/forms"
Behaviour to keep:
- `import { Turnstile, type TurnstileHandle } from '@codeatlasdev/ui/forms'`
- `const SITE_KEY = '1x00000000000000000000AA'` (Cloudflare's always-pass test key)
- `<Turnstile siteKey={SITE_KEY} action="sign-in" bind:handle />` between the Email field and the Sign in button
- Submit reads `handle?.getToken()`, blocks with a message when it is empty, and calls `handle?.reset()` after sending
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Button
@codeatlasdev/ui - Stack
@codeatlasdev/ui - TextField
@codeatlasdev/ui - Turnstile
@codeatlasdev/ui/forms
How it is built
- `import { Turnstile, type TurnstileHandle } from '@codeatlasdev/ui/forms'`
- `const SITE_KEY = '1x00000000000000000000AA'` (Cloudflare's always-pass test key)
- `<Turnstile siteKey={SITE_KEY} action="sign-in" bind:handle />` between the Email field and the Sign in button
- Submit reads `handle?.getToken()`, blocks with a message when it is empty, and calls `handle?.reset()` after sending
Related
Loading source.