feat: Add comprehensive user authentication, listing management, and core UI components.

bizmatch-server/package.json

@@ -47,6 +47,7 @@
     "fs-extra": "^11.2.0",
     "groq-sdk": "^0.5.0",
     "handlebars": "^4.7.8",
+    "helmet": "^8.1.0",
     "nest-winston": "^1.9.4",
     "nestjs-cls": "^5.4.0",
     "nodemailer": "^7.0.12",

bizmatch-server/src/main.ts

@@ -1,6 +1,7 @@
 import { LoggerService } from '@nestjs/common';
 import { NestFactory } from '@nestjs/core';
 import express from 'express';
+import helmet from 'helmet';
 import { WINSTON_MODULE_NEST_PROVIDER } from 'nest-winston';
 import { AppModule } from './app.module';
 
@@ -22,6 +23,37 @@ async function bootstrap() {
     methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
     allowedHeaders: 'Content-Type, Accept, Authorization, x-hide-loading',
   });
+
+  // Security Headers with helmet
+  app.use(
+    helmet({
+      contentSecurityPolicy: {
+        directives: {
+          defaultSrc: ["'self'"],
+          scriptSrc: ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://fonts.googleapis.com"],
+          styleSrc: ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
+          imgSrc: ["'self'", "data:", "https:", "blob:"],
+          connectSrc: ["'self'", "https://api.bizmatch.net", "https://*.firebaseapp.com", "https://*.googleapis.com"],
+          fontSrc: ["'self'", "https://fonts.gstatic.com", "data:"],
+          objectSrc: ["'none'"],
+          mediaSrc: ["'self'"],
+          frameSrc: ["'self'"],
+        },
+      },
+      crossOriginEmbedderPolicy: false, // Disable for now to avoid breaking existing functionality
+      hsts: {
+        maxAge: 31536000,
+        includeSubDomains: true,
+        preload: true,
+      },
+      frameguard: {
+        action: 'sameorigin', // Allow same-origin framing
+      },
+      crossOriginOpenerPolicy: { policy: 'same-origin-allow-popups' }, // Allow popups for OAuth
+      crossOriginResourcePolicy: { policy: 'cross-origin' }, // Allow cross-origin resources
+    }),
+  );
+
   await app.listen(process.env.PORT || 3001);
 }
 bootstrap();

bizmatch/angular.json

@@ -21,11 +21,6 @@
             "outputPath": "dist/bizmatch",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "server": "src/main.server.ts",
-            "prerender": false,
-            "ssr": {
-              "entry": "server.ts"
-            },
             "allowedCommonJsDependencies": [
               "quill-delta",
               "leaflet",
@@ -53,10 +48,7 @@
             ],
             "styles": [
               "src/styles.scss",
-              "src/styles/lazy-load.css",
+              "src/styles/lazy-load.css"
-              "node_modules/quill/dist/quill.snow.css",
-              "node_modules/leaflet/dist/leaflet.css",
-              "node_modules/ngx-sharebuttons/themes/default.scss"
             ]
           },
           "configurations": {
@@ -69,8 +61,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
+                  "maximumWarning": "10kb",
-                  "maximumError": "4kb"
+                  "maximumError": "30kb"
                 }
               ],
               "outputHashing": "all"
@@ -78,8 +70,7 @@
             "development": {
               "optimization": false,
               "extractLicenses": false,
-              "sourceMap": true,
+              "sourceMap": true
-              "ssr": false
             },
             "dev": {
               "fileReplacements": [

bizmatch/src/app/app.config.ts

@@ -7,10 +7,6 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@a
 import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
 import { getAuth, provideAuth } from '@angular/fire/auth';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { GALLERY_CONFIG, GalleryConfig } from 'ng-gallery';
-import { provideQuillConfig } from 'ngx-quill';
-import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
-import { shareIcons } from 'ngx-sharebuttons/icons';
 import { environment } from '../environments/environment';
 import { routes } from './app.routes';
 import { AuthInterceptor } from './interceptors/auth.interceptor';
@@ -48,13 +44,6 @@ export const appConfig: ApplicationConfig = {
       provide: 'TIMEOUT_DURATION',
       useValue: 5000, // Standard-Timeout von 5 Sekunden
     },
-    {
-      provide: GALLERY_CONFIG,
-      useValue: {
-        autoHeight: true,
-        imageSize: 'cover',
-      } as GalleryConfig,
-    },
     { provide: ErrorHandler, useClass: GlobalErrorHandler }, // Registriere den globalen ErrorHandler
     {
       provide: IMAGE_CONFIG,
@@ -62,13 +51,6 @@ export const appConfig: ApplicationConfig = {
         disableImageSizeWarning: true,
       },
     },
-    provideShareButtonsOptions(
-      shareIcons(),
-      withConfig({
-        debug: true,
-        sharerMethod: SharerMethods.Anchor,
-      }),
-    ),
     provideRouter(
       routes,
       withEnabledBlockingInitialNavigation(),
@@ -79,18 +61,6 @@ export const appConfig: ApplicationConfig = {
     ),
     ...(environment.production ? [POSTHOG_INIT_PROVIDER] : []),
     provideAnimations(),
-    provideQuillConfig({
-      modules: {
-        syntax: true,
-        toolbar: [
-          ['bold', 'italic', 'underline'], // Einige Standardoptionen
-          [{ header: [1, 2, 3, false] }], // Benutzerdefinierte Header
-          [{ list: 'ordered' }, { list: 'bullet' }],
-          [{ color: [] }], // Dropdown mit Standardfarben
-          ['clean'], // Entfernt Formatierungen
-        ],
-      },
-    }),
     provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
     provideAuth(() => getAuth()),
   ],

bizmatch/src/app/components/confirmation/confirmation.component.ts

@@ -13,7 +13,7 @@ import { ConfirmationService } from './confirmation.service';
           <button
             (click)="confirmationService.reject()"
             type="button"
-            class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+            class="absolute top-3 end-2.5 text-gray-600 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
           >
             <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
@@ -21,11 +21,11 @@ import { ConfirmationService } from './confirmation.service';
             <span class="sr-only">Close modal</span>
           </button>
           <div class="p-4 md:p-5 text-center">
-            <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+            <svg class="mx-auto mb-4 text-gray-600 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
               <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
             </svg>
             @let confirmation = (confirmationService.confirmation$ | async);
-            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ confirmation?.message }}</h3>
+            <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-600">{{ confirmation?.message }}</h3>
             @if(confirmation?.buttons==='both'){
             <button
               (click)="confirmationService.accept()"
@@ -37,7 +37,7 @@ import { ConfirmationService } from './confirmation.service';
             <button
               (click)="confirmationService.reject()"
               type="button"
-              class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+              class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-600 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
             >
               No, cancel
             </button>

bizmatch/src/app/components/email/email.component.html

@@ -9,7 +9,7 @@
         <button
           (click)="eMailService.reject()"
           type="button"
-          class="end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          class="end-2.5 text-gray-600 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
         >
           <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />

bizmatch/src/app/components/footer/footer.component.html

@@ -3,7 +3,7 @@
     <div class="flex flex-col lg:flex-row items-center mb-4 lg:mb-0">
       <!-- <img src="/assets/images/header-logo.png" alt="BizMatch Logo" class="h-8 mb-2 lg:mb-0 lg:mr-4" /> -->
       <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
-        <img src="/assets/images/header-logo.png" class="h-8 mb-2 lg:mb-0 lg:mr-4" alt="BizMatch Logo" />
+        <img src="/assets/images/header-logo.png" class="h-8 mb-2 lg:mb-0 lg:mr-4" alt="BizMatch Logo" width="120" height="32" />
       </a>
       <p class="text-sm text-neutral-600 text-center lg:text-left">© {{ currentYear }} Bizmatch All rights reserved.</p>
     </div>

bizmatch/src/app/components/header/header.component.html

@@ -2,7 +2,7 @@
   <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
     <a routerLink="/home" class="flex items-center space-x-3 rtl:space-x-reverse">
       <img src="/assets/images/header-logo.png" class="h-10 w-auto"
-        alt="BizMatch - Business Marketplace for Buying and Selling Businesses" />
+        alt="BizMatch - Business Marketplace for Buying and Selling Businesses" width="150" height="40" />
     </a>
     <div class="flex items-center md:order-2 space-x-3 rtl:space-x-reverse">
       <!-- Filter button -->
@@ -192,7 +192,7 @@
             class="inline-flex items-center py-2 px-3 rounded hover:bg-neutral-100 md:hover:bg-transparent md:hover:text-primary-600 md:p-0 dark:text-white md:dark:hover:text-primary-500 dark:hover:bg-neutral-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-neutral-700"
             (click)="closeMenusAndSetCriteria('brokerListings')">
             <img src="/assets/images/icon_professionals.png" alt="Professionals"
-              class="w-5 h-5 mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" />
+              class="w-5 h-5 mr-2 object-contain bg-transparent" style="mix-blend-mode: darken;" width="20" height="20" />
             <span>Professionals</span>
           </a>
         </li>

bizmatch/src/app/components/header/header.component.ts

@@ -2,7 +2,7 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
 import { Component, HostListener, OnDestroy, OnInit, AfterViewInit, PLATFORM_ID, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
-import { faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../utils/fontawesome-icons';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Collapse, Dropdown, initFlowbite } from 'flowbite';
 import { filter, Observable, Subject, takeUntil } from 'rxjs';
@@ -35,7 +35,7 @@ export class HeaderComponent implements OnInit, OnDestroy, AfterViewInit {
   keycloakUser: KeycloakUser;
   user: User;
   activeItem;
-  faUserGear = faUserGear;
+  faUserGear = APP_ICONS.faUserGear;
   profileUrl: string;
   env = environment;
   private filterDropdown: Dropdown | null = null;

bizmatch/src/app/components/login-register/login-register.component.html

@@ -35,7 +35,7 @@
           placeholder="Please enter E-Mail Address"
           class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
         />
-        <fa-icon [icon]="envelope" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
+        <fa-icon [icon]="envelope" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
       </div>
     </div>
 
@@ -50,7 +50,7 @@
           placeholder="Please enter Password"
           class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
         />
-        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
+        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
       </div>
     </div>
 
@@ -65,7 +65,7 @@
           placeholder="Repeat Password"
           class="w-full px-3 py-2 pl-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
         />
-        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></fa-icon>
+        <fa-icon [icon]="lock" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600"></fa-icon>
       </div>
     </div>
 

bizmatch/src/app/components/login-register/login-register.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { faArrowRight, faEnvelope, faLock, faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../utils/fontawesome-icons';
 import { AuthService } from '../../services/auth.service';
 import { LoadingService } from '../../services/loading.service';
 @Component({
@@ -18,10 +18,10 @@ export class LoginRegisterComponent {
   confirmPassword: string = '';
   isLoginMode: boolean = true; // true: Login, false: Registration
   errorMessage: string = '';
-  envelope = faEnvelope;
+  envelope = APP_ICONS.faEnvelope;
-  lock = faLock;
+  lock = APP_ICONS.faLock;
-  arrowRight = faArrowRight;
+  arrowRight = APP_ICONS.faArrowRight;
-  userplus = faUserPlus;
+  userplus = APP_ICONS.faUserPlus;
   constructor(private authService: AuthService, private route: ActivatedRoute, private router: Router, private loadingService: LoadingService) {}
 
   ngOnInit(): void {

bizmatch/src/app/components/search-modal/search-modal-broker.component.html

@@ -48,7 +48,7 @@
           <div class="space-y-4">
             <div>
               <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
-              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+              <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
             </div>
             <div>
               <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
@@ -172,7 +172,7 @@
   <div class="space-y-4">
     <div>
       <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
-      <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
     </div>
     <div>
       <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>

bizmatch/src/app/components/search-modal/search-modal-commercial.component.html

@@ -48,7 +48,7 @@
           <div class="space-y-4">
             <div>
               <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
-              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+              <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
             </div>
             <div>
               <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
@@ -168,7 +168,7 @@
   <div class="space-y-4">
     <div>
       <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
-      <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
     </div>
     <div>
       <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>

bizmatch/src/app/components/search-modal/search-modal.component.html

@@ -61,8 +61,8 @@
         <div class="grid grid-cols-1 gap-6">
           <div class="space-y-4">
             <div>
-              <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
+              <label for="state-select" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
-              <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+              <ng-select id="state-select" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state" aria-label="Location - State"></ng-select>
             </div>
             <div>
               <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>
@@ -266,7 +266,7 @@
   <div class="space-y-4">
     <div>
       <label for="state" class="block mb-2 text-sm font-medium text-neutral-900">Location - State</label>
-      <ng-select class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
+      <ng-select id="state-select" aria-label="Location - State" class="custom" [items]="selectOptions?.states" bindLabel="name" bindValue="value" [ngModel]="criteria.state" (ngModelChange)="setState($event)" name="state"></ng-select>
     </div>
     <div>
       <app-validated-city label="Location - City" name="city" [ngModel]="criteria.city" (ngModelChange)="setCity($event)" labelClasses="text-neutral-900 font-medium" [state]="criteria.state"></app-validated-city>

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts

@@ -31,13 +31,27 @@ import dayjs from 'dayjs';
 import { AuthService } from '../../../services/auth.service';
 import { BaseDetailsComponent } from '../base-details.component';
 import { ShareButton } from 'ngx-sharebuttons/button';
+import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
+import { shareIcons } from 'ngx-sharebuttons/icons';
 @Component({
   selector: 'app-details-business-listing',
   standalone: true,
   imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, LeafletModule, BreadcrumbsComponent, ShareButton, NgOptimizedImage],
-  providers: [],
+  providers: [
+    provideShareButtonsOptions(
+      shareIcons(),
+      withConfig({
+        debug: false,
+        sharerMethod: SharerMethods.Anchor,
+      }),
+    ),
+  ],
   templateUrl: './details-business-listing.component.html',
-  styleUrl: '../details.scss',
+  styleUrls: [
+    '../details.scss',
+    '../../../../../node_modules/leaflet/dist/leaflet.css',
+    '../../../../../node_modules/ngx-sharebuttons/themes/default.scss'
+  ],
 })
 export class DetailsBusinessListingComponent extends BaseDetailsComponent {
   // listings: Array<BusinessListing>;

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts

@@ -3,9 +3,9 @@ import { NgOptimizedImage } from '@angular/common';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LeafletModule } from '@bluehalo/ngx-leaflet';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
 import dayjs from 'dayjs';
-import { GalleryModule, ImageItem } from 'ng-gallery';
+import { GALLERY_CONFIG, GalleryConfig, GalleryModule, ImageItem } from 'ng-gallery';
 import { lastValueFrom } from 'rxjs';
 import { CommercialPropertyListing, EventTypeEnum, ShareByEMail, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -30,14 +30,35 @@ import { createMailInfo, map2User } from '../../../utils/utils';
 import { BaseDetailsComponent } from '../base-details.component';
 import { BreadcrumbItem, BreadcrumbsComponent } from '../../../components/breadcrumbs/breadcrumbs.component';
 import { ShareButton } from 'ngx-sharebuttons/button';
+import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
+import { shareIcons } from 'ngx-sharebuttons/icons';
 
 @Component({
   selector: 'app-details-commercial-property-listing',
   standalone: true,
   imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent, ValidatedNgSelectComponent, GalleryModule, LeafletModule, BreadcrumbsComponent, ShareButton, NgOptimizedImage],
-  providers: [],
+  providers: [
+    provideShareButtonsOptions(
+      shareIcons(),
+      withConfig({
+        debug: false,
+        sharerMethod: SharerMethods.Anchor,
+      }),
+    ),
+    {
+      provide: GALLERY_CONFIG,
+      useValue: {
+        autoHeight: true,
+        imageSize: 'cover',
+      } as GalleryConfig,
+    },
+  ],
   templateUrl: './details-commercial-property-listing.component.html',
-  styleUrl: '../details.scss',
+  styleUrls: [
+    '../details.scss',
+    '../../../../../node_modules/leaflet/dist/leaflet.css',
+    '../../../../../node_modules/ngx-sharebuttons/themes/default.scss'
+  ],
 })
 export class DetailsCommercialPropertyListingComponent extends BaseDetailsComponent {
   responsiveOptions = [
@@ -69,7 +90,7 @@ export class DetailsCommercialPropertyListingComponent extends BaseDetailsCompon
   ts = new Date().getTime();
   env = environment;
   errorResponse: ErrorResponse;
-  faTimes = faTimes;
+  faTimes = APP_ICONS.faTimes;
   propertyDetails = [];
   images: Array<ImageItem> = [];
   relatedListings: CommercialPropertyListing[] = [];

bizmatch/src/app/pages/details/details-user/details-user.component.ts

@@ -19,13 +19,27 @@ import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
 import { formatPhoneNumber, map2User } from '../../../utils/utils';
 import { ShareButton } from 'ngx-sharebuttons/button';
+import { provideShareButtonsOptions, SharerMethods, withConfig } from 'ngx-sharebuttons';
+import { shareIcons } from 'ngx-sharebuttons/icons';
 
 @Component({
   selector: 'app-details-user',
   standalone: true,
   imports: [SharedModule, BreadcrumbsComponent, NgOptimizedImage, ShareButton],
+  providers: [
+    provideShareButtonsOptions(
+      shareIcons(),
+      withConfig({
+        debug: false,
+        sharerMethod: SharerMethods.Anchor,
+      }),
+    ),
+  ],
   templateUrl: './details-user.component.html',
-  styleUrl: '../details.scss',
+  styleUrls: [
+    '../details.scss',
+    '../../../../../node_modules/ngx-sharebuttons/themes/default.scss'
+  ],
 })
 export class DetailsUserComponent {
   private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -1,9 +1,9 @@
 import { DatePipe, TitleCasePipe } from '@angular/common';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { QuillModule } from 'ngx-quill';
+import { QuillModule, provideQuillConfig } from 'ngx-quill';
 import { lastValueFrom } from 'rxjs';
 import { User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { AutoCompleteCompleteEvent, Invoice, UploadParams, ValidationMessage, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
@@ -45,9 +45,27 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
     ValidatedCountyComponent,
     ValidatedLocationComponent,
   ],
-  providers: [TitleCasePipe, DatePipe],
+  providers: [
+    TitleCasePipe,
+    DatePipe,
+    provideQuillConfig({
+      modules: {
+        syntax: true,
+        toolbar: [
+          ['bold', 'italic', 'underline'],
+          [{ header: [1, 2, 3, false] }],
+          [{ list: 'ordered' }, { list: 'bullet' }],
+          [{ color: [] }],
+          ['clean'],
+        ],
+      },
+    }) as any,
+  ],
   templateUrl: './account.component.html',
-  styleUrl: './account.component.scss',
+  styleUrls: [
+    './account.component.scss',
+    '../../../../../node_modules/quill/dist/quill.snow.css'
+  ],
 })
 export class AccountComponent {
   id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
@@ -58,7 +76,7 @@ export class AccountComponent {
   environment = environment;
   editorModules = TOOLBAR_OPTIONS;
   env = environment;
-  faTrash = faTrash;
+  faTrash = APP_ICONS.faTrash;
   quillModules = {
     toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
   };

bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts

@@ -6,11 +6,12 @@ import { SelectOptionsService } from '../../../services/select-options.service';
 import { map2User, routeListingWithState } from '../../../utils/utils';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
 import { QuillModule } from 'ngx-quill';
 
 import { NgSelectModule } from '@ng-select/ng-select';
 import { NgxCurrencyDirective } from 'ngx-currency';
+import { provideQuillConfig } from 'ngx-quill';
 import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { AutoCompleteCompleteEvent, ImageProperty, createDefaultBusinessListing, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 
@@ -47,9 +48,25 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
     ValidatedTextareaComponent,
     ValidatedLocationComponent,
   ],
-  providers: [],
+  providers: [
+    provideQuillConfig({
+      modules: {
+        syntax: true,
+        toolbar: [
+          ['bold', 'italic', 'underline'],
+          [{ header: [1, 2, 3, false] }],
+          [{ list: 'ordered' }, { list: 'bullet' }],
+          [{ color: [] }],
+          ['clean'],
+        ],
+      },
+    }) as any,
+  ],
   templateUrl: './edit-business-listing.component.html',
-  styleUrl: './edit-business-listing.component.scss',
+  styleUrls: [
+    './edit-business-listing.component.scss',
+    '../../../../../node_modules/quill/dist/quill.snow.css'
+  ],
 })
 export class EditBusinessListingComponent {
   listingsCategory = 'business';
@@ -64,7 +81,7 @@ export class EditBusinessListingComponent {
   config = { aspectRatio: 16 / 9 };
   editorModules = TOOLBAR_OPTIONS;
   draggedImage: ImageProperty;
-  faTrash = faTrash;
+  faTrash = APP_ICONS.faTrash;
   data: CommercialPropertyListing;
   typesOfBusiness = [];
   quillModules = {

bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html

@@ -58,7 +58,7 @@
           (click)="uploadPropertyPicture()"
           class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
         >
-          <svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+          <svg class="mr-2 h-5 w-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
           </svg>
           Upload

bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts

@@ -7,11 +7,11 @@ import { map2User, routeListingWithState } from '../../../utils/utils';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ViewportRuler } from '@angular/cdk/scrolling';
-import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { APP_ICONS } from '../../../utils/fontawesome-icons';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { NgxCurrencyDirective } from 'ngx-currency';
 import { ImageCropperComponent } from 'ngx-image-cropper';
-import { QuillModule } from 'ngx-quill';
+import { QuillModule, provideQuillConfig } from 'ngx-quill';
 import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { AutoCompleteCompleteEvent, ImageProperty, UploadParams, createDefaultCommercialPropertyListing, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 
@@ -53,9 +53,25 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
     ValidatedLocationComponent,
     ImageCropAndUploadComponent,
   ],
-  providers: [],
+  providers: [
+    provideQuillConfig({
+      modules: {
+        syntax: true,
+        toolbar: [
+          ['bold', 'italic', 'underline'],
+          [{ header: [1, 2, 3, false] }],
+          [{ list: 'ordered' }, { list: 'bullet' }],
+          [{ color: [] }],
+          ['clean'],
+        ],
+      },
+    }) as any,
+  ],
   templateUrl: './edit-commercial-property-listing.component.html',
-  styleUrl: './edit-commercial-property-listing.component.scss',
+  styleUrls: [
+    './edit-commercial-property-listing.component.scss',
+    '../../../../../node_modules/quill/dist/quill.snow.css'
+  ],
 })
 export class EditCommercialPropertyListingComponent {
   @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
@@ -91,7 +107,7 @@ export class EditCommercialPropertyListingComponent {
   editorModules = TOOLBAR_OPTIONS;
 
   draggedImage: ImageProperty;
-  faTrash = faTrash;
+  faTrash = APP_ICONS.faTrash;
   suggestions: string[] | undefined;
   data: BusinessListing;
   userId: string;

bizmatch/src/app/utils/fontawesome-icons.ts

@@ -0,0 +1,19 @@
+import {
+  faArrowRight,
+  faEnvelope,
+  faLock,
+  faTimes,
+  faTrash,
+  faUserGear,
+  faUserPlus
+} from '@fortawesome/free-solid-svg-icons';
+
+export const APP_ICONS = {
+  faArrowRight,
+  faEnvelope,
+  faLock,
+  faTimes,
+  faTrash,
+  faUserGear,
+  faUserPlus,
+};

bizmatch/src/app/utils/logger.ts

@@ -0,0 +1,12 @@
+import { environment } from '../../environments/environment';
+
+// Development: use browser-bunyan for rich logging
+// Production: use lightweight console wrapper to avoid loading 50KB+ library
+export const createLogger = environment.production
+  ? (name: string) => ({
+      info: (...args: any[]) => console.log(`[${name}]`, ...args),
+      warn: (...args: any[]) => console.warn(`[${name}]`, ...args),
+      error: (...args: any[]) => console.error(`[${name}]`, ...args),
+      debug: () => {}, // no-op in production
+    })
+  : require('browser-bunyan').createLogger;

bizmatch/src/app/utils/utils.ts

@@ -1,5 +1,5 @@
 import { Router } from '@angular/router';
-import { ConsoleFormattedStream, INFO, createLogger as _createLogger, stdSerializers } from 'browser-bunyan';
+import { createLogger as _createLogger } from './logger';
 import { jwtDecode } from 'jwt-decode';
 import onChange from 'on-change';
 import { SortByOptions, User } from '../../../../bizmatch-server/src/models/db.model';
@@ -141,14 +141,8 @@ export function createMailInfo(user?: User): MailInfo {
     listing: null,
   };
 }
-export function createLogger(name: string, level: number = INFO, options: any = {}) {
+export function createLogger(name: string, level?: number, options?: any) {
-  return _createLogger({
+  return _createLogger(name);
-    name,
-    streams: [{ level, stream: new ConsoleFormattedStream() }],
-    serializers: stdSerializers,
-    src: true,
-    ...options,
-  });
 }
 export function formatPhoneNumber(phone: string): string {
   const cleaned = ('' + phone).replace(/\D/g, '');

bizmatch/src/build.ts

@@ -1,6 +1,6 @@
 // Build information, automatically generated by `the_build_script` :zwinkern:
 const build = {
-    timestamp: "GER: 04.02.2026 15:43 | TX: 02/04/2026 8:43 AM"
+    timestamp: "GER: 04.02.2026 21:20 | TX: 02/04/2026 2:20 PM"
 };
 
 export default build;

bizmatch/src/styles.scss

@@ -7,7 +7,6 @@
 // External CSS imports - these URL imports don't trigger deprecation warnings
 // Using css2 API with specific weights for better performance
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
 
 // Local CSS files loaded as CSS (not SCSS) to avoid @import deprecation
 // Note: These are loaded via angular.json styles array is the preferred approach,
@@ -122,7 +121,7 @@ p-menubarsub ul {
 
 input::placeholder,
 textarea::placeholder {
-  color: #999 !important;
+  color: #757575 !important;  /* 4.54:1 contrast - WCAG AA compliant */
 }
 
 /* Fix für Marker-Icons in Leaflet */

bizmatch/tsconfig.app.json

@@ -8,9 +8,7 @@
     ]
   },
   "files": [
-    "src/main.ts",
+    "src/main.ts"
-    "src/main.server.ts",
-    "server.ts"
   ],
   "include": [
     "src/**/*.d.ts"