File

src/app/user/login.component.ts

Implements

OnInit

Metadata

templateUrl ./login.component.html

Index

Properties
Methods

Constructor

constructor(authService: AuthService, router: Router, store: Store)
Parameters :
Name Type Optional
authService AuthService No
router Router No
store Store<any> No

Methods

cancel
cancel()
Returns : void
checkChanged
checkChanged(changed: boolean)
Parameters :
Name Type Optional
changed boolean No
Returns : void
login
login(loginForm: NgForm)
Parameters :
Name Type Optional
loginForm NgForm No
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

errorMessage
errorMessage: string
Type : string
maskUserName
maskUserName: boolean
Type : boolean
import { Component } from '@angular/core';
import { OnInit, OnDestroy } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/user/auth.service';

/* NgRx */
import { Store, select } from '@ngrx/store';

@Component({
    templateUrl:'./login.component.html'
})
export class LoginComponent implements OnInit{
    errorMessage: string;

    maskUserName : boolean;

    constructor(
        private authService: AuthService,
        private router: Router,
        private store: Store<any>

    ){}
    ngOnInit(){
      this.store.pipe(select('users')).subscribe(
        users => {
          if(users){
            this.maskUserName = users.maskUserName;
          }
        })
    }
  
    checkChanged(changed: boolean): void{
      this.store.dispatch({
        type: '[User] MASK_USER_NAME',
        payload: changed
      });
    }
    
    login(loginForm: NgForm): void {
        if (loginForm && loginForm.valid) {
          const userName = loginForm.form.value.userName;
          const password = loginForm.form.value.password;
          this.authService.login(userName, password);
    
          if (this.authService.redirectUrl) {
            this.router.navigateByUrl(this.authService.redirectUrl);
          } else {
            this.router.navigate(['/polls']);
          }
        } else {
          this.errorMessage = 'Please enter a user name and password.';
        }
      }

      cancel():void{
        this.router.navigate(['welcome'])
      }
}
<div class='container main-content'>        
          <div class="card">
            <div class="card-header">
              {{pageTitle}}
            </div>
        
            <div class="card-body">
              <form class="needs-validation" novalidate (ngSubmit)="login(loginForm)" #loginForm="ngForm" autocomplete="off">
                <fieldset>
                  <div class="form-group row">
                    <label class="col-md-2 col-form-label" for="userNameId">User Name</label>
                    <div class="col-md-8">
                      <input class="form-control"
                       [ngClass]="{'is-invalid': (userNameVar.touched || userNameVar.dirty) && !userNameVar.valid }"
                       id="userNameId"
                       [type]= "maskUserName ? 'password' : 'text'"
                       placeholder="User Name (required)"
                       required
                       ngModel
                       name="userName" #userNameVar="ngModel"/>
                      <div class="invalid-feedback" *ngIf="(userNameVar.touched || userNameVar.dirty) && passwordVar.hasError('required')">
                        User name is required.
                      </div>
                    </div>
                  </div>
        
                  <div class="form-group row">
                    <label class="col-md-2 col-form-label" for="passwordId">Password</label>
                    <div class="col-md-8">
                      <input class="form-control"
                             [ngClass]="{'is-invalid': (passwordVar.touched || passwordVar.dirty) && !passwordVar.valid }"
                             id="passwordId"
                             type="password"
                             placeholder="Password (required)"
                             required
                             ngModel
                             name="password" #passwordVar="ngModel"/>
                      <div class="invalid-feedback" *ngIf="(passwordVar.touched || passwordVar.dirty) && passwordVar.hasError('required')">
                        Password is required.
                      </div>
                    </div>
                  </div>
        
                  <div class="form-group">
                    <div class="col-md-4 col-md-offset-2">
                      <span>
                        <button class="btn btn-primary"
                                type="submit"
                                style="width:80px;margin-right:10px"
                                [disabled]="!loginForm.valid">
                          Log In
                        </button>
                      </span>
                      <span>
                        <a class="btn btn-light" (click)="cancel()">
                          Cancel
                        </a>
                      </span>
                    </div>
                  </div>
                </fieldset>
              </form>
              <div class="alert alert-danger" *ngIf="errorMessage">{{errorMessage}}</div>
            </div>
        
            <div class="card-footer">
              <div class="row">
                <div class="form-check col-md-7">
                  <label>
                    <input class="form-check-input" 
                           type="checkbox" 
                           (change)="checkChanged($event.target.checked)" 
                           [checked]="maskUserName">
                    Mask user name
                  </label>
                </div>
              </div>
            </div>
          </div>
        
        </div>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""