Last active
November 14, 2023 15:54
-
-
Save glorpen/c25397c6380e6ccf9667 to your computer and use it in GitHub Desktop.
User script for creating password field on ING login form - to enable LastPass support.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name ing login | |
// @match https://login.ingbank.pl/* | |
// @version 4.0 | |
// ==/UserScript== | |
/** | |
* Creates a password input field for LastPass/KeePass autocomplete. | |
* @author Arkadiusz Dzięgiel | |
**/ | |
(function(){ | |
function getShadowFields(...selectors) | |
{ | |
let doc = document; | |
for(let i in selectors) { | |
const node = doc.querySelector(selectors[i]); | |
if (node === null || node === undefined) { return null; } | |
if (i == selectors.length - 1) { | |
return node; | |
} | |
doc = node.shadowRoot; | |
} | |
} | |
function getLoginField() | |
{ | |
return getShadowFields("login-subapp", "provider-login-content", '[data-tag-name="login-form"]', '[data-tag-name="ing-form"] input[name="login"]'); | |
} | |
function getMaskedPasswordField() | |
{ | |
return getShadowFields("login-subapp", '[data-tag-name="login-auth"]', '[data-tag-name="ing-form"] [data-tag-name="ing-pin-input"]'); | |
} | |
function buildContainer(labelText, input) { | |
const container = document.createElement("div") | |
const label = document.createElement("label") | |
container.style = "padding: 1rem;"; | |
label.appendChild(document.createTextNode(labelText + ":")) | |
label.appendChild(input) | |
container.appendChild(label) | |
return container | |
} | |
function addPasswordField(target) | |
{ | |
const realFields = [...target.getElementsByClassName("form-control")].filter(el => !el.disabled); | |
const input = document.createElement("input"); | |
input.type = "password"; | |
input.id = "password"; | |
input.style = "width: 90%; padding: 0.5em; margin: 0px 5%"; | |
input.addEventListener("change", function () { | |
const val = this.value; | |
realFields.forEach(function(el){ | |
const num = parseInt(el.name.substr(4)); | |
el.value = val.charAt(num-1); | |
el.dispatchEvent(new Event('change', {bubbles: true})); | |
}); | |
}); | |
document.body.prepend(input); | |
return input; | |
} | |
function addLoginField(target) | |
{ | |
const input = document.createElement("input"); | |
input.type = "text"; | |
input.id = "username"; | |
input.style = "width: 90%; padding: 0.5em; margin: 0px 5%"; | |
input.addEventListener("change", function () { | |
target.value = this.value; | |
target.dispatchEvent(new Event('change', {bubbles: true})); | |
}); | |
return input; | |
} | |
let localLoginField = null; | |
let localMaskedPasswordField = null; | |
setInterval(function(){ | |
const loginField = getLoginField(); | |
const maskedPasswordField = getMaskedPasswordField(); | |
if (loginField !== null && localLoginField === null) { | |
localLoginField = buildContainer("Username", addLoginField(loginField)); | |
document.body.prepend(localLoginField); | |
} | |
if (loginField === null && localLoginField !== null) { | |
localLoginField.remove(); | |
localLoginField = null; | |
} | |
if (maskedPasswordField !== null && localMaskedPasswordField === null) { | |
localMaskedPasswordField = buildContainer("Password", addPasswordField(maskedPasswordField)); | |
document.body.prepend(localMaskedPasswordField); | |
} | |
if (maskedPasswordField === null && localMaskedPasswordField !== null) { | |
localMaskedPasswordField.remove(); | |
localMaskedPasswordField = null; | |
} | |
}, 500); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment