diff --git a/frontend/src/SiteEditor.vue b/frontend/src/SiteEditor.vue index 4f9842c..3871dbc 100644 --- a/frontend/src/SiteEditor.vue +++ b/frontend/src/SiteEditor.vue @@ -75,6 +75,11 @@ const contactLabel = ref('') const contactSubject = ref('') const contactLabelOrig = ref('') const contactSubjectOrig = ref('') +// Password managers offer credential autofill on these boxes no matter +// the autocomplete setting; readonly until the first interaction keeps +// them off (the vendors' ignore attributes on the inputs back it up). +const pmGuard = ref(true) +const pmUnlock = () => { pmGuard.value = false } const lang = editorLang // '' = the original strings (the primary language) const primaryLang = ref('en') const translateLangs = ref([]) @@ -775,6 +780,12 @@ onUnmounted(() => { class="text-input" :placeholder="translating ? contactLabelOrig : 'Contact us'" title="Messaging: the {contact:} button label and visitor dialog title — empty disables messaging" + :readonly="pmGuard" + data-1p-ignore + data-lpignore="true" + data-bwignore + @pointerdown="pmUnlock" + @focus="pmUnlock" @input="onContactInput" /> { placeholder="email" title="Contact email — a mailto link in the visitor dialog, revealed only after the proof of work is solved (empty = no link)" :disabled="!!translating" + :readonly="pmGuard" + data-1p-ignore + data-lpignore="true" + data-bwignore + @pointerdown="pmUnlock" + @focus="pmUnlock" @input="debounce('contact-email', () => saveSettings())" /> { class="text-input" :placeholder="translating ? contactSubjectOrig : 'topic'" title="Topic for the mailto link (empty = the label)" + :readonly="pmGuard" + data-1p-ignore + data-lpignore="true" + data-bwignore + @pointerdown="pmUnlock" + @focus="pmUnlock" @input="onContactInput" /> @@ -927,9 +950,10 @@ onUnmounted(() => { /* The messaging block: one line — the article editor's flag selector, then small text boxes (label = the enable switch, email, topic). The - mailto subject is labeled "topic" in the UI: password managers - mistake an input named "subject" for a credential field and offer - autofill no matter the autocomplete setting. */ + boxes are readonly until first interaction (+ vendor ignore + attributes, and the mailto subject is labeled "topic"): password + managers offer credential autofill on them no matter the + autocomplete setting. */ .msg-head { flex-wrap: wrap; }