[30] Add option to paste first suggested password automatically

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

2 files changed, 113 insertions, 1 deletions

diff --git a/src/vue/Components/Options/Setting/HelpText.vue b/src/vue/Components/Options/Setting/HelpText.vue
new file mode 100644
index 0000000..20f543c
--- /dev/null
+++ b/src/vue/Components/Options/Setting/HelpText.vue
@@ -0,0 +1,100 @@
+<template>
+    <div class="settings-help-text" :class="{open:open}" @click.stop="toggleHelp">
+        <icon :icon="icon" font="solid"/>
+        <div class="text">
+            <translate lang="de" :say="text"/>
+        </div>
+    </div>
+</template>
+
+<script>
+    import Icon from "@vue/Components/Icon";
+    import Translate from "@vue/Components/Translate";
+
+    export default {
+        name      : "HelpText",
+        components: {Translate, Icon},
+        props     : {
+            type: {
+                type   : String,
+                default: 'info'
+            },
+            text: {
+                type   : String,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                open: false
+            };
+        },
+        computed: {
+            icon() {
+                if(this.type === 'warning') return 'exclamation-triangle';
+                return 'info-circle';
+            }
+        },
+        methods : {
+            toggleHelp() {
+                this.open = !this.open;
+
+                if(this.open) {
+                    document.addEventListener('click', () => {this.open = false;}, {once: true, passive: true});
+                }
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+.settings-help-text {
+    position         : relative;
+    background-color : var(--button-bg-color);
+    color            : var(--button-fg-color);
+    transition       : var(--button-transition);
+
+    &.open,
+    &:hover {
+        background-color : var(--button-hover-bg-color);
+        color            : var(--button-hover-fg-color);
+
+        .text {
+            background-color : var(--button-hover-bg-color);
+            color            : var(--button-hover-fg-color);
+            max-height       : 12rem;
+            transition       : max-height .25s ease-in-out;
+        }
+    }
+
+    .icon {
+        padding : .5rem;
+        display : block;
+        cursor  : pointer;
+    }
+
+    .icon-exclamation-triangle {
+        color : var(--warning-bg-color);
+    }
+
+    .text {
+        position   : absolute;
+        width      : 12rem;
+        right      : 0;
+        top        : 100%;
+        overflow   : hidden;
+        max-height : 0;
+        transition : background-color 0s .25s linear, color 0s .25s linear, max-height .25s ease-in-out;
+
+        span {
+            padding    : .5rem;
+            display    : block;
+            text-align : justify;
+            -webkit-hyphens: auto;
+            -moz-hyphens: auto;
+            -ms-hyphens: auto;
+            hyphens: auto;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/vue/Components/Options/Settings.vue b/src/vue/Components/Options/Settings.vue
index 3c0bdfe..dc3fbae 100644
--- a/src/vue/Components/Options/Settings.vue
+++ b/src/vue/Components/Options/Settings.vue
@@ -13,6 +13,11 @@
             <slider-field id="paste-compromised" v-model="compromised"/>
             <translate tag="label" for="paste-compromised" say="SettingsPasteWarnCompromised"/>
         </div>
+        <div class="setting">
+            <slider-field id="paste-autofill" v-model="autofill"/>
+            <translate tag="label" for="paste-autofill" say="SettingsPasteAutofillEnabled"/>
+            <help-text type="warning" text="HelpPasteAutofillEnabled"/>
+        </div>
 
         <translate tag="h3" say="NotificationSettings"/>
         <div class="setting">
@@ -38,13 +43,15 @@
     import SettingsService from '@js/Services/SettingsService';
     import ToastService from '@js/Services/ToastService';
     import SliderField from "@vue/Components/Form/SliderField";
+    import HelpText from "@vue/Components/Options/Setting/HelpText";
 
     export default {
-        components: {SliderField, Translate},
+        components: {HelpText, SliderField, Translate},
         data() {
             return {
                 autoclose     : false,
                 autosubmit    : false,
+                autofill      : false,
                 compromised   : false,
                 notifyPwNew   : false,
                 relatedSearch : false,
@@ -61,6 +68,7 @@
                 this.getSetting('paste.popup.close', 'autoclose');
                 this.getSetting('paste.form.submit', 'autosubmit');
                 this.getSetting('paste.compromised.warning', 'compromised');
+                this.getSetting('paste.autofill', 'autofill');
                 this.getSetting('popup.related.search', 'relatedSearch');
                 this.getSetting('notification.password.new', 'notifyPwNew');
                 this.getSetting('notification.password.update', 'notifyPwUpdate');
@@ -140,6 +148,10 @@
         .input-slider {
             flex-grow : 0;
         }
+
+        .settings-help-text {
+            margin-right : -.5rem;
+        }
     }
 }
 </style>
\ No newline at end of file