Quando creo un nuovo sito una delle prime cose che mi servono per dare un'esperienza personalizzata ai miei utenti e dargli la possibilità di registrarsi e poi successivamente fare login e accedere o ad un'area riservata o comunque vedere dei dati personalizzati.

Come facciamo questa cosa? Te lo mostro subito.

Creiamo come prima cosa una pagina di autenticazione.

Nel mio caso la chiamerò out ma puoi chiamarla come vuoi e la creò inizialmente vuota.

Come prima cosa controllo che il layout sia effettivamente colonna come mi aspetto, in realtà lui me lo propone Fixed e quindi lo aggiusto subito, di modo che gli elementi che metto appaiano tutti uno sotto l'altro.

Come seconda cosa vado a posizionare il reusable element header che abbiamo creato in un'altra lezione.

Ora io so che i flussi e le interfacce di login e sign up sono molto comuni, dunque vado a controllare su questo cubotto se negli elementi di bubble predefiniti è già disponibile.

Questa, io so che si trova nella zona inputs and forms, e la vado a trovare e la posiziono qua sulla pagina.

Prendo la schermata di login e prendo la schermata di sign up.

Molto bene, abbiamo già le interfacce pronte.

A questo punto devo dire la pagina, quale delle due mostrare.

Come lo faccio? Lo faccio con un custom state.

Mi posiziono qua sulla pagina direttamente e cliccando sulla i aggiungo un nuovo stato.

Il nome dello Stato è.

Lo chiamerò login o sign up, totalmente arbitrario, anche qua puoi chiamarlo come vuoi, tipo di stato è uno stato di tipo testo.

Lo creo e gli dico che come default value voglio che sia settato su login.

Ora a questo punto vado a dare dei comportamenti ai miei gruppi, il gruppo Sign up e il gruppo login, di modo che vengano mostrati solo quando il custom state dice di mostrarli.

E adesso poi andremo a vedere anche come switchare dall'uno all'altro.

Sul gruppo Sign Up vado a dire che a livello di layout, non voglio che sia visibile quando la pagina viene caricata e di collassarlo quando è nascosto, cioè di non rimanere ad occupare spazio bianco.

Gli do poi una condizionale.

e gli dico che quando Quindi cerco out che è il nome della pagina.

E faccio riferimento al suo stato.

Quando il suo stato è sign up, perché adesso stiamo parlando del gruppo sign up.

Gli dico che voglio che questo elemento sia visibile.

Ora vado a f- ad applicare una condizione molto simile ma, opposta, diciamo, all'altro gruppo, quindi prendo il gruppo login e anche poi gli dirò che, di base non voglio che sia visibile il caricamento della pagina, voglio che si collassi, quando è um nascosto e allo stesso tempo gli applico un condizionale, gli dico, sempre vado a fare riferimento allo stato login or sign up della mia pagina.

E gli dico che quando questo stato è invece login, Anche qua sono tutte scritte arbitrarie che ho deciso io, l'importante è che li mantengo coerenti fra quello che vado a scrivere nello Stato e, Il trigger che do ai singoli elementi.

Quindi se nello stato scrivo login, qua ci deve essere scritto esattamente login affinché questo gruppo possa essere mostrato.

Cosa che proprietà cambio l'elemento, gli dico che questo elemento deve essere visibile.

Ora come faccio a switchare dal login al sign up? Questo elemento me lo ha messo preimpostato come elemento link, poiché utilizza un'altra tecnica per navigare, cioè utilizza, la pagina login e la pagina sign up separate, mentre nel nostro caso abbiamo fatto una pagina unica, quindi questo elemento link non ci va bene, ci basta un elemento di tipo testo.

Come facciamo a convertire un elemento di tipo link in un elemento di tipo testo? C'è una funzione apposta che dice replace the element type.

Da qui posso cercare l'elemento testo e semplicemente fare così.

Adesso è un elemento di tipo testo e posso applicarci dei workflow al click, mentre gli elementi di tipo link non possono avere dei workflow collegati al fatto che vengano cliccati, perché già per definizione, ti portano alla destinazione che è prevista nella nel loro link.

A questo punto posso dirgli a the workflow, Mi porta automaticamente sulla schermata dei workflow, dove vedo che c'è il trigger già impostato corretto, cioè quando il text create a a new account viene cliccato, cosa voglio che succeda? Voglio che venga modificato lo s- il custom state della pagina, in modo da mostrare il sign up al posto del login.

In questo caso userò la funzionalità set set of an element, dove vado a scegliere la pagina out e lo stato login o sign up.

Il valore che scriverò nel custom state sarà sign up.

Di conseguenza non ci sarà più scritto login, ma ci sarà scritto sign up.

Di conseguenza, non verrà più mostrato il gruppo del login, ma verrà mostrato il gruppo del sign up.

Ti mostro cosa succede di modo che vediamo se, ha funzionato.

Clicchiamo sul triangolino e ti condivido subito la scheda.

Vedi che viene mostrato solo il gruppo di login, mentre il gruppo di sign up non si vede in questo momento.

Se clicco su creerete il mio account, il gruppo di login scompare e compare il gruppo di sign up.

Ora dobbiamo applicare la stessa regola all'elemento already have an account di modo che posso tornare indietro e riportarmi anche sul gruppo di login.

Torniamo al nostro editor.

E facciamo la stessa cosa che abbiamo fatto su create new account l' applichiamo anche qua.

Quindi vediamo che qua abbiamo un elemento di tipo link che però per come ho deciso di gestire questa transizione non mi va bene, dunque posso fare replace di element type.

lo trasforma in un elemento di tipo testo.

E gli vado subito ad aggiungere un workflow.

Gli dico quando il testo or have an account viene cliccato, cosa voglio che succeda? Voglio che venga settato lo state, quale state, lo state della pagina out, e lo state che si chiama login e sign up.

Che valore che voglio che ci venga scritto sopra? Voglio che ci venga scritto sopra il valore login.

Molto bene.

Abbiamo quindi completato la parte di transizioni.

Ora ci manca il succo vero e proprio, cioè le azioni che vanno a creare un account o ad autenticarti se già ne hai uno.

Andiamo quindi sugli elementi grafici ad applicare queste azioni che ti anticipo, sono già tutte azioni predefinite, non c'è da inventarsi grosse cose.

Partiamo dall'azione sign up, clicco sul bottone e ci aggiungo un workflow.

A questo punto gli dico cosa voglio che succeda quando il bottone sign up viene cliccato? Indovina un po' c'è già un'azione che si chiama Sign the user app.

A questo punto gli devo dire con quale mail farli sign up, con quale password farli sign up, e glieli passo facendo riferimento ai gruppi input che sono presenti sulla pagina.

Quindi, come email metterò, provo a scrivere email e vedo che c'è un input email login, okay no, sarà questo l'input email sign up.

Fortunatamente gli elementi presenti al library di Bubble sono nominati con logica, dunque mi è abbastanza facile recuperarli.

E faccio riferimento al suo value.

Allo stesso modo per la password provo a scrivere, Okay, pass e trovo subito questi input, quindi scelgo l'input password sign up.

E anche qua devo fare riferimento al suo meglio.

Vado adesso a fare la stessa cosa per il bottone di login, quindi quando schiaccio il bottone di login aggiungo un workflow, e cosa voglio che succeda anche qua indovina un po' log di user in.

Blog the user in, in questo caso come email.

Trovo l'input email del login e come pass value sempre, come password che passo provo a scrivere pass e trovo l'input password del login.

E anche qua devo sempre fare riferimento al value.

Ti anticipo già una cosa, in questo momento se viene il sign-up o login, poi l'utente rimane fermo come un baccalà sulla pagina e non si rende conto che è successo niente.

Quindi ci aggiungo già in coda ad entrambe le azioni un'azione di Redirect sulla nostra homepage.

Quindi cosa succede? Successivamente quando um l'utente ha fatto il login, fai una navigazione, vai alla pagina, quale pagina voglio mandare, ti mando sulla pagina index.

Stessa azione, la copio e la incollo anche sul flusso di sign up.

Faccio tasto destro, copy, mi porto sul bottone sign up e anche qua faccio il tasto destro paste.

Molto bene, andiamo a vedere se funziona tutto.

Clicco superview e ti condivido la scheda.

Qua siamo posizionati su login ma ancora non abbiamo un account.

dunque faccio, crea un nuovo account.

Qua ho lo spazio per il nome, che in questo momento non stiamo tracciando, non stiamo a registrare una database, quindi, volendo poter anche cancellarlo, ma scrivo ad esempio G.

Qua con l'e-mail scrivo una mail fasulla.

In ogni caso, in questo momento non ci interessa.

Poi se vorrei approfondire, vedrai che esistono dei flussi per validare che l'utente è effettivamente chi dice di essere e quindi mandare, sempre in modo automatico una mail um per cliccare un link per confermare la mail, che poi ti permette di avere un livello di sicurezza maggiore sul tuo sito.

Ed è tutto disponibile e pronto, ad esempio con il modulo.

Qua posso mettere dentro una password.

E qua mi chiede di ripeterla.

Noi non abbiamo utilizzato la funzionalità verifica password, quindi anche questo secondo blocco potrei farne totalmente a meno.

In ogni caso è disponibile e c'è la funzionalità nell'azione di sign up per chiedergli di andare a matchare la password che viene inserita in un primo blocco con una password che viene inserita in un secondo blocco.

Ora, nel momento in cui schiaccio il pulsante sign up, Vedi che vengo indirizzato sulla pagina di home e mi si è creato un account.

Come lo verifico che mi sia creato un account? Posso posizionarmi qua su data.

Andare su App data e verificare negli users.

ecco Qua.

Vedi che c'è questa mail che abbiamo appena creato, quindi si è creato uno user nel nostro database che se poi rimetterà la stessa password, una volta fatto eventualmente logout o si prova ad accedere ad altri dispositivi, potrà accedere al nostro sito piattaforma e vedere le stesse informazioni relative al proprio account.