fix: logout feature

src/app/general/service/auth.service.ts

@@ -3,6 +3,7 @@ import {environment} from '../../../environments/environment';
 import TokenClient = google.accounts.oauth2.TokenClient;
 import {DynamicScriptLoaderService} from './dynamic-script-loader.service';
 import {GoogleDriveService} from '../../data-access/service/google-drive.service';
+import {Router} from '@angular/router';
 
 export type Profile = {
   name: string,
@@ -28,7 +29,8 @@ export class AuthService {
   public profile?: Profile;
 
   constructor(
-    protected dynamicScriptLoader: DynamicScriptLoaderService
+    protected dynamicScriptLoader: DynamicScriptLoaderService,
+    private router: Router
   ) {
     this.handleTokenResponse = this.handleTokenResponse.bind(this);
     this.handleProfileResponse = this.handleProfileResponse.bind(this);
@@ -85,11 +87,6 @@ export class AuthService {
     }
     if (res && res.access_token) {
       await this.requestProfile(res.access_token);
-
-      // wrong location?
-      // gapi.client.setApiKey(environment.gapi.api_key);
-      // gapi.client.load('drive', 'v3');
-
       this.accessToken = res.access_token;
       localStorage.setItem(AUTH_KEY, res.access_token);
     }
@@ -154,6 +151,15 @@ export class AuthService {
     return this.inited;
   }
 
+  public logout() {
+    console.log('AuthService.Logout');
+    localStorage.removeItem(AUTH_KEY);
+    this.userAuthenticated = false;
+    this.accessToken = undefined;
+    this.profile = undefined;
+    this.router.navigate(["/login"]);
+  }
+
 }
 
 

src/app/general/service/logged-in.guard.ts

@@ -1,20 +1,24 @@
 import {Injectable} from '@angular/core';
-import {CanActivate} from '@angular/router';
+import {CanActivate, Router} from '@angular/router';
 import {AuthService} from './auth.service';
 
 
 @Injectable()
 export class LoggedInGuard implements CanActivate {
 
   constructor(
-    private authService: AuthService
+    private authService: AuthService,
+    private router: Router
   ) {
     console.log("LoggedInGuard.constructor");
   }
 
   public async canActivate(): Promise<boolean> {
     const userAuthenticated = await this.authService.checkIfUserAuthenticated();
     console.log("LoggedInGuard.canActivate", userAuthenticated);
+    if (!userAuthenticated) {
+      this.router.navigate(["/login"]);
+    }
     return userAuthenticated;
   }
 

src/app/manager/manager-panel/manager-panel.component.html

@@ -6,6 +6,9 @@
   <mat-form-field>
     <mat-label>User Name</mat-label>
     <input matInput [value]="name" readonly>
+    <button mat-icon-button matSuffix (click)="auth.logout()">
+      <mat-icon>logout</mat-icon>
+    </button>
   </mat-form-field>
 </form>
 

src/app/manager/manager-panel/manager-panel.component.scss

@@ -6,7 +6,11 @@
   height: 100%;
 }
 
-.mat-form-field {
+form {
+  width:100%
+}
+
+mat-form-field {
   width: 100%;
 }
 

src/app/manager/manager-panel/manager-panel.component.ts

@@ -56,5 +56,4 @@ export class ManagerPanelComponent implements OnInit {
     });
   }
 
-
 }