‫Jonas : Au cours des
‫deux prochaines conférences, nous ajouterons la fonctionnalité de connexion à notre site Web.
‫Et dans
‫cette conférence, nous commencerons par afficher
‫l'écran de connexion pour faciliter la
‫connexion des utilisateurs.
‫Une fois de plus, je veux vraiment que ce soit un défi pour
‫vous afin que vous puissiez réellement mettre en pratique certaines
‫des compétences que vous avez apprises.
‫Ce que je veux que vous fassiez, c'est de créer une
‫route de connexion slash.
‫Créez ensuite un contrôleur et,
‫bien sûr, un modèle.
‫Et ce modèle est vraiment facile.
‫C'est juste du HTML statique et nous n'avons pas
‫besoin de lui passer de variables.
‫Il y a un modèle pour
‫cela, en fait, ici dans le dossier des modèles.
‫Cela devrait donc être très facile à remplir pour vous.
‫Alors mettez cette vidéo en pause et revenez une fois que vous êtes prêt.
‫D'accord, bon retour.
‫J'espère que vous avez réussi ce défi.
‫Voici donc mon point de vue.
‫Le point de routeur obtient la route
‫est la connexion slash,
‫puis nous
‫utilisons le formulaire de connexion dot
‫get du contrôleur.
‫C'est donc le gestionnaire de route que je vais créer ensuite.
‫Exportez la réponse du formulaire de connexion dot get
‫et ici,
‫nous n'avons besoin que de la
‫demande et de la réponse.
‫En fait, ici, je vois qu'il
‫nous manque le suivant.
‫Toujours, lorsque nous avons des fonctions asynchrones encapsulées dans
‫catchAsync, nous devons toujours spécifier suivant.
‫Mais ici, tout ce que nous avons
‫vraiment besoin de faire est maintenant de rendre un modèle de connexion.
‫Nous n'avons donc pas encore créé ce modèle.
‫Mais cela s'appellera login.
‫Donc, disons res dot status
‫200,
‫modèle de
‫rendu appelé login.
‫Ensuite, comme pour toutes nos autres
‫pages, nous voulons en fait lui donner un titre personnalisé.
‫Pour cela, nous avons toujours passé un
‫objet avec la propriété title.
‫À droite?
‫Ainsi, le modèle de base lira ensuite ce titre et
‫le placera dans l'élément html du titre.
‫Dans ce cas,
‫le titre est simplement de vous connecter à votre compte.
‫Et c'est tout pour le gestionnaire d'itinéraire.
‫Maintenant, allons-y,
‫ouvrez le modèle de connexion,
‫sélectionnez tout, copiez
‫tout, fermez-le et créez la nouvelle vue ici.
‫Appelez, bien sûr, login dot pug.
‫Ensuite, collez ce code ici,
‫et maintenant vient à nouveau cette astuce où nous étendons notre
‫modèle de base.
‫Celui-ci s'étend au fichier de base, n'oubliez pas qu'ici nous devons créer un bloc avec
‫exactement le même nom que celui
‫que nous avons dans le fichier de base.
‫C'est donc le contenu.
‫Et avec ça, c'est fini, je
‫crois.
‫Bien sûr, nous devons mettre en retrait pour en faire un
‫enfant de ce bloc.
‫Mais, c'est en fait ça.
‫Maintenant, juste une autre chose que nous
‫devons faire est de définir un lien vers la page
‫de connexion afin que nous puissions réellement y accéder.
‫À l'heure actuelle, les boutons de connexion et d'inscription
‫utilisent en fait l'élément button.
‫Mais comme ça, on ne peut pas
‫vraiment spécifier l'attribut href.
‫Alors changeons-les en fait en un vrai lien.
‫Et ici, nous pouvons spécifier le href.
‫Donc, celui-ci indique simplement la connexion.
‫Et un deuxième
‫ici, l'inscription que nous n'implémenterons en fait
‫pas, vous pouvez donc l'implémenter vous-même
‫si vous en avez envie.
‫Donc en gros un formulaire d'inscription.
‫Mais, depuis tout
‫cela, donc tout le processus d'inscription va être très similaire
‫à la connexion, j'ai décidé de
‫ne pas l'inclure ici dans cette section car ce
‫serait juste beaucoup de contenu en double et
‫je ne veux pas rendre le cours inutilement long.
‫Donnez-lui un coffre-fort, je ne sais pas
‫si cela redémarre maintenant le serveur, en fait ce n'est pas
‫le cas, alors
‫enregistrons l'un de ces fichiers de script java.
‫C'est
‫maintenant notre site de référence.
‫Rappelez-vous, c'est ce que nous voulons,
‫est-ce celui-ci.
‫Venons-en à toutes les
‫visites et essayons maintenant notre itinéraire de connexion.
‫Et, en effet, voici notre forme.
‫Super.
‫Maintenant, ici, nous pouvons
‫mettre des
‫e-mails, disons admin dot naders dot
‫io.
‫Et vous voyez qu'il
‫formate bien cette entrée ici, que l'adresse
‫e-mail soit réellement valide ou non.
‫Par exemple, si je n'ai pas l'extension correcte ici, elle
‫deviendra orange pour me dire
‫que quelque chose ne va pas.
‫Et la même chose pour le mot de passe.
‫Tant que j'ai moins de huit caractères, ce
‫sera toujours rouge, me
‫disant essentiellement qu'il y a une erreur.
‫Que maintenant que j'ai huit
‫caractères, ça devient vert.
‫Et si vous souhaitez savoir comment faire
‫ce genre de magie avec
‫CSS, n'hésitez pas à consulter le fichier CSS que j'ai codé
‫uniquement pour ce cours.
‫Quoi qu'il en soit, bien sûr, cliquer sur ce
‫bouton ici fait maintenant absolument n'importe quoi, n'est-ce pas ?
‫Ainsi, dans la vidéo suivante, nous allons
‫réellement commencer à implémenter la fonctionnalité de connexion en effectuant
‫une requête à notre point de terminaison API que nous
‫avons déjà créé.