Add guard to configuration component

Author: jweisman

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

@@ -12,6 +12,7 @@ import { StoreComponent } from './store/store.component';
 import { TranslateComponent } from './translate/translate.component';
 import { ConfigurationComponent, ConfigurationGuard } from './configuration/configuration.component';
 import { MultiSelectComponent } from './multi-select/multi-select.component';
+import { ErrorComponent } from './static/error.component';
 
 const routes: Routes = [
   { path: '', component: MainComponent },
@@ -26,6 +27,7 @@ const routes: Routes = [
   { path: 'translate', component: TranslateComponent },
   { path: 'multi-select', component: MultiSelectComponent },
   { path: 'configuration', component: ConfigurationComponent, canActivate: [ConfigurationGuard] },
+  { path: 'error', component: ErrorComponent }
 ];
 
 @NgModule({

cloudapp/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { ConfigurationComponent } from './configuration/configuration.component'
 import { MultiSelectComponent } from './multi-select/multi-select.component';
 import { SelectEntitiesComponent } from './multi-select/select-entities/select-entities.component';
 import { LightboxComponent } from './external/lightbox/lightbox.component'
+import { ErrorComponent } from './static/error.component';
 
 export function getToastrModule() {
   return ToastrModule.forRoot({
@@ -48,7 +49,8 @@ export function getToastrModule() {
       ConfigurationComponent,
       MultiSelectComponent,
       SelectEntitiesComponent,
-      LightboxComponent
+      LightboxComponent,
+      ErrorComponent
    ],
    imports: [
       MaterialModule,

cloudapp/src/app/configuration/configuration.component.ts

@@ -3,9 +3,10 @@ import { AppService } from '../app.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { CloudAppConfigService, CloudAppEventsService } from '@exlibris/exl-cloudapp-angular-lib';
 import { ToastrService } from 'ngx-toastr';
-import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { CanActivate, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { ErrorMessages } from '../static/error.component';
 
 @Component({
   selector: 'app-configuration',
@@ -61,15 +62,14 @@ export class ConfigurationGuard implements CanActivate {
     private eventsService: CloudAppEventsService,
     private router: Router
   ) {}
-  canActivate(
-    next: ActivatedRouteSnapshot,
-    state: RouterStateSnapshot): Observable<boolean> {
-      return this.eventsService.getInitData().pipe(map( data => {
-        if (!data.user.isAdmin) {
-          this.router.navigate(['/']);
-          return false;
-        }
-        return true;
-      }))
+  canActivate(): Observable<boolean> {
+    return this.eventsService.getInitData().pipe(map( data => {
+      if (!data.user.isAdmin) {
+        this.router.navigate(['/error'], 
+          { queryParams: { error: ErrorMessages.NO_ACCESS}});
+        return false;
+      }
+      return true;
+    }))
   }
-}
+}

cloudapp/src/app/main/main.component.html

@@ -14,6 +14,6 @@ <h1>
     <li><a [routerLink]="['store']">Using the Store Service</a></li>  
     <li><a [routerLink]="['translate']">Translating your app</a></li>
     <li><a [routerLink]="['multi-select']">Selecting multiple entities</a></li>
-    <li *ngIf="isAdmin"><a [routerLink]="['configuration']">Using the Configuration Service</a></li>
+    <li><a [routerLink]="['configuration']">Using the Configuration Service</a></li>
   </ul>
 </section>

cloudapp/src/app/static/error.component.ts

@@ -0,0 +1,26 @@
+import { Component } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+
+@Component({
+  template: "{{error}}"
+})
+export class ErrorComponent  {
+  error: string;
+  constructor(
+    private route: ActivatedRoute,
+  ) {}
+
+  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      this.error = errorMessages[params['error']] || 'An error has occurred.';
+    });
+  }
+}
+
+const errorMessages = {
+  'NO_ACCESS': "You don't have access to this page."
+}
+
+export enum ErrorMessages {
+  NO_ACCESS = 'NO_ACCESS'
+} 

manifest.json

@@ -3,7 +3,7 @@
    "title": "Cloud App Tutorials",
    "description": "For more information on these tutorials, see https://developers.exlibrisgroup.com/cloudapps/tutorials/.",
    "subtitle": "Accompanying code for the Cloud App tutorials in the Developer Network",
-   "author": "Josh Weisman",
+   "author": "Ex Libris",
    "contentSecurity": {
       "connectSrc": [
          "https://catalog.hathitrust.org/",
@@ -16,6 +16,7 @@
    },
    "pages": {
       "settings": "/#/settings",
+      "config": "/#/configuration",
       "help": "https://github.com/ExLibrisGroup/cloudapp-tutorials"
    },
    "icon": {