diff options
| -rw-r--r-- | keepassxc-browser/_locales/en/messages.json | 8 | ||||
| -rwxr-xr-x | keepassxc-browser/background/page.js | 4 | ||||
| -rw-r--r-- | keepassxc-browser/content/banner.js | 2 | ||||
| -rwxr-xr-x | keepassxc-browser/content/keepassxc-browser.js | 8 | ||||
| -rw-r--r-- | keepassxc-browser/content/username-field.js | 11 | ||||
| -rw-r--r-- | keepassxc-browser/css/banner.css | 2 | ||||
| -rw-r--r-- | keepassxc-browser/options/options.html | 10 |
7 files changed, 40 insertions, 5 deletions
diff --git a/keepassxc-browser/_locales/en/messages.json b/keepassxc-browser/_locales/en/messages.json index 77c6fda..74f7c08 100644 --- a/keepassxc-browser/_locales/en/messages.json +++ b/keepassxc-browser/_locales/en/messages.json @@ -555,6 +555,10 @@ "message": "Activate password generator icons.", "description": "Activate password generator icons checkbox text." }, + "optionsCheckboxUsernameIcons": { + "message": "Activate username field icons.", + "description": "Activate username field icons textbox text." + }, "optionsCheckboxAutoRetrieveCredentials": { "message": "Automatically retrieve credentials.", "description": "Automatically retrieve credentials checkbox text." @@ -631,6 +635,10 @@ "message": "Passwords are generated by KeePassXC using your password generation profile.", "description": "Password Generator option help text, second part." }, + "optionsShowLoginFormIconHelpText": { + "message": "Adds an icon to username fields for filling credentials with a single mouse click.", + "description": "Username field icon option help text." + }, "optionsAutoRetrieveCredentialsHelpText": { "message": "KeePassXC-Browser will immediately retrieve credentials when a tab is activated.", "description": "Auto-Retrive Credentials option help text." diff --git a/keepassxc-browser/background/page.js b/keepassxc-browser/background/page.js index 08d6f6c..efe5f8d 100755 --- a/keepassxc-browser/background/page.js +++ b/keepassxc-browser/background/page.js @@ -10,6 +10,7 @@ const defaultSettings = { autoRetrieveCredentials: true, showNotifications: true, showLoginNotifications: true, + showLoginFormIcon: true, saveDomainOnly: true, autoReconnect: false, defaultGroup: '', @@ -57,6 +58,9 @@ page.initSettings = async function() { if (!('showLoginNotifications' in page.settings)) { page.settings.showLoginNotifications = defaultSettings.showLoginNotifications; } + if (!('showLoginFormIcon' in page.settings)) { + page.settings.showLoginFormIcon = defaultSettings.showLoginFormIcon; + } if (!('saveDomainOnly' in page.settings)) { page.settings.saveDomainOnly = defaultSettings.saveDomainOnly; } diff --git a/keepassxc-browser/content/banner.js b/keepassxc-browser/content/banner.js index 49e6102..89cafaa 100644 --- a/keepassxc-browser/content/banner.js +++ b/keepassxc-browser/content/banner.js @@ -72,7 +72,7 @@ kpxcBanner.create = async function(credentials = {}) { const updateButton = kpxcUI.createElement('button', 'kpxc-button kpxc-orange-button', { 'id': 'kpxc-banner-btn-update' }, tr('popupButtonUpdate')); const dismissButton = kpxcUI.createElement('button', 'kpxc-button kpxc-red-button', { 'id': 'kpxc-banner-btn-dismiss' }, tr('popupButtonDismiss')); - const separator = kpxcUI.createElement('div', 'separator'); + const separator = kpxcUI.createElement('div', 'kpxc-separator'); const ignoreCheckbox = kpxcUI.createElement('input', 'kpxc-checkbox', { type: 'checkbox', name: 'ignoreCheckbox' }); const checkboxLabel = kpxcUI.createElement('label', 'kpxc-checkbox-label', { for: 'ignoreCheckbox' }, tr('popupButtonIgnore')); diff --git a/keepassxc-browser/content/keepassxc-browser.js b/keepassxc-browser/content/keepassxc-browser.js index 4345dd2..100ee20 100755 --- a/keepassxc-browser/content/keepassxc-browser.js +++ b/keepassxc-browser/content/keepassxc-browser.js @@ -447,7 +447,9 @@ kpxcFields.getUsernameField = function(passwordId, checkDisabled) { return true; // Continue } - kpxcUsernameField.initField(usernameField); + if (kpxc.settings.showLoginFormIcon) { + kpxcUsernameField.initField(usernameField); + } usernameField = i; } } else { @@ -561,7 +563,9 @@ kpxcFields.prepareCombinations = async function(combinations) { args: [ true ] }); - kpxcUsernameField.initField(usernameField, res.databaseClosed); + if (kpxc.settings.showLoginFormIcon) { + kpxcUsernameField.initField(usernameField, res.databaseClosed); + } // Initialize form-submit for remembering credentials if (field) { diff --git a/keepassxc-browser/content/username-field.js b/keepassxc-browser/content/username-field.js index 601dee7..02b2463 100644 --- a/keepassxc-browser/content/username-field.js +++ b/keepassxc-browser/content/username-field.js @@ -54,7 +54,16 @@ const createIcon = function(target, databaseClosed) { const field = target; const className = getIconClassName(databaseClosed); - const size = (field.offsetHeight > 28) ? 24 : 16; + + // Size the icon dynamically, but not greater than 24 or smaller than 14 + const size = Math.max(Math.min(24, field.offsetHeight - 4), 14); + + // Don't create the icon if the input field is too small + if (field.offsetWidth < (size * 1.5) || field.offsetHeight < size) { + kpxcUsernameField.observer.unobserve(field); + return; + } + let offset = Math.floor((field.offsetHeight - size) / 3); offset = (offset < 0) ? 0 : offset; diff --git a/keepassxc-browser/css/banner.css b/keepassxc-browser/css/banner.css index 3b05509..8ba57cb 100644 --- a/keepassxc-browser/css/banner.css +++ b/keepassxc-browser/css/banner.css @@ -65,7 +65,7 @@ div.kpxc-banner .kpxc-banner-icon-moz { background-size: contain; } -.separator { +.kpxc-separator { border-left: 1px solid #ccc; height: 100% !important; margin: 10px !important; diff --git a/keepassxc-browser/options/options.html b/keepassxc-browser/options/options.html index 1f69278..543e184 100644 --- a/keepassxc-browser/options/options.html +++ b/keepassxc-browser/options/options.html @@ -64,6 +64,16 @@ </p> <hr /> <p> + <div class="checkbox"> + <label class="checkbox"> + <input type="checkbox" name="showLoginFormIcon" value="true"/><span data-i18n="optionsCheckboxUsernameIcons"></span> + </label> + <span class="help-block"> + <span data-i18n="optionsShowLoginFormIconHelpText"></span> + </span> + </div> + </p> + <p> <div class="checkbox"> <label class="checkbox"> <input type="checkbox" name="usePasswordGeneratorIcons" value="true"/><span data-i18n="optionsCheckboxUsePasswordGenerator"></span> |