Merge pull request #14 from cre8/cre8/issue11

Cre8/issue11

.github/workflows/main.yml

@@ -8,6 +8,9 @@ on:
     branches:
       - main
 
+concurrency: 
+  group: ${{ github.head_ref ||  github.ref }}
+
 permissions:
     contents: read
     packages: write

apps/holder/angular.json

@@ -3,9 +3,7 @@
   "version": 1,
   "cli": {
     "packageManager": "pnpm",
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ],
+    "schematicCollections": ["@angular-eslint/schematics"],
     "analytics": false
   },
   "newProjectRoot": "projects",
@@ -56,7 +54,7 @@
                   "maximumError": "4kb"
                 }
               ],
-              "outputHashing": "all",
+              "outputHashing": "none",
               "serviceWorker": "projects/pwa/ngsw-config.json"
             },
             "development": {
@@ -176,7 +174,7 @@
                   "maximumError": "4kb"
                 }
               ],
-              "outputHashing": "all"
+              "outputHashing": "none"
             },
             "development": {
               "optimization": false,

apps/holder/package.json

@@ -5,9 +5,9 @@
     "init": "cp projects/pwa/src/assets/config/config.example.js projects/pwa/src/assets/config/config.js",
     "ng": "ng",
     "start:pwa": "ng serve pwa",
+    "start:extension": "ng build --project browser-extension --configuration development --watch",
     "build": "ng build --project pwa",
-    "start:extension": "concurrently --kill-others \"ng build --project browser-extension --configuration development --watch\" \"nodemon\"",
-    "start:extension-prod": "concurrently --kill-others \"ng build --project browser-extension --watch\" \"nodemon\"",
+    "build:extension": "ng build --project browser-extension",
     "api": "npx @openapitools/openapi-generator-cli generate -g typescript-angular -i http://localhost:3000/api-json -o projects/shared/api/kms --api-name-suffix=Kms --additional-properties=supportsES6=true,enumPropertyNaming=original,serviceSuffix=ApiService",
     "test": "ng test --no-watch --no-progress --browsers=ChromeHeadless",
     "lint": "ng lint",

apps/holder/projects/browser-extension/src/app/app.config.ts

@@ -7,6 +7,8 @@ import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { provideOAuthClient } from 'angular-oauth2-oidc';
 import { environment } from '../environments/environment';
 import { ApiModule, Configuration } from '../../../shared/api/kms';
+import { AuthServiceInterface } from '../../../shared/settings/settings.component';
+import { AuthService } from './auth/auth.service';
 
 function getConfiguration() {
   return new Configuration({
@@ -27,6 +29,10 @@ export const appConfig: ApplicationConfig = {
     provideOAuthClient(),
     importProvidersFrom(ApiModule, HttpClientModule),
     { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true } },
+    {
+      provide: AuthServiceInterface,
+      useClass: AuthService,
+    },
     {
       provide: Configuration,
       useFactory: getConfiguration,

apps/holder/projects/pwa/src/app/app.config.ts

@@ -13,8 +13,9 @@ import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { OAuthModuleConfig, provideOAuthClient } from 'angular-oauth2-oidc';
 import { environment } from '../environments/environment';
 import { ApiModule, Configuration } from '../../../shared/api/kms';
-import { AuthService } from '../../../shared/auth/auth.service';
+import { AuthService } from './auth/auth.service';
 import { provideServiceWorker } from '@angular/service-worker';
+import { AuthServiceInterface } from '../../../shared/settings/settings.component';
 
 function authAppInitializerFactory(
   authService: AuthService
@@ -47,6 +48,10 @@ export const appConfig: ApplicationConfig = {
       provide: Configuration,
       useValue: new Configuration({ basePath: environment.backendUrl }),
     },
+    {
+      provide: AuthServiceInterface,
+      useClass: AuthService,
+    },
     provideServiceWorker('ngsw-worker.js', {
       enabled: !isDevMode(),
       registrationStrategy: 'registerWhenStable:30000',

apps/holder/projects/pwa/src/app/app.routes.ts

@@ -1,10 +1,10 @@
 import { Routes } from '@angular/router';
-import { authGuard } from '../../../shared/auth/auth.guard';
+import { authGuard } from './auth/auth.guard';
 import { CredentialsListComponent } from '../../../shared/credentials/credentials-list/credentials-list.component';
 import { CredentialsShowComponent } from '../../../shared/credentials/credentials-show/credentials-show.component';
 import { SettingsComponent } from '../../../shared/settings/settings.component';
 import { ScannerComponent } from './scanner/scanner.component';
-import { LoginComponent } from '../../../shared/login/login.component';
+import { LoginComponent } from './login/login.component';
 import { HistoryListComponent } from '../../../shared/history/history-list/history-list.component';
 import { HistoryShowComponent } from '../../../shared/history/history-show/history-show.component';
 

apps/holder/projects/shared/auth/auth.service.ts → apps/holder/projects/pwa/src/app/auth/auth.service.ts

@@ -5,10 +5,11 @@ import { Router } from '@angular/router';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
-import { authConfig } from '../../pwa/src/app/authConfig';
+import { authConfig } from '../authConfig';
+import { AuthServiceInterface } from '../../../../shared/settings/settings.component';
 
 @Injectable({ providedIn: 'root' })
-export class AuthService {
+export class AuthService implements AuthServiceInterface {
   private isAuthenticatedSubject$ = new BehaviorSubject<boolean>(false);
   public isAuthenticated$ = this.isAuthenticatedSubject$.asObservable();
 

apps/holder/projects/shared/settings/settings.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { AuthService } from '../auth/auth.service';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { SettingsService } from './settings.service';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -22,6 +21,10 @@ export declare namespace globalThis {
   };
 }
 
+export abstract class AuthServiceInterface {
+  abstract logout(): void;
+}
+
 @Component({
   selector: 'app-settings',
   standalone: true,
@@ -41,7 +44,7 @@ export class SettingsComponent implements OnInit {
   keycloakLink: string;
 
   constructor(
-    public authService: AuthService,
+    public authService: AuthServiceInterface,
     public settingsService: SettingsService,
     private httpClient: HttpClient,
     private settingsApiService: SettingsApiService

docs/development.md

@@ -41,6 +41,8 @@ The command `pnpm run start:extension` in the `holder` folder will watch on the
 
 Angular is using the webpack compiler instead of the modern esbuild. This is required since we need to build multiple file like the main and background file and right now it is not possible to pass a custom esbuild config to angular.
 
+To build the plugin for production, run `pnpm run build:extension`. The output will be in the `dist/browser-extension` folder like the start command, but the files are minified and optimized for production.
+
 ## Backend
 All endpoints are available via the `http://localhost:3000` address. A swagger endpoint is available at `http://localhost:3000/api` where you can authenticate with your keycloak user credentials. Don't forget to have an `.env` file in the folder to configure the application, it will not use the `.env` file in the root folder.