change password profile delete button to be more user friendly

src/components/DeleteButton.vue

@@ -1,41 +1,18 @@
-<style>
-    .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-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 }}
+        <div class="form-group has-danger" v-if="confirm">
+            <button type="button" class="btn btn-danger btn-sm" v-on:click.prevent="confirmDelete">
+                {{ confirmButton }}
+            </button>
+            <button type="button" class="btn btn-secondary btn-sm" v-on:click.prevent="confirm=false">
+                {{ cancelButton }}
+            </button>
+            <div class="form-control-feedback">{{ confirmText }}</div>
+        </div>
+        <button type="button" class="btn btn-outline-danger btn-sm"
+                v-if="!confirm"
+                v-on:click.prevent="confirm=true">
+            <i class="fa-white fa fa-trash fa-fw text-danger"></i>
         </button>
     </div>
 </template>
@@ -43,53 +20,27 @@
     export default {
         data() {
             return {
-                progress: false,
-                pressTimer: null,
-                longPress: false,
-                confirmHelp: ''
+                confirm: false
             }
         },
         props: {
-            action: {type: Function, required: true},
-            text: {type: String, required: true},
-            object: {type: Object, required: true}
-        },
-        methods: {
-            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';
+            confirmText: {
+                type: String,
+                default: 'Are you sure you want to delete this?'
             },
-            cancel(){
-                if (this.pressTimer !== null) {
-                    clearTimeout(this.pressTimer);
-                    this.pressTimer = null;
-                    this.confirmHelp = '';
-                }
-                this.progress = false;
+            confirmButton: {
+                type: String,
+                default: 'Sure delete it'
             },
-            deleteConfirmed(){
-                setTimeout(() => {
-                    this.action(this.object);
-                }, 1000);
+            cancelButton: {
+                type: String,
+                default: 'Oups no!'
+            }
+        },
+        methods: {
+            confirmDelete(){
+                this.confirm = false;
+                this.$emit('remove');
             }
         }
     }

src/views/PasswordGenerator.vue

@@ -151,15 +151,17 @@
                 This is a password in version 1.
                 You should update your password and use version 2
                 <br>
-               <a href="#" v-on:click.prevent="showOptions=!showOptions" v-if="!showOptions"> show me the options</a>
+                <a href="#" v-on:click.prevent="showOptions=!showOptions" v-if="!showOptions"> show me the options</a>
             </div>
         </div>
         <div class="form-group" v-if="version === 1 && !showError">
             <div class="alert alert-warning" role="alert">
-                You are using LessPass <strong>version&nbsp;1</strong> which is deprecated.
-                We will load the <strong>version&nbsp;2</strong> by default on january 1st, 2017.
-                <br>You can still use version 1 in options after this period.
-                <br> <a href="#" v-on:click.prevent="changeVersion(2)">Use version 2 now</a>
+                <small>
+                    You are using LessPass <strong>version&nbsp;1</strong> which is deprecated.
+                    We will load the <strong>version&nbsp;2</strong> by default on january 1st, 2017.
+                    <br>You can still use version 1 in options after this period.
+                    <br> <a href="#" v-on:click.prevent="changeVersion(2)">Use version 2 now</a>
+                </small>
             </div>
         </div>
     </form>

src/views/Passwords.vue

@@ -1,40 +1,33 @@
 <template>
     <div>
-        <form>
-            <div class="form-group row">
-                <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">
-                    </div>
-                </div>
-            </div>
-        </form>
-        <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>
-                        </li>
-                        <li>
-                            {{password.login}}
-                        </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 class="form-group row">
+            <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">
                 </div>
             </div>
         </div>
-    </div>
+        <ul class="list-group">
+            <li class="list-group-item" v-for="password in filteredPasswords">
+                <delete-button class="float-xs-right mt-1"
+                               confirmText="Are you sure you want to delete this password profile?"
+                               confirmButton="Sure delete it"
+                               cancelButton="Oups no!"
+                               v-on:remove="deletePassword(password)">
+                </delete-button>
+                <ul class="list-unstyled">
+                    <li>
+                        <router-link :to="{ name: 'password', params: { id: password.id }}">
+                            {{password.site}}
+                        </router-link>
+                    </li>
+                    <li>
+                        {{password.login}}
+                    </li>
+                </ul>
+            </li>
+        </ul>
     </div>
 </template>
 <script type="text/ecmascript-6">