Blocks
v1.0.0Added in 1.0.0
The sign-in screen of Northwind CRM: password, email link or code, Google / Apple / Microsoft, two-step codes and the whole password recovery.
Sign in with email and password: fields validate when you leave them and as you fix them, Enter submits, a failed attempt shows a red alert above the form and keeps the email (a second failure also clears the password). The eye button reveals the password without moving the caret, and Caps Lock shows a warning. "Forgot password?" in the password label row carries the typed email to the recovery form. "Email me a sign-in link" and "Use your password" switch between the password form and the email link (or code) form. Provider buttons show a spinner on the one you pressed. After an email is sent, the "Check your email" view shows the address, opens Gmail or Outlook when the domain matches, and offers a resend that waits with a countdown ("Resend in 0:24") that survives a reload. Codes: type or paste the 6 digits and the sixth one submits; a wrong code shakes the cells and says how many tries are left, three wrong codes lock the input for a minute with a live countdown; two-step verification can switch to a 10 character backup code. The new password shows a strength meter and a checklist and must match its confirmation; the last view draws a bouncy check. Every secondary view has "Back to sign in"; each view slides in from the side it belongs to, focus moves to its title and the change is announced. On phones the form fills the screen with 48px fields and the hero is gone; with reduced motion views cross-fade.
npx wingo-ui@latest add login-pagePro item: the CLI needs a Pro account. See plans