remove confirm box and add a long press button

help to fix confirm box that doesn't work on Firefox web extension
https://github.com/lesspass/lesspass/issues/29

src/components/DeleteButton.vue

@@ -2,11 +2,40 @@
     .fa-white {
         color: #ffffff;
     }
+
+    #delete-button {
+        position: relative;
+    }
+
+    .btn-progress:before {
+        content: "";
+        position: absolute;
+        background: #D9534F;
+        bottom: 0;
+        left: 0;
+        top: 80%;
+        z-index: 1;
+        animation: 2s progress;
+    }
+
+    @keyframes progress {
+        0% {
+            right: 100%;
+        }
+        100% {
+            right: 0;
+        }
+    }
 </style>
 <template>
     <div id="delete-button">
-        <button type="button" class="btn btn-danger" v-on:click="confirm">
-            <i class="fa-white fa fa-trash"></i>
+        <button type="button" class="btn btn-danger"
+                v-bind:class="{ 'btn-progress': progress}"
+                v-on:mouseup="click"
+                v-on:mousedown="start"
+                v-on:mouseout="cancel">
+            <i class="fa-white fa fa-trash fw"></i>
+            {{ confirmHelp }}
         </button>
     </div>
 </template>
@@ -14,7 +43,10 @@
     export default {
         data() {
             return {
-                pending: false
+                progress: false,
+                pressTimer: null,
+                longPress: false,
+                confirmHelp: ''
             }
         },
         props: {
@@ -23,12 +55,41 @@
             object: {type: Object, required: true}
         },
         methods: {
-            confirm() {
-                this.pending = true;
-                var response = confirm(this.text);
-                if (response == true) {
-                    this.action(this.object);
+            start(event){
+                if (event.type === "click" && event.button !== 0) {
+                    return;
+                }
+                this.longPress = false;
+                this.progress = true;
+                this.pressTimer = setTimeout(() => {
+                    this.longPress = true;
+                    this.deleteConfirmed();
+                }, 2000);
+                return false;
+            },
+            click(){
+                if (this.longPress) {
+                    return;
+                }
+                if (this.pressTimer !== null) {
+                    clearTimeout(this.pressTimer);
+                    this.pressTimer = null;
                 }
+                this.progress = false;
+                this.confirmHelp = 'Long Press To Confirm';
+            },
+            cancel(){
+                if (this.pressTimer !== null) {
+                    clearTimeout(this.pressTimer);
+                    this.pressTimer = null;
+                    this.confirmHelp = '';
+                }
+                this.progress = false;
+            },
+            deleteConfirmed(){
+                setTimeout(() => {
+                    this.action(this.object);
+                }, 1000);
             }
         }
     }

src/views/Passwords.vue

@@ -1,15 +1,8 @@
-<style>
-    #passwords {
-        max-height: 320px;
-        overflow-y: scroll;
-        overflow-x: hidden;
-    }
-</style>
 <template>
     <div>
         <form>
             <div class="form-group row">
-                <div class="col-sm-7">
+                <div class="col-xs-12">
                     <div class="inner-addon left-addon">
                         <i class="fa fa-search"></i>
                         <input class="form-control" name="search" placeholder="Search" v-model="searchQuery">
@@ -17,36 +10,32 @@
                 </div>
             </div>
         </form>
-        <div id="passwords" class="row">
-            <div class="col-xs-12">
-                <table class="table">
-                    <tbody>
-                    <tr v-if="passwords.length === 0">
-                        <td>
-                            You don't have any passwords saved in your database.
-                            <br>
-                            <router-link :to="{ name: 'home'}">Would you like to create one ?</router-link>
-                        </td>
-                    </tr>
-                    <tr v-for="password in filteredPasswords">
-                        <td>
+        <div id="passwords">
+            <div class="row" v-for="password in filteredPasswords">
+                <div class="col-xs-9">
+                    <ul class="list-unstyled">
+                        <li>
                             <router-link :to="{ name: 'password', params: { id: password.id }}">
                                 {{password.site}}
                             </router-link>
-                            <br>
+                        </li>
+                        <li>
                             {{password.login}}
-                        </td>
-                        <td class="text-xs-right">
-                            <delete-button :action="deletePassword" :object="password"
-                                           text="Are you sure you want to delete this password ?">
-                            </delete-button>
-                        </td>
-                    </tr>
-                    </tbody>
-                </table>
+                        </li>
+                    </ul>
+                </div>
+                <div class="col-xs-3">
+                    <delete-button class="float-xs-right"
+                                   style="position: absolute; right: 1em;margin-top: 3px;"
+                                   :action="deletePassword"
+                                   :object="password"
+                                   text="Are you sure you want to delete this password ?">
+                    </delete-button>
+                </div>
             </div>
         </div>
     </div>
+    </div>
 </template>
 <script type="text/ecmascript-6">
     import DeleteButton from '../components/DeleteButton.vue';