ESXi web client auto-fill credentials

Question

I'm trying to write a greasemonkey script that autofills ESXi login web page with credentials. The following code fills the input fields and enables the submit button:

// ==UserScript==
// @name         ESXi autofill credentials
// @namespace    https://esx_address/ui/*
// @version      0.1
// @description  Autofills user and password inputs
// @author       Mirek
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @match        https://esx_address/ui/*
// @grant        none
// ==/UserScript==

try {
    waitForKeyElements ("#password", function(jNode) {jNode.val("password");});
    waitForKeyElements ("#username", function(jNode) {jNode.val("user");});
    waitForKeyElements ("#submit", function(jNode) {jNode.prop("disabled", false);});
} catch(err) {
    console.log("Something went wrong: " + err.message);
}

Unfortunately, after I click the submit button I see Cannot complete login due to an incorrect user name or password. even though the credentials are correct.

The issue is probably with the submit button enabling. The login page enables it once the user types something into username field. Unfortunately, the script doesn't trigger this behavior. I found out that with the script enabled, when I go to the login page and re-type the last letters of username and password fields, the login succeeds.

How could I fill the input fields in a way that will trigger the submit button to turn on?

Answer 1

This is an annoying worst-practice¹ that generally requires you to spoof user events.

1. The details of what's required are site/app specific (and I'm not going to play around with esxi anytime soon).
   Sometimes you just need to send a change event. Sometimes you need to fake an entire mousein, key dow/press/up, mouseout, blur state-machine -- often with time delays and/or state checks between key steps.
   See below for intermediate-level, example code.
2. Some sites, like Patreon, are especially convoluted.
3. It's theoretically possible for a site to block this entirely, since userscripts can't create trusted events -- especially keyboard events.
4. Irregardless, DO NOT PUT ACCOUNT CREDENTIALS IN A USERSCRIPT!
   Don't take my word for it, look it up...
   At a minimum, use an encrypted framework.

The smart thing to do is to use a password manager. For example, KeePass' "Two-Channel Auto-Type Obfuscation" defeats most of these cr*ppy logins. KeePass is open-source.

---

Example of the kind of code needed if you don't use a good password manager.
This works for my local supermarket. It will not be enough for more difficult sites like many banks. It may NOT work, as-is, for any other site. See #1 above.

function loginSite () {
    //--- Set username and password, from decrypted values. ---
    $("div.input_box_div #userId").attr ('value', usr);
    $("div.input_box_div #password").attr ('value', pword);

    //--- New style login page, approx 10/28/16...
    $('#keepMeSignedIn').prop ('checked', true);
    $("#input-email").attr ('value', usr);
    $("#password-password").attr ('value', pword);
    $("#show-password-checkbox")[0].click (); //-- This is needed for blur hack!!!?!?!

    setTimeout (function () {
        changeAndBlur ("#input-email");
        changeAndBlur ("#input-password");
    }, 400);

    waitForKeyElements ("#create-account-btn", clickWhenPrimed, true);
}

function changeAndBlur (jSelector) {
    let node    = $(jSelector);
    if (node.length) {
        var evChng  = new Event("change");
        node[0].dispatchEvent (evChng);
        var evBlur  = new Event("blur");
        node[0].dispatchEvent (evBlur);
    }
}

function clickWhenPrimed (jNode) {
    if (jNode.css("background-color") == "rgb(228, 23, 32)") {
      click_jNode (jNode);
    }
    else
        return true;
}

Note that for all other sites, I personally use a password manager that can autofill every web page login I use (so far, and with some tweaking).

---

¹ Sites/apps like that are annoying and dangerous as they cripple the functionality of password managers. NIST has recently disapproved of password manager blocking. So complain vigorously to the culpable organization and support any pending laws/regulations that your jurisdiction may have to allow both long pass phrases and password managers.

Answer 2

Thanks to Brock's input I was able to succeed. Thanks! Works with ESXi version: 6.5.0, Client version: 1.18.0.

The change and blur events successfully enable the submit button.

function loginSite() {
    waitForKeyElements("#username", function(jNode) {jNode.val(username);}, true);
    waitForKeyElements ("#password", function(jNode) {jNode.val(password);}, true);
    setTimeout(function() {
        changeAndBlur("#username");
        changeAndBlur("#password");
    }, 400);
}

function changeAndBlur(jSelector) {
    let node = $(jSelector);
    if (node.length) {
        var evChng = new Event("change");
        node[0].dispatchEvent(evChng);
        var evBlur = new Event("blur");
        node[0].dispatchEvent(evBlur);
    }
}

waitForKeyElements("#submit", loginSite, true);