Angular 6 - Trigger Browser "save login prompt"

Question

So, i already create small application (learning purpose) to manage some data. The problem is, browser doesn't prompt to save login account on login page since all the application is single page app and i want my browser to prompt save login account. I already found an answer that probably fits to me, but because i just learning this angular 6, i cant really relate them. So here is my Code.

login.component.ts

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    loginForm : FormGroup;

     username = "";
     password = "";

    constructor(
            public global: GlobalService,
            public messagerService: MessagerService,
            private cookie: CookieService, //persistent
            private router: Router,
            private fb: FormBuilder
        ) {
              this.loginForm = fb.group({
                  username: ["asdsa", Validators.required],
                  password: ["adssa", Validators.required]
              });
           }

    login(){
        var helper = new JwtHelperService();
        if(this.username=='' || this.password=='')
            this.messagerService.alert({
                title: 'Error',
                icon: 'error',
                msg: 'Please fill the forms!'
            });
        else{
            this.global.login(this.username, this.password).subscribe(
                data => {
                    if(data.success=='1'){
                        this.cookie.set('jwtObj', data.jwt, new Date().getSeconds() + 7200, '/');
                        this.global.loginCheck();
                    }
                    else if(data.success == '0'){
                        this.messagerService.alert({
                            title: 'Error',
                            icon: 'error',
                            msg: data.msg
                        });
                    }
                },
            );
        }
    }

    ngOnInit() {
    }

    submitForm(value){
        console.log(value);
    }

}

login.component.html

<eui-panel [title]="'Login Panel'" [collapsible]="true" [bodyStyle]="{padding:'20px'}" style="height:320px;width:400px; margin:auto;margin-top: 25vh">
        <h2>RUC SSO LOGIN</h2>
        <form novalidate #formm [formGroup]="loginForm" (ngSubmit)="submitForm(loginForm)">
            <div style="margin-bottom:10px;">
                <label [for]="t1" align="top">Username:</label>
                <eui-textbox #t1 formControlName="username" iconCls="icon-man" placeholder="username" style="width:100%"></eui-textbox>
            </div>
            <div style="margin-bottom:10px;">
                <label [for]="t2" align="top">Password:</label>
                <eui-passwordbox #t2 formControlName="password" placeholder="password" style="width:100%"></eui-passwordbox>
            </div>
            <div>
                <eui-linkbutton (click)="submitForm(loginForm)">Login</eui-linkbutton>
            </div>
        </form>
</eui-panel>

How can i trigger browser prompt?

why this `(click)="submitForm(loginForm)"`in `eui-linkbutton`? you already submitting form. — Ali Shahbaz, Nov 15 '18 at 07:44
no, i just copy paste from easyui(example page). i know it is redundant, but since it has same outcome, i leave as it. somehow i cant submit the form via click event, so i call a function — Ryan Arief, Nov 15 '18 at 07:47
I mean navigate through [Router](https://angular.io/guide/router) to another component. Implement routing, then navigate. https://stackoverflow.com/questions/38131293/angular-2-router-navigate — Ali Shahbaz, Nov 15 '18 at 07:52
i already implement it on this.global.loginCheck(); it is my prev implementation but gives me same result — Ryan Arief, Nov 15 '18 at 07:55
I'm afraid that this is browser behavior, I simply created login form and hit enter button from keyboard, save password prompts. I think you should use button rather than link. — Ali Shahbaz, Nov 15 '18 at 07:58
can u give me the fiddle?ill try it, if it is work, u can add as answer — Ryan Arief, Nov 15 '18 at 08:06

Ali Shahbaz · Answer 1 · 2018-11-15T09:08:21.797

1

Okay here's I created a simple example, tested on Firefox stackblitz app URL

and stackblitz editor URL

Edit: You are using easyui, that might be issue with easyui but save password prompts on form submit and navigating to other component.

edited Nov 15 '18 at 09:08

answered Nov 15 '18 at 08:25

Ali Shahbaz

825
1
7
19

Yeah that's might be problem in easyui but I never worked on it, did you try to remove linkbutton and add just simple html button? I worked on devextreme components, and I was also getting prompt. – Ali Shahbaz Nov 15 '18 at 08:57
yes, i replace the tags i mention earlier with standard html tags and it is work. – Ryan Arief Nov 15 '18 at 09:01
(edited first comment) turns out browser didn't recognize , and tags since i'm using easyui, current work around is to use native tag input on login page. You can complete the answer by adding this information. thankyou for helping me sir.. – Ryan Arief Nov 15 '18 at 09:03

Angular 6 - Trigger Browser "save login prompt"

1 Answers1