### 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)`
Defined in src/app/auth/components/login/login.component.ts:20

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/auth/components/login/login.component.ts:32
Returns: `void`

onSubmit
`onSubmit()`
Defined in src/app/auth/components/login/login.component.ts:38
Returns: `void`

Private pushErrorFor
`pushErrorFor(ctrl_name: string, msg: string)`
Defined in src/app/auth/components/login/login.component.ts:62
Returns: `void`

initForm
`initForm()`
Defined in src/app/auth/components/login/login.component.ts:66
Returns: `void`

redirectIfUserLoggedIn
`redirectIfUserLoggedIn()`
Defined in src/app/auth/components/login/login.component.ts:76
Returns: `void`

ngOnDestroy
`ngOnDestroy()`
Defined in src/app/auth/components/login/login.component.ts:84
Returns: `void`

### Properties

loginSubs
`loginSubs: `Subscription``
Defined in src/app/auth/components/login/login.component.ts:19

returnUrl
`returnUrl: `string``
Defined in src/app/auth/components/login/login.component.ts:20

signInForm
`signInForm: `FormGroup``
Defined in src/app/auth/components/login/login.component.ts:17

title
`title: `string``
Defined in src/app/auth/components/login/login.component.ts:18

    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 ""