ing-new-login-helper.user.js

// ==UserScript==
// @name        New ING Login Helper
// @description Creates a password input field for password managers
// @author      Slawek Kolodziej
// @namespace   slawekkolodziej
// @include     https://login.ingbank.pl/mojeing/app/*
// @run-at      document-end
// @version     1.2.0
// @grant       none
// ==/UserScript==

(function() {
    const wait = 10000;
    const delay = 500;
    const polling = setInterval(isInitializedLookup, delay);

    function isInitializedLookup() {
        const initialized = isInitialized();

        if (initialized || wait <= 0) {
            clearInterval(polling);
        }

        if (initialized) {
            inject();
        }
    }

    function isInitialized() {
        return document.querySelector('.ing-password-container') !== null;
    }

    function renderForm() {
        const containerElement = document.createElement('div');
        containerElement.className = 'form-group';
        containerElement.innerHTML = `
            <label>Has%C5%82o:</label>
            <input class="form-control" type="password" id="ing-helper">
        `;

        const input = containerElement.querySelector('input')

        input.style.width = '90%';
        input.style.margin = '0 5%';
        input.addEventListener('change', handleInputChange);

        const oldInput = document.querySelector(".ing-password-container__password");

        oldInput.style.display = 'none';
        oldInput.parentNode.insertBefore(input, oldInput);
    }

    function handleInputChange(e) {
        const maskedInputs = document.querySelectorAll('input[type=password][name^="mask"]');
        const pass = e.target.value;

        Array.from(maskedInputs).map(el => {
            const index = parseInt(el.name.slice(5)) - 1;
            const e = document.createEvent('KeyboardEvent');

            e.initEvent('keyup', true, true);
            e.keyCode = pass.charCodeAt(index)

            el.value = pass.charAt(index)
            el.dispatchEvent(e)
        });
    }

    function inject(){
        renderForm()
    }
}());