From 0c30e118e36474f6f8458e314a481948e60d25a0 Mon Sep 17 00:00:00 2001 From: varjolintu Date: Tue, 17 Nov 2020 20:24:23 +0200 Subject: [PATCH 1/2] Custom Login Fields fixes --- keepassxc-browser/content/define.js | 13 +++- .../content/keepassxc-browser.js | 2 +- keepassxc-browser/css/define.css | 69 ++++++++++--------- 3 files changed, 49 insertions(+), 35 deletions(-) diff --git a/keepassxc-browser/content/define.js b/keepassxc-browser/content/define.js index 24dde17..985cc3a 100644 --- a/keepassxc-browser/content/define.js +++ b/keepassxc-browser/content/define.js @@ -13,7 +13,9 @@ kpxcDefine.dialog = null; kpxcDefine.diffX = 0; kpxcDefine.diffY = 0; kpxcDefine.eventFieldClick = null; -kpxcDefine.inputQueryPattern = 'input[type=\'text\'], input[type=\'email\'], input[type=\'password\'], input[type=\'tel\'], input[type=\'number\'], input[type=\'username\'], input:not([type])'; +kpxcDefine.inputQueryPattern = 'input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=username], input:not([type])'; +kpxcDefine.keyboardSelectorPattern = 'div.kpxcDefine-fixed-field:not(.kpxcDefine-fixed-username-field):not(.kpxcDefine-fixed-password-field):not(.kpxcDefine-fixed-totp-field)'; +kpxcDefine.moreInputQueryPattern = 'input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=date]):not([type=datetime-local]):not([type=file]):not([type=hidden]):not([type=image]):not([type=month]):not([type=range]):not([type=reset]):not([type=submit]):not([type=time]):not([type=week]), select'; kpxcDefine.markedFields = []; kpxcDefine.keyDown = null; kpxcDefine.startPosX = 0; @@ -354,6 +356,11 @@ kpxcDefine.again = function() { kpxcDefine.more = function() { if (kpxcDefine.dataStep === 1) { kpxcDefine.prepareStep1(); + + // Reset previous marked fields when no usernames have been selected + if (kpxcDefine.markedFields.length === 0) { + kpxcDefine.resetSelection(); + } } else if (kpxcDefine.dataStep === 2) { kpxcDefine.prepareStep2(); } else if (kpxcDefine.dataStep === 3) { @@ -362,7 +369,7 @@ kpxcDefine.more = function() { kpxcDefine.prepareStep4(); } - kpxcDefine.markFields('#kpxcDefine-fields', kpxcDefine.inputQueryPattern + ', select'); + kpxcDefine.markFields('#kpxcDefine-fields', kpxcDefine.moreInputQueryPattern); }; kpxcDefine.confirm = async function() { @@ -431,7 +438,7 @@ kpxcDefine.keyDown = function(e) { // Select input field by number e.preventDefault(); const index = e.keyCode - 48; - const inputFields = document.querySelectorAll('div.kpxcDefine-fixed-field:not(.kpxcDefine-fixed-username-field):not(.kpxcDefine-fixed-password-field):not(.kpxcDefine-fixed-totp-field)'); + const inputFields = document.querySelectorAll(kpxcDefine.keyboardSelectorPattern); if (inputFields.length >= index) { kpxcDefine.eventFieldClick(e, inputFields[index - 1]); diff --git a/keepassxc-browser/content/keepassxc-browser.js b/keepassxc-browser/content/keepassxc-browser.js index 13684a3..3a06013 100755 --- a/keepassxc-browser/content/keepassxc-browser.js +++ b/keepassxc-browser/content/keepassxc-browser.js @@ -134,7 +134,7 @@ kpxcIcons.switchIcons = function() { * Identifies form submits and password changes. */ const kpxcForm = {}; -kpxcForm.formButtonQuery = 'button[type=\'button\'], button[type=\'submit\'], input[type=\'button\'], input[type=\'submit\'], button:not([type]), div[role=\'button\']'; +kpxcForm.formButtonQuery = 'button[type=button], button[type=submit], input[type=button], input[type=submit], button:not([type]), div[role=button]'; kpxcForm.savedForms = []; // Returns true if form has been already saved diff --git a/keepassxc-browser/css/define.css b/keepassxc-browser/css/define.css index 1019664..a5b1a9f 100644 --- a/keepassxc-browser/css/define.css +++ b/keepassxc-browser/css/define.css @@ -1,22 +1,22 @@ .kpxcDefine-modal-backdrop { - position: fixed; - top: 0; - right: 0; bottom: 0; left: 0; + position: fixed; + right: 0; + top: 0; z-index: 2147483645; } .kpxcDefine-modal-backdrop:after { - content: ''; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; background-color: #000000; - opacity: 0.5; + bottom: 0; + content: ''; filter: alpha(opacity=50); + left: 0; + opacity: 0.5; + position: fixed; + right: 0; + top: 0; } #kpxcDefine-fields { @@ -24,36 +24,37 @@ } #kpxcDefine-description { - z-index: 2147483646; - color: #efefef; + background-color: rgba(0,0,0,0.8); border: 2px solid #555555; + color: #efefef; + cursor: pointer; + font-size: 15px; + height: auto !important; + left: 150px; padding: 7px 5px; position: absolute; - top: 100px; - left: 150px; text-align: left; - cursor: pointer; - background-color: rgba(0,0,0,0.8); - font-size: 15px; + top: 100px; user-select: none; + z-index: 2147483646; } #kpxcDefine-description div:first-of-type { - margin-top: 0; - padding-top: 0; - text-align: left; color: #efefef; - padding-bottom: 8px; font-weight: bold; font-size: 120%; + margin-top: 0; + padding-bottom: 8px; + padding-top: 0; + text-align: left; } #kpxcDefine-description p { + border-top: 2px solid #666666; + color: #efefef; + line-height: 110%; margin-top: 10px; padding-top: 10px; - color: #efefef; - border-top: 2px solid #666666; - line-height: 110%; } #kpxcDefine-help { @@ -62,6 +63,7 @@ .kpxcDefine-keyboardHelp { font-size: 0.75em; + height: auto !important; } .kpxcDefine-keyboardHelp kbd { @@ -70,20 +72,25 @@ border: 1px solid #b4b4b4; color: #333; display: inline-block; + height: auto !important; line-height: 1; padding: 2px 4px; white-space: nowrap; } +.kpxcDefine-chooser-help { + height: auto !important; +} + .kpxcDefine-fixed-field { - position: absolute; + background-color: rgba(239,239,239,0.4); border: 2px solid #efefef; color: #fff; cursor: pointer; - z-index: 2147483646; - text-align: center; font-weight: bold; - background-color: rgba(239,239,239,0.4); + position: absolute; + text-align: center; + z-index: 2147483646; } .kpxcDefine-fixed-hover-field { @@ -93,18 +100,18 @@ .kpxcDefine-fixed-password-field { border: 2px solid red; - color: #efefef; background-color: rgba(255,0,0,0.4); + color: #efefef; } .kpxcDefine-fixed-username-field { border: 2px solid limegreen; - color: #efefef; background-color: rgba(50,205,50,0.4); + color: #efefef; } .kpxcDefine-fixed-string-field, .kpxcDefine-fixed-totp-field { border: 2px solid deepskyblue; - color: #efefef; background-color: rgba(30,144,255,0.4); + color: #efefef; } From 3da18601f8889be3bea1120c5a50d834df6e0853 Mon Sep 17 00:00:00 2001 From: varjolintu Date: Mon, 14 Dec 2020 08:45:36 +0200 Subject: [PATCH 2/2] Add support for textarea element with Custom Login Fields --- keepassxc-browser/content/define.js | 2 +- keepassxc-browser/content/keepassxc-browser.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/keepassxc-browser/content/define.js b/keepassxc-browser/content/define.js index 985cc3a..c1da93c 100644 --- a/keepassxc-browser/content/define.js +++ b/keepassxc-browser/content/define.js @@ -15,7 +15,7 @@ kpxcDefine.diffY = 0; kpxcDefine.eventFieldClick = null; kpxcDefine.inputQueryPattern = 'input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=username], input:not([type])'; kpxcDefine.keyboardSelectorPattern = 'div.kpxcDefine-fixed-field:not(.kpxcDefine-fixed-username-field):not(.kpxcDefine-fixed-password-field):not(.kpxcDefine-fixed-totp-field)'; -kpxcDefine.moreInputQueryPattern = 'input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=date]):not([type=datetime-local]):not([type=file]):not([type=hidden]):not([type=image]):not([type=month]):not([type=range]):not([type=reset]):not([type=submit]):not([type=time]):not([type=week]), select'; +kpxcDefine.moreInputQueryPattern = 'input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=date]):not([type=datetime-local]):not([type=file]):not([type=hidden]):not([type=image]):not([type=month]):not([type=range]):not([type=reset]):not([type=submit]):not([type=time]):not([type=week]), select, textarea'; kpxcDefine.markedFields = []; kpxcDefine.keyDown = null; kpxcDefine.startPosX = 0; diff --git a/keepassxc-browser/content/keepassxc-browser.js b/keepassxc-browser/content/keepassxc-browser.js index 3a06013..b47cd80 100755 --- a/keepassxc-browser/content/keepassxc-browser.js +++ b/keepassxc-browser/content/keepassxc-browser.js @@ -555,7 +555,7 @@ kpxcFields.useCustomLoginFields = async function() { // Get all input fields from the page without any extra filters const inputFields = []; - document.body.querySelectorAll('input, select').forEach(e => { + document.body.querySelectorAll('input, select, textarea').forEach(e => { if (e.type !== 'hidden' && !e.disabled) { inputFields.push(e); }