Hello I am developing VUE app with registration/login form in popup. How to corectly create form inputs to allow 1password generate/autofill email (I am using masked mail) and password (the most minimal version)?
I tried all below, but nothing works :( (password works most of the time, but the biggest problem is with email)
<form> <input type="email" name="email" /> <input type="password" autocomplete="new-password" /> <input type="password" autocomplete="current-password" /> </form>
<form> <input type="email" autocomplete="username" name="email" /> <input type="password" autocomplete="new-password" /> <input type="password" autocomplete="current-password" /> </form>
<form> <input type="email" autocomplete="email" name="email" /> <input type="password" autocomplete="new-password" /> <input type="password" autocomplete="current-password" /> </form>
1Password Version: 8.10.0 (81000048)
Extension Version: 2.7.0
OS Version: Windows 11
You shouldn't need to do anything special in your registration/login form for 1Password to generate or autofill any email addresses, we only suggest that you follow the best practices that you can find on our Developer website: Design your website to work best with 1Password.
Could you let me know what 1Password is suggesting to fill in on your end? Is it suggesting to fill an existing login item into the field?
Yes, after creating new login (on localhost domain) the 1Password fill the inputs correctly (e-mail and password).
Sorry for the delayed response @DefiCzech, thank you for the update.
Let us know if there is anything else we can help with at all.
Here is my registration form - 1password icon is present, but only with info "No item to show"
And here is my Pages structure, created by 1password (right clik -> 1password manager -> help -> Collect Page Structure) - what to improve? Password is only suggested in last input field.
Hi @DefiCzech sorry for the delay in getting back to you. I took a look at your page structure. It's possible that 1Password is getting confused by some of the code related to the new email and new password fields.
Specifically, the values for the "htmlId" and "htmlClass" attributes in your form are not what 1Password expects to see for new email and new password fields. If you look at the page structure for our test form, the values for those attributes are more straight forward.
I strongly recommend checking out this guide on how to code your forms to work best with 1Password: https://developer.1password.com/docs/web/compatible-website-design/
I hope that helps!
If 1Password relies on class (it is nonsense, class is mainly used for css stylesheet so there are no semantic classes at all.) so it is reason why this does not work on lots of webs.
IMHO, only valid attributes, that should 1Password consider are. type, autocomplete, may be name, id - bud id has to be unique on page and if there is registration on page and on popup, so there could be same ids (reg form on page and on popup). We have lots of languages so value of label tag should not be considered as well by 1Password.
So ok, I have to swallow the bitter pill and lived that 1Password have no good detection and as developer I am unable to exactly set some attributes for 1Password to precise detection.
Hey @DefiCzech! I asked one of our developers to take a closer look at your form. They shared the following feedback:
Hope that helps!