src/app/user/login.component.ts
templateUrl | ./login.component.html |
Properties |
Methods |
constructor(authService: AuthService, router: Router, store: Store
|
||||||||||||
Defined in src/app/user/login.component.ts:16
|
||||||||||||
Parameters :
|
cancel |
cancel()
|
Defined in src/app/user/login.component.ts:56
|
Returns :
void
|
checkChanged | ||||||
checkChanged(changed: boolean)
|
||||||
Defined in src/app/user/login.component.ts:33
|
||||||
Parameters :
Returns :
void
|
login | ||||||
login(loginForm: NgForm)
|
||||||
Defined in src/app/user/login.component.ts:40
|
||||||
Parameters :
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/user/login.component.ts:24
|
Returns :
void
|
errorMessage |
errorMessage:
|
Type : string
|
Defined in src/app/user/login.component.ts:14
|
maskUserName |
maskUserName:
|
Type : boolean
|
Defined in src/app/user/login.component.ts:16
|
import { Component } from '@angular/core';
import { OnInit, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/user/auth.service';
/* NgRx */
import { Store, select } from '@ngrx/store';
@Component({
templateUrl:'./login.component.html'
})
export class LoginComponent implements OnInit{
errorMessage: string;
maskUserName : boolean;
constructor(
private authService: AuthService,
private router: Router,
private store: Store<any>
){}
ngOnInit(){
this.store.pipe(select('users')).subscribe(
users => {
if(users){
this.maskUserName = users.maskUserName;
}
})
}
checkChanged(changed: boolean): void{
this.store.dispatch({
type: '[User] MASK_USER_NAME',
payload: changed
});
}
login(loginForm: NgForm): void {
if (loginForm && loginForm.valid) {
const userName = loginForm.form.value.userName;
const password = loginForm.form.value.password;
this.authService.login(userName, password);
if (this.authService.redirectUrl) {
this.router.navigateByUrl(this.authService.redirectUrl);
} else {
this.router.navigate(['/polls']);
}
} else {
this.errorMessage = 'Please enter a user name and password.';
}
}
cancel():void{
this.router.navigate(['welcome'])
}
}
<div class='container main-content'>
<div class="card">
<div class="card-header">
{{pageTitle}}
</div>
<div class="card-body">
<form class="needs-validation" novalidate (ngSubmit)="login(loginForm)" #loginForm="ngForm" autocomplete="off">
<fieldset>
<div class="form-group row">
<label class="col-md-2 col-form-label" for="userNameId">User Name</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (userNameVar.touched || userNameVar.dirty) && !userNameVar.valid }"
id="userNameId"
[type]= "maskUserName ? 'password' : 'text'"
placeholder="User Name (required)"
required
ngModel
name="userName" #userNameVar="ngModel"/>
<div class="invalid-feedback" *ngIf="(userNameVar.touched || userNameVar.dirty) && passwordVar.hasError('required')">
User name is required.
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label" for="passwordId">Password</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (passwordVar.touched || passwordVar.dirty) && !passwordVar.valid }"
id="passwordId"
type="password"
placeholder="Password (required)"
required
ngModel
name="password" #passwordVar="ngModel"/>
<div class="invalid-feedback" *ngIf="(passwordVar.touched || passwordVar.dirty) && passwordVar.hasError('required')">
Password is required.
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-2">
<span>
<button class="btn btn-primary"
type="submit"
style="width:80px;margin-right:10px"
[disabled]="!loginForm.valid">
Log In
</button>
</span>
<span>
<a class="btn btn-light" (click)="cancel()">
Cancel
</a>
</span>
</div>
</div>
</fieldset>
</form>
<div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}}</div>
</div>
<div class="card-footer">
<div class="row">
<div class="form-check col-md-7">
<label>
<input class="form-check-input"
type="checkbox"
(change)="checkChanged($event.target.checked)"
[checked]="maskUserName">
Mask user name
</label>
</div>
</div>
</div>
</div>
</div>