‫Jonas: Usiamo ora la pagina dell'account utente
‫per consentire agli utenti di aggiornare i propri dati.
‫Quindi quello che faremo è consentire
‫all'utente di aggiornare sia il nome che l'indirizzo email per ora.
‫E aggiungeremo la foto dell'utente qui un
‫po' più avanti nella prossima sezione.
‫Ok, ora ci sono due modi in cui possiamo farlo.
‫Il primo è inviare una richiesta di post alla nostra API
‫proprio come abbiamo fatto con il modulo di accesso, ricordi?
‫E in effetti, lo faremo nella prossima lezione.
‫Ma in questo, voglio mostrarti un
‫altro modo che è un modo normale più tradizionale.
‫Quindi, in questo modo
‫più tradizionale, specifichiamo il metodo di pubblicazione direttamente nel
‫modulo, insieme all'URL a cui deve essere inviata la richiesta di pubblicazione.
‫Quindi, in pratica, usando questo metodo, non abbiamo
‫bisogno di JavaScript per fare la
‫richiesta, succede automaticamente con il modulo HTML che poi
‫invierà i dati all'endpoint URL nel nostro backend che abbiamo specificato.
‫Ora, personalmente, non mi piace molto questa soluzione, perché
‫forza il ricaricamento della pagina e
‫ci richiede anche di creare
‫un'altra route e un gestore di route nel nostro backend.
‫E infine, rende anche un
‫po' più difficile gestire gli errori.
‫Tuttavia, credo ancora che sia molto importante che
‫tu sappia come lavorare con i moduli in
‫questo modo, perché potrebbe
‫avere più senso nell'applicazione che stai creando.
‫Ad esempio, la tua applicazione potrebbe non aver nemmeno bisogno di
‫un'API, quindi in tal caso, quando
‫stai solo costruendo un sito Web renderizzato, ovviamente non
‫ha senso inviare moduli utilizzando una chiamata API
‫e, invece, dovrai fallo nel
‫modo in cui lo faremo in questo video.
‫Va bene, ecco perché lo facciamo in questo
‫modo in questa lezione e
‫poi usiamo il metodo API nella lezione successiva.
‫Quindi, quello che dobbiamo fare
‫nel nostro modulo per
‫inviarlo automaticamente, senza
‫dover passare attraverso JavaScript
‫come ho detto prima, quindi fondamentalmente pubblicando
‫automaticamente i dati sul nostro endpoint, è specificare quell'endpoint, e
‫quindi lo facciamo qui nel form, dove specifichiamo l'attributo action.
‫Quindi l'azione, e quindi diciamo che creeremo
‫un punto finale chiamato invia i dati dell'utente, come questo.
‫Ok, quindi specifichiamo anche il
‫metodo, che è post, okay, quindi questo deve sempre
‫accadere sull'elemento del modulo che stiamo inviando, okay.
‫Diamo un po' più di spazio qui,
‫in modo da renderlo più
‫facile da capire, e quindi tutto questo qui
‫è il nostro modulo, quindi quando
‫clicchiamo su questo elemento pulsante, automaticamente il modulo verrà inviato e
‫i dati verranno inviati utilizzando una richiesta di post a questo URL, va bene.
‫Esistono anche diversi modi in cui
‫i dati vengono effettivamente inviati, ma quello predefinito è chiamato URL
‫codificato, quindi è quello che stiamo usando qui.
‫E quindi fondamentalmente ciò che
‫farà è codificare tutti i dati che stiamo inviando
‫nell'URL un po' come una stringa di query.
‫Ok, ma ne parleremo ancora quando stiamo
‫effettivamente lavorando per ottenere i dati sul server e lavorarci.
‫Quindi, questo è il primo passo per far funzionare questo metodo e
‫il secondo è specificare le proprietà del nome sui
‫campi che vogliamo effettivamente inviare.
‫Quindi è questo input e questo input
‫e i loro valori verranno inviati
‫con una richiesta basata sui loro attributi del nome.
‫Ok, diciamo qui, nome uguale a nome, ok, quindi questo
‫è il nome utente, e poi questo qui avrà
‫il nome uguale a email.
‫Ok, quindi questo sarà il nome di questo campo e il
‫corpo che riceve la nostra applicazione.
‫Va bene, quindi in questo momento quando inviamo il modulo,
‫il corpo che riceveremo avrà
‫solo il nome e l'e-mail, perché questi
‫sono gli unici due
‫campi che hanno effettivamente un attributo nome.
‫Bene, quindi ora implementiamo questo percorso qui, ok, quindi come
‫ho detto con questo metodo, dobbiamo
‫implementare ancora un altro percorso.
‫Ok, allora router, e ricorda che questa è una richiesta postale.
‫Ok, quindi questo sarà in viewsController, e diciamo
‫updateUserData, va bene, salvalo e ora creiamo
‫effettivamente questo gestore.
‫Quindi qui in questo file.
‫E la prima cosa che
‫voglio fare qui è dare un'occhiata al corpo. corpo, okay, e quindi fondamentalmente in questo
‫caso, solo per mostrarti che in realtà non funzionerà proprio così.
‫Ok, e ti dirò perché dopo averlo
‫sperimentato, ok, quindi per
‫ora vediamo solo se siamo già connessi.
‫Quindi, se l'invio di quel
‫modulo attiverà effettivamente questo gestore qui, ok,
‫aggiungiamo anche una stringa qui solo per essere sicuri.
‫Bene, quindi ricarichiamo questo qui
‫in modo da ottenere il nostro nuovo modulo e, solo per
‫essere sicuri, diamo un'occhiata a questo.
‫Va bene, quindi
‫vedi qui, l'azione e il metodo che
‫abbiamo aggiunto, e ovviamente anche questi nomi,
‫ok, quindi aggiungiamo un secondo nome qui, non lo so, diciamo
‫Sarah, quindi qui l'email aggiungiamo
‫il cognome, ora riceviamo questo errore, per favore fornisci e-mail e
‫password, e quindi questo tipo proviene dal modulo di
‫accesso, giusto, quindi è strano.
‫Quindi diamo un'occhiata al nostro modulo qui,
‫e in effetti, questo modulo qui ha la classe form.
‫E penso che sia quello che abbiamo usato anche nel
‫nostro indice. js, giusto.
‫Quindi qui abbiamo praticamente
‫quel modulo usando la classe form, e quando esiste,
‫e viene inviato, allora proviamo ad accedere, proprio qui.
‫Ok, e quindi questo ovviamente non è corretto, quindi dovremmo selezionare
‫il nostro modulo di accesso in qualche altro modo.
‫Quindi risolviamolo molto rapidamente, qui abbiamo login, quindi aggiungiamo
‫un'altra classe qui,
‫form login, e questo è un po' strano perché abbiamo già il
‫form di login qui, ma non è
‫proprio su un elemento del modulo.
‫Quindi non dovremmo usarlo, quindi creiamo
‫qui il modulo con un modificatore di accesso, ok.
‫Quindi mettiamolo qui, diamogli un salvataggio, e quindi ora questo non
‫dovrebbe più accadere, perché ora non abbiamo
‫più quel gestore di eventi allegato
‫a questo modulo.
‫Quindi ricarichiamolo velocemente di nuovo, e
‫riproviamo, e ora vedi che sta effettivamente facendo qualcosa, ma ovviamente
‫non smetterà mai di girare qui, perché
‫in realtà non abbiamo inviato alcuna risposta, e quindi
‫il ciclo di risposta alla richiesta non è mai conclusa.
‫Ma comunque, volevo solo guardare il corpo
‫della richiesta, ricordi?
‫E quindi, come ho detto prima, ora è effettivamente MT.
‫Ok, come dicevo, non funzionerà proprio così, perché
‫abbiamo bisogno di aggiungere un altro
‫middleware per analizzare i dati provenienti da un modulo.
‫Quindi facciamolo nella nostra app. js.
‫Ma prima, chiudiamo qui alcuni di questi file.
‫Va bene, anche questo, e ora vado su app. js, aggiungiamo quella clausola al nostro parser
‫del corpo, quindi eccoci
‫qui, perché in realtà è molto simile.
‫Quindi app. utilizzare, ed è ancora un middleware Express
‫integrato, quindi express. urlencoded, okay, e si chiama in questo modo
‫perché ricorda, il modo in cui
‫il modulo invia i dati al server è in realtà chiamato anche
‫URL codificato, e quindi qui abbiamo bisogno di quel middleware per analizzare fondamentalmente
‫i dati provenienti da un modulo codificato URL.
‫Quindi passiamo ad alcune impostazioni, e possiamo dire extended true, e
‫questo ci permetterà semplicemente di passare alcuni
‫dati più complessi, che in questo caso non sono realmente necessari, ma usiamoli
‫comunque qui, e
‫possiamo anche impostare il limite
‫proprietà come abbiamo fatto nel parser del corpo, quindi qui
‫sopra, e quindi diciamo di nuovo 10 kilobyte.
‫Va bene, quindi se proviamo di nuovo qui, dovremmo
‫davvero ottenere questi dati e questi dati.
‫Aggiungiamo di nuovo questi dati diversi qui, quindi solo per
‫essere sicuri che in realtà non stiano ricevendo l'utente corrente,
‫ma in realtà i dati provenienti dal modulo, ok,
‫e di nuovo continua a
‫girare per sempre
‫qui, o finché non scade, ma ciò che
‫ci interessa è ottenere effettivamente questi nuovi dati qui ora nel nostro corpo.
‫Ottimo, quindi funziona, e quindi ora abbiamo il nostro
‫modulo HTML davvero connesso a questo gestore di route qui.
‫E così ora possiamo andare avanti e aggiornare effettivamente l'utente
‫in base a questi nuovi dati, va bene.
‫Quindi, liberiamoci di questo e
‫quindi aggiorniamo l'utente poiché sappiamo già come farlo.
‫Ora, prima di tutto, dovremo importare
‫il modello utente, quindi facciamolo.
‫Utente, qui con una piccola
‫U, va bene, e quindi ora diciamo
‫che l'utente è uguale ad attendere Utente. findByIdAndUpdate.
‫Bene, ovviamente come
‫sempre, contrassegna questo come asincrono e cattura tutti gli errori.
‫Ora va bene, quindi qual è l'ID che stiamo cercando?
‫E spero che a questo punto tu sappia dove
‫si trova, sarà su richiesta. utente. ID.
‫Oh, e una
‫cosa importante che dobbiamo fare, cosa che
‫non ho ancora fatto, è proteggere effettivamente anche
‫questo percorso qui, ok, perché solo
‫allora abbiamo effettivamente questo utente sulla richiesta, giusto, e
‫ovviamente inoltre vogliamo essere in grado di accedere a questo
‫percorso solo se abbiamo effettuato l'accesso,
‫altrimenti chiunque potrebbe semplicemente andare avanti e aggiornare alcuni dati.
‫Quindi, qui nel
‫percorso, aggiungiamo ovviamente authController. proteggere.
‫Bene,
‫questo è l'ID, quindi abbiamo bisogno dei nuovi dati,
‫quindi diciamo che vogliamo un nome uguale a request. corpo. nome e l'e-mail impostata per la
‫richiesta. corpo. e-mail.
‫E ricorda che questi sono i
‫nomi dei campi, perché abbiamo dato loro l'attributo name nel modulo HTML.
‫Ricorda, ora prima di aggiornare alcuni dati, passavamo l'intera
‫richiesta qui nel metodo di aggiornamento, giusto, ma in
‫questo caso vogliamo solo aggiornare il
‫nome e l'e-mail, quindi così, siamo sicuro
‫che qualsiasi altra cosa venga praticamente rimossa dal
‫corpo, perché alcuni hacker potrebbero ovviamente
‫andare avanti e aggiungere alcuni campi aggiuntivi all'HTML
‫e quindi ad esempio inviare
‫dati come password e cose del genere,
‫e quindi ovviamente lo facciamo non
‫voglio archiviare quei dati dannosi nel
‫nostro database, giusto.
‫Inoltre, le password vengono ancora una volta gestite
‫separatamente, perché ricorda che non possiamo mai aggiornare
‫le password utilizzando findByIdAndUpdate.
‫Di nuovo, perché non eseguirà il middleware sicuro che
‫si occuperà di crittografare le nostre password.
‫Ok, ecco perché abbiamo un percorso separato per quello
‫nella nostra API, e abbiamo anche
‫un percorso separato per quello nella nostra interfaccia utente.
‫E quindi di solito è quello che
‫vedi sempre nelle applicazioni web quando vuoi aggiornare le
‫tue password, di solito hai un modulo
‫separato solo per quello, ok.
‫Ad ogni modo, ora continuiamo qui con le
‫nostre opzioni, dove diciamo che
‫vogliamo ottenere il nuovo, quindi fondamentalmente il documento aggiornato
‫di conseguenza, e anche che vogliamo eseguire i validatori.
‫Quindi è proprio come lo abbiamo fatto prima nella nostra API.
‫Fantastico, quindi chiamiamolo effettivamente aggiornatoUser.
‫Ok, quindi cosa vogliamo fare ora?
‫Bene, dopo aver inviato i dati sul nostro sito
‫Web, in pratica ciò che vogliamo è semplicemente
‫tornare a questa pagina qui, ma ovviamente
‫con i dati aggiornati qui, ok.
‫Quindi è facile, tutto ciò che dovremo fare è sostanzialmente
‫eseguire nuovamente il rendering della pagina dell'account.
‫E quindi è simile a questo, copialo,
‫ok, ma ora c'è in
‫realtà una differenza importante, perché in questo momento, in
‫realtà, abbiamo anche
‫bisogno di passare l'utente, quindi
‫l'utente aggiornato, perché altrimenti, l'utente che il modello sta
‫per utilizzare, è quello che proviene
‫dal middleware di protezione, ricorda, e
‫quindi non sarà l'utente aggiornato.
‫Giusto, quindi dobbiamo passare all'utente aggiornatoUser.
‫Va bene, e quindi, dovrebbe essere sufficiente.
‫Quindi, se ora ricarichiamo questo, o in realtà se ora
‫lo salviamo qui, allora vedi che siamo effettivamente tornati alla stessa identica pagina e i
‫dati sono sempre gli stessi.
‫Quindi dimostriamolo, andiamo in un'altra
‫pagina e poi torniamo alla pagina delle impostazioni.
‫E così, questo dimostra che i dati
‫ora sono stati effettivamente aggiornati.
‫Quindi, se ora effettuiamo il logout,
‫proviamo ad accedere con questa nuova email.
‫Quindi volevo disconnettermi, va bene, e ora accedere di nuovo.
‫E quindi ora useremo questa nuova email, e ovviamente ancora la vecchia
‫password, test1234, e infatti, questo è
‫ora il nuovo indirizzo
‫email che dobbiamo usare per accedere.
‫Ora vediamo solo cosa succede quando passiamo qui
‫dei dati sbagliati.
‫Ad esempio, Google Chrome ci consente di inviare un
‫indirizzo e-mail come questo, ma ovviamente
‫il nostro modello Mongoose non consente
‫un'e-mail con questo formato.
‫E quindi ora dovremmo ricevere un errore,
‫e in effetti, riceviamo
‫questo errore, per favore fornisci un'e-mail valida, ma
‫è un'esperienza utente terribile, giusto, quindi stavamo solo inviando
‫i nostri dati, e poi all'improvviso, siamo andati
‫a una pagina completamente nuova.
‫E in effetti vediamo che siamo arrivati
‫anche a questo nuovo URL, quindi quello a cui abbiamo inviato i dati.
‫E quindi sì, è un po' terribile, e
‫quindi, come dicevo all'inizio, questo
‫modo di fare le cose è in realtà
‫un po' peggiore per la gestione degli errori,
‫che è uno dei motivi per cui personalmente
‫preferisco usare l'API che noi già creato per aggiornare
‫i dati dell'utente, e in generale per fare questo genere di cose.
‫Bene, quindi facciamo
‫esattamente questo nel prossimo video.