1
00:00:01,030 --> 00:00:03,420
‫-: Y ahora, para terminar esta

2
00:00:03,420 --> 00:00:05,630
‫sección, usemos nuevamente nuestra API,

3
00:00:05,630 --> 00:00:08,803
‫esta vez para actualizar también la contraseña del usuario.

4
00:00:10,750 --> 00:00:12,170
‫Básicamente, lo que vamos

5
00:00:12,170 --> 00:00:14,463
‫a hacer es hacer que este formulario funcione.

6
00:00:17,060 --> 00:00:18,530
‫Ya creamos la función

7
00:00:18,530 --> 00:00:21,460
‫de actualización de datos en la última lección, y

8
00:00:21,460 --> 00:00:23,440
‫ahora podemos seguir adelante y crear

9
00:00:23,440 --> 00:00:25,760
‫una función de actualización de contraseña también.

10
00:00:25,760 --> 00:00:29,670
‫Pero esa función básicamente se vería exactamente igual.

11
00:00:29,670 --> 00:00:31,500
‫Entonces, en lugar de hacer

12
00:00:31,500 --> 00:00:33,560
‫eso, cambiaré un poco esta función

13
00:00:33,560 --> 00:00:37,003
‫y permitiré que actualice tanto los datos como la contraseña.

14
00:00:38,030 --> 00:00:39,980
‫Así que llamemos a esta configuración de actualización.

15
00:00:45,330 --> 00:00:47,780
‫Y luego aquí, lo que pasaremos es, en lugar

16
00:00:47,780 --> 00:00:49,480
‫de nombre y correo electrónico,

17
00:00:49,480 --> 00:00:52,800
‫un objeto que contiene todos los datos que queremos actualizar, y

18
00:00:52,800 --> 00:00:55,010
‫luego también una cadena para el tipo.

19
00:00:55,010 --> 00:00:57,773
‫Que pueden ser datos o contraseña.

20
00:01:00,760 --> 00:01:03,800
‫Aquí tendremos datos, que nuevamente serán objeto

21
00:01:03,800 --> 00:01:07,593
‫de todos los datos a actualizar, y luego el tipo.

22
00:01:08,840 --> 00:01:10,093
‫Así que escribamos eso aquí.

23
00:01:11,680 --> 00:01:12,830
‫El tipo es

24
00:01:16,800 --> 00:01:17,940
‫contraseña o

25
00:01:19,400 --> 00:01:20,233
‫datos.

26
00:01:21,340 --> 00:01:23,890
‫Entonces, aquí, los datos que estamos enviando

27
00:01:23,890 --> 00:01:26,543
‫son en realidad solo el objeto de datos.

28
00:01:27,670 --> 00:01:29,050
‫Porque cuando llamemos

29
00:01:29,050 --> 00:01:32,233
‫a esta función, ya crearemos un objeto similar a este.

30
00:01:33,440 --> 00:01:36,760
‫Entonces, aquí, simplemente necesitamos usar datos.

31
00:01:36,760 --> 00:01:40,023
‫Entonces, todo lo que tenemos que hacer es realmente esto.

32
00:01:42,910 --> 00:01:43,790
‫Luego,

33
00:01:43,790 --> 00:01:45,520
‫por supuesto, cuando estamos

34
00:01:45,520 --> 00:01:48,150
‫actualizando las contraseñas, también usamos otra URL.

35
00:01:48,150 --> 00:01:50,660
‫Entonces, usemos un operador ternario para

36
00:01:50,660 --> 00:01:53,414
‫determinar a qué URL queremos llamar según

37
00:01:53,414 --> 00:01:55,483
‫el tipo de cadena.

38
00:01:58,180 --> 00:02:01,040
‫Vayamos a Postman y copiemos la URL de

39
00:02:01,040 --> 00:02:02,597
‫la contraseña de actualización.

40
00:02:05,820 --> 00:02:07,600
‫Aquí abajo, en autenticación,

41
00:02:07,600 --> 00:02:09,883
‫hemos actualizado la contraseña de usuario actual.

42
00:02:10,791 --> 00:02:14,560
‫Y para que uno requiera la contraseña actual, las

43
00:02:14,560 --> 00:02:17,060
‫contraseñas, básicamente la nueva, y luego

44
00:02:17,060 --> 00:02:19,050
‫la contraseña confirme.

45
00:02:19,050 --> 00:02:22,623
‫Y la ruta aquí es actualizar mi contraseña.

46
00:02:24,950 --> 00:02:26,063
‫Similar a este,

47
00:02:28,900 --> 00:02:33,900
‫y entonces, busquemos una URL aquí y digamos si el tipo

48
00:02:34,380 --> 00:02:38,403
‫es igual a la contraseña, luego dejemos que la

49
00:02:40,260 --> 00:02:41,230
‫URL

50
00:02:43,350 --> 00:02:47,533
‫esté bien, todo esto, y luego actualice mi contraseña.

51
00:02:50,470 --> 00:02:52,993
‫Y si no, será este de aquí.

52
00:02:58,430 --> 00:03:02,023
‫Y eso es lo que usamos este parámetro de tipo aquí.

53
00:03:03,730 --> 00:03:06,773
‫Aquí, entonces, simplemente necesitamos la URL, y

54
00:03:08,370 --> 00:03:10,010
‫eso es todo.

55
00:03:10,010 --> 00:03:12,620
‫Y también aquí, en la cadena

56
00:03:12,620 --> 00:03:15,980
‫de éxito, probablemente deberíamos indicar si las contraseñas o

57
00:03:15,980 --> 00:03:18,273
‫los datos se actualizaron correctamente.

58
00:03:22,720 --> 00:03:26,703
‫Y básicamente aquí, vamos a poner el tipo ahora.

59
00:03:28,390 --> 00:03:31,210
‫Ah, y conviértalo también a mayúsculas aquí,

60
00:03:31,210 --> 00:03:35,063
‫porque de lo contrario el tipo será en minúsculas, así.

61
00:03:40,147 --> 00:03:43,430
‫Esto ya me parece bien así.

62
00:03:43,430 --> 00:03:46,080
‫Ahora, solo para ver si funciona,

63
00:03:46,080 --> 00:03:48,860
‫usemos esta configuración de actualización aquí para

64
00:03:48,860 --> 00:03:50,410
‫actualizar los datos.

65
00:03:50,410 --> 00:03:52,090
‫Entonces, lo que hicimos en

66
00:03:52,090 --> 00:03:54,443
‫la última conferencia, pero ahora con esta nueva función.

67
00:03:55,320 --> 00:03:57,930
‫En primer lugar, lo que necesitamos importar aquí ahora

68
00:03:57,930 --> 00:04:00,233
‫es la función de configuración de actualización.

69
00:04:01,750 --> 00:04:05,650
‫Y aquí, necesitamos llamar a la configuración de actualización, por

70
00:04:05,650 --> 00:04:07,363
‫supuesto, y objetar ahora.

71
00:04:08,270 --> 00:04:09,603
‫Y ese es este.

72
00:04:10,650 --> 00:04:12,733
‫Y ahora el tipo de cadena que es data.

73
00:04:15,200 --> 00:04:16,683
‫Probemos eso muy rápido.

74
00:04:18,210 --> 00:04:19,510
‫Agreguemos nuevamente

75
00:04:20,365 --> 00:04:22,270
‫aquí algún nombre guardado en

76
00:04:22,270 --> 00:04:23,820
‫la configuración y

77
00:04:23,820 --> 00:04:26,003
‫los datos se actualizaron correctamente.

78
00:04:27,320 --> 00:04:28,980
‫Solo una recarga rápida

79
00:04:28,980 --> 00:04:30,993
‫y, de hecho, todo está funcionando.

80
00:04:32,690 --> 00:04:35,470
‫Y ahora todo lo que tenemos que hacer es

81
00:04:35,470 --> 00:04:37,460
‫leer los datos de estos tres

82
00:04:37,460 --> 00:04:41,163
‫campos de entrada y luego pasarlos a la función de configuración de actualización.

83
00:04:44,440 --> 00:04:47,570
‫Primero que nada, seleccionemos el formulario de contraseña,

84
00:04:47,570 --> 00:04:50,533
‫y de nuevo en nuestra plantilla

85
00:04:51,500 --> 00:04:55,493
‫de cuenta, este se llama configuración de usuario del formulario.

86
00:04:55,493 --> 00:04:57,883
‫Seleccionemos basándonos en eso.

87
00:05:01,240 --> 00:05:02,783
‫Así que simplemente duplicando.

88
00:05:05,260 --> 00:05:08,290
‫Forme la configuración del usuario, y probablemente

89
00:05:08,290 --> 00:05:11,013
‫eso debería llamarse contraseña ahora.

90
00:05:11,910 --> 00:05:14,160
‫Sí, llamemos a esa contraseña aquí.

91
00:05:15,650 --> 00:05:17,343
‫Eso tiene un poco más de sentido.

92
00:05:20,070 --> 00:05:25,070
‫Entonces, formulario de contraseña de usuario, y ahora aquí

93
00:05:27,410 --> 00:05:30,263
‫tenemos algo muy similar.

94
00:05:31,960 --> 00:05:32,913
‫Copiemos el

95
00:05:35,770 --> 00:05:37,473
‫formulario de contraseña de

96
00:05:39,400 --> 00:05:42,893
‫usuario, y ahora simplemente necesitamos obtener las tres contraseñas.

97
00:05:44,370 --> 00:05:47,530
‫Y se denominan contraseña actual, contraseña y contraseña

98
00:05:47,530 --> 00:05:49,963
‫que se confirman con los guiones.

99
00:05:57,510 --> 00:05:59,440
‫La contraseña actual

100
00:05:59,440 --> 00:06:03,424
‫se llama aquí con la contraseña de ID actual,

101
00:06:03,424 --> 00:06:06,483
‫y ahora solo se duplica tres veces.

102
00:06:11,450 --> 00:06:12,810
‫Confirmar.

103
00:06:12,810 --> 00:06:15,313
‫Y aquí, confirma también.

104
00:06:16,447 --> 00:06:20,270
‫Y ahora vayamos muy rápidamente a Postman nuevamente, solo para asegurarnos

105
00:06:20,270 --> 00:06:23,400
‫realmente de que estos son los nombres de variables

106
00:06:23,400 --> 00:06:25,300
‫que espera nuestra API.

107
00:06:25,300 --> 00:06:27,973
‫Copiemos estos aquí para compararlos rápidamente.

108
00:06:32,910 --> 00:06:36,010
‫Y, de hecho, se denominan contraseña actual, por lo

109
00:06:36,010 --> 00:06:37,820
‫que aquí exactamente el

110
00:06:37,820 --> 00:06:40,720
‫mismo nombre, luego la contraseña y la contraseña confirman.

111
00:06:40,720 --> 00:06:44,170
‫Entonces, si ahora creamos un objeto con estos tres, esos

112
00:06:44,170 --> 00:06:46,080
‫serán exactamente los datos

113
00:06:46,080 --> 00:06:49,220
‫que se enviarán a la API, por lo que

114
00:06:49,220 --> 00:06:51,783
‫nuestro controlador podrá leer esos datos correctamente.

115
00:06:52,879 --> 00:06:57,879
‫Contraseña actual, contraseña y confirmación de contraseña.

116
00:07:03,620 --> 00:07:04,900
‫Y ahora solo

117
00:07:04,900 --> 00:07:08,593
‫para terminar, aquí, por supuesto, tiene que ser la contraseña.

118
00:07:10,070 --> 00:07:12,573
‫Probemos ahora eso.

119
00:07:14,120 --> 00:07:18,490
‫Entonces, la contraseña actual es test1234, y ahora

120
00:07:18,490 --> 00:07:20,280
‫crearé una nueva contraseña,

121
00:07:20,280 --> 00:07:21,833
‫llamada newpassword.

122
00:07:26,382 --> 00:07:29,530
‫Nueva contraseña nuevamente, y como ya mencioné, debemos ingresar la

123
00:07:29,530 --> 00:07:31,740
‫contraseña actual, de modo que, en caso

124
00:07:31,740 --> 00:07:33,690
‫de que alguien encuentre su computadora

125
00:07:33,690 --> 00:07:35,400
‫abierta, por ejemplo, no pueda

126
00:07:35,400 --> 00:07:37,250
‫simplemente cambiar su contraseña sin

127
00:07:37,250 --> 00:07:38,923
‫conocer la actual.

128
00:07:39,796 --> 00:07:42,500
‫Y luego, por supuesto, debemos confirmar la contraseña,

129
00:07:42,500 --> 00:07:45,483
‫solo para no cometer ningún error en la original.

130
00:07:46,890 --> 00:07:48,520
‫Así que guardémoslo

131
00:07:48,520 --> 00:07:51,528
‫ahora y la contraseña se actualizó correctamente.

132
00:07:51,528 --> 00:07:53,349
‫Excelente.

133
00:07:53,349 --> 00:07:56,360
‫De hecho, echemos un vistazo a la

134
00:07:56,360 --> 00:07:59,873
‫cookie ahora, porque deberíamos haber obtenido una nueva de inmediato.

135
00:08:02,840 --> 00:08:06,495
‫Y de hecho, eso es exactamente ahora.

136
00:08:06,495 --> 00:08:10,330
‫Ese es el momento en que estoy grabando este video,

137
00:08:10,330 --> 00:08:13,470
‫y eso significa que todavía estamos conectados.

138
00:08:13,470 --> 00:08:16,180
‫Solo para recordar por qué sucede esto, es

139
00:08:16,180 --> 00:08:19,320
‫porque aquí en el controlador de autenticación, aquí en la

140
00:08:19,320 --> 00:08:21,360
‫actualización de contraseña, al final realmente

141
00:08:21,360 --> 00:08:23,810
‫iniciamos sesión como usuario, por lo que

142
00:08:23,810 --> 00:08:25,780
‫aquí, en crear token enviado,

143
00:08:25,780 --> 00:08:27,910
‫enviamos una nueva cookie de inmediato.

144
00:08:27,910 --> 00:08:31,393
‫Y eso significa que todavía estamos conectados.

145
00:08:33,744 --> 00:08:35,950
‫Si ahora vamos a recargar esta página,

146
00:08:35,950 --> 00:08:37,910
‫y en realidad no

147
00:08:37,910 --> 00:08:39,950
‫la recargaré, simplemente la abriré en

148
00:08:39,950 --> 00:08:41,990
‫una nueva pestaña, porque quiero mostrarte

149
00:08:41,990 --> 00:08:45,773
‫algo más, pero lo que importa aquí es que todavía estamos conectados.

150
00:08:48,710 --> 00:08:50,260
‫Lo que quería mostrarles

151
00:08:50,260 --> 00:08:52,740
‫es que ahora todavía tenemos las contraseñas aquí.

152
00:08:52,740 --> 00:08:54,930
‫Y en realidad no queremos eso.

153
00:08:54,930 --> 00:08:57,210
‫Una vez que la llamada a la API

154
00:08:57,210 --> 00:08:59,040
‫fue exitosa, deberíamos continuar y eliminar

155
00:08:59,040 --> 00:09:00,943
‫el contenido de estos campos de entrada.

156
00:09:03,670 --> 00:09:07,520
‫Eso es algo que deberíamos hacer también aquí en este archivo,

157
00:09:07,520 --> 00:09:10,090
‫porque dijimos que aquí es donde manejamos

158
00:09:10,090 --> 00:09:12,990
‫todo lo relacionado con la interfaz de usuario.

159
00:09:12,990 --> 00:09:15,960
‫Ahora, recuerde que esta función de configuración de actualización aquí

160
00:09:15,960 --> 00:09:17,883
‫es en realidad una función asincrónica.

161
00:09:21,030 --> 00:09:23,281
‫Y entonces devolverá una promesa.

162
00:09:23,281 --> 00:09:26,848
‫Como ya sabe, en este punto podemos esperar

163
00:09:26,848 --> 00:09:29,003
‫esa promesa aquí mismo.

164
00:09:31,180 --> 00:09:33,608
‫Y en este caso, no es realmente para guardar

165
00:09:33,608 --> 00:09:35,860
‫el resultado de la promesa en nada, es

166
00:09:35,860 --> 00:09:37,870
‫solo esperar hasta que esté terminado,

167
00:09:37,870 --> 00:09:40,460
‫para que después de eso, podamos hacer algunas otras cosas.

168
00:09:40,460 --> 00:09:42,830
‫Y en este caso, es para borrar estos campos

169
00:09:42,830 --> 00:09:44,783
‫de entrada que les acabo de mostrar.

170
00:09:45,950 --> 00:09:49,520
‫Ahora, por supuesto, para poder usar await,

171
00:09:49,520 --> 00:09:53,660
‫necesitamos marcar esta función aquí como asíncrona, pero eso

172
00:09:53,660 --> 00:09:55,540
‫es muy fácil.

173
00:09:55,540 --> 00:09:59,160
‫Así que ahora todo lo que tenemos que hacer es seleccionar estos campos

174
00:09:59,160 --> 00:10:00,443
‫nuevamente y luego borrarlos.

175
00:10:01,700 --> 00:10:02,980
‫Así que tomemos esto

176
00:10:04,610 --> 00:10:05,563
‫de aquí.

177
00:10:07,672 --> 00:10:09,022
‫Y luego configúrelos para que se vacíen.

178
00:10:10,300 --> 00:10:11,340
‫Y eso es.

179
00:10:11,340 --> 00:10:12,540
‫Entonces eso es realmente simple.

180
00:10:14,010 --> 00:10:15,673
‫Y simplemente dupliquemos esto

181
00:10:17,010 --> 00:10:18,613
‫y confirmemos.

182
00:10:20,760 --> 00:10:22,843
‫Intentémoslo de nuevo.

183
00:10:29,154 --> 00:10:31,750
‫Y ahora, tengamos en cuenta que

184
00:10:31,750 --> 00:10:33,503
‫la contraseña es actualmente

185
00:10:35,480 --> 00:10:37,223
‫newpassword, y ahora volvamos

186
00:10:39,883 --> 00:10:41,403
‫a test1234, test1234.

187
00:10:45,052 --> 00:10:47,490
‫Y ahora, de hecho, los campos están borrados.

188
00:10:47,490 --> 00:10:49,960
‫Pero tal vez también notó, al igual

189
00:10:49,960 --> 00:10:52,250
‫que yo, que tomó bastante tiempo hasta

190
00:10:52,250 --> 00:10:54,300
‫que recibimos nuestra alerta aquí.

191
00:10:54,300 --> 00:10:56,130
‫Y eso se debe a

192
00:10:56,130 --> 00:10:59,820
‫que establecer una nueva contraseña establece algún tiempo debido al proceso de cifrado.

193
00:10:59,820 --> 00:11:02,555
‫Entonces, deberíamos darle al usuario algún tipo de retroalimentación de que

194
00:11:02,555 --> 00:11:05,010
‫en realidad está sucediendo algo en segundo plano.

195
00:11:05,010 --> 00:11:09,133
‫Y, por lo general, verá algunos elementos giratorios de carga en algún lugar

196
00:11:09,133 --> 00:11:11,220
‫de la página, pero hagámoslo muy

197
00:11:11,220 --> 00:11:13,170
‫simple aquí, y todo lo que

198
00:11:13,170 --> 00:11:16,770
‫voy a hacer es actualizar el texto aquí tan pronto como hagamos

199
00:11:16,770 --> 00:11:18,270
‫clic en él,

200
00:11:18,270 --> 00:11:20,370
‫y luego, cuando finalice la llamada a

201
00:11:20,370 --> 00:11:23,427
‫la API, lo volveremos a configurar para guardar la contraseña.

202
00:11:23,427 --> 00:11:27,200
‫Ese es un pequeño toque muy agradable que podemos agregar a

203
00:11:27,200 --> 00:11:29,710
‫nuestras interfaces de usuario, y podríamos hacer

204
00:11:29,710 --> 00:11:33,180
‫lo mismo aquí para el formulario de datos de usuario,

205
00:11:33,180 --> 00:11:36,260
‫pero ese suele ser muy rápido, por lo

206
00:11:36,260 --> 00:11:38,073
‫que no lo necesitamos.

207
00:11:38,073 --> 00:11:41,020
‫Voy a volver a esta plantilla aquí

208
00:11:41,020 --> 00:11:44,010
‫de nuevo, porque necesito seleccionar este botón aquí.

209
00:11:44,010 --> 00:11:46,570
‫Ninguno de ellos aquí es realmente único,

210
00:11:46,570 --> 00:11:48,473
‫así que agreguemos otro.

211
00:11:51,150 --> 00:11:55,783
‫Entonces el botón guardar contraseña.

212
00:12:02,530 --> 00:12:04,490
‫Y hagámoslo aquí

213
00:12:04,490 --> 00:12:05,693
‫mismo,

214
00:12:10,070 --> 00:12:15,070
‫desde el principio, document. queryselector, ese era el incorrecto,

215
00:12:16,351 --> 00:12:19,700
‫entonces queryselector. forlcass. valor

216
00:12:27,120 --> 00:12:32,080
‫y configúrelo en "Actualizando ... "Y luego, una vez

217
00:12:32,080 --> 00:12:36,763
‫que terminamos, así que después de esta espera,

218
00:12:38,570 --> 00:12:42,943
‫lo volvemos a configurar para actualizar, o guardar,

219
00:12:44,780 --> 00:12:47,210
‫creo que es,

220
00:12:47,210 --> 00:12:50,833
‫sí, en realidad es guardar contraseña.

221
00:12:52,523 --> 00:12:55,200
‫Déjelo guardar, y vea si funciona, y

222
00:12:55,200 --> 00:12:57,663
‫si funciona, entonces hemos terminado.

223
00:12:59,550 --> 00:13:03,260
‫Y nuevamente, ahora la contraseña es test1234, y la

224
00:13:03,260 --> 00:13:05,803
‫estoy estableciendo de nuevo en newpassword,

225
00:13:10,160 --> 00:13:12,413
‫y ahora echemos un vistazo

226
00:13:13,483 --> 00:13:18,483
‫a nuestro botón, ah, eso no funcionó, y ya sé por qué.

227
00:13:19,590 --> 00:13:21,000
‫Y eso se debe

228
00:13:21,000 --> 00:13:22,910
‫a que, por supuesto, no podemos

229
00:13:22,910 --> 00:13:26,210
‫usar el valor para cambiar el contenido de algunos elementos html.

230
00:13:26,210 --> 00:13:30,650
‫Entonces, para eso, usamos html interno o también contenido de texto.

231
00:13:30,650 --> 00:13:33,120
‫Así que también podríamos usar contenido de texto,

232
00:13:33,120 --> 00:13:34,133
‫así que hagámoslo.

233
00:13:38,230 --> 00:13:41,950
‫Y así, una última vez, y ahora

234
00:13:41,950 --> 00:13:46,180
‫podemos volver a configurarla con la contraseña predeterminada.

235
00:13:46,180 --> 00:13:50,160
‫La contraseña actual es ahora

236
00:13:50,160 --> 00:13:53,245
‫newpassword, y luego test1234,

237
00:13:53,245 --> 00:13:54,633
‫test1234.

238
00:13:55,700 --> 00:13:57,300
‫Y ahora veamos,

239
00:13:57,300 --> 00:13:59,040
‫ah, y ahora funciona.

240
00:13:59,040 --> 00:14:00,390
‫Hermosa.

241
00:14:00,390 --> 00:14:04,230
‫Y nuevamente, verá que todavía estamos conectados.

242
00:14:04,230 --> 00:14:05,610
‫Perfecto.

243
00:14:05,610 --> 00:14:09,070
‫Y con esto, realmente concluimos esta sección.

244
00:14:09,070 --> 00:14:12,550
‫Felicitaciones, una vez más, por llegar tan lejos

245
00:14:12,550 --> 00:14:16,320
‫y por todo este increíble progreso que ha estado haciendo.

246
00:14:16,320 --> 00:14:19,010
‫De hecho, casi hemos terminado con nuestro

247
00:14:19,010 --> 00:14:20,280
‫proyecto, pero

248
00:14:20,280 --> 00:14:23,460
‫en la siguiente sección, continuaremos agregando algunas cosas más.

249
00:14:23,460 --> 00:14:25,140
‫Tendremos carga de

250
00:14:25,140 --> 00:14:27,930
‫archivos, crearemos algunas plantillas de correo

251
00:14:27,930 --> 00:14:29,760
‫electrónico realmente interesantes y

252
00:14:29,760 --> 00:14:32,320
‫también incluiremos pagos en esta aplicación.

253
00:14:32,320 --> 00:14:34,730
‫Todavía hay un montón de contenido increíble por delante para

254
00:14:34,730 --> 00:14:36,663
‫hacer que este proyecto sea aún mejor.