Not saving username with "set password" form - developer

Hi - I'm developing a registration page for an application. In the desired behavior, there is a hidden input with the username, then a visible password and second verify password field.

If I click in the first password field, I get the "suggest password" option. Upon selecting this, 1password prompts to save the password. However, it does not pick up the username from the hidden input.

If I recreate the form and the username input is a normal text input (not hidden, not disabled) then the behavior is as expected and 1password creates a new login with username and password.

However, this is not acceptable for the application as the user cannot change or set their username. Therefore I need to hide the input. But any attempt to do so stops 1password from detecting/saving the username.

What am I missing? Surely there is a way to tell 1password about the username on this page?


1Password Version: Not Provided
Extension Version: Not Provided
OS Version: Not Provided
Sync Type: Not Provided
Referrer: forum-search:best practice

Comments

  • sonnenreich
    sonnenreich
    Community Member
    edited April 2021

    Here is the form:

    <form class="validation-form" id="validation-form-2">
        <h4 class="center">Set the password for your account...</h4>
        <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <label for="username">Your username is <b>XXXXX</b></label>
                <input type="hidden" name="username" autocomplete="username email" value="XXXXX">
            </div>
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="required">
    <label for="UserPassword">Password</label>
    <div class="input password required"><input name="data[User][password]" class="form-control" autocomplete="new-password" required="required" type="password" id="UserPassword"></div></div>             
    </div>
                </div>
    
                <p class="help-block">Please enter password for your account, you'll be using this password to logging in.</p>
            </div>
    
            <div class="form-group">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="required"><label for="UserVerifyPassword">Verify Password</label><div class="input password required"><input name="data[User][verify_password]" class="form-control" autocomplete="new-password" required="required" type="password" id="UserVerifyPassword"></div></div>               </div>
                </div>
            </div>
        </div>  
    </div>
    </form>
    
  • Nhat_Nguyen
    edited April 2021

    Hello @sonnenreich,

    type="hidden" attribute is not one of the attribute types 1Password supports at the moment. I understand your concern, but it is unclear why 1Password must save the username if they can't modify the username field and there is nothing to see there?

    If your website has a login page where your users should enter the username, 1Password would catch it and ask them to update.

  • sonnenreich
    sonnenreich
    Community Member

    Because the login form asks for username and password, and when the username is entered 1password is not prompting for an update. So perhaps that is the underlying issue.

    What does the login form need to look like for 1password to recognize the username and then prompt for an update? I have autocomplete='username' in the username input and autocomplete='current-password' in the password input. However when I put in an username then select the password from the dropdown it does not prompt me to update.

  • ag_ana
    ag_ana
    1Password Alumni

    @sonnenreich:

    What does the login form need to look like for 1password to recognize the username and then prompt for an update?

    Does this help?

    Design your website to work best with 1Password

This discussion has been closed.