File

src/app/auth/components/login/login.component.ts

Implements

OnInit OnDestroy

Metadata

selector app-login
styleUrls login.component.scss
templateUrl ./login.component.html

Constructor

constructor(fb: FormBuilder, store: Store, route: ActivatedRoute, router: Router, authService: AuthService)

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

Properties

loginSubs
loginSubs: Subscription
returnUrl
returnUrl: string
signInForm
signInForm: FormGroup
title
title: 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
Component
Html element with directive

results matching ""

    No results matching ""