@genesislcap/blank-app-seed 3.21.0 → 3.22.0

package/.genx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed-config",
   "description": "Genesis Blank App Seed Configuration",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "license": "Apache-2.0",
   "scripts": {
     "lint": "eslint .",

package/.genx/templates/angular/chart.hbs

@@ -1,9 +1,21 @@
-<rapid-g2plot-chart
-  type="{{ config.type }}"
-  [config]="tile{{ config.index }}.chartConfig"
->
-  <chart-datasource
-    resourceName="{{ config.resourceName }}"
-    server-fields="{{ config.xField }} {{ config.yField }}"
-  ></chart-datasource>
-</rapid-g2plot-chart>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
+    <rapid-g2plot-chart
+      type="{{ config.type }}"
+      [config]="tile{{ config.index }}.chartConfig"
+    >
+      <chart-datasource
+        resourceName="{{ config.resourceName }}"
+        server-fields="{{ config.xField }} {{ config.yField }}"
+      ></chart-datasource>
+    </rapid-g2plot-chart>
+  </ng-container>
+
+  <ng-template #notPermitted{{ config.index }}>
+    <app-error-message
+      style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+      elementType="h3"
+      message="You do not have access to view this component.">
+    </app-error-message>
+  </ng-template>
+</section>

package/.genx/templates/angular/entityManager.hbs

@@ -1,45 +1,57 @@
-<entity-management
-    design-system-prefix="rapid"
-    enable-row-flashing
-    enable-cell-flashing
-    {{#if config.title}}
-    title="{{ config.title }}"
-    {{/if}}
-    resourceName="{{ config.resourceName }}"
-    {{#if config.createEvent}}
-    createEvent="{{ config.createEvent }}"
-    {{#if config.createFormUiSchema}}
-    [createFormUiSchema]="tile{{ config.index }}.createFormUiSchema"
-    {{/if}}
-    {{/if}}
-    {{#if config.updateEvent}}
-    updateEvent="{{ config.updateEvent }}"
-    {{#if config.updateFormUiSchema}}
-    [updateFormUiSchema]="tile{{ config.index }}.updateFormUiSchema"
-    {{/if}}
-    {{/if}}
-    {{#if config.deleteEvent}}
-    deleteEvent="{{ config.deleteEvent }}"
-    {{/if}}
-    {{#if config.gridOptions}}
-    [gridOptions]="{{ config.gridOptions }}"
-    {{/if}}
-    {{#if config.snapshot}}
-    [datasourceConfig]="{ isSnapshot: {{ config.snapshot }} }"
-    {{/if}}
-    {{#if config.reqrep}}
-    [datasourceConfig]="tile{{ config.index }}.reqrep"
-    {{/if}}
-    {{#if config.columns}}
-    [columns]="tile{{ config.index }}.columns"
-    {{/if}}
-    {{#if config.modalPosition}}
-    modal-position="{{ config.modalPosition }}"
-    {{/if}}
-    {{#if config.sizeColumnsToFit}}
-    size-columns-to-fit
-    {{/if}}
-    {{#if config.enableSearchBar}}
-    enable-search-bar
-    {{/if}}
-></entity-management>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
+    <entity-management
+      design-system-prefix="rapid"
+      enable-row-flashing
+      enable-cell-flashing
+      {{#if config.title}}
+      title="{{ config.title }}"
+      {{/if}}
+      resourceName="{{ config.resourceName }}"
+      {{#if config.createEvent}}
+      [createEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.createEvent }}' : undefined"
+      {{#if config.createFormUiSchema}}
+      [createFormUiSchema]="tile{{ config.index }}.createFormUiSchema"
+      {{/if}}
+      {{/if}}
+      {{#if config.updateEvent}}
+      [updateEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.updateEvent }}' : undefined"
+      {{#if config.updateFormUiSchema}}
+      [updateFormUiSchema]="tile{{ config.index }}.updateFormUiSchema"
+      {{/if}}
+      {{/if}}
+      {{#if config.deleteEvent}}
+      [deleteEvent]="hasUserPermission('{{config.permissions.updateRight}}') ? '{{ config.deleteEvent }}' : undefined"
+      {{/if}}
+      {{#if config.gridOptions}}
+      [gridOptions]="{{ config.gridOptions }}"
+      {{/if}}
+      {{#if config.snapshot}}
+      [datasourceConfig]="{ isSnapshot: {{ config.snapshot }} }"
+      {{/if}}
+      {{#if config.reqrep}}
+      [datasourceConfig]="tile{{ config.index }}.reqrep"
+      {{/if}}
+      {{#if config.columns}}
+      [columns]="tile{{ config.index }}.columns"
+      {{/if}}
+      {{#if config.modalPosition}}
+      modal-position="{{ config.modalPosition }}"
+      {{/if}}
+      {{#if config.sizeColumnsToFit}}
+      size-columns-to-fit
+      {{/if}}
+      {{#if config.enableSearchBar}}
+      enable-search-bar
+      {{/if}}
+    ></entity-management>
+  </ng-container>
+
+  <ng-template #notPermitted{{ config.index }}>
+    <app-error-message
+      style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+      elementType="h3"
+      message="You do not have access to view this component.">
+    </app-error-message>
+  </ng-template>
+</section>

package/.genx/templates/angular/form.hbs

@@ -1,8 +1,21 @@
-<foundation-form
-  design-system-prefix="rapid"
-  resourceName="{{config.resourceName}}"
-  {{#if config.uischema}}
-  [uischema]="tile{{ config.index }}.uischema"
-  {{/if}}
->
-</foundation-form>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.updateRight}}'); else notPermitted{{ config.index }}">
+    <foundation-form
+      design-system-prefix="rapid"
+      resourceName="{{config.resourceName}}"
+      {{#if config.uischema}}
+      [uischema]="tile{{ config.index }}.uischema"
+      {{/if}}
+    >
+    </foundation-form>
+  </ng-container>
+  
+  <ng-template #notPermitted{{ config.index }}>
+    <app-error-message
+      style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+      elementType="h3"
+      message="You do not have access to view this component.">
+    </app-error-message>
+  </ng-template>
+</section>
+

package/.genx/templates/angular/grid.hbs

@@ -1,18 +1,30 @@
-<rapid-grid-pro
-  enable-row-flashing
-  enable-cell-flashing
-  >
-  <grid-pro-genesis-datasource
-    resource-name="{{config.resourceName}}"
-    {{#if config.snapshot}}
-    isSnapshot="{{config.snapshot}}"
-    {{/if}}
-    {{#if config.reqrep}}
-    [datasourceConfig]="tile{{ config.index }}.reqrep"
-    {{/if}}
-    {{#if config.gridOptions}}
-    [deferredGridOptions]="tile{{ config.index }}.gridOptions"
-    {{/if}}
-  >
-  </grid-pro-genesis-datasource>
-</rapid-grid-pro>
+<section style="height: 100%; width: 100%;">
+  <ng-container *ngIf="hasUserPermission('{{config.permissions.viewRight}}'); else notPermitted{{ config.index }}">
+    <rapid-grid-pro
+      enable-row-flashing
+      enable-cell-flashing
+      >
+      <grid-pro-genesis-datasource
+        resource-name="{{config.resourceName}}"
+        {{#if config.snapshot}}
+        isSnapshot="{{config.snapshot}}"
+        {{/if}}
+        {{#if config.reqrep}}
+        [datasourceConfig]="tile{{ config.index }}.reqrep"
+        {{/if}}
+        {{#if config.gridOptions}}
+        [deferredGridOptions]="tile{{ config.index }}.gridOptions"
+        {{/if}}
+      >
+      </grid-pro-genesis-datasource>
+    </rapid-grid-pro>
+  </ng-container>
+
+  <ng-template #notPermitted{{ config.index }}>
+    <app-error-message
+      style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;"
+      elementType="h3"
+      message="You do not have access to view this component.">
+    </app-error-message>
+  </ng-template>
+</section>

package/.genx/templates/angular/route.hbs

@@ -1,13 +1,14 @@
-import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
-import {CommonModule} from '@angular/common';
-{{#if route.tiles}}
-import { getDateFormatter, getNumberFormatter } from '../../utils';
-{{/if}}
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { User, getUser } from '@genesislcap/foundation-user';
+import { getDateFormatter, getNumberFormatter, getViewUpdateRightComponent } from '../../utils';
+import { ErrorMessageComponent } from '../../components/error-message/error-message.component';
 
 @Component({
   selector: 'app-{{pascalCase route.name}}',
   standalone: true,
   imports: [
+    ErrorMessageComponent,
     CommonModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +16,8 @@ import { getDateFormatter, getNumberFormatter } from '../../utils';
   styleUrls: ['./{{kebabCase route.name}}.component.css'],
 })
 export class {{pascalCase route.name}}Component {
+  hasUserPermission = (permissionCode: string) => getViewUpdateRightComponent(getUser(), permissionCode);
+  
   {{#each route.tiles}}
   tile{{this.config.index}} = { {{#if this.config.createFormUiSchema}}
     "createFormUiSchema": {{{ this.config.createFormUiSchema }}},{{/if}}{{#if this.config.updateFormUiSchema}}

package/.genx/templates/web-components/entityManager.hbs

@@ -48,6 +48,6 @@ ${whenElse(
         ></entity-management>
     `,
     html`
-        <not-permitted-component></not-permitted-component>
+      <not-permitted-component></not-permitted-component>
     `,
 )}

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.22.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.21.0...v3.22.0) (2024-07-15)
+
+
+### Features
+
+* angular handle route, component view/update permissions - [FUI-2066](https://github.com/genesiscommunitysuccess/blank-app-seed/issues/2066) (#273) 8c73b16
+
 ## [3.21.0](https://github.com/genesiscommunitysuccess/blank-app-seed/compare/v3.20.5...v3.21.0) (2024-07-09)
 
 

package/client-tmp/angular/angular.json

@@ -13,12 +13,6 @@
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
-            "customWebpackConfig": {
-              "path": "./custom-webpack.config.js",
-              "mergeStrategies": {
-                "externals": "replace"
-              }
-            },
             "outputPath": "dist/{{pkgName}}",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -39,7 +33,9 @@
               "size-sensor",
               "pdfast",
               "fmin",
-              "@json-schema-tools/dereferencer"
+              "@json-schema-tools/dereferencer",
+              "numeral",
+              "numeral/locales"
             ]
           },
           "configurations": {
@@ -107,13 +103,26 @@
         },
         "test": {
           "builder": "@angular-builders/custom-webpack:karma",
-          "options": {
-            "customWebpackConfig": {
-              "path": "./custom-webpack.config.js",
-              "mergeStrategies": {
-                "externals": "replace"
+          "configurations": {
+            "production": {
+              "customWebpackConfig": {
+                "path": "./webpack.prod.config.js",
+                "mergeStrategies": {
+                  "externals": "replace"
+                }
               }
             },
+            "development": {
+              "customWebpackConfig": {
+                "path": "./webpack.dev.config.js",
+                "mergeStrategies": {
+                  "externals": "replace"
+                }
+              }
+            }
+          },
+          "defaultConfiguration": "development",
+          "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
             "assets": ["src/favicon.ico", "src/assets"],

package/client-tmp/angular/package.json

@@ -1,6 +1,9 @@
 {
   "name": "{{pkgName}}",
+  "description": "",
   "version": "{{applicationVersionWeb}}",
+  "private": true,
+  "license": "UNLICENSED",
   "scripts": {
     "ng": "ng",
     "bootstrap": "npm install --no-fund --no-audit",
@@ -9,7 +12,25 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
-  "private": true,
+  "devDependencies": {
+    "@angular-builders/custom-webpack": "^18.0.0",
+    "@angular-devkit/build-angular": "^18.0.4",
+    "@angular/cli": "^18.0.4",
+    "@angular/compiler-cli": "^18.0.4",
+    "@genesislcap/build-kit": "{{versions.UI}}",
+    "@types/jasmine": "~5.1.0",
+    "@types/numeral": "^2.0.5",
+    "file-loader": "^6.2.0",
+    "jasmine-core": "~5.1.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.1.0",
+    "svg-url-loader": "^8.0.0",
+    "typescript": "~5.4.5",
+    "ts-node": "10.9.2"
+  },
   "dependencies": {
     "@angular/animations": "^18.0.4",
     "@angular/common": "^18.0.4",
@@ -24,32 +45,36 @@
     "@genesislcap/foundation-entity-management": "{{versions.UI}}",
     "@genesislcap/foundation-header": "{{versions.UI}}",
     "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-user": "{{versions.UI}}",
     "@genesislcap/rapid-design-system": "{{versions.UI}}",
     "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
     "@genesislcap/foundation-layout": "{{versions.UI}}",
     "@genesislcap/g2plot-chart": "{{versions.UI}}",
     "numeral": "2.0.6",
-    "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },
-  "devDependencies": {
-    "@angular-builders/custom-webpack": "^18.0.0",
-    "@angular-devkit/build-angular": "^18.0.4",
-    "@angular/cli": "^18.0.4",
-    "@angular/compiler-cli": "^18.0.4",
-    "@genesislcap/build-kit": "{{versions.UI}}",
-    "@types/jasmine": "~5.1.0",
-    "@types/numeral": "^2.0.5",
-    "file-loader": "^6.2.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "svg-url-loader": "^8.0.0",
-    "typescript": "~5.4.5",
-    "ts-node": "10.9.2"
+  "overrides": {
+    "@angular/animations": "^18.0.4",
+    "@angular/common": "^18.0.4",
+    "@angular/compiler": "^18.0.4",
+    "@angular/core": "^18.0.4",
+    "@angular/forms": "^18.0.4",
+    "@angular/platform-browser": "^18.0.4",
+    "@angular/platform-browser-dynamic": "^18.0.4",
+    "@angular/router": "^18.0.4",
+    "@genesislcap/foundation-comms": "{{versions.UI}}",
+    "@genesislcap/foundation-login": "{{versions.UI}}",
+    "@genesislcap/foundation-entity-management": "{{versions.UI}}",
+    "@genesislcap/foundation-header": "{{versions.UI}}",
+    "@genesislcap/foundation-ui": "{{versions.UI}}",
+    "@genesislcap/foundation-user": "{{versions.UI}}",
+    "@genesislcap/rapid-design-system": "{{versions.UI}}",
+    "@genesislcap/rapid-grid-pro": "{{versions.UI}}",
+    "@genesislcap/foundation-layout": "{{versions.UI}}",
+    "@genesislcap/g2plot-chart": "{{versions.UI}}",
+    "numeral": "2.0.6",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.14.3"
   }
 }

package/client-tmp/angular/src/app/app-routing.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from './guards/auth.guard';
+import { PermissionsGuard } from './guards/permissions.guard';
 import { AuthLoginComponent } from './pages/auth-login/auth-login.component';
+import { NotPermittedComponent } from './pages/not-permitted/not-permitted.component';
 {{#each routes}}
 import { {{pascalCase this.name}}Component } from './pages/{{kebabCase this.name}}/{{kebabCase this.name}}.component';
 {{/each}}
-import { AUTH_PATH } from './app.config';
+import { AUTH_PATH, NOT_PERMITTED_PATH } from './app.config';
 
 export const routes: Routes = [
   {
@@ -17,11 +19,16 @@ export const routes: Routes = [
     path: `${AUTH_PATH}`,
     component: AuthLoginComponent,
   },
+  {
+    path: `${NOT_PERMITTED_PATH}`,
+    component: NotPermittedComponent,
+  },
   {{#each routes}}
   {
     path: '{{kebabCase this.name}}',
-    canActivate: [AuthGuard],
-    component: {{pascalCase this.name}}Component ,
+    canActivate: [AuthGuard{{#if this.permissions.viewRight}}, PermissionsGuard{{/if}}],
+    component: {{pascalCase this.name}}Component,
+    data: { permissionCode: '{{this.permissions.viewRight}}' },
   },
   {{/each}}
 ];

package/client-tmp/angular/src/app/app.component.spec.ts

@@ -4,7 +4,7 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent],
+      declarations: [AppComponent],
     }).compileComponents();
   });
 
@@ -19,11 +19,5 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance;
     expect(app.title).toEqual('{{capitalCase appName}}');
   });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, {{capitalCase appName}}');
-  });
 });
+

package/client-tmp/angular/src/app/app.component.ts

@@ -20,7 +20,6 @@ export class AppComponent {
     private router: Router,
   ) {
       configureFoundationLogin({ router });
-
       
     // Set layout componet based on route
     router.events.subscribe((event: any) => {

package/client-tmp/angular/src/app/app.config.ts

@@ -2,6 +2,7 @@ import type { MainMenu } from './types/menu'
 import type { LayoutComponentName } from './types/layout';
 
 export const AUTH_PATH = 'login'
+export const NOT_PERMITTED_PATH = 'not-permitted'
 
 export const layoutComponentName = {
   default: 'DefaultLayoutComponent',

package/client-tmp/angular/src/app/components/error-message/error-message.component.html

@@ -0,0 +1,15 @@
+<section class="error-message-wrapper">
+  <div class="error-message" style="color: var(--neutral-foreground-rest); background-color: var(--neutral-layer-4); border-color: var(--error-color); border-radius: 7px; border-style: solid; border-width: 4px; padding: 5px; margin: 15px; text-align: center; width: fit-content;">
+      <ng-container [ngSwitch]="elementType">
+        <h1 *ngSwitchCase="'h1'">\{{ message }}</h1>
+        <h2 *ngSwitchCase="'h2'">\{{ message }}</h2>
+        <h3 *ngSwitchCase="'h3'">\{{ message }}</h3>
+        <h4 *ngSwitchCase="'h4'">\{{ message }}</h4>
+        <h5 *ngSwitchCase="'h5'">\{{ message }}</h5>
+        <h6 *ngSwitchCase="'h6'">\{{ message }}</h6>
+        <p *ngSwitchCase="'p'">\{{ message }}</p>
+        <span *ngSwitchCase="'span'">\{{ message }}</span>
+        <div *ngSwitchDefault>\{{ message }}</div>
+      </ng-container>
+  </div>
+</section>

package/client-tmp/angular/src/app/components/error-message/error-message.component.spec.ts

@@ -0,0 +1,74 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ErrorMessageComponent } from './error-message.component';
+
+describe('ErrorMessageComponent', () => {
+  let component: ErrorMessageComponent;
+  let fixture: ComponentFixture<ErrorMessageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ErrorMessageComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ErrorMessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render a message inside an h1 element', () => {
+    component.elementType = 'h1';
+    component.message = 'Error: Something went wrong!';
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const element = compiled.querySelector('h1');
+    expect(element).toBeTruthy();
+    expect(element.textContent).toContain('Error: Something went wrong!');
+  });
+
+  it('should render a message inside an h3 element', () => {
+    component.elementType = 'h3';
+    component.message = 'Warning: Check your inputs.';
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const element = compiled.querySelector('h3');
+    expect(element).toBeTruthy();
+    expect(element.textContent).toContain('Warning: Check your inputs.');
+  });
+
+  it('should render a message inside a p element', () => {
+    component.elementType = 'p';
+    component.message = 'Info: Your operation was successful.';
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const element = compiled.querySelector('p');
+    expect(element).toBeTruthy();
+    expect(element.textContent).toContain('Info: Your operation was successful.');
+  });
+
+  it('should default to div element if no elementType is provided', () => {
+    component.elementType = '';
+    component.message = 'Default to div element.';
+    fixture.detectChanges();
+
+    const compiled = fixture.nativeElement;
+    const element = compiled.querySelector('div');
+    expect(element.textContent).toContain('Default to div element.');
+  });
+
+  it('should apply error-message class to the rendered element', () => {
+    component.elementType = 'h2';
+    component.message = 'Testing class application.';
+    fixture.detectChanges();
+   
+    const compiled = fixture.nativeElement;
+    const element = compiled.querySelector('.error-message');
+    expect(element).toBeTruthy();
+  });
+});

package/client-tmp/angular/src/app/components/error-message/error-message.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-error-message',
+  templateUrl: './error-message.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+  ],
+})
+export class ErrorMessageComponent {
+  @Input() elementType: string = 'div';
+  @Input() message: string = '';
+}

package/client-tmp/angular/src/app/guards/auth.guard.ts

@@ -12,11 +12,11 @@ export class AuthGuard implements CanActivate {
     private router: Router,
   ) {}
 
-  async canActivate(): Promise<boolean> {
-    const isUserAuthenticated = await this.authService.isUserAuthenticated();
+  canActivate(): boolean {
+    const isUserAuthenticated = this.authService.isUserAuthenticated();
 
     if (!isUserAuthenticated) {
-      await this.router.navigate([`/${AUTH_PATH}`]);
+      this.router.navigate([`/${AUTH_PATH}`]);
       return false;
     }
     return true;

package/client-tmp/angular/src/app/guards/permissions.guard.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';
+import { AuthService } from '../services/auth.service';
+import { NOT_PERMITTED_PATH } from '../app.config';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PermissionsGuard implements CanActivate {
+  constructor(
+    private authService: AuthService,
+    private router: Router,
+  ) {}
+
+  async canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {
+    const isPermitted = await this.authService.hasUserPermission(route.data['permissionCode']);
+
+    if (!isPermitted) {
+      await this.router.navigate([`/${NOT_PERMITTED_PATH}`]);
+      return false;
+    }
+    return true;
+  }
+}

package/client-tmp/angular/src/app/layouts/blank/blank.layout.html

@@ -1,6 +1,5 @@
 <rapid-design-system-provider #designSystemProvider>
   <section class="content">
     <router-outlet></router-outlet>
-    <app-messages></app-messages>
   </section>
 </rapid-design-system-provider>

package/client-tmp/angular/src/app/layouts/blank/blank.layout.spec.ts

@@ -10,7 +10,7 @@ describe('BlankLayoutComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [BlankLayoutComponent],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
     });
     fixture = TestBed.createComponent(BlankLayoutComponent);
     component = fixture.componentInstance;

package/client-tmp/angular/src/app/layouts/default/default.layout.html

@@ -15,6 +15,5 @@
   </foundation-header>
   <section class="content">
     <router-outlet></router-outlet>
-    <app-messages></app-messages>
   </section>
 </rapid-design-system-provider>

package/client-tmp/angular/src/app/layouts/default/default.layout.spec.ts

@@ -1,34 +1,49 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideMockStore } from '@ngrx/store/testing';
-import * as StateChangerSelector from '../../store/state-changer/state-changer.selectors';
-
+import { Router } from '@angular/router';
 import { DefaultLayoutComponent } from './default.layout';
+import { ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+class MockRouter {
+  navigate = jasmine.createSpy('navigate');
+}
+
+class MockElementRef implements ElementRef {
+  nativeElement = {};
+}
 
 describe('DefaultLayoutComponent', () => {
   let component: DefaultLayoutComponent;
   let fixture: ComponentFixture<DefaultLayoutComponent>;
+  let router: MockRouter;
+  let elementRef: MockElementRef;
 
-  beforeEach(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       declarations: [DefaultLayoutComponent],
       providers: [
-        provideMockStore({
-          initialState: {},
-          selectors: [
-            { selector: StateChangerSelector.getCriteria, value: 'initial-criteria' },
-            { selector: StateChangerSelector.getResourceName, value: 'initial-resource-name' },
-          ],
-        }),
+        { provide: Router, useClass: MockRouter },
+        { provide: ElementRef, useClass: MockElementRef }
       ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    });
+      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
     fixture = TestBed.createComponent(DefaultLayoutComponent);
     component = fixture.componentInstance;
+    router = TestBed.inject(Router) as unknown as MockRouter;
+    elementRef = TestBed.inject(ElementRef) as unknown as MockElementRef;
+    component.designSystemProviderElement = elementRef;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should navigate to a path', () => {
+    const path = 'some/path';
+    component.navigateAngular(path);
+    expect(router.navigate).toHaveBeenCalledWith([path]);
+  });
 });

package/client-tmp/angular/src/app/pages/auth-login/auth-login.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AuthMockComponent } from './auth-mock.component';
+import { AuthLoginComponent } from './auth-login.component';
 
-describe('AuthMockComponent', () => {
-  let component: AuthMockComponent;
-  let fixture: ComponentFixture<AuthMockComponent>;
+describe('AuthLoginComponent', () => {
+  let component: AuthLoginComponent;
+  let fixture: ComponentFixture<AuthLoginComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AuthMockComponent],
+      imports: [AuthLoginComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(AuthMockComponent);
+    fixture = TestBed.createComponent(AuthLoginComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/client-tmp/angular/src/app/pages/not-permitted/not-permitted.component.html

@@ -0,0 +1,4 @@
+<app-error-message
+    elementType="h1"
+    message="You do not have permission to access this part of the application, please contact your administrator.">
+</app-error-message>

package/client-tmp/angular/src/app/pages/not-permitted/not-permitted.component.scss

@@ -0,0 +1,12 @@
+@import '../../../styles/mixins';
+
+:host {
+  @include screen('flex');
+  align-items: center;
+  justify-content: center;
+}
+
+h1 {
+  text-align: center;
+  color: var(--neutral-foreground-rest);
+}

package/client-tmp/angular/src/app/pages/not-permitted/not-permitted.component.spec.ts

@@ -0,0 +1,32 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NotPermittedComponent } from './not-permitted.component';
+
+const MESSAGE_NOT_PERMITTED = 'You do not have permission to access this part of the application, please contact your administrator.';
+
+describe('NotPermittedComponent', () => {
+  let component: NotPermittedComponent;
+  let fixture: ComponentFixture<NotPermittedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ NotPermittedComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotPermittedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should display the correct error message', () => {
+    const compiled = fixture.nativeElement;
+    const errorMessageElement = compiled.querySelector('app-error-message h1');
+    expect(errorMessageElement.textContent).toBe(MESSAGE_NOT_PERMITTED);
+  });
+});

package/client-tmp/angular/src/app/pages/not-permitted/not-permitted.component.ts

@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ErrorMessageComponent } from '../../components/error-message/error-message.component';
+
+@Component({
+  selector: 'app-not-permitted',
+  standalone: true,
+  imports: [ ErrorMessageComponent ],
+  templateUrl: './not-permitted.component.html',
+  styleUrls: ['./not-permitted.component.scss'],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
+})
+export class NotPermittedComponent {
+}

package/client-tmp/angular/src/app/services/auth.service.ts

@@ -1,14 +1,22 @@
 import { Injectable } from '@angular/core';
 import { Auth } from '@genesislcap/foundation-comms';
-import {DI} from "@microsoft/fast-foundation";
+import { DI } from "@microsoft/fast-foundation";
 
 @Injectable({
   providedIn: 'root',
 })
 export class AuthService {
+  auth: Auth;
 
-  async isUserAuthenticated(): Promise<boolean> {
-    const auth: Auth = DI.getOrCreateDOMContainer().get(Auth);
-    return auth.isLoggedIn
+  constructor() {
+    this.auth = DI.getOrCreateDOMContainer().get(Auth);
+  }
+
+  isUserAuthenticated(): boolean {
+    return this.auth.isLoggedIn;
+  }
+
+  hasUserPermission(permissionCode: string): boolean {
+    return this.auth.currentUser.hasPermission(permissionCode);
   }
 }

package/client-tmp/angular/src/app/share/foundation-login.ts

@@ -3,6 +3,9 @@ import type { Router } from '@angular/router';
 import { AUTH_PATH } from '../app.config';
 import { DI } from '@microsoft/fast-foundation';
 
+// eslint-disable-next-line
+declare var GENX_ENABLE_SSO: boolean;
+
 const ssoSettings =
   typeof GENX_ENABLE_SSO !== 'undefined' && GENX_ENABLE_SSO === true
     ? {

package/client-tmp/angular/src/app/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './formatters';
 export * from './getLayoutNameByRoute';
+export * from './permissions';

package/client-tmp/angular/src/app/utils/permissions.ts

@@ -0,0 +1,7 @@
+import { User } from '@genesislcap/foundation-user';
+
+export const getViewUpdateRightComponent = (
+  user: User,
+  right: string,
+  event: string | boolean = true,
+) => (!right || user.hasPermission(right) ? event : '');

package/client-tmp/angular/src/styles/_mixins.scss

@@ -0,0 +1,8 @@
+@mixin screen($display: 'block') {
+    contain: content;
+    display: #{$display};
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+  

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/blank-app-seed",
   "description": "Genesis Blank App Seed",
-  "version": "3.21.0",
+  "version": "3.22.0",
   "license": "Apache-2.0",
   "scripts": {
     "release": "semantic-release"