add copy password modal

src/app/Entries/CopyPassword.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="modal fade" id="copyPasswordModal" tabindex="-1" role="dialog" aria-labelledby="copyPassword"
+         aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content text-xs-left">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                    <h4 class="modal-title" id="copyPassword">{{{ $t('entry.copy_password') }}}</h4>
+                </div>
+                <div class="modal-body text-xs-left">
+                    <form id="password-generator-form">
+                        <!-- remove autofill for pg-masterpassword -->
+                        <input type="text" id="login" style="display: none">
+                        <input type="password" id="password" style="display: none">
+                        <div class="form-group row">
+                            <div class="col-lg-12 m-t-1">
+                                <label for="pg-masterpassword" class="sr-only">
+                                    {{ $t('passwordgenerator.what_is_your_secret') }}
+                                </label>
+                                <div class="input-group">
+                                    <input id="pg-masterpassword"
+                                           class="form-control"
+                                           type="password"
+                                           placeholder="{{ $t('passwordgenerator.what_is_your_secret') }}"
+                                           v-model="password"
+                                           autocomplete="off">
+                                    <span class="input-group-btn" tabindex="-1"
+                                          @click="changeType('pg-masterpassword')">
+                                        <button class="btn btn-secondary" tabindex="-1" type="button"
+                                                v-bind:style="{ backgroundColor: passwordColor }">
+                                            <i class="fa fa-eye"></i>
+                                        </button>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
+                        {{{ $t('entry.Cancel') }}}
+                    </button>
+                    <button type="button" class="btn btn-danger" @click="copyPassword()">
+                        {{{ $t('entry.Copy') }}}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script type="text/ecmascript-6">
+    import http from '../../services/http';
+    import logging from '../../services/logging';
+    import lesspass from 'lesspass'
+
+    export default {
+        data() {
+            return {
+                password: ''
+            };
+        },
+        props: ['entry'],
+        methods: {
+            copyPassword() {
+                lesspass.createMasterPassword(this.entry.login, this.password).then((masterPassword) => {
+                    var entry = {
+                        site: this.entry.site,
+                        password: this.entry.password
+                    };
+                    $('#copyPasswordModal').modal('hide');
+                    window.prompt(this.$t('entry.copy_to_clipboard'), lesspass.createPassword(masterPassword, entry));
+                });
+            },
+            changeType(id) {
+                if (document.getElementById(id).type == 'password') {
+                    document.getElementById(id).type = 'text';
+                } else {
+                    document.getElementById(id).type = 'password';
+                }
+            }
+        },
+    };
+</script>

src/app/Entries/DeleteEntryButton.vue

@@ -2,7 +2,7 @@
     <button class="btn btn-danger btn-sm m-b-0" data-toggle="modal" data-target="#deleteEntryModal">
         <i class="fa fa-trash-o fa-lg"></i>
     </button>
-    <div class="modal fade" id="deleteEntryModal" tabindex="-1" role="dialog" aria-labelledby="newEntry"
+    <div class="modal fade" id="deleteEntryModal" tabindex="-1" role="dialog" aria-labelledby="deleteEntry"
          aria-hidden="true">
         <div class="modal-dialog" role="document">
             <div class="modal-content text-xs-left">
@@ -10,7 +10,7 @@
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                         <span aria-hidden="true">&times;</span>
                     </button>
-                    <h4 class="modal-title" id="newEntry">{{{ $t('entry.Delete_entry') }}}</h4>
+                    <h4 class="modal-title" id="deleteEntry">{{{ $t('entry.Delete_entry') }}}</h4>
                 </div>
                 <div class="modal-body text-xs-left">
                     {{{ $t('entry.delete_are_you_sure') }}}

src/app/Entries/UpdateEntry.vue

@@ -24,14 +24,22 @@
 </template>
 <script type="text/ecmascript-6">
     import EntryForm from './EntryForm';
-    import DeleteButton from './DeleteEntryButton.vue';
+    import DeleteButton from './DeleteEntryButton';
     import logging from '../../services/logging';
     import http from '../../services/http';
 
     export default {
         data() {
             return {
-                entry: {}
+                entry: {
+                    login: '',
+                    site: '',
+                    password: {
+                        counter: 1,
+                        length: 12,
+                        settings: ["lowercase", "uppercase", "numbers", "symbols"]
+                    },
+                }
             };
         },
         components: {

src/app/Index.vue

@@ -89,11 +89,13 @@
                 </div>
             </div>
         </div>
+        <copy-password-modal :entry="selectedEntry"></copy-password-modal>
     </div>
 </template>
 <script type="text/ecmascript-6">
     import 'bootstrap/dist/js/umd/modal';
     import NewEntry from './Entries/newEntry';
+    import CopyPasswordModal from './Entries/CopyPassword';
     import http from '../services/http';
     export default {
         data() {
@@ -102,6 +104,7 @@
                 offset: 0,
                 currentPage: 1,
                 entries: [],
+                selectedEntry: null,
                 numberPages: 1,
                 count: 0,
                 clicks: 0
@@ -109,6 +112,7 @@
         },
         components: {
             NewEntry,
+            CopyPasswordModal
         },
         ready(){
             this.getEntries(this.limit, this.offset);
@@ -132,7 +136,8 @@
                 this.getEntries(this.limit, this.offset);
             },
             copyPassword(entry){
-                alert('password copied !');
+                this.selectedEntry = entry;
+                $('#copyPasswordModal').modal('show');
             },
             openEntry(entry){
                 this.$router.go(`/app/entries/${entry.id}/`);