We have a Single Page Application, built with AngularJS. Like many apps we have a login form with one input[type=text] (email) and one input[type=password] (password). Alright. Firefox saves the data (if the user confirms) and can autoplete the form next time.

We also have a form for editing or creating a user. Of course there are input fields of type text and password, too. Firefox autopletes these fields in any case for any user.

Our user edit form:

<!--span>made by selectize directive: no id, no name<span-->
<input type="text" tabindex="0"></input>
<input
    id="whatever"
    autoplete="off"
    class="form-control"
    name="hi"
    ng-minlength="settings.loginSettings.passwordMinLength"
    ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
    ng-model="userData.password" 
    ng-required="!userData.id" 
    placeholder="{{ '_settings.password' | translate }}" 
    type="password" />

Our form has a different id than the login form, it has the autoplete="off" attribute (which is turned off in FF >= 30, although it is apparently HTML5 standard) and the password field has different name and id attributes than the one in the login form. Other suggestions, like adding one more hidden (style="display: none") text input field do not work.

I've created a very dirty JS hack in the user edit controller, which empties the dirty fields and the related model fields, but the user does see strange things going on on the page.

Most discussions of this issue here are quite old, but on the other hand tons of apps have a login form and a user editing form. I guess we are missing something simple here?

Thanks for any advice!

We have a Single Page Application, built with AngularJS. Like many apps we have a login form with one input[type=text] (email) and one input[type=password] (password). Alright. Firefox saves the data (if the user confirms) and can autoplete the form next time.

We also have a form for editing or creating a user. Of course there are input fields of type text and password, too. Firefox autopletes these fields in any case for any user.

Our user edit form:

<!--span>made by selectize directive: no id, no name<span-->
<input type="text" tabindex="0"></input>
<input
    id="whatever"
    autoplete="off"
    class="form-control"
    name="hi"
    ng-minlength="settings.loginSettings.passwordMinLength"
    ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
    ng-model="userData.password" 
    ng-required="!userData.id" 
    placeholder="{{ '_settings.password' | translate }}" 
    type="password" />

Our form has a different id than the login form, it has the autoplete="off" attribute (which is turned off in FF >= 30, although it is apparently HTML5 standard) and the password field has different name and id attributes than the one in the login form. Other suggestions, like adding one more hidden (style="display: none") text input field do not work.

I've created a very dirty JS hack in the user edit controller, which empties the dirty fields and the related model fields, but the user does see strange things going on on the page.

Most discussions of this issue here are quite old, but on the other hand tons of apps have a login form and a user editing form. I guess we are missing something simple here?

Thanks for any advice!

• javascript
• angularjs
• firefox
• autoplete
• forms

2 Answers 2

This is an old thread but another solution would be to set autoplete='new-password' in the input field.

<input
 id="whatever"
 autoplete="new-password"
 class="form-control"
 name="hi"
 ng-minlength="settings.loginSettings.passwordMinLength"
 ng-model-options="{debounce: {'default': 500, 'blur': 0}}"
 ng-model="userData.password" 
 ng-required="!userData.id" 
 placeholder="{{ '_settings.password' | translate }}" 
 type="password" />

see MDM web docs

I have fixed same issue by adding fake fields above real fields.

<input id="prevent_autofill" type="text" style="display:none;" value="" name="prevent_autofill"></input>
<input id="password_fake" type="password" style="display:none;" value="" name="password_fake"></input>

<input id="real_login" type="text" value="" name="real_login"></input>
<input id="real_password" type="password" value="" name="real_password"></input>