QNAP NAS login form not populating correctly

focher
focher
Community Member
in 1Password in the Browser

When using a Login entry from 1Password on my home QNAP NAS, it fills in the password attribute in the form but not the username.

Here is the login form element.

<div class="box-shadow" id="loginForm">
<div class="form-ct">
<form>
<div class="step step_1 step-active ">
<div class="anim-scale delay-1">
<div class="host-name ">NAS-TS-563</div>
<div class="node-name ">&nbsp;</div>
</div>
<div class="anim-scale delay-2">
<div class="field input-field"><span class="user-icon"></span><textarea class="qStr" data-qstrph="LDAP_SERVER_STR12" id="username" autocomplete="off" placeholder="Username"></textarea><span class="reset-icon slice-img"></span></div>
<div class="field input-field"><span class="pwd-icon"></span><input class="qStr" data-qstrph="QUICK04_STR09" id="pwd" type="password" autocomplete="off" placeholder="Password"><span class="unmask-eye" style="display: none;"></span></div>
</div>
<div class="anim-scale delay-3">
<div class="field checkbox-field "><input type="checkbox" id="rememStatus" autocomplete="off"><label class="qStr" data-qstrid="QTS_REMEMBER_ME" for="rememStatus" id="rememLabel">Remember me</label></div>
<div class="field checkbox-field "><input type="checkbox" id="secureStatus" autocomplete="off"><label class="qStr" data-qstrid="QTS_SSL_LOGIN" for="secureStatus" id="secureLabel">Secure login</label></div>
</div>
<div class="msg"></div>
<div class="anim-scale delay-4">
<div class="center "><button class="login-btn qStr submit" data-qstrid="QNAP_PS_LOGIN" id="submit">Login</button></div>
</div>
</div>
<div class="step step_2">
<div class="center title block" for="scyCode">
<span class="lock-icon slice-img-2">&nbsp;</span><span class=" lock-icon--label qStr" data-qstrid="AUTH_2STEP_01">2-step Verification</span>
</div>
<div class="msgCt">
<span id="scy_msg" class="msg qStr display-hide" data-qstrid="AUTH_2STEP_30">Please enter the security code.</span>
</div>
<div class="input-field">
<span class="pwd-icon"></span><input id="scyCode" type="text" class="login_input" tabindex="1" autocapitalize="off" autocomplete="off">
</div>
<div id="scy_msg2" class="result-msg display-hide"></div>
<div class="center bottom">
<button class="login-btn qStr submit" data-qstrid="QNAP_PS_LOGIN" id="scySubmit">Login</button>
</div>
<span id="lostPhone" class="actionText margin-btm-1 qStr" data-qstrid="AUTH_2STEP_31">Verify another way</span>
<span class="cancel_login actionText margin-btm-1 qStr" data-qstrid="IEI_NAS_BUTTON_CANCEL">Cancel</span>
</div>
<div class="step step_3">
<div class="center title block" for="scyCode">
<span class="lock-icon slice-img-2">&nbsp;</span><span class=" lock-icon--label qStr" data-qstrid="AUTH_2STEP_01">2-step Verification</span>
</div>
<div class="msgCt">
<span class="msg margin-btm-1 qStr" data-qstrid="AUTH_2STEP_36">Please answer the secuity question below:</span>
<label class="login_input block margin-top-1 question_label fb" for="scyAns"></label>
</div>

<div class="usermane input-field">
<span class="pwd-icon"></span><input id="scyAns" type="text" class="login_input" tabindex="1" autocapitalize="off" autocomplete="off">
</div>
<div id="qestion_msg" class="result-msg display-hide"></div>
<div class="center ">
<button class="login-btn qStr submit" data-qstrid="QNAP_PS_LOGIN" id="scyAnsSubmit">Login</button>
</div>
<span id="back_2sv" class="actionText margin-btm-1 qStr" data-qstrid="IEI_NAS_BUTTON_BACK">Back</span>
<span class="cancel_login actionText margin-btm-1 qStr" data-qstrid="IEI_NAS_BUTTON_CANCEL">Cancel</span>
</div>
</form>
</div>
</div>

I recall many versions ago that the form attribute name could be customized in the 1Password app. This functionality appears to have been removed at some point.

1Password Version: 1Password for Windows 8.10.7 (81007035)
Extension Version: 2.10.0
OS Version: Windows and macOS
Browser:_ Chrome
Referrer: forum-search:login form

Comments

  • Joy_1P
    Joy_1P
    1Password Alumni

    Hi @focher, thanks for reaching out about this. Our developers are aware of an issue with 1Password being unable to fill the username field on a QNAP device's login page. This is happening because the "Username" field is set up as a "textarea" field rather than an "input" element. I've added you as an affected user to our internal report. We are hoping to improve this in a future update for the extension.

    In the meantime, my best recommendation is to copy/paste your username to the site. Another option is to Drag and Drop your username to the field. The Drag and Drop feature is supported with the 1Password in the browser as well as the desktop app.

    I hope the workarounds above can help for now. Let us know if you have any other questions.

    ref: dev/core/core#2400

  • GoShawn
    GoShawn
    Community Member

    The source of the issue is QNAP's decision to have the username field be a 'textarea' class instead of 'input', as other have pointed out already:

    https://1password.community/discussion/112744/autofill-has-ceased-working-on-qnap-qts-4-4-2-1270-login-page/p1

    Like others, I have thousands of credentials in my 1P vault and QNAP is the ONLY vendor out of all of them that won't autofill.

    Thanks, QNAP! 🤦🏼‍♂️

    In the QNAP forums there are two posts about this issue. One circa 2020, similar to the linked topic above and they spell out the fix as well and reference this 1P forum and ramblingpolak's post:

    https://forum.qnap.com/viewtopic.php?p=769594&hilit=autofill+username+textarea#p769594

    There's a newer post in the QNAP forum as well, circa 2021 to 2023, where user ianperryman has the same issue using Bitwarden:

    https://forum.qnap.com/viewtopic.php?p=815536&hilit=autofill+username+textarea#p815536

    In that post, there is a link to a Greasemonkey script that will solve this, which is great for non-Safari browsers:

    https://greasyfork.org/en/scripts/419313-fix-qnap-qts-username-autofill

    For Safari users on a Mac, you can install buy and install Tampermonkey from the MAS for $1.99 USD:

    https://apps.apple.com/us/app/tampermonkey/id1482490089

    And there's a browser app on the iOS App Store called Userscripts that supports Greasemonkey scripts on iPhone and iPad that is FREE:

    https://apps.apple.com/us/app/userscripts/id1463298887

    Of course, modifying the underlying HTML is always an option, one just needs to remember to make the change after each reboot or when upgrading the QNAP OS.

    Question for the 1Password team: Since QNAP is the only vendor I've run into that has this issue, is there a way to have the 1P app/extension recognize the QNAP page and then use an autofill method that would work with the 'textarea' class?

    No idea how many people in the world use QNAP or any of the many password managers out there, but I am sure there are a lot.

    Seems like a tall ask to have ever password management vendor create a one-off fix for this one issue when the vendor (QNAP) could easily make the change.

    Wondering how hard it would be to find one of the Developers who actually maintain the code for the /home/httpd/cgi-bin/login.html page via social media and have a chat with them directly as opposed to going the support/product management route.

    No offense to PMs and Support folks, but this is such an easy fix, it wouldn't be worth the effort to put in another Jira ticket to address it. 😄

    Just to help link to other issues here in the 1P and QNAP forums, I've created Ticket # Q-202308-47318 and pasted the contents of said ticket below for reference:

    Hello.

    There are a number of QNAP users who are not able to use browser or password manager AUTOFILL features on the QNAP QTS or QUTS login page due to /home/httpd/cgi-bin/login.html using 'textarea' as opposed to the industry standard 'input' class for the username field.

    Please see the following pages for examples within the QNAP Community forum: [https://forum.qnap.com/search.php?keywords=autofill+username+textarea and https://1password.community/search?domain=all_content&query=qnap&scope=site&source=community](https://forum.qnap.com/search.php?keywords=autofill+username+textarea and https://1password.community/search?domain=all_content&query=qnap&scope=site&source=community) for a list of pages on the QNAP and 1Password community forums for posts regarding the issue.
    In the above 1Password forum link, user f2pnt8 posts a detailed workaround to address the issue by modifying the login.html file located at: /home/httpd/cgi-bin/login.html
    The problem with this work around is that it's not persistent after a reboot or after a firmware upgrade.

    What are the chances that this ticket could be passed on to the software developers/engineers who maintain the code for the login.html file so that they can update to the input class as 99.9% of other software developers use? It would take 2 minutes to fix the issue and submit it to the main branch for the next software release.

    I've created a short screencast GIF showing the issue, and have pasted a link here to allow other QNAP community members to see the issue as well:

    Thank you in advance for your consideration.

    //Shawn

    GIF LINK: https://fileshare.eiq-platform.com/2023-08-25_18-19-59.gif

  • focher
    focher
    Community Member

    Happy to report that the latest firmware on the QNAP resolved this issue, as they have fixed the login form so that 1Password detects it correctly.

  • andrew.l_1P
    andrew.l_1P

    Thanks @GoShawn and @focher for sharing these updates here, we appreciate your efforts! Let me know if there's anything we can do to help on our end. 🙂

This discussion has been closed.