From adeb6add9a7f438843bfaac2f9c2b6a446043d90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sami=20V=C3=A4nttinen?= <sami.vanttinen@protonmail.com>
Date: Tue, 5 Apr 2022 08:10:56 +0300
Subject: [PATCH] Fix Username Icon position on Apple login page (#1590)

Fix Username Icon position on Apple login page
---
 keepassxc-browser/common/sites.js | 15 +++++++++++++++
 keepassxc-browser/content/ui.js   |  9 ++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/keepassxc-browser/common/sites.js b/keepassxc-browser/common/sites.js
index c6bb233..742f0be 100644
--- a/keepassxc-browser/common/sites.js
+++ b/keepassxc-browser/common/sites.js
@@ -175,3 +175,18 @@ kpxcSites.popupExceptionFound = function(combinations) {
 
     return false;
 };
+
+/**
+ * Handles a few exceptions for certain sites where Username Icon is not placed properly.
+ * @param {number} left     Absolute left position of the icon
+ * @param {number} top      Absolute top position of the icon
+ * @param {number} iconSize Size of the icon
+ * @returns {array}         New left and top values as an Array
+ */
+kpxcSites.iconOffset = function(left, top, iconSize) {
+    if (document.location.hostname.includes('idmsa.apple.com')) {
+        return [ left - (iconSize + 10), top + 3 ];
+    }
+
+    return undefined;
+};
diff --git a/keepassxc-browser/content/ui.js b/keepassxc-browser/content/ui.js
index 21d1c12..15223ef 100644
--- a/keepassxc-browser/content/ui.js
+++ b/keepassxc-browser/content/ui.js
@@ -123,13 +123,20 @@ kpxcUI.setIconPosition = function(icon, field, rtl = false, segmented = false) {
     const size = Number(icon.getAttribute('size'));
     const offset = kpxcUI.calculateIconOffset(field, size);
     let left = kpxcUI.bodyStyle.position.toLowerCase() === 'relative' ? rect.left - kpxcUI.bodyRect.left : rect.left;
-    const top = kpxcUI.bodyStyle.position.toLowerCase() === 'relative' ? rect.top - kpxcUI.bodyRect.top : rect.top;
+    let top = kpxcUI.bodyStyle.position.toLowerCase() === 'relative' ? rect.top - kpxcUI.bodyRect.top : rect.top;
 
     // Add more space for the icon to show it at the right side of the field if TOTP fields are segmented
     if (segmented) {
         left += size + 10;
     }
 
+    // Adjusts the icon offset for certain sites
+    const iconOffset = kpxcSites.iconOffset(left, top, size);
+    if (iconOffset) {
+        left = iconOffset[0];
+        top = iconOffset[1];
+    }
+
     const scrollTop = document.scrollingElement ? document.scrollingElement.scrollTop : 0;
     const scrollLeft = document.scrollingElement ? document.scrollingElement.scrollLeft : 0;
     icon.style.top = Pixels(top + scrollTop + offset + 1);