Ignore:
Timestamp:
11/01/20 00:55:08 (2 years ago)
Author:
Mile Jankuloski <mile.jankuloski@…>
Branches:
master
Children:
d23bf72
Parents:
993189e
Message:

Jwt token auth interceptors, services and guards

Location:
Farmatiko/ClientApp/src/app/login
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • Farmatiko/ClientApp/src/app/login/login.component.html

    r993189e r1f4846d  
    66  <div class="example-container">
    77    <mat-form-field>
    8       <input matInput placeholder="Email" [(ngModel)]="this.email" formControlName="email">
     8      <input matInput placeholder="Email" [(ngModel)]="this.username" formControlName="email">
    99    </mat-form-field>
    1010
    1111    <mat-form-field>
    12       <input matInput type="password" placeholder="Password" [(ngModel)]="this.passwd" formControlName="password">   
     12      <input matInput type="password" placeholder="Password" [(ngModel)]="this.password" formControlName="password">   
    1313    </mat-form-field>
    1414
    1515    <button [disabled]="!loginForm.valid" mat-raised-button color="primary" (click)="loginPharmacyHead()" mat-button>Најави се</button>
     16
     17    <div class="checkbox mb-3 text-danger" *ngIf="loginError">
     18      Login failed. Please try again.
     19    </div>
    1620  </div>
    1721</form>
  • Farmatiko/ClientApp/src/app/login/login.component.ts

    r993189e r1f4846d  
    1 import { Component, OnInit } from '@angular/core';
     1import { Component, OnInit, OnDestroy } from '@angular/core';
    22import { FormGroup, FormControl, Validators } from '@angular/forms';
    33import { Router, ActivatedRoute } from '@angular/router';
     4import { Subscription } from 'rxjs';
    45import { first } from 'rxjs/operators';
    5 import { AuthService } from '../shared/auth.service';
     6import { AuthService } from '../shared/services/auth.service';
     7import { finalize } from 'rxjs/operators';
    68
    79@Component({
     
    1012  styleUrls: ['./login.component.css']
    1113})
    12 export class LoginComponent implements OnInit {
     14export class LoginComponent implements OnInit, OnDestroy {
     15  busy = false;
    1316  loginForm: FormGroup;
    14   email: string;
    15   passwd: string;
    16   errorMessage: string;
     17  username = '';
     18  password = '';
     19  loginError = false;
     20  private subscription: Subscription;
    1721
    1822  constructor(private authService: AuthService,private router: Router, private route: ActivatedRoute) {
    1923    this.loginForm = new FormGroup({
    20       email: new FormControl('', [Validators.required, Validators.email]),
     24      username: new FormControl('', [Validators.required, Validators.email]),
    2125      password: new FormControl('', [Validators.required])
    2226    });
    2327  }
     28  ngOnDestroy(): void {
     29    this.subscription?.unsubscribe();
     30  }
    2431
    2532  ngOnInit(): void {
     33    this.subscription = this.authService.user$.subscribe((x) => {
     34      if (this.route.snapshot.url[0].path === 'login') {
     35        const accessToken = localStorage.getItem('access_token');
     36        const refreshToken = localStorage.getItem('refresh_token');
     37        if (x && accessToken && refreshToken) {
     38          const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '';
     39          this.router.navigate([returnUrl]);
     40        }
     41      }
     42    });
    2643  }
    2744
    2845  loginPharmacyHead() {
    29     this.authService.login(this.email,this.passwd)
    30         .pipe(first())
    31         .subscribe((data) => {
    32             if(data) {
    33               this.router.navigate(['/dashboard']);
    34             }},
    35             (err: any) => {
    36                 this.errorMessage = err.toString();
    37             });
     46    if (!this.username || !this.password) {
     47      return;
     48    }
     49    this.busy = true;
     50    const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '';
     51    this.authService
     52      .login(this.username, this.password)
     53      .pipe(finalize(() => (this.busy = false)))
     54      .subscribe(
     55        () => {
     56          this.router.navigate(['/dashboard']);
     57        },
     58        () => {
     59          this.loginError = true;
     60        }
     61      );
    3862    this.loginForm.reset();
    3963  }
Note: See TracChangeset for help on using the changeset viewer.