1
00:00:01,050 --> 00:00:02,950
‫Jonas : Au cours des

2
00:00:02,950 --> 00:00:06,940
‫deux prochaines conférences, nous ajouterons la fonctionnalité de connexion à notre site Web.

3
00:00:06,940 --> 00:00:07,940
‫Et dans

4
00:00:07,940 --> 00:00:10,420
‫cette conférence, nous commencerons par afficher

5
00:00:10,420 --> 00:00:12,610
‫l'écran de connexion pour faciliter la

6
00:00:12,610 --> 00:00:14,083
‫connexion des utilisateurs.

7
00:00:15,880 --> 00:00:19,620
‫Une fois de plus, je veux vraiment que ce soit un défi pour

8
00:00:19,620 --> 00:00:22,810
‫vous afin que vous puissiez réellement mettre en pratique certaines

9
00:00:22,810 --> 00:00:24,890
‫des compétences que vous avez apprises.

10
00:00:24,890 --> 00:00:28,230
‫Ce que je veux que vous fassiez, c'est de créer une

11
00:00:28,230 --> 00:00:29,463
‫route de connexion slash.

12
00:00:31,550 --> 00:00:33,240
‫Créez ensuite un contrôleur et,

13
00:00:33,240 --> 00:00:34,930
‫bien sûr, un modèle.

14
00:00:34,930 --> 00:00:36,720
‫Et ce modèle est vraiment facile.

15
00:00:36,720 --> 00:00:39,610
‫C'est juste du HTML statique et nous n'avons pas

16
00:00:39,610 --> 00:00:41,783
‫besoin de lui passer de variables.

17
00:00:43,030 --> 00:00:45,050
‫Il y a un modèle pour

18
00:00:45,050 --> 00:00:47,375
‫cela, en fait, ici dans le dossier des modèles.

19
00:00:47,375 --> 00:00:50,623
‫Cela devrait donc être très facile à remplir pour vous.

20
00:00:52,211 --> 00:00:55,133
‫Alors mettez cette vidéo en pause et revenez une fois que vous êtes prêt.

21
00:00:58,580 --> 00:00:59,850
‫D'accord, bon retour.

22
00:00:59,850 --> 00:01:04,300
‫J'espère que vous avez réussi ce défi.

23
00:01:04,300 --> 00:01:05,963
‫Voici donc mon point de vue.

24
00:01:07,080 --> 00:01:09,670
‫Le point de routeur obtient la route

25
00:01:09,670 --> 00:01:11,360
‫est la connexion slash,

26
00:01:11,360 --> 00:01:12,380
‫puis nous

27
00:01:14,661 --> 00:01:17,223
‫utilisons le formulaire de connexion dot

28
00:01:19,430 --> 00:01:20,650
‫get du contrôleur.

29
00:01:20,650 --> 00:01:23,783
‫C'est donc le gestionnaire de route que je vais créer ensuite.

30
00:01:29,820 --> 00:01:33,150
‫Exportez la réponse du formulaire de connexion dot get

31
00:01:35,740 --> 00:01:36,680
‫et ici,

32
00:01:39,470 --> 00:01:41,540
‫nous n'avons besoin que de la

33
00:01:41,540 --> 00:01:43,590
‫demande et de la réponse.

34
00:01:43,590 --> 00:01:45,100
‫En fait, ici, je vois qu'il

35
00:01:45,100 --> 00:01:46,563
‫nous manque le suivant.

36
00:01:48,190 --> 00:01:51,360
‫Toujours, lorsque nous avons des fonctions asynchrones encapsulées dans

37
00:01:51,360 --> 00:01:53,833
‫catchAsync, nous devons toujours spécifier suivant.

38
00:01:55,950 --> 00:01:57,980
‫Mais ici, tout ce que nous avons

39
00:01:57,980 --> 00:02:01,270
‫vraiment besoin de faire est maintenant de rendre un modèle de connexion.

40
00:02:01,270 --> 00:02:03,950
‫Nous n'avons donc pas encore créé ce modèle.

41
00:02:03,950 --> 00:02:06,320
‫Mais cela s'appellera login.

42
00:02:06,320 --> 00:02:09,240
‫Donc, disons res dot status

43
00:02:10,280 --> 00:02:11,113
‫200,

44
00:02:13,390 --> 00:02:14,940
‫modèle de

45
00:02:16,060 --> 00:02:17,640
‫rendu appelé login.

46
00:02:17,640 --> 00:02:19,790
‫Ensuite, comme pour toutes nos autres

47
00:02:19,790 --> 00:02:23,090
‫pages, nous voulons en fait lui donner un titre personnalisé.

48
00:02:23,090 --> 00:02:26,010
‫Pour cela, nous avons toujours passé un

49
00:02:26,010 --> 00:02:28,240
‫objet avec la propriété title.

50
00:02:28,240 --> 00:02:29,090
‫À droite?

51
00:02:29,090 --> 00:02:32,010
‫Ainsi, le modèle de base lira ensuite ce titre et

52
00:02:32,010 --> 00:02:34,543
‫le placera dans l'élément html du titre.

53
00:02:35,581 --> 00:02:37,480
‫Dans ce cas,

54
00:02:38,770 --> 00:02:43,770
‫le titre est simplement de vous connecter à votre compte.

55
00:02:43,890 --> 00:02:46,690
‫Et c'est tout pour le gestionnaire d'itinéraire.

56
00:02:46,690 --> 00:02:47,963
‫Maintenant, allons-y,

57
00:02:48,820 --> 00:02:51,520
‫ouvrez le modèle de connexion,

58
00:02:51,520 --> 00:02:53,230
‫sélectionnez tout, copiez

59
00:02:53,230 --> 00:02:57,663
‫tout, fermez-le et créez la nouvelle vue ici.

60
00:02:59,860 --> 00:03:02,923
‫Appelez, bien sûr, login dot pug.

61
00:03:04,480 --> 00:03:06,380
‫Ensuite, collez ce code ici,

62
00:03:06,380 --> 00:03:09,900
‫et maintenant vient à nouveau cette astuce où nous étendons notre

63
00:03:09,900 --> 00:03:11,063
‫modèle de base.

64
00:03:14,740 --> 00:03:19,740
‫Celui-ci s'étend au fichier de base, n'oubliez pas qu'ici nous devons créer un bloc avec

65
00:03:20,120 --> 00:03:22,660
‫exactement le même nom que celui

66
00:03:22,660 --> 00:03:25,443
‫que nous avons dans le fichier de base.

67
00:03:26,950 --> 00:03:28,163
‫C'est donc le contenu.

68
00:03:29,610 --> 00:03:33,130
‫Et avec ça, c'est fini, je

69
00:03:33,130 --> 00:03:33,963
‫crois.

70
00:03:36,000 --> 00:03:38,770
‫Bien sûr, nous devons mettre en retrait pour en faire un

71
00:03:38,770 --> 00:03:39,913
‫enfant de ce bloc.

72
00:03:40,760 --> 00:03:42,233
‫Mais, c'est en fait ça.

73
00:03:43,602 --> 00:03:46,110
‫Maintenant, juste une autre chose que nous

74
00:03:46,110 --> 00:03:49,160
‫devons faire est de définir un lien vers la page

75
00:03:49,160 --> 00:03:52,163
‫de connexion afin que nous puissions réellement y accéder.

76
00:03:54,462 --> 00:03:57,480
‫À l'heure actuelle, les boutons de connexion et d'inscription

77
00:03:57,480 --> 00:03:59,393
‫utilisent en fait l'élément button.

78
00:04:00,630 --> 00:04:03,260
‫Mais comme ça, on ne peut pas

79
00:04:03,260 --> 00:04:05,110
‫vraiment spécifier l'attribut href.

80
00:04:05,110 --> 00:04:09,360
‫Alors changeons-les en fait en un vrai lien.

81
00:04:09,360 --> 00:04:12,763
‫Et ici, nous pouvons spécifier le href.

82
00:04:16,290 --> 00:04:20,543
‫Donc, celui-ci indique simplement la connexion.

83
00:04:21,970 --> 00:04:23,400
‫Et un deuxième

84
00:04:23,400 --> 00:04:25,540
‫ici, l'inscription que nous n'implémenterons en fait

85
00:04:27,210 --> 00:04:29,080
‫pas, vous pouvez donc l'implémenter vous-même

86
00:04:29,080 --> 00:04:30,660
‫si vous en avez envie.

87
00:04:30,660 --> 00:04:33,190
‫Donc en gros un formulaire d'inscription.

88
00:04:33,190 --> 00:04:34,490
‫Mais, depuis tout

89
00:04:34,490 --> 00:04:37,440
‫cela, donc tout le processus d'inscription va être très similaire

90
00:04:37,440 --> 00:04:39,220
‫à la connexion, j'ai décidé de

91
00:04:39,220 --> 00:04:42,130
‫ne pas l'inclure ici dans cette section car ce

92
00:04:42,130 --> 00:04:44,800
‫serait juste beaucoup de contenu en double et

93
00:04:44,800 --> 00:04:47,663
‫je ne veux pas rendre le cours inutilement long.

94
00:04:50,240 --> 00:04:52,480
‫Donnez-lui un coffre-fort, je ne sais pas

95
00:04:52,480 --> 00:04:55,730
‫si cela redémarre maintenant le serveur, en fait ce n'est pas

96
00:04:55,730 --> 00:04:56,730
‫le cas, alors

97
00:04:57,630 --> 00:05:00,113
‫enregistrons l'un de ces fichiers de script java.

98
00:05:01,930 --> 00:05:02,763
‫C'est

99
00:05:03,980 --> 00:05:06,470
‫maintenant notre site de référence.

100
00:05:06,470 --> 00:05:08,450
‫Rappelez-vous, c'est ce que nous voulons,

101
00:05:08,450 --> 00:05:09,357
‫est-ce celui-ci.

102
00:05:11,030 --> 00:05:12,890
‫Venons-en à toutes les

103
00:05:12,890 --> 00:05:16,320
‫visites et essayons maintenant notre itinéraire de connexion.

104
00:05:16,320 --> 00:05:19,550
‫Et, en effet, voici notre forme.

105
00:05:19,550 --> 00:05:20,383
‫Super.

106
00:05:21,650 --> 00:05:23,950
‫Maintenant, ici, nous pouvons

107
00:05:23,950 --> 00:05:25,730
‫mettre des

108
00:05:25,730 --> 00:05:29,140
‫e-mails, disons admin dot naders dot

109
00:05:29,140 --> 00:05:30,100
‫io.

110
00:05:30,100 --> 00:05:32,100
‫Et vous voyez qu'il

111
00:05:32,100 --> 00:05:34,790
‫formate bien cette entrée ici, que l'adresse

112
00:05:34,790 --> 00:05:36,860
‫e-mail soit réellement valide ou non.

113
00:05:36,860 --> 00:05:40,770
‫Par exemple, si je n'ai pas l'extension correcte ici, elle

114
00:05:40,770 --> 00:05:43,100
‫deviendra orange pour me dire

115
00:05:43,100 --> 00:05:45,580
‫que quelque chose ne va pas.

116
00:05:45,580 --> 00:05:47,730
‫Et la même chose pour le mot de passe.

117
00:05:47,730 --> 00:05:50,400
‫Tant que j'ai moins de huit caractères, ce

118
00:05:50,400 --> 00:05:52,200
‫sera toujours rouge, me

119
00:05:52,200 --> 00:05:54,423
‫disant essentiellement qu'il y a une erreur.

120
00:05:56,520 --> 00:05:58,260
‫Que maintenant que j'ai huit

121
00:05:58,260 --> 00:05:59,690
‫caractères, ça devient vert.

122
00:05:59,690 --> 00:06:01,970
‫Et si vous souhaitez savoir comment faire

123
00:06:01,970 --> 00:06:04,020
‫ce genre de magie avec

124
00:06:04,020 --> 00:06:07,670
‫CSS, n'hésitez pas à consulter le fichier CSS que j'ai codé

125
00:06:07,670 --> 00:06:09,390
‫uniquement pour ce cours.

126
00:06:09,390 --> 00:06:12,270
‫Quoi qu'il en soit, bien sûr, cliquer sur ce

127
00:06:12,270 --> 00:06:15,200
‫bouton ici fait maintenant absolument n'importe quoi, n'est-ce pas ?

128
00:06:15,200 --> 00:06:17,390
‫Ainsi, dans la vidéo suivante, nous allons

129
00:06:17,390 --> 00:06:20,390
‫réellement commencer à implémenter la fonctionnalité de connexion en effectuant

130
00:06:20,390 --> 00:06:23,570
‫une requête à notre point de terminaison API que nous

131
00:06:23,570 --> 00:06:24,823
‫avons déjà créé.