How to properly prepare registration form?
DefiCzech
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
Browser:_ Edge
Comments
Team Member
Hi @DefiCzech
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).
Team Member
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.
But 1Password Is detecting inputs only for filling (already manualy created login info) it does not provide possibility to generate masked email, sometimes password. Maybe it is because inputs are generated dynamicaly by JavaScript but after focusing input 1password exactly know what type of input Is selected si it should not be a issue.
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.
{ "unparsedUrl": "http://localhost:5173/Scripts/web/pages/klientska-sekce/", "title": "localhost:5173/Scripts/web/pages/klientska-sekce/", "frames": [ { "fields": [ { "autocompleteType": "email", "formOpid": 0, "htmlId": "input-email-1", "htmlClass": "bg-transparent border-0 rounded-[var(--rounding)] box-border text-[var(rgb(--input-text))] block outline-0 py-3 px-4 w-full z-[5] relative text-sm disabled:text-[rgb(var(--neutral-400))]", "isActive": true, "opid": 709, "type": "email", "dataAttributes": {}, "label": "E-mail", "labelAfter": "E-mail" }, { "autocompleteType": "new-password", "formOpid": 0, "htmlId": "input-password-2", "htmlClass": "bg-transparent border-0 rounded-[var(--rounding)] box-border text-[var(rgb(--input-text))] block outline-0 py-3 px-4 w-full z-[5] relative text-sm disabled:text-[rgb(var(--neutral-400))]", "minLength": 8, "opid": 710, "type": "password", "dataAttributes": {}, "label": "Vaše heslo", "labelBefore": "E-mail", "labelAfter": "Vaše heslo" }, { "autocompleteType": "password", "formOpid": 0, "htmlId": "input-password-3", "htmlClass": "bg-transparent border-0 rounded-[var(--rounding)] box-border text-[var(rgb(--input-text))] block outline-0 py-3 px-4 w-full z-[5] relative text-sm disabled:text-[rgb(var(--neutral-400))]", "opid": 711, "type": "password", "dataAttributes": {}, "label": "Potvrdit heslo", "labelBefore": "Vaše heslo", "labelAfter": "Potvrdit heslo" }, { "formOpid": 0, "htmlClass": "block box-border select-none border-2 border-solid no-underline px-4 font-semibold text-sm transition-all outline-0 rounded-[var(--rounding)] focus:ring-2 focus:ring-input-state-focus/30 bg-[rgb(var(--button-primary-default-background))] text-[rgb(var(--button-primary-default-text))] border-[rgb(var(--button-primary-default-border))] hover:bg-[rgb(var(--button-primary-hover-background))] hover:text-[rgb(var(--button-primary-hover-text))] hover:border-[rgb(var(--button-primary-hover-border))] h-[var(--button-size-default)] cursor-pointer w-full", "opid": 712, "type": "submit", "dataAttributes": {}, "labelBefore": "Potvrdit heslo Odesláním souhlasíte se zpracováním osobních údajů podle informačního memoranda", "labelAfter": "Registrovat" } ], "forms": [ { "headerText": "Registrace uživatele", "htmlAction": "http://localhost:5173/Scripts/web/pages/klientska-sekce/", "opid": 0, "textContent": "E-mail Vaše heslo Potvrdit heslo Odesláním souhlasíte se zpracováním osobních údajů podle informačního memoranda REGISTROVAT" } ], "origin": "http://localhost:5173", "pathName": "/Scripts/web/pages/klientska-sekce/", "uuid": "9nn7gs" }, { "direction": "ltr", "fields": [], "forms": [], "origin": "https://www.google.com", "title": "reCAPTCHA", "pathName": "/recaptcha/api2/anchor", "uuid": "1ok96kq" }, { "direction": "ltr", "fields": [], "forms": [], "origin": "https://www.google.com", "pathName": "/recaptcha/api2/anchor", "uuid": "2kteal" }, { "direction": "ltr", "fields": [ { "htmlId": "recaptcha-reload-button", "htmlClass": "rc-button goog-inline-block rc-button-reload", "opid": 0, "tabIndex": 3, "title": "Načíst nový test", "type": "submit", "dataAttributes": {} }, { "htmlId": "recaptcha-audio-button", "htmlClass": "rc-button goog-inline-block rc-button-audio", "opid": 1, "tabIndex": 1, "title": "Načíst zvukový test", "type": "submit", "dataAttributes": {} }, { "htmlId": "recaptcha-image-button", "htmlClass": "rc-button goog-inline-block rc-button-image", "isHidden": true, "opid": 2, "title": "Načíst vizuální test", "type": "submit", "dataAttributes": {} }, { "htmlId": "recaptcha-help-button", "htmlClass": "rc-button goog-inline-block rc-button-help", "opid": 3, "tabIndex": 2, "title": "Nápověda", "type": "submit", "dataAttributes": {} }, { "htmlId": "recaptcha-undo-button", "htmlClass": "rc-button goog-inline-block rc-button-undo", "isHidden": true, "opid": 4, "title": "Zpět", "type": "submit", "dataAttributes": {} }, { "htmlId": "recaptcha-verify-button", "htmlClass": "rc-button-default goog-inline-block", "opid": 5, "type": "submit", "dataAttributes": {} } ], "forms": [], "origin": "https://www.google.com", "title": "reCAPTCHA", "pathName": "/recaptcha/api2/bframe", "uuid": "1dcwrzw" } ] }Team Member
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.
{ "unparsedUrl": "https://fill.dev/form/registration-email", "title": "Test Autofill", "frames": [ { "fields": [ { "autocompleteType": "email", "formOpid": 0, "htmlId": "email", "htmlName": "email", "htmlClass": "form-control", "isActive": true, "opid": 1, "type": "email", "dataAttributes": {}, "label": "Email", "labelBefore": "Email" }, { "autocompleteType": "new-password", "formOpid": 0, "htmlId": "password", "htmlName": "password", "htmlClass": "form-control", "opid": 2, "type": "password", "dataAttributes": {}, "label": "Password", "labelBefore": "Password" }, { "autocompleteType": "new-password", "formOpid": 0, "htmlId": "password-confirm", "htmlName": "password_confirmation", "htmlClass": "form-control", "opid": 3, "type": "password", "dataAttributes": {}, "label": "Confirm Password", "labelBefore": "Confirm Password" }, { "formOpid": 0, "htmlClass": "btn btn-primary", "opid": 4, "type": "submit", "value": "Register", "dataAttributes": {} } ], "forms": [ { "headerText": "Register", "htmlAction": "https://fill.dev/submit", "htmlMethod": "POST", "opid": 0, "textContent": "Email Password Confirm Password Register" } ], "origin": "https://fill.dev", "title": "Test Autofill", "pathName": "/form/registration-email", "uuid": "c83j0b" } ] }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.
Team Member
Hey @DefiCzech! I asked one of our developers to take a closer look at your form. They shared the following feedback:
Hope that helps!