Trying to optimize site for automatic filling

ljc1423

Greetings,

I'm a developer, and working on a redesign of an existing website. We're moving to a two-step login - username first, then password - very similar to how accounts.google.com does it "because reasons" that I'm not able to argue with at this time. Additionally, an email address field is always visible in the footer of the site, to allow newsletter signups.

I've got the email address field on the first step of the login working just fine with 1Password, but the password field on the second step just won't fill, no matter what I seem to do. On the password entry step, it insists on inserting the email address into the newsletter signup field in the footer, while leaving the actual password field completely blank.

A few notes that might be helpful - this entire site is a single page React app, so there is no actual page reloading going on ever, nor does window.location change between the username and password steps. I've tried to follow the suggestions to add ARIA and autocomplete hints as well.

The login email field element looks like this (ignore the error class):
<input type="email" name="email" value="" aria-label="Email" autocomplete="username" class="src-components-FormField-___FormField__error____1lg4">
It fills perfectly, and ignores the newsletter signup field, as it should.

The login password field element looks like this (again, ignoring the error class):
<input type="password" name="password" value="" aria-label="Password" autocomplete="current-password" class="src-components-FormField-___FormField__error____1lg4">

The newsletter email field element looks like this:
<input type="email" name="newsletter-email" value="" placeholder="email address" aria-label="Newsletter Email">

I've tested it in both the latest version of Chrome and in Safari, both with the same outcome. Do you have any additional suggestions on how to help 1Password pick out and fill the field? I'm OK with having to hit the fill command once per screen, but filling the wrong element and ignoring the password is obviously something I'd like to fix.

---

1Password Version: 6.7.1
Extension Version: 4.6.6.90
OS Version: macOS 10.12.5
Sync Type: Teams

matthew_ag

Hey @ljc1423,

Thank you for taking the time to write in, we love hearing from website developers and thank you especially for taking the time to help 1Password work on your website! I'm very sorry about the delay in getting back to you. When you say a "two-step login" and that the window.location doesn't change it sounds like the page is adding / removing form fields dynamically on the page via React to simulate the two-step login flow. Would that be right?

Given that being the case, the important thing to know is: after the email field has been filled by the user (or 1Password) what happens to that element once the user moves to the password part of the login flow? Does the email field get removed from the DOM or is it just hidden?

Taking the Google Sign-in page as an example:

• When the username / email field is displayed its HTML ID is identifierId and when the user clicks "Next", its HTML ID is changed to hiddenEmail.
• So when the user wants to use 1Password to fill the password step and tries to fill, 1Password can see that there is an email field still on the page so allows 1Password to recognize it as a log in form. This helps 1Password make the right choice for which fields to fill.

So if you haven't already tried and it suits your page's design, I'd suggest hiding the email field from the first log in step, e.g. email_element.style.display = 'none'.

Let me know if that helps or if you've any further questions. If you want to discuss this further we'd be very happy to. To help us aid you quicker, would it be possible to see a preview of what you've designed? We can discuss via email if that would suit you better also.

Looking forward to hearing back.

Best regards,
Matthew

ljc1423

Hi @matthew_ag - thanks for the reply! You're right, it's storing the value of the email field to the app's redux store, removing the element entirely, and then exposing only a password field. I'll give the suggestion on hiding the email element without removing from the DOM a try when I return to the office tomorrow - should be really easy to test, and that may well be just the ticket.

If it still behaves weirdly, I'll see what I can do to provide more detail and/or move to email. Nothing is on a publicly facing site yet, so I can't just take the easy way out and send you a link to check out :) .

matthew_ag

Hey again @ljc1423,

Thanks for replying and confirming that. I'm looking forward to hearing how you get on :chuffed:

Matthew

ljc1423

Hi @matthew_ag - Tried a similar approach today, and sadly, it behaves identically - still requiring two fill commands, and not filling the password field yet inserting email into the newsletter field on the second fill command. It almost seems like 1Password is completely ignoring the autocomplete properties on the fields entirely. Maybe moving to email would be easier for now - should I send something in to the support address?

AGAlumB

@ljc1423: Sure, just shoot us an email at support+extension@agilebits.com and post the Support ID you receive here so we can track it down and get back to your quickly. Cheers! :)