1

I have a login page for my angularjs site and I'm using the angularjs material library's inputs.

On first page load LastPass detects the email and password inputs and auto fills them. The problem is if I leave the page and navigate back to the login page (without a full browser refresh), LastPass won't detect the inputs.

My mark up is as follows:

<form class="inputs-form" name="login" layout="column"> 
    <div class="inputs-container">
        <h2>Sign In</h2>
        <div layout="column" layout-align="start center">
            <div ng-if="errorMessage" class="error-text">{{errorMessage}}</div>
            <div>
                <md-input-container flex="100" class="signin-input-container">
                    <label>Email</label>
                    <input class="username" ng-model="email" type="text" />
                </md-input-container>
            </div>
            <div>
                <md-input-container flex="100" class="signin-input-container">
                    <label>Password</label>
                    <input class="password" ng-model="password" type="password" />
                </md-input-container>
            </div>
        </div>
    </div>
    <div class="btn-container" flex="100" layout="row" layout-align="center center">
        <div>
            <button ng-click='login()' class='t3Btn_primary'>Sign In</button>
        </div>
    </div>
</form>

I've tried setting the id, name and class of the inputs to password and username like I've seen others suggest in other questions but that doesn't work in this case.

It would be great if someone knew how I could get LastPass to detect the inputs everytime the page is rendered and not just when a full browser refresh occurs.

Thanks.

Ross
  • 11
  • 1
  • 4
  • Have you followed tips in these? https://hiddedevries.nl/en/blog/2018-01-13-making-password-managers-play-ball-with-your-login-form https://stackoverflow.com/questions/23804008/browers-autofill-is-not-working-in-ember-js-forms https://discuss.emberjs.com/t/support-browser-autocomplete-feature-saved-passwords/2322/2 And this last one:https://github.com/TryGhost/Ghost/issues/4651 which is related but not the same – EdL Feb 06 '19 at 17:40
  • @EdL I had a look at those links. I couldn't get anything to work. Interestingly enough, adding a name to the email input stops it autofilling completely. I guess the problem could be that I'm adding this form onto the page through an angularjs directive. – Ross Feb 07 '19 at 09:19
  • Yes, That is definitely related. If the form existed on the original dom I don't think it would be such an issue. See this from 1Password as well: https://support.1password.com/compatible-website-design/ Maybe adding an action to the form would aid detection – EdL Feb 07 '19 at 11:04
  • So to sum up. Make the form have an action (even if that action is stopped with a beforeSubmit binding), make the form type="post", associate the labels with the fields (for the sake of accessibility if nothing else) and failing those resort to having the password page DOM exisiting at page load – EdL Feb 07 '19 at 11:43

0 Answers0