Blocks
5 blocchi per una pagina autenticazione
Una pagina di autenticazione non deve essere bella: deve far entrare l'utente al primo tentativo. Cinque categorie, gli stati che i blocchi dimenticano e i conteggi reali del catalogo.
In sintesi
- Il blocco login si sceglie dagli stati che mostra: errore, attesa, disabilitato.
- Trentaquattro blocchi login, ma pochi coprono password dimenticata e verifica email.
- Un errore che sposta il layout costa più di un testo poco elegante.
Una pagina di autenticazione deve far entrare l'utente al primo tentativo, non dimostrare che il team sa centrare un form. Il catalogo indicizza 34 blocchi login, 19 signup, 32 form, 4 banner e 45 footer, letti il 2026-11-01 dalle pagine categoria.
Il metodo è lo stesso per ogni numero di questa pagina: conteggio dei record pubblicati per categoria, non stime. Se un blocco non compare nella tabella, non esiste nel catalogo, e questo è già un'informazione utile prima di aprire Figma.
Cosa deve fare la pagina
La pagina di accesso è l'unico punto in cui un utente che ha già pagato può restare fuori. Deve accettare un gestore di password senza rompersi, dire perché un tentativo è fallito senza rivelare se l'email esiste, e restare leggibile quando compare un messaggio di errore. Il resto, dal logo grande alla foto di sfondo, è facoltativo e spesso dannoso.
- Autofill che riempie email e password senza toccare il DOM a mano.
- Un errore che non sposta il bottone di invio.
- Un link visibile a recupero password e a verifica email.
- Un'uscita chiara per chi ha sbagliato provider, tipo «uso un'altra email».
L'ordine dei blocchi
| Sezione | Ruolo nella pagina | Blocchi disponibili |
|---|---|---|
| login | far entrare chi ha già un account | 34 |
| signup | raccogliere una registrazione minima | 19 |
| form | gestire recupero e verifica | 32 |
| banner | spiegare un accesso alternativo | 4 |
| footer | dare supporto e note legali | 45 |
Login prima, signup dopo, non il contrario. Chi arriva su questa pagina ha quasi sempre già un account e sta cercando il campo password: mettere la registrazione in cima sposta il campo utile sotto la piega. Form e banner stanno sotto il login, come supporto al recupero, e il footer chiude con privacy e condizioni.
I blocchi da cui partire
Le tabelle mostrano il blocco, il registry, il numero di file e la categoria dichiarata. Il numero di file è un indizio sugli stati: un login da 9 file di solito separa campo, bottone e messaggi, uno da 3 file tiene tutto in un componente unico e va modificato per aggiungere l'errore. Leggi la categoria con attenzione: un blocco «topbar» finisce nella tabella login solo perché il registry lo classifica così.
Blocchi login
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Topbar 03 - Login Action Topbar | Shadcn Space | 9 | topbar |
| Login 07 | Shadcn UI Blocks | 5 | login |
Blocchi signup
Blocchi form
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Organization Form - 1 | shadcn-ui-clerk-components | 3 | organization |
| Profile Form - 1 | shadcn-ui-clerk-components | 3 | profile |
Blocchi banner
Cosa si rompe in produzione
Quasi tutti i guasti di questa pagina sono di stato, non di stile. Il campo password non ha un tipo dichiarato e il gestore non lo compila. Il messaggio di errore compare sotto il form e spinge il bottone fuori dallo schermo su un telefono da 360 px. Il codice OTP ha sei caselle che non accettano il paste.
- Assenza di autocomplete: email, current-password e new-password.
- Bottone in attesa senza aria-busy: lo screen reader non annuncia nulla.
- Errore generico «credenziali non valide» anche quando l'email è sbagliata.
- Redirect dopo il login che perde il parametro di ritorno.
curl "https://ui.eneawork.it/api/blocks/category/login?limit=10"La risposta elenca dieci blocchi login con fonte e file: usala per capire quanti hanno un file separato per il messaggio di errore. Se il tuo candidato ha un solo file, aggiungere lo stato di errore significa riscrivere il componente, non solo il testo.
Un limite da dichiarare
Nessuno dei 34 blocchi login porta con sé la logica di sessione: sono form, non sistemi di accesso. Verifica email, rotazione del token e blocco dopo cinque tentativi restano da scrivere o da collegare al provider. Chi cerca un blocco «sicuro» sta cercando una cosa che il catalogo non vende.
Nel catalogo: form di login, componenti e blocchi con preview. Le guide: checklist accessibilità, contrasto misurato e Radix, Base UI e React Aria.
Domande frequenti
Perché la pagina login ha 34 blocchi e la pagina signup solo 19?
Perché i registry pubblicano più schermate di accesso che di registrazione: il login è la schermata che ogni prodotto deve avere, la registrazione spesso passa da invito o da un flusso esterno. Il divario è nel catalogo, non nella domanda.
Devo mostrare un messaggio diverso per email inesistente e password errata?
No. Un messaggio identico evita di trasformare il form in un verificatore di indirizzi. Perdi un po' di chiarezza e guadagni che nessuno possa testare se un'email è registrata provando password comuni.
Il blocco form generico può sostituire un blocco login?
Solo se accetta campi con tipo e autocomplete corretti. Un form generico parte da testi neutri e da un submit senza stato di attesa: adattarlo costa più che prendere un login da 9 file, che di solito ha già messaggi e spaziatura dei campi.
Come gestisco il codice OTP su mobile?
Un campo unico con inputmode numerico e autocomplete one-time-code batte sei caselle separate. Le caselle impediscono il paste, spezzano l'annuncio dello screen reader e richiedono JavaScript per spostare il focus a ogni cifra.
Il banner sotto il login è obbligatorio?
No, e con 4 blocchi banner nel catalogo è anche la categoria più povera della pagina. Usalo per una sola informazione operativa, come una manutenzione programmata; se non hai nulla da dire, togli il blocco invece di riempirlo con una promozione.