Add undo button for profile deletion

Fixes: https://github.com/lesspass/lesspass/issues/235

src/components/PasswordProfile.vue

@@ -23,24 +23,67 @@
   .passwordProfile__actions {
     line-height: 38px;
   }
+
+  .tooltip--undo {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 20;
+  }
+
+  .passwordProfile {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  }
+
+  .tooltip-fade-enter-active {
+    transition: opacity 1s
+  }
+
+  .tooltip-fade-leave-active {
+    transition: opacity 0s
+  }
+
+  .tooltip-fade-enter, .tooltip-fade-leave-to {
+    opacity: 0
+  }
+
 </style>
 <template>
-  <div class="passwordProfile">
-    <avatar v-bind:name="password.site"></avatar>
-    <div class="passwordProfile__meta" v-on:click="setPassword">
-      <div class="passwordProfile__site">
-        {{password.site}}
+  <div>
+    <transition name="fade">
+      <div class="passwordProfile" v-if="!undo">
+        <avatar v-bind:name="password.site"></avatar>
+        <div class="passwordProfile__meta" v-on:click="setPassword">
+          <div class="passwordProfile__site">
+            {{password.site}}
+          </div>
+          <div class="passwordProfile__login">
+            {{password.login}}
+          </div>
+        </div>
+        <div class="passwordProfile__actions">
+          <button type="button" class="btn btn-outline-danger btn-sm"
+                  v-on:click="deletePassword()">
+            <i class="fa fa-trash fa-fw"></i>
+          </button>
+        </div>
       </div>
-      <div class="passwordProfile__login">
-        {{password.login}}
+    </transition>
+    <transition name="tooltip-fade">
+      <div class="tooltip--undo card-inverse p-2" v-if="undo">
+        <div class="row">
+          <div class="col">
+            <span class="text-white">{{ $t('Password profile deleted') }}</span>
+            <span
+              class="pull-right text-warning btn-link"
+              v-on:click="cancelDeletion()">{{ $t('UNDO') }}</span>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="passwordProfile__actions">
-      <button type="button" class="btn btn-outline-danger btn-sm"
-              v-on:click="deletePassword()">
-        <i class="fa fa-trash fa-fw"></i>
-      </button>
-    </div>
+    </transition>
   </div>
 </template>
 <script type="text/ecmascript-6">
@@ -58,18 +101,28 @@
     components: {
       Avatar
     },
+    data(){
+      return {
+        undo: false,
+        undoTimeout: null,
+        deleted: true
+      }
+    },
     methods: {
       deletePassword(){
-        var r = confirm(this.$t('DeleteProfileConfirm', 'Are you sure you want to delete this password profile?'));
-        if (r === true) {
-          message.success(this.$t('PasswordProfileSuccessfullyDeleted', 'Your password profile has been successfully deleted!'));
+        this.undo = true;
+        this.undoTimeout = setTimeout(() => {
           this.$emit('deleted');
-          return this.$store.dispatch('deletePassword', {id: this.password.id});
-        }
+          this.$store.dispatch('deletePassword', {id: this.password.id});
+        }, 10000)
       },
       setPassword(){
-          this.$store.dispatch('savePassword', {password: this.password});
-          this.$router.push({name: 'home'});
+        this.$store.dispatch('savePassword', {password: this.password});
+        this.$router.push({name: 'home'});
+      },
+      cancelDeletion(){
+        clearTimeout(this.undoTimeout);
+        this.undo = false;
       }
     }
   }

src/views/Passwords.vue

@@ -12,13 +12,7 @@
     cursor: pointer;
   }
 
-  .passwords__profile {
-    padding-top: 0.5em;
-    padding-bottom: 0.5em;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-  }
-
-  .passwords__profile:last-child {
+  .passwords__profile:last-child .passwordProfile{
     border-bottom: none;
   }
 </style>