‫-: Y ahora, para terminar esta
‫sección, usemos nuevamente nuestra API,
‫esta vez para actualizar también la contraseña del usuario.
‫Básicamente, lo que vamos
‫a hacer es hacer que este formulario funcione.
‫Ya creamos la función
‫de actualización de datos en la última lección, y
‫ahora podemos seguir adelante y crear
‫una función de actualización de contraseña también.
‫Pero esa función básicamente se vería exactamente igual.
‫Entonces, en lugar de hacer
‫eso, cambiaré un poco esta función
‫y permitiré que actualice tanto los datos como la contraseña.
‫Así que llamemos a esta configuración de actualización.
‫Y luego aquí, lo que pasaremos es, en lugar
‫de nombre y correo electrónico,
‫un objeto que contiene todos los datos que queremos actualizar, y
‫luego también una cadena para el tipo.
‫Que pueden ser datos o contraseña.
‫Aquí tendremos datos, que nuevamente serán objeto
‫de todos los datos a actualizar, y luego el tipo.
‫Así que escribamos eso aquí.
‫El tipo es
‫contraseña o
‫datos.
‫Entonces, aquí, los datos que estamos enviando
‫son en realidad solo el objeto de datos.
‫Porque cuando llamemos
‫a esta función, ya crearemos un objeto similar a este.
‫Entonces, aquí, simplemente necesitamos usar datos.
‫Entonces, todo lo que tenemos que hacer es realmente esto.
‫Luego,
‫por supuesto, cuando estamos
‫actualizando las contraseñas, también usamos otra URL.
‫Entonces, usemos un operador ternario para
‫determinar a qué URL queremos llamar según
‫el tipo de cadena.
‫Vayamos a Postman y copiemos la URL de
‫la contraseña de actualización.
‫Aquí abajo, en autenticación,
‫hemos actualizado la contraseña de usuario actual.
‫Y para que uno requiera la contraseña actual, las
‫contraseñas, básicamente la nueva, y luego
‫la contraseña confirme.
‫Y la ruta aquí es actualizar mi contraseña.
‫Similar a este,
‫y entonces, busquemos una URL aquí y digamos si el tipo
‫es igual a la contraseña, luego dejemos que la
‫URL
‫esté bien, todo esto, y luego actualice mi contraseña.
‫Y si no, será este de aquí.
‫Y eso es lo que usamos este parámetro de tipo aquí.
‫Aquí, entonces, simplemente necesitamos la URL, y
‫eso es todo.
‫Y también aquí, en la cadena
‫de éxito, probablemente deberíamos indicar si las contraseñas o
‫los datos se actualizaron correctamente.
‫Y básicamente aquí, vamos a poner el tipo ahora.
‫Ah, y conviértalo también a mayúsculas aquí,
‫porque de lo contrario el tipo será en minúsculas, así.
‫Esto ya me parece bien así.
‫Ahora, solo para ver si funciona,
‫usemos esta configuración de actualización aquí para
‫actualizar los datos.
‫Entonces, lo que hicimos en
‫la última conferencia, pero ahora con esta nueva función.
‫En primer lugar, lo que necesitamos importar aquí ahora
‫es la función de configuración de actualización.
‫Y aquí, necesitamos llamar a la configuración de actualización, por
‫supuesto, y objetar ahora.
‫Y ese es este.
‫Y ahora el tipo de cadena que es data.
‫Probemos eso muy rápido.
‫Agreguemos nuevamente
‫aquí algún nombre guardado en
‫la configuración y
‫los datos se actualizaron correctamente.
‫Solo una recarga rápida
‫y, de hecho, todo está funcionando.
‫Y ahora todo lo que tenemos que hacer es
‫leer los datos de estos tres
‫campos de entrada y luego pasarlos a la función de configuración de actualización.
‫Primero que nada, seleccionemos el formulario de contraseña,
‫y de nuevo en nuestra plantilla
‫de cuenta, este se llama configuración de usuario del formulario.
‫Seleccionemos basándonos en eso.
‫Así que simplemente duplicando.
‫Forme la configuración del usuario, y probablemente
‫eso debería llamarse contraseña ahora.
‫Sí, llamemos a esa contraseña aquí.
‫Eso tiene un poco más de sentido.
‫Entonces, formulario de contraseña de usuario, y ahora aquí
‫tenemos algo muy similar.
‫Copiemos el
‫formulario de contraseña de
‫usuario, y ahora simplemente necesitamos obtener las tres contraseñas.
‫Y se denominan contraseña actual, contraseña y contraseña
‫que se confirman con los guiones.
‫La contraseña actual
‫se llama aquí con la contraseña de ID actual,
‫y ahora solo se duplica tres veces.
‫Confirmar.
‫Y aquí, confirma también.
‫Y ahora vayamos muy rápidamente a Postman nuevamente, solo para asegurarnos
‫realmente de que estos son los nombres de variables
‫que espera nuestra API.
‫Copiemos estos aquí para compararlos rápidamente.
‫Y, de hecho, se denominan contraseña actual, por lo
‫que aquí exactamente el
‫mismo nombre, luego la contraseña y la contraseña confirman.
‫Entonces, si ahora creamos un objeto con estos tres, esos
‫serán exactamente los datos
‫que se enviarán a la API, por lo que
‫nuestro controlador podrá leer esos datos correctamente.
‫Contraseña actual, contraseña y confirmación de contraseña.
‫Y ahora solo
‫para terminar, aquí, por supuesto, tiene que ser la contraseña.
‫Probemos ahora eso.
‫Entonces, la contraseña actual es test1234, y ahora
‫crearé una nueva contraseña,
‫llamada newpassword.
‫Nueva contraseña nuevamente, y como ya mencioné, debemos ingresar la
‫contraseña actual, de modo que, en caso
‫de que alguien encuentre su computadora
‫abierta, por ejemplo, no pueda
‫simplemente cambiar su contraseña sin
‫conocer la actual.
‫Y luego, por supuesto, debemos confirmar la contraseña,
‫solo para no cometer ningún error en la original.
‫Así que guardémoslo
‫ahora y la contraseña se actualizó correctamente.
‫Excelente.
‫De hecho, echemos un vistazo a la
‫cookie ahora, porque deberíamos haber obtenido una nueva de inmediato.
‫Y de hecho, eso es exactamente ahora.
‫Ese es el momento en que estoy grabando este video,
‫y eso significa que todavía estamos conectados.
‫Solo para recordar por qué sucede esto, es
‫porque aquí en el controlador de autenticación, aquí en la
‫actualización de contraseña, al final realmente
‫iniciamos sesión como usuario, por lo que
‫aquí, en crear token enviado,
‫enviamos una nueva cookie de inmediato.
‫Y eso significa que todavía estamos conectados.
‫Si ahora vamos a recargar esta página,
‫y en realidad no
‫la recargaré, simplemente la abriré en
‫una nueva pestaña, porque quiero mostrarte
‫algo más, pero lo que importa aquí es que todavía estamos conectados.
‫Lo que quería mostrarles
‫es que ahora todavía tenemos las contraseñas aquí.
‫Y en realidad no queremos eso.
‫Una vez que la llamada a la API
‫fue exitosa, deberíamos continuar y eliminar
‫el contenido de estos campos de entrada.
‫Eso es algo que deberíamos hacer también aquí en este archivo,
‫porque dijimos que aquí es donde manejamos
‫todo lo relacionado con la interfaz de usuario.
‫Ahora, recuerde que esta función de configuración de actualización aquí
‫es en realidad una función asincrónica.
‫Y entonces devolverá una promesa.
‫Como ya sabe, en este punto podemos esperar
‫esa promesa aquí mismo.
‫Y en este caso, no es realmente para guardar
‫el resultado de la promesa en nada, es
‫solo esperar hasta que esté terminado,
‫para que después de eso, podamos hacer algunas otras cosas.
‫Y en este caso, es para borrar estos campos
‫de entrada que les acabo de mostrar.
‫Ahora, por supuesto, para poder usar await,
‫necesitamos marcar esta función aquí como asíncrona, pero eso
‫es muy fácil.
‫Así que ahora todo lo que tenemos que hacer es seleccionar estos campos
‫nuevamente y luego borrarlos.
‫Así que tomemos esto
‫de aquí.
‫Y luego configúrelos para que se vacíen.
‫Y eso es.
‫Entonces eso es realmente simple.
‫Y simplemente dupliquemos esto
‫y confirmemos.
‫Intentémoslo de nuevo.
‫Y ahora, tengamos en cuenta que
‫la contraseña es actualmente
‫newpassword, y ahora volvamos
‫a test1234, test1234.
‫Y ahora, de hecho, los campos están borrados.
‫Pero tal vez también notó, al igual
‫que yo, que tomó bastante tiempo hasta
‫que recibimos nuestra alerta aquí.
‫Y eso se debe a
‫que establecer una nueva contraseña establece algún tiempo debido al proceso de cifrado.
‫Entonces, deberíamos darle al usuario algún tipo de retroalimentación de que
‫en realidad está sucediendo algo en segundo plano.
‫Y, por lo general, verá algunos elementos giratorios de carga en algún lugar
‫de la página, pero hagámoslo muy
‫simple aquí, y todo lo que
‫voy a hacer es actualizar el texto aquí tan pronto como hagamos
‫clic en él,
‫y luego, cuando finalice la llamada a
‫la API, lo volveremos a configurar para guardar la contraseña.
‫Ese es un pequeño toque muy agradable que podemos agregar a
‫nuestras interfaces de usuario, y podríamos hacer
‫lo mismo aquí para el formulario de datos de usuario,
‫pero ese suele ser muy rápido, por lo
‫que no lo necesitamos.
‫Voy a volver a esta plantilla aquí
‫de nuevo, porque necesito seleccionar este botón aquí.
‫Ninguno de ellos aquí es realmente único,
‫así que agreguemos otro.
‫Entonces el botón guardar contraseña.
‫Y hagámoslo aquí
‫mismo,
‫desde el principio, document. queryselector, ese era el incorrecto,
‫entonces queryselector. forlcass. valor
‫y configúrelo en "Actualizando ... "Y luego, una vez
‫que terminamos, así que después de esta espera,
‫lo volvemos a configurar para actualizar, o guardar,
‫creo que es,
‫sí, en realidad es guardar contraseña.
‫Déjelo guardar, y vea si funciona, y
‫si funciona, entonces hemos terminado.
‫Y nuevamente, ahora la contraseña es test1234, y la
‫estoy estableciendo de nuevo en newpassword,
‫y ahora echemos un vistazo
‫a nuestro botón, ah, eso no funcionó, y ya sé por qué.
‫Y eso se debe
‫a que, por supuesto, no podemos
‫usar el valor para cambiar el contenido de algunos elementos html.
‫Entonces, para eso, usamos html interno o también contenido de texto.
‫Así que también podríamos usar contenido de texto,
‫así que hagámoslo.
‫Y así, una última vez, y ahora
‫podemos volver a configurarla con la contraseña predeterminada.
‫La contraseña actual es ahora
‫newpassword, y luego test1234,
‫test1234.
‫Y ahora veamos,
‫ah, y ahora funciona.
‫Hermosa.
‫Y nuevamente, verá que todavía estamos conectados.
‫Perfecto.
‫Y con esto, realmente concluimos esta sección.
‫Felicitaciones, una vez más, por llegar tan lejos
‫y por todo este increíble progreso que ha estado haciendo.
‫De hecho, casi hemos terminado con nuestro
‫proyecto, pero
‫en la siguiente sección, continuaremos agregando algunas cosas más.
‫Tendremos carga de
‫archivos, crearemos algunas plantillas de correo
‫electrónico realmente interesantes y
‫también incluiremos pagos en esta aplicación.
‫Todavía hay un montón de contenido increíble por delante para
‫hacer que este proyecto sea aún mejor.