‫- : Et maintenant, pour terminer cette section,
‫utilisons à nouveau notre API, cette fois
‫pour mettre également à jour le mot de passe de l'utilisateur.
‫Fondamentalement, ce que nous
‫allons faire, c'est de faire fonctionner ce formulaire ici.
‫Nous avons déjà créé la
‫fonction de mise à jour des données dans la dernière leçon, et
‫maintenant nous pouvons continuer et créer également une
‫fonction de mise à jour du mot de passe.
‫Mais cette fonction aurait fondamentalement la même apparence.
‫Et donc, au lieu de faire cela,
‫je vais modifier un peu cette fonction et lui
‫permettre de mettre à jour à la fois les données et le mot de passe.
‫Appelons donc celui-ci les paramètres de mise à jour.
‫Et puis ici, ce que nous allons transmettre, c'est,
‫à la place du nom et
‫de l'email, un objet contenant toutes les données que nous voulons mettre à
‫jour, puis également une chaîne pour le type.
‫Qui peut alors être soit des données, soit un mot de passe.
‫Ici, nous aurons des données, qui seront à nouveau
‫un objet de toutes les données à mettre à jour, puis le type.
‫Alors écrivons cela ici.
‫Le type est soit un
‫mot de passe, soit
‫des données.
‫Alors ici, les données que nous envoyons
‫ne sont en fait que l'objet de données.
‫Car lorsque nous appelons
‫cette fonction, nous allons alors déjà créer un objet similaire à celui-ci.
‫Et donc ici, nous avons simplement besoin d'utiliser ensuite des données.
‫Et donc, tout ce que nous devons faire est vraiment ceci.
‫Ensuite, bien
‫sûr, lorsque nous mettons à jour
‫les mots de passe, nous utilisons également une autre URL.
‫Et donc utilisons simplement un opérateur ternaire afin
‫de déterminer quelle URL nous voulons appeler en fonction
‫de la chaîne de type.
‫Allons dans Postman et copions l'URL du mot de passe
‫de mise à jour.
‫Ici, dans l'authentification, nous avons mis
‫à jour le mot de passe de l'utilisateur actuel.
‫Et pour que l'on exige le mot de passe actuel, les
‫mots de passe, donc fondamentalement le nouveau, puis
‫le mot de passe confirmé.
‫Et l'itinéraire ici est de mettre à jour mon mot de passe.
‫Semblable à celui-ci,
‫et donc, trouvons une URL ici et disons si le type est
‫égal au mot de passe, alors laissez l'URL être
‫bien,
‫tout cela, puis mettez à jour mon mot de passe.
‫Et sinon, ce sera celui-ci ici.
‫Et c'est donc ce que nous utilisons ce paramètre de type ici.
‫Ici, alors, nous avons simplement besoin de l'URL,
‫et c'est tout.
‫Et aussi ici dans la chaîne de réussite, nous
‫devrions probablement ensuite indiquer si les mots de passe ou les données
‫ont été mis à jour avec succès.
‫Et donc fondamentalement ici, nous allons mettre le type maintenant.
‫Oh et convertissons-le également en majuscule
‫ici, car sinon le type sera en minuscule, comme celui-ci.
‫Cela me semble déjà bien comme ça.
‫Voyons maintenant, juste pour voir si cela fonctionne, utilisons
‫réellement ces paramètres de mise à jour ici pour mettre
‫à jour les données.
‫Donc ce que nous avons fait
‫dans la dernière leçon, mais maintenant avec cette nouvelle fonction.
‫Tout d'abord, ce que nous devons importer ici, c'est maintenant
‫la fonction de mise à jour des paramètres.
‫Et ici, nous devons appeler les paramètres de mise à jour, avec
‫bien sûr et objet maintenant.
‫Et c'est donc celui-ci.
‫Et maintenant la chaîne de type qui est data.
‫Testons cela très rapidement.
‫Ajoutons à nouveau
‫ici un nom enregistré dans
‫les paramètres et les
‫données mises à jour avec succès.
‫Juste un rechargement rapide,
‫et en effet tout fonctionne.
‫Et maintenant, tout ce que nous avons à faire est de lire
‫les données de ces trois champs de
‫saisie, puis de les transmettre également à la fonction de mise à jour des paramètres.
‫Commençons par sélectionner le formulaire de mot de
‫passe, et donc de retour dans notre
‫modèle de compte, celui-ci s'appelle les paramètres utilisateur du formulaire.
‫Sélectionnons en fonction de cela.
‫Donc juste duplication.
‫Formez les paramètres utilisateur, et cela devrait probablement
‫être appelé mot de passe maintenant.
‫Ouais, appelons ce mot de passe ici.
‫Cela a un peu plus de sens.
‫Donc formulaire de mot de passe utilisateur, et maintenant nous avons
‫ici quelque chose de très similaire.
‫Copiez-le simplement,
‫le formulaire de mot de passe
‫utilisateur, et maintenant nous devons simplement obtenir les trois mots de passe.
‫Et ils sont appelés mot de passe actuel, mot de passe et
‫confirmation de mot de passe avec les tirets.
‫Le mot de passe actuel
‫est appelé ici avec le mot de passe ID actuel, et maintenant
‫il ne fait que le dupliquer trois fois.
‫Confirmer.
‫Et ici, confirmez aussi.
‫Et maintenant, revenons très rapidement à Postman, juste pour vraiment
‫nous assurer que ce sont les noms de variables
‫que notre API attend.
‫Copiez-les simplement ici pour les comparer rapidement.
‫Et donc en effet, ils sont appelés mot de passe actuel,
‫donc exactement le même nom
‫ici, puis mot de passe et mot de passe confirmé.
‫Et donc si nous créons maintenant un objet avec ces
‫trois éléments, alors ce seront
‫exactement les données qui seront envoyées à l'API, et notre
‫gestionnaire pourra alors lire ces données correctement.
‫Mot de passe actuel, mot de passe et confirmation du mot de passe.
‫Et maintenant juste
‫pour finir, ici, bien sûr, il doit s'agir d'un mot de passe.
‫Testons maintenant cela.
‫Et donc le mot de passe actuel est test1234, et maintenant je
‫vais créer un nouveau mot
‫de passe, appelé newpassword.
‫Nouveau mot de passe à nouveau, et comme je l'ai déjà mentionné, nous
‫devons saisir le mot de passe actuel, de sorte
‫que si quelqu'un trouve votre ordinateur ouvert, par
‫exemple, il ne peut pas simplement
‫changer votre mot de passe sans connaître
‫votre mot de passe actuel.
‫Et puis, bien sûr, nous devons confirmer le mot
‫de passe, afin de ne pas nous tromper dans l'original.
‫Alors enregistrons-le maintenant et
‫le mot de passe mis à jour correctement.
‫Super.
‫Jetons un coup d'œil au cookie maintenant, car
‫nous aurions dû en avoir un nouveau tout de suite.
‫Et en fait, c'est exactement maintenant.
‫C'est à ce moment-là que j'enregistre cette vidéo, et cela
‫signifie donc que nous sommes maintenant toujours connectés.
‫Juste pour se rappeler pourquoi cela se produit, c'est
‫parce qu'ici dans le contrôleur d'authentification, ici à la mise
‫à jour du mot de passe,
‫nous avons finalement connecté l'utilisateur, donc ici, dans
‫créer un jeton envoyé, nous
‫envoyons un nouveau cookie tout de suite.
‫Et cela signifie que nous sommes toujours connectés.
‫Si nous devons maintenant recharger cette page, et
‫que je ne la rechargerai pas
‫en fait, je l'ouvrirai simplement dans un
‫nouvel onglet, car je veux vous montrer
‫autre chose, mais ce qui compte ici, c'est que nous sommes toujours connectés.
‫Ce que je voulais vous montrer,
‫c'est que nous avons maintenant encore les mots de passe ici.
‫Et en fait, nous ne le voulons pas.
‫Une fois l'appel d'API réussi, nous devons
‫alors continuer et supprimer le
‫contenu de ces champs de saisie.
‫C'est quelque chose que nous devrions également faire ici dans ce fichier,
‫car nous avons dit que c'est ici
‫que nous gérons tout ce qui concerne l'interface utilisateur.
‫Maintenant, rappelez-vous que cette fonction des paramètres de mise à jour
‫ici est en fait une fonction asynchrone.
‫Et donc ça va retourner une promesse.
‫Comme vous le savez déjà, à ce stade, nous pouvons
‫alors attendre cette promesse ici même.
‫Et dans ce cas, il ne s'agit pas vraiment de
‫sauver le résultat de la promesse de quoi
‫que ce soit, c'est seulement d'attendre que
‫ce soit fini, pour qu'après, on puisse faire autre chose.
‫Et dans ce cas, c'est pour effacer ces champs de
‫saisie que je viens de vous montrer.
‫Maintenant, bien sûr, pour pouvoir utiliser wait,
‫nous devons marquer cette fonction ici comme async, mais
‫c'est très simple.
‫Il ne nous reste plus qu'à sélectionner à nouveau ces champs, puis
‫à les effacer.
‫Alors saisissons cela
‫ici.
‫Et puis mettez-les à vide.
‫Et c'est tout.
‫Alors c'est vraiment simple.
‫Et dupliquons simplement ceci,
‫et confirmons.
‫Essayons donc à nouveau.
‫Et maintenant, gardons à l'esprit que le
‫mot de passe est actuellement
‫newpassword, et maintenant revenons
‫à test1234, test1234.
‫Et maintenant, en fait, les champs sont nettoyés.
‫Mais peut-être avez-vous aussi remarqué, tout comme moi,
‫qu'il a fallu un certain temps avant
‫que nous recevions notre alerte ici.
‫Et c'est parce que la définition
‫d'un nouveau mot de passe définit un certain temps en raison du processus de cryptage.
‫Et donc nous devrions donner à l'utilisateur une sorte de retour d'information
‫indiquant qu'il se passe réellement quelque chose en arrière-plan.
‫Et généralement, vous voyez des flèches de chargement quelque part sur la page,
‫mais restons très simples ici, et
‫tout ce que je vais faire
‫est de mettre à jour le texte ici dès que nous
‫cliquons dessus, puis
‫lorsque l'appel API est terminé, nous le
‫remettrons en place pour enregistrer le mot de passe.
‫C'est une petite touche très agréable que nous pouvons ajouter à
‫nos interfaces utilisateur, et nous pourrions faire
‫la même chose ici pour le formulaire de données utilisateur,
‫mais celui-ci est généralement très rapide, et nous n'en
‫avons donc pas besoin.
‫Je reviens à ce modèle ici
‫encore, car je dois sélectionner ce bouton ici.
‫Aucun d'entre eux ici n'est vraiment unique,
‫alors ajoutons-en un autre.
‫Donc, bouton enregistrer le mot de passe.
‫Et donc faisons-le
‫ici,
‫dès le début, document. queryselector, ce n'était pas le bon,
‫donc queryselector. forlcas. valeur et
‫définissez-la sur "Mise à jour... " Et puis, une fois
‫que nous avons terminé, donc après cette attente, nous
‫le remettons à jour, ou sauvez je crois que
‫c'est, oui, c'est
‫en fait sauvegarder le mot de passe.
‫Donnez-lui une sauvegarde, et voyez si cela fonctionne, et si
‫c'est le cas, alors nous avons réellement terminé.
‫Et encore une fois, maintenant le mot de passe est test1234,
‫et je le remets à nouveau sur
‫newpassword, et maintenant jetons un coup
‫d'œil ici à notre bouton, ah, cela n'a pas fonctionné, et je sais déjà pourquoi.
‫Et c'est parce que,
‫bien sûr, nous ne pouvons pas
‫utiliser value pour modifier le contenu de certains éléments html.
‫Donc, pour cela, nous utilisons du html interne, ou aussi du contenu texte.
‫Nous pourrions donc également utiliser du contenu textuel,
‫alors faisons-le.
‫Et donc une dernière fois, et maintenant nous
‫pouvons réellement le remettre au mot de passe par défaut.
‫Le mot de passe actuel est
‫maintenant newpassword, puis test1234,
‫test1234.
‫Et maintenant voyons,
‫ah, et maintenant ça marche.
‫Beau.
‫Et encore une fois, vous verrez que nous sommes toujours connectés.
‫Parfait.
‫Et avec cela, nous terminons cette section.
‫Félicitations, encore une fois, pour être arrivé jusqu'ici,
‫et tous ces progrès incroyables que vous avez accomplis.
‫En fait, nous avons presque terminé notre projet,
‫mais dans la
‫section suivante, nous continuerons à y ajouter d'autres éléments.
‫Nous aurons des
‫téléchargements de fichiers, nous créerons des modèles
‫d'e-mails vraiment sympas et nous
‫inclurons même des paiements dans cette application.
‫Il y a encore une tonne de contenu génial à
‫venir pour rendre ce projet encore meilleur.