Appli de gestion de mot de passe en Symfony et Vue.js (Partie 3)

Dernier chapitre de notre développement, où nous allons ajouter, modifier et supprimer des mots de passe.

Cet article est écrit en 3 parties :

Vous pouvez retrouver le projet complet ici : https://github.com/gponty/gespassvuejs

Pour ce chapitre nous n’allons coder seulement dans le fichier motdepasseComponent.vue

On va commencer par créer un nouveau mot de passe, il va nous falloir un bouton :

Que vous pouvez mettre par exemple juste en dessous du titre « Liste des mots de passe ».
Ce bouton ouvre une modale que nous allons coder :

Rien de compliqué, nous créons tous les champs correspondant à notre entité (sauf les dates createAt et updatedAt qui seront mis à jour automatiquement)

Nous ajoutons aussi un bouton qui permet de générer aléatoirement un mot de passe.

Il ne faut pas oublier d’ajouter la variable newPassword dans la liste des variables vuejs :

Il ne nous reste plus qu’à créer la méthode d’enregistrement du mot de passe :

Une fois un mot de passe ajouté, ce serait bien de pouvoir le modifier.

On va d’abord ajouter un bouton sur la ligne de chaque mot de passe :

On passe toutes les variables du mot de passe à éditer, qui grâce au DOM se mettront à jour dans la modal de modif, que l’on ajoutera à la fin de notre code HTML :

On enregistre le mot de passe dans la base :

Et pour terminer nous allons supprimer le mot de passe.

Idem que pour la modif on va ajouter un bouton sur chaque ligne de mot de passe :

On va simplement passer l’id du mot de passe à supprimer à la fonction deletePassword :

Et voilà s’en est terminé de notre appli !

 

3 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.