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?
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.