@genesislcap/blank-app-seed 3.21.0 → 3.23.0

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/client-tmp/react/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/client-tmp/react/README.md

@@ -0,0 +1,48 @@
+
+# {{capitalCase appName}}
+
+This project is built with React.
+
+## Development
+
+1. Install dependencies:
+
+```shell
+npm run bootstrap
+```
+
+2. Start the development server:
+
+```shell
+npm run start
+```
+
+3. Build for production:
+
+```shell
+npm run build
+```
+
+Preview the production build:
+
+```shell
+npm run serve
+```
+
+## Clean
+
+Remove `build` and `node_modules` directories:
+
+```shell
+npm run clean
+```
+
+Baseline task combines `clean` and `install` tasks into a single command:
+
+```shell
+npm run baseline
+```
+
+## Further help
+
+To get more help on React, check out the [React documentation](https://reactjs.org/docs/getting-started.html).

package/client-tmp/react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{pkgName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>