Merge pull request #120 from onepanelio/fix/onepanel.core.334-login.redirect

fix: login redirect

Author: rushtehrani

src/app/auth/auth.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { AuthService } from "./auth.service";
 
 @Injectable({

src/app/auth/auth.service.ts

@@ -4,7 +4,7 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class AuthService {
-  public redirectUrl: string;
+  public redirectUrl?: string;
   private authToken?: string;
 
   get isLoggedIn(): boolean {

src/app/auth/login/login.component.html

@@ -2,15 +2,16 @@
     <div class="op-info-box content">
         <div class="font-proxima-bold font-size-larger color-primary">Log in</div>
         <form class="mt-3" [formGroup]="form">
-            <mat-form-field class="w-100" appearance="outline">
+            <mat-form-field class="w-100 fix-mat-overflow" appearance="outline">
                 <mat-label>Token</mat-label>
                 <input matInput formControlName="token" />
                 <mat-error>{{tokenInput.getError('error')}}</mat-error>
             </mat-form-field>
 
-            <div>
-                <button mat-flat-button color="accent" class="op-rounded op-button border-secondary" (click)="login()">LOGIN</button>
-            </div>
+            <app-button (click)="login()" [loading]="loggingIn">
+                LOGIN
+                <span class="loading">LOGGING IN</span>
+            </app-button>
         </form>
     </div>
 </div>

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

@@ -14,8 +14,7 @@ import { MatSnackBar } from "@angular/material/snack-bar";
 export class LoginComponent implements OnInit {
   form: FormGroup;
   tokenInput: AbstractControl;
-
-  redirectUrl = null;
+  loggingIn = false;
 
   constructor(
       private snackBar: MatSnackBar,
@@ -38,8 +37,8 @@ export class LoginComponent implements OnInit {
     this.snackBar.dismiss();
 
     const state = history.state;
-    if(state.referer) {
-      this.redirectUrl = state.referer;
+    if(state.referer && !this.authService.redirectUrl) {
+      this.authService.redirectUrl = state.referer;
     }
   }
 
@@ -49,6 +48,7 @@ export class LoginComponent implements OnInit {
       return;
     }
 
+    this.loggingIn = true;
     const tokenValue = this.tokenInput.value;
     const token = `Bearer ${tokenValue}`;
 
@@ -58,14 +58,18 @@ export class LoginComponent implements OnInit {
 
             this.namespaceTracker.getNamespaces();
 
-            if(this.redirectUrl) {
-              this.appRouter.navigateByUrl(this.redirectUrl);
+            if(this.authService.redirectUrl) {
+              this.appRouter.navigateByUrl(this.authService.redirectUrl);
+              this.authService.redirectUrl = null;
+              this.loggingIn = false;
               return;
             }
 
             this.appRouter.navigateToHomePage();
+            this.loggingIn = false;
         }, err => {
           this.tokenInput.setErrors({error: 'Invalid token'})
+          this.loggingIn = false;
         })
   }
 }

src/app/router/app-router.service.ts

@@ -8,6 +8,14 @@ export class AppRouter {
 
   constructor(private router: Router) { }
 
+  public navigate(commands: any[], extras: NavigationExtras ) {
+    return this.router.navigate(commands, extras);
+  }
+
+  public navigateByUrl(url: string|UrlTree, extras?: NavigationExtras) {
+    return this.router.navigateByUrl(url, extras);
+  }
+
   public navigateToRoot() {
     return this.router.navigate(['/']);
   }
@@ -43,8 +51,4 @@ export class AppRouter {
   public navigateToWorkspace(namespace: string, name: string) {
     return this.router.navigate(['/', namespace, 'workspaces', name]);
   }
-
-  public navigateByUrl(url: string|UrlTree, extras?: NavigationExtras) {
-    return this.router.navigateByUrl(url, extras);
-  }
 }