Autocomplete: username detection for Google (#1477)

Add username detection for Google logins, and put the item on the top of the list. This helps when they prompt you for a password again, which they do periodically.

2 files changed, 24 insertions, 1 deletions

diff --git a/keepassxc-browser/common/sites.js b/keepassxc-browser/common/sites.js
index 742f0be..fb3c783 100644
--- a/keepassxc-browser/common/sites.js
+++ b/keepassxc-browser/common/sites.js
@@ -70,6 +70,20 @@ kpxcSites.googlePasswordFormUrl = 'https://accounts.google.com/signin/v2/challen
 kpxcSites.savedForm = undefined;
 
 /**
+ * Tries to detect a username from the page.
+ * @returns {string}   Returns the detected username if there is one, undefined otherwise.
+ */
+kpxcSites.detectUsernameFromPage = function() {
+    if (document.location.origin === googleUrl) {
+        const profileIdentifier = document.querySelector('[data-profile-identifier]');
+        if (profileIdentifier) {
+            return profileIdentifier.textContent.trim();
+        }
+    }
+    return undefined;
+};
+
+/**
  * Handles a few exceptions for certain sites where password form is inside a div
  * or another element that is not detected directly. Triggered by MutationObserver.
  * @param {string} identifier   Usually a classList or element id
diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js
index a126bc8..bb3b91b 100644
--- a/keepassxc-browser/content/autocomplete.js
+++ b/keepassxc-browser/content/autocomplete.js
@@ -91,6 +91,11 @@ class Autocomplete {
             this.shadowRoot.append(this.container);
             document.body.append(this.wrapper);
 
+            // Try to detect a username from the webpage in order to show it first in the list
+            // This is useful when a website prompts you to enter the password again, and the username is already filled in
+            // It also helps with multi-page login flows
+            const username = kpxcSites.detectUsernameFromPage();
+
             await kpxc.updateTOTPList();
             for (const c of this.elements) {
                 const item = document.createElement('div');
@@ -105,7 +110,11 @@ class Autocomplete {
                 item.addEventListener('mousedown', e => e.stopPropagation());
                 item.addEventListener('mouseup', e => e.stopPropagation());
 
-                this.list.appendChild(item);
+                if (username === c.value) {
+                    this.list.prepend(item);
+                } else {
+                    this.list.appendChild(item);
+                }
             }
 
             // Add a footer message for auto-submit