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 :

<button class="btn btn-default btn-sm pull-right" data-toggle="modal" data-target="#passwordCreate">Nouveau mot de passe</button>

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 :

<!-- New Password Modal -->
        <div class="modal fade" id="passwordCreate" role="dialog">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Nouveau mot de passe</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal row-border">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Titre</label>
                                <div class="col-md-10">
                                    <input v-model="newPassword.titre" type="text" class="form-control" id="titre-password" placeholder="Titre">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Url</label>
                                <div class="col-md-10">
                                    <input v-model="newPassword.url" type="text" class="form-control" id="url" placeholder="Url">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Username</label>
                                <div class="col-md-10">
                                    <input v-model="newPassword.username" type="text" class="form-control" id="username" placeholder="Username">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Mot de passe</label>
                                <div class="col-md-8">
                                    <input v-model="newPassword.motDePasse" type="text" class="form-control" id="motDePasse" placeholder="Mot de passe">
                                </div>
                                <div class="col-md-2">
                                    <button @click="generatePassword('new')" class="btn btn-default btn-success">Random</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Note</label>
                                <div class="col-md-10">
                                    <textarea v-model="newPassword.note" class="form-control" id="note" placeholder="note"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-md-12">
                            <button data-dismiss="modal" v-bind:disabled="isDisabled" @click="createNewMotDePasse" type="submit" class="btn btn-default btn-success">Ajouter</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

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 :

        data: function () {
            return {
                passwords: {},
                newPassword: {}
            }
        },

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

            createNewMotDePasse() {
                axios.post('/motdepasse/new', {
                    titre: this.newPassword.titre,
                    url: this.newPassword.url,
                    username: this.newPassword.username,
                    motDePasse: this.newPassword.motDePasse,
                    note: this.newPassword.note
                }).then(res => {
                    this.passwords.push(res.data)
                    //Reinit form
                    this.newPassword = {}
                })
            },

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 :

<button type="button" class="btn btn-info" @click="editPassword({id: pass.id, titre: pass.titre, url: pass.url, username:pass.username, motDePasse:pass.password, note:pass.note})" data-toggle="modal" data-target="#passwordEdit"><span class="glyphicon glyphicon-pencil"></span></button>

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 :

        <div class="modal fade" id="passwordEdit" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        <h4 class="modal-title">Modif d'un mot de passe</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal row-border">
                            <div class="form-group">
                                <label class="col-md-2 control-label">Id</label>
                                <div class="col-md-10">
                                    <input v-model="passwordEdited.id" type="text" class="form-control" id="edit-id" placeholder="Id" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Titre</label>
                                <div class="col-md-10">
                                    <input v-model="passwordEdited.titre" type="text" class="form-control" id="edit-titre-password" placeholder="Titre">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Url</label>
                                <div class="col-md-10">
                                    <input v-model="passwordEdited.url" type="text" class="form-control" id="edit-url" placeholder="Url">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Username</label>
                                <div class="col-md-10">
                                    <input v-model="passwordEdited.username" type="text" class="form-control" id="edit-username" placeholder="Username">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Mot de passe</label>
                                <div class="col-md-8">
                                    <input v-model="passwordEdited.motDePasse" type="text" class="form-control" id="edit-motDePasse" placeholder="Mot de passe">
                                </div>
                                <div class="col-md-2">
                                    <button @click="generatePassword('edit')" class="btn btn-default btn-success">Random</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-2 control-label">Note</label>
                                <div class="col-md-10">
                                    <textarea v-model="passwordEdited.note" class="form-control" id="edit-note" placeholder="note"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button data-dismiss="modal" v-bind:disabled="isDisabled" @click="savePassword" type="submit" class="btn btn-default btn-success">Modifier</button>
                    </div>
                </div>
            </div>
        </div>

On enregistre le mot de passe dans la base :

            /**
             * Save edit motdepasse
             */
            savePassword() {
                //On envoie la modif à Symfony
                axios.post('/motdepasse/save/' + parseInt(this.passwordEdited.id), {
                    titre: this.passwordEdited.titre,
                    url: this.passwordEdited.url,
                    username: this.passwordEdited.username,
                    motDePasse: this.passwordEdited.motDePasse,
                    note: this.passwordEdited.note
                }).then(res => {
                    //On modifie la ligne avec les nouvelles données
                    let idChanged = this.passwordEdited.id;
                    this.passwords.forEach(function (element) {
                        if (element.id === idChanged) {
                            element.username = res.data.username;
                            element.password = res.data.password;
                            element.titre = res.data.titre;
                            element.url = res.data.url;
                        }
                    });
                    this.passwordEdited = {}
                })
            },

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 :

<button type="button" class="btn btn-danger" @click="deletePassword(pass.id)"><span class="glyphicon glyphicon-trash"></span></button>

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

            /**
             * Suppression d'un mot de passe
             */
            deletePassword(id) {
                axios.get('/motdepasse/delete/' + parseInt(id)).then(res => {
                    if (res.data === 'ok') {
                        //On supprime le mot de passe du tableau
                        let idDeleted = id;
                        let cpt = 0;
                        let rowASupprimer = -1;
                        this.passwords.forEach(function (element) {
                            if (element.id === idDeleted) {
                                rowASupprimer = cpt;
                            }
                            cpt++;
                        });
                        if (rowASupprimer > -1) {
                            this.passwords.splice(rowASupprimer, 1);
                        }
                    }
                })
            }

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.