src/app/auth/sign-in/sign-in.component.ts
selector | crm-sign-in |
styleUrls | sign-in.component.scss |
templateUrl | ./sign-in.component.html |
Properties |
|
Methods |
|
constructor(formBuilder: FormBuilder, authService: AuthService, notificationsService: NotificationsService, router: Router)
|
||||||||||||||||||||
Defined in src/app/auth/sign-in/sign-in.component.ts:18
|
||||||||||||||||||||
Parameters :
|
Private formInit |
formInit()
|
Defined in src/app/auth/sign-in/sign-in.component.ts:44
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Defined in src/app/auth/sign-in/sign-in.component.ts:38
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/auth/sign-in/sign-in.component.ts:34
|
Returns :
void
|
onSubmit |
onSubmit()
|
Defined in src/app/auth/sign-in/sign-in.component.ts:26
|
Returns :
void
|
signInForm |
signInForm:
|
Type : FormGroup
|
Defined in src/app/auth/sign-in/sign-in.component.ts:17
|
Private subscription |
subscription:
|
Type : Subscription
|
Defined in src/app/auth/sign-in/sign-in.component.ts:18
|
import {Component, OnInit, OnDestroy} from '@angular/core';
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
import {AuthService} from "../../core/auth/auth.service";
import {Subscription} from "rxjs";
import {NotificationsService} from "../../core/notifications/notifications.service";
import {Router} from "@angular/router";
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
@Component({
selector: 'crm-sign-in',
templateUrl: './sign-in.component.html',
styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent implements OnInit, OnDestroy {
signInForm: FormGroup;
private subscription: Subscription;
constructor(private formBuilder: FormBuilder,
private authService: AuthService,
private notificationsService: NotificationsService,
private router: Router) {
}
onSubmit() {
this.subscription = this.authService.signIn(this.signInForm.value.email, this.signInForm.value.password, this.signInForm.value.rememberMe)
.subscribe(
ok => this.router.navigate(["/"]),
error => this.notificationsService.error(error.json())
);
}
ngOnInit() {
this.formInit();
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
private formInit() {
this.signInForm = this.formBuilder.group({
email: ['', Validators.required],
password: ['', Validators.required],
rememberMe: [false]
})
}
}
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card-group">
<div class="card p-2">
<form [formGroup]="signInForm" (ngSubmit)="onSubmit()">
<div class="card-block">
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-1">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Email" id="email" formControlName="email">
</div>
<div class="input-group mb-2">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password" id="password"
formControlName="password">
</div>
<div class="row">
<div class="col-xs-12">
<label>
<input type="checkbox" id="remember-me" formControlName="rememberMe">
Remember me
</label>
</div>
</div>
<div class="row">
<div class="col-6">
<button type="submit" class="btn btn-primary px-2" [disabled]="!signInForm.valid">Login</button>
</div>
<div class="col-6 text-right">
<a class="btn btn-link px-0" [routerLink]="['/auth', 'startReset']">Forgot password?</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>