Merge pull request keepassxreboot#1115 from keepassxreboot/fix/custom…

…_login_fields Custom Login Fields fixes
kojjii · Dec 20, 2020 · 992d4a0 · 992d4a0
2 parents 024d5db + 3da1860
commit 992d4a0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 35 deletions.
diff --git 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, textarea';
 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
@@ -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
@@ -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);
         }

diff --git a/keepassxc-browser/css/define.css b/keepassxc-browser/css/define.css
@@ -1,59 +1,60 @@
 .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;
+    background-color: #000000;
     bottom: 0;
+    content: '';
+    filter: alpha(opacity=50);
     left: 0;
-    background-color: #000000;
     opacity: 0.5;
-    filter: alpha(opacity=50);
+    position: fixed;
+    right: 0;
+    top: 0;
 }
 
 #kpxcDefine-fields {
     z-index: 2147483646;
 }
 
 #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 {
-    margin-top: 10px;
-    padding-top: 10px;
-    color: #efefef;
     border-top: 2px solid #666666;
+    color: #efefef;
     line-height: 110%;
+    margin-top: 10px;
+    padding-top: 10px;
 }
 
 #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;
 }