src/app/login/login.component.ts
| selector | app-login |
| styleUrls | ./login.component.css |
| templateUrl | ./login.component.html |
Properties |
Methods |
constructor(titleService: Title, authService: AuthService, loader: LoaderStore, router: Router)
|
|||||||||||||||
|
Defined in src/app/login/login.component.ts:17
|
|||||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/login/login.component.ts:25
|
|
Returns :
void
|
| onSubmit | ||||
onSubmit(form)
|
||||
|
Defined in src/app/login/login.component.ts:30
|
||||
|
Parameters :
Returns :
void
|
| model |
model:
|
Default value : new LoginVm()
|
|
Defined in src/app/login/login.component.ts:17
|
import { Component, OnInit } from '@angular/core';
import { LoginVm } from './login-vm.model';
import { Title } from '@angular/platform-browser';
import { AuthService } from '../providers/services/auth.service';
import { Router } from '@angular/router';
import { ICredentials } from '../models/credentials';
import { LoaderStore } from '../modules/loader/loader.store';
const errorMessage = `401 Unauthorized!\nUser may not have required permissions.\nUsername or password may be incorrect.`;
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
model = new LoginVm();
constructor(
private titleService: Title,
private authService: AuthService,
private loader: LoaderStore,
private router: Router
) {}
ngOnInit() {
this.titleService.setTitle('Login');
this.loader.hide();
}
onSubmit(form) {
if (!form.valid) {
console.log('invalid username or password');
return;
}
this.loader.show();
const dto = {
username: this.model.username,
password: this.model.passwordPlainText
} as ICredentials;
this.authService.login(dto).subscribe(isAuthorized => {
if (!isAuthorized) {
return this.loader.error(errorMessage);
}
this.router.navigate(['/']);
this.loader.success(`Welcome ${this.model.username}`);
});
}
}
<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)" name="loginForm" fxLayout="row" fxLayoutAlign="center start">
<mat-card fxFlex="33">
<mat-card-header>
<mat-card-title>Allied Admin</mat-card-title>
<mat-card-subtitle>Welcome, please sign in</mat-card-subtitle>
</mat-card-header>
<mat-card-content fxLayout="column" fxLayoutAlign="space-around center">
<mat-form-field fxFill>
<input type="text" name="username" matInput placeholder="Username" [(ngModel)]="model.username" #name required>
<button type="button" mat-button *ngIf="model.username" matSuffix mat-icon-button aria-label="Clear" (click)="model.username=''">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="!name.pristine && name.invalid">
Username is required
</mat-error>
</mat-form-field>
<mat-form-field fxFill>
<input type="password" name="password" matInput placeholder="Password" [(ngModel)]="model.passwordPlainText"
#pass required>
<button type="button" mat-button *ngIf="model.passwordPlainText" matSuffix mat-icon-button aria-label="Clear"
(click)="model.passwordPlainText=''">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="!pass.pristine && pass.invalid">
Password is required
</mat-error>
</mat-form-field>
</mat-card-content>
<mat-card-actions>
<button type="submit" mat-button>Login</button>
</mat-card-actions>
</mat-card>
</form>
./login.component.css