‫Instructeur :
‫Dans cette vidéo, nous allons créer la page du
‫compte utilisateur principalement en utilisant des concepts que nous connaissons
‫déjà et déjà utilisés auparavant.
‫Et commençons par jeter un œil
‫à ce que je veux dire par la page compte utilisateur
‫de notre site de référence donc ici sur natours. dév.
‫Nous avons donc déjà rendu ce menu ici
‫sur notre site
‫Web, mais lorsque nous cliquons ensuite sur cet utilisateur, nous
‫avons accès à la page du compte utilisateur.
‫Et donc ici, nous pouvons modifier certains paramètres de base,
‫télécharger également une nouvelle photo, mais celle-ci
‫nous allons le faire dans
‫la section suivante en
‫fait, et l'utilisateur peut également mettre à jour son mot de passe sur cette page.
‫Ensuite, sur le côté gauche, il y a quelques
‫éléments de menu, que nous
‫n'implémenterons pas vraiment, nous n'implémenterons donc que
‫le menu, mais pas vraiment les pages vers lesquelles
‫ils pointent, puis si l'utilisateur est un administrateur,
‫nous rendons également cette partie vers le bas ici.
‫D'accord, c'est donc ce que nous allons construire dans cette conférence, et
‫dans les deux prochaines conférences, nous
‫nous occuperons alors de vraiment mettre à jour les paramètres.
‫Donc, en gros, faire fonctionner ces boutons ici.
‫Très bien?
‫Mais pour l'instant, il s'agit simplement de rendre cette page ici
‫sur ce . moi URL.
‫D'accord?
‫Commençons donc par le modèle carlin.
‫D'accord, et comme toujours,
‫j'ai déjà ce modèle de compte ici.
‫Alors saisissons-le, copions-le, puis créons
‫une nouvelle vue ici, que
‫j'appelle compte.
‫Et maintenant, nous voulons étendre
‫la base et nous voulons créer un bloc appelé contenu comme toujours.
‫Et puis c'est ici que nous collons réellement notre contenu.
‫Très bien?
‫Maintenant, nous devons indenter
‫tout cela pour le faire à l'intérieur du bloc.
‫Génial, alors, nous avons d'abord notre navigation, n'est-ce pas ?
‫Donc, les paramètres, les réservations, les avis et les
‫facturations que nous avons vus sur le
‫côté gauche de la page, puis nous avons également la navigation Admin, n'est-ce pas ?
‫Et ils voient déjà beaucoup de code en double ici.
‫Donc, fondamentalement, ces éléments d'élément de liste
‫ici, ils apparaissent en fait huit fois.
‫Donc, quatre fois ici et quatre fois ici, créons donc très
‫rapidement un mixin pour eux afin de rendre
‫notre code un peu plus propre.
‫Très bien, donc je vais aller
‫de l'avant et copier l'un d'entre eux.
‫Et puis créez un nouveau mixin appelé navItem.
‫D'accord, donc nous l'avons fait avant.
‫C'est donc très similaire.
‫Alors, que devons-nous transmettre dans ce
‫mixin afin de personnaliser essentiellement chacun de ces éléments ?
‫Eh bien, ce qui va changer, c'est le lien.
‫Aussi le texte, donc les paramètres, les réservations, et cetera.
‫C'est donc du texte.
‫Ensuite, l'icône va également changer, et enfin
‫vous voyez que ce premier
‫ici a la classe side-nav--active, n'est-ce pas ?
‫Et donc nous allons également spécifier un actif comme ici en gros.
‫Et puis, lorsque nous voulons marquer un élément
‫comme actif, nous passerons simplement par ici.
‫D'accord?
‫Nous devons donc maintenant corriger l'indentation ici.
‫Et puis transmettre nos données.
‫Vient ensuite le texte.
‫Donc, bien sûr, à ce
‫stade, ce n'est pas nouveau, donc je le fais assez rapidement ici, n'est-ce pas ?
‫Donc icon puis le nom de l'icone que l'on passe.
‫Donc, tout comme nous l'avons fait
‫auparavant, et puis finalement, cet
‫actif ici, rappelez-vous, sera soit vrai, soit faux.
‫Et si c'est vrai, nous voulons ajouter cette classe.
‫Alors copions-le.
‫Et puis ici, spécifions l'attribut class.
‫Et puis comme nous
‫l'avons fait, faisons une déclaration de tournage ici.
‫Donc, dire si actif, fondamentalement, alors ici
‫nous voulons avoir side-nav-actif.
‫Et sinon, nous ne voulons rien.
‫Donc un nom de classe vide, en gros.
‫Très bien.
‫Et maintenant, nous pouvons remplacer cela par notre mixin.
‫C'est ce qu'on appelle navItem, et souvenez-vous,
‫nous écrivons + puis navItem.
‫Donc ici le lien est un lien vide.
‫Et en fait pour tous pour le moment.
‫Puis
‫Paramètres, puis le
‫nom de l'icône qui est aussi paramètres,
‫mais en minuscule.
‫Et puis finalement celui-ci est effectivement actif, et donc
‫on passe en vrai.
‫Très bien, dupliquons-le.
‫Ayez une mallette et nous avons Mes réservations.
‫Mettons ça en minuscule.
‫D'accord, duplique-le encore deux fois.
‫Donc ici nous
‫avons l'étoile et puis
‫ici la carte de crédit pour la facturation.
‫Très bien.
‫Et maintenant, nous avons la navigation administrateur.
‫Et celui-ci ne sera
‫visible que si l'utilisateur actuel est un administrateur.
‫Alors définissons cela en utilisant une instruction if.
‫Et donc ici, nous devons tester si le rôle d'utilisateur est
‫égal à celui d'administrateur, n'est-ce pas ?
‫Et c'est,
‫encore une fois, l'une de ces instructions if
‫plus complexes et nous devons donc utiliser JavaScript pour cela.
‫J'utilise donc à nouveau du code sans tampon.
‫Et puis si
‫et donc nous aurons accès à la variable utilisateur ici.
‫Donc, tout comme nous l'avons fait dans d'autres modèles.
‫Donc, en gros, nous allons le transmettre ici.
‫Et puis bien sûr, l'utilisateur a l'attribut role, et
‫donc on teste s'il est admin.
‫Et si c'est le cas, nous voulons afficher tout cela.
‫Et donc, il doit maintenant être en retrait d'un niveau.
‫D'accord?
‫Et bien sûr, nous voulons maintenant
‫remplacer tout cela ici par notre mixin également.
‫Donc quatre fois.
‫Celui-ci s'appelle la carte.
‫Gérer les tournées.
‫Celui-ci est Gérer les utilisateurs.
‫Gérer les avis.
‫Et puis enfin nous en avons un avec la mallette.
‫Et celui-ci n'a pas le texte ici, mais
‫c'est Gérer les réservations.
‫Très bien.
‫Alors débarrassons-nous de cela et continuons notre travail ici.
‫Donc celui-ci ici sera le
‫formulaire pour modifier les paramètres de l'utilisateur.
‫Et donc les données personnelles seront ici dans ces valeurs, d'accord ?
‫Donc, fondamentalement, dans un élément d'entrée HTML, la valeur est
‫une sorte de texte prédéfini que
‫nous pouvons mettre à l'intérieur d'un élément d'entrée.
‫Et donc généralement, ce que nous
‫y mettons est la valeur actuelle de cette entrée,
‫donc de ce champ.
‫Et donc maintenant, c'est bien sûr le nom de l'utilisateur.
‫Et donc mettons ça ici.
‫Utilisateur. Nom.
‫Et puis ici en bas c'est
‫alors bien sûr l'email.
‫Et ici, nous avons aussi l'image de l'utilisateur.
‫Ainsi, les utilisateurs de la barre oblique d'image coupent le nom de l'image elle-même.
‫D'accord.
‫Alors ici-bas, il n'y a rien à faire.
‫Très bien?
‫Et en fait c'est tout.
‫C'est donc vraiment toutes les données qui
‫proviennent de l'objet utilisateur que
‫nous devons insérer.
‫D'accord, c'est donc le modèle.
‫Allons maintenant de l'avant et ajoutons l'itinéraire au viewRouter.
‫Alors ici, et celui-ci s'appellera /moi.
‫Et donc nous allons avoir un contrôleur appelé getAccount.
‫Maintenant, celui-ci, bien
‫sûr, sera en fait un itinéraire protégé, n'est-ce pas ?
‫Parce que ce n'est que si nous sommes
‫réellement connectés que nous aurons accès à cette page.
‫Et nous devons donc utiliser notre middleware de protection ici.
‫C'est donc un authController. protéger.
‫D'accord?
‫Donc, tout comme nous l'avons fait avec tous les autres itinéraires protégés.
‫Maintenant, un problème que je vois avec
‫cela est que ce middleware
‫de protection ici est très similaire à isLoggedIn.
‫Et donc nous allons en fait faire des opérations de duplication là-bas,
‫ce qui n'est pas idéal.
‫Parce que rappelez-vous que cet isLoggedIn
‫s'exécutera pour toutes les demandes, n'est-ce pas ?
‫Jetons donc un coup d'œil à ceux-ci pour que je
‫puisse faire valoir mon point de vue.
‫Donc, dans protect, nous obtenons l'utilisateur actuel ici.
‫Nous avons donc ce findById ici.
‫Mais nous faisons la
‫même chose ici en étant connecté, d'accord ?
‫Et donc en utilisant isLoggedIn et protect en même temps, nous ferons
‫cette requête deux fois.
‫Et donc ce n'est pas idéal bien sûr.
‫Et donc mettons ce isLoggedIn ici uniquement sous les
‫routes qui ne sont pas protégées, d'accord ?
‫Parce que sur
‫la route protégée, cette vérification
‫si l'utilisateur est connecté se produira également, n'est-ce pas ?
‫Mais pas dans ce middleware,
‫mais dans le
‫middleware de protection, car il vérifie également cela, n'est-ce pas ?
‫Alors coupons-le d'ici et collons-le simplement dans d'autres
‫routes qui ne sont pas protégées.
‫D'accord, ça a du sens ?
‫Et donc comme ça, nous n'avons pas ce
‫problème de faire exactement la même requête deux fois
‫dans tous les middlewares protégés.
‫Et c'est un peu mieux pour nos performances.
‫Maintenant, cette chose que nous faisons dans isLoggedIn
‫et que nous ne faisons
‫pas actuellement dans protect est la suivante.
‫Nous mettons donc un utilisateur actuel sur la réponse. des locaux.
‫Et donc faisons la
‫même chose maintenant dans le currentUser.
‫Et donc faisons la même chose ici dans le middleware protect.
‫Donc, vous mettez le currentUser à la fois sur demande. utilisateur et sur
‫réponse. locaux, d'accord ?
‫Pour que nous puissions ensuite l'utiliser
‫automatiquement dans tous les modèles après lui.
‫Donc dans ce cas, dans notre modèle de compte, d'accord ?
‫Alors donnez-lui une sauvegarde.
‫Et maintenant, nous devons ajouter ce contrôleur getAccount afin, bien
‫sûr, de corriger cette erreur que nous
‫obtenons actuellement.
‫C'est donc dans viewsController,. demande et réponse getAccount.
‫Et vous verrez dans une seconde pourquoi nous n'avons besoin que de ces deux-là.
‫Donc, pour obtenir la page du compte, tout ce que nous avons vraiment besoin de
‫faire est simplement de rendre cette page.
‫Nous n'avons même pas besoin d'interroger l'utilisateur actuel car cela a
‫déjà été fait dans le middleware de
‫protection, n'est-ce pas ?
‫Et donc vraiment tout ce que nous avons vraiment besoin de
‫faire est de faire quelque chose comme ça.
‫Copiez donc ce code,
‫puis ici compte.
‫Et donnons-lui un titre de Votre compte.
‫Très bien, donc ça fait disparaître cette erreur.
‫Et maintenant, comme dernière pièce du puzzle, ajoutons le bon
‫lien, en fait, dans l'en-tête.
‫Donc, ici, dans notre en-tête, le lien ne pointe pas
‫vers cette page de compte, n'est-ce pas ?
‫Donc ça ne pointe nulle part.
‫Et donc il devrait maintenant pointer vers /me.
‫D'accord, et cela devrait être
‫la dernière pièce pour que cela fonctionne.
‫Et donc connectons-nous ici maintenant
‫avec le test un, deux, trois, quatre.
‫Nous sommes connectés avec succès.
‫Et maintenant, en cliquant ici, nous obtenons notre page.
‫Fantastique.
‫Maintenant, il y a une erreur ici avec la photo de l'utilisateur.
‫Alors corrigeons ça.
‫Mais à côté de cela, en fait, tout fonctionne très bien.
‫Nous obtenons également ce menu ici car nous sommes actuellement
‫en mode administrateur et testons-le également dans une seconde pour voir
‫s'il disparaît pour les autres utilisateurs.
‫Et en fait, nous obtenons également cette erreur
‫ici parce que nous avons une requête échouée pour l'image.
‫Et donc nous voyons déjà que nous faisons probablement quelque
‫chose de mal là-bas.
‫Et donc ici
‫dans l'image, bien sûr, ce n'est pas l'utilisateur. nom, c'est l'utilisateur. photo.
‫Alors faites une sauvegarde, rechargez ici.
‫Et maintenant en effet, nous y voilà.
‫Très bien?
‫Alors maintenant, déconnectons-nous, voyons ce qui se passe ensuite.
‫Et puis nous obtenons ce genre d'erreur.
‫Et c'est essentiellement parce que nous
‫essayons d'accéder à cette route protégée sans être connecté.
‫Très bien?
‫Essayons donc à nouveau maintenant.
‫Donc, si nous essayons de nous connecter
‫avec /me, nous constatons que vous n'êtes pas connecté, d'accord ?
‫Et avant que nous ayons cette erreur d'apparence étrange parce
‫que nous sommes actuellement en cours de développement.
‫Mais en production, bien sûr, nous ne verrions pas cette erreur étrange
‫que nous avons vue auparavant.
‫À droite?
‫Mais ce que
‫nous voyons maintenant, c'est que, bien sûr, notre itinéraire est vraiment protégé.
‫Nous ne pouvons donc pas y accéder si nous ne sommes pas connectés.
‫Maintenant, juste pour finir, connectons-nous avec un autre compte
‫juste pour
‫voir si la partie administrateur fonctionne également.
‫Alors, encore une fois, utilisons Laura ici.
‫Et vous voyez qu'elle n'est qu'une utilisatrice régulière.
‫Très bien.
‫Et maintenant
‫nous obtenons son compte utilisateur, sans bien sûr, le menu admin.
‫D'accord, parfait.
‫C'est donc la construction de la page du compte.
‫Et comme je l'ai dit précédemment, dans la prochaine
‫vidéo, nous nous occuperons ensuite de la mise à
‫jour effective de ces paramètres de compte.