1 00:00:01,040 --> 00:00:03,600 ‫Jonas: Usemos ahora la página de la 2 00:00:03,600 --> 00:00:06,803 ‫cuenta de usuario para permitir que los usuarios actualicen sus datos. 3 00:00:08,410 --> 00:00:10,770 ‫Entonces, lo que vamos a hacer es permitir 4 00:00:10,770 --> 00:00:15,030 ‫que el usuario actualice tanto el nombre como la dirección de correo electrónico por ahora. 5 00:00:15,030 --> 00:00:17,060 ‫Y agregaremos la foto de usuario aquí un 6 00:00:17,060 --> 00:00:18,843 ‫poco más adelante en la siguiente sección. 7 00:00:19,826 --> 00:00:23,670 ‫Bien, ahora hay dos formas en las que podemos hacer esto. 8 00:00:23,670 --> 00:00:27,420 ‫El primero es enviar una solicitud de publicación a nuestra API tal como 9 00:00:27,420 --> 00:00:31,150 ‫lo hicimos con el formulario de inicio de sesión, ¿lo recuerdas? 10 00:00:31,150 --> 00:00:33,950 ‫Y de hecho, lo haremos en la próxima conferencia. 11 00:00:33,950 --> 00:00:36,600 ‫Pero en este, quiero mostrarles otra 12 00:00:36,600 --> 00:00:39,950 ‫forma que es una forma normal más tradicional. 13 00:00:39,950 --> 00:00:41,840 ‫Entonces, de esta manera más 14 00:00:41,840 --> 00:00:45,150 ‫tradicional, especificamos el método de publicación directamente en el formulario, 15 00:00:45,150 --> 00:00:49,710 ‫junto con la URL a la que se debe enviar la solicitud de publicación. 16 00:00:49,710 --> 00:00:52,980 ‫Entonces, básicamente, al usar este método, no necesitamos JavaScript 17 00:00:52,980 --> 00:00:55,660 ‫para realizar la solicitud, sucede automáticamente 18 00:00:55,660 --> 00:00:59,450 ‫con el formulario HTML que luego publicará los datos en 19 00:00:59,450 --> 00:01:03,580 ‫el punto final de la URL en nuestro backend que especificamos. 20 00:01:03,580 --> 00:01:06,980 ‫Ahora, personalmente, realmente no me gusta esta solución, porque 21 00:01:06,980 --> 00:01:09,270 ‫fuerza la recarga de una página, 22 00:01:09,270 --> 00:01:11,200 ‫y también requiere que creemos 23 00:01:11,200 --> 00:01:14,750 ‫otra ruta y un controlador de ruta en nuestro backend. 24 00:01:14,750 --> 00:01:16,830 ‫Y finalmente, también hace que sea 25 00:01:16,830 --> 00:01:19,120 ‫un poco más difícil manejar los errores. 26 00:01:19,120 --> 00:01:22,510 ‫Sin embargo, sigo creyendo que es muy importante que 27 00:01:22,510 --> 00:01:25,700 ‫sepa cómo trabajar con formularios de esta manera, 28 00:01:25,700 --> 00:01:27,910 ‫porque podría tener más 29 00:01:27,910 --> 00:01:30,630 ‫sentido en la aplicación que está creando. 30 00:01:30,630 --> 00:01:34,140 ‫Por ejemplo, es posible que su aplicación ni siquiera necesite una API, por 31 00:01:34,140 --> 00:01:36,200 ‫lo que, en ese caso, cuando solo está 32 00:01:36,200 --> 00:01:39,140 ‫creando un sitio web renderizado, entonces, por supuesto, no tiene sentido 33 00:01:39,140 --> 00:01:41,770 ‫enviar formularios usando una llamada API, y en su lugar, 34 00:01:41,770 --> 00:01:43,490 ‫lo hará hazlo de la 35 00:01:43,490 --> 00:01:46,020 ‫forma en que lo vamos a hacer en este video. 36 00:01:46,020 --> 00:01:48,760 ‫Muy bien, y es por eso que lo hacemos de 37 00:01:48,760 --> 00:01:50,580 ‫esta manera en esta lección 38 00:01:50,580 --> 00:01:53,320 ‫y luego usamos la API en la próxima lección. 39 00:01:53,320 --> 00:01:55,910 ‫Entonces, lo que tenemos que hacer 40 00:01:55,910 --> 00:01:57,960 ‫en nuestro formulario para enviarlo 41 00:01:57,960 --> 00:01:59,930 ‫automáticamente, sin tener que 42 00:01:59,930 --> 00:02:02,030 ‫pasar por JavaScript como mencioné 43 00:02:02,030 --> 00:02:05,240 ‫antes, por lo que básicamente publicar automáticamente los 44 00:02:05,240 --> 00:02:10,240 ‫datos en nuestro punto final, es especificar ese punto final, y lo 45 00:02:10,550 --> 00:02:15,133 ‫hacemos aquí. en el formulario, donde especificamos el atributo de acción. 46 00:02:17,380 --> 00:02:21,410 ‫Entonces, la acción, digamos que vamos a crear 47 00:02:21,410 --> 00:02:26,410 ‫un punto final llamado enviar datos de usuario, como este. 48 00:02:27,740 --> 00:02:30,433 ‫De acuerdo, y luego también especificamos 49 00:02:33,180 --> 00:02:37,400 ‫el método, que es post, de acuerdo, así que esto siempre debe 50 00:02:37,400 --> 00:02:41,310 ‫suceder en el elemento del formulario que estamos enviando, de acuerdo. 51 00:02:41,310 --> 00:02:43,963 ‫Démosle un poco más de espacio aquí, 52 00:02:45,020 --> 00:02:47,170 ‫para que sea más fácil 53 00:02:47,170 --> 00:02:49,920 ‫de entender, y todo esto aquí es nuestro 54 00:02:49,920 --> 00:02:52,500 ‫formulario, y cuando hagamos clic en 55 00:02:52,500 --> 00:02:56,260 ‫este elemento del botón, automáticamente se enviará el formulario y 56 00:02:56,260 --> 00:03:01,260 ‫se enviarán los datos. usando una solicitud de publicación a esta URL, de acuerdo. 57 00:03:01,410 --> 00:03:03,540 ‫También hay diferentes formas en las que 58 00:03:03,540 --> 00:03:06,850 ‫los datos se envían realmente, pero la predeterminada se llama codificada en 59 00:03:06,850 --> 00:03:09,540 ‫URL, y esa es la que estamos usando aquí. 60 00:03:09,540 --> 00:03:11,440 ‫Básicamente, lo que va a 61 00:03:11,440 --> 00:03:14,050 ‫hacer es codificar todos los datos que estamos enviando 62 00:03:14,050 --> 00:03:16,650 ‫en la URL como una cadena de consulta. 63 00:03:16,650 --> 00:03:19,480 ‫Bien, pero más sobre eso cuando estemos trabajando 64 00:03:19,480 --> 00:03:22,790 ‫para obtener los datos en el servidor y trabajar con ellos. 65 00:03:22,790 --> 00:03:26,880 ‫Entonces, este es el primer paso para hacer que este método funcione, 66 00:03:26,880 --> 00:03:30,220 ‫y el segundo es especificar las propiedades del nombre en 67 00:03:30,220 --> 00:03:32,423 ‫los campos que realmente queremos enviar. 68 00:03:33,310 --> 00:03:35,950 ‫Entonces, es esta entrada y esta entrada, 69 00:03:35,950 --> 00:03:38,460 ‫y sus valores se enviarán con 70 00:03:38,460 --> 00:03:41,420 ‫una solicitud basada en sus atributos de nombre. 71 00:03:41,420 --> 00:03:46,420 ‫Bien, digamos aquí, nombre es igual a nombre, bien, ese es 72 00:03:48,360 --> 00:03:53,180 ‫el nombre de usuario, y este de aquí tendrá el 73 00:03:53,180 --> 00:03:56,083 ‫nombre igual a correo electrónico. 74 00:03:57,680 --> 00:04:01,910 ‫Bien, entonces este será el nombre de este campo y el 75 00:04:01,910 --> 00:04:04,370 ‫cuerpo que recibe nuestra aplicación. 76 00:04:04,370 --> 00:04:07,840 ‫Muy bien, y ahora mismo, cuando enviemos el formulario, el 77 00:04:07,840 --> 00:04:09,750 ‫cuerpo que recibiremos solo tendrá el 78 00:04:09,750 --> 00:04:12,410 ‫nombre y el correo electrónico, porque estos son 79 00:04:12,410 --> 00:04:14,290 ‫los únicos dos campos 80 00:04:14,290 --> 00:04:16,640 ‫que realmente tienen un atributo de nombre. 81 00:04:16,640 --> 00:04:20,233 ‫Muy bien, ahora implementemos esta ruta aquí, de acuerdo, 82 00:04:21,730 --> 00:04:23,930 ‫como dije con este método, necesitamos 83 00:04:23,930 --> 00:04:25,993 ‫implementar otra ruta más. 84 00:04:28,550 --> 00:04:33,550 ‫Bien, entonces enrutador, y recuerde que esta es una solicitud de publicación. 85 00:04:36,200 --> 00:04:40,713 ‫Bien, y este estará en viewsController, y digamos 86 00:04:44,500 --> 00:04:48,467 ‫updateUserData, está bien, guarde y ahora 87 00:04:54,934 --> 00:04:57,100 ‫creemos este controlador. 88 00:04:58,440 --> 00:04:59,993 ‫Así que aquí en este archivo. 89 00:05:10,580 --> 00:05:12,310 ‫Y lo primero que quiero 90 00:05:12,310 --> 00:05:14,733 ‫hacer aquí es realmente echar un vistazo al cuerpo. cuerpo, está bien, y básicamente en este 91 00:05:19,437 --> 00:05:22,800 ‫caso, solo para mostrarte que en realidad no funcionará así. 92 00:05:22,800 --> 00:05:26,550 ‫De acuerdo, y les diré por qué después 93 00:05:26,550 --> 00:05:29,380 ‫de que lo experimentemos, de acuerdo, 94 00:05:29,380 --> 00:05:33,200 ‫así que por ahora veamos si ya estamos conectados. 95 00:05:33,200 --> 00:05:35,380 ‫Entonces, si enviar ese formulario 96 00:05:35,380 --> 00:05:38,390 ‫realmente activará este controlador aquí, de acuerdo, 97 00:05:38,390 --> 00:05:41,700 ‫también agreguemos una cadena aquí solo para asegurarnos. 98 00:05:41,700 --> 00:05:43,500 ‫Muy bien, recarguemos esto 99 00:05:47,620 --> 00:05:50,980 ‫aquí para que obtengamos nuestro nuevo formulario, y solo para 100 00:05:52,040 --> 00:05:54,020 ‫asegurarnos, echemos un vistazo a eso. 101 00:05:54,020 --> 00:05:56,020 ‫Muy bien, entonces ves 102 00:05:58,210 --> 00:06:01,080 ‫aquí, la acción y el método que agregamos, 103 00:06:01,080 --> 00:06:04,023 ‫y por supuesto también estos nombres, está bien, 104 00:06:04,870 --> 00:06:09,253 ‫entonces agreguemos un segundo nombre aquí, no lo sé, digamos Sarah, luego aquí 105 00:06:10,890 --> 00:06:13,010 ‫el correo electrónico agreguemos el apellido, 106 00:06:13,010 --> 00:06:17,473 ‫ahora recibimos este error, por favor proporcione el correo electrónico y la contraseña, 107 00:06:19,500 --> 00:06:23,460 ‫por lo que este tipo de proviene del formulario de inicio de 108 00:06:23,460 --> 00:06:25,730 ‫sesión, correcto, así que eso es extraño. 109 00:06:25,730 --> 00:06:29,063 ‫Así que echemos un vistazo a nuestro formulario aquí, 110 00:06:30,770 --> 00:06:34,660 ‫y de hecho, este formulario aquí tiene la clase de formulario. 111 00:06:34,660 --> 00:06:38,130 ‫Y creo que ese es el que usamos también en 112 00:06:38,130 --> 00:06:39,270 ‫nuestro índice. js, correcto. 113 00:06:39,270 --> 00:06:42,377 ‫Así que aquí básicamente 114 00:06:45,200 --> 00:06:48,070 ‫obtuvimos ese formulario usando la clase de formulario, y cuando 115 00:06:48,070 --> 00:06:50,830 ‫existe, y se envía, intentamos iniciar sesión, aquí mismo. 116 00:06:50,830 --> 00:06:54,990 ‫Está bien, y eso por supuesto no es correcto, por lo que deberíamos seleccionar 117 00:06:54,990 --> 00:06:58,450 ‫nuestro formulario de inicio de sesión de alguna otra manera. 118 00:06:58,450 --> 00:07:02,170 ‫Así que arreglemos eso muy rápidamente, aquí tenemos inicio de sesión, así 119 00:07:02,170 --> 00:07:03,783 ‫que simplemente agreguemos otra 120 00:07:05,310 --> 00:07:10,310 ‫clase aquí, inicio de sesión de formulario, y eso es un poco extraño porque ya tenemos 121 00:07:12,300 --> 00:07:14,970 ‫el formulario de inicio de sesión aquí, pero en 122 00:07:14,970 --> 00:07:17,460 ‫realidad no está en un elemento de formulario. 123 00:07:17,460 --> 00:07:20,040 ‫Entonces no deberíamos usar eso, así que creemos 124 00:07:20,040 --> 00:07:23,820 ‫aquí un formulario con un modificador de inicio de sesión, está bien. 125 00:07:23,820 --> 00:07:28,493 ‫Así que pongámoslo aquí, salvemos, y ahora esto ya no debería 126 00:07:31,890 --> 00:07:34,853 ‫estar sucediendo, porque ahora ya no tenemos 127 00:07:36,970 --> 00:07:39,270 ‫ese controlador de eventos adjunto 128 00:07:40,270 --> 00:07:42,010 ‫a este formulario. 129 00:07:42,010 --> 00:07:44,173 ‫Así que volvamos a cargarlo rápidamente e 130 00:07:45,120 --> 00:07:48,473 ‫intentemos esto nuevamente, y ahora verá que en realidad está haciendo algo, 131 00:07:50,953 --> 00:07:53,340 ‫pero por supuesto que nunca dejará de girar 132 00:07:53,340 --> 00:07:56,290 ‫aquí, porque en realidad no enviamos ninguna respuesta, por lo 133 00:07:56,290 --> 00:07:59,470 ‫que el ciclo de respuesta a la solicitud nunca es terminó. 134 00:07:59,470 --> 00:08:03,160 ‫Pero de todos modos, solo quería ver el cuerpo de 135 00:08:03,160 --> 00:08:04,870 ‫la solicitud, ¿recuerdas eso? 136 00:08:04,870 --> 00:08:07,680 ‫Y así, como mencioné antes, ahora es MT. 137 00:08:07,680 --> 00:08:10,853 ‫Bien, como estaba diciendo, esto realmente no funcionará 138 00:08:11,960 --> 00:08:15,100 ‫así, porque necesitamos agregar otro middleware 139 00:08:15,100 --> 00:08:18,510 ‫para analizar los datos provenientes de un formulario. 140 00:08:18,510 --> 00:08:21,540 ‫Así que hagámoslo en nuestra aplicación. js. 141 00:08:21,540 --> 00:08:23,843 ‫Pero primero, cierre algunos de estos archivos aquí. 142 00:08:24,870 --> 00:08:28,333 ‫Muy bien, este también, y ahora, vamos a la aplicación. js, agreguemos esa cláusula a nuestro analizador 143 00:08:30,880 --> 00:08:35,880 ‫corporal, así que aquí 144 00:08:37,290 --> 00:08:40,373 ‫estamos, porque en realidad es muy similar. 145 00:08:41,860 --> 00:08:45,273 ‫Así que app. use, y sigue siendo un middleware integrado 146 00:08:47,340 --> 00:08:51,423 ‫Express, así que express. urlencoded, está bien, y se llama así porque 147 00:08:52,940 --> 00:08:56,837 ‫recuerde, la forma en que el 148 00:09:00,280 --> 00:09:03,380 ‫formulario envía datos al servidor en realidad también se llama codificación de 149 00:09:03,380 --> 00:09:06,830 ‫URL, por lo que aquí, necesitamos ese middleware para analizar básicamente los datos 150 00:09:06,830 --> 00:09:09,000 ‫que provienen de un formulario codificado de URL. 151 00:09:09,000 --> 00:09:13,440 ‫Luego pasamos algunas configuraciones, y podemos decir extendido verdadero, y 152 00:09:13,440 --> 00:09:16,630 ‫eso simplemente nos permitirá pasar algunos datos 153 00:09:16,630 --> 00:09:21,630 ‫más complejos, que en este caso no son realmente necesarios, pero usémoslo 154 00:09:22,000 --> 00:09:23,720 ‫aquí, y también 155 00:09:23,720 --> 00:09:25,650 ‫podemos establecer el límite. 156 00:09:25,650 --> 00:09:29,530 ‫propiedad como hicimos en el analizador corporal, así que 157 00:09:29,530 --> 00:09:33,010 ‫aquí arriba, y digamos de nuevo 10 kilobytes. 158 00:09:33,010 --> 00:09:37,113 ‫Muy bien, y si intentamos esto de nuevo aquí, 159 00:09:38,930 --> 00:09:42,930 ‫deberíamos obtener estos datos, y estos datos. 160 00:09:42,930 --> 00:09:46,670 ‫Agreguemos nuevamente estos datos diferentes aquí, para estar seguros de 161 00:09:46,670 --> 00:09:50,370 ‫que en realidad no están obteniendo el usuario actual, sino 162 00:09:50,370 --> 00:09:53,620 ‫los datos que provienen del formulario, está bien, y 163 00:09:54,480 --> 00:09:56,090 ‫nuevamente sigue girando para 164 00:09:56,090 --> 00:09:57,593 ‫siempre aquí, o 165 00:09:59,820 --> 00:10:02,860 ‫hasta que se agota el tiempo. pero lo 166 00:10:02,860 --> 00:10:07,720 ‫que nos interesa es obtener estos nuevos datos aquí ahora en nuestro cuerpo. 167 00:10:07,720 --> 00:10:11,850 ‫Genial, eso funciona, y ahora tenemos nuestro formulario 168 00:10:11,850 --> 00:10:16,410 ‫HTML realmente conectado a este controlador de ruta aquí. 169 00:10:16,410 --> 00:10:19,920 ‫Y ahora podemos seguir adelante y actualizar al usuario en 170 00:10:19,920 --> 00:10:22,860 ‫función de estos nuevos datos, de acuerdo. 171 00:10:22,860 --> 00:10:25,490 ‫Entonces, eliminémonos de esto y luego 172 00:10:25,490 --> 00:10:29,010 ‫actualice al usuario, ya que ya sabemos cómo hacerlo. 173 00:10:29,010 --> 00:10:31,610 ‫Ahora, en primer lugar, tendremos que importar el 174 00:10:31,610 --> 00:10:33,900 ‫modelo de usuario, así que hagámoslo. 175 00:10:33,900 --> 00:10:37,873 ‫Usuario, aquí con una pequeña 176 00:10:39,160 --> 00:10:44,160 ‫U, está bien, y ahora digamos que 177 00:10:46,930 --> 00:10:51,910 ‫el usuario es igual a esperar Usuario. findByIdAndUpdate. 178 00:10:51,910 --> 00:10:55,013 ‫Bien, entonces, por supuesto, 179 00:11:00,780 --> 00:11:04,850 ‫como siempre, marque este como asíncrono y detecte todos los errores. 180 00:11:04,850 --> 00:11:07,473 ‫Bien, entonces, ¿cuál es la identificación que estamos buscando? 181 00:11:12,920 --> 00:11:17,890 ‫Y espero que a estas alturas sepas dónde 182 00:11:17,890 --> 00:11:21,120 ‫está, será a pedido. usuario. identificación. 183 00:11:21,120 --> 00:11:25,640 ‫Ah, y una 184 00:11:25,640 --> 00:11:27,980 ‫cosa importante que tenemos que hacer, que 185 00:11:27,980 --> 00:11:30,490 ‫todavía no hice, es proteger esta ruta 186 00:11:30,490 --> 00:11:32,600 ‫aquí también, está bien, porque solo 187 00:11:32,600 --> 00:11:35,430 ‫entonces tenemos a este usuario en la solicitud, 188 00:11:35,430 --> 00:11:38,810 ‫correcto, y por supuesto Además, solo queremos poder acceder a 189 00:11:38,810 --> 00:11:41,050 ‫esta ruta si estamos conectados, de 190 00:11:41,050 --> 00:11:44,470 ‫lo contrario, cualquiera podría simplemente continuar y actualizar algunos datos. 191 00:11:44,470 --> 00:11:46,683 ‫Entonces, aquí en la 192 00:11:48,210 --> 00:11:50,880 ‫ruta, por supuesto, agreguemos authController. proteger. 193 00:11:50,880 --> 00:11:53,300 ‫Muy bien, 194 00:11:58,450 --> 00:12:03,390 ‫ese es el ID, entonces necesitamos los nuevos datos, 195 00:12:03,390 --> 00:12:08,343 ‫y digamos que queremos un nombre igual a request. cuerpo. nombre y el correo electrónico configurado 196 00:12:08,343 --> 00:12:13,320 ‫para solicitar. cuerpo. Email. 197 00:12:18,710 --> 00:12:23,233 ‫Y recuerde que estos son los nombres 198 00:12:25,010 --> 00:12:27,960 ‫de los campos, porque les dimos el atributo de nombre en el formulario HTML. 199 00:12:27,960 --> 00:12:31,630 ‫Recuerde, ahora antes, cuando actualizamos algunos datos, solíamos pasar la 200 00:12:31,630 --> 00:12:35,470 ‫solicitud completa aquí al método de actualización, correcto, pero en 201 00:12:35,470 --> 00:12:37,970 ‫este caso, realmente solo queremos actualizar 202 00:12:37,970 --> 00:12:41,020 ‫el nombre y el correo electrónico, y así, 203 00:12:41,020 --> 00:12:44,520 ‫estamos seguro de que cualquier otra cosa básicamente está siendo 204 00:12:44,520 --> 00:12:47,210 ‫eliminada del cuerpo, porque algún hacker podría, 205 00:12:47,210 --> 00:12:50,710 ‫por supuesto, seguir adelante y agregar algunos campos adicionales 206 00:12:50,710 --> 00:12:53,040 ‫al HTML y luego, por ejemplo, 207 00:12:53,040 --> 00:12:55,770 ‫enviar datos como contraseñas y cosas así, 208 00:12:55,770 --> 00:12:58,330 ‫y por supuesto que lo hacemos. No 209 00:12:58,330 --> 00:13:01,020 ‫quiero almacenar esos datos maliciosos en nuestra 210 00:13:01,020 --> 00:13:03,070 ‫base de datos, ¿verdad? 211 00:13:03,070 --> 00:13:06,720 ‫Además, las contraseñas se manejan una vez más 212 00:13:06,720 --> 00:13:10,700 ‫por separado, porque recuerde que nunca nunca podremos actualizar 213 00:13:10,700 --> 00:13:13,250 ‫las contraseñas usando findByIdAndUpdate. 214 00:13:13,250 --> 00:13:17,120 ‫Nuevamente, porque eso no ejecutará el middleware seguro 215 00:13:17,120 --> 00:13:20,580 ‫que se encargará de cifrar nuestras contraseñas. 216 00:13:20,580 --> 00:13:23,860 ‫Bien, y por eso tenemos una ruta separada para 217 00:13:23,860 --> 00:13:26,560 ‫eso en nuestra API, y también tenemos 218 00:13:26,560 --> 00:13:29,950 ‫una ruta separada para eso en nuestra interfaz de usuario. 219 00:13:29,950 --> 00:13:32,090 ‫Y, por lo general, eso es lo que 220 00:13:32,090 --> 00:13:34,550 ‫siempre ve en las aplicaciones web cuando desea actualizar 221 00:13:34,550 --> 00:13:36,610 ‫sus contraseñas, generalmente tiene un formulario separado 222 00:13:36,610 --> 00:13:38,430 ‫solo para eso, está bien. 223 00:13:38,430 --> 00:13:41,493 ‫De todos modos, ahora continuemos aquí con nuestras 224 00:13:42,830 --> 00:13:45,373 ‫opciones, donde decimos que queremos 225 00:13:46,640 --> 00:13:50,063 ‫obtener lo nuevo, entonces básicamente el documento actualizado como 226 00:13:51,140 --> 00:13:54,463 ‫resultado, y también que queremos ejecutar los validadores. 227 00:13:55,350 --> 00:13:59,053 ‫Así que esto es como lo hicimos antes en nuestra API. 228 00:14:00,500 --> 00:14:03,193 ‫Genial, así que llamémoslo updatedUser. 229 00:14:05,410 --> 00:14:08,613 ‫Bien, entonces, ¿qué queremos hacer ahora? 230 00:14:12,800 --> 00:14:16,070 ‫Bueno, después de enviar los datos en nuestro sitio web, 231 00:14:16,070 --> 00:14:18,763 ‫básicamente lo que queremos es simplemente volver a 232 00:14:19,790 --> 00:14:22,350 ‫esta página aquí, pero por supuesto, con 233 00:14:22,350 --> 00:14:24,760 ‫los datos actualizados aquí, está bien. 234 00:14:24,760 --> 00:14:27,660 ‫Así que eso es fácil, todo lo que tendremos que hacer 235 00:14:27,660 --> 00:14:30,170 ‫es básicamente renderizar la página de la cuenta nuevamente. 236 00:14:30,170 --> 00:14:32,873 ‫Y eso es similar a este, vamos a 237 00:14:34,160 --> 00:14:36,340 ‫copiarlo, está bien, pero ahora hay 238 00:14:36,340 --> 00:14:39,900 ‫una diferencia importante, porque ahora, en realidad también necesitamos pasar 239 00:14:39,900 --> 00:14:41,910 ‫el usuario, entonces el 240 00:14:41,910 --> 00:14:44,120 ‫usuario actualizado, porque de lo contrario, 241 00:14:44,120 --> 00:14:47,600 ‫el usuario que la plantilla que va a usar, es 242 00:14:47,600 --> 00:14:49,920 ‫el que viene del middleware de protección, 243 00:14:49,920 --> 00:14:52,190 ‫recuerde, por lo que no va 244 00:14:52,190 --> 00:14:54,330 ‫a ser el usuario actualizado. 245 00:14:54,330 --> 00:14:57,223 ‫Correcto, por lo que debemos pasar user is updatedUser. 246 00:14:58,720 --> 00:15:03,720 ‫Muy bien, y eso debería ser suficiente. 247 00:15:06,050 --> 00:15:08,933 ‫Entonces, si ahora recargamos esto, o en realidad si ahora 248 00:15:10,450 --> 00:15:14,943 ‫lo guardamos aquí, entonces verá que en realidad volvimos a la misma página exacta y los 249 00:15:16,000 --> 00:15:17,890 ‫datos siguen siendo los mismos. 250 00:15:17,890 --> 00:15:20,970 ‫Así que demostrémoslo, vayamos a otra 251 00:15:20,970 --> 00:15:25,000 ‫página y luego regresemos a la página de configuración. 252 00:15:25,000 --> 00:15:27,450 ‫Y así, esto demuestra que los datos ahora 253 00:15:27,450 --> 00:15:29,500 ‫se han actualizado de manera efectiva. 254 00:15:29,500 --> 00:15:31,603 ‫Entonces, si ahora cerramos la sesión, 255 00:15:33,090 --> 00:15:35,440 ‫intentemos iniciar sesión con este nuevo correo electrónico. 256 00:15:35,440 --> 00:15:37,423 ‫Así que quería cerrar la sesión, está bien, y ahora volver a iniciar sesión. 257 00:15:39,530 --> 00:15:44,530 ‫Y ahora, vamos a usar este nuevo correo electrónico y, por supuesto, todavía la 258 00:15:44,950 --> 00:15:47,493 ‫contraseña anterior, test1234, y de hecho, esta 259 00:15:48,780 --> 00:15:51,130 ‫es ahora la nueva dirección de 260 00:15:53,810 --> 00:15:56,500 ‫correo electrónico que debemos usar para iniciar sesión. 261 00:15:56,500 --> 00:15:59,670 ‫Ahora veamos qué sucede cuando pasamos algunos 262 00:15:59,670 --> 00:16:01,120 ‫datos incorrectos aquí. 263 00:16:01,120 --> 00:16:04,860 ‫Por ejemplo, Google Chrome nos permite enviar una dirección de correo 264 00:16:04,860 --> 00:16:07,120 ‫electrónico como esta, pero por supuesto, 265 00:16:07,120 --> 00:16:09,530 ‫nuestro modelo Mongoose no permite un correo 266 00:16:09,530 --> 00:16:11,550 ‫electrónico con este formato. 267 00:16:11,550 --> 00:16:14,250 ‫Entonces, ahora deberíamos obtener un error, y de 268 00:16:14,250 --> 00:16:15,950 ‫hecho, obtenemos este error, 269 00:16:17,620 --> 00:16:20,540 ‫proporcione un correo electrónico válido, pero esa es una 270 00:16:20,540 --> 00:16:23,690 ‫experiencia de usuario terrible, ¿verdad? Así que solo estábamos 271 00:16:23,690 --> 00:16:26,530 ‫enviando nuestros datos, y luego, de repente, pasamos 272 00:16:26,530 --> 00:16:28,470 ‫a una página completamente nueva. 273 00:16:28,470 --> 00:16:31,740 ‫Y, de hecho, vemos que también 274 00:16:31,740 --> 00:16:36,740 ‫llegamos a esta nueva URL, a la que enviamos los datos. 275 00:16:36,850 --> 00:16:39,420 ‫Y sí, eso es un poco terrible, y 276 00:16:39,420 --> 00:16:41,470 ‫como decía al principio, esta 277 00:16:41,470 --> 00:16:43,930 ‫forma de hacer las cosas es en realidad 278 00:16:43,930 --> 00:16:46,420 ‫un poco peor para manejar errores, que es 279 00:16:46,420 --> 00:16:48,960 ‫una de las razones por las que personalmente 280 00:16:48,960 --> 00:16:51,840 ‫prefiero usar la API que usamos. ya creado para actualizar 281 00:16:51,840 --> 00:16:55,640 ‫los datos del usuario, y en general para hacer este tipo de cosas. 282 00:16:55,640 --> 00:16:57,740 ‫Muy bien, hagamos 283 00:16:57,740 --> 00:17:00,720 ‫exactamente eso en el siguiente video.