Need more details about how to build forms to change or recover password

sandrina_remote

Following your guide Design your website to work best with 1Password, there is a section about Password change forms:

To make the intention of each form element clear on password change forms, ask for the current password, the new password, and a password confirmation in that order.

I still need more information about it. What about "recover password" pages?

I'm building a page to reset the password that only asks for the new password and the password confirmation. It does not ask for the current password because the person doesn't know it. This page is accessed through a unique link send by e-mail "Recover password".

In the form above, 1PW does not pick up the new password.

Question 1: How can I build the form in such a way that 1PW associates it with a login?

**Question 2:* How does 1PW handle pages with multiple logins (different usernames but same password?). How can I ensure 1PW won't try to update the incorrect password.

This extra information would be highly useful if it was included in the guide mentioned earlier.

Thank you!

ag_yaron

Hey @sandrina_remote ,

1Password will usually detect a "change password" form if there are two consecutive password fields one after the other. It doesn't matter if the purpose of the form is to simply change a password or recover a password.

If your recovery page does not trigger 1Password's new password suggestion, you can add some autocomplete attributes to it, as we follow the HTML spec standard for autofilling: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

So a "Current password" field should have autocomplete="current-password" attribute.
A "New password" and "Confirm new password" fields should have autocomplete="new-password" attribute.

Here are some example forms for you to review: https://fill.dev/

How can I build the form in such a way that 1PW associates it with a login?

1Password associates logins with websites according to the domain that is found in the login item's URL. As long as your form resides under the same domain that the login item contains, 1Password will associate them one to another. If your form resides on a different domain, then 1Password will address it as a completely new login item.

How does 1PW handle pages with multiple logins (different usernames but same password?). How can I ensure 1PW won't try to update the incorrect password.

You can have multiple different login items for the same website in 1Password. Each one of them is a completely separate entry. When you reach a page where you have multiple logins for, 1Password will suggest them all and you'll need to pick the one you want to use. Same applies for changing the password - it will ask you to which login entry do you want to apply the changes.

sandrina_remote

Hi @ag_yaron, thank you for your answer!

So a "Current password" field should have autocomplete="current-password" attribute. A "New password" and "Confirm new password" fields should have autocomplete="new-password" attribute.

That works fine in our traditional "Change password" page. But our scenario is different, it's a "reset/create new password", which means we don't have the "Current password" field.

So we just have the "new password" and "confirm new password" fields. Like this:

<form>
  <input id="pw" type="password" name="password" autocomplete="new-password" />

  <!-- Some elements but not <inputs /> -->

  <input id="npw" type="password" name="confirmPassword" autocomplete="new-password" />
</form>

It's not possible for us to add the current password field because the user does not know the current password.

How should we proceed?

ag_yaron

Hey @sandrina_remote ,

What you did is correct and 1Password should show up with a new suggested strong password. No "Current password" field is required.
If 1Password does not show up suggesting a new password, can you share the page's URL with us? Alternatively, sending us the page's structure would also help:

1. Get to the form on the page.
2. Right click the 1Password extension icon on the top right corner of the browser and select "Help" -> "Collect page structure".
3. Send us the structure in a text/doc file to support+extensions@1password.com alongside a short description and a link to this discussion :)

sandrina_remote

@ag_yaron, I sent an e-mail with those instructions. We can follow-up there. Thank you!

ag_yaron

Great, thank you :+1:

sandrina_remote

For those in the future, this is the outcome of my conversations with the support team:

• The 1Password (desktop app required) extension is not able to recognize password changes if it only contains two fields: "new password" and "confirm new password". This is a common bug in many forms out there used to reset the password (eg reset google account password)

• The support team recommended using the new 1Password Manager extension extension that behaves differently from the older extension. It's "definitely the future of 1Password, so the old 1Password Classic will most likely not get any further updates".

In detail, the newer version works differently:

• It shows up inside fields automatically and suggests relevant actions, such as auto-filling, creating new strong passwords, saving etc.
• It does not pop up on its own after you submit the form. You must click the "Save in 1Password" button if you manually type your username/password and save/update/overwrite the details.
• If you select a strong suggested password that it offers you, it will automatically trigger the save/update prompt.

---

So, I guess I'll have to use the newer version. I've been using it for a few days but I rolled back to the older one for two main UX reasons:

• It does not support touchID to unlock 1PW.
• I can't hide the 1PW icon in the input fields. This breaks UX on those fields that have the "eye icon" to reveal the password.

ag_yaron

Thanks for the summary @sandrina_remote :+1: