Revize 1c220966

Re#7531 Components are guarded against invalid users

webapp/src/app/app-routing.module.ts

@@ -1 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
 import {EmployeesListComponent} from './employees/employees-list.component';
 import {DashboardComponent} from './dashboard/dashboard.component';
 import {PageNotFoundComponent} from './page-not-found/page-not-found.component';
+import {EmployeeComponentGuard} from './auth/employee-component.guard';
+import {DashboardComponentGuard} from './auth/dashboard-component.guard';
 
 const routes: Routes = [
-  { path: 'employees', component: EmployeesListComponent },
-  { path: 'dashboard', component: DashboardComponent },
+  { path: 'employees', component: EmployeesListComponent, canActivate: [EmployeeComponentGuard] },
+  { path: 'dashboard', component: DashboardComponent, canActivate: [DashboardComponentGuard] },
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent }
 ];

webapp/src/app/auth/base-guard.ts

@@ +1 @@
+import {Router} from '@angular/router';
+
+/**
+ * Base class for all guards, provides navigating users to
+ * components
+ */
+export class BaseGuard {
+  constructor(protected router: Router) {
+
+  }
+
+  protected navigateUserToLogin(): boolean {
+    console.log('Navigating user to login');
+    this.router.navigate(['/login']);
+
+    return false;
+  }
+
+  protected navigateUserToDashboard(): boolean {
+    console.log('Navigating user to dashboard');
+    this.router.navigate(['/dashboard']);
+
+    return false;
+  }
+
+  protected navigateUserTo(component: string): boolean {
+    this.router.navigate([component]);
+
+    return false;
+  }
+}

webapp/src/app/auth/dashboard-component.guard.ts

@@ +1 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
+import {Observable} from 'rxjs';
+import {ProfileService} from '../services/util/profile.service';
+import {BaseGuard} from './base-guard';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DashboardComponentGuard extends BaseGuard implements CanActivate {
+
+  constructor(private profileService: ProfileService, protected router: Router) {
+    super(router);
+  }
+
+  /**
+   * All logged users can navigate to dashboard component
+   * other users are navigate to login page
+   * @param route activated route snapshot
+   * @param state router state snapshot
+   */
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
+    return new Observable<boolean>((obs) => {
+      this.profileService.getLoggedUser()
+        .subscribe(() => {
+            obs.next(true);
+            obs.complete();
+          },
+          () => {
+            obs.next(this.navigateUserToLogin());
+            obs.complete();
+          }
+        );
+    });
+  }
+}

webapp/src/app/auth/employee-component.guard.ts

@@ +1 @@
+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';
+import {ProfileService} from '../services/util/profile.service';
+import {UserProfile} from '../models/user.model';
+import {UserType} from '../enums/common.enum';
+import {Observable} from 'rxjs';
+import {BaseGuard} from './base-guard';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EmployeeComponentGuard extends BaseGuard implements CanActivate {
+
+  constructor(private profileService: ProfileService, protected router: Router) {
+    super(router);
+  }
+
+  /**
+   * Logged user with access rights as employer can navigate to employee component
+   * Logged user with access rights as employee is navigated to dashboard
+   * User that is not logged is navigated to login page
+   * @param route activated route snapshot
+   * @param state router state snapshot
+   */
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
+    return new Observable<boolean>((obs) => {
+      this.profileService.getLoggedUser()
+        .subscribe((userProfile: UserProfile) => {
+            if (userProfile.role === UserType.EMPLOYER) {
+              console.log('User can navigate to the page');
+              obs.next(true);
+            }
+
+            obs.next(this.navigateUserToDashboard());
+            obs.complete();
+          },
+          () => {
+            obs.next(this.navigateUserToLogin());
+            obs.complete();
+          }
+        );
+    });
+  }
+
+}

webapp/src/app/employees/employees-list.component.html

@@ -37 +37 @@
     </thead>
     <tbody>
     <tr *ngFor="let user of _users">
-      <th scope="row">
+      <th scope="row" style="font-size: x-small">
         <img
           alt="photo"
           [src]="user.imageLink"

webapp/src/app/employees/employees-list.component.ts

@@ -12 +12 @@
 import {LocalizationService} from '../localization/localization.service';
 import {DateFormatterService} from '../services/util/date-formatter.service';
 import {FileService} from '../services/api/file.service';
+import {ProfileService} from '../services/util/profile.service';
 
 const daysOfWeek: string[] = [
   'po',
@@ -42 +43 @@
     private localizationService: LocalizationService,
     private dateFormatterService: DateFormatterService,
     private fileService: FileService,
+    private profileService: ProfileService,
     public dialog: MatDialog,
     private snackBar: MatSnackBar) {
     this.generateDays();

webapp/src/app/services/api/profile.service.ts

@@ -1 @@
-import {Injectable} from '@angular/core';
-import {UserService} from './user.service';
-import {Observable} from 'rxjs';
-import {UserProfile} from '../../models/user.model';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ProfileService {
-  private profile: UserProfile;
-
-  constructor(
-    private userService: UserService
-  ) {
-    // userService.getUserProfile(1)
-    //   .subscribe((data: UserProfile) => this.profile = data);
-  }
-
-  getProfile(): Observable<UserProfile> {
-    return new Observable((observer) => {
-      if (this.profile) {
-        observer.next(this.profile);
-        observer.complete();
-      } else {
-        this.userService.getUserProfile(1) // TODO zmenit id na prihlaseneho uzivatele
-          .subscribe((data: UserProfile) => {
-            this.profile = data;
-            observer.next(this.profile);
-            observer.complete();
-          });
-      }
-    });
-  }
-
-}

webapp/src/app/services/util/menu.service.ts

@@ -15 +15 @@
 })
 export class MenuService {
 
-  constructor(private userService: UserService) { }
+  constructor(private userService: UserService) {
+  }
 
   getMenuItems() {
     const menuItems: MenuItem[] = [];
-    menuItems.push({name: 'Dashboard', routePath: 'dashboard'});
 
     return new Observable((observer) => {
       this.userService.getLoggedUserProfile()
         .subscribe((profile: UserProfile) => {
-          if (profile.role === UserType.EMPLOYER) {
-            menuItems.push({name: 'Zaměstnanci', routePath: 'employees'});
-          }
+            menuItems.push({name: 'Dashboard', routePath: 'dashboard'});
+            if (profile.role === UserType.EMPLOYER) {
+              menuItems.push({name: 'Zaměstnanci', routePath: 'employees'});
+            }
 
-          observer.next(menuItems);
-          observer.complete();
-        });
+            observer.next(menuItems);
+            observer.complete();
+          },
+          () => {
+            observer.next(menuItems);
+            observer.complete();
+          });
     });
   }
 }

webapp/src/app/services/util/profile.service.ts

@@ +1 @@
+import {Injectable} from '@angular/core';
+import {UserService} from '../api/user.service';
+import {UserProfile} from '../../models/user.model';
+import {Observable} from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProfileService {
+  private profile: UserProfile;
+
+  constructor(private userService: UserService) {
+
+  }
+
+  /**
+   * Returns logged user profile if the server responds
+   * with valid profile otherwise observer returns error
+   * with message 'Cannot log in'
+   *
+   * The idea was to cache the logged user profile but
+   * the changes to logged user would not be seen until
+   * the user logged off and then logged back in
+   */
+  public getLoggedUser() {
+    return new Observable<UserProfile>((obs) => {
+      this.userService.getLoggedUserProfile()
+        .subscribe((userProfile: UserProfile) => {
+            this.profile = {...userProfile};
+            obs.next(this.profile);
+            obs.complete();
+          },
+          error1 => {
+            obs.error(error1);
+            obs.complete();
+          });
+    });
+  }
+
+  /**
+   * Do not use at the start of the application
+   * User might be logged but the service hasn't
+   * finished the request for the user profile
+   */
+  public isUserLogged(): boolean {
+    return this.profile == null;
+  }
+
+  public logUserOff(): void {
+    this.profile = null;
+  }
+}