In questo articolo vedremo come implementare in VueJS un flusso di autenticazione mediante l'ausilio di Buefy e da uno dei framework di validazione consigliato dalla libreria stessa, VeeValidate.

L'esempio si baserà sui consigli forniti nell'articolo Linee Guida di Design per i Form è sarà raggruppato per pagine.

Buefy

Buefy è una framework UI basato su Bulma, costantemente aggiornato e molto ben documentato che può velocizzare di molto l'implementazione di web app che richiedono un'interfaccia grafica consistente e non dispersiva.

Offre un'ampia gamma di componenti visivi facilmente utilizzabili e diverse possibilità di personalizzazione.

VeeValidate

VeeValidate è un framework di validazione per i form basato su VueJS, che è possibile integrare molto facilmente con Buefy. Anche qui troviamo una documentazione molto chiara ed esplicita che lo rende semplice da configurare ed estremamente flessibile e scalabile nell'utilizzo.

Signin Page

E' il punto di accesso dell'applicazione di esempio, il pulsante "Login" presenta la CTA principale in maniera tale che sia immediatamente distinguibile dal resto degli elementi presenti nella pagina.

L'utente viene reindirizzato su questa pagina dopo aver terminato la registrazione.

Signup Page

Il form di registrazione è strutturato verticalmente, in maniera tale da facilitarne la lettura e la compilazione, con il messaggio relativo ai campi obbligatori è evidenziato in testa.

La validazione dei campi viene fatta inline; abbiamo implementato diverse tipologie di validazione in maniera tale da mostrare quante più casistiche possibili nelle poche righe di codice dell'esempio.

Notare come le indicazioni relative alla creazione della password siano sempre visibili così da velocizzarne la digitazione dando all'utente immediata visibilità delle regole sul campo.

Una cosa simile accade con il suggerimento del campo "Data di Nascita", che non viene presentato però sottoforma di vincolo così da rimanere più marginale ai fini dell'attenzione dell'utente.

ForgotPassword Page

Anche questa pagina è semplicissima. Un campo unico in cui si chiede all'utente di digitare l'indirizzo email scelto in fase di registrazione sul quale inviare l'email per il ripristino della propria password. Alla richiesta di invio il sistema non effettua alcun redirect ma da visibilità dell'esito dell'operazione, permettendo all'utente di rieseguire l'operazione velocemente nel caso in cui riscontri il mancato invio della suddetta email.