Sort the page uuid first in the list (#1441)

Add option to sort the page uuid first in the list

7 files changed, 89 insertions, 10 deletions

diff --git a/keepassxc-browser/_locales/en/messages.json b/keepassxc-browser/_locales/en/messages.json
index df6c8fa..e4d4214 100644
--- a/keepassxc-browser/_locales/en/messages.json
+++ b/keepassxc-browser/_locales/en/messages.json
@@ -961,19 +961,43 @@
     },
     "optionsSortByTitle": {
         "message": "Title",
-        "desription": "Sort matching credentials by title option selection."
+        "description": "Sort matching credentials by title option selection."
     },
     "optionsSortByUsername": {
         "message": "Username",
-        "desription": "Sort matching credentials by username option selection."
+        "description": "Sort matching credentials by username option selection."
     },
     "optionsSortByGroupAndTitle": {
         "message": "Group and title",
-        "desription": "Sort matching credentials by group and title option selection."
+        "description": "Sort matching credentials by group and title option selection."
     },
     "optionsSortByGroupAndUsername": {
         "message": "Group and username",
-        "desription": "Sort matching credentials by group and username option selection."
+        "description": "Sort matching credentials by group and username option selection."
+    },
+    "optionsFillSortPriority": {
+        "message": "Sort credentials after fill by",
+        "description": ""
+    },
+    "optionsFillSortPriorityHelpText": {
+        "message": "When Relevant credential first option is selected, the credential for previously filled login is set as first in Autocomplete Menu's listing.",
+        "description": "Help text for Sort credentials after fill."
+    },
+    "optionsFillSortPriorityTotp": {
+        "message": "Sort credentials after fill for TOTP by",
+        "description": ""
+    },
+    "optionsFillSortPriorityTotpHelpText": {
+        "message": "When Relevant credential first option is selected, the TOTP for previously filled login is set as first in Autocomplete Menu's listing.",
+        "description": "Help text for Sort credentials after fill for TOTP."
+    },
+    "optionsFillSortByMatchingCredentials": {
+        "message": "Matching credentials setting",
+        "description": "Default option for Sort after fill. Respects the Matching Credentials sorting setting."
+    },
+    "optionsFillSortByRelevantEntry": {
+        "message": "Relevant credential first",
+        "description": "Relevatn credential first option for Sort after fill."
     },
     "optionsCustomFieldsNotFound": {
         "message": "No saved custom login fields found.",
diff --git a/keepassxc-browser/background/page.js b/keepassxc-browser/background/page.js
index 461671f..e589fe7 100755
--- a/keepassxc-browser/background/page.js
+++ b/keepassxc-browser/background/page.js
@@ -1,6 +1,8 @@
 'use strict';
 
 const defaultSettings = {
+    afterFillSorting: SORT_BY_MATCHING_CREDENTIALS_SETTING,
+    afterFillSortingTotp: SORT_BY_RELEVANT_ENTRY,
     autoCompleteUsernames: true,
     showGroupNameInAutocomplete: true,
     autoFillAndSend: false,
@@ -56,6 +58,14 @@ page.initSettings = async function() {
         page.settings = item.settings;
         page.settings.autoReconnect = false;
 
+        if (!('afterFillSorting' in page.settings)) {
+            page.settings.afterFillSorting = defaultSettings.afterFillSorting;
+        }
+
+        if (!('afterFillSortingTotp' in page.settings)) {
+            page.settings.afterFillSortingTotp = defaultSettings.afterFillSortingTotp;
+        }
+
         if (!('autoCompleteUsernames' in page.settings)) {
             page.settings.autoCompleteUsernames = defaultSettings.autoCompleteUsernames;
         }
diff --git a/keepassxc-browser/common/global.js b/keepassxc-browser/common/global.js
index 7730150..cbd874a 100755
--- a/keepassxc-browser/common/global.js
+++ b/keepassxc-browser/common/global.js
@@ -13,6 +13,8 @@ const SORT_BY_TITLE = 'sortByTitle';
 const SORT_BY_USERNAME = 'sortByUsername';
 const SORT_BY_GROUP_AND_TITLE = 'sortByGroupAndTitle';
 const SORT_BY_GROUP_AND_USERNAME = 'sortByGroupAndUsername';
+const SORT_BY_MATCHING_CREDENTIALS_SETTING = 'sortByMatchingCredentials';
+const SORT_BY_RELEVANT_ENTRY = 'sortByRelevantEntry';
 
 // Update check intervals
 const CHECK_UPDATE_NEVER = 0;
diff --git a/keepassxc-browser/content/autocomplete.js b/keepassxc-browser/content/autocomplete.js
index bb3b91b..4b20fab 100644
--- a/keepassxc-browser/content/autocomplete.js
+++ b/keepassxc-browser/content/autocomplete.js
@@ -4,6 +4,7 @@ const MAX_AUTOCOMPLETE_NAME_LEN = 50;
 
 class Autocomplete {
     constructor() {
+        this.afterFillSort = SORT_BY_MATCHING_CREDENTIALS_SETTING;
         this.autocompleteList = [];
         this.autoSubmit = false;
         this.elements = [];
@@ -30,12 +31,13 @@ class Autocomplete {
 
     }
 
-    async create(input, showListInstantly = false, autoSubmit = false) {
+    async create(input, showListInstantly = false, autoSubmit = false, afterFillSort = SORT_BY_MATCHING_CREDENTIALS_SETTING) {
         if (input.readOnly) {
             return;
         }
 
         this.autoSubmit = autoSubmit;
+        this.afterFillSort = afterFillSort;
 
         if (!this.autocompleteList.includes(input)) {
             input.addEventListener('click', e => this.click(e));
@@ -96,10 +98,13 @@ class Autocomplete {
             // It also helps with multi-page login flows
             const username = kpxcSites.detectUsernameFromPage();
 
+            const pageUuid = await sendMessage('page_get_login_id');
             await kpxc.updateTOTPList();
+
             for (const c of this.elements) {
                 const item = document.createElement('div');
                 item.textContent = c.label;
+
                 const itemInput = kpxcUI.createElement('input', '', { 'type': 'hidden', 'value': c.value });
                 item.append(itemInput);
                 item.addEventListener('click', e => this.itemClick(e, this.input, c.uuid));
@@ -110,7 +115,9 @@ class Autocomplete {
                 item.addEventListener('mousedown', e => e.stopPropagation());
                 item.addEventListener('mouseup', e => e.stopPropagation());
 
-                if (username === c.value) {
+                // If this page has an associated uuid and it matches this credential, then put it on top of the list
+                if (username === c.value
+                    || (this.afterFillSort === SORT_BY_RELEVANT_ENTRY && c.uuid === pageUuid)) {
                     this.list.prepend(item);
                 } else {
                     this.list.appendChild(item);
diff --git a/keepassxc-browser/content/keepassxc-browser.js b/keepassxc-browser/content/keepassxc-browser.js
index 876abd2..eb1889c 100755
--- a/keepassxc-browser/content/keepassxc-browser.js
+++ b/keepassxc-browser/content/keepassxc-browser.js
@@ -241,14 +241,14 @@ kpxc.initAutocomplete = function() {
 
     for (const c of kpxc.combinations) {
         if (c.username) {
-            kpxcUserAutocomplete.create(c.username, false, kpxc.settings.autoSubmit);
+            kpxcUserAutocomplete.create(c.username, false, kpxc.settings.autoSubmit, kpxc.settings.afterFillSorting);
         } else if (!c.username && c.password) {
             // Single password field
-            kpxcUserAutocomplete.create(c.password, false, kpxc.settings.autoSubmit);
+            kpxcUserAutocomplete.create(c.password, false, kpxc.settings.autoSubmit, kpxc.settings.afterFillSorting);
         }
 
         if (c.totp) {
-            kpxcTOTPAutocomplete.create(c.totp, false, kpxc.settings.autoSubmit);
+            kpxcTOTPAutocomplete.create(c.totp, false, kpxc.settings.autoSubmit, kpxc.settings.afterFillSortingTotp);
         }
     }
 };
diff --git a/keepassxc-browser/options/options.html b/keepassxc-browser/options/options.html
index 9c2a0c3..14bb9ce 100644
--- a/keepassxc-browser/options/options.html
+++ b/keepassxc-browser/options/options.html
@@ -194,8 +194,32 @@
                     </select>
                   </div>
 
+                  <!-- Credential sorting after fill -->
+                  <div class="form-group col-sm-3 pb-2">
+                    <label for="afterFillSorting" class="py-2" data-i18n="optionsFillSortPriority"></label>
+                    <select class="form-control form-control-sm col-md-2" id="afterFillSorting" data-i18n="[title]optionsFillSortPriority">
+                      <option value="sortByMatchingCredentials" data-i18n="optionsFillSortByMatchingCredentials"></option>
+                      <option value="sortByRelevantEntry" data-i18n="optionsFillSortByRelevantEntry"></option>
+                    </select>
+                  </div>
+                  <div>
+                    <span class="form-text text-muted" data-i18n="optionsFillSortPriorityHelpText"></span>
+                  </div>
+
+                  <!-- Credential sorting after fill for TOTP -->
+                  <div class="form-group col-sm-3 pb-2">
+                    <label for="afterFillSortingTotp" class="py-2" data-i18n="optionsFillSortPriorityTotp"></label>
+                    <select class="form-control form-control-sm col-md-2" id="afterFillSortingTotp" data-i18n="[title]optionsFillSortPriorityTotp">
+                      <option value="sortByMatchingCredentials" data-i18n="optionsFillSortByMatchingCredentials"></option>
+                      <option value="sortByRelevantEntry" data-i18n="optionsFillSortByRelevantEntry"></option>
+                    </select>
+                  </div>
+                  <div>
+                    <span class="form-text text-muted" data-i18n="optionsFillSortPriorityTotpHelpText"></span>
+                  </div>
+
                   <!-- Use Auto-Submit -->
-                  <div class="form-group">
+                  <div class="form-group py-2">
                     <div class="form-check">
                       <input class="form-check-input" type="checkbox" name="autoSubmit" id="autoSubmit" value="true" />
                       <label class="form-check-label" for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
diff --git a/keepassxc-browser/options/options.js b/keepassxc-browser/options/options.js
index 8b777d9..efeaf89 100644
--- a/keepassxc-browser/options/options.js
+++ b/keepassxc-browser/options/options.js
@@ -128,6 +128,8 @@ options.initGeneralSettings = function() {
         options.settings['redirectAllowance'] === 11 ? 'Infinite' : String(options.settings['redirectAllowance']));
 
     $('#tab-general-settings select#credentialSorting').value = options.settings['credentialSorting'];
+    $('#tab-general-settings select#afterFillSorting').value = options.settings['afterFillSorting'];
+    $('#tab-general-settings select#afterFillSortingTotp').value = options.settings['afterFillSortingTotp'];
     $('#tab-general-settings input#defaultGroup').value = options.settings['defaultGroup'];
     $('#tab-general-settings input#clearCredentialTimeout').value = options.settings['clearCredentialsTimeout'];
 
@@ -153,6 +155,16 @@ options.initGeneralSettings = function() {
         await options.saveSettings();
     });
 
+    $('#tab-general-settings select#afterFillSorting').addEventListener('change', async function(e) {
+        options.settings['afterFillSorting'] = e.currentTarget.value;
+        await options.saveSettings();
+    });
+
+    $('#tab-general-settings select#afterFillSortingTotp').addEventListener('change', async function(e) {
+        options.settings['afterFillSortingTotp'] = e.currentTarget.value;
+        await options.saveSettings();
+    });
+
     $('#tab-general-settings input#clearCredentialTimeout').addEventListener('change', async function(e) {
         if (e.target.valueAsNumber < 0 || e.target.valueAsNumber > 3600) {
             return;