Browser does not ask to save password Angular application

Question

I am working on an Angular application that starts with a login portal. I am using the following template for my login screen:

login.html

    <form method="post" name="form" (ngSubmit)="f.form.valid && login()" #f="ngForm" novalidate>
      <fieldset>
        <p>
          <label>Username</label>
          <input type="text" placeholder="e.g. JohnDoe" [(ngModel)]="model.username" #username="ngModel"
                 name="username" required/>
        </p>

        <p [ngClass]="{ 'has-error': f.submitted && !password.valid }">
          <label>Password</label>
          <input type="password" placeholder="Password" name="password" [(ngModel)]="model.password"
                 #password="ngModel" required/>
        </p>
        <p>
        <input type="submit" [disabled]="loading" class="btn" value="Login">
        </p>
      </fieldset>
    </form>

Unfortunately, whenever a user is logged in, the password manager of Chrome does not ask to store the credentials. Password managers like Lastpass however do offer to store it. What could I improve to fix this?

May be because on `localhost` you have clicked `NEVER` option for this domain ? — Touqeer Shafi, Nov 01 '17 at 10:30
What is inside of login method? Are you redirecting after a successful login? When I tested it, it also doesn't work when no request is fired (subscribed to) or if there is no redirect/visual change on screen — Vojtech, Nov 03 '17 at 10:45

nickcrabtree · Accepted Answer · 2020-11-03T11:50:06.350

It used to be the case (when this question was originally asked) that if you turned on the Chrome flag chrome://flags/#enable-password-force-saving then you get a key icon in the address bar whenever a form is visible. Clicking this would force the 'save password' bubble to pop up.

It appears that (as of 3rd November 2020) this flag has been removed so this is no longer possible.

From Techradar but copied here to prevent link rot: Chrome Flags are experimental features that aren't yet part of the browser by default, but can be enabled with a couple of clicks. They're simple to use and can transform the way you browse the web.

To access the Flags menu, type chrome://flags into the address bar and hit Enter. Here, you'll see a long list of options, each of which has a drop-down menu that can be set to Default, Enabled or Disabled. There are lots of them, so the best way to find the one you want is to hit Ctrl+F and search for it.

Once you've enabled a Flag, you'll be prompted to re-launch your browser to activate it. This will close and re-open all your current browser windows, so make sure you've saved anything you're working on.

The tools here are still in testing, and aren't necessarily stable. There's also a possibility, however small, of security issues. If that's something you can live with, there are some real gems on offer.

Add more details. how this flag should be added – Vala Khosravi Nov 02 '20 at 15:36 — Vala Khosravi, Nov 02 '20 at 15:36

score 1 · Answer 2 · answered Nov 07 '17 at 10:38

1

You might want to look at this: Angularjs Chrome autocomplete dilemma

and also Fixing autocomplete (autofill) on Angular and don't miss this one AngularJS browser autofill workaround by using a directive

All you need is a custom directive to handle that situation.

Hope that Helps !

Thank You !

answered Nov 07 '17 at 10:38

SHOHIL SETHIA

2,187
2
17
26

your links are about AngularJS 1.x. The question was about Angular 2+ – zhekaus Dec 05 '17 at 20:30
You should be able to get relative information by those links ! – SHOHIL SETHIA Dec 06 '17 at 05:22

score 0 · Answer 3 · answered Nov 01 '17 at 14:34

Try this solution:

Steps to make Google Chrome offer to save (prompt) password for a particular site (for e.g abcd.com) and Auto-login the site with the credentials thus saved.

-> Go to the given URL 'abcd.com'

-> Right-click Page Info and disable 'JavaScript'

-> Reload the page.

-> Enter the credentials (uid,pwd)

-> A prompt appears to save password.

-> Click on Save password.

-> Auto-Login Extension bubble appears on this page.

At this point it is important because the extension 'Auto-Login' (like many other extensions) require JavaScript to be enabled.

-> Re-enable the JavaScript for this page and reload the page.

-> Now Click on the 'Auto-Login' bubble for remembering automatically logging into the site hereafter!

score 0 · Answer 4 · edited Nov 04 '17 at 13:44

0

There is no problem with the code. It lies with the browser settings. Code works fine in my firefox brower.

If your using google chrome please check whether autofill settings is switched on.

Steps to check:

Hamburger icon present on the right top of the browser.
Click on settings.
Search for autofill settings. Make sure that it is switched on.

edited Nov 04 '17 at 13:44

Martin Evans

45,791
17
81
97

answered Nov 04 '17 at 13:26

Gopal Abbineni

1
1

Browser does not ask to save password Angular application

4 Answers4