src/app/login/login.component.ts
| encapsulation | ViewEncapsulation.Emulated |
| selector | app-login |
| styleUrls | login.component.css |
| templateUrl | login.component.html |
Properties |
Methods |
constructor(titleService: Title, materialService: MaterialService, authService: AuthService, loader: LoaderStore, router: Router)
|
||||||||||||||||||
|
Defined in src/app/login/login.component.ts:20
|
||||||||||||||||||
|
Parameters :
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/login/login.component.ts:29
|
|
Returns :
void
|
| onSubmit |
onSubmit()
|
|
Defined in src/app/login/login.component.ts:35
|
|
Returns :
void
|
| model |
model:
|
Default value : new LoginVm()
|
|
Defined in src/app/login/login.component.ts:20
|
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { Credentials } from '../models/credentials.model';
import { LoginVm } from '../models/login-vm.model';
import { MaterialService } from '../services';
import { AuthService } from '../services/auth.service';
import { LoaderStore } from '../stores/';
const errorMessage = `401 Unauthorized!\nUser may not have required permissions.\nUsername or password may be incorrect.`;
@Component({
encapsulation: ViewEncapsulation.Emulated,
selector: 'app-login',
styleUrls: ['login.component.css'],
templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
model = new LoginVm();
constructor(
private titleService: Title,
private materialService: MaterialService,
private authService: AuthService,
private loader: LoaderStore,
private router: Router
) {}
ngOnInit() {
this.titleService.setTitle('Login');
this.materialService.render();
this.loader.hide();
}
onSubmit() {
this.loader.show();
const dto = new Credentials(this.model);
this.authService.login(dto).subscribe(isAuthorized => {
if (!isAuthorized) {
return this.loader.error(errorMessage);
}
this.router.navigate(['/start']);
this.loader.success(`Welcome ${this.model.username}`);
});
}
}
<form #loginForm="ngForm" (ngSubmit)="onSubmit()" class="mdl-grid">
<div class="mdl-cell mdl-cell--4-offset mdl-cell--2-offset-tablet mdl-cell--0-offset-phone mdl-cell--4-col mdl-cell--6-col-phone ">
<div class="fill-width mdl-card mdl-shadow--2dp">
<div class="mdl-card__title">
<h2 class="fill-width mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input type="text" class="mdl-textfield__input" id="username" name="username" required [(ngModel)]="model.username" #username="ngModel">
<label class="mdl-textfield__label" for="username">Username</label>
<span [hidden]="username.valid || username.pristine" class="mdl-textfield__error">Username is required!</span>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input type="password" class="mdl-textfield__input" id="passwordPlainText" name="passwordPlainText" required [(ngModel)]="model.passwordPlainText"
#passwordPlainText="ngModel">
<label class="mdl-textfield__label " for="password ">Password</label>
<span [hidden]="passwordPlainText.valid || passwordPlainText.pristine" class="mdl-textfield__error">Password is required!</span>
</div>
</div>
<div class="mdl-card__actions mdl-card--border">
<button [disabled]="!loginForm.form.valid" type="submit" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect fill-width">
Login
</button>
</div>
</div>
</div>
</form>