1
00:00:01,040 --> 00:00:03,600
‫Jonas : Utilisons maintenant la page du compte

2
00:00:03,600 --> 00:00:06,803
‫utilisateur afin de permettre aux utilisateurs de mettre à jour leurs données.

3
00:00:08,410 --> 00:00:10,770
‫Nous allons donc permettre à l'utilisateur de

4
00:00:10,770 --> 00:00:15,030
‫mettre à jour à la fois le nom et l'adresse e-mail pour le moment.

5
00:00:15,030 --> 00:00:17,060
‫Et nous ajouterons la photo de l'utilisateur ici un

6
00:00:17,060 --> 00:00:18,843
‫peu plus tard dans la section suivante.

7
00:00:19,826 --> 00:00:23,670
‫Bon, maintenant il y a deux manières de faire ça.

8
00:00:23,670 --> 00:00:27,420
‫La première consiste à soumettre une demande de publication à notre API comme nous

9
00:00:27,420 --> 00:00:31,150
‫l'avons fait avec le formulaire de connexion, vous vous en souvenez ?

10
00:00:31,150 --> 00:00:33,950
‫Et en fait, nous allons le faire dans la prochaine conférence.

11
00:00:33,950 --> 00:00:36,600
‫Mais dans celui-ci, je veux vous montrer

12
00:00:36,600 --> 00:00:39,950
‫une autre voie qui est une voie normale plus traditionnelle.

13
00:00:39,950 --> 00:00:41,840
‫Ainsi, de cette manière plus

14
00:00:41,840 --> 00:00:45,150
‫traditionnelle, nous spécifions la méthode de publication directement sur

15
00:00:45,150 --> 00:00:49,710
‫le formulaire, ainsi que l'URL à laquelle la demande de publication doit être envoyée.

16
00:00:49,710 --> 00:00:52,980
‫Donc, fondamentalement, en utilisant cette méthode, nous n'avons pas besoin

17
00:00:52,980 --> 00:00:55,660
‫de JavaScript pour faire la demande, cela se

18
00:00:55,660 --> 00:00:59,450
‫produit automatiquement avec le formulaire HTML qui publiera ensuite les données sur

19
00:00:59,450 --> 00:01:03,580
‫le point de terminaison de l'URL dans notre backend que nous avons spécifié.

20
00:01:03,580 --> 00:01:06,980
‫Personnellement, je n'aime pas vraiment cette solution, car elle force

21
00:01:06,980 --> 00:01:09,270
‫le rechargement de la page et nous

22
00:01:09,270 --> 00:01:11,200
‫oblige également à créer une

23
00:01:11,200 --> 00:01:14,750
‫autre route et un autre gestionnaire de route dans notre backend.

24
00:01:14,750 --> 00:01:16,830
‫Et enfin, cela rend également un

25
00:01:16,830 --> 00:01:19,120
‫peu plus difficile la gestion des erreurs.

26
00:01:19,120 --> 00:01:22,510
‫Cependant, je pense toujours qu'il est très important que

27
00:01:22,510 --> 00:01:25,700
‫vous sachiez comment utiliser les formulaires de cette manière,

28
00:01:25,700 --> 00:01:27,910
‫car cela pourrait avoir plus

29
00:01:27,910 --> 00:01:30,630
‫de sens dans l'application que vous créez.

30
00:01:30,630 --> 00:01:34,140
‫Par exemple, votre application n'a peut-être même pas besoin d'une API, et donc

31
00:01:34,140 --> 00:01:36,200
‫dans ce cas, lorsque vous ne construisez

32
00:01:36,200 --> 00:01:39,140
‫qu'un site Web rendu, il n'est bien sûr pas logique

33
00:01:39,140 --> 00:01:41,770
‫de soumettre des formulaires à l'aide d'un appel d'API,

34
00:01:41,770 --> 00:01:43,490
‫et à la place, vous

35
00:01:43,490 --> 00:01:46,020
‫faites-le comme nous allons le faire dans cette vidéo.

36
00:01:46,020 --> 00:01:48,760
‫D'accord, et c'est pourquoi nous procédons de cette façon

37
00:01:48,760 --> 00:01:50,580
‫dans cette conférence, puis en

38
00:01:50,580 --> 00:01:53,320
‫utilisant la méthode API dans la prochaine conférence.

39
00:01:53,320 --> 00:01:55,910
‫Donc, ce que nous devons faire dans

40
00:01:55,910 --> 00:01:57,960
‫notre formulaire afin de le soumettre

41
00:01:57,960 --> 00:01:59,930
‫automatiquement, sans avoir à

42
00:01:59,930 --> 00:02:02,030
‫passer par JavaScript comme je l'ai

43
00:02:02,030 --> 00:02:05,240
‫mentionné précédemment, donc en gros, la publication automatique des

44
00:02:05,240 --> 00:02:10,240
‫données sur notre point de terminaison, c'est de spécifier ce point de terminaison, et

45
00:02:10,550 --> 00:02:15,133
‫nous le faisons donc ici dans le formulaire, où nous spécifions l'attribut action.

46
00:02:17,380 --> 00:02:21,410
‫Donc l'action, et disons que nous allons créer

47
00:02:21,410 --> 00:02:26,410
‫un point final appelé soumettre les données utilisateur, comme ceci.

48
00:02:27,740 --> 00:02:30,433
‫D'accord, puis nous spécifions également la

49
00:02:33,180 --> 00:02:37,400
‫méthode, qui est post, d'accord, donc cela doit toujours se

50
00:02:37,400 --> 00:02:41,310
‫produire sur l'élément de formulaire que nous soumettons, d'accord.

51
00:02:41,310 --> 00:02:43,963
‫Laissons lui un peu plus d'espace ici,

52
00:02:45,020 --> 00:02:47,170
‫afin qu'il soit plus facile

53
00:02:47,170 --> 00:02:49,920
‫à comprendre, et donc tout cela ici est

54
00:02:49,920 --> 00:02:52,500
‫notre formulaire, et donc lorsque nous cliquons

55
00:02:52,500 --> 00:02:56,260
‫sur cet élément de bouton, automatiquement le formulaire sera soumis, et

56
00:02:56,260 --> 00:03:01,260
‫les données seront envoyées en utilisant une demande de publication vers cette URL, d'accord.

57
00:03:01,410 --> 00:03:03,540
‫Il existe également différentes manières d'envoyer

58
00:03:03,540 --> 00:03:06,850
‫les données, mais celle par défaut est appelée URL codée,

59
00:03:06,850 --> 00:03:09,540
‫et c'est donc celle que nous utilisons ici.

60
00:03:09,540 --> 00:03:11,440
‫Et donc, en gros, ce que

61
00:03:11,440 --> 00:03:14,050
‫cela va faire, c'est encoder toutes les données que nous

62
00:03:14,050 --> 00:03:16,650
‫soumettons dans l'URL un peu comme une chaîne de requête.

63
00:03:16,650 --> 00:03:19,480
‫D'accord, mais plus à ce sujet lorsque nous travaillons

64
00:03:19,480 --> 00:03:22,790
‫réellement à obtenir les données sur le serveur et à travailler avec.

65
00:03:22,790 --> 00:03:26,880
‫Donc, voici la première étape pour faire fonctionner cette méthode, et la

66
00:03:26,880 --> 00:03:30,220
‫seconde consiste à spécifier les propriétés de nom sur les

67
00:03:30,220 --> 00:03:32,423
‫champs que nous voulons réellement envoyer.

68
00:03:33,310 --> 00:03:35,950
‫C'est donc cette entrée et cette entrée,

69
00:03:35,950 --> 00:03:38,460
‫et leurs valeurs seront envoyées avec

70
00:03:38,460 --> 00:03:41,420
‫une requête basée sur leurs attributs de nom.

71
00:03:41,420 --> 00:03:46,420
‫D'accord, disons ici, le nom est égal au nom, d'accord,

72
00:03:48,360 --> 00:03:53,180
‫c'est donc le nom d'utilisateur, et celui-ci ici aura

73
00:03:53,180 --> 00:03:56,083
‫le nom égal à l'e-mail.

74
00:03:57,680 --> 00:04:01,910
‫D'accord, et ce sera alors le nom de ce champ, et

75
00:04:01,910 --> 00:04:04,370
‫le corps que recevra notre application.

76
00:04:04,370 --> 00:04:07,840
‫Très bien, et donc maintenant, lorsque nous soumettons le formulaire, le

77
00:04:07,840 --> 00:04:09,750
‫corps que nous recevrons alors n'aura

78
00:04:09,750 --> 00:04:12,410
‫que le nom et l'e-mail, car ce sont

79
00:04:12,410 --> 00:04:14,290
‫les deux seuls champs

80
00:04:14,290 --> 00:04:16,640
‫qui ont réellement un attribut de nom.

81
00:04:16,640 --> 00:04:20,233
‫Très bien, implémentons maintenant cette route ici, d'accord, donc comme je

82
00:04:21,730 --> 00:04:23,930
‫l'ai dit avec cette méthode, nous devons

83
00:04:23,930 --> 00:04:25,993
‫implémenter encore une autre route.

84
00:04:28,550 --> 00:04:33,550
‫D'accord, donc routeur, et n'oubliez pas qu'il s'agit d'une demande de publication.

85
00:04:36,200 --> 00:04:40,713
‫D'accord, et donc celui-ci sera dans viewsController, et

86
00:04:44,500 --> 00:04:48,467
‫disons updateUserData, d'accord, enregistrez-le et créons

87
00:04:54,934 --> 00:04:57,100
‫maintenant ce gestionnaire.

88
00:04:58,440 --> 00:04:59,993
‫Donc ici dans ce fichier.

89
00:05:10,580 --> 00:05:12,310
‫Et la première chose que je veux

90
00:05:12,310 --> 00:05:14,733
‫faire ici est de jeter un coup d'œil au corps. corps, d'accord, et donc fondamentalement dans ce

91
00:05:19,437 --> 00:05:22,800
‫cas, juste pour vous montrer que cela ne fonctionnera pas comme ça.

92
00:05:22,800 --> 00:05:26,550
‫D'accord, et je vais vous dire pourquoi après

93
00:05:26,550 --> 00:05:29,380
‫l'avoir expérimenté, d'accord, alors pour

94
00:05:29,380 --> 00:05:33,200
‫l'instant, voyons simplement si nous sommes déjà connectés.

95
00:05:33,200 --> 00:05:35,380
‫Donc, si la soumission de

96
00:05:35,380 --> 00:05:38,390
‫ce formulaire déclenchera réellement ce gestionnaire ici, d'accord, ajoutons

97
00:05:38,390 --> 00:05:41,700
‫également une chaîne ici juste pour nous en assurer.

98
00:05:41,700 --> 00:05:43,500
‫Très bien, alors rechargeons ceci

99
00:05:47,620 --> 00:05:50,980
‫ici afin d'obtenir notre nouveau formulaire, et juste pour être sûr,

100
00:05:52,040 --> 00:05:54,020
‫jetons un coup d'œil à cela.

101
00:05:54,020 --> 00:05:56,020
‫D'accord, donc vous voyez

102
00:05:58,210 --> 00:06:01,080
‫ici, l'action et la méthode que nous avons

103
00:06:01,080 --> 00:06:04,023
‫ajoutées, et bien sûr aussi ces noms, d'accord,

104
00:06:04,870 --> 00:06:09,253
‫et donc ajoutons un deuxième prénom ici, je ne sais pas, disons Sarah,

105
00:06:10,890 --> 00:06:13,010
‫puis ici l'e-mail ajoutons le nom

106
00:06:13,010 --> 00:06:17,473
‫de famille, maintenant nous obtenons cette erreur, veuillez fournir un e-mail et un

107
00:06:19,500 --> 00:06:23,460
‫mot de passe, et donc ce genre de vient du formulaire

108
00:06:23,460 --> 00:06:25,730
‫de connexion, à droite, donc c'est bizarre.

109
00:06:25,730 --> 00:06:29,063
‫Jetons donc un œil à notre formulaire ici,

110
00:06:30,770 --> 00:06:34,660
‫et en effet, ce formulaire ici a la classe form.

111
00:06:34,660 --> 00:06:38,130
‫Et je pense que c'est celui que nous avons utilisé aussi

112
00:06:38,130 --> 00:06:39,270
‫dans notre index. js, à droite.

113
00:06:39,270 --> 00:06:42,377
‫Donc, ici, nous avons essentiellement

114
00:06:45,200 --> 00:06:48,070
‫obtenu ce formulaire en utilisant la classe de formulaire, et quand cela

115
00:06:48,070 --> 00:06:50,830
‫existe et qu'il est soumis, nous essayons de nous connecter, ici.

116
00:06:50,830 --> 00:06:54,990
‫D'accord, et ce n'est bien sûr pas correct, et nous devrions

117
00:06:54,990 --> 00:06:58,450
‫donc sélectionner notre formulaire de connexion d'une autre manière.

118
00:06:58,450 --> 00:07:02,170
‫Alors corrigeons très rapidement cela, ici nous avons login, alors

119
00:07:02,170 --> 00:07:03,783
‫ajoutons simplement une

120
00:07:05,310 --> 00:07:10,310
‫autre classe ici, form login, et c'est un peu bizarre car nous avons déjà

121
00:07:12,300 --> 00:07:14,970
‫un formulaire de connexion ici, mais ce n'est

122
00:07:14,970 --> 00:07:17,460
‫pas vraiment sur un élément de formulaire.

123
00:07:17,460 --> 00:07:20,040
‫Nous ne devrions donc pas utiliser cela,

124
00:07:20,040 --> 00:07:23,820
‫et créons donc ici un formulaire avec un modificateur de login, d'accord.

125
00:07:23,820 --> 00:07:28,493
‫Mettons cela ici, sauvegardons-le, et maintenant cela ne devrait plus

126
00:07:31,890 --> 00:07:34,853
‫se produire, car maintenant nous n'avons

127
00:07:36,970 --> 00:07:39,270
‫plus ce gestionnaire d'événement attaché

128
00:07:40,270 --> 00:07:42,010
‫à ce formulaire.

129
00:07:42,010 --> 00:07:44,173
‫Rechargeons-le donc rapidement, et réessayez, et

130
00:07:45,120 --> 00:07:48,473
‫maintenant vous voyez qu'il fait quelque chose, mais bien sûr, il

131
00:07:50,953 --> 00:07:53,340
‫ne s'arrêtera jamais de tourner ici, car

132
00:07:53,340 --> 00:07:56,290
‫nous n'avons en fait renvoyé aucune réponse, et donc

133
00:07:56,290 --> 00:07:59,470
‫le cycle de réponse à la demande n'est jamais terminé.

134
00:07:59,470 --> 00:08:03,160
‫Mais de toute façon, je voulais juste regarder le corps de la requête,

135
00:08:03,160 --> 00:08:04,870
‫tu te souviens de ça ?

136
00:08:04,870 --> 00:08:07,680
‫Et donc, comme je l'ai mentionné précédemment, c'est maintenant en fait MT.

137
00:08:07,680 --> 00:08:10,853
‫Bon, comme je le disais, cela ne fonctionnera pas

138
00:08:11,960 --> 00:08:15,100
‫vraiment comme ça, car nous devons ajouter

139
00:08:15,100 --> 00:08:18,510
‫un autre middleware afin d'analyser les données provenant d'un formulaire.

140
00:08:18,510 --> 00:08:21,540
‫Faisons-le donc dans notre application. js.

141
00:08:21,540 --> 00:08:23,843
‫Mais d'abord, fermons en fait certains de ces fichiers ici.

142
00:08:24,870 --> 00:08:28,333
‫D'accord, celui-ci aussi, et maintenant, allons à l'application. js, ajoutons cette clause à notre analyseur de

143
00:08:30,880 --> 00:08:35,880
‫corps, alors nous y

144
00:08:37,290 --> 00:08:40,373
‫sommes, car en fait, c'est très similaire.

145
00:08:41,860 --> 00:08:45,273
‫Donc appli. utiliser, et c'est toujours un middleware Express

146
00:08:47,340 --> 00:08:51,423
‫intégré, donc express. urlencoded, d'accord, et il s'appelle ainsi car

147
00:08:52,940 --> 00:08:56,837
‫rappelez-vous, la façon dont le formulaire

148
00:09:00,280 --> 00:09:03,380
‫envoie des données au serveur est en fait également appelée URL

149
00:09:03,380 --> 00:09:06,830
‫codée, et donc ici, nous avons besoin de ce middleware pour analyser

150
00:09:06,830 --> 00:09:09,000
‫essentiellement les données provenant d'un formulaire URL codé.

151
00:09:09,000 --> 00:09:13,440
‫Ensuite, nous passons dans certains paramètres, et nous pouvons dire étendu vrai,

152
00:09:13,440 --> 00:09:16,630
‫et cela nous permettra simplement de passer des

153
00:09:16,630 --> 00:09:21,630
‫données plus complexes, ce qui dans ce cas n'est pas vraiment nécessaire, mais

154
00:09:22,000 --> 00:09:23,720
‫utilisons-les quand même

155
00:09:23,720 --> 00:09:25,650
‫ici, et nous pouvons également

156
00:09:25,650 --> 00:09:29,530
‫définir la limite propriété comme nous l'avons fait dans l'analyseur

157
00:09:29,530 --> 00:09:33,010
‫de corps, donc ici, et disons encore 10 kilo-octets.

158
00:09:33,010 --> 00:09:37,113
‫D'accord, et donc si nous essayons à nouveau ici, nous

159
00:09:38,930 --> 00:09:42,930
‫devrions en effet obtenir ces données, et ces données.

160
00:09:42,930 --> 00:09:46,670
‫Ajoutons à nouveau ces différentes données ici, afin que nous

161
00:09:46,670 --> 00:09:50,370
‫soyons sûrs qu'ils n'obtiennent pas l'utilisateur actuel, mais vraiment les

162
00:09:50,370 --> 00:09:53,620
‫données provenant du formulaire, d'accord, et encore une

163
00:09:54,480 --> 00:09:56,090
‫fois, cela continue de

164
00:09:56,090 --> 00:09:57,593
‫tourner pour toujours

165
00:09:59,820 --> 00:10:02,860
‫ici, ou jusqu'à ce qu'il expire, mais ce

166
00:10:02,860 --> 00:10:07,720
‫qui nous intéresse, c'est d'obtenir ces nouvelles données ici maintenant dans notre corps.

167
00:10:07,720 --> 00:10:11,850
‫Super, donc ça marche, et nous avons donc maintenant

168
00:10:11,850 --> 00:10:16,410
‫notre formulaire HTML vraiment connecté à ce gestionnaire de route ici.

169
00:10:16,410 --> 00:10:19,920
‫Et maintenant, nous pouvons aller de l'avant et mettre à jour

170
00:10:19,920 --> 00:10:22,860
‫l'utilisateur en fonction de ces nouvelles données, d'accord.

171
00:10:22,860 --> 00:10:25,490
‫Alors, débarrassons-nous de cela, puis mettons

172
00:10:25,490 --> 00:10:29,010
‫à jour l'utilisateur car nous savons déjà comment le faire.

173
00:10:29,010 --> 00:10:31,610
‫Maintenant, tout d'abord, nous allons devoir importer

174
00:10:31,610 --> 00:10:33,900
‫le modèle utilisateur, alors faisons-le.

175
00:10:33,900 --> 00:10:37,873
‫User, ici avec un

176
00:10:39,160 --> 00:10:44,160
‫petit U, d'accord, et disons maintenant que

177
00:10:46,930 --> 00:10:51,910
‫l'utilisateur est égal à wait User. findByIdAndUpdate.

178
00:10:51,910 --> 00:10:55,013
‫Bon, alors bien sûr,

179
00:11:00,780 --> 00:11:04,850
‫comme toujours, marquez celui-ci comme asynchrone et détectez toutes les erreurs.

180
00:11:04,850 --> 00:11:07,473
‫Bon, alors quelle est l'ID que nous recherchons ?

181
00:11:12,920 --> 00:11:17,890
‫Et j'espère qu'à ce stade vous savez où il se

182
00:11:17,890 --> 00:11:21,120
‫trouve, ce sera à la demande. utilisateur. identifiant.

183
00:11:21,120 --> 00:11:25,640
‫Oh, et une chose

184
00:11:25,640 --> 00:11:27,980
‫importante que nous devons faire, ce que je

185
00:11:27,980 --> 00:11:30,490
‫n'ai pas encore fait, est de protéger cette route

186
00:11:30,490 --> 00:11:32,600
‫ici aussi, d'accord, car ce n'est qu'alors que

187
00:11:32,600 --> 00:11:35,430
‫nous avons réellement cet utilisateur sur la demande, n'est-ce pas,

188
00:11:35,430 --> 00:11:38,810
‫et bien sûr De plus, nous ne voulons pouvoir accéder à cet

189
00:11:38,810 --> 00:11:41,050
‫itinéraire que si nous sommes connectés, sinon tout

190
00:11:41,050 --> 00:11:44,470
‫le monde pourrait simplement aller de l'avant et mettre à jour certaines données.

191
00:11:44,470 --> 00:11:46,683
‫Donc, ici dans la

192
00:11:48,210 --> 00:11:50,880
‫route, ajoutons bien sûr authController. protéger.

193
00:11:50,880 --> 00:11:53,300
‫D'accord, c'est

194
00:11:58,450 --> 00:12:03,390
‫l'ID, alors nous avons besoin des nouvelles données, et

195
00:12:03,390 --> 00:12:08,343
‫disons que nous voulons un nom égal à request. corps. nom et l'adresse e-mail à

196
00:12:08,343 --> 00:12:13,320
‫demander. corps. e-mail.

197
00:12:18,710 --> 00:12:23,233
‫Et rappelez-vous que ce sont les

198
00:12:25,010 --> 00:12:27,960
‫noms des champs, car nous leur avons donné l'attribut name dans le formulaire HTML.

199
00:12:27,960 --> 00:12:31,630
‫N'oubliez pas qu'avant, lorsque nous mettions à jour certaines données, nous transmettions

200
00:12:31,630 --> 00:12:35,470
‫l'intégralité de la demande ici à la méthode de mise à jour, d'accord,

201
00:12:35,470 --> 00:12:37,970
‫mais dans ce cas, nous ne voulons vraiment

202
00:12:37,970 --> 00:12:41,020
‫mettre à jour que le nom et l'e-mail, et ainsi,

203
00:12:41,020 --> 00:12:44,520
‫nous sommes sûr que tout le reste est fondamentalement supprimé du

204
00:12:44,520 --> 00:12:47,210
‫corps, car un pirate informatique pourrait bien sûr maintenant

205
00:12:47,210 --> 00:12:50,710
‫aller de l'avant et ajouter des champs supplémentaires au code HTML,

206
00:12:50,710 --> 00:12:53,040
‫puis, par exemple, soumettre des données comme

207
00:12:53,040 --> 00:12:55,770
‫des mots de passe et des trucs comme ça,

208
00:12:55,770 --> 00:12:58,330
‫et bien sûr nous le faisons Je ne

209
00:12:58,330 --> 00:13:01,020
‫veux pas stocker ces données malveillantes dans notre

210
00:13:01,020 --> 00:13:03,070
‫base de données, n'est-ce pas.

211
00:13:03,070 --> 00:13:06,720
‫De plus, les mots de passe sont à nouveau traités séparément,

212
00:13:06,720 --> 00:13:10,700
‫car rappelez-vous que nous ne pouvons jamais mettre à jour les mots

213
00:13:10,700 --> 00:13:13,250
‫de passe à l'aide de findByIdAndUpdate.

214
00:13:13,250 --> 00:13:17,120
‫Encore une fois, parce que cela ne va pas exécuter le middleware

215
00:13:17,120 --> 00:13:20,580
‫sécurisé qui se chargera de chiffrer nos mots de passe.

216
00:13:20,580 --> 00:13:23,860
‫D'accord, et c'est pourquoi nous avons une route distincte pour

217
00:13:23,860 --> 00:13:26,560
‫cela dans notre API, et nous avons

218
00:13:26,560 --> 00:13:29,950
‫également une route distincte pour cela dans notre interface utilisateur.

219
00:13:29,950 --> 00:13:32,090
‫Et c'est généralement ce que vous voyez toujours

220
00:13:32,090 --> 00:13:34,550
‫dans les applications Web lorsque vous souhaitez mettre à jour

221
00:13:34,550 --> 00:13:36,610
‫vos mots de passe, vous avez généralement un

222
00:13:36,610 --> 00:13:38,430
‫formulaire séparé uniquement pour cela, d'accord.

223
00:13:38,430 --> 00:13:41,493
‫Quoi qu'il en soit, continuons maintenant ici avec nos

224
00:13:42,830 --> 00:13:45,373
‫options, où nous disons que nous voulons

225
00:13:46,640 --> 00:13:50,063
‫obtenir le nouveau, donc essentiellement le document mis à jour

226
00:13:51,140 --> 00:13:54,463
‫en conséquence, et que nous voulons également exécuter les validateurs.

227
00:13:55,350 --> 00:13:59,053
‫C'est donc exactement comme nous l'avons fait auparavant dans notre API.

228
00:14:00,500 --> 00:14:03,193
‫Génial, appelons-le en fait updateUser.

229
00:14:05,410 --> 00:14:08,613
‫D'accord, et qu'est-ce qu'on veut faire maintenant ?

230
00:14:12,800 --> 00:14:16,070
‫Eh bien, après avoir soumis les données sur notre site Web,

231
00:14:16,070 --> 00:14:18,763
‫ce que nous voulons essentiellement, c'est simplement revenir à

232
00:14:19,790 --> 00:14:22,350
‫cette page ici, mais bien sûr, avec les

233
00:14:22,350 --> 00:14:24,760
‫données mises à jour ici, d'accord.

234
00:14:24,760 --> 00:14:27,660
‫C'est donc facile, tout ce que nous aurons à faire est

235
00:14:27,660 --> 00:14:30,170
‫de restituer à nouveau la page du compte.

236
00:14:30,170 --> 00:14:32,873
‫Et donc c'est similaire à celui-ci, copions-le, d'accord,

237
00:14:34,160 --> 00:14:36,340
‫mais maintenant il y a en

238
00:14:36,340 --> 00:14:39,900
‫fait une différence importante, car pour le moment, nous devons

239
00:14:39,900 --> 00:14:41,910
‫également transmettre l'utilisateur, donc

240
00:14:41,910 --> 00:14:44,120
‫l'utilisateur mis à jour, car sinon,

241
00:14:44,120 --> 00:14:47,600
‫l'utilisateur que le modèle va utiliser, est celui qui vient

242
00:14:47,600 --> 00:14:49,920
‫du middleware de protection, rappelez-vous, et de

243
00:14:49,920 --> 00:14:52,190
‫sorte que l'on ne va pas

244
00:14:52,190 --> 00:14:54,330
‫être l'utilisateur mis à jour.

245
00:14:54,330 --> 00:14:57,223
‫D'accord, et nous devons donc transmettre l'utilisateur est mis à jourUser.

246
00:14:58,720 --> 00:15:03,720
‫D'accord, et donc, cela devrait suffire.

247
00:15:06,050 --> 00:15:08,933
‫Donc, si nous rechargeons maintenant ceci, ou en fait si maintenant

248
00:15:10,450 --> 00:15:14,943
‫enregistrez ceci ici, alors vous voyez que nous sommes en fait revenus exactement à la même page et

249
00:15:16,000 --> 00:15:17,890
‫que les données sont toujours les mêmes.

250
00:15:17,890 --> 00:15:20,970
‫Alors prouvons cela, allez sur une

251
00:15:20,970 --> 00:15:25,000
‫autre page, puis revenez à la page des paramètres.

252
00:15:25,000 --> 00:15:27,450
‫Et donc, cela prouve que les données sont

253
00:15:27,450 --> 00:15:29,500
‫désormais effectivement mises à jour.

254
00:15:29,500 --> 00:15:31,603
‫Donc, si nous nous déconnectons maintenant,

255
00:15:33,090 --> 00:15:35,440
‫essayons de nous connecter avec ce nouvel e-mail.

256
00:15:35,440 --> 00:15:37,423
‫Je voulais donc me déconnecter, d'accord, et maintenant me reconnecter.

257
00:15:39,530 --> 00:15:44,530
‫Et donc maintenant, nous allons utiliser ce nouvel e-mail, et bien sûr toujours l'ancien

258
00:15:44,950 --> 00:15:47,493
‫mot de passe, test1234, et en effet,

259
00:15:48,780 --> 00:15:51,130
‫c'est maintenant la nouvelle adresse

260
00:15:53,810 --> 00:15:56,500
‫e-mail que nous devons utiliser pour nous connecter.

261
00:15:56,500 --> 00:15:59,670
‫Voyons maintenant ce qui se passe lorsque nous transmettons

262
00:15:59,670 --> 00:16:01,120
‫des données erronées ici.

263
00:16:01,120 --> 00:16:04,860
‫Par exemple, Google Chrome nous permet de soumettre une adresse

264
00:16:04,860 --> 00:16:07,120
‫e-mail comme celle-ci, mais bien sûr,

265
00:16:07,120 --> 00:16:09,530
‫notre modèle Mongoose n'autorise pas un

266
00:16:09,530 --> 00:16:11,550
‫e-mail avec ce format.

267
00:16:11,550 --> 00:16:14,250
‫Et donc nous devrions maintenant obtenir une erreur, et

268
00:16:14,250 --> 00:16:15,950
‫en effet, nous obtenons

269
00:16:17,620 --> 00:16:20,540
‫cette erreur, veuillez fournir un e-mail valide, mais c'est une

270
00:16:20,540 --> 00:16:23,690
‫sorte d'expérience utilisateur terrible, n'est-ce pas, nous ne faisions que soumettre

271
00:16:23,690 --> 00:16:26,530
‫nos données, et puis tout d'un coup, nous sommes

272
00:16:26,530 --> 00:16:28,470
‫allés à une toute nouvelle page.

273
00:16:28,470 --> 00:16:31,740
‫Et en fait, nous voyons que nous sommes également

274
00:16:31,740 --> 00:16:36,740
‫arrivés à cette nouvelle URL, donc celle à laquelle nous avons soumis les données.

275
00:16:36,850 --> 00:16:39,420
‫Et donc oui, c'est un peu terrible, et comme

276
00:16:39,420 --> 00:16:41,470
‫je le disais au début, cette

277
00:16:41,470 --> 00:16:43,930
‫façon de faire est en fait un peu

278
00:16:43,930 --> 00:16:46,420
‫pire pour gérer les erreurs, ce qui est

279
00:16:46,420 --> 00:16:48,960
‫une des raisons pour lesquelles je préfère personnellement utiliser

280
00:16:48,960 --> 00:16:51,840
‫l'API que nous déjà créé afin de mettre à jour

281
00:16:51,840 --> 00:16:55,640
‫les données de l'utilisateur, et en général de faire ce genre de choses.

282
00:16:55,640 --> 00:16:57,740
‫Très bien, alors faisons

283
00:16:57,740 --> 00:17:00,720
‫exactement cela dans la prochaine vidéo.