‫Istruttore: In
‫questo video, costruiremo la pagina dell'account utente
‫principalmente utilizzando concetti che già conosciamo e
‫già utilizzati in precedenza.
‫E iniziamo dando un'occhiata a
‫cosa intendo effettivamente con la pagina dell'account utente nel nostro
‫sito Web di riferimento, quindi qui su natours. sviluppatore
‫Quindi abbiamo già visualizzato questo menu qui
‫sul nostro
‫sito Web, ma quando facciamo clic su questo
‫utente otteniamo l'accesso alla pagina dell'account utente.
‫E quindi qui, possiamo modificare alcune impostazioni di
‫base, anche caricare una nuova foto, ma
‫questa la faremo nella
‫prossima sezione in
‫realtà, e l'utente può anche aggiornare la sua password in questa pagina.
‫Quindi, sul lato sinistro ci sono alcune voci
‫di menu, che non implementeremo
‫realmente, quindi implementeremo solo il menu,
‫ma non proprio le pagine a cui puntano,
‫e quindi se l'utente è un amministratore
‫eseguiamo anche il rendering di questa parte qui.
‫Ok, quindi questo è ciò che costruiremo in questa
‫lezione, e nelle prossime
‫due lezioni ci occuperemo effettivamente dell'aggiornamento delle impostazioni.
‫Quindi, in pratica, far funzionare questi pulsanti qui.
‫Tutto ok?
‫Ma per ora, è solo il rendering di questa pagina qui
‫su questo . io URL.
‫Bene?
‫Quindi, iniziamo con il modello del carlino.
‫Va bene, e quindi
‫come sempre, ho già questo accountTemplate qui.
‫Quindi prendiamolo, copiamolo e poi
‫creiamo una nuova vista quaggiù,
‫che chiamo account.
‫E ora vogliamo estendere
‫la base e creare come sempre un blocco chiamato contenuto.
‫E poi qui è dove incolliamo effettivamente il nostro contenuto.
‫Tutto ok?
‫Ora dobbiamo far
‫rientrare tutto questo per farlo entrare nel blocco.
‫Fantastico, quindi qui prima abbiamo la nostra navigazione, giusto?
‫Quindi impostazioni, prenotazioni, recensioni e fatturazione che
‫abbiamo visto lì sul lato
‫sinistro della pagina, e poi abbiamo anche la navigazione dell'amministratore, giusto?
‫E vedono già un sacco di codice duplicato qui.
‫Quindi, in pratica, questi elementi della voce di
‫elenco qui appaiono in realtà otto volte.
‫Quindi quattro volte quassù e quattro volte quaggiù quindi creiamo molto
‫velocemente un mixin per loro per rendere il
‫nostro codice un po' più pulito.
‫Va bene, quindi vado avanti
‫e copierò davvero uno di questi.
‫E poi crea un nuovo mixin chiamato navItem.
‫Ok, l'abbiamo fatto prima.
‫Quindi questo è molto simile.
‫Quindi cosa dobbiamo inserire in
‫questo mixin per personalizzare sostanzialmente ciascuno di questi elementi?
‫Bene, quello che cambierà è il collegamento.
‫Anche il testo, quindi impostazioni, prenotazioni, eccetera.
‫Quindi questo è il testo.
‫Quindi anche l'icona cambierà, e finalmente
‫vedi che questo primo qui
‫ha la classe attiva di navigazione laterale, giusto?
‫E quindi specificheremo anche un attivo come qui fondamentalmente.
‫E poi, quando vogliamo contrassegnare un elemento
‫come attivo, passeremo semplicemente da qui.
‫Bene?
‫Quindi ora dobbiamo correggere il rientro qui.
‫E poi passare i nostri dati.
‫Il prossimo è il testo.
‫Quindi questo, ovviamente a questo
‫punto, non è una novità, quindi lo sto facendo abbastanza velocemente qui, giusto?
‫Quindi icon e poi il nome dell'icona che passiamo.
‫Quindi, proprio come abbiamo fatto
‫prima, e poi finalmente
‫questo attivo qui, ricorda, sarà vero o falso.
‫E se è vero, allora vogliamo aggiungere questa classe.
‫Quindi copiamolo.
‫E poi qui specifichiamo l'attributo class.
‫E poi, proprio come
‫abbiamo fatto, facciamo una dichiarazione di tornitura qui.
‫Quindi dicendo che se attivo, in pratica, qui
‫vogliamo avere il navigatore laterale attivo.
‫E se no, non vogliamo niente.
‫Quindi un nome di classe vuoto, in pratica.
‫Tutto bene.
‫E così ora possiamo sostituire questo con il nostro mixin.
‫Quindi si chiama navItem, quindi ricorda,
‫scriviamo + e poi navItem.
‫Quindi qui il collegamento è un collegamento vuoto.
‫E in realtà per tutti loro per ora.
‫Quindi
‫Impostazioni, quindi
‫il nome dell'icona che è anche impostazioni,
‫ma in minuscolo.
‫E poi finalmente questo è effettivamente attivo, e quindi
‫passiamo nel vero.
‫Va bene, duplichiamolo.
‫Prendi una valigetta e abbiamo Le mie prenotazioni.
‫Facciamolo minuscolo.
‫Va bene, duplicalo altre due volte.
‫Quindi qui abbiamo
‫la stella e poi
‫qui la carta di credito per la fatturazione.
‫Tutto bene.
‫E ora abbiamo la navigazione amministrativa.
‫E questo sarà
‫visibile solo se l'utente corrente è un amministratore.
‫Quindi definiamolo effettivamente usando un'istruzione if.
‫E quindi qui dobbiamo verificare se il ruolo utente
‫è uguale a admin, giusto?
‫E quindi
‫questa è, di nuovo, una di queste istruzioni
‫if più complesse e quindi dobbiamo usare JavaScript per questo.
‫Quindi sto usando di nuovo qui il codice senza buffer.
‫E poi se
‫e così avremo accesso alla variabile utente qui.
‫Proprio come abbiamo fatto in altri modelli.
‫Quindi in pratica lo passeremo qui.
‫E poi, ovviamente, l'utente ha l'attributo role, quindi
‫testiamo se è admin.
‫E se lo è, vogliamo mostrare tutto questo.
‫E quindi ora deve essere rientrato di un livello.
‫Bene?
‫E ovviamente ora vogliamo sostituire anche
‫tutti questi qui con il nostro mixin.
‫Quindi quattro volte.
‫Questa si chiama mappa.
‫Gestire i tour.
‫Questo è Gestisci utenti.
‫Gestire le recensioni.
‫E poi finalmente ne abbiamo uno con la valigetta.
‫E questo non ha il testo qui, ma
‫è Gestisci le prenotazioni.
‫Tutto bene.
‫Quindi liberiamoci di questo e continuiamo il nostro lavoro quaggiù.
‫Quindi questo qui sarà il
‫modulo per modificare le impostazioni dell'utente.
‫E quindi i dati personali saranno qui in questi valori, ok?
‫Quindi fondamentalmente in un elemento di input HTML, il valore è
‫una specie di testo predefinito che
‫possiamo inserire all'interno di un elemento di input.
‫E quindi di solito quello
‫che mettiamo lì è il valore corrente di quell'input,
‫quindi di quel campo.
‫E quindi in questo momento, questo è ovviamente il nome dell'utente.
‫E quindi mettiamolo qui.
‫Utente. nome.
‫E poi quaggiù c'è
‫ovviamente l'e-mail.
‫E qui abbiamo anche l'immagine dell'utente.
‫Quindi gli utenti di barra dell'immagine tagliano il nome dell'immagine stessa.
‫Bene.
‫Allora quaggiù non c'è niente da fare.
‫Tutto ok?
‫E in effetti è così.
‫Quindi questi sono davvero tutti i
‫dati che provengono dall'oggetto utente
‫che dobbiamo inserire.
‫Ok, questo è il modello.
‫Ora andiamo avanti e aggiungiamo il percorso al viewRouter.
‫Quindi proprio qui, e questo si chiamerà /me.
‫E quindi avremo un controller chiamato getAccount.
‫Ora questo qui,
‫ovviamente, sarà in realtà un percorso protetto, giusto?
‫Perché solo se siamo effettivamente
‫registrati avremo accesso a questa pagina.
‫E quindi abbiamo bisogno di usare il nostro middleware di protezione qui.
‫Quindi questo è un authController. proteggere.
‫Bene?
‫Così come abbiamo fatto con tutti o altri percorsi protetti.
‫Ora un problema che vedo con
‫questo è che questo middleware
‫di protezione qui è molto simile a isLoggedIn.
‫E quindi faremo effettivamente alcune operazioni duplicate lì, il
‫che non è l'ideale.
‫Perché ricorda che questo isLoggedIn
‫verrà eseguito per tutte le richieste, giusto?
‫Quindi diamo rapidamente un'occhiata a questi in modo che
‫io possa esprimere il mio punto.
‫Quindi, per proteggerci, portiamo qui l'attuale utente.
‫Quindi abbiamo questo findById qui.
‫Ma facciamo
‫lo stesso qui in logIn, ok?
‫Quindi, utilizzando isLoggedIn e protect allo stesso tempo, eseguiremo questa
‫query due volte.
‫E quindi non è l'ideale, ovviamente.
‫Quindi mettiamo questo isLoggedIn qui solo nelle
‫rotte che non sono protette, ok?
‫Perché sul
‫percorso protetto questo controllo se
‫l'utente ha effettuato l'accesso verrà effettivamente eseguito anche, giusto?
‫Ma non in questo middleware,
‫ma poi nel
‫middleware di protezione perché fondamentalmente controlla anche quello, giusto?
‫Quindi tagliamo da qui e incolliamo semplicemente in
‫altri percorsi che non sono protetti.
‫Ok, ha senso?
‫E così in questo modo non abbiamo questo problema
‫di fare praticamente la stessa identica query due volte
‫in tutti i middleware protetti.
‫Ed è un po' meglio per le nostre prestazioni.
‫Ora, questa cosa che facciamo in isLoggedIn
‫e che attualmente non
‫facciamo in protection è questa qui.
‫Quindi abbiamo inserito un utente corrente nella risposta. gente del posto.
‫E quindi facciamo
‫lo stesso ora in currentUser.
‫E quindi facciamo lo stesso qui nel middleware di protezione.
‫Quindi metti l'utente corrente sia su richiesta. utente e alla
‫risposta. gente del posto, va bene?
‫In modo che possiamo quindi
‫usarlo automaticamente in tutti i modelli successivi.
‫Quindi in questo caso, nel nostro modello di account, va bene?
‫Quindi salvalo.
‫E ora dobbiamo aggiungere questo controller getAccount per,
‫ovviamente, correggere questo errore che
‫otteniamo attualmente.
‫Quindi questo è in viewsController,. richiesta e risposta getAccount.
‫E vedrai tra un secondo perché abbiamo bisogno solo di questi due.
‫Quindi, per ottenere la pagina dell'account, tutto ciò che dobbiamo fare è semplicemente
‫eseguire il rendering di quella pagina.
‫Non abbiamo nemmeno bisogno di interrogare l'utente corrente perché
‫è già stato fatto nel middleware
‫di protezione, giusto?
‫E quindi tutto ciò che dobbiamo fare
‫è fare qualcosa del genere.
‫Quindi copia questo codice e
‫poi qui account.
‫E diamogli un titolo del tuo account.
‫Va bene, quindi questo fa scomparire quell'errore.
‫E ora come pezzo finale del puzzle, aggiungiamo il
‫collegamento corretto, in realtà, nell'intestazione.
‫Quindi qui nella nostra intestazione in questo momento il
‫collegamento non punta a questa pagina dell'account, giusto?
‫Quindi non punta da nessuna parte.
‫E quindi ora dovrebbe puntare a /me.
‫Ok, quindi questo dovrebbe
‫essere l'ultimo pezzo per farlo funzionare davvero.
‫E quindi accediamo qui ora
‫con il test uno, due, tre, quattro.
‫Abbiamo effettuato l'accesso con successo.
‫E ora cliccando qui otteniamo la nostra pagina.
‫Fantastico.
‫Ora c'è un errore qui con la foto dell'utente.
‫Quindi risolviamolo.
‫Ma a parte questo, in realtà tutto funziona bene.
‫Abbiamo anche questo menu qui perché siamo attualmente in admin
‫e quindi testiamolo anche in un secondo per vedere se
‫scompare per gli altri utenti.
‫E in realtà riceviamo anche questo errore
‫qui perché abbiamo una richiesta non riuscita per l'immagine.
‫E così vediamo già che probabilmente stiamo facendo qualcosa
‫di sbagliato lì.
‫E quindi
‫qui nell'immagine, ovviamente, non è utente. nome, è utente. foto.
‫Quindi salvalo, ricarica qui.
‫E ora davvero, ci siamo.
‫Tutto ok?
‫Quindi ora disconnettiamoci, vediamo cosa succede allora.
‫E poi otteniamo questo tipo di errore.
‫E questo è fondamentalmente perché stiamo cercando
‫di accedere a questo percorso protetto senza essere loggato.
‫Tutto ok?
‫Quindi proviamoci di nuovo adesso.
‫Quindi, se proviamo ad accedere
‫con /me, otteniamo che non sei loggato, ok?
‫E prima che ottenessimo quell'errore dall'aspetto strano perché in
‫questo momento siamo in fase di sviluppo.
‫Ma in produzione, ovviamente, non vedremmo quello strano errore
‫che abbiamo visto prima.
‫Destra?
‫Ma quello che
‫vediamo ora è che, ovviamente, la nostra rotta è davvero protetta.
‫Quindi non possiamo accedervi se non abbiamo effettuato l'accesso.
‫Ora, per finire, accediamo effettivamente con un altro account
‫solo per
‫vedere se funziona anche la parte dell'amministratore.
‫Quindi, di nuovo, usiamo Laura qui.
‫E vedi che è solo un utente normale.
‫Tutto bene.
‫E ora
‫otteniamo il suo account utente, senza ovviamente il menu di amministrazione.
‫Ok, perfetto.
‫Quindi questo sta costruendo la pagina dell'account.
‫E come ho detto prima, nel
‫prossimo video, ci occuperemo poi di aggiornare
‫effettivamente queste impostazioni dell'account.