File
Implements
Metadata
selector |
app-login |
styleUrls |
login.component.scss |
templateUrl |
./login.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
onSubmit
|
onSubmit()
|
|
Returns: void
|
Private pushErrorFor
|
pushErrorFor(ctrl_name: string, msg: string)
|
|
Returns: void
|
initForm
|
initForm()
|
|
Returns: void
|
redirectIfUserLoggedIn
|
redirectIfUserLoggedIn()
|
|
Returns: void
|
ngOnDestroy
|
ngOnDestroy()
|
|
Returns: void
|
loginSubs
|
loginSubs: Subscription
|
|
returnUrl
|
returnUrl: string
|
|
import { Component, OnInit, OnDestroy } from '@angular/core';
import { environment } from '../../../../environments/environment';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService } from '../../../core/services/auth.service';
import { Store } from '@ngrx/store';
import { AppState } from '../../../interfaces';
import { Router, ActivatedRoute } from '@angular/router';
import { getAuthStatus } from '../../reducers/selectors';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {
signInForm: FormGroup;
title = environment.AppName;
loginSubs: Subscription;
returnUrl: string;
constructor(
private fb: FormBuilder,
private store: Store<AppState>,
private route: ActivatedRoute,
private router: Router,
private authService: AuthService
) {
this.redirectIfUserLoggedIn();
}
ngOnInit() {
this.initForm();
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
onSubmit() {
const values = this.signInForm.value;
const keys = Object.keys(values);
if (this.signInForm.valid) {
this.loginSubs = this.authService.login(values).subscribe(data => {
const error = data.error;
if (error) {
keys.forEach(val => {
this.pushErrorFor(val, error);
});
}
});
} else {
keys.forEach(val => {
const ctrl = this.signInForm.controls[val];
if (!ctrl.valid) {
this.pushErrorFor(val, null);
ctrl.markAsTouched();
};
});
}
}
private pushErrorFor(ctrl_name: string, msg: string) {
this.signInForm.controls[ctrl_name].setErrors({'msg': msg});
}
initForm() {
const email = '';
const password = '';
this.signInForm = this.fb.group({
'email': [email, Validators.required],
'password': [password, Validators.required]
});
}
redirectIfUserLoggedIn() {
this.store.select(getAuthStatus).subscribe(
data => {
if (data === true) { this.router.navigate([this.returnUrl]); }
}
);
}
ngOnDestroy() {
if (this.loginSubs) { this.loginSubs.unsubscribe(); }
}
}
<div class="row login-container" data-hook="">
<div id="content" class="col-sm-12" data-hook="">
<div class="col-md-5 col-centered">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Login to {{title}}</h3>
</div>
<div id="existing-customer" class="panel-body" data-hook="login">
<div class="login-third-party-login">
<p class="login-button-info-text login-info-text">EASILY USING</p>
<div class="login-button-container">
<button class="login-facebook login-button coming-soon">
<span class="header-sprite login-fb-logo"></span>
FACEBOOK
</button>
<button class="login-google login-button coming-soon" id="gPlusLogin">
<span class="header-sprite login-gplus-logo"></span>
GOOGLE
</button>
</div>
</div>
<p class="login-info-text">- OR USING EMAIL -</p>
<form class="login-login-form" [formGroup]="signInForm" (ngSubmit)="onSubmit()">
<fieldset class="login-input-container">
<div class="login-input-item">
<input type="email" class="login-user-input-email login-user-input" name="email" placeholder="Your Email Address" formControlName="email"
autocomplete="off">
<div *ngIf="signInForm.get('email').errors && signInForm.get('email').touched">
<span class="login-error-icon text-danger">!</span>
<p class="login-error-message text-danger">{{signInForm.get('email').errors.msg || 'Please enter a valid email id'}}</p>
</div>
</div>
<div class="login-input-item">
<input type="password" class="login-user-input-password login-user-input" name="password" placeholder="Enter Password" formControlName="password"
autocomplete="off">
<div *ngIf="signInForm.get('password').errors && signInForm.get('password').touched">
<span class="login-error-icon text-danger">!</span>
<p class="login-error-message text-danger">{{signInForm.get('password').errors.msg || 'Password must be at least 6 characters'}}</p>
</div>
</div>
</fieldset>
<fieldset class="login-login-button-container">
<button type="submit" class="btn btn-danger login-login-button">Log in</button>
</fieldset>
</form>
<div class="login-link-container">
<small>
<a class="login-link text-danger" routerLink="/">Recover password</a>
<div class="login-right-links">
<span class="text-default">New to {{title}}?</span>
<a class="login-create-account-link login-link text-danger" [routerLink]="['/auth']">Create Account</a>
</div>
</small>
</div>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive