Changeset 1f4846d for Farmatiko/ClientApp/src/app/login

Timestamp:

11/01/20 00:55:08 (3 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:

• login.component.html (modified) (1 diff)
• login.component.ts (modified) (2 diffs)

Farmatiko/ClientApp/src/app/login/login.component.html

@@ -6 +6 @@
   <div class="example-container">
     <mat-form-field>
-      <input matInput placeholder="Email" [(ngModel)]="this.email" formControlName="email">
+      <input matInput placeholder="Email" [(ngModel)]="this.username" formControlName="email">
     </mat-form-field>
 
     <mat-form-field>
-      <input matInput type="password" placeholder="Password" [(ngModel)]="this.passwd" formControlName="password">    
+      <input matInput type="password" placeholder="Password" [(ngModel)]="this.password" formControlName="password">    
     </mat-form-field>
 
     <button [disabled]="!loginForm.valid" mat-raised-button color="primary" (click)="loginPharmacyHead()" mat-button>Најави се</button>
+
+    <div class="checkbox mb-3 text-danger" *ngIf="loginError">
+      Login failed. Please try again.
+    </div>
   </div>
 </form>

Farmatiko/ClientApp/src/app/login/login.component.ts

@@ -1 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { AuthService } from '../shared/auth.service';
+import { AuthService } from '../shared/services/auth.service';
+import { finalize } from 'rxjs/operators';
 
 @Component({
@@ -10 +12 @@
   styleUrls: ['./login.component.css']
 })
-export class LoginComponent implements OnInit {
+export class LoginComponent implements OnInit, OnDestroy {
+  busy = false;
   loginForm: FormGroup;
-  email: string;
-  passwd: string;
-  errorMessage: string;
+  username = '';
+  password = '';
+  loginError = false;
+  private subscription: Subscription;
 
   constructor(private authService: AuthService,private router: Router, private route: ActivatedRoute) {
     this.loginForm = new FormGroup({
-      email: new FormControl('', [Validators.required, Validators.email]),
+      username: new FormControl('', [Validators.required, Validators.email]),
       password: new FormControl('', [Validators.required])
     });
   }
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
 
   ngOnInit(): void {
+    this.subscription = this.authService.user$.subscribe((x) => {
+      if (this.route.snapshot.url[0].path === 'login') {
+        const accessToken = localStorage.getItem('access_token');
+        const refreshToken = localStorage.getItem('refresh_token');
+        if (x && accessToken && refreshToken) {
+          const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '';
+          this.router.navigate([returnUrl]);
+        }
+      }
+    });
   }
 
   loginPharmacyHead() {
-    this.authService.login(this.email,this.passwd)
-        .pipe(first())
-        .subscribe((data) => {
-            if(data) {
-              this.router.navigate(['/dashboard']);
-            }},
-            (err: any) => {
-                this.errorMessage = err.toString();
-            });
+    if (!this.username || !this.password) {
+      return;
+    }
+    this.busy = true;
+    const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '';
+    this.authService
+      .login(this.username, this.password)
+      .pipe(finalize(() => (this.busy = false)))
+      .subscribe(
+        () => {
+          this.router.navigate(['/dashboard']);
+        },
+        () => {
+          this.loginError = true;
+        }
+      );
     this.loginForm.reset();
   }