﻿1
00:00:01,030 --> 00:00:03,420
‫-: E ora, per concludere questa sezione,

2
00:00:03,420 --> 00:00:05,630
‫usiamo di nuovo la nostra

3
00:00:05,630 --> 00:00:08,803
‫API, questa volta per aggiornare anche la password dell'utente.

4
00:00:10,750 --> 00:00:12,170
‫Fondamentalmente, quello che

5
00:00:12,170 --> 00:00:14,463
‫faremo è far funzionare questo modulo qui.

6
00:00:17,060 --> 00:00:18,530
‫Abbiamo già creato

7
00:00:18,530 --> 00:00:21,460
‫la funzione di aggiornamento dei dati nell'ultima lezione e

8
00:00:21,460 --> 00:00:23,440
‫ora possiamo procedere e creare

9
00:00:23,440 --> 00:00:25,760
‫anche una funzione di aggiornamento della password.

10
00:00:25,760 --> 00:00:29,670
‫Ma quella funzione sarebbe fondamentalmente esattamente la stessa.

11
00:00:29,670 --> 00:00:31,500
‫E così, invece di farlo,

12
00:00:31,500 --> 00:00:33,560
‫modificherò un po' questa funzione e

13
00:00:33,560 --> 00:00:37,003
‫le consentirò di aggiornare sia i dati che la password.

14
00:00:38,030 --> 00:00:39,980
‫Quindi chiamiamo questo un aggiornamento impostazioni.

15
00:00:45,330 --> 00:00:47,780
‫E poi qui, quello che passeremo è, invece

16
00:00:47,780 --> 00:00:49,480
‫di nome ed email,

17
00:00:49,480 --> 00:00:52,800
‫un oggetto contenente tutti i dati che vogliamo aggiornare, e

18
00:00:52,800 --> 00:00:55,010
‫quindi anche una stringa per il tipo.

19
00:00:55,010 --> 00:00:57,773
‫Che possono quindi essere dati o password.

20
00:01:00,760 --> 00:01:03,800
‫Qui avremo i dati, che di nuovo saranno

21
00:01:03,800 --> 00:01:07,593
‫un oggetto di tutti i dati da aggiornare, e quindi il tipo.

22
00:01:08,840 --> 00:01:10,093
‫Quindi scriviamolo qui.

23
00:01:11,680 --> 00:01:12,830
‫Il tipo è

24
00:01:16,800 --> 00:01:17,940
‫password o

25
00:01:19,400 --> 00:01:20,233
‫dati.

26
00:01:21,340 --> 00:01:23,890
‫Quindi qui, i dati che stiamo

27
00:01:23,890 --> 00:01:26,543
‫inviando sono in realtà solo l'oggetto dati.

28
00:01:27,670 --> 00:01:29,050
‫Perché quando chiamiamo

29
00:01:29,050 --> 00:01:32,233
‫questa funzione, creeremo già un oggetto simile a questo.

30
00:01:33,440 --> 00:01:36,760
‫E quindi qui, dobbiamo semplicemente utilizzare i dati.

31
00:01:36,760 --> 00:01:40,023
‫E quindi, tutto ciò che dobbiamo fare è davvero questo.

32
00:01:42,910 --> 00:01:43,790
‫Quindi,

33
00:01:43,790 --> 00:01:45,520
‫ovviamente, quando aggiorniamo le

34
00:01:45,520 --> 00:01:48,150
‫password, utilizziamo anche un altro URL.

35
00:01:48,150 --> 00:01:50,660
‫Quindi usiamo un operatore ternario per

36
00:01:50,660 --> 00:01:53,414
‫determinare quale URL vogliamo chiamare in base

37
00:01:53,414 --> 00:01:55,483
‫al tipo di stringa.

38
00:01:58,180 --> 00:02:01,040
‫Andiamo su Postman e copiamo effettivamente l'URL della

39
00:02:01,040 --> 00:02:02,597
‫password di aggiornamento.

40
00:02:05,820 --> 00:02:07,600
‫Qui in autenticazione,

41
00:02:07,600 --> 00:02:09,883
‫abbiamo aggiornato la password dell'utente corrente.

42
00:02:10,791 --> 00:02:14,560
‫E così quello richiede la password corrente, le password,

43
00:02:14,560 --> 00:02:17,060
‫quindi fondamentalmente quella nuova, e poi

44
00:02:17,060 --> 00:02:19,050
‫la password conferma.

45
00:02:19,050 --> 00:02:22,623
‫E il percorso qui è aggiornare la mia password.

46
00:02:24,950 --> 00:02:26,063
‫Simile a

47
00:02:28,900 --> 00:02:33,900
‫questo, quindi, troviamo un URL qui e diciamo se il tipo

48
00:02:34,380 --> 00:02:38,403
‫è uguale a password, quindi lascia che l'URL

49
00:02:40,260 --> 00:02:41,230
‫sia

50
00:02:43,350 --> 00:02:47,533
‫bene, tutto questo, quindi barra aggiorna la mia password.

51
00:02:50,470 --> 00:02:52,993
‫E altrimenti, sarà questo qui.

52
00:02:58,430 --> 00:03:02,023
‫E quindi è quello che usiamo questo parametro di tipo qui.

53
00:03:03,730 --> 00:03:06,773
‫Qui, quindi, abbiamo semplicemente bisogno dell'URL, e il

54
00:03:08,370 --> 00:03:10,010
‫gioco è fatto.

55
00:03:10,010 --> 00:03:12,620
‫E anche qui nella stringa di successo,

56
00:03:12,620 --> 00:03:15,980
‫probabilmente dovremmo quindi inserire se le password o i

57
00:03:15,980 --> 00:03:18,273
‫dati sono stati aggiornati con successo.

58
00:03:22,720 --> 00:03:26,703
‫E quindi fondamentalmente qui, metteremo il tipo ora.

59
00:03:28,390 --> 00:03:31,210
‫Oh e convertiamolo anche in maiuscolo

60
00:03:31,210 --> 00:03:35,063
‫qui, perché altrimenti il tipo sarà minuscolo, come questo.

61
00:03:40,147 --> 00:03:43,430
‫Questo mi sembra già buono così.

62
00:03:43,430 --> 00:03:46,080
‫Ora, solo per vedere se funziona, usiamo

63
00:03:46,080 --> 00:03:48,860
‫effettivamente queste impostazioni di aggiornamento qui per

64
00:03:48,860 --> 00:03:50,410
‫aggiornare i dati.

65
00:03:50,410 --> 00:03:52,090
‫Quindi quello che abbiamo fatto

66
00:03:52,090 --> 00:03:54,443
‫nell'ultima lezione, ma ora con questa nuova funzione.

67
00:03:55,320 --> 00:03:57,930
‫Prima di tutto, ciò che dobbiamo importare qui è

68
00:03:57,930 --> 00:04:00,233
‫ora la funzione di aggiornamento delle impostazioni.

69
00:04:01,750 --> 00:04:05,650
‫E qui, dobbiamo chiamare le impostazioni di aggiornamento, con ovviamente

70
00:04:05,650 --> 00:04:07,363
‫e oggetto ora.

71
00:04:08,270 --> 00:04:09,603
‫E quindi è questo.

72
00:04:10,650 --> 00:04:12,733
‫E ora la stringa di tipo che è data.

73
00:04:15,200 --> 00:04:16,683
‫Proviamolo molto velocemente.

74
00:04:18,210 --> 00:04:19,510
‫Aggiungiamo

75
00:04:20,365 --> 00:04:22,270
‫ancora qui qualche nome

76
00:04:22,270 --> 00:04:23,820
‫salvato nelle impostazioni

77
00:04:23,820 --> 00:04:26,003
‫e dati aggiornati con successo.

78
00:04:27,320 --> 00:04:28,980
‫Basta una ricarica veloce,

79
00:04:28,980 --> 00:04:30,993
‫e in effetti tutto funziona.

80
00:04:32,690 --> 00:04:35,470
‫E quindi ora tutto ciò che dobbiamo fare è

81
00:04:35,470 --> 00:04:37,460
‫leggere i dati da questi tre

82
00:04:37,460 --> 00:04:41,163
‫campi di input e poi passarli anche alla funzione di aggiornamento delle impostazioni.

83
00:04:44,440 --> 00:04:47,570
‫Selezioniamo prima di tutto il modulo della

84
00:04:47,570 --> 00:04:50,533
‫password, e quindi nel nostro modello

85
00:04:51,500 --> 00:04:55,493
‫di account, questo è chiamato impostazioni utente del modulo.

86
00:04:55,493 --> 00:04:57,883
‫Selezioniamo in base a quello.

87
00:05:01,240 --> 00:05:02,783
‫Quindi solo duplicazione.

88
00:05:05,260 --> 00:05:08,290
‫Forma le impostazioni utente e probabilmente

89
00:05:08,290 --> 00:05:11,013
‫ora dovrebbe essere chiamata password.

90
00:05:11,910 --> 00:05:14,160
‫Sì, in realtà chiamiamo quella password qui.

91
00:05:15,650 --> 00:05:17,343
‫Questo ha un po' più senso.

92
00:05:20,070 --> 00:05:25,070
‫Quindi modulo password utente, e quindi ora qui abbiamo

93
00:05:27,410 --> 00:05:30,263
‫qualcosa di molto simile.

94
00:05:31,960 --> 00:05:32,913
‫Copiamolo,

95
00:05:35,770 --> 00:05:37,473
‫modulo password utente, e

96
00:05:39,400 --> 00:05:42,893
‫ora dobbiamo semplicemente ottenere le tre password.

97
00:05:44,370 --> 00:05:47,530
‫E si chiamano password corrente, password e

98
00:05:47,530 --> 00:05:49,963
‫conferma password con i trattini.

99
00:05:57,510 --> 00:05:59,440
‫La password corrente

100
00:05:59,440 --> 00:06:03,424
‫viene qui chiamata con la password ID corrente

101
00:06:03,424 --> 00:06:06,483
‫e ora viene semplicemente duplicata tre volte.

102
00:06:11,450 --> 00:06:12,810
‫Confermare.

103
00:06:12,810 --> 00:06:15,313
‫E qui, conferma pure.

104
00:06:16,447 --> 00:06:20,270
‫E ora andiamo di nuovo molto velocemente a Postman, solo per assicurarci

105
00:06:20,270 --> 00:06:23,400
‫davvero che questo sia il nome delle variabili che

106
00:06:23,400 --> 00:06:25,300
‫la nostra API si aspetta.

107
00:06:25,300 --> 00:06:27,973
‫Copiamoli qui per confrontarli rapidamente.

108
00:06:32,910 --> 00:06:36,010
‫E così in effetti sono chiamati password correnti,

109
00:06:36,010 --> 00:06:37,820
‫quindi lo stesso identico

110
00:06:37,820 --> 00:06:40,720
‫nome qui, quindi password e conferma password.

111
00:06:40,720 --> 00:06:44,170
‫E quindi se ora creiamo un oggetto con questi tre,

112
00:06:44,170 --> 00:06:46,080
‫allora saranno esattamente i dati

113
00:06:46,080 --> 00:06:49,220
‫che verranno inviati all'API, e quindi il nostro gestore sarà

114
00:06:49,220 --> 00:06:51,783
‫in grado di leggere correttamente quei dati.

115
00:06:52,879 --> 00:06:57,879
‫Password attuale, password e conferma password.

116
00:07:03,620 --> 00:07:04,900
‫E ora

117
00:07:04,900 --> 00:07:08,593
‫solo per finire, qui ovviamente deve essere la password.

118
00:07:10,070 --> 00:07:12,573
‫Ora testiamolo.

119
00:07:14,120 --> 00:07:18,490
‫E quindi la password corrente è test1234, e ora

120
00:07:18,490 --> 00:07:20,280
‫creerò una nuova password,

121
00:07:20,280 --> 00:07:21,833
‫chiamata newpassword.

122
00:07:26,382 --> 00:07:29,530
‫Nuova password di nuovo, e come ho già detto, dobbiamo inserire

123
00:07:29,530 --> 00:07:31,740
‫la password corrente, in modo che nel

124
00:07:31,740 --> 00:07:33,690
‫caso in cui qualcuno trovi il

125
00:07:33,690 --> 00:07:35,400
‫tuo computer aperto, ad esempio, non

126
00:07:35,400 --> 00:07:37,250
‫possa semplicemente cambiare la tua password

127
00:07:37,250 --> 00:07:38,923
‫senza conoscere quella attuale.

128
00:07:39,796 --> 00:07:42,500
‫E poi ovviamente dobbiamo confermare la password,

129
00:07:42,500 --> 00:07:45,483
‫giusto per non commettere errori in quella originale.

130
00:07:46,890 --> 00:07:48,520
‫Quindi salviamolo ora

131
00:07:48,520 --> 00:07:51,528
‫e la password viene aggiornata correttamente.

132
00:07:51,528 --> 00:07:53,349
‫Grande.

133
00:07:53,349 --> 00:07:56,360
‫Diamo un'occhiata al biscotto ora,

134
00:07:56,360 --> 00:07:59,873
‫perché avremmo dovuto prenderne uno nuovo subito.

135
00:08:02,840 --> 00:08:06,495
‫E in realtà, è proprio adesso.

136
00:08:06,495 --> 00:08:10,330
‫Questo è il momento in cui sto registrando questo video,

137
00:08:10,330 --> 00:08:13,470
‫quindi significa che ora siamo ancora connessi.

138
00:08:13,470 --> 00:08:16,180
‫Giusto per ricordare perché ciò accade, è

139
00:08:16,180 --> 00:08:19,320
‫perché qui nel controller di autenticazione, qui in corrispondenza

140
00:08:19,320 --> 00:08:21,360
‫dell'aggiornamento della password, alla fine

141
00:08:21,360 --> 00:08:23,810
‫l'utente ha effettivamente effettuato l'accesso, quindi

142
00:08:23,810 --> 00:08:25,780
‫qui in create token

143
00:08:25,780 --> 00:08:27,910
‫inviato, inviamo subito un nuovo cookie.

144
00:08:27,910 --> 00:08:31,393
‫E quindi significa che siamo ancora connessi.

145
00:08:33,744 --> 00:08:35,950
‫Se ora dobbiamo ricaricare questa pagina,

146
00:08:35,950 --> 00:08:37,910
‫e in realtà non

147
00:08:37,910 --> 00:08:39,950
‫la ricaricherò, la aprirò semplicemente in

148
00:08:39,950 --> 00:08:41,990
‫una nuova scheda, perché voglio mostrarti

149
00:08:41,990 --> 00:08:45,773
‫qualcos'altro, ma ciò che conta qui è che siamo ancora connessi.

150
00:08:48,710 --> 00:08:50,260
‫Quello che volevo mostrarti

151
00:08:50,260 --> 00:08:52,740
‫è che ora abbiamo ancora le password qui.

152
00:08:52,740 --> 00:08:54,930
‫E in realtà non lo vogliamo.

153
00:08:54,930 --> 00:08:57,210
‫Dopo che la chiamata API ha avuto successo,

154
00:08:57,210 --> 00:08:59,040
‫dovremmo procedere ed eliminare il

155
00:08:59,040 --> 00:09:00,943
‫contenuto da questi campi di input.

156
00:09:03,670 --> 00:09:07,520
‫È qualcosa che dovremmo fare anche qui in questo file, perché

157
00:09:07,520 --> 00:09:10,090
‫abbiamo detto che proprio qui è

158
00:09:10,090 --> 00:09:12,990
‫dove gestiamo tutto ciò che riguarda l'interfaccia utente.

159
00:09:12,990 --> 00:09:15,960
‫Ora, ricorda che questa funzione delle impostazioni di aggiornamento qui

160
00:09:15,960 --> 00:09:17,883
‫è in realtà una funzione asincrona.

161
00:09:21,030 --> 00:09:23,281
‫E così restituirà una promessa.

162
00:09:23,281 --> 00:09:26,848
‫Come già saprai, a questo punto possiamo quindi attendere

163
00:09:26,848 --> 00:09:29,003
‫quella promessa proprio qui.

164
00:09:31,180 --> 00:09:33,608
‫E in questo caso, non è proprio per

165
00:09:33,608 --> 00:09:35,860
‫salvare il risultato della promessa su qualcosa,

166
00:09:35,860 --> 00:09:37,870
‫è solo aspettare che sia

167
00:09:37,870 --> 00:09:40,460
‫finito, in modo che dopo possiamo fare altre cose.

168
00:09:40,460 --> 00:09:42,830
‫E in questo caso, è per cancellare questi campi

169
00:09:42,830 --> 00:09:44,783
‫di input che ti ho appena mostrato.

170
00:09:45,950 --> 00:09:49,520
‫Ora, ovviamente, per poter usare wait,

171
00:09:49,520 --> 00:09:53,660
‫dobbiamo contrassegnare questa funzione come asincrona, ma

172
00:09:53,660 --> 00:09:55,540
‫è molto semplice.

173
00:09:55,540 --> 00:09:59,160
‫Quindi ora tutto ciò che dobbiamo fare è selezionare nuovamente questi campi

174
00:09:59,160 --> 00:10:00,443
‫e quindi cancellarli.

175
00:10:01,700 --> 00:10:02,980
‫Quindi prendiamolo

176
00:10:04,610 --> 00:10:05,563
‫qui.

177
00:10:07,672 --> 00:10:09,022
‫E poi impostali su vuoti.

178
00:10:10,300 --> 00:10:11,340
‫E questo è tutto.

179
00:10:11,340 --> 00:10:12,540
‫Quindi è davvero semplice.

180
00:10:14,010 --> 00:10:15,673
‫E duplichiamo questo

181
00:10:17,010 --> 00:10:18,613
‫e confermiamo.

182
00:10:20,760 --> 00:10:22,843
‫Quindi proviamo di nuovo.

183
00:10:29,154 --> 00:10:31,750
‫E quindi ora teniamo presente che

184
00:10:31,750 --> 00:10:33,503
‫la password attualmente è

185
00:10:35,480 --> 00:10:37,223
‫newpassword, e ora torniamo

186
00:10:39,883 --> 00:10:41,403
‫a test1234, test1234.

187
00:10:45,052 --> 00:10:47,490
‫E ora in realtà i campi sono stati ripuliti.

188
00:10:47,490 --> 00:10:49,960
‫Ma forse hai anche notato, proprio come me, che

189
00:10:49,960 --> 00:10:52,250
‫ci è voluto un po' di tempo prima

190
00:10:52,250 --> 00:10:54,300
‫che arrivassimo effettivamente il nostro avviso qui.

191
00:10:54,300 --> 00:10:56,130
‫E questo perché l'impostazione di una

192
00:10:56,130 --> 00:10:59,820
‫nuova password richiede un po' di tempo a causa del processo di crittografia.

193
00:10:59,820 --> 00:11:02,555
‫E quindi dovremmo dare all'utente una sorta di feedback sul fatto

194
00:11:02,555 --> 00:11:05,010
‫che in realtà sta accadendo qualcosa in background.

195
00:11:05,010 --> 00:11:09,133
‫E in genere vedi alcuni spinner di caricamento da qualche parte sulla

196
00:11:09,133 --> 00:11:11,220
‫pagina, ma manteniamolo molto semplice qui,

197
00:11:11,220 --> 00:11:13,170
‫e tutto ciò che ho

198
00:11:13,170 --> 00:11:16,770
‫intenzione di fare è aggiornare il testo qui non appena facciamo

199
00:11:16,770 --> 00:11:18,270
‫clic su di

200
00:11:18,270 --> 00:11:20,370
‫esso, e poi quando la chiamata

201
00:11:20,370 --> 00:11:23,427
‫API è finita, lo reimposteremo per salvare la password.

202
00:11:23,427 --> 00:11:27,200
‫Questo è un piccolo tocco molto carino che possiamo aggiungere

203
00:11:27,200 --> 00:11:29,710
‫alle nostre interfacce utente, e potremmo

204
00:11:29,710 --> 00:11:33,180
‫fare lo stesso qui per il modulo dati utente,

205
00:11:33,180 --> 00:11:36,260
‫ma di solito è molto veloce, quindi non

206
00:11:36,260 --> 00:11:38,073
‫ne abbiamo bisogno.

207
00:11:38,073 --> 00:11:41,020
‫Torno di nuovo a questo modello

208
00:11:41,020 --> 00:11:44,010
‫qui, perché devo selezionare questo pulsante qui.

209
00:11:44,010 --> 00:11:46,570
‫Nessuno di questi qui è davvero unico,

210
00:11:46,570 --> 00:11:48,473
‫quindi aggiungiamone un altro.

211
00:11:51,150 --> 00:11:55,783
‫Quindi pulsante salva password.

212
00:12:02,530 --> 00:12:04,490
‫E quindi facciamolo

213
00:12:04,490 --> 00:12:05,693
‫proprio

214
00:12:10,070 --> 00:12:15,070
‫qui, proprio all'inizio, documenta. queryselector, quello era quello sbagliato,

215
00:12:16,351 --> 00:12:19,700
‫quindi queryselector. forca. valore e

216
00:12:27,120 --> 00:12:32,080
‫impostalo su "Aggiornamento in corso... "E poi, una volta

217
00:12:32,080 --> 00:12:36,763
‫che abbiamo finito, quindi dopo questo wait, lo

218
00:12:38,570 --> 00:12:42,943
‫reimpostiamo per aggiornare, o salvare credo che

219
00:12:44,780 --> 00:12:47,210
‫sia, sì,

220
00:12:47,210 --> 00:12:50,833
‫in realtà è salvare la password.

221
00:12:52,523 --> 00:12:55,200
‫Dagli il salvataggio e vedi se funziona, e

222
00:12:55,200 --> 00:12:57,663
‫se lo fa, allora abbiamo finito.

223
00:12:59,550 --> 00:13:03,260
‫E così di nuovo, ora la password è test1234,

224
00:13:03,260 --> 00:13:05,803
‫e la sto reimpostando su newpassword,

225
00:13:10,160 --> 00:13:12,413
‫e ora diamo un'occhiata

226
00:13:13,483 --> 00:13:18,483
‫qui al nostro pulsante, ah, non ha funzionato, e so già perché.

227
00:13:19,590 --> 00:13:21,000
‫E questo perché,

228
00:13:21,000 --> 00:13:22,910
‫ovviamente, non possiamo usare value

229
00:13:22,910 --> 00:13:26,210
‫per modificare il contenuto di alcuni elementi html.

230
00:13:26,210 --> 00:13:30,650
‫Quindi, per questo, usiamo l'html interno o anche il contenuto di testo.

231
00:13:30,650 --> 00:13:33,120
‫Quindi potremmo usare anche il contenuto di testo,

232
00:13:33,120 --> 00:13:34,133
‫quindi facciamolo.

233
00:13:38,230 --> 00:13:41,950
‫E così un'ultima volta, e così

234
00:13:41,950 --> 00:13:46,180
‫ora possiamo effettivamente reimpostarlo alla password predefinita.

235
00:13:46,180 --> 00:13:50,160
‫La password corrente ora è

236
00:13:50,160 --> 00:13:53,245
‫newpassword, quindi test1234,

237
00:13:53,245 --> 00:13:54,633
‫test1234.

238
00:13:55,700 --> 00:13:57,300
‫E ora vediamo,

239
00:13:57,300 --> 00:13:59,040
‫ah, e ora funziona.

240
00:13:59,040 --> 00:14:00,390
‫Bellissimo.

241
00:14:00,390 --> 00:14:04,230
‫E ancora, vedrai che siamo ancora connessi.

242
00:14:04,230 --> 00:14:05,610
‫Perfetto.

243
00:14:05,610 --> 00:14:09,070
‫E con questo, in realtà concludiamo questa sezione.

244
00:14:09,070 --> 00:14:12,550
‫Congratulazioni, ancora una volta, per essere arrivato fino a

245
00:14:12,550 --> 00:14:16,320
‫questo punto e per tutti questi incredibili progressi che hai fatto.

246
00:14:16,320 --> 00:14:19,010
‫In realtà abbiamo quasi finito con il

247
00:14:19,010 --> 00:14:20,280
‫nostro progetto,

248
00:14:20,280 --> 00:14:23,460
‫ma nella prossima sezione continueremo ad aggiungere altre cose.

249
00:14:23,460 --> 00:14:25,140
‫Avremo caricamenti di

250
00:14:25,140 --> 00:14:27,930
‫file, creeremo alcuni modelli di email davvero

251
00:14:27,930 --> 00:14:29,760
‫fantastici e inoltre, includeremo

252
00:14:29,760 --> 00:14:32,320
‫persino i pagamenti in questa applicazione.

253
00:14:32,320 --> 00:14:34,730
‫Ci sono ancora un sacco di fantastici contenuti in

254
00:14:34,730 --> 00:14:36,663
‫vista per rendere questo progetto ancora migliore.

