Add option to create passwords manually

Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>

3 files changed, 102 insertions, 62 deletions

diff --git a/src/vue/Components/Collected/MinedProperty.vue b/src/vue/Components/Collected/MinedProperty.vue
index 0d4f978..78541e5 100644
--- a/src/vue/Components/Collected/MinedProperty.vue
+++ b/src/vue/Components/Collected/MinedProperty.vue
@@ -1,8 +1,9 @@
 <template>
     <div :class="classList">
-        <label :for="id" @dblclick="edit()" :title="editing ? '':title">{{label}}</label>
-        <div @dblclick="edit()" v-if="!editing" :title="title">{{text}}</div>
-        <input-field :id="id" :type="type" v-model="value" @keypress="checkEnter($event)" title="TitleEnterToExit" v-else/>
+        <label :for="id" @dblclick="edit()" :title="title">{{ label }}</label>
+        <div @dblclick="edit()" v-if="!editing" :title="title">{{ text }}</div>
+        <input-field :id="id" v-model="value" @keypress="checkEnter($event)" title="TitleEnterToExit" v-else-if="type === 'text'"/>
+        <slider-field :id="id" v-model="value" v-else/>
     </div>
 </template>
 
@@ -11,9 +12,10 @@
     import MiningItem from '@js/Models/Queue/MiningItem';
     import MessageService from '@js/Services/MessageService';
     import InputField from '@vue/Components/Form/InputField';
+    import SliderField from "@vue/Components/Form/SliderField";
 
     export default {
-        components: {InputField},
+        components: {SliderField, InputField},
         props     : {
             item : {
                 type: MiningItem
@@ -26,8 +28,7 @@
         data() {
             return {
                 editing: this.field === 'hidden',
-                value  : this.item.getResultField(this.field),
-                title  : LocalisationService.translate('TitleClickToEdit')
+                value  : this.item.getResultField(this.field)
             };
         },
 
@@ -50,6 +51,10 @@
             },
             type() {
                 return this.field === 'hidden' ? 'checkbox':'text';
+            },
+            title() {
+                if(this.field === 'hidden') return '';
+                return this.editing ? LocalisationService.translate('TitleEnterToExit'):LocalisationService.translate('TitleClickToEdit');
             }
         },
 
@@ -78,63 +83,67 @@
 </script>
 
 <style lang="scss">
-    .mining-property {
-        padding : .5rem;
+.mining-property {
+    padding : .5rem;
+
+    label {
+        cursor      : pointer;
+        display     : block;
+        font-weight : bold;
+        color       : var(--element-active-fg-color)
+    }
 
-        label {
-            cursor      : pointer;
-            display     : block;
-            font-weight : bold;
-            color       : var(--element-active-fg-color)
+    div {
+        cursor        : pointer;
+        padding       : .25rem;
+        box-sizing    : border-box;
+        border-radius : 3px;
+        border        : none;
+        line-height   : 2rem;
+        height        : 2.5rem;
+        white-space   : nowrap;
+        text-overflow : ellipsis;
+        overflow      : hidden;
+        box-shadow    : 0 0 0 1px transparent;
+        transition    : box-shadow .15s ease-in-out;
+        color         : var(--element-fg-color);
+
+        &:hover {
+            box-shadow : 0 0 0 1px var(--element-hover-bg-color);
         }
+    }
 
+    input {
+        width            : 100%;
+        padding          : .25rem;
+        box-sizing       : border-box;
+        box-shadow       : 0 0 0 1px var(--element-active-fg-color);
+        border-radius    : 3px;
+        border           : none;
+        line-height      : 2rem;
+        background-color : var(--element-bg-color);
+        color            : var(--element-fg-color);
+    }
+
+    &.field-password {
         div {
-            cursor        : pointer;
-            padding       : .25rem;
-            box-sizing    : border-box;
-            border-radius : 3px;
-            border        : none;
-            line-height   : 2rem;
-            white-space   : nowrap;
-            text-overflow : ellipsis;
-            overflow      : hidden;
-            box-shadow    : 0 0 0 1px transparent;
-            transition    : box-shadow .15s ease-in-out;
-            color         : var(--element-fg-color);
-
-            &:hover {
-                box-shadow : 0 0 0 1px var(--element-hover-bg-color);
-            }
+            font-family    : "Font Awesome 5 Free", sans-serif;
+            font-size      : .5rem;
+            letter-spacing : .25rem;
+            font-weight    : bold;
         }
+    }
 
-        input {
-            width            : 100%;
-            padding          : .25rem;
-            box-sizing       : border-box;
-            box-shadow       : 0 0 0 1px var(--element-active-fg-color);
-            border-radius    : 3px;
-            border           : none;
-            line-height      : 2rem;
-            background-color : var(--element-bg-color);
-            color            : var(--element-fg-color);
-        }
+    &.field-hidden {
+        display : flex;
 
-        &.field-password {
-            div {
-                font-family    : "Font Awesome 5 Free", sans-serif;
-                font-size      : .5rem;
-                letter-spacing : .25rem;
-                font-weight    : bold;
-            }
+        label {
+            flex-grow : 1;
         }
 
-        &.field-hidden {
-            display: flex;
-
-            input {
-                width: auto;
-                margin-left: auto;
-            }
+        .input-slider {
+            margin-top : 2px;
         }
     }
+}
 </style>
\ No newline at end of file
diff --git a/src/vue/Components/Form/SliderField.vue b/src/vue/Components/Form/SliderField.vue
index efa0db8..544f2cd 100644
--- a/src/vue/Components/Form/SliderField.vue
+++ b/src/vue/Components/Form/SliderField.vue
@@ -115,7 +115,7 @@
 
     &.on {
         .input-slider-button {
-            left : .55rem;
+            left : calc(100% - .9em);
         }
     }
 
diff --git a/src/vue/Components/Popup/Collected.vue b/src/vue/Components/Popup/Collected.vue
index fa8c769..03f1f01 100644
--- a/src/vue/Components/Popup/Collected.vue
+++ b/src/vue/Components/Popup/Collected.vue
@@ -8,6 +8,9 @@
             <mining-item :item="item" :slot="item.getId()" :key="item.getId()" v-for="item of items"/>
         </foldout>
         <translate tag="div" class="no-results" say="NoCollectedPasswords" v-if="items.length === 0"/>
+        <translate class="collected-add-blank" say="AddPasswordForCurrentTab" @click="addBlankPassword" v-if="items.length === 0">
+            <icon slot="before" icon="user-plus" font="solid"/>
+        </translate>
     </div>
 </template>
 
@@ -18,6 +21,7 @@
     import MiningClient from '@js/Queue/Client/MiningClient';
     import MiningItem from '@vue/Components/Collected/MiningItem';
     import MessageService from '@js/Services/MessageService';
+    import ErrorManager from '@js/Manager/ErrorManager';
 
     export default {
         components: {MiningItem, Translate, Foldout, Icon},
@@ -35,8 +39,8 @@
 
         data() {
             return {
-                items  : MiningClient.getItems(),
-                current: null,
+                items   : MiningClient.getItems(),
+                current : null,
                 listener: (i) => { this.addItem(i); }
             };
         },
@@ -103,12 +107,19 @@
                 this.items.push(item);
             },
 
+            addBlankPassword() {
+                MessageService
+                    .send('password.add.blank')
+                    .catch(ErrorManager.catchEvt);
+            },
+
             sendStatus() {
                 let status = {
                     current: this.current
                 };
                 MessageService
-                    .send({type: 'popup.status.set', payload: {tab: 'collected', status}});
+                    .send({type: 'popup.status.set', payload: {tab: 'collected', status}})
+                    .catch(ErrorManager.catchEvt);
             }
         },
 
@@ -121,10 +132,30 @@
 </script>
 
 <style lang="scss">
-    .collected-container {
-        .no-results {
-            line-height : 3rem;
-            text-align  : center;
+.collected-container {
+    .no-results {
+        line-height : 3rem;
+        text-align  : center;
+    }
+
+    .collected-add-blank {
+        position         : fixed;
+        bottom           : 0;
+        padding          : 1rem;
+        width            : 100%;
+        border-top       : 1px solid var(--element-active-fg-color);
+        background-color : var(--element-active-bg-color);
+        color            : var(--element-active-hover-fg-color);
+        cursor           : pointer;
+        transition       : var(--element-transition);
+
+        &:hover {
+            background-color : var(--element-active-hover-bg-color);
+        }
+
+        .icon {
+            margin-right : .5rem;
         }
     }
+}
 </style>
\ No newline at end of file