Blocks
v1.0.0Added in 1.0.0
The sign-up screen of a CRM: account with password rules, company details from the CUI, email code and a welcome step.
Sign up in up to three steps shown as bars above the form; completed bars are buttons that go back, and each change is announced ("Step 2 of 3: Company"). Account: "Sign up with Google" (Apple, Microsoft) spins on the pressed button and skips the email check; name, work email (a gmail, yahoo, outlook, hotmail or icloud address shows a warning to use the company address), a password with a strength meter and a rules checklist that opens on focus, the required terms checkbox with its links, the optional product news checkbox and Continue. Fields validate when you leave them and as you fix them; submitting empty shows every error and focuses the first. An email that already has an account (emma.carter@acme.com in the demo) shows a red alert with Sign in and Forgot password?. Company: type a CUI with or without RO and press Enter or Search; an invalid control digit is an error and never calls the lookup, the button spins while the ANAF lookup runs, a match fades in the name, the address and a VAT registered badge (Edit switches to manual fields), no match asks for manual entry and a failed lookup offers Try again and Fill in by hand. Pick a role (a bottom sheet on phones) and a team size, then Continue, or Skip. Verify: type or paste the 6 digit code and the sixth digit submits (123456 passes), a wrong code shakes the cells and shows an alert, Resend the code waits with a live countdown, Change the email goes back with the email selected. With verify link the step offers Open Gmail or Outlook for those domains and I confirmed my address. Done: a bouncy check, three next step rows and Open Acme CRM. Going back keeps what you typed. Steps slide in from the side they belong to and focus moves to the step title; on phones the form fills the screen with 48px fields and the hero is gone; with reduced motion steps cross-fade.
npx wingo-ui@latest add register-pagePro item: the CLI needs a Pro account. See plans