Workaround for new Steam login

[Lucki]

This isn't an issue but a workaround.

Since the sign-in rework some time ago the user id input fields weren't recognized anymore at:

• https://store.steampowered.com/login/
• https://steamcommunity.com/login/home/

Image

After some digging I figured that's because there's no identification in the HTML:

<input type="text" class="newlogindialog_TextInput_2eKVn" value="">

HTML

<form class="newlogindialog_LoginForm_3Tsg9">
    <div class="newlogindialog_TextField_2KXGK">
        <div class="newlogindialog_FieldLabel_3d8dp newlogindialog_Highlight_XyqzE">Sign in with account name</div>
        <div class=""></div><input type="text" class="newlogindialog_TextInput_2eKVn" value="">
    </div>
    <div class="newlogindialog_TextField_2KXGK">
        <div class="newlogindialog_FieldLabel_3d8dp">Password</div>
        <div class=""></div><input type="password" class="newlogindialog_TextInput_2eKVn" value=""
            style="background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 16px; background-position: calc(100% - 4px) 50%; background-image: url(&quot;moz-extension://299c980d-7b01-4fad-81f5-f8a8a699d438/skin/icon-light.svg&quot;);">
    </div>
    <div class="newlogindialog_CheckboxField_2QWD5">
        <div tabindex="0" class="newlogindialog_Checkbox_3tTFg">
            <div class="newlogindialog_Check_6EoZE"><svg version="1.1" id="base" xmlns="http://www.w3.org/2000/svg"
                    class="SVGIcon_Button SVGIcon_Check" x="0px" y="0px" width="256px" height="256px"
                    viewBox="0 0 256 256" stroke-width="35" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"
                    stroke-miterlimit="10">
                    <polyline fill="none" points="49.5,147.75 95,210.75 206.5,45.25 "></polyline>
                </svg></div>
        </div>
        <div class="newlogindialog_CheckboxFieldLabel_2yrCY">Remember me</div>
    </div>
    <div class="newlogindialog_SignInButtonContainer_14fsn"><button class="newlogindialog_SubmitButton_2QgFE"
            type="submit">Sign in</button></div>
    <div class="newlogindialog_FormError_1Mcy9">&nbsp;</div><a
        class="newlogindialog_TextLink_1cnUQ newlogindialog_TextAlignCenter_2meUB"
        href="https://help.steampowered.com/wizard/HelpWithLogin?redir=https%3A%2F%2Fstore.steampowered.com%2Flogin%2F%3Fl%3Denglish%26lang%3Denglish">Help,
        I can't sign in</a>
</form>

I created a little user script to add an ID "login" as a workaround. Now the login field is correctly recognized and can be filled with credentials again:

Userscript (not working anymore)

// ==UserScript==
// @name        Steam: Add login input field id
// @namespace   Violentmonkey Scripts
// @match       https://store.steampowered.com/login/
// @match       https://steamcommunity.com/login/home/
// @grant       none
// @version     1.0
// ==/UserScript==

// https://stackoverflow.com/a/61511955
function waitForElement(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

// Assume first match is the user id login input
waitForElement("input[class^='newlogindialog_TextInput']").then((element) => {
    element.setAttribute('id', 'login');
});

Image

Feel free to close :)

[tuxor1337]

Thanks for sharing the workaround!

It's a shame that the Steam login form does not use proper <label> elements or name and id attributes. Without those, I don't think there is anything we can do about this on our side.

[Lucki]

Thanks for the ping, I actually forgot about this and was just recently annoyed of this (again!) because the workaround above isn't actually working anymore. The classes are now all random chars.

Updated workaround:

Userscript

// ==UserScript==
// @name        Steam: Add login input field id
// @namespace   Violentmonkey Scripts
// @match       https://store.steampowered.com/login/
// @match       https://steamcommunity.com/login/home/
// @grant       none
// @version     1.0
// ==/UserScript==

// https://stackoverflow.com/a/61511955
function waitForElement(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

// Wait for login form
// Assume first match is the user id login input
waitForElement('div[data-featuretarget="login"] input[type="text"]').then((element) => {
    element.setAttribute('id', 'login');
});