etn-ccis/blui-angular-workflows

Don't disable the log in button when browser auto-populates the password

Closed this issue · 3 comments

Describe the bug

A lot of times, a user may have a browser save their login credentials, and the moment they visit the /login page, the text fields are populated with login credentials automatically, but the login button stays disabled.

What is the expected behavior?

On page load, there should be an initial check of form validation to enable / disable the login button.

What are the steps to reproduce?

  1. npx -p @pxblue/cli pxb new angular --name testauth --template=authentication --lint --prettier --language=typescript
  2. Log in with "remember me" checked
  3. When prompted by browser, save the password & credentials
  4. Log out
  5. If the browser pre-populates your credentials, you will observe that the login button is disabled

Screenshots or links to minimum reproduction example

Screen Shot 2021-06-24 at 1 50 09 PM

Environment

MacOS Chrome

This seems to be related to browser security policy...the change event is not fired until the user physically interacts with the page...this is to prevent password harvesting.

There is a fair amount of discussion around this on the internet if you google for it

As of right now, this is browser-intended security behavior. We can revisit in the future if this becomes more of an issue.