‫-: E ora, per concludere questa sezione,
‫usiamo di nuovo la nostra
‫API, questa volta per aggiornare anche la password dell'utente.
‫Fondamentalmente, quello che
‫faremo è far funzionare questo modulo qui.
‫Abbiamo già creato
‫la funzione di aggiornamento dei dati nell'ultima lezione e
‫ora possiamo procedere e creare
‫anche una funzione di aggiornamento della password.
‫Ma quella funzione sarebbe fondamentalmente esattamente la stessa.
‫E così, invece di farlo,
‫modificherò un po' questa funzione e
‫le consentirò di aggiornare sia i dati che la password.
‫Quindi chiamiamo questo un aggiornamento impostazioni.
‫E poi qui, quello che passeremo è, invece
‫di nome ed email,
‫un oggetto contenente tutti i dati che vogliamo aggiornare, e
‫quindi anche una stringa per il tipo.
‫Che possono quindi essere dati o password.
‫Qui avremo i dati, che di nuovo saranno
‫un oggetto di tutti i dati da aggiornare, e quindi il tipo.
‫Quindi scriviamolo qui.
‫Il tipo è
‫password o
‫dati.
‫Quindi qui, i dati che stiamo
‫inviando sono in realtà solo l'oggetto dati.
‫Perché quando chiamiamo
‫questa funzione, creeremo già un oggetto simile a questo.
‫E quindi qui, dobbiamo semplicemente utilizzare i dati.
‫E quindi, tutto ciò che dobbiamo fare è davvero questo.
‫Quindi,
‫ovviamente, quando aggiorniamo le
‫password, utilizziamo anche un altro URL.
‫Quindi usiamo un operatore ternario per
‫determinare quale URL vogliamo chiamare in base
‫al tipo di stringa.
‫Andiamo su Postman e copiamo effettivamente l'URL della
‫password di aggiornamento.
‫Qui in autenticazione,
‫abbiamo aggiornato la password dell'utente corrente.
‫E così quello richiede la password corrente, le password,
‫quindi fondamentalmente quella nuova, e poi
‫la password conferma.
‫E il percorso qui è aggiornare la mia password.
‫Simile a
‫questo, quindi, troviamo un URL qui e diciamo se il tipo
‫è uguale a password, quindi lascia che l'URL
‫sia
‫bene, tutto questo, quindi barra aggiorna la mia password.
‫E altrimenti, sarà questo qui.
‫E quindi è quello che usiamo questo parametro di tipo qui.
‫Qui, quindi, abbiamo semplicemente bisogno dell'URL, e il
‫gioco è fatto.
‫E anche qui nella stringa di successo,
‫probabilmente dovremmo quindi inserire se le password o i
‫dati sono stati aggiornati con successo.
‫E quindi fondamentalmente qui, metteremo il tipo ora.
‫Oh e convertiamolo anche in maiuscolo
‫qui, perché altrimenti il tipo sarà minuscolo, come questo.
‫Questo mi sembra già buono così.
‫Ora, solo per vedere se funziona, usiamo
‫effettivamente queste impostazioni di aggiornamento qui per
‫aggiornare i dati.
‫Quindi quello che abbiamo fatto
‫nell'ultima lezione, ma ora con questa nuova funzione.
‫Prima di tutto, ciò che dobbiamo importare qui è
‫ora la funzione di aggiornamento delle impostazioni.
‫E qui, dobbiamo chiamare le impostazioni di aggiornamento, con ovviamente
‫e oggetto ora.
‫E quindi è questo.
‫E ora la stringa di tipo che è data.
‫Proviamolo molto velocemente.
‫Aggiungiamo
‫ancora qui qualche nome
‫salvato nelle impostazioni
‫e dati aggiornati con successo.
‫Basta una ricarica veloce,
‫e in effetti tutto funziona.
‫E quindi ora tutto ciò che dobbiamo fare è
‫leggere i dati da questi tre
‫campi di input e poi passarli anche alla funzione di aggiornamento delle impostazioni.
‫Selezioniamo prima di tutto il modulo della
‫password, e quindi nel nostro modello
‫di account, questo è chiamato impostazioni utente del modulo.
‫Selezioniamo in base a quello.
‫Quindi solo duplicazione.
‫Forma le impostazioni utente e probabilmente
‫ora dovrebbe essere chiamata password.
‫Sì, in realtà chiamiamo quella password qui.
‫Questo ha un po' più senso.
‫Quindi modulo password utente, e quindi ora qui abbiamo
‫qualcosa di molto simile.
‫Copiamolo,
‫modulo password utente, e
‫ora dobbiamo semplicemente ottenere le tre password.
‫E si chiamano password corrente, password e
‫conferma password con i trattini.
‫La password corrente
‫viene qui chiamata con la password ID corrente
‫e ora viene semplicemente duplicata tre volte.
‫Confermare.
‫E qui, conferma pure.
‫E ora andiamo di nuovo molto velocemente a Postman, solo per assicurarci
‫davvero che questo sia il nome delle variabili che
‫la nostra API si aspetta.
‫Copiamoli qui per confrontarli rapidamente.
‫E così in effetti sono chiamati password correnti,
‫quindi lo stesso identico
‫nome qui, quindi password e conferma password.
‫E quindi se ora creiamo un oggetto con questi tre,
‫allora saranno esattamente i dati
‫che verranno inviati all'API, e quindi il nostro gestore sarà
‫in grado di leggere correttamente quei dati.
‫Password attuale, password e conferma password.
‫E ora
‫solo per finire, qui ovviamente deve essere la password.
‫Ora testiamolo.
‫E quindi la password corrente è test1234, e ora
‫creerò una nuova password,
‫chiamata newpassword.
‫Nuova password di nuovo, e come ho già detto, dobbiamo inserire
‫la password corrente, in modo che nel
‫caso in cui qualcuno trovi il
‫tuo computer aperto, ad esempio, non
‫possa semplicemente cambiare la tua password
‫senza conoscere quella attuale.
‫E poi ovviamente dobbiamo confermare la password,
‫giusto per non commettere errori in quella originale.
‫Quindi salviamolo ora
‫e la password viene aggiornata correttamente.
‫Grande.
‫Diamo un'occhiata al biscotto ora,
‫perché avremmo dovuto prenderne uno nuovo subito.
‫E in realtà, è proprio adesso.
‫Questo è il momento in cui sto registrando questo video,
‫quindi significa che ora siamo ancora connessi.
‫Giusto per ricordare perché ciò accade, è
‫perché qui nel controller di autenticazione, qui in corrispondenza
‫dell'aggiornamento della password, alla fine
‫l'utente ha effettivamente effettuato l'accesso, quindi
‫qui in create token
‫inviato, inviamo subito un nuovo cookie.
‫E quindi significa che siamo ancora connessi.
‫Se ora dobbiamo ricaricare questa pagina,
‫e in realtà non
‫la ricaricherò, la aprirò semplicemente in
‫una nuova scheda, perché voglio mostrarti
‫qualcos'altro, ma ciò che conta qui è che siamo ancora connessi.
‫Quello che volevo mostrarti
‫è che ora abbiamo ancora le password qui.
‫E in realtà non lo vogliamo.
‫Dopo che la chiamata API ha avuto successo,
‫dovremmo procedere ed eliminare il
‫contenuto da questi campi di input.
‫È qualcosa che dovremmo fare anche qui in questo file, perché
‫abbiamo detto che proprio qui è
‫dove gestiamo tutto ciò che riguarda l'interfaccia utente.
‫Ora, ricorda che questa funzione delle impostazioni di aggiornamento qui
‫è in realtà una funzione asincrona.
‫E così restituirà una promessa.
‫Come già saprai, a questo punto possiamo quindi attendere
‫quella promessa proprio qui.
‫E in questo caso, non è proprio per
‫salvare il risultato della promessa su qualcosa,
‫è solo aspettare che sia
‫finito, in modo che dopo possiamo fare altre cose.
‫E in questo caso, è per cancellare questi campi
‫di input che ti ho appena mostrato.
‫Ora, ovviamente, per poter usare wait,
‫dobbiamo contrassegnare questa funzione come asincrona, ma
‫è molto semplice.
‫Quindi ora tutto ciò che dobbiamo fare è selezionare nuovamente questi campi
‫e quindi cancellarli.
‫Quindi prendiamolo
‫qui.
‫E poi impostali su vuoti.
‫E questo è tutto.
‫Quindi è davvero semplice.
‫E duplichiamo questo
‫e confermiamo.
‫Quindi proviamo di nuovo.
‫E quindi ora teniamo presente che
‫la password attualmente è
‫newpassword, e ora torniamo
‫a test1234, test1234.
‫E ora in realtà i campi sono stati ripuliti.
‫Ma forse hai anche notato, proprio come me, che
‫ci è voluto un po' di tempo prima
‫che arrivassimo effettivamente il nostro avviso qui.
‫E questo perché l'impostazione di una
‫nuova password richiede un po' di tempo a causa del processo di crittografia.
‫E quindi dovremmo dare all'utente una sorta di feedback sul fatto
‫che in realtà sta accadendo qualcosa in background.
‫E in genere vedi alcuni spinner di caricamento da qualche parte sulla
‫pagina, ma manteniamolo molto semplice qui,
‫e tutto ciò che ho
‫intenzione di fare è aggiornare il testo qui non appena facciamo
‫clic su di
‫esso, e poi quando la chiamata
‫API è finita, lo reimposteremo per salvare la password.
‫Questo è un piccolo tocco molto carino che possiamo aggiungere
‫alle nostre interfacce utente, e potremmo
‫fare lo stesso qui per il modulo dati utente,
‫ma di solito è molto veloce, quindi non
‫ne abbiamo bisogno.
‫Torno di nuovo a questo modello
‫qui, perché devo selezionare questo pulsante qui.
‫Nessuno di questi qui è davvero unico,
‫quindi aggiungiamone un altro.
‫Quindi pulsante salva password.
‫E quindi facciamolo
‫proprio
‫qui, proprio all'inizio, documenta. queryselector, quello era quello sbagliato,
‫quindi queryselector. forca. valore e
‫impostalo su "Aggiornamento in corso... "E poi, una volta
‫che abbiamo finito, quindi dopo questo wait, lo
‫reimpostiamo per aggiornare, o salvare credo che
‫sia, sì,
‫in realtà è salvare la password.
‫Dagli il salvataggio e vedi se funziona, e
‫se lo fa, allora abbiamo finito.
‫E così di nuovo, ora la password è test1234,
‫e la sto reimpostando su newpassword,
‫e ora diamo un'occhiata
‫qui al nostro pulsante, ah, non ha funzionato, e so già perché.
‫E questo perché,
‫ovviamente, non possiamo usare value
‫per modificare il contenuto di alcuni elementi html.
‫Quindi, per questo, usiamo l'html interno o anche il contenuto di testo.
‫Quindi potremmo usare anche il contenuto di testo,
‫quindi facciamolo.
‫E così un'ultima volta, e così
‫ora possiamo effettivamente reimpostarlo alla password predefinita.
‫La password corrente ora è
‫newpassword, quindi test1234,
‫test1234.
‫E ora vediamo,
‫ah, e ora funziona.
‫Bellissimo.
‫E ancora, vedrai che siamo ancora connessi.
‫Perfetto.
‫E con questo, in realtà concludiamo questa sezione.
‫Congratulazioni, ancora una volta, per essere arrivato fino a
‫questo punto e per tutti questi incredibili progressi che hai fatto.
‫In realtà abbiamo quasi finito con il
‫nostro progetto,
‫ma nella prossima sezione continueremo ad aggiungere altre cose.
‫Avremo caricamenti di
‫file, creeremo alcuni modelli di email davvero
‫fantastici e inoltre, includeremo
‫persino i pagamenti in questa applicazione.
‫Ci sono ancora un sacco di fantastici contenuti in
‫vista per rendere questo progetto ancora migliore.