account changes

.gitignore

@@ -48,6 +48,9 @@ public
 .env.test.local
 .env.production.local
 .env.local
+.env.prod
+.env.dev
+.env.test
 
 # temp directory
 .temp
@@ -62,7 +65,6 @@ pids
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
-*.js
 *.map
 package-lock.json
 

bizmatch-server/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint/eslint-plugin'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: ['.eslintrc.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};

bizmatch-server/.gitignore

@@ -56,3 +56,4 @@ pids
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
 pictures
+pictures_base

bizmatch-server/.vscode/launch.json

@@ -6,17 +6,15 @@
       "request": "launch",
       "name": "Debug Nest Framework",
       "runtimeExecutable": "npm",
-      "runtimeArgs": [
-        "run",
-        "start:debug",
-        "--",
-        "--inspect-brk"
-      ],
+      "runtimeArgs": ["run", "start:debug", "--", "--inspect-brk"],
       "autoAttachChildProcesses": true,
       "restart": true,
       "sourceMaps": true,
       "stopOnEntry": false,
       "console": "integratedTerminal",
+      "env": {
+        "HOST_NAME": "localhost"
+      }
     },
     {
       "type": "node",
@@ -24,9 +22,7 @@
       "name": "Debug Current TS File",
       "program": "${workspaceFolder}/dist/src/drizzle/${fileBasenameNoExtension}.js",
       "preLaunchTask": "tsc: build - tsconfig.json",
-      "outFiles": [
-        "${workspaceFolder}/out/**/*.js"
-      ],
+      "outFiles": ["${workspaceFolder}/out/**/*.js"],
       "sourceMaps": true,
       "smartStep": true,
       "internalConsoleOptions": "openOnSessionStart"
@@ -35,31 +31,21 @@
       "type": "node",
       "request": "launch",
       "name": "generateDefs",
-      "skipFiles": [
-          "<node_internals>/**"
-      ],
+      "skipFiles": ["<node_internals>/**"],
       "program": "${workspaceFolder}/dist/src/drizzle/generateDefs.js",
-      "outFiles": [
-          "${workspaceFolder}/dist/src/drizzle/**/*.js"
-      ],
+      "outFiles": ["${workspaceFolder}/dist/src/drizzle/**/*.js"],
       "sourceMaps": true,
-      "smartStep": true,
-      
-  },
-  {
-    "type": "node",
-    "request": "launch",
-    "name": "generateTypes",
-    "skipFiles": [
-        "<node_internals>/**"
-    ],
-    "program": "${workspaceFolder}/dist/src/drizzle/generateTypes.js",
-    "outFiles": [
-        "${workspaceFolder}/dist/src/drizzle/**/*.js"
-    ],
-    "sourceMaps": true,
-    "smartStep": true,
-    
-},
+      "smartStep": true
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "generateTypes",
+      "skipFiles": ["<node_internals>/**"],
+      "program": "${workspaceFolder}/dist/src/drizzle/generateTypes.js",
+      "outFiles": ["${workspaceFolder}/dist/src/drizzle/**/*.js"],
+      "sourceMaps": true,
+      "smartStep": true
+    }
   ]
 }

bizmatch-server/package.json

@@ -9,10 +9,10 @@
   "scripts": {
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
-    "start": "nest start",
-    "start:dev": "nest start --watch",
+    "start": "HOST_NAME=localhost nest start",
+    "start:dev": "HOST_NAME=dev.bizmatch.net nest start --watch",
     "start:debug": "nest start --debug --watch",
-    "start:prod": "node dist/main",
+    "start:prod": "HOST_NAME=www.bizmatch.net node dist/main",
     "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
     "test": "jest",
     "test:watch": "jest --watch",
@@ -37,7 +37,9 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "drizzle-orm": "^0.30.8",
+    "fs-extra": "^11.2.0",
     "handlebars": "^4.7.8",
+    "jwks-rsa": "^3.1.0",
     "ky": "^1.2.0",
     "nest-winston": "^1.9.4",
     "nodemailer": "^6.9.10",

bizmatch-server/src/app.controller.ts

@@ -1,12 +1,19 @@
-import { Controller, Get } from '@nestjs/common';
+import { Controller, Get, Request, UseGuards } from '@nestjs/common';
 import { AppService } from './app.service.js';
+import { AuthService } from './auth/auth.service.js';
+import { JwtAuthGuard } from './jwt-auth/jwt-auth.guard.js';
 
 @Controller()
 export class AppController {
-  constructor(private readonly appService: AppService) {}
+  constructor(
+    private readonly appService: AppService,
+    private authService: AuthService,
+  ) {}
 
+  @UseGuards(JwtAuthGuard)
   @Get()
-  getHello(): string {
-    return this.appService.getHello();
+  getHello(@Request() req): string {
+    return req.user;
+    //return 'dfgdf';
   }
 }

bizmatch-server/src/app.module.ts

@@ -1,5 +1,8 @@
 import { MiddlewareConsumer, Module } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
+import { PassportModule } from '@nestjs/passport';
+import * as dotenv from 'dotenv';
+import fs from 'fs-extra';
 import { WinstonModule, utilities as nestWinstonModuleUtilities } from 'nest-winston';
 import path from 'path';
 import { fileURLToPath } from 'url';
@@ -14,12 +17,37 @@ import { ListingsModule } from './listings/listings.module.js';
 import { MailModule } from './mail/mail.module.js';
 import { RequestDurationMiddleware } from './request-duration/request-duration.middleware.js';
 import { SelectOptionsModule } from './select-options/select-options.module.js';
-import { SubscriptionsController } from './subscriptions/subscriptions.controller.js';
 import { UserModule } from './user/user.module.js';
-
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+function loadEnvFiles() {
+  // Load the .env file
+  dotenv.config();
+  console.log('Loaded .env file');
+
+  // Determine which additional env file to load
+  let envFilePath = '';
+  const host = process.env.HOST_NAME || '';
+
+  if (host.includes('localhost')) {
+    envFilePath = '.env.local';
+  } else if (host.includes('dev.bizmatch.net')) {
+    envFilePath = '.env.dev';
+  } else if (host.includes('www.bizmatch.net') || host.includes('bizmatch.net')) {
+    envFilePath = '.env.prod';
+  }
+
+  // Load the additional env file if it exists
+  if (fs.existsSync(envFilePath)) {
+    dotenv.config({ path: envFilePath });
+    console.log(`Loaded ${envFilePath} file`);
+  } else {
+    console.log(`No additional .env file found for HOST_NAME: ${host}`);
+  }
+}
+
+loadEnvFiles();
 @Module({
   imports: [
     ConfigModule.forRoot({ isGlobal: true }),
@@ -46,8 +74,9 @@ const __dirname = path.dirname(__filename);
     ListingsModule,
     SelectOptionsModule,
     ImageModule,
+    PassportModule,
   ],
-  controllers: [AppController, SubscriptionsController],
+  controllers: [AppController],
   providers: [AppService, FileService],
 })
 export class AppModule {

bizmatch-server/src/auth/auth.module.ts

@@ -1,17 +1,16 @@
 import { Module } from '@nestjs/common';
-import { MailerModule } from '@nestjs-modules/mailer';
-import path, { join } from 'path';
-import { HandlebarsAdapter } from '@nestjs-modules/mailer/dist/adapters/handlebars.adapter.js';
+import { PassportModule } from '@nestjs/passport';
+import path from 'path';
 import { fileURLToPath } from 'url';
-import { AuthService } from './auth.service.js';
+import { JwtStrategy } from '../jwt.strategy.js';
 import { AuthController } from './auth.controller.js';
+import { AuthService } from './auth.service.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 @Module({
-  imports: [
-  ],
-  providers: [AuthService],
+  imports: [PassportModule],
+  providers: [AuthService, JwtStrategy],
   controllers: [AuthController],
-  exports:[AuthService]
+  exports: [AuthService],
 })
 export class AuthModule {}

bizmatch-server/src/drizzle/import.ts

@@ -1,11 +1,13 @@
 import 'dotenv/config';
 import { drizzle } from 'drizzle-orm/node-postgres';
 import { existsSync, readFileSync, readdirSync, statSync, unlinkSync } from 'fs';
+import fs from 'fs-extra';
 import { join } from 'path';
 import pkg from 'pg';
 import { rimraf } from 'rimraf';
 import sharp from 'sharp';
-import { BusinessListing, CommercialPropertyListing, User } from 'src/models/db.model.js';
+import { BusinessListing, CommercialPropertyListing, User, UserData } from 'src/models/db.model.js';
+import { emailToDirName } from 'src/models/main.model.js';
 import * as schema from './schema.js';
 const { Pool } = pkg;
 
@@ -22,9 +24,9 @@ await db.delete(schema.users);
 //Broker
 let filePath = `./data/broker.json`;
 let data: string = readFileSync(filePath, 'utf8');
-const userData: User[] = JSON.parse(data); // Erwartet ein Array von Objekten
+const usersData: UserData[] = JSON.parse(data); // Erwartet ein Array von Objekten
 const generatedUserData = [];
-console.log(userData.length);
+console.log(usersData.length);
 let i = 0,
   male = 0,
   female = 0;
@@ -32,25 +34,52 @@ const targetPathProfile = `./pictures/profile`;
 deleteFilesOfDir(targetPathProfile);
 const targetPathLogo = `./pictures/logo`;
 deleteFilesOfDir(targetPathLogo);
-for (const user of userData) {
-  delete user.id;
-  user.licensedIn = user.licensedIn.map(l => `${l['name']}|${l['value']}`);
+const targetPathProperty = `./pictures/property`;
+deleteFilesOfDir(targetPathProperty);
+fs.ensureDirSync(`./pictures/logo`);
+fs.ensureDirSync(`./pictures/profile`);
+fs.ensureDirSync(`./pictures/property`);
+for (const userData of usersData) {
+  const user: User = { firstname: '', lastname: '', email: '' };
+  user.licensedIn = [];
+  userData.licensedIn.forEach(l => {
+    console.log(l['value'], l['name']);
+    user.licensedIn.push({ registerNo: l['value'], state: l['name'] });
+  });
+  user.areasServed = [];
+  user.areasServed = userData.areasServed.map(l => {
+    return { county: l.split(',')[0].trim(), state: l.split(',')[1].trim() };
+  });
   user.hasCompanyLogo = true;
   user.hasProfile = true;
-  const u = await db.insert(schema.users).values(user).returning({ insertedId: schema.users.id, gender: schema.users.gender });
-  generatedUserData.push(u[0].insertedId);
+  user.firstname = userData.firstname;
+  user.lastname = userData.lastname;
+  user.email = userData.email;
+  user.phoneNumber = userData.phoneNumber;
+  user.description = userData.description;
+  user.companyName = userData.companyName;
+  user.companyOverview = userData.companyOverview;
+  user.companyWebsite = userData.companyWebsite;
+  user.companyLocation = userData.companyLocation;
+  user.offeredServices = userData.offeredServices;
+  user.gender = userData.gender;
+  user.created = new Date();
+  user.updated = new Date();
+  const u = await db.insert(schema.users).values(user).returning({ insertedId: schema.users.id, gender: schema.users.gender, email: schema.users.email });
+  generatedUserData.push(u[0]);
   i++;
+
   if (u[0].gender === 'male') {
     male++;
-    const data = readFileSync(`./pictures/profile_base/Mann_${male}.jpg`);
-    await storeProfilePicture(data, u[0].insertedId);
+    const data = readFileSync(`./pictures_base/profile/Mann_${male}.jpg`);
+    await storeProfilePicture(data, emailToDirName(u[0].email));
   } else {
     female++;
-    const data = readFileSync(`./pictures/profile_base/Frau_${male}.jpg`);
-    await storeProfilePicture(data, u[0].insertedId);
+    const data = readFileSync(`./pictures_base/profile/Frau_${female}.jpg`);
+    await storeProfilePicture(data, emailToDirName(u[0].email));
   }
-  const data = readFileSync(`./pictures/logos_base/${i}.jpg`);
-  await storeCompanyLogo(data, u[0].insertedId);
+  const data = readFileSync(`./pictures_base/logo/${i}.jpg`);
+  await storeCompanyLogo(data, emailToDirName(u[0].email));
 }
 //Business Listings
 filePath = `./data/businesses.json`;
@@ -60,7 +89,10 @@ const businessJsonData = JSON.parse(data) as BusinessListing[]; // Erwartet ein
 for (const business of businessJsonData) {
   delete business.id;
   business.created = new Date(business.created);
-  business.userId = getRandomItem(generatedUserData);
+  business.updated = new Date(business.created);
+  const user = getRandomItem(generatedUserData);
+  business.userId = user.insertedId;
+  business.imageName = emailToDirName(user.email);
   await db.insert(schema.businesses).values(business);
 }
 //Corporate Listings
@@ -70,12 +102,21 @@ const commercialJsonData = JSON.parse(data) as CommercialPropertyListing[]; // E
 for (const commercial of commercialJsonData) {
   const id = commercial.id;
   delete commercial.id;
-
+  const user = getRandomItem(generatedUserData);
   commercial.imageOrder = getFilenames(id);
-  commercial.imagePath = id;
-  commercial.created = getRandomDateWithinLastYear();
-  commercial.userId = getRandomItem(generatedUserData);
-  await db.insert(schema.commercials).values(commercial);
+  commercial.imagePath = emailToDirName(user.email);
+  const insertionDate = getRandomDateWithinLastYear();
+  commercial.created = insertionDate;
+  commercial.updated = insertionDate;
+  commercial.userId = user.insertedId;
+  commercial.draft = false;
+  const result = await db.insert(schema.commercials).values(commercial).returning();
+  //fs.ensureDirSync(`./pictures/property/${result[0].imagePath}/${result[0].serialId}`);
+  try {
+    fs.copySync(`./pictures_base/property/${id}`, `./pictures/property/${result[0].imagePath}/${result[0].serialId}`);
+  } catch (err) {
+    console.log(`----- No pictures available for ${id} ------`);
+  }
 }
 
 //End
@@ -91,7 +132,7 @@ function getRandomItem<T>(arr: T[]): T {
 }
 function getFilenames(id: string): string[] {
   try {
-    let filePath = `./pictures/property/${id}`;
+    let filePath = `./pictures_base/property/${id}`;
     return readdirSync(filePath);
   } catch (e) {
     return null;
@@ -117,14 +158,14 @@ async function storeProfilePicture(buffer: Buffer, userId: string) {
   await sharp(output).toFile(`./pictures/profile/${userId}.avif`);
 }
 
-async function storeCompanyLogo(buffer: Buffer, userId: string) {
+async function storeCompanyLogo(buffer: Buffer, adjustedEmail: string) {
   let quality = 50;
   const output = await sharp(buffer)
     .resize({ width: 300 })
     .avif({ quality }) // Verwende AVIF
     //.webp({ quality }) // Verwende Webp
     .toBuffer();
-  await sharp(output).toFile(`./pictures/logo/${userId}.avif`); // Ersetze Dateierweiterung
+  await sharp(output).toFile(`./pictures/logo/${adjustedEmail}.avif`); // Ersetze Dateierweiterung
   // await fs.outputFile(`./pictures/logo/${userId}`, file.buffer);
 }
 

bizmatch-server/src/drizzle/migrations/0000_burly_bruce_banner.sql

@@ -1,3 +1,9 @@
+DO $$ BEGIN
+ CREATE TYPE "gender" AS ENUM('male', 'female');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
 CREATE TABLE IF NOT EXISTS "businesses" (
 	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
 	"userId" uuid,
@@ -22,6 +28,7 @@ CREATE TABLE IF NOT EXISTS "businesses" (
 	"reasonForSale" varchar(255),
 	"brokerLicencing" varchar(255),
 	"internals" text,
+	"imagePath" varchar(200),
 	"created" timestamp,
 	"updated" timestamp,
 	"visits" integer,
@@ -30,6 +37,7 @@ CREATE TABLE IF NOT EXISTS "businesses" (
 --> statement-breakpoint
 CREATE TABLE IF NOT EXISTS "commercials" (
 	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"serial_id" serial NOT NULL,
 	"userId" uuid,
 	"type" integer,
 	"title" varchar(255),
@@ -38,6 +46,7 @@ CREATE TABLE IF NOT EXISTS "commercials" (
 	"state" char(2),
 	"price" double precision,
 	"favoritesForUser" varchar(30)[],
+	"listingsCategory" varchar(255),
 	"hideImage" boolean,
 	"draft" boolean,
 	"zipCode" integer,
@@ -45,8 +54,8 @@ CREATE TABLE IF NOT EXISTS "commercials" (
 	"email" varchar(255),
 	"website" varchar(255),
 	"phoneNumber" varchar(255),
-	"imageOrder" varchar(30)[],
-	"imagePath" varchar(50),
+	"imageOrder" varchar(200)[],
+	"imagePath" varchar(200),
 	"created" timestamp,
 	"updated" timestamp,
 	"visits" integer,
@@ -65,10 +74,13 @@ CREATE TABLE IF NOT EXISTS "users" (
 	"companyWebsite" varchar(255),
 	"companyLocation" varchar(255),
 	"offeredServices" text,
-	"areasServed" varchar(100)[],
+	"areasServed" jsonb,
 	"hasProfile" boolean,
 	"hasCompanyLogo" boolean,
-	"licensedIn" varchar(50)[]
+	"licensedIn" jsonb,
+	"gender" "gender",
+	"created" timestamp,
+	"updated" timestamp
 );
 --> statement-breakpoint
 DO $$ BEGIN

bizmatch-server/src/drizzle/migrations/0001_rapid_daimon_hellstrom.sql

@@ -1 +0,0 @@
-ALTER TABLE "commercials" ALTER COLUMN "imageOrder" SET DATA TYPE varchar(200)[];

bizmatch-server/src/drizzle/migrations/0001_wet_mephistopheles.sql

@@ -0,0 +1,7 @@
+DO $$ BEGIN
+ CREATE TYPE "customerType" AS ENUM('buyer', 'broker', 'professional');
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+ALTER TABLE "users" ADD COLUMN "customerType" "customerType";

bizmatch-server/src/drizzle/migrations/0002_black_zaladane.sql

@@ -1,7 +0,0 @@
-DO $$ BEGIN
- CREATE TYPE "gender" AS ENUM('male', 'female');
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;
---> statement-breakpoint
-ALTER TABLE "users" ADD COLUMN "gender" "gender";

bizmatch-server/src/drizzle/migrations/0003_tough_hobgoblin.sql

@@ -1 +0,0 @@
-ALTER TABLE "commercials" ADD COLUMN "listingsCategory" varchar(255);

bizmatch-server/src/drizzle/migrations/meta/0000_snapshot.json

@@ -1,5 +1,5 @@
 {
-  "id": "f6d421f9-2394-4a1c-9268-9e46285f0a41",
+  "id": "fc58c59b-ac5c-406e-8fdb-b05de40aed17",
   "prevId": "00000000-0000-0000-0000-000000000000",
   "version": "5",
   "dialect": "pg",
@@ -147,6 +147,12 @@
           "primaryKey": false,
           "notNull": false
         },
+        "imagePath": {
+          "name": "imagePath",
+          "type": "varchar(200)",
+          "primaryKey": false,
+          "notNull": false
+        },
         "created": {
           "name": "created",
           "type": "timestamp",
@@ -202,6 +208,12 @@
           "notNull": true,
           "default": "gen_random_uuid()"
         },
+        "serial_id": {
+          "name": "serial_id",
+          "type": "serial",
+          "primaryKey": false,
+          "notNull": true
+        },
         "userId": {
           "name": "userId",
           "type": "uuid",
@@ -250,6 +262,12 @@
           "primaryKey": false,
           "notNull": false
         },
+        "listingsCategory": {
+          "name": "listingsCategory",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
         "hideImage": {
           "name": "hideImage",
           "type": "boolean",
@@ -294,13 +312,13 @@
         },
         "imageOrder": {
           "name": "imageOrder",
-          "type": "varchar(30)[]",
+          "type": "varchar(200)[]",
           "primaryKey": false,
           "notNull": false
         },
         "imagePath": {
           "name": "imagePath",
-          "type": "varchar(50)",
+          "type": "varchar(200)",
           "primaryKey": false,
           "notNull": false
         },
@@ -421,7 +439,7 @@
         },
         "areasServed": {
           "name": "areasServed",
-          "type": "varchar(100)[]",
+          "type": "jsonb",
           "primaryKey": false,
           "notNull": false
         },
@@ -439,7 +457,25 @@
         },
         "licensedIn": {
           "name": "licensedIn",
-          "type": "varchar(50)[]",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "gender": {
+          "name": "gender",
+          "type": "gender",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created": {
+          "name": "created",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updated": {
+          "name": "updated",
+          "type": "timestamp",
           "primaryKey": false,
           "notNull": false
         }
@@ -450,7 +486,15 @@
       "uniqueConstraints": {}
     }
   },
-  "enums": {},
+  "enums": {
+    "gender": {
+      "name": "gender",
+      "values": {
+        "male": "male",
+        "female": "female"
+      }
+    }
+  },
   "schemas": {},
   "_meta": {
     "columns": {},

bizmatch-server/src/drizzle/migrations/meta/0001_snapshot.json

@@ -1,6 +1,6 @@
 {
-  "id": "3e4b8c5f-4474-4877-abec-38283408ee34",
-  "prevId": "f6d421f9-2394-4a1c-9268-9e46285f0a41",
+  "id": "0bc02618-4414-4e90-8c44-808737611da7",
+  "prevId": "fc58c59b-ac5c-406e-8fdb-b05de40aed17",
   "version": "5",
   "dialect": "pg",
   "tables": {
@@ -147,6 +147,12 @@
           "primaryKey": false,
           "notNull": false
         },
+        "imagePath": {
+          "name": "imagePath",
+          "type": "varchar(200)",
+          "primaryKey": false,
+          "notNull": false
+        },
         "created": {
           "name": "created",
           "type": "timestamp",
@@ -202,6 +208,12 @@
           "notNull": true,
           "default": "gen_random_uuid()"
         },
+        "serial_id": {
+          "name": "serial_id",
+          "type": "serial",
+          "primaryKey": false,
+          "notNull": true
+        },
         "userId": {
           "name": "userId",
           "type": "uuid",
@@ -250,6 +262,12 @@
           "primaryKey": false,
           "notNull": false
         },
+        "listingsCategory": {
+          "name": "listingsCategory",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": false
+        },
         "hideImage": {
           "name": "hideImage",
           "type": "boolean",
@@ -300,7 +318,7 @@
         },
         "imagePath": {
           "name": "imagePath",
-          "type": "varchar(50)",
+          "type": "varchar(200)",
           "primaryKey": false,
           "notNull": false
         },
@@ -421,7 +439,7 @@
         },
         "areasServed": {
           "name": "areasServed",
-          "type": "varchar(100)[]",
+          "type": "jsonb",
           "primaryKey": false,
           "notNull": false
         },
@@ -439,7 +457,31 @@
         },
         "licensedIn": {
           "name": "licensedIn",
-          "type": "varchar(50)[]",
+          "type": "jsonb",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "gender": {
+          "name": "gender",
+          "type": "gender",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "customerType": {
+          "name": "customerType",
+          "type": "customerType",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created": {
+          "name": "created",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updated": {
+          "name": "updated",
+          "type": "timestamp",
           "primaryKey": false,
           "notNull": false
         }
@@ -450,7 +492,23 @@
       "uniqueConstraints": {}
     }
   },
-  "enums": {},
+  "enums": {
+    "customerType": {
+      "name": "customerType",
+      "values": {
+        "buyer": "buyer",
+        "broker": "broker",
+        "professional": "professional"
+      }
+    },
+    "gender": {
+      "name": "gender",
+      "values": {
+        "male": "male",
+        "female": "female"
+      }
+    }
+  },
   "schemas": {},
   "_meta": {
     "columns": {},

bizmatch-server/src/drizzle/migrations/meta/0002_snapshot.json

@@ -1,474 +0,0 @@
-{
-  "id": "ad48c6eb-2d04-442f-9242-b6765553c7c4",
-  "prevId": "3e4b8c5f-4474-4877-abec-38283408ee34",
-  "version": "5",
-  "dialect": "pg",
-  "tables": {
-    "businesses": {
-      "name": "businesses",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "type": {
-          "name": "type",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "city": {
-          "name": "city",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "state": {
-          "name": "state",
-          "type": "char(2)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "price": {
-          "name": "price",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "favoritesForUser": {
-          "name": "favoritesForUser",
-          "type": "varchar(30)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "draft": {
-          "name": "draft",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "listingsCategory": {
-          "name": "listingsCategory",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "realEstateIncluded": {
-          "name": "realEstateIncluded",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "leasedLocation": {
-          "name": "leasedLocation",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "franchiseResale": {
-          "name": "franchiseResale",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "salesRevenue": {
-          "name": "salesRevenue",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "cashFlow": {
-          "name": "cashFlow",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "supportAndTraining": {
-          "name": "supportAndTraining",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "employees": {
-          "name": "employees",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "established": {
-          "name": "established",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "internalListingNumber": {
-          "name": "internalListingNumber",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "reasonForSale": {
-          "name": "reasonForSale",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "brokerLicencing": {
-          "name": "brokerLicencing",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "internals": {
-          "name": "internals",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created": {
-          "name": "created",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated": {
-          "name": "updated",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "businesses_userId_users_id_fk": {
-          "name": "businesses_userId_users_id_fk",
-          "tableFrom": "businesses",
-          "tableTo": "users",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "commercials": {
-      "name": "commercials",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "type": {
-          "name": "type",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "city": {
-          "name": "city",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "state": {
-          "name": "state",
-          "type": "char(2)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "price": {
-          "name": "price",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "favoritesForUser": {
-          "name": "favoritesForUser",
-          "type": "varchar(30)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hideImage": {
-          "name": "hideImage",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "draft": {
-          "name": "draft",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "zipCode": {
-          "name": "zipCode",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "county": {
-          "name": "county",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "email": {
-          "name": "email",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "website": {
-          "name": "website",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "phoneNumber": {
-          "name": "phoneNumber",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "imageOrder": {
-          "name": "imageOrder",
-          "type": "varchar(200)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "imagePath": {
-          "name": "imagePath",
-          "type": "varchar(50)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created": {
-          "name": "created",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated": {
-          "name": "updated",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "commercials_userId_users_id_fk": {
-          "name": "commercials_userId_users_id_fk",
-          "tableFrom": "commercials",
-          "tableTo": "users",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "users": {
-      "name": "users",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "firstname": {
-          "name": "firstname",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "lastname": {
-          "name": "lastname",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "phoneNumber": {
-          "name": "phoneNumber",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyName": {
-          "name": "companyName",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyOverview": {
-          "name": "companyOverview",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyWebsite": {
-          "name": "companyWebsite",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyLocation": {
-          "name": "companyLocation",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "offeredServices": {
-          "name": "offeredServices",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "areasServed": {
-          "name": "areasServed",
-          "type": "varchar(100)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hasProfile": {
-          "name": "hasProfile",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hasCompanyLogo": {
-          "name": "hasCompanyLogo",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "licensedIn": {
-          "name": "licensedIn",
-          "type": "varchar(50)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "gender": {
-          "name": "gender",
-          "type": "gender",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {
-    "gender": {
-      "name": "gender",
-      "values": {
-        "male": "male",
-        "female": "female"
-      }
-    }
-  },
-  "schemas": {},
-  "_meta": {
-    "columns": {},
-    "schemas": {},
-    "tables": {}
-  }
-}

bizmatch-server/src/drizzle/migrations/meta/0003_snapshot.json

@@ -1,480 +0,0 @@
-{
-  "id": "da786c6a-fd5f-4629-bd5e-3ecd42ab1f2c",
-  "prevId": "ad48c6eb-2d04-442f-9242-b6765553c7c4",
-  "version": "5",
-  "dialect": "pg",
-  "tables": {
-    "businesses": {
-      "name": "businesses",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "type": {
-          "name": "type",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "city": {
-          "name": "city",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "state": {
-          "name": "state",
-          "type": "char(2)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "price": {
-          "name": "price",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "favoritesForUser": {
-          "name": "favoritesForUser",
-          "type": "varchar(30)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "draft": {
-          "name": "draft",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "listingsCategory": {
-          "name": "listingsCategory",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "realEstateIncluded": {
-          "name": "realEstateIncluded",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "leasedLocation": {
-          "name": "leasedLocation",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "franchiseResale": {
-          "name": "franchiseResale",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "salesRevenue": {
-          "name": "salesRevenue",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "cashFlow": {
-          "name": "cashFlow",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "supportAndTraining": {
-          "name": "supportAndTraining",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "employees": {
-          "name": "employees",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "established": {
-          "name": "established",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "internalListingNumber": {
-          "name": "internalListingNumber",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "reasonForSale": {
-          "name": "reasonForSale",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "brokerLicencing": {
-          "name": "brokerLicencing",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "internals": {
-          "name": "internals",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created": {
-          "name": "created",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated": {
-          "name": "updated",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "businesses_userId_users_id_fk": {
-          "name": "businesses_userId_users_id_fk",
-          "tableFrom": "businesses",
-          "tableTo": "users",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "commercials": {
-      "name": "commercials",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "userId": {
-          "name": "userId",
-          "type": "uuid",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "type": {
-          "name": "type",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "title": {
-          "name": "title",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "city": {
-          "name": "city",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "state": {
-          "name": "state",
-          "type": "char(2)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "price": {
-          "name": "price",
-          "type": "double precision",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "favoritesForUser": {
-          "name": "favoritesForUser",
-          "type": "varchar(30)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "listingsCategory": {
-          "name": "listingsCategory",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hideImage": {
-          "name": "hideImage",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "draft": {
-          "name": "draft",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "zipCode": {
-          "name": "zipCode",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "county": {
-          "name": "county",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "email": {
-          "name": "email",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "website": {
-          "name": "website",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "phoneNumber": {
-          "name": "phoneNumber",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "imageOrder": {
-          "name": "imageOrder",
-          "type": "varchar(200)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "imagePath": {
-          "name": "imagePath",
-          "type": "varchar(50)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created": {
-          "name": "created",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated": {
-          "name": "updated",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "visits": {
-          "name": "visits",
-          "type": "integer",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "lastVisit": {
-          "name": "lastVisit",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "commercials_userId_users_id_fk": {
-          "name": "commercials_userId_users_id_fk",
-          "tableFrom": "commercials",
-          "tableTo": "users",
-          "columnsFrom": [
-            "userId"
-          ],
-          "columnsTo": [
-            "id"
-          ],
-          "onDelete": "no action",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    },
-    "users": {
-      "name": "users",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "uuid",
-          "primaryKey": true,
-          "notNull": true,
-          "default": "gen_random_uuid()"
-        },
-        "firstname": {
-          "name": "firstname",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "lastname": {
-          "name": "lastname",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "phoneNumber": {
-          "name": "phoneNumber",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "description": {
-          "name": "description",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyName": {
-          "name": "companyName",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyOverview": {
-          "name": "companyOverview",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyWebsite": {
-          "name": "companyWebsite",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "companyLocation": {
-          "name": "companyLocation",
-          "type": "varchar(255)",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "offeredServices": {
-          "name": "offeredServices",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "areasServed": {
-          "name": "areasServed",
-          "type": "varchar(100)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hasProfile": {
-          "name": "hasProfile",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "hasCompanyLogo": {
-          "name": "hasCompanyLogo",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "licensedIn": {
-          "name": "licensedIn",
-          "type": "varchar(50)[]",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "gender": {
-          "name": "gender",
-          "type": "gender",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {}
-    }
-  },
-  "enums": {
-    "gender": {
-      "name": "gender",
-      "values": {
-        "male": "male",
-        "female": "female"
-      }
-    }
-  },
-  "schemas": {},
-  "_meta": {
-    "columns": {},
-    "schemas": {},
-    "tables": {}
-  }
-}

bizmatch-server/src/drizzle/migrations/meta/_journal.json

@@ -5,29 +5,15 @@
     {
       "idx": 0,
       "version": "5",
-      "when": 1714913766996,
-      "tag": "0000_third_spacker_dave",
+      "when": 1716495198537,
+      "tag": "0000_burly_bruce_banner",
       "breakpoints": true
     },
     {
       "idx": 1,
       "version": "5",
-      "when": 1714981666488,
-      "tag": "0001_rapid_daimon_hellstrom",
-      "breakpoints": true
-    },
-    {
-      "idx": 2,
-      "version": "5",
-      "when": 1714982539265,
-      "tag": "0002_black_zaladane",
-      "breakpoints": true
-    },
-    {
-      "idx": 3,
-      "version": "5",
-      "when": 1715254754561,
-      "tag": "0003_tough_hobgoblin",
+      "when": 1717085220861,
+      "tag": "0001_wet_mephistopheles",
       "breakpoints": true
     }
   ]

bizmatch-server/src/drizzle/schema.ts

@@ -1,7 +1,10 @@
-import { boolean, char, doublePrecision, integer, pgEnum, pgTable, text, timestamp, uuid, varchar } from 'drizzle-orm/pg-core';
+import { boolean, char, doublePrecision, integer, jsonb, pgEnum, pgTable, serial, text, timestamp, uuid, varchar } from 'drizzle-orm/pg-core';
+import { AreasServed, LicensedIn } from 'src/models/db.model';
 
 export const PG_CONNECTION = 'PG_CONNECTION';
 export const genderEnum = pgEnum('gender', ['male', 'female']);
+export const customerTypeEnum = pgEnum('customerType', ['buyer', 'broker', 'professional']);
+
 export const users = pgTable('users', {
   id: uuid('id').primaryKey().defaultRandom(),
   firstname: varchar('firstname', { length: 255 }).notNull(),
@@ -14,11 +17,14 @@ export const users = pgTable('users', {
   companyWebsite: varchar('companyWebsite', { length: 255 }),
   companyLocation: varchar('companyLocation', { length: 255 }),
   offeredServices: text('offeredServices'),
-  areasServed: varchar('areasServed', { length: 100 }).array(),
+  areasServed: jsonb('areasServed').$type<AreasServed[]>(),
   hasProfile: boolean('hasProfile'),
   hasCompanyLogo: boolean('hasCompanyLogo'),
-  licensedIn: varchar('licensedIn', { length: 50 }).array(),
+  licensedIn: jsonb('licensedIn').$type<LicensedIn[]>(),
   gender: genderEnum('gender'),
+  customerType: customerTypeEnum('customerType'),
+  created: timestamp('created'),
+  updated: timestamp('updated'),
 });
 
 export const businesses = pgTable('businesses', {
@@ -45,6 +51,7 @@ export const businesses = pgTable('businesses', {
   reasonForSale: varchar('reasonForSale', { length: 255 }),
   brokerLicencing: varchar('brokerLicencing', { length: 255 }),
   internals: text('internals'),
+  imageName: varchar('imagePath', { length: 200 }),
   created: timestamp('created'),
   updated: timestamp('updated'),
   visits: integer('visits'),
@@ -53,6 +60,7 @@ export const businesses = pgTable('businesses', {
 
 export const commercials = pgTable('commercials', {
   id: uuid('id').primaryKey().defaultRandom(),
+  serialId: serial('serial_id'),
   userId: uuid('userId').references(() => users.id),
   type: integer('type'),
   title: varchar('title', { length: 255 }),
@@ -70,7 +78,7 @@ export const commercials = pgTable('commercials', {
   website: varchar('website', { length: 255 }),
   phoneNumber: varchar('phoneNumber', { length: 255 }),
   imageOrder: varchar('imageOrder', { length: 200 }).array(),
-  imagePath: varchar('imagePath', { length: 50 }),
+  imagePath: varchar('imagePath', { length: 200 }),
   created: timestamp('created'),
   updated: timestamp('updated'),
   visits: integer('visits'),

bizmatch-server/src/file/file.service.ts

@@ -1,13 +1,12 @@
 import { Inject, Injectable } from '@nestjs/common';
-import { fstat, readFileSync } from 'fs';
-import { join } from 'path';
-import { fileURLToPath } from 'url';
-import path from 'path';
+import { readFileSync } from 'fs';
 import fs from 'fs-extra';
-import { ImageProperty } from '../models/main.model.js';
-import sharp from 'sharp';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import path, { join } from 'path';
+import sharp from 'sharp';
+import { fileURLToPath } from 'url';
 import { Logger } from 'winston';
+import { ImageProperty, Subscription } from '../models/main.model.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -21,73 +20,86 @@ export class FileService {
     fs.ensureDirSync(`./pictures/logo`);
     fs.ensureDirSync(`./pictures/property`);
   }
+  // ############
+  // Subscriptions
+  // ############
   private loadSubscriptions(): void {
     const filePath = join(__dirname, '../..', 'assets', 'subscriptions.json');
     const rawData = readFileSync(filePath, 'utf8');
     this.subscriptions = JSON.parse(rawData);
   }
-  getSubscriptions() {
-    return this.subscriptions
+  getSubscriptions(): Subscription[] {
+    return this.subscriptions;
   }
-  async storeProfilePicture(file: Express.Multer.File, userId: string) {
+  // ############
+  // Profile
+  // ############
+  async storeProfilePicture(file: Express.Multer.File, adjustedEmail: string) {
     let quality = 50;
     const output = await sharp(file.buffer)
-        .resize({ width: 300 })
-        .avif({ quality }) // Verwende AVIF
-        //.webp({ quality }) // Verwende Webp
-        .toBuffer();
-    await sharp(output).toFile(`./pictures/profile/${userId}.avif`); 
+      .resize({ width: 300 })
+      .avif({ quality }) // Verwende AVIF
+      //.webp({ quality }) // Verwende Webp
+      .toBuffer();
+    await sharp(output).toFile(`./pictures/profile/${adjustedEmail}.avif`);
   }
-  hasProfile(userId: string){
-    return fs.existsSync(`./pictures/profile/${userId}.avif`)
+  hasProfile(adjustedEmail: string) {
+    return fs.existsSync(`./pictures/profile/${adjustedEmail}.avif`);
   }
-
-  async storeCompanyLogo(file: Express.Multer.File, userId: string) {
+  // ############
+  // Logo
+  // ############
+  async storeCompanyLogo(file: Express.Multer.File, adjustedEmail: string) {
     let quality = 50;
     const output = await sharp(file.buffer)
-        .resize({ width: 300 })
-        .avif({ quality }) // Verwende AVIF
-        //.webp({ quality }) // Verwende Webp
-        .toBuffer();
-    await sharp(output).toFile(`./pictures/logo/${userId}.avif`); // Ersetze Dateierweiterung
+      .resize({ width: 300 })
+      .avif({ quality }) // Verwende AVIF
+      //.webp({ quality }) // Verwende Webp
+      .toBuffer();
+    await sharp(output).toFile(`./pictures/logo/${adjustedEmail}.avif`); // Ersetze Dateierweiterung
     // await fs.outputFile(`./pictures/logo/${userId}`, file.buffer);
   }
-  hasCompanyLogo(userId: string){
-    return fs.existsSync(`./pictures/logo/${userId}.avif`)?true:false
+  hasCompanyLogo(adjustedEmail: string) {
+    return fs.existsSync(`./pictures/logo/${adjustedEmail}.avif`) ? true : false;
   }
-  
-  async getPropertyImages(listingId: string): Promise<string[]> {
-    const result: string[] = []
-    const directory = `./pictures/property/${listingId}`
+  // ############
+  // Property
+  // ############
+  async getPropertyImages(imagePath: string, serial: string): Promise<string[]> {
+    const result: string[] = [];
+    const directory = `./pictures/property/${imagePath}/${serial}`;
     if (fs.existsSync(directory)) {
       const files = await fs.readdir(directory);
       files.forEach(f => {
-        result.push(f)
-      })
+        result.push(f);
+      });
       return result;
     } else {
-      return []
+      return [];
     }
   }
-  async hasPropertyImages(listingId: string): Promise<boolean> {
-    const result: ImageProperty[] = []
-    const directory = `./pictures/property/${listingId}`
+  async hasPropertyImages(imagePath: string, serial: string): Promise<boolean> {
+    const result: ImageProperty[] = [];
+    const directory = `./pictures/property/${imagePath}/${serial}`;
     if (fs.existsSync(directory)) {
       const files = await fs.readdir(directory);
-      return files.length>0
+      return files.length > 0;
     } else {
-      return false
+      return false;
     }
   }
-  async storePropertyPicture(file: Express.Multer.File, listingId: string) : Promise<string> {
-    const suffix = file.mimetype.includes('png') ? 'png' : 'jpg'
-    const directory = `./pictures/property/${listingId}`
+  async storePropertyPicture(file: Express.Multer.File, imagePath: string, serial: string): Promise<string> {
+    const suffix = file.mimetype.includes('png') ? 'png' : 'jpg';
+    const directory = `./pictures/property/${imagePath}/${serial}`;
     fs.ensureDirSync(`${directory}`);
     const imageName = await this.getNextImageName(directory);
     //await fs.outputFile(`${directory}/${imageName}`, file.buffer);
-    await this.resizeImageToAVIF(file.buffer,150 * 1024,imageName,directory);
-    return `${imageName}.avif`
+    await this.resizeImageToAVIF(file.buffer, 150 * 1024, imageName, directory);
+    return `${imageName}.avif`;
   }
+  // ############
+  // utils
+  // ############
   async getNextImageName(directory) {
     try {
       const files = await fs.readdir(directory);
@@ -103,37 +115,35 @@ export class FileService {
       return null;
     }
   }
-  async  resizeImageToAVIF(buffer: Buffer, maxSize: number,imageName:string,directory:string) {
+  async resizeImageToAVIF(buffer: Buffer, maxSize: number, imageName: string, directory: string) {
     let quality = 50; // AVIF kann mit niedrigeren Qualitätsstufen gute Ergebnisse erzielen
     let output;
     let start = Date.now();
-      output = await sharp(buffer)
-        .resize({ width: 1500 })
-        .avif({ quality }) // Verwende AVIF
-        //.webp({ quality }) // Verwende Webp
-        .toBuffer();
+    output = await sharp(buffer)
+      .resize({ width: 1500 })
+      .avif({ quality }) // Verwende AVIF
+      //.webp({ quality }) // Verwende Webp
+      .toBuffer();
     await sharp(output).toFile(`${directory}/${imageName}.avif`); // Ersetze Dateierweiterung
     let timeTaken = Date.now() - start;
-    this.logger.info(`Quality: ${quality} - Time: ${timeTaken} milliseconds`)
+    this.logger.info(`Quality: ${quality} - Time: ${timeTaken} milliseconds`);
   }
-  getProfileImagesForUsers(userids:string){
-    const ids = userids.split(',');
-    let result = {};
-    for (const id of ids){
-      result = {...result,[id]:fs.existsSync(`./pictures/profile/${id}.avif`)}
-    }
-    return result;
-  }
-  getCompanyLogosForUsers(userids:string){
-    const ids = userids.split(',');
-    let result = {};
-    for (const id of ids){
-      result = {...result,[id]:fs.existsSync(`./pictures/logo/${id}.avif`)}
-    }
-    return result;
-  }
-  deleteImage(path:string){
+  deleteImage(path: string) {
     fs.unlinkSync(path);
   }
 
+  deleteDirectoryIfExists(imagePath) {
+    const dirPath = `pictures/property/${imagePath}`;
+    try {
+      const exists = fs.pathExistsSync();
+      if (exists) {
+        fs.removeSync(dirPath);
+        console.log(`Directory ${dirPath} was deleted.`);
+      } else {
+        console.log(`Directory ${dirPath} does not exist.`);
+      }
+    } catch (error) {
+      console.error(`Error while deleting ${dirPath}:`, error);
+    }
+  }
 }

bizmatch-server/src/image/image.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Delete, Get, Inject, Param, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
+import { Controller, Delete, Inject, Param, Post, UploadedFile, UseInterceptors } from '@nestjs/common';
 import { FileInterceptor } from '@nestjs/platform-express';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
@@ -6,9 +6,6 @@ import { FileService } from '../file/file.service.js';
 import { ListingsService } from '../listings/listings.service.js';
 import { SelectOptionsService } from '../select-options/select-options.service.js';
 
-import { commercials } from 'src/drizzle/schema.js';
-import { CommercialPropertyListing } from 'src/models/db.model.js';
-
 @Controller('image')
 export class ImageController {
   constructor(
@@ -17,58 +14,42 @@ export class ImageController {
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
     private selectOptions: SelectOptionsService,
   ) {}
-
-  @Post('uploadPropertyPicture/:id')
+  // ############
+  // Property
+  // ############
+  @Post('uploadPropertyPicture/:imagePath/:serial')
   @UseInterceptors(FileInterceptor('file'))
-  async uploadPropertyPicture(@UploadedFile() file: Express.Multer.File, @Param('id') id: string) {
-    const imagename = await this.fileService.storePropertyPicture(file, id);
-    await this.listingService.addImage(id, imagename);
+  async uploadPropertyPicture(@UploadedFile() file: Express.Multer.File, @Param('imagePath') imagePath: string, @Param('serial') serial: string) {
+    const imagename = await this.fileService.storePropertyPicture(file, imagePath, serial);
+    await this.listingService.addImage(imagePath, serial, imagename);
   }
-
-  @Post('uploadProfile/:id')
+  @Delete('propertyPicture/:imagePath/:serial/:imagename')
+  async deletePropertyImagesById(@Param('imagePath') imagePath: string, @Param('serial') serial: string, @Param('imagename') imagename: string): Promise<any> {
+    this.fileService.deleteImage(`pictures/property/${imagePath}/${serial}/${imagename}`);
+    await this.listingService.deleteImage(imagePath, serial, imagename);
+  }
+  // ############
+  // Profile
+  // ############
+  @Post('uploadProfile/:email')
   @UseInterceptors(FileInterceptor('file'))
-  async uploadProfile(@UploadedFile() file: Express.Multer.File, @Param('id') id: string) {
-    await this.fileService.storeProfilePicture(file, id);
+  async uploadProfile(@UploadedFile() file: Express.Multer.File, @Param('email') adjustedEmail: string) {
+    await this.fileService.storeProfilePicture(file, adjustedEmail);
   }
-
-  @Post('uploadCompanyLogo/:id')
+  @Delete('profile/:email/')
+  async deleteProfileImagesById(@Param('email') email: string): Promise<any> {
+    this.fileService.deleteImage(`pictures/profile/${email}.avif`);
+  }
+  // ############
+  // Logo
+  // ############
+  @Post('uploadCompanyLogo/:email')
   @UseInterceptors(FileInterceptor('file'))
-  async uploadCompanyLogo(@UploadedFile() file: Express.Multer.File, @Param('id') id: string) {
-    await this.fileService.storeCompanyLogo(file, id);
+  async uploadCompanyLogo(@UploadedFile() file: Express.Multer.File, @Param('email') adjustedEmail: string) {
+    await this.fileService.storeCompanyLogo(file, adjustedEmail);
   }
-
-  @Get(':id')
-  async getPropertyImagesById(@Param('id') id: string): Promise<any> {
-    const result = await this.listingService.findById(id, commercials);
-    const listing = result as CommercialPropertyListing;
-    if (listing.imageOrder) {
-      return listing.imageOrder;
-    } else {
-      const imageOrder = await this.fileService.getPropertyImages(id);
-      listing.imageOrder = imageOrder;
-      this.listingService.updateListing(listing.id, listing, commercials);
-      return imageOrder;
-    }
-  }
-  @Get('profileImages/:userids')
-  async getProfileImagesForUsers(@Param('userids') userids: string): Promise<any> {
-    return await this.fileService.getProfileImagesForUsers(userids);
-  }
-  @Get('companyLogos/:userids')
-  async getCompanyLogosForUsers(@Param('userids') userids: string): Promise<any> {
-    return await this.fileService.getCompanyLogosForUsers(userids);
-  }
-
-  @Delete('propertyPicture/:listingid/:imagename')
-  async deletePropertyImagesById(@Param('listingid') listingid: string, @Param('imagename') imagename: string): Promise<any> {
-    this.fileService.deleteImage(`pictures/property/${listingid}/${imagename}`);
-  }
-  @Delete('logo/:userid/')
-  async deleteLogoImagesById(@Param('id') id: string): Promise<any> {
-    this.fileService.deleteImage(`pictures/property//${id}`);
-  }
-  @Delete('profile/:userid/')
-  async deleteProfileImagesById(@Param('id') id: string): Promise<any> {
-    this.fileService.deleteImage(`pictures/property//${id}`);
+  @Delete('logo/:email/')
+  async deleteLogoImagesById(@Param('email') adjustedEmail: string): Promise<any> {
+    this.fileService.deleteImage(`pictures/logo/${adjustedEmail}.avif`);
   }
 }

bizmatch-server/src/jwt-auth/jwt-auth.guard.ts

@@ -0,0 +1,18 @@
+import { CanActivate, ExecutionContext, Injectable, UnauthorizedException } from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+
+@Injectable()
+export class JwtAuthGuard extends AuthGuard('jwt') implements CanActivate {
+  canActivate(context: ExecutionContext) {
+    // Add your custom authentication logic here
+    // for example, call super.logIn(request) to establish a session.
+    return super.canActivate(context);
+  }
+  handleRequest(err, user, info) {
+    // You can throw an exception based on either "info" or "err" arguments
+    if (err || !user) {
+      throw err || new UnauthorizedException(info);
+    }
+    return user;
+  }
+}

bizmatch-server/src/jwt-auth/optional-jwt-auth.guard.ts

@@ -0,0 +1,13 @@
+import { Injectable } from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+
+@Injectable()
+export class OptionalJwtAuthGuard extends AuthGuard('jwt') {
+  handleRequest(err, user, info) {
+    // Wenn der Benutzer nicht authentifiziert ist, aber kein Fehler vorliegt, geben Sie null zurück
+    if (err || !user) {
+      return null;
+    }
+    return user;
+  }
+}

bizmatch-server/src/jwt.strategy.ts

@@ -0,0 +1,45 @@
+import { Inject, Injectable, UnauthorizedException } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { PassportStrategy } from '@nestjs/passport';
+import { passportJwtSecret } from 'jwks-rsa';
+import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { ExtractJwt, Strategy } from 'passport-jwt';
+import { Logger } from 'winston';
+import { JwtPayload, JwtUser } from './models/main.model';
+@Injectable()
+export class JwtStrategy extends PassportStrategy(Strategy) {
+  constructor(
+    configService: ConfigService,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+  ) {
+    const realm = configService.get<string>('REALM');
+    super({
+      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      ignoreExpiration: false,
+      secretOrKeyProvider: passportJwtSecret({
+        cache: true,
+        rateLimit: true,
+        jwksRequestsPerMinute: 5,
+        jwksUri: `https://auth.bizmatch.net/realms/${realm}/protocol/openid-connect/certs`,
+      }),
+      audience: 'account', // Keycloak Client ID
+      authorize: '',
+      issuer: `https://auth.bizmatch.net/realms/${realm}`,
+      algorithms: ['RS256'],
+    });
+  }
+
+  async validate(payload: JwtPayload): Promise<JwtUser> {
+    if (!payload) {
+      this.logger.error('Invalid payload');
+      throw new UnauthorizedException();
+    }
+    if (!payload.sub || !payload.preferred_username) {
+      this.logger.error('Missing required claims');
+      throw new UnauthorizedException();
+    }
+    const result = { userId: payload.sub, username: payload.preferred_username, roles: payload.realm_access?.roles };
+    this.logger.info(`JWT User: ${JSON.stringify(result)}`); // Debugging: JWT Payload anzeigen
+    return result;
+  }
+}

bizmatch-server/src/listings/business-listings.controller.ts

@@ -1,8 +1,9 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post, Put } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
 import { businesses } from '../drizzle/schema.js';
-import { ListingCriteria } from '../models/main.model.js';
+import { OptionalJwtAuthGuard } from '../jwt-auth/optional-jwt-auth.guard.js';
+import { JwtUser, ListingCriteria } from '../models/main.model.js';
 import { ListingsService } from './listings.service.js';
 
 @Controller('listings/business')
@@ -12,18 +13,22 @@ export class BusinessListingsController {
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
   ) {}
 
+  @UseGuards(OptionalJwtAuthGuard)
   @Get(':id')
-  findById(@Param('id') id: string): any {
-    return this.listingsService.findById(id, businesses);
-  }
-  @Get('user/:userid')
-  findByUserId(@Param('userid') userid: string): any {
-    return this.listingsService.findByUserId(userid, businesses);
+  findById(@Request() req, @Param('id') id: string): any {
+    return this.listingsService.findBusinessesById(id, req.user as JwtUser);
   }
 
+  @UseGuards(OptionalJwtAuthGuard)
+  @Get('user/:userid')
+  findByUserId(@Request() req, @Param('userid') userid: string): any {
+    return this.listingsService.findBusinessesByEmail(userid, req.user as JwtUser);
+  }
+
+  @UseGuards(OptionalJwtAuthGuard)
   @Post('search')
-  find(@Body() criteria: ListingCriteria): any {
-    return this.listingsService.findListingsByCriteria(criteria, businesses);
+  find(@Request() req, @Body() criteria: ListingCriteria): any {
+    return this.listingsService.findBusinessListings(criteria, req.user as JwtUser);
   }
 
   @Post()
@@ -34,7 +39,7 @@ export class BusinessListingsController {
   @Put()
   update(@Body() listing: any) {
     this.logger.info(`Save Listing`);
-    return this.listingsService.updateListing(listing.id, listing, businesses);
+    return this.listingsService.updateBusinessListing(listing.id, listing);
   }
   @Delete(':id')
   deleteById(@Param('id') id: string) {

bizmatch-server/src/listings/commercial-property-listings.controller.ts

@@ -1,9 +1,11 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post, Put } from '@nestjs/common';
+import { Body, Controller, Delete, Get, Inject, Param, Post, Put, Request, UseGuards } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
+import { CommercialPropertyListing } from 'src/models/db.model.js';
 import { Logger } from 'winston';
 import { commercials } from '../drizzle/schema.js';
 import { FileService } from '../file/file.service.js';
-import { ListingCriteria } from '../models/main.model.js';
+import { OptionalJwtAuthGuard } from '../jwt-auth/optional-jwt-auth.guard.js';
+import { JwtUser, ListingCriteria } from '../models/main.model.js';
 import { ListingsService } from './listings.service.js';
 
 @Controller('listings/commercialProperty')
@@ -14,17 +16,21 @@ export class CommercialPropertyListingsController {
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
   ) {}
 
+  @UseGuards(OptionalJwtAuthGuard)
   @Get(':id')
-  findById(@Param('id') id: string): any {
-    return this.listingsService.findById(id, commercials);
+  findById(@Request() req, @Param('id') id: string): any {
+    return this.listingsService.findCommercialPropertiesById(id, req.user as JwtUser);
   }
-  @Get('user/:userid')
-  findByUserId(@Param('userid') userid: string): any {
-    return this.listingsService.findByUserId(userid, commercials);
+
+  @UseGuards(OptionalJwtAuthGuard)
+  @Get('user/:email')
+  findByEmail(@Request() req, @Param('email') email: string): Promise<CommercialPropertyListing[]> {
+    return this.listingsService.findCommercialPropertiesByEmail(email, req.user as JwtUser);
   }
+  @UseGuards(OptionalJwtAuthGuard)
   @Post('search')
-  async find(@Body() criteria: ListingCriteria): Promise<any> {
-    return await this.listingsService.findListingsByCriteria(criteria, commercials);
+  async find(@Request() req, @Body() criteria: ListingCriteria): Promise<any> {
+    return await this.listingsService.findCommercialPropertyListings(criteria, req.user as JwtUser);
   }
   @Get('states/all')
   getStates(): any {
@@ -38,15 +44,11 @@ export class CommercialPropertyListingsController {
   @Put()
   async update(@Body() listing: any) {
     this.logger.info(`Save Listing`);
-    return await this.listingsService.updateListing(listing.id, listing, commercials);
+    return await this.listingsService.updateCommercialPropertyListing(listing.id, listing);
   }
-  @Delete(':id')
-  deleteById(@Param('id') id: string) {
+  @Delete(':id/:imagePath')
+  deleteById(@Param('id') id: string, @Param('imagePath') imagePath: string) {
     this.listingsService.deleteListing(id, commercials);
-  }
-
-  @Put('imageOrder/:id')
-  async changeImageOrder(@Param('id') id: string, @Body() imageOrder: string[]) {
-    this.listingsService.updateImageOrder(id, imageOrder);
+    this.fileService.deleteDirectoryIfExists(imagePath);
   }
 }

bizmatch-server/src/listings/listings.module.ts

@@ -1,4 +1,5 @@
 import { Module } from '@nestjs/common';
+import { AuthModule } from '../auth/auth.module.js';
 import { DrizzleModule } from '../drizzle/drizzle.module.js';
 import { FileService } from '../file/file.service.js';
 import { UserService } from '../user/user.service.js';
@@ -9,7 +10,7 @@ import { ListingsService } from './listings.service.js';
 import { UnknownListingsController } from './unknown-listings.controller.js';
 
 @Module({
-  imports: [DrizzleModule],
+  imports: [DrizzleModule, AuthModule],
   controllers: [BusinessListingsController, CommercialPropertyListingsController, UnknownListingsController, BrokerListingsController],
   providers: [ListingsService, FileService, UserService],
   exports: [ListingsService],

bizmatch-server/src/listings/listings.service.ts

@@ -1,20 +1,22 @@
 import { Inject, Injectable } from '@nestjs/common';
-import { and, eq, gte, ilike, lte, sql } from 'drizzle-orm';
+import { and, eq, gte, ilike, lte, ne, or, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { BusinessListing, CommercialPropertyListing } from 'src/models/db.model.js';
 import { Logger } from 'winston';
 import * as schema from '../drizzle/schema.js';
 import { PG_CONNECTION, businesses, commercials } from '../drizzle/schema.js';
-import { ListingCriteria } from '../models/main.model.js';
+import { FileService } from '../file/file.service.js';
+import { JwtUser, ListingCriteria, emailToDirName } from '../models/main.model.js';
 
 @Injectable()
 export class ListingsService {
   constructor(
     @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
     @Inject(PG_CONNECTION) private conn: NodePgDatabase<typeof schema>,
+    private fileService: FileService,
   ) {}
-  private getConditions(criteria: ListingCriteria, table: typeof businesses | typeof commercials): any[] {
+  private getConditions(criteria: ListingCriteria, table: typeof businesses | typeof commercials, user: JwtUser): any[] {
     const conditions = [];
     if (criteria.type) {
       conditions.push(eq(table.type, criteria.type));
@@ -39,56 +41,121 @@ export class ListingsService {
   // ##############################################################
   // Listings general
   // ##############################################################
-  async findListingsByCriteria(criteria: ListingCriteria, table: typeof businesses | typeof commercials): Promise<{ data: Record<string, any>[]; total: number }> {
+
+  async findCommercialPropertyListings(criteria: ListingCriteria, user: JwtUser): Promise<any> {
     const start = criteria.start ? criteria.start : 0;
     const length = criteria.length ? criteria.length : 12;
-    return await this.findListings(table, criteria, start, length);
-  }
-  private async findListings(table: typeof businesses | typeof commercials, criteria: ListingCriteria, start = 0, length = 12): Promise<any> {
-    const conditions = this.getConditions(criteria, table);
+    const conditions = this.getConditions(criteria, commercials, user);
+    if (!user || (!user?.roles?.includes('ADMIN') ?? false)) {
+      conditions.push(or(eq(commercials.draft, false), eq(commercials.imagePath, emailToDirName(user?.username))));
+    }
     const [data, total] = await Promise.all([
       this.conn
         .select()
-        .from(table)
+        .from(commercials)
         .where(and(...conditions))
         .offset(start)
         .limit(length),
       this.conn
         .select({ count: sql`count(*)` })
-        .from(table)
+        .from(commercials)
         .where(and(...conditions))
         .then(result => Number(result[0].count)),
     ]);
     return { total, data };
   }
-  async findById(id: string, table: typeof businesses | typeof commercials): Promise<BusinessListing | CommercialPropertyListing> {
+  async findBusinessListings(criteria: ListingCriteria, user: JwtUser): Promise<any> {
+    const start = criteria.start ? criteria.start : 0;
+    const length = criteria.length ? criteria.length : 12;
+    const conditions = this.getConditions(criteria, businesses, user);
+    if (!user || (!user?.roles?.includes('ADMIN') ?? false)) {
+      conditions.push(or(eq(businesses.draft, false), eq(businesses.imageName, emailToDirName(user?.username))));
+    }
+    const [data, total] = await Promise.all([
+      this.conn
+        .select()
+        .from(businesses)
+        .where(and(...conditions))
+        .offset(start)
+        .limit(length),
+      this.conn
+        .select({ count: sql`count(*)` })
+        .from(businesses)
+        .where(and(...conditions))
+        .then(result => Number(result[0].count)),
+    ]);
+    return { total, data };
+  }
+  async findCommercialPropertiesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
+    let result = await this.conn
+      .select()
+      .from(commercials)
+      .where(and(sql`${commercials.id} = ${id}`));
+    result = result.filter(r => !r.draft || r.imagePath === emailToDirName(user?.username) || user?.roles.includes('ADMIN'));
+    return result[0] as CommercialPropertyListing;
+  }
+  async findBusinessesById(id: string, user: JwtUser): Promise<CommercialPropertyListing> {
+    let result = await this.conn
+      .select()
+      .from(businesses)
+      .where(and(sql`${businesses.id} = ${id}`));
+    result = result.filter(r => !r.draft || r.imageName === emailToDirName(user?.username) || user?.roles.includes('ADMIN'));
+    return result[0] as BusinessListing;
+  }
+  async findCommercialPropertiesByEmail(email: string, user: JwtUser): Promise<CommercialPropertyListing[]> {
+    const conditions = [];
+    conditions.push(eq(commercials.imagePath, emailToDirName(email)));
+    if (email !== user?.username && (!user?.roles?.includes('ADMIN') ?? false)) {
+      conditions.push(ne(commercials.draft, true));
+    }
+    return (await this.conn
+      .select()
+      .from(commercials)
+      .where(and(...conditions))) as CommercialPropertyListing[];
+  }
+  async findBusinessesByEmail(email: string, user: JwtUser): Promise<BusinessListing[]> {
+    const conditions = [];
+    conditions.push(eq(businesses.imageName, emailToDirName(email)));
+    if (email !== user?.username && (!user?.roles?.includes('ADMIN') ?? false)) {
+      conditions.push(ne(businesses.draft, true));
+    }
+    return (await this.conn
+      .select()
+      .from(businesses)
+      .where(and(...conditions))) as CommercialPropertyListing[];
+  }
+  async findByImagePath(imagePath: string, serial: string): Promise<CommercialPropertyListing> {
     const result = await this.conn
       .select()
-      .from(table)
-      .where(sql`${table.id} = ${id}`);
-    return result[0] as BusinessListing | CommercialPropertyListing;
+      .from(commercials)
+      .where(and(sql`${commercials.imagePath} = ${imagePath}`, sql`${commercials.serialId} = ${serial}`));
+    return result[0] as CommercialPropertyListing;
   }
-
-  async findByUserId(userId: string, table: typeof businesses | typeof commercials): Promise<BusinessListing[] | CommercialPropertyListing[]> {
-    return (await this.conn.select().from(table).where(eq(table.userId, userId))) as BusinessListing[] | CommercialPropertyListing[];
-  }
-
   async createListing(data: BusinessListing | CommercialPropertyListing, table: typeof businesses | typeof commercials): Promise<BusinessListing | CommercialPropertyListing> {
     data.created = new Date();
     data.updated = new Date();
-    data.visits = 0;
-    data.lastVisit = null;
     const [createdListing] = await this.conn.insert(table).values(data).returning();
     return createdListing as BusinessListing | CommercialPropertyListing;
   }
 
-  async updateListing(id: string, data: BusinessListing | CommercialPropertyListing, table: typeof businesses | typeof commercials): Promise<BusinessListing | CommercialPropertyListing> {
+  async updateCommercialPropertyListing(id: string, data: CommercialPropertyListing): Promise<BusinessListing | CommercialPropertyListing> {
     data.updated = new Date();
     data.created = new Date(data.created);
-    const [updateListing] = await this.conn.update(table).set(data).where(eq(table.id, id)).returning();
+    const imageOrder = await this.fileService.getPropertyImages(data.imagePath, String(data.serialId));
+    let difference = imageOrder.filter(x => !data.imageOrder.includes(x)).concat(data.imageOrder.filter(x => !imageOrder.includes(x)));
+    if (difference.length > 0) {
+      this.logger.warn(`changes between image directory and imageOrder in listing ${data.serialId}: ${difference.join(',')}`);
+      data.imageOrder = imageOrder;
+    }
+    const [updateListing] = await this.conn.update(commercials).set(data).where(eq(commercials.id, id)).returning();
+    return updateListing as BusinessListing | CommercialPropertyListing;
+  }
+  async updateBusinessListing(id: string, data: BusinessListing): Promise<BusinessListing | CommercialPropertyListing> {
+    data.updated = new Date();
+    data.created = new Date(data.created);
+    const [updateListing] = await this.conn.update(businesses).set(data).where(eq(businesses.id, id)).returning();
     return updateListing as BusinessListing | CommercialPropertyListing;
   }
-
   async deleteListing(id: string, table: typeof businesses | typeof commercials): Promise<void> {
     await this.conn.delete(table).where(eq(table.id, id));
   }
@@ -102,24 +169,17 @@ export class ListingsService {
   // ##############################################################
   // Images for commercial Properties
   // ##############################################################
-
-  async updateImageOrder(id: string, imageOrder: string[]) {
-    const listing = (await this.findById(id, commercials)) as unknown as CommercialPropertyListing;
-    listing.imageOrder = imageOrder;
-    await this.updateListing(listing.id, listing, commercials);
-  }
-  async deleteImage(id: string, name: string) {
-    const listing = (await this.findById(id, commercials)) as unknown as CommercialPropertyListing;
+  async deleteImage(imagePath: string, serial: string, name: string) {
+    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
     const index = listing.imageOrder.findIndex(im => im === name);
     if (index > -1) {
       listing.imageOrder.splice(index, 1);
-      await this.updateListing(listing.id, listing, commercials);
+      await this.updateCommercialPropertyListing(listing.id, listing);
     }
   }
-  async addImage(id: string, imagename: string) {
-    const listing = (await this.findById(id, commercials)) as unknown as CommercialPropertyListing;
+  async addImage(imagePath: string, serial: string, imagename: string) {
+    const listing = (await this.findByImagePath(imagePath, serial)) as unknown as CommercialPropertyListing;
     listing.imageOrder.push(imagename);
-    listing.imagePath = listing.id;
-    await this.updateListing(listing.id, listing, commercials);
+    await this.updateCommercialPropertyListing(listing.id, listing);
   }
 }

bizmatch-server/src/listings/unknown-listings.controller.ts

@@ -1,27 +1,22 @@
-import { Body, Controller, Delete, Get, Inject, Param, Post, Put } from '@nestjs/common';
-import { FileService } from '../file/file.service.js';
-import { convertStringToNullUndefined } from '../utils.js';
-import { ListingsService } from './listings.service.js';
+import { Controller, Inject } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
 import { Logger } from 'winston';
-import { businesses, commercials } from 'src/drizzle/schema.js';
-
+import { ListingsService } from './listings.service.js';
 
 @Controller('listings/undefined')
 export class UnknownListingsController {
+  constructor(
+    private readonly listingsService: ListingsService,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+  ) {}
 
-  constructor(private readonly listingsService:ListingsService,@Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {
-  }
-
-  @Get(':id')
-  async findById(@Param('id') id:string): Promise<any> {
-    const result = await this.listingsService.findById(id,businesses);
-    if (result){
-      return result
-    } else {
-      return await this.listingsService.findById(id,commercials);
-    }
-  }
-
+  // @Get(':id')
+  // async findById(@Param('id') id: string): Promise<any> {
+  //   const result = await this.listingsService.findById(id, businesses);
+  //   if (result) {
+  //     return result;
+  //   } else {
+  //     return await this.listingsService.findById(id, commercials);
+  //   }
+  // }
 }
-

bizmatch-server/src/mail/mail.controller.ts

@@ -1,13 +1,16 @@
 import { Body, Controller, Post } from '@nestjs/common';
-import { User } from 'src/models/db.model.js';
-import { MailInfo } from 'src/models/main.model.js';
+import { ErrorResponse, MailInfo } from 'src/models/main.model.js';
 import { MailService } from './mail.service.js';
 
 @Controller('mail')
 export class MailController {
   constructor(private mailService: MailService) {}
   @Post()
-  sendEMail(@Body() mailInfo: MailInfo): Promise<User> {
-    return this.mailService.sendInquiry(mailInfo);
+  sendEMail(@Body() mailInfo: MailInfo): Promise<void | ErrorResponse> {
+    if (mailInfo.listing) {
+      return this.mailService.sendInquiry(mailInfo);
+    } else {
+      return this.mailService.sendRequest(mailInfo);
+    }
   }
 }

bizmatch-server/src/mail/mail.service.ts

@@ -2,8 +2,7 @@ import { MailerService } from '@nestjs-modules/mailer';
 import { Injectable } from '@nestjs/common';
 import path, { join } from 'path';
 import { fileURLToPath } from 'url';
-import { User } from '../models/db.model.js';
-import { MailInfo } from '../models/main.model.js';
+import { ErrorResponse, MailInfo, isEmpty } from '../models/main.model.js';
 import { UserService } from '../user/user.service.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -15,10 +14,13 @@ export class MailService {
     private userService: UserService,
   ) {}
 
-  async sendInquiry(mailInfo: MailInfo): Promise<User> {
+  async sendInquiry(mailInfo: MailInfo): Promise<void | ErrorResponse> {
     //const user = await this.authService.getUser(mailInfo.userId) as KeycloakUser;
     const user = await this.userService.getUserByMail(mailInfo.email);
     console.log(JSON.stringify(user));
+    if (isEmpty(mailInfo.sender.name)) {
+      return { fields: [{ fieldname: 'name', message: 'Required' }] };
+    }
     await this.mailerService.sendMail({
       to: user.email,
       from: '"Bizmatch Team" <info@bizmatch.net>', // override default from
@@ -34,8 +36,28 @@ export class MailService {
         iname: mailInfo.sender.name,
         phone: mailInfo.sender.phoneNumber,
         email: mailInfo.sender.email,
+        id: mailInfo.listing.id,
+        url: mailInfo.url,
+      },
+    });
+  }
+  async sendRequest(mailInfo: MailInfo): Promise<void | ErrorResponse> {
+    if (isEmpty(mailInfo.sender.name)) {
+      return { fields: [{ fieldname: 'name', message: 'Required' }] };
+    }
+    await this.mailerService.sendMail({
+      to: 'support@bizmatch.net',
+      from: `"Bizmatch Support Team" <info@bizmatch.net>`,
+      subject: `Support Request from ${mailInfo.sender.name}`,
+      //template: './inquiry', // `.hbs` extension is appended automatically
+      template: join(__dirname, '../..', 'mail/templates/request.hbs'),
+      context: {
+        // ✏️ filling curly brackets with content
+        request: mailInfo.sender.comments,
+        iname: mailInfo.sender.name,
+        phone: mailInfo.sender.phoneNumber,
+        email: mailInfo.sender.email,
       },
     });
-    return user;
   }
 }

bizmatch-server/src/mail/templates/inquiry.hbs

@@ -1,5 +1,104 @@
-<p>Hey {{ name }},</p>
-<p>You got an inquiry a</p>
-<p>
-    {{inquiry}}
-</p>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notification: New Buyer Lead</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f8f8f8;
+        }
+        .container {
+            width: 80%;
+            margin: auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        .header {
+            font-size: 24px;
+            font-weight: bold;
+            text-align: center;
+            margin-top: 20px;
+            color: #333333;
+        }
+        .subheader {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #555555;
+        }
+        .section {
+            margin-bottom: 20px;
+        }
+        .section-title {
+            color: #1E90FF;
+            font-weight: bold;
+            border-bottom: 2px solid #1E90FF;
+            padding-bottom: 5px;
+            margin-bottom: 10px;
+        }
+        .info {
+            margin-bottom: 10px;
+            padding: 10px;
+        }
+        .info:nth-child(even) {
+            background-color: #f0f0f0;
+        }
+        .info-label {
+            font-weight: bold;
+            color: #333333;
+        }
+        .info-value {
+            margin-left: 10px;
+            color: #555555;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">Notification: New buyer lead from the Bizmatch Network</div>
+        <div class="subheader">Dear {{name}},</div>
+        <p>You've received a message regarding your "{{title}}" listing.</p>
+        
+        <div class="section">
+            <div class="section-title">Buyer Information</div>
+            <div class="info">
+                <span class="info-label">Contact Name:</span>
+                <span class="info-value">{{iname}}</span>
+            </div>
+            <div class="info">
+                <span class="info-label">Contact Email:</span>
+                <span class="info-value">{{email}}</span>
+            </div>
+            <div class="info">
+                <span class="info-label">Contact Phone:</span>
+                <span class="info-value">{{phone}}</span>
+            </div>
+            <div class="info">
+                <span class="info-label">Comments:</span>
+                <span class="info-value">{{inquiry}}</span>
+            </div>
+        </div>
+
+        <div class="section">
+            <div class="section-title">Listing Information</div>
+            <div class="info">
+                <span class="info-label">Headline:</span>
+                <span class="info-value">{{title}}</span>
+            </div>
+            <div class="info">
+                <span class="info-label">Listing ID:</span>
+                <span class="info-value"><a href="{{url}}/listing/{{id}}">{{id}}</a></span>
+            </div>
+            {{#if internalListingNumber}}
+            <div class="info">
+                <span class="info-label">Ref ID:</span>
+                <span class="info-value">{{internalListingNumber}}</span>
+            </div>
+            {{/if}}
+        </div>
+    </div>
+</body>
+</html>

bizmatch-server/src/mail/templates/request.hbs

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Notification: New User Request</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f8f8f8;
+        }
+        .container {
+            width: 80%;
+            margin: auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        .header {
+            font-size: 24px;
+            font-weight: bold;
+            text-align: center;
+            margin-top: 20px;
+            color: #333333;
+        }
+        .subheader {
+            text-align: center;
+            margin-bottom: 20px;
+            color: #555555;
+        }
+        .section {
+            margin-bottom: 20px;
+        }
+        .section-title {
+            color: #1E90FF;
+            font-weight: bold;
+            border-bottom: 2px solid #1E90FF;
+            padding-bottom: 5px;
+            margin-bottom: 10px;
+        }
+        .info {
+            margin-bottom: 10px;
+            padding: 10px;
+        }
+        .info:nth-child(even) {
+            background-color: #f0f0f0;
+        }
+        .info-label {
+            font-weight: bold;
+            color: #333333;
+        }
+        .info-value {
+            margin-left: 10px;
+            color: #555555;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">Notification: New request from a user of the Bizmatch Network</div>
+        <div class="section">
+            <div class="section-title">Requester Information</div>
+            <div class="info">
+                <span class="info-label">Contact Name:</span>
+                <span class="info-value">{{iname}}</span>
+            </div>
+            <div class="info">
+                <span class="info-label">Contact Email:</span>
+                <span class="info-value">{{email}}</span>
+            </div>
+            <div class="info">
+                <span class="info-label">Contact Phone:</span>
+                <span class="info-value">{{phone}}</span>
+            </div>
+            <div class="info">
+                <span class="info-label">Question:</span>
+                <span class="info-value">{{request}}</span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>

bizmatch-server/src/main.ts

@@ -1,17 +1,19 @@
 import { NestFactory } from '@nestjs/core';
-import { AppModule } from './app.module.js';
-import * as express from 'express';
-import path, { join } from 'path';
+import express from 'express';
+import path from 'path';
 import { fileURLToPath } from 'url';
+import { AppModule } from './app.module.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 async function bootstrap() {
+  const server = express();
   const app = await NestFactory.create(AppModule);
   app.setGlobalPrefix('bizmatch');
   app.enableCors({
     origin: '*',
+    //origin: 'http://localhost:4200', // Die URL Ihrer Angular-App
     methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
-    allowedHeaders: 'Content-Type, Accept',
+    allowedHeaders: 'Content-Type, Accept, Authorization',
   });
   //origin: 'http://localhost:4200',
   await app.listen(3000);

bizmatch-server/src/models/db.model.ts

@@ -1,4 +1,25 @@
 export interface User {
+  id?: string;
+  firstname: string;
+  lastname: string;
+  email: string;
+  phoneNumber?: string;
+  description?: string;
+  companyName?: string;
+  companyOverview?: string;
+  companyWebsite?: string;
+  companyLocation?: string;
+  offeredServices?: string;
+  areasServed?: AreasServed[];
+  hasProfile?: boolean;
+  hasCompanyLogo?: boolean;
+  licensedIn?: LicensedIn[];
+  gender?: 'male' | 'female';
+  customerType?: 'buyer' | 'broker' | 'professional';
+  created?: Date;
+  updated?: Date;
+}
+export interface UserData {
   id?: string;
   firstname: string;
   lastname: string;
@@ -14,8 +35,11 @@ export interface User {
   hasProfile?: boolean;
   hasCompanyLogo?: boolean;
   licensedIn?: string[];
+  gender?: 'male' | 'female';
+  customerType?: 'buyer' | 'broker' | 'professional';
+  created?: Date;
+  updated?: Date;
 }
-
 export interface BusinessListing {
   id: string;
   userId?: string;
@@ -39,15 +63,17 @@ export interface BusinessListing {
   reasonForSale?: string;
   brokerLicencing?: string;
   internals?: string;
+  imageName?: string;
   created?: Date;
   updated?: Date;
   visits?: number;
   lastVisit?: Date;
-  listingsCategory?: string;
+  listingsCategory?: 'commercialProperty' | 'business';
 }
 
 export interface CommercialPropertyListing {
   id: string;
+  serialId?: number;
   userId?: string;
   type?: number;
   title?: string;
@@ -69,5 +95,13 @@ export interface CommercialPropertyListing {
   updated?: Date;
   visits?: number;
   lastVisit?: Date;
-  listingsCategory?: string;
+  listingsCategory?: 'commercialProperty' | 'business';
+}
+export interface AreasServed {
+  county: string;
+  state: string;
+}
+export interface LicensedIn {
+  registerNo: string;
+  state: string;
 }

bizmatch-server/src/models/main.model.ts

@@ -64,24 +64,29 @@ export interface ListingCriteria {
   maxPrice: number;
   realEstateChecked: boolean;
   title: string;
-  category: 'professional|broker';
+  category: 'professional' | 'broker';
   name: string;
 }
 
 export interface KeycloakUser {
   id: string;
-  createdTimestamp: number;
-  username: string;
-  enabled: boolean;
-  totp: boolean;
-  emailVerified: boolean;
+  createdTimestamp?: number;
+  username?: string;
+  enabled?: boolean;
+  totp?: boolean;
+  emailVerified?: boolean;
   firstName: string;
   lastName: string;
   email: string;
-  disableableCredentialTypes: any[];
-  requiredActions: any[];
-  notBefore: number;
-  access: Access;
+  disableableCredentialTypes?: any[];
+  requiredActions?: any[];
+  notBefore?: number;
+  access?: Access;
+}
+export interface JwtUser {
+  userId: string;
+  username: string;
+  roles: string[];
 }
 export interface Access {
   manageGroupMembership: boolean;
@@ -130,6 +135,14 @@ export interface JwtToken {
   email: string;
   user_id: string;
 }
+export interface JwtPayload {
+  sub: string;
+  preferred_username: string;
+  realm_access?: {
+    roles?: string[];
+  };
+  [key: string]: any; // für andere optionale Felder im JWT-Payload
+}
 interface Resourceaccess {
   account: Realmaccess;
 }
@@ -150,6 +163,7 @@ export interface MailInfo {
   sender: Sender;
   userId: string;
   email: string;
+  url: string;
   listing?: BusinessListing;
 }
 export interface Sender {
@@ -164,3 +178,45 @@ export interface ImageProperty {
   code: string;
   name: string;
 }
+export interface ErrorResponse {
+  fields?: FieldError[];
+  general?: string[];
+}
+export interface FieldError {
+  fieldname: string;
+  message: string;
+}
+export function isEmpty(value: any): boolean {
+  // Check for undefined or null
+  if (value === undefined || value === null) {
+    return true;
+  }
+
+  // Check for empty string or string with only whitespace
+  if (typeof value === 'string') {
+    return value.trim().length === 0;
+  }
+
+  // Check for number and NaN
+  if (typeof value === 'number') {
+    return isNaN(value);
+  }
+
+  // If it's not a string or number, it's not considered empty by this function
+  return false;
+}
+export function emailToDirName(email: string): string {
+  if (email === undefined || email === null) {
+    return null;
+  }
+  // Entferne ungültige Zeichen und ersetze sie durch Unterstriche
+  const sanitizedEmail = email.replace(/[^a-zA-Z0-9_-]/g, '_');
+
+  // Entferne führende und nachfolgende Unterstriche
+  const trimmedEmail = sanitizedEmail.replace(/^_+|_+$/g, '');
+
+  // Ersetze mehrfache aufeinanderfolgende Unterstriche durch einen einzelnen Unterstrich
+  const normalizedEmail = trimmedEmail.replace(/_+/g, '_');
+
+  return normalizedEmail;
+}

bizmatch-server/src/request-duration/request-duration.middleware.ts

@@ -1,5 +1,5 @@
-import { Injectable, NestMiddleware, Logger } from '@nestjs/common';
-import { Request, Response, NextFunction } from 'express';
+import { Injectable, Logger, NestMiddleware } from '@nestjs/common';
+import { NextFunction, Request, Response } from 'express';
 
 @Injectable()
 export class RequestDurationMiddleware implements NestMiddleware {
@@ -8,8 +8,17 @@ export class RequestDurationMiddleware implements NestMiddleware {
   use(req: Request, res: Response, next: NextFunction) {
     const start = Date.now();
     res.on('finish', () => {
+      // const duration = Date.now() - start;
+      // this.logger.log(`${req.method} ${req.url} - ${duration}ms`);
       const duration = Date.now() - start;
-      this.logger.log(`${req.method} ${req.url} - ${duration}ms`);
+      let logMessage = `${req.method} ${req.url} - ${duration}ms`;
+
+      if (req.method === 'POST' || req.method === 'PUT') {
+        const body = JSON.stringify(req.body);
+        logMessage += ` - Body: ${body}`;
+      }
+
+      this.logger.log(logMessage);
     });
     next();
   }

bizmatch-server/src/select-options/select-options.controller.ts

@@ -3,16 +3,16 @@ import { SelectOptionsService } from './select-options.service.js';
 
 @Controller('select-options')
 export class SelectOptionsController {
-    constructor(private selectOptionsService:SelectOptionsService){}
-    @Get()
-    getSelectOption():any{
-        return {
-            typesOfBusiness:this.selectOptionsService.typesOfBusiness,
-            prices:this.selectOptionsService.prices,
-            listingCategories:this.selectOptionsService.listingCategories,
-            categories:this.selectOptionsService.categories,
-            locations:this.selectOptionsService.locations,
-            typesOfCommercialProperty:this.selectOptionsService.typesOfCommercialProperty,
-        }
-    }
+  constructor(private selectOptionsService: SelectOptionsService) {}
+  @Get()
+  getSelectOption(): any {
+    return {
+      typesOfBusiness: this.selectOptionsService.typesOfBusiness,
+      prices: this.selectOptionsService.prices,
+      listingCategories: this.selectOptionsService.listingCategories,
+      customerTypes: this.selectOptionsService.customerTypes,
+      locations: this.selectOptionsService.locations,
+      typesOfCommercialProperty: this.selectOptionsService.typesOfCommercialProperty,
+    };
+  }
 }

bizmatch-server/src/select-options/select-options.service.ts

@@ -39,9 +39,14 @@ export class SelectOptionsService {
     { name: 'Business', value: 'business' },
     { name: 'Commercial Property', value: 'commercialProperty' },
   ];
-  public categories: Array<KeyValueStyle> = [
-    { name: 'Broker', value: 'broker', icon: 'pi-image', bgColorClass: 'bg-green-100', textColorClass: 'text-green-600' },
-    { name: 'Professional', value: 'professional', icon: 'pi-globe', bgColorClass: 'bg-yellow-100', textColorClass: 'text-yellow-600' },
+  public customerTypes: Array<KeyValue> = [
+    { name: 'Buyer', value: 'buyer' },
+    { name: 'Broker', value: 'broker' },
+    { name: 'Professional', value: 'professional' },
+  ];
+  public gender: Array<KeyValue> = [
+    { name: 'Male', value: 'male' },
+    { name: 'Female', value: 'female' },
   ];
   public imageTypes: ImageType[] = [
     { name: 'propertyPicture', upload: 'uploadPropertyPicture', delete: 'propertyPicture' },

bizmatch-server/src/subscriptions/subscriptions.controller.ts

@@ -1,12 +0,0 @@
-import { Controller, Get } from '@nestjs/common';
-import { FileService } from '../file/file.service.js';
-
-@Controller('subscriptions')
-export class SubscriptionsController {
-    constructor(private readonly fileService: FileService){}
-    @Get()
-    findAll(): any {
-      return this.fileService.getSubscriptions();
-    }
-
-}

bizmatch-server/src/user/user.controller.ts

@@ -1,13 +1,18 @@
-import { Body, Controller, Get, Inject, Param, Post, Put, Query, Req } from '@nestjs/common';
-import { UserService } from './user.service.js';
+import { Body, Controller, Get, Inject, Param, Post, Query } from '@nestjs/common';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { Logger } from 'winston';
 import { User } from 'src/models/db.model.js';
+import { Logger } from 'winston';
+import { FileService } from '../file/file.service.js';
+import { Subscription } from '../models/main.model.js';
+import { UserService } from './user.service.js';
 
 @Controller('user')
 export class UserController {
-
-  constructor(private userService: UserService, @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger) {}
+  constructor(
+    private userService: UserService,
+    private fileService: FileService,
+    @Inject(WINSTON_MODULE_PROVIDER) private readonly logger: Logger,
+  ) {}
 
   @Get()
   findByMail(@Query('mail') mail: string): any {
@@ -38,5 +43,23 @@ export class UserController {
     this.logger.info(`Found users: ${JSON.stringify(foundUsers)}`);
     return foundUsers;
   }
+  @Get('states/all')
+  async getStates(): Promise<any[]> {
+    this.logger.info(`Getting all states for users`);
+    const result = await this.userService.getStates();
+    this.logger.info(`Found ${result.length} entries`);
+    return result;
+  }
 
+  @Get('subscriptions/:id')
+  async findSubscriptionsById(@Param('id') id: string): Promise<Subscription[]> {
+    const subscriptions = this.fileService.getSubscriptions();
+    const user = await this.userService.getUserById(id);
+    subscriptions.forEach(s => {
+      s.userId = user.id;
+      s.start = user.created;
+      s.modified = user.created;
+    });
+    return subscriptions;
+  }
 }

bizmatch-server/src/user/user.service.ts

@@ -2,12 +2,12 @@ import { Inject, Injectable } from '@nestjs/common';
 import { and, eq, ilike, or, sql } from 'drizzle-orm';
 import { NodePgDatabase } from 'drizzle-orm/node-postgres/driver.js';
 import { WINSTON_MODULE_PROVIDER } from 'nest-winston';
-import { PG_CONNECTION } from 'src/drizzle/schema.js';
-import { User } from 'src/models/db.model.js';
 import { Logger } from 'winston';
 import * as schema from '../drizzle/schema.js';
+import { PG_CONNECTION } from '../drizzle/schema.js';
 import { FileService } from '../file/file.service.js';
-import { ListingCriteria } from '../models/main.model.js';
+import { User } from '../models/db.model.js';
+import { ListingCriteria, emailToDirName } from '../models/main.model.js';
 
 @Injectable()
 export class UserService {
@@ -19,7 +19,8 @@ export class UserService {
   private getConditions(criteria: ListingCriteria): any[] {
     const conditions = [];
     if (criteria.state) {
-      conditions.push(sql`EXISTS (SELECT 1 FROM unnest(users."areasServed") AS area WHERE area LIKE  '%' || ${criteria.state}  || '%')`);
+      //conditions.push(sql`EXISTS (SELECT 1 FROM unnest(users."areasServed") AS area WHERE area LIKE  '%' || ${criteria.state}  || '%')`);
+      conditions.push(sql`${schema.users.areasServed} @> ${JSON.stringify([{ state: criteria.state }])}`);
     }
     if (criteria.name) {
       conditions.push(or(ilike(schema.users.firstname, `%${criteria.name}%`), ilike(schema.users.lastname, `%${criteria.name}%`)));
@@ -32,8 +33,8 @@ export class UserService {
       .from(schema.users)
       .where(sql`email = ${email}`)) as User[];
     const user = users[0];
-    user.hasCompanyLogo = this.fileService.hasCompanyLogo(user.id);
-    user.hasProfile = this.fileService.hasProfile(user.id);
+    user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
+    user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
     return user;
   }
   async getUserById(id: string) {
@@ -42,15 +43,19 @@ export class UserService {
       .from(schema.users)
       .where(sql`id = ${id}`)) as User[];
     const user = users[0];
-    user.hasCompanyLogo = this.fileService.hasCompanyLogo(id);
-    user.hasProfile = this.fileService.hasProfile(id);
+    user.hasCompanyLogo = this.fileService.hasCompanyLogo(emailToDirName(user.email));
+    user.hasProfile = this.fileService.hasProfile(emailToDirName(user.email));
     return user;
   }
   async saveUser(user: any): Promise<User> {
     if (user.id) {
+      user.created = new Date(user.created);
+      user.updated = new Date();
       const [updateUser] = await this.conn.update(schema.users).set(user).where(eq(schema.users.id, user.id)).returning();
       return updateUser as User;
     } else {
+      user.created = new Date();
+      user.updated = new Date();
       const [newUser] = await this.conn.insert(schema.users).values(user).returning();
       return newUser as User;
     }
@@ -74,4 +79,9 @@ export class UserService {
     ]);
     return { total, data };
   }
+  async getStates(): Promise<any[]> {
+    const query = sql`SELECT jsonb_array_elements(${schema.users.areasServed}) ->> 'state' AS state, COUNT(DISTINCT ${schema.users.id}) AS count FROM ${schema.users} GROUP BY state ORDER BY count DESC`;
+    const result = await this.conn.execute(query);
+    return result.rows;
+  }
 }

bizmatch/package.json

@@ -4,8 +4,9 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve & http-server ../bizmatch-server",
-    "build": "ng build",
-    "build.dev": "ng build --configuration dev",
+    "prebuild": "node version.js",
+    "build": "node version.js && ng build",
+    "build.dev": "node version.js && ng build --configuration dev --output-hashing=all",
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
     "serve:ssr:bizmatch": "node dist/bizmatch/server/server.mjs"
@@ -33,14 +34,16 @@
     "angular-mixed-cdk-drag-drop": "^2.2.3",
     "browser-bunyan": "^1.8.0",
     "cropperjs": "^1.6.1",
+    "dayjs": "^1.11.11",
     "express": "^4.18.2",
     "jwt-decode": "^4.0.0",
-    "keycloak-js": "^23.0.7",
+    "keycloak-angular": "^15.2.1",
+    "keycloak-js": "^24.0.4",
     "memoize-one": "^6.0.0",
     "on-change": "^5.0.1",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
-    "primeng": "^17.10.0",
+    "primeng": "^17.16.1",
     "quill": "^1.3.7",
     "rxjs": "~7.8.1",
     "tslib": "^2.3.0",

bizmatch/src/app/app.component.html

@@ -6,18 +6,26 @@
     <router-outlet></router-outlet>
   </div>
   <footer></footer>
+  <p-confirmDialog #cd>
+    <ng-template pTemplate="headless" let-message>
+      <div class="flex flex-column align-items-center p-5 surface-overlay border-round">
+        <span class="font-bold text-2xl block mb-2 mt-4">
+          {{ message.header }}
+        </span>
+        <p class="mb-0">{{ message.message }}</p>
+        <div class="flex align-items-center gap-2 mt-4">
+          <button pButton label="OK" (click)="cd.accept()" size="small"></button>
+        </div>
+      </div>
+    </ng-template>
+  </p-confirmDialog>
 </div>
-<!-- @if (loadingService.isLoading$ | async) { -->
-<!-- <div class="progress-spinner flex h-full align-items-center justify-content-center">
-  <div class="spinner-text">Please wait - we're processing your image...</div>
-  <p-progressSpinner></p-progressSpinner>
-</div> -->
-<!-- } -->
+
 @if (loadingService.isLoading$ | async) {
 <div class="spinner-overlay">
   <div class="spinner-container">
     <p-progressSpinner></p-progressSpinner>
-    <div class="spinner-text" *ngIf="loadingService.loadingText$ | async as loadingText">{{loadingText}}</div>
+    <div class="spinner-text" *ngIf="loadingService.loadingText$ | async as loadingText">{{ loadingText }}</div>
   </div>
 </div>
 }

bizmatch/src/app/app.component.ts

@@ -1,46 +1,67 @@
 import { CommonModule } from '@angular/common';
-import { Component, ViewChild } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
-import { HeaderComponent } from './components/header/header.component';
-import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import { ToastModule } from 'primeng/toast';
-import { LoadingService } from './services/loading.service';
-import { HomeComponent } from './pages/home/home.component';
-import { filter } from 'rxjs/operators';
-import { FooterComponent } from './components/footer/footer.component';
-import { KeycloakService } from './services/keycloak.service';
-import { KeycloakEventType } from './models/keycloak-event';
-import { createGenericObject } from './utils/utils';
+import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
+import { ConfirmationService } from 'primeng/api';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { filter } from 'rxjs/operators';
+import { ListingCriteria } from '../../../bizmatch-server/src/models/main.model';
+import build from '../build';
+import { FooterComponent } from './components/footer/footer.component';
+import { HeaderComponent } from './components/header/header.component';
+import { LoadingService } from './services/loading.service';
 import { UserService } from './services/user.service';
-import {ListingCriteria} from '../../../bizmatch-server/src/models/main.model'
+import { createDefaultListingCriteria } from './utils/utils';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [CommonModule, RouterOutlet, HeaderComponent, ProgressSpinnerModule, FooterComponent],
+  imports: [CommonModule, RouterOutlet, HeaderComponent, ProgressSpinnerModule, FooterComponent, ConfirmDialogModule],
+  providers: [ConfirmationService],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
+  build = build;
   title = 'bizmatch';
-  actualRoute ='';
-  listingCriteria:ListingCriteria = onChange(createGenericObject<ListingCriteria>(),(path, value, previousValue, applyData)=>{
-    sessionStorage.setItem('criteria',JSON.stringify(value));
+  actualRoute = '';
+  listingCriteria: ListingCriteria = onChange(createDefaultListingCriteria(), (path, value, previousValue, applyData) => {
+    sessionStorage.setItem('criteria', JSON.stringify(value));
   });
-  public constructor(public loadingService: LoadingService, private router: Router,private activatedRoute: ActivatedRoute, private keycloakService:KeycloakService,private userService:UserService) {
-    this.router.events.pipe(
-      filter(event => event instanceof NavigationEnd)
-    ).subscribe(() => {
+  public constructor(
+    public loadingService: LoadingService,
+    private router: Router,
+    private activatedRoute: ActivatedRoute,
+    private keycloakService: KeycloakService,
+    private userService: UserService,
+    private confirmationService: ConfirmationService,
+  ) {
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
       let currentRoute = this.activatedRoute.root;
       while (currentRoute.children[0] !== undefined) {
         currentRoute = currentRoute.children[0];
       }
       // Hier haben Sie Zugriff auf den aktuellen Route-Pfad
-      this.actualRoute=currentRoute.snapshot.url[0].path
+      this.actualRoute = currentRoute.snapshot.url[0].path;
     });
   }
-  ngOnInit(){
+  ngOnInit() {}
+  @HostListener('window:keydown', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    if (event.shiftKey && event.ctrlKey && event.key === 'V') {
+      this.showVersionDialog();
+    }
   }
 
- 
+  showVersionDialog() {
+    this.confirmationService.confirm({
+      target: event.target as EventTarget,
+      message: `App Version: ${this.build.timestamp}`,
+      header: 'Version Info',
+      icon: 'pi pi-info-circle',
+      accept: () => {},
+      reject: () => {},
+    });
+  }
 }

bizmatch/src/app/app.config.ts

@@ -1,25 +1,30 @@
-import { APP_INITIALIZER, ApplicationConfig, LOCALE_ID, importProvidersFrom } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import { APP_INITIALIZER, ApplicationConfig } from '@angular/core';
+import { provideRouter, withEnabledBlockingInitialNavigation, withInMemoryScrolling } from '@angular/router';
 
-import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
-import { HTTP_INTERCEPTORS, provideHttpClient, withFetch, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
+import { KeycloakBearerInterceptor, KeycloakService } from 'keycloak-angular';
 import { environment } from '../environments/environment';
-import { SelectOptionsService } from './services/select-options.service';
-import { KeycloakService } from './services/keycloak.service';
-import { UserService } from './services/user.service';
+import { customKeycloakAdapter } from '../keycloak';
+import { routes } from './app.routes';
 import { LoadingInterceptor } from './interceptors/loading.interceptor';
+import { KeycloakInitializerService } from './services/keycloak-initializer.service';
+import { SelectOptionsService } from './services/select-options.service';
+import { createLogger } from './utils/utils';
 // provideClientHydration()
+const logger = createLogger('ApplicationConfig');
 export const appConfig: ApplicationConfig = {
   providers: [
     provideHttpClient(withInterceptorsFromDi()),
-    {provide:KeycloakService},
+    { provide: KeycloakService },
     {
       provide: APP_INITIALIZER,
-      useFactory: initializeKeycloak,
+      // useFactory: initializeKeycloak,
+      //useFactory: initializeKeycloak,
+      useFactory: initializeKeycloak3,
       multi: true,
-      deps: [KeycloakService],
+      //deps: [KeycloakService],
+      deps: [KeycloakInitializerService],
     },
     {
       provide: APP_INITIALIZER,
@@ -28,28 +33,58 @@ export const appConfig: ApplicationConfig = {
       deps: [SelectOptionsService],
     },
     {
-      provide:HTTP_INTERCEPTORS,
-      useClass:LoadingInterceptor,
-      multi:true
+      provide: HTTP_INTERCEPTORS,
+      useClass: LoadingInterceptor,
+      multi: true,
     },
-    provideRouter(routes),provideAnimations(),
-    // {provide: LOCALE_ID, useValue: 'en-US' }
-  ]
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: KeycloakBearerInterceptor,
+      multi: true,
+    },
+    provideRouter(
+      routes,
+      withEnabledBlockingInitialNavigation(),
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'enabled',
+        anchorScrolling: 'enabled',
+      }),
+    ),
+    provideAnimations(),
+  ],
 };
-function initUserService(userService:UserService) {
-  return () => {
-    //selectOptions.init();
-  }
+function initServices(selectOptions: SelectOptionsService) {
+  return async () => {
+    await selectOptions.init();
+  };
 }
-function initServices(selectOptions:SelectOptionsService) {
-  return () => {
-    selectOptions.init();
-  }
+export function initializeKeycloak3(keycloak: KeycloakInitializerService) {
+  return () => keycloak.initialize();
 }
 
+export function initializeKeycloak2(keycloak: KeycloakService): () => Promise<void> {
+  return async () => {
+    const { url, realm, clientId } = environment.keycloak;
+    const adapter = customKeycloakAdapter(() => keycloak.getKeycloakInstance(), {});
+    if (window.location.search.length > 0) {
+      sessionStorage.setItem('SEARCH', window.location.search);
+    }
+    const { host, hostname, href, origin, pathname, port, protocol, search } = window.location;
+    await keycloak.init({
+      config: { url, realm, clientId },
+      initOptions: {
+        onLoad: 'check-sso',
+        silentCheckSsoRedirectUri: window.location.hostname === 'localhost' ? `${window.location.origin}/assets/silent-check-sso.html` : `${window.location.origin}/dealerweb/assets/silent-check-sso.html`,
+        adapter,
+        redirectUri: `${origin}${pathname}`,
+      },
+    });
+  };
+}
 function initializeKeycloak(keycloak: KeycloakService) {
-  return () =>
-    keycloak.init({
+  return async () => {
+    logger.info(`###>calling keycloakService init ...`);
+    const authenticated = await keycloak.init({
       config: {
         url: environment.keycloak.url,
         realm: environment.keycloak.realm,
@@ -57,7 +92,13 @@ function initializeKeycloak(keycloak: KeycloakService) {
       },
       initOptions: {
         onLoad: 'check-sso',
-        silentCheckSsoRedirectUri: (<any>window).location.origin + '/assets/silent-check-sso.html'
+        silentCheckSsoRedirectUri: (<any>window).location.origin + '/assets/silent-check-sso.html',
+      },
+      bearerExcludedUrls: ['/assets'],
+      shouldUpdateToken(request) {
+        return !request.headers.get('token-update') === false;
       },
     });
+    logger.info(`+++>${authenticated}`);
+  };
 }

bizmatch/src/app/app.routes.ts

@@ -1,6 +1,9 @@
 import { Routes } from '@angular/router';
 import { LogoutComponent } from './components/logout/logout.component';
-import { authGuard } from './guards/auth.guard';
+import { NotFoundComponent } from './components/not-found/not-found.component';
+
+import { AuthGuard } from './guards/auth.guard';
+import { ListingCategoryGuard } from './guards/listing-category.guard';
 import { DetailsBusinessListingComponent } from './pages/details/details-business-listing/details-business-listing.component';
 import { DetailsCommercialPropertyListingComponent } from './pages/details/details-commercial-property-listing/details-commercial-property-listing.component';
 import { DetailsUserComponent } from './pages/details/details-user/details-user.component';
@@ -46,6 +49,11 @@ export const routes: Routes = [
     path: 'details-commercial-property-listing/:id',
     component: DetailsCommercialPropertyListingComponent,
   },
+  {
+    path: 'listing/:id',
+    canActivate: [ListingCategoryGuard],
+    component: NotFoundComponent, // Dummy-Komponente, wird nie angezeigt, da der Guard weiterleitet
+  },
   // #########
   // User  Details
   {
@@ -57,57 +65,62 @@ export const routes: Routes = [
   {
     path: 'account',
     component: AccountComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
+  },
+  {
+    path: 'account/:id',
+    component: AccountComponent,
+    canActivate: [AuthGuard],
   },
   // #########
   // Create, Update Listings
   {
     path: 'editBusinessListing/:id',
     component: EditBusinessListingComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   {
     path: 'createBusinessListing',
     component: EditBusinessListingComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   {
     path: 'editCommercialPropertyListing/:id',
     component: EditCommercialPropertyListingComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   {
     path: 'createCommercialPropertyListing',
     component: EditCommercialPropertyListingComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   // #########
   // My Listings
   {
     path: 'myListings',
     component: MyListingComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   // #########
   // My Favorites
   {
     path: 'myFavorites',
     component: FavoritesComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   // #########
   // EMAil Us
   {
     path: 'emailUs',
     component: EmailUsComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   // #########
   // Logout
   {
     path: 'logout',
     component: LogoutComponent,
-    canActivate: [authGuard],
+    canActivate: [AuthGuard],
   },
   // #########
   // Pricing

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

@@ -1,26 +1,502 @@
 <div class="surface-0 px-4 py-4 md:px-6 lg:px-8">
   <div class="surface-0">
     <div class="grid">
-      <div class="col-12 md:col-3 md:mb-0 mb-3">
+      <div class="col-12 md:col-3 md:mb-0 mb-3 cursor-pointer" routerLink="/home">
         <img src="assets/images/header-logo.png" alt="footer sections" height="30" class="mr-3" />
         <div class="text-500">© 2024 Bizmatch All rights reserved.</div>
       </div>
       <div class="col-12 md:col-3">
         <div class="text-black mb-4 flex flex-wrap" style="max-width: 290px">BizMatch, Inc., 1001 Blucher Street, Corpus Christi, Texas 78401</div>
         <div class="text-black mb-3"><i class="text-white pi pi-phone surface-800 border-round p-1 mr-2"></i>1-800-840-6025</div>
-        <div class="text-black mb-3"><i class="text-white pi pi-inbox surface-800 border-round p-1 mr-2"></i>bizmatch&#64;biz-match.com</div>
+        <div class="text-black mb-3"><i class="text-white pi pi-inbox surface-800 border-round p-1 mr-2"></i>info&#64;bizmatch.net</div>
       </div>
       <div class="col-12 md:col-3 text-500">
         <div class="text-black font-bold line-height-3 mb-3">Legal</div>
-        <a class="line-height-3 block cursor-pointer mb-2">Terms of use</a>
-        <a class="line-height-3 block cursor-pointer mb-2">Privacy statement</a>
+        <a class="line-height-3 block cursor-pointer mb-2" (click)="termsVisible = true">Terms of use</a>
+        <a class="line-height-3 block cursor-pointer mb-2" (click)="privacyVisible = true">Privacy statement</a>
       </div>
       <div class="col-12 md:col-3 text-500">
         <div class="text-black font-bold line-height-3 mb-3">Actions</div>
-        <a *ngIf="!userService.isLoggedIn()" (click)="login()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Login</a>
-        <a *ngIf="userService.isLoggedIn()" [routerLink]="['/account']" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Account</a>
-        <a *ngIf="userService.isLoggedIn()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline" (click)="userService.logout()">Log Out</a>
+        <a *ngIf="!keycloakService.isLoggedIn()" (click)="login()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Login</a>
+        <a *ngIf="!keycloakService.isLoggedIn()" (click)="register()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Register</a>
+        <a *ngIf="keycloakService.isLoggedIn()" [routerLink]="['/account']" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline">Account</a>
+        <a *ngIf="keycloakService.isLoggedIn()" class="text-500 line-height-3 block cursor-pointer mb-2 no-underline" (click)="keycloakService.logout()">Log Out</a>
       </div>
     </div>
   </div>
 </div>
+<p-sidebar [(visible)]="privacyVisible" styleClass="w-30rem" position="right">
+  <ng-template pTemplate="header">
+    <span class="font-semibold text-xl">Privacy Statement</span>
+  </ng-template>
+  <section id="content" role="main">
+    <article id="post-2" class="post-2 page type-page status-publish hentry pmpro-has-access">
+      <section class="entry-content">
+        <div class="container" style="padding: 3.5% 0 3.75% 0 !important">
+          <p>
+            <strong>Privacy Policy</strong><br />
+            We are committed to protecting your privacy. We have established this statement as a testament to our commitment to your privacy.
+          </p>
+          <p>This Privacy Policy relates to the use of any personal information you provide to us through this websites.</p>
+          <p>
+            By accepting the Privacy Policy during registration or the sending of an enquiry, you expressly consent to our collection, storage, use and disclosure of your personal information as described in this Privacy
+            Policy.
+          </p>
+          <p>
+            We may update our Privacy Policy from time to time. Our Privacy Policy was last updated in Febuary 2018 and is effective upon acceptance for new users. By continuing to use our websites or otherwise
+            continuing to deal with us, you accept this Privacy Policy.
+          </p>
+          <p>
+            <strong>Collection of personal information</strong><br />
+            Anyone can browse our websites without revealing any personally identifiable information.
+          </p>
+          <p>However, should you wish to contact a business for sale, a franchise opportunity or an intermediary, we will require you to provide some personal information.</p>
+          <p>Should you wish to advertise your services, your business (es) or your franchise opportunity, we will require you to provide some personal information.</p>
+          <p>By providing personal information, you are consenting to the transfer and storage of that information on our servers located in the United States.</p>
+          <p>We may collect and store the following personal information:</p>
+          <p>
+            Your name, email address, physical address, telephone numbers, and (depending on the service used), your business information, financial information, such as credit / payment card details;<br />
+            transactional information based on your activities on the site; information that you disclose in a forum on any of our websites, feedback, correspondence through our websites, and correspondence sent to
+            us;<br />
+            other information from your interaction with our websites, services, content and advertising, including computer and connection information, statistics on page views, traffic to and from the sites, ad data,
+            IP address and standard web log information;<br />
+            supplemental information from third parties (for example, if you incur a debt, we will generally conduct a credit check by obtaining additional information about you from a credit bureau, as permitted by law;
+            or if the information you provide cannot be verified,<br />
+            we may ask you to send us additional information, or to answer additional questions online to help verify your information).
+          </p>
+          <p>
+            <strong>How we use your information</strong><br />
+            The primary reason we collect your personal information is to improve the services we deliver to you through our website. By registering or sending an enquiry through our website, you agree that we may use
+            your personal information to:<br />
+            provide the services and customer support you request;<br />
+            connect you with relevant parties:<br />
+            If you are a buyer we will pass some or all of your details on to the seller / intermediary along with any message you have typed. This allows the seller to contact you in order to pursue a possible sale of a
+            business;<br />
+            If you are a seller / intermediary, we will disclose your details where you have given us permission to do so;<br />
+            resolve disputes, collect fees, and troubleshoot problems;<br />
+            prevent potentially prohibited or illegal activities, and enforce our Terms and Conditions;<br />
+            customize, measure and improve our services, conduct internal market research, provide content and advertising;<br />
+            tell you about other Biz-Match products and services, target marketing, send you service updates, and promotional offers based on your communication preferences.
+          </p>
+          <p>
+            <strong>Our disclosure of your information</strong><br />
+            We may disclose personal information to respond to legal requirements, enforce our policies, respond to claims that a listing or other content infringes the rights of others, or protect anyone’s rights,
+            property, or safety.
+          </p>
+          <p>
+            We may also share your personal information with<br />
+            When you select to register an account as a business buyer, you provide your personal details and we will pass this on to a seller of a business or franchise when you request more information.
+          </p>
+          <p>
+            When you select to register an account as a business broker or seller on the site, we provide a public platform on which to establish your business profile. This profile consists of pertinent facts about your
+            business along with your personal information; namely, the contact information you provide to facilitate contact between you and other users’ of the site. Direct email addresses and telephone numbers will not
+            be publicly displayed unless you specifically include it on your profile.
+          </p>
+          <p>
+            The information a user includes within the forums provided on the site is publicly available to other users’ of the site. Please be aware that any personal information you elect to provide in a public forum
+            may be used to send you unsolicited messages; we are not responsible for the personal information a user elects to disclose within their public profile, or in the private communications that users’ engage in
+            on the site.
+          </p>
+          <p>
+            We post testimonials on the site obtained from users’. These testimonials may include the name, city, state or region and business of the user. We obtain permission from our users’ prior to posting their
+            testimonials on the site. We are not responsible for any personal information a user selects to include within their testimonial.
+          </p>
+          <p>
+            When you elect to email a friend about the site, or a particular business, we request the third party’s email address to send this one time email. We do not share this information with any third parties for
+            their promotional purposes and only store the information to gauge the effectiveness of our referral program.
+          </p>
+          <p>We may share your personal information with our service providers where necessary. We employ the services of a payment processor to fulfil payment for services purchased on the site.</p>
+          <p>
+            We works with a number of partners or affiliates, where we provide marketing services for these companies. These third party agents collect your personal information to facilitate your service request and the
+            information submitted here is governed by their privacy policy.
+          </p>
+          <p>
+            <strong>Masking Policy</strong><br />
+            In some cases, where the third party agent collects your information, the affiliate portal may appear within a BizMatch.net frame. It is presented as a BizMatch.net page for a streamlined user interface
+            however the data collected on such pages is governed by the third party agent’s privacy policy.
+          </p>
+          <p>
+            <strong>Legal Disclosure</strong><br />
+            In certain circumstances, we may be legally required to disclose information collected on the site to law enforcement, government agencies or other third parties. We reserve the right to disclose information
+            to our service providers and to law enforcement or government agencies where a formal request such as in response to a court order, subpoena or judicial proceeding is made. Where we believe in good faith that
+            disclosure of information is necessary to prevent imminent physical or financial harm, or loss, or in protecting against illegal activity on the site, we reserve to disclose information.
+          </p>
+          <p>
+            Should the company undergo the merger, acquisition or sale of some or all of its assets, your personal information may likely be a part of the transferred assets. In such an event, your personal information
+            on the site, would be governed by this privacy statement; any changes to the privacy practices governing your information as a result of transfer would be relayed to you by means of a prominent notice on the
+            Site, or by email.
+          </p>
+          <p>
+            <strong>Using information from BizMatch.net website</strong><br />
+            In certain cases, (where you are receiving contact details of buyers interested in your business opportunity or a business opportunity you represent), you must comply with data protection laws, and give other
+            users a chance to remove themselves from your database and a chance to review what information you have collected about them.
+          </p>
+          <p>
+            <strong>You agree to use BizMatch.net user information only for:</strong>
+          </p>
+          <p>
+            BizMatch.net transaction-related purposes that are not unsolicited commercial messages;<br />
+            using services offered through BizMatch.net, or<br />
+            other purposes that a user expressly chooses.
+          </p>
+          <p>
+            <strong>Marketing</strong><br />
+            We do not sell or rent your personal information to third parties for their marketing purposes without your explicit consent. Where you explicitly express your consent at the point of collection to receive
+            offers from third party partners or affiliates, we will communicate to you on their behalf. We will not pass your information on.
+          </p>
+          <p>
+            You will receive email marketing communications from us throughout the duration of your relationship with our websites. If you do not wish to receive marketing communications from us you may unsubscribe and /
+            or change your preferences at any time by following instructions included within a communication or emailing Customer Services.
+          </p>
+          <p>If you have an account with one of our websites you can also log in and click the email preferences link to unsubscribe and / or change your preferences.</p>
+          <p>
+            Please note that we reserve the right to send all website users notifications and administrative emails where necessary which are considered a part of the service. Given that these messages aren’t promotional
+            in nature, you will be unable to opt-out of them.
+          </p>
+          <p>
+            <strong>Cookies</strong><br />
+            A cookie is a small text file written to your hard drive that contains information about you. Cookies do not contain any personal information about users. Once you close your browser or log out of the
+            website, the cookie simply terminates. We use cookies so that we can personalise your experience of our websites.
+          </p>
+          <p>
+            If you set up your browser to reject the cookie, you may still use the website however; doing so may interfere with your use of some aspects of our websites. Some of our business partners use cookies on our
+            site (for example, advertisers). We have no access to or control over these cookies.
+          </p>
+          <p>For more information about how BizMatch.net uses cookies please read our Cookie Policy.</p>
+          <p>
+            <strong>Spam, spyware or spoofing</strong><br />
+            We and our users do not tolerate spam. Make sure to set your email preferences so we can communicate with you, as you prefer. Please add us to your safe senders list. To report spam or spoof emails, please
+            contact us using the contact information provided in the Contact Us section of this privacy statement.
+          </p>
+          <p>
+            You may not use our communication tools to send spam or otherwise send content that would breach our Terms and Conditions. We automatically scan and may manually filter messages to check for spam, viruses,
+            phishing attacks and other malicious activity or illegal or prohibited content. We may also store these messages for back up purposes only.
+          </p>
+          <p>
+            If you send an email to an email address that is not registered in our community, we do not permanently store that email or use that email address for any marketing purpose. We do not rent or sell these email
+            addresses.
+          </p>
+          <p>
+            <strong>Account protection</strong><br />
+            Your password is the key to your account. Make sure this is stored safely. Use unique numbers, letters and special characters, and do not disclose your password to anyone. If you do share your password or
+            your personal information with others, remember that you are responsible for all actions taken in the name of your account. If you lose control of your password, you may lose substantial control over your
+            personal information and may be subject to legally binding actions taken on your behalf. Therefore, if your password has been compromised for any reason, you should immediately notify us and change your
+            password.
+          </p>
+          <p>
+            <strong>Accessing, reviewing and changing your personal information</strong><br />
+            You can view and amend your personal information at any time by logging in to your account online. You must promptly update your personal information if it changes or is inaccurate.
+          </p>
+          <p>If at any time you wish to close your account, please contact Customer Services and instruct us to do so. We will process your request as soon as we can.</p>
+          <p>You may also contact us at any time to find out what information we hold about you, what we do with it and ask us to update it for you.</p>
+          <p>
+            We do retain personal information from closed accounts to comply with law, prevent fraud, collect any fees owed, resolve disputes, troubleshoot problems, assist with any investigations, enforce our Terms and
+            Conditions, and take other actions otherwise permitted by law.
+          </p>
+          <p>
+            <strong>Security</strong><br />
+            Your information is stored on our servers located in the USA. We treat data as an asset that must be protected and use a variety of tools (encryption, passwords, physical security, etc.) to protect your
+            personal information against unauthorized access and disclosure. However, no method of security is 100% effective and while we take every measure to protect your personal information, we make no guarantees of
+            its absolute security.
+          </p>
+          <p>We employ the use of SSL encryption during the transmission of sensitive data across our websites.</p>
+          <p>
+            <strong>Third parties</strong><br />
+            Except as otherwise expressly included in this Privacy Policy, this document addresses only the use and disclosure of information we collect from you. If you disclose your information to others, whether they
+            are buyers or sellers on our websites or other sites throughout the internet, different rules may apply to their use or disclosure of the information you disclose to them. Dynamis does not control the privacy
+            policies of third parties, and you are subject to the privacy policies of those third parties where applicable.
+          </p>
+          <p>We encourage you to ask questions before you disclose your personal information to others.</p>
+          <p>
+            <strong>General</strong><br />
+            We may change this Privacy Policy from time to time as we add new products and applications, as we improve our current offerings, and as technologies and laws change. You can determine when this Privacy
+            Policy was last revised by referring to the “Last Updated” legend at the top of this page.
+          </p>
+          <p>
+            Any changes will become effective upon our posting of the revised Privacy Policy on our affected websites. We will provide notice to you if these changes are material and, where required by applicable law, we
+            will obtain your consent. This notice may be provided by email, by posting notice of the changes on our affected websites or by other means, consistent with applicable laws.
+          </p>
+          <p>
+            <strong>Contact Us</strong><br />
+            If you have any questions or comments about our privacy policy, and you can’t find the answer to your question on our help pages, please contact us using this form or email support&#64;bizmatch.net, or write
+            to us at BizMatch, 715 S. Tanahua, Corpus Christi, TX 78401.)
+          </p>
+        </div>
+      </section>
+    </article>
+  </section>
+</p-sidebar>
+
+<p-sidebar [(visible)]="termsVisible" styleClass="w-30rem" position="right">
+  <ng-template pTemplate="header">
+    <span class="font-semibold text-xl">Terms of use</span>
+  </ng-template>
+  <section id="content" role="main">
+    <article id="post-1" class="post-1 page type-page status-publish hentry pmpro-has-access">
+      <section class="entry-content">
+        <div class="container" style="padding: 3.5% 0 3.75% 0 !important">
+          <b><span>AGREEMENT BETWEEN USER AND BizMatch</span></b
+          ><span
+            ><p></p>
+            <p><span>The BizMatch Web Site is comprised of various Web pages operated by BizMatch.</span><span></span></p>
+            <p>
+              <span
+                >The BizMatch Web Site is offered to you conditioned on your acceptance without modification of the terms, conditions, and notices contained herein. Your use of the BizMatch Web Site constitutes your
+                agreement to all such terms, conditions, and notices.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>MODIFICATION OF THESE TERMS OF USE</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch reserves the right to change the terms, conditions, and notices under which the BizMatch Web Site is offered, including but not limited to the charges associated with the use of the BizMatch Web
+                Site.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>LINKS TO THIRD PARTY SITES</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >The BizMatch Web Site may contain links to other Web Sites ("Linked Sites"). The Linked Sites are not under the control of BizMatch and BizMatch is not responsible for the contents of any Linked Site,
+                including without limitation any link contained in a Linked Site, or any changes or updates to a Linked Site. BizMatch is not responsible for webcasting or any other form of transmission received from any
+                Linked Site. BizMatch is providing these links to you only as a convenience, and the inclusion of any link does not imply endorsement by BizMatch of the site or any association with its operators.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>NO UNLAWFUL OR PROHIBITED USE</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >As a condition of your use of the BizMatch Web Site, you warrant to BizMatch that you will not use the BizMatch Web Site for any purpose that is unlawful or prohibited by these terms, conditions, and
+                notices. You may not use the BizMatch Web Site in any manner which could damage, disable, overburden, or impair the BizMatch Web Site or interfere with any other party’s use and enjoyment of the BizMatch
+                Web Site. You may not obtain or attempt to obtain any materials or information through any means not intentionally made available or provided for through the BizMatch Web Sites.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>USE OF COMMUNICATION SERVICES</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >The BizMatch Web Site may contain bulletin board services, chat areas, news groups, forums, communities, personal web pages, calendars, and/or other message or communication facilities designed to enable
+                you to communicate with the public at large or with a group (collectively, "Communication Services"), you agree to use the Communication Services only to post, send and receive messages and material that
+                are proper and related to the particular Communication Service. By way of example, and not as a limitation, you agree that when using a Communication Service, you will not:</span
+              ><span></span>
+            </p>
+            <p>&nbsp;</p>
+            <p class="MsoNormal"><!--[if !supportLists]--></p>
+            <p>
+              <span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Defame, abuse, harass, stalk, threaten or otherwise violate the legal rights (such as rights of privacy and publicity) of others.</span><span></span>
+            </p>
+            <p>&nbsp;</p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Publish, post, upload, distribute or disseminate any inappropriate, profane, defamatory, infringing, obscene, indecent or unlawful topic, name, material or information.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span
+                >Upload files that contain software or other material protected by intellectual property laws (or by rights of privacy of publicity) unless you own or control the rights thereto or have received all
+                necessary consents.</span
+              >
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Upload files that contain viruses, corrupted files, or any other similar software or programs that may damage the operation of another’s computer.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Advertise or offer to sell or buy any goods or services for any business purpose, unless such Communication Service specifically allows such messages.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Conduct or forward surveys, contests, pyramid schemes or chain letters.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Download any file posted by another user of a Communication Service that you know, or reasonably should know, cannot be legally distributed in such manner.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span
+                >Falsify or delete any author attributions, legal or other proper notices or proprietary designations or labels of the origin or source of software or other material contained in a file that is
+                uploaded.</span
+              >
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Restrict or inhibit any other user from using and enjoying the Communication Services.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Violate any code of conduct or other guidelines which may be applicable for any particular Communication Service.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Harvest or otherwise collect information about others, including e-mail addresses, without their consent.</span>
+            </p>
+            <p class="MsoNormal">
+              <!--[if !supportLists]--><span
+                ><span>§<span>&nbsp; </span></span></span
+              ><!--[endif]--><span>Violate any applicable laws or regulations.</span>
+            </p>
+            <p class="MsoNormal">
+              <span
+                >BizMatch has no obligation to monitor the Communication Services. However, BizMatch reserves the right to review materials posted to a Communication Service and to remove any materials in its sole
+                discretion. BizMatch reserves the right to terminate your access to any or all of the Communication Services at any time without notice for any reason whatsoever.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch reserves the right at all times to disclose any information as necessary to satisfy any applicable law, regulation, legal process or governmental request, or to edit, refuse to post or to remove
+                any information or materials, in whole or in part, in BizMatch’s sole discretion.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >Always use caution when giving out any personally identifying information about yourself or your children in any Communication Service. BizMatch does not control or endorse the content, messages or
+                information found in any Communication Service and, therefore, BizMatch specifically disclaims any liability with regard to the Communication Services and any actions resulting from your participation in
+                any Communication Service. Managers and hosts are not authorized BizMatch spokespersons, and their views do not necessarily reflect those of BizMatch.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >Materials uploaded to a Communication Service may be subject to posted limitations on usage, reproduction and/or dissemination. You are responsible for adhering to such limitations if you download the
+                materials.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>MATERIALS PROVIDED TO BizMatch OR POSTED AT ANY BizMatch WEB SITE</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch does not claim ownership of the materials you provide to BizMatch (including feedback and suggestions) or post, upload, input or submit to any BizMatch Web Site or its associated services
+                (collectively "Submissions"). However, by posting, uploading, inputting, providing or submitting your Submission you are granting BizMatch, its affiliated companies and necessary sublicensees permission
+                to use your Submission in connection with the operation of their Internet businesses including, without limitation, the rights to: copy, distribute, transmit, publicly display, publicly perform,
+                reproduce, edit, translate and reformat your Submission; and to publish your name in connection with your Submission.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >No compensation will be paid with respect to the use of your Submission, as provided herein. BizMatch is under no obligation to post or use any Submission you may provide and may remove any Submission at
+                any time in BizMatch’s sole discretion.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >By posting, uploading, inputting, providing or submitting your Submission you warrant and represent that you own or otherwise control all of the rights to your Submission as described in this section
+                including, without limitation, all the rights necessary for you to provide, post, upload, input or submit the Submissions.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>LIABILITY DISCLAIMER</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >THE INFORMATION, SOFTWARE, PRODUCTS, AND SERVICES INCLUDED IN OR AVAILABLE THROUGH THE BizMatch WEB SITE MAY INCLUDE INACCURACIES OR TYPOGRAPHICAL ERRORS. CHANGES ARE PERIODICALLY ADDED TO THE
+                INFORMATION HEREIN. BizMatch AND/OR ITS SUPPLIERS MAY MAKE IMPROVEMENTS AND/OR CHANGES IN THE BizMatch WEB SITE AT ANY TIME. ADVICE RECEIVED VIA THE BizMatch WEB SITE SHOULD NOT BE RELIED UPON FOR
+                PERSONAL, MEDICAL, LEGAL OR FINANCIAL DECISIONS AND YOU SHOULD CONSULT AN APPROPRIATE PROFESSIONAL FOR SPECIFIC ADVICE TAILORED TO YOUR SITUATION.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch AND/OR ITS SUPPLIERS MAKE NO REPRESENTATIONS ABOUT THE SUITABILITY, RELIABILITY, AVAILABILITY, TIMELINESS, AND ACCURACY OF THE INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS
+                CONTAINED ON THE BizMatch WEB SITE FOR ANY PURPOSE. TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, ALL SUCH INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS ARE PROVIDED "AS IS" WITHOUT
+                WARRANTY OR CONDITION OF ANY KIND. BizMatch AND/OR ITS SUPPLIERS HEREBY DISCLAIM ALL WARRANTIES AND CONDITIONS WITH REGARD TO THIS INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS, INCLUDING
+                ALL IMPLIED WARRANTIES OR CONDITIONS OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NON-INFRINGEMENT.</span
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, IN NO EVENT SHALL BizMatch AND/OR ITS SUPPLIERS BE LIABLE FOR ANY DIRECT, INDIRECT, PUNITIVE, INCIDENTAL, SPECIAL, CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+                WHATSOEVER INCLUDING, WITHOUT LIMITATION, DAMAGES FOR LOSS OF USE, DATA OR PROFITS, ARISING OUT OF OR IN ANY WAY CONNECTED WITH THE USE OR PERFORMANCE OF THE BizMatch WEB SITE, WITH THE DELAY OR INABILITY
+                TO USE THE BizMatch WEB SITE OR RELATED SERVICES, THE PROVISION OF OR FAILURE TO PROVIDE SERVICES, OR FOR ANY INFORMATION, SOFTWARE, PRODUCTS, SERVICES AND RELATED GRAPHICS OBTAINED THROUGH THE BizMatch
+                WEB SITE, OR OTHERWISE ARISING OUT OF THE USE OF THE BizMatch WEB SITE, WHETHER BASED ON CONTRACT, TORT, NEGLIGENCE, STRICT LIABILITY OR OTHERWISE, EVEN IF BizMatch OR ANY OF ITS SUPPLIERS HAS BEEN
+                ADVISED OF THE POSSIBILITY OF DAMAGES. BECAUSE SOME STATES/JURISDICTIONS DO NOT ALLOW THE EXCLUSION OR LIMITATION OF LIABILITY FOR CONSEQUENTIAL OR INCIDENTAL DAMAGES, THE ABOVE LIMITATION MAY NOT APPLY
+                TO YOU. IF YOU ARE DISSATISFIED WITH ANY PORTION OF THE BizMatch WEB SITE, OR WITH ANY OF THESE TERMS OF USE, YOUR SOLE AND EXCLUSIVE REMEDY IS TO DISCONTINUE USING THE BizMatch WEB SITE.</span
+              ><span></span>
+            </p>
+            <p><span>SERVICE CONTACT : info&#64;bizmatch.net</span><span></span></p>
+            <p>
+              <b><span>TERMINATION/ACCESS RESTRICTION</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >BizMatch reserves the right, in its sole discretion, to terminate your access to the BizMatch Web Site and the related services or any portion thereof at any time, without notice. GENERAL To the maximum
+                extent permitted by law, this agreement is governed by the laws of the State of Washington, U.S.A. and you hereby consent to the exclusive jurisdiction and venue of courts in King County, Washington,
+                U.S.A. in all disputes arising out of or relating to the use of the BizMatch Web Site. Use of the BizMatch Web Site is unauthorized in any jurisdiction that does not give effect to all provisions of these
+                terms and conditions, including without limitation this paragraph. You agree that no joint venture, partnership, employment, or agency relationship exists between you and BizMatch as a result of this
+                agreement or use of the BizMatch Web Site. BizMatch’s performance of this agreement is subject to existing laws and legal process, and nothing contained in this agreement is in derogation of BizMatch’s
+                right to comply with governmental, court and law enforcement requests or requirements relating to your use of the BizMatch Web Site or information provided to or gathered by BizMatch with respect to such
+                use. If any part of this agreement is determined to be invalid or unenforceable pursuant to applicable law including, but not limited to, the warranty disclaimers and liability limitations set forth
+                above, then the invalid or unenforceable provision will be deemed superseded by a valid, enforceable provision that most closely matches the intent of the original provision and the remainder of the
+                agreement shall continue in effect. Unless otherwise specified herein, this agreement constitutes the entire agreement between the user and BizMatch with respect to the BizMatch Web Site and it supersedes
+                all prior or contemporaneous communications and proposals, whether electronic, oral or written, between the user and BizMatch with respect to the BizMatch Web Site. A printed version of this agreement and
+                of any notice given in electronic form shall be admissible in judicial or administrative proceedings based upon or relating to this agreement to the same extent an d subject to the same conditions as
+                other business documents and records originally generated and maintained in printed form. It is the express wish to the parties that this agreement and all related documents be drawn up in English.</span
+              ><span></span>
+            </p>
+            <p>
+              <b><span>COPYRIGHT AND TRADEMARK NOTICES:</span></b
+              ><span></span>
+            </p>
+            <p><span>All contents of the BizMatch Web Site are: Copyright 2011 by Bizmatch Business Solutions and/or its suppliers. All rights reserved.</span><span></span></p>
+            <p>
+              <b><span>TRADEMARKS</span></b
+              ><span></span>
+            </p>
+            <p><span>The names of actual companies and products mentioned herein may be the trademarks of their respective owners.</span><span></span></p>
+            <p>
+              <span
+                >The example companies, organizations, products, people and events depicted herein are fictitious. No association with any real company, organization, product, person, or event is intended or should be
+                inferred.</span
+              ><span></span>
+            </p>
+            <p><span>Any rights not expressly granted herein are reserved.</span><span></span></p>
+            <p>
+              <b><span>NOTICES AND PROCEDURE FOR MAKING CLAIMS OF COPYRIGHT INFRINGEMENT</span></b
+              ><span></span>
+            </p>
+            <p>
+              <span
+                >Pursuant to Title 17, United States Code, Section 512(c)(2), notifications of claimed copyright infringement under United States copyright law should be sent to Service Provider’s Designated Agent. ALL
+                INQUIRIES NOT RELEVANT TO THE FOLLOWING PROCEDURE WILL RECEIVE NO RESPONSE. See Notice and Procedure for Making Claims of Copyright Infringement.</span
+              ><span
+                ><br />
+                <!--[if !supportLineBreakNewLine]--></span
+              >
+            </p>
+            <p class="MsoNormal">&nbsp;</p>
+            <p class="MsoNormal">
+              We reserve the right to update or revise these Terms of Use at any time without&nbsp;notice. Please check the Terms of Use periodically for changes. The revised&nbsp;terms will be effective immediately as
+              soon as they are posted on the WebSite&nbsp;and by continuing to use the Site you agree to be bound by the revised terms<span
+                ><br />
+                <!--[endif]--></span
+              >
+            </p></span
+          >
+        </div>
+      </section>
+    </article>
+  </section>
+</p-sidebar>

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

@@ -1,25 +1,24 @@
-import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
-import {StyleClassModule} from 'primeng/styleclass';
-import { DropdownModule } from 'primeng/dropdown';
-import { FormsModule } from '@angular/forms';
-import { UserService } from '../../services/user.service';
+import { KeycloakService } from 'keycloak-angular';
+import { SidebarModule } from 'primeng/sidebar';
 import { SharedModule } from '../../shared/shared/shared.module';
-
-
 @Component({
   selector: 'footer',
   standalone: true,
-  imports: [SharedModule],
+  imports: [SharedModule, SidebarModule],
   templateUrl: './footer.component.html',
-  styleUrl: './footer.component.scss'
+  styleUrl: './footer.component.scss',
 })
 export class FooterComponent {
-  constructor(public userService:UserService){}
-  login(){
-		this.userService.login(window.location.href);
-	}
+  privacyVisible = false;
+  termsVisible = false;
+  constructor(public keycloakService: KeycloakService) {}
+  login() {
+    this.keycloakService.login({
+      redirectUri: window.location.href,
+    });
+  }
+  register() {
+    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
+  }
 }

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

@@ -1,11 +1,12 @@
 <div class="wrapper">
-	<div class="pl-3 flex align-items-center gap-2">
-		<a routerLink="/home"><img src="assets/images/header-logo.png" height="40" alt="bizmatch" /></a>
-		<p-tabMenu [model]="tabItems" ariaLabelledBy="label" styleClass="flex" [activeItem]="activeItem">
-		</p-tabMenu>
-		<p-menubar [model]="menuItems"></p-menubar>
-		<div *ngIf="user$ | async as user else empty">Welcome, {{user.firstname}}</div>
-		<ng-template #empty>		
-		</ng-template>
-	</div>
+  <div class="pl-3 flex align-items-center gap-2">
+    <a routerLink="/home"><img src="assets/images/header-logo.png" height="40" alt="bizmatch" /></a>
+    <p-tabMenu [model]="tabItems" ariaLabelledBy="label" styleClass="flex" [activeItem]="activeItem"> </p-tabMenu>
+    <p-menubar [model]="menuItems"></p-menubar>
+    <p-menubar [model]="loginItems"></p-menubar>
+    @if(user){
+    <div>Welcome, {{ user.firstName }}</div>
+    }
+    <ng-template #empty> </ng-template>
+  </div>
 </div>

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

@@ -2,15 +2,16 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { KeycloakService } from 'keycloak-angular';
 import { MenuItem } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { MenubarModule } from 'primeng/menubar';
 import { OverlayPanelModule } from 'primeng/overlaypanel';
 import { TabMenuModule } from 'primeng/tabmenu';
 import { Observable } from 'rxjs';
-import { User } from '../../../../../bizmatch-server/src/models/db.model';
+import { KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
-import { UserService } from '../../services/user.service';
+import { map2User } from '../../utils/utils';
 @Component({
   selector: 'header',
   standalone: true,
@@ -20,69 +21,72 @@ import { UserService } from '../../services/user.service';
 })
 export class HeaderComponent {
   public buildVersion = environment.buildVersion;
-  user$: Observable<User>;
-  user: User;
+  user$: Observable<KeycloakUser>;
+  user: KeycloakUser;
   public tabItems: MenuItem[];
+  public loginItems: MenuItem[];
   public menuItems: MenuItem[];
   activeItem;
   faUserGear = faUserGear;
-  constructor(public userService: UserService, private router: Router) {}
+  constructor(public keycloakService: KeycloakService, private router: Router) {}
 
-  ngOnInit() {
-    this.user$ = this.userService.getUserObservable();
-    this.user$.subscribe(u => {
-      this.user = u;
-      this.menuItems = [
-        {
-          label: 'User Actions',
-          icon: 'fas fa-cog',
-          items: [
-            {
-              label: 'Account',
-              icon: 'pi pi-user',
-              routerLink: `/account`,
-              visible: this.isUserLogedIn(),
-            },
-            {
-              label: 'Create Listing',
-              icon: 'pi pi-plus-circle',
-              routerLink: '/createBusinessListing',
-              visible: this.isUserLogedIn(),
-            },
-            {
-              label: 'My Listings',
-              icon: 'pi pi-list',
-              routerLink: '/myListings',
-              visible: this.isUserLogedIn(),
-            },
-            {
-              label: 'My Favorites',
-              icon: 'pi pi-star',
-              routerLink: '/myFavorites',
-              visible: this.isUserLogedIn(),
-            },
-            {
-              label: 'EMail Us',
-              icon: 'fa-regular fa-envelope',
-              routerLink: '/emailUs',
-              visible: this.isUserLogedIn(),
-            },
-            {
-              label: 'Logout',
-              icon: 'fa-solid fa-right-from-bracket',
-              routerLink: '/logout',
-              visible: this.isUserLogedIn(),
-            },
-            {
-              label: 'Login',
-              icon: 'fa-solid fa-right-from-bracket',
-              command: () => this.login(),
-              visible: !this.isUserLogedIn(),
-            },
-          ],
-        },
-      ];
-    });
+  async ngOnInit() {
+    const token = await this.keycloakService.getToken();
+    this.user = map2User(token);
+    //this.user$ = this.keycloakService
+    // this.user$.subscribe(u => {
+    // this.user = u;
+    this.menuItems = [
+      {
+        label: 'User Actions',
+        icon: 'fas fa-cog',
+        items: [
+          {
+            label: 'Account',
+            icon: 'pi pi-user',
+            routerLink: `/account`,
+            visible: this.keycloakService.isLoggedIn(),
+          },
+          {
+            label: 'Create Listing',
+            icon: 'pi pi-plus-circle',
+            routerLink: '/createBusinessListing',
+            visible: this.keycloakService.isLoggedIn(),
+          },
+          {
+            label: 'My Listings',
+            icon: 'pi pi-list',
+            routerLink: '/myListings',
+            visible: this.keycloakService.isLoggedIn(),
+          },
+          {
+            label: 'My Favorites',
+            icon: 'pi pi-star',
+            routerLink: '/myFavorites',
+            visible: this.keycloakService.isLoggedIn(),
+          },
+          {
+            label: 'EMail Us',
+            icon: 'fa-regular fa-envelope',
+            routerLink: '/emailUs',
+            visible: this.keycloakService.isLoggedIn(),
+          },
+          {
+            label: 'Logout',
+            icon: 'fa-solid fa-right-from-bracket',
+            routerLink: '/logout',
+            visible: this.keycloakService.isLoggedIn(),
+          },
+          {
+            label: 'Login',
+            icon: 'fa-solid fa-right-from-bracket',
+            command: () => this.login(),
+            visible: !this.keycloakService.isLoggedIn(),
+          },
+        ],
+      },
+    ];
+    // });
     this.tabItems = [
       {
         label: 'Businesses for Sale',
@@ -100,16 +104,30 @@ export class HeaderComponent {
         state: {},
       },
     ];
-
+    this.loginItems = [
+      {
+        label: 'Login',
+        command: () => this.login(),
+        visible: !this.keycloakService.isLoggedIn(),
+      },
+      {
+        label: 'Register',
+        command: () => this.register(),
+        visible: !this.keycloakService.isLoggedIn(),
+      },
+    ];
     this.activeItem = this.tabItems[0];
   }
+
   navigateWithState(dest: string, state: any) {
     this.router.navigate([dest], { state: state });
   }
-  isUserLogedIn() {
-    return this.userService?.isLoggedIn();
-  }
   login() {
-    this.userService.login(window.location.href);
+    this.keycloakService.login({
+      redirectUri: window.location.href,
+    });
+  }
+  register() {
+    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
   }
 }

bizmatch/src/app/components/image-cropper/image-cropper.component.html

@@ -1,15 +1,14 @@
 <angular-cropper #cropper [imageUrl]="imageUrl" [cropperOptions]="cropperConfig"></angular-cropper>
 <div class="flex justify-content-between mt-3">
-    @if(ratioVariable){
-    <div>
-        <p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)"
-            optionLabel="label" optionValue="value"></p-selectButton>
-    </div>
-    } @else {
-    <div></div>
-    }
-    <div>
-        <p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true"></p-button>
-        <p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true"></p-button>
-    </div>
+  @if(ratioVariable){
+  <div>
+    <p-selectButton [options]="stateOptions" [ngModel]="value" (ngModelChange)="changeAspectRation($event)" optionLabel="label" optionValue="value" class="small"></p-selectButton>
+  </div>
+  } @else {
+  <div></div>
+  }
+  <div class="flex justify-content-between">
+    <p-button icon="pi" (click)="cancelUpload()" label="Cancel" [outlined]="true" size="small" class="mr-2"></p-button>
+    <p-button icon="pi pi-check" (click)="sendImage()" label="Finish" pAutoFocus [autofocus]="true" size="small"></p-button>
+  </div>
 </div>

bizmatch/src/app/components/image-cropper/image-cropper.component.scss

@@ -0,0 +1,4 @@
+::ng-deep p-selectbutton.small .p-button {
+  font-size: 0.875rem;
+  padding: 0.65625rem 1.09375rem;
+}

bizmatch/src/app/components/image-cropper/image-cropper.component.ts

@@ -1,67 +1,52 @@
 import { Component, ViewChild } from '@angular/core';
 import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
-import { LoadingService } from '../../services/loading.service';
-import { ImageService } from '../../services/image.service';
-import { HttpEventType } from '@angular/common/http';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
-import { environment } from '../../../environments/environment';
-import {  User } from '../../../../../bizmatch-server/src/models/db.model';
-import { SharedModule } from '../../shared/shared/shared.module';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { KeyValueRatio } from '../../../../../bizmatch-server/src/models/main.model';
-export const stateOptions:KeyValueRatio[]=[
-  {label:'16/9',value:16/9},
-  {label:'1/1',value:1},
-  {label:'2/3',value:2/3},
-]
+import { ImageService } from '../../services/image.service';
+import { LoadingService } from '../../services/loading.service';
+import { SharedModule } from '../../shared/shared/shared.module';
+export const stateOptions: KeyValueRatio[] = [
+  { label: '16/9', value: 16 / 9 },
+  { label: '1/1', value: 1 },
+  { label: 'Free', value: NaN },
+];
 @Component({
   selector: 'app-image-cropper',
   standalone: true,
-  imports: [SharedModule,FileUploadModule,AngularCropperjsModule,SelectButtonModule],
+  imports: [SharedModule, FileUploadModule, AngularCropperjsModule, SelectButtonModule],
   templateUrl: './image-cropper.component.html',
-  styleUrl: './image-cropper.component.scss'
+  styleUrl: './image-cropper.component.scss',
 })
 export class ImageCropperComponent {
   @ViewChild(CropperComponent) public angularCropper: CropperComponent;
-  imageUrl:string; //wird im Template verwendet
-  fileUpload:FileUpload
-  value:number = stateOptions[0].value;
-  cropperConfig={aspectRatio: this.value}  
-  ratioVariable:boolean
-  stateOptions=stateOptions
-  constructor(
-    private loadingService:LoadingService,
-    private imageUploadService: ImageService,    
-    public config: DynamicDialogConfig,
-    public ref: DynamicDialogRef
-  ){}
+  imageUrl: string; //wird im Template verwendet
+  fileUpload: FileUpload;
+  value: number = stateOptions[0].value;
+  cropperConfig = { aspectRatio: this.value };
+  ratioVariable: boolean;
+  stateOptions = stateOptions;
+  constructor(private loadingService: LoadingService, private imageUploadService: ImageService, public config: DynamicDialogConfig, public ref: DynamicDialogRef) {}
   ngOnInit(): void {
     if (this.config.data) {
-        this.imageUrl = this.config.data.imageUrl;
-        this.fileUpload = this.config.data.fileUpload;
-        this.cropperConfig = this.config.data.config ? this.config.data.config: this.cropperConfig;
-        this.ratioVariable = this.config.data.ratioVariable;
+      this.imageUrl = this.config.data.imageUrl;
+      this.fileUpload = this.config.data.fileUpload;
+      this.cropperConfig = this.config.data.config ? this.config.data.config : this.cropperConfig;
+      this.ratioVariable = this.config.data.ratioVariable;
     }
   }
-  sendImage(){
-    // setTimeout(()=>{
-      // this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
-      //   this.ref.close(blob);
-      //   this.fileUpload.clear()
-      // }, 'image/jpg');  
-    // },0)
-
-    this.fileUpload.clear()
+  sendImage() {
+    this.fileUpload.clear();
     this.ref.close(this.angularCropper.cropper);
   }
 
-  cancelUpload(){
+  cancelUpload() {
     this.fileUpload.clear();
     this.ref.close();
   }
-  changeAspectRation(ratio:number){
-    this.cropperConfig={aspectRatio: ratio}
+  changeAspectRation(ratio: number) {
+    this.cropperConfig = { aspectRatio: ratio };
     this.angularCropper.cropper.setAspectRatio(ratio);
   }
 }

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

@@ -1,16 +1,17 @@
-import { Component } from '@angular/core';
-import { UserService } from '../../services/user.service';
 import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
 
 @Component({
   selector: 'logout',
   standalone: true,
-  imports: [CommonModule,RouterModule],
-  template:``
+  imports: [CommonModule, RouterModule],
+  template: ``,
 })
 export class LogoutComponent {
-  constructor(private userService:UserService){
-    userService.logout();
+  constructor(public keycloakService: KeycloakService) {
+    sessionStorage.removeItem('USERID');
+    keycloakService.logout(window.location.origin + '/home');
   }
 }

bizmatch/src/app/components/not-found/not-found.component.html

@@ -0,0 +1 @@
+<p>not-found works!</p>

bizmatch/src/app/components/not-found/not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-not-found',
+  standalone: true,
+  template: '<h2>Page not found</h2>',
+})
+export class NotFoundComponent {}

bizmatch/src/app/guards/auth.guard.ts

@@ -1,38 +1,42 @@
-import { CanMatchFn, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { inject } from '@angular/core';
-
-// Services
-import { UserService } from '../services/user.service';
-
-export const authGuard: CanMatchFn = async (route, segments): Promise<boolean | UrlTree> => {
-  const router = inject(Router);
-  const userService = inject(UserService);
-
-  const authenticated: boolean = userService.isLoggedIn();
-  if (!authenticated) {
-    console.log(window.location.origin)
-    console.log(window.location.href)
-    await userService.login(`${window.location.origin}${segments['url']}`);
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { KeycloakAuthGuard, KeycloakService } from 'keycloak-angular';
+import { KeycloakInitializerService } from '../services/keycloak-initializer.service';
+import { createLogger } from '../utils/utils';
+const logger = createLogger('AuthGuard');
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard extends KeycloakAuthGuard {
+  constructor(protected override readonly router: Router, protected readonly keycloak: KeycloakService, private keycloakInitializer: KeycloakInitializerService) {
+    super(router, keycloak);
   }
 
-  // Get the user Keycloak roles and the required from the route
-  const roles: string[] = userService.getUserRoles();//keycloakService.getUserRoles(true);
-  const requiredRoles = route.data?.['roles'];
+  async isAccessAllowed(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean | UrlTree> {
+    logger.info(`--->AuthGuard`);
+    while (!this.keycloakInitializer.initialized) {
+      logger.info(`Waiting 100 msec`);
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+    // Force the user to log in if currently unauthenticated.
+    const authenticated = this.keycloak.isLoggedIn();
+    //this.keycloak.isTokenExpired()
+    if (!this.authenticated && !authenticated) {
+      await this.keycloak.login({
+        redirectUri: window.location.origin + state.url,
+      });
+      // return false;
+    }
 
-  // Allow the user to proceed if no additional roles are required to access the route
-  if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) {
-    return true;
+    // Get the roles required from the route.
+    const requiredRoles = route.data['roles'];
+
+    // Allow the user to proceed if no additional roles are required to access the route.
+    if (!Array.isArray(requiredRoles) || requiredRoles.length === 0) {
+      return true;
+    }
+
+    // Allow the user to proceed if all the required roles are present.
+    return requiredRoles.every(role => this.roles.includes(role));
   }
-
-  // Allow the user to proceed if ALL of the required roles are present
-  const authorized = requiredRoles.every((role) => roles.includes(role));
-  // Allow the user to proceed if ONE of the required roles is present
-  //const authorized = requiredRoles.some((role) => roles.includes(role));
-
-  if (authorized) {
-    return true;
-  }
-
-  // Display my custom HTTP 403 access denied page
-  return router.createUrlTree(['/access']);
-};
+}

bizmatch/src/app/guards/listing-category.guard.ts

@@ -0,0 +1,35 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+import { environment } from '../../environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ListingCategoryGuard implements CanActivate {
+  private apiBaseUrl = environment.apiBaseUrl;
+  constructor(private http: HttpClient, private router: Router) {}
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
+    const id = route.paramMap.get('id');
+    const url = `${this.apiBaseUrl}/bizmatch/listings/undefined/${id}`;
+
+    return this.http.get<any>(url).pipe(
+      map(response => {
+        const category = response.listingsCategory;
+        if (category === 'business') {
+          return this.router.createUrlTree([`/details-business-listing/${id}`]);
+        } else if (category === 'commercialProperty') {
+          return this.router.createUrlTree([`/details-commercial-property-listing/${id}`]);
+        } else {
+          return this.router.createUrlTree(['/not-found']);
+        }
+      }),
+      catchError(() => {
+        return of(this.router.createUrlTree(['/not-found']));
+      }),
+    );
+  }
+}

bizmatch/src/app/interceptors/keycloak-bearer.interceptor.ts

@@ -1,77 +0,0 @@
-import { Injectable, inject } from '@angular/core';
-import {
-  HttpInterceptor,
-  HttpRequest,
-  HttpHandler,
-  HttpEvent,
-  HttpInterceptorFn,
-  HttpHandlerFn,
-} from '@angular/common/http';
-
-import { Observable, combineLatest, from, of } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
-
-import { KeycloakService } from '../services/keycloak.service';
-import { ExcludedUrlRegex } from '../models/keycloak-options';
-
-export const keycloakBearerInterceptor: HttpInterceptorFn = (req, next) => {
-  //return next(req);
-  const keycloak = inject(KeycloakService);
-  const { enableBearerInterceptor, excludedUrls } = keycloak;
-  if (!enableBearerInterceptor) {
-    return next(req);
-  }
-
-  const shallPass: boolean =
-    !keycloak.shouldAddToken(req) ||
-    excludedUrls.findIndex((item) => isUrlExcluded(req, item)) > -1;
-  if (shallPass) {
-    return next(req);
-  }
-
-  return combineLatest([
-    from(conditionallyUpdateToken(req)),
-    of(keycloak.isLoggedIn()),
-  ]).pipe(
-    mergeMap(([_, isLoggedIn]) =>
-      isLoggedIn ? handleRequestWithTokenHeader(req, next) : next(req)
-    )
-  );
-};
-
-function isUrlExcluded(
-  { method, url }: HttpRequest<unknown>,
-  { urlPattern, httpMethods }: ExcludedUrlRegex
-): boolean {
-  const httpTest =
-    httpMethods.length === 0 ||
-    httpMethods.join().indexOf(method.toUpperCase()) > -1;
-
-  const urlTest = urlPattern.test(url);
-
-  return httpTest && urlTest;
-}
-
-function handleRequestWithTokenHeader(
-  req: HttpRequest<unknown>,
-  next: HttpHandlerFn
-): Observable<HttpEvent<unknown>> {
-  return this.keycloak.addTokenToHeader(req.headers).pipe(
-    mergeMap((headersWithBearer:string) => {
-      const kcReq = req.clone({
-        headers: req.headers.set('Authorization', headersWithBearer)
-      });//req.clone({ headers: headersWithBearer });
-      return next(kcReq);
-    })
-  );
-}
-
-async function conditionallyUpdateToken(
-  req: HttpRequest<unknown>
-): Promise<boolean> {
-  if (this.keycloak.shouldUpdateToken(req)) {
-    return await this.keycloak.updateToken();
-  }
-
-  return true;
-}

bizmatch/src/app/interceptors/loading.interceptor.ts

@@ -1,24 +1,22 @@
-import { HttpEvent, HttpHandler, HttpInterceptor, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
-import { Injectable, inject } from '@angular/core';
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { Injectable } from '@angular/core';
 import { Observable, tap } from 'rxjs';
 import { v4 } from 'uuid';
 import { LoadingService } from '../services/loading.service';
 
 @Injectable()
 export class LoadingInterceptor implements HttpInterceptor {
-    constructor(private loadingService:LoadingService) { }
-    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
-        console.log("Intercepting Requests")
-		const requestId = `HTTP-${v4()}`;
-		this.loadingService.startLoading(requestId,request.url);
+  constructor(private loadingService: LoadingService) {}
+  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+    const requestId = `HTTP-${v4()}`;
+    this.loadingService.startLoading(requestId, request.url);
 
-        // return next.handle(request);
-		return next.handle(request).pipe(
-			tap({
-			  finalize: () => this.loadingService.stopLoading(requestId), // Stoppt den Ladevorgang, wenn die Anfrage abgeschlossen ist
-			  // Beachte, dass 'error' und 'complete' hier entfernt wurden, da 'finalize' in allen Fällen aufgerufen wird,
-			  // egal ob die Anfrage erfolgreich war, einen Fehler geworfen hat oder abgeschlossen wurde.
-			})
-		  );
-    }
+    return next.handle(request).pipe(
+      tap({
+        finalize: () => this.loadingService.stopLoading(requestId), // Stoppt den Ladevorgang, wenn die Anfrage abgeschlossen ist
+        // Beachte, dass 'error' und 'complete' hier entfernt wurden, da 'finalize' in allen Fällen aufgerufen wird,
+        // egal ob die Anfrage erfolgreich war, einen Fehler geworfen hat oder abgeschlossen wurde.
+      }),
+    );
+  }
 }

bizmatch/src/app/models/keycloak-event.ts

@@ -1,52 +0,0 @@
-export enum KeycloakEventType {
-    /**
-     * Called if there was an error during authentication.
-     */
-    OnAuthError,
-    /**
-     * Called if the user is logged out
-     * (will only be called if the session status iframe is enabled, or in Cordova mode).
-     */
-    OnAuthLogout,
-    /**
-     * Called if there was an error while trying to refresh the token.
-     */
-    OnAuthRefreshError,
-    /**
-     * Called when the token is refreshed.
-     */
-    OnAuthRefreshSuccess,
-    /**
-     * Called when a user is successfully authenticated.
-     */
-    OnAuthSuccess,
-    /**
-     * Called when the adapter is initialized.
-     */
-    OnReady,
-    /**
-     * Called when the access token is expired. If a refresh token is available the token
-     * can be refreshed with updateToken, or in cases where it is not (that is, with implicit flow)
-     * you can redirect to login screen to obtain a new access token.
-     */
-    OnTokenExpired,
-    /**
-     * Called when a AIA has been requested by the application.
-     */
-    OnActionUpdate
-  }
-  
-  /**
-   * Structure of an event triggered by Keycloak, contains it's type
-   * and arguments (if any).
-   */
-  export interface KeycloakEvent {
-    /**
-     * Event type as described at {@link KeycloakEventType}.
-     */
-    type: KeycloakEventType;
-    /**
-     * Arguments from the keycloak-js event function.
-     */
-    args?: unknown;
-  }

bizmatch/src/app/models/keycloak-options.ts

@@ -1,142 +0,0 @@
-/**
- * @license
- * Copyright Mauricio Gemelli Vigolo and contributors.
- *
- * Use of this source code is governed by a MIT-style license that can be
- * found in the LICENSE file at https://github.com/mauriciovigolo/keycloak-angular/blob/main/LICENSE.md
- */
-
-import { HttpRequest } from '@angular/common/http';
-
-/**
- * HTTP Methods
- */
-export type HttpMethods =
-  | 'GET'
-  | 'POST'
-  | 'PUT'
-  | 'DELETE'
-  | 'OPTIONS'
-  | 'HEAD'
-  | 'PATCH';
-
-/**
- * ExcludedUrl type may be used to specify the url and the HTTP method that
- * should not be intercepted by the KeycloakBearerInterceptor.
- *
- * Example:
- * const excludedUrl: ExcludedUrl[] = [
- *  {
- *    url: 'reports/public'
- *    httpMethods: ['GET']
- *  }
- * ]
- *
- * In the example above for URL reports/public and HTTP Method GET the
- * bearer will not be automatically added.
- *
- * If the url is informed but httpMethod is undefined, then the bearer
- * will not be added for all HTTP Methods.
- */
-export interface ExcludedUrl {
-  url: string;
-  httpMethods?: HttpMethods[];
-}
-
-/**
- * Similar to ExcludedUrl, contains the HTTP methods and a regex to
- * include the url patterns.
- * This interface is used internally by the KeycloakService.
- */
-export interface ExcludedUrlRegex {
-  urlPattern: RegExp;
-  httpMethods?: HttpMethods[];
-}
-
-/**
- * keycloak-angular initialization options.
- */
-export interface KeycloakOptions {
-  /**
-   * Configs to init the keycloak-js library. If undefined, will look for a keycloak.json file
-   * at root of the project.
-   * If not undefined, can be a string meaning the url to the keycloak.json file or an object
-   * of {@link Keycloak.KeycloakConfig}. Use this configuration if you want to specify the keycloak server,
-   * realm, clientId. This is usefull if you have different configurations for production, stage
-   * and development environments. Hint: Make use of Angular environment configuration.
-   */
-  config?: string | Keycloak.KeycloakConfig;
-  /**
-   * Options to initialize the Keycloak adapter, matches the options as provided by Keycloak itself.
-   */
-  initOptions?: Keycloak.KeycloakInitOptions;
-  /**
-   * By default all requests made by Angular HttpClient will be intercepted in order to
-   * add the bearer in the Authorization Http Header. However, if this is a not desired
-   * feature, the enableBearerInterceptor must be false.
-   *
-   * Briefly, if enableBearerInterceptor === false, the bearer will not be added
-   * to the authorization header.
-   *
-   * The default value is true.
-   */
-  enableBearerInterceptor?: boolean;
-  /**
-   * Forces the execution of loadUserProfile after the keycloak initialization considering that the
-   * user logged in.
-   * This option is recommended if is desirable to have the user details at the beginning,
-   * so after the login, the loadUserProfile function will be called and its value cached.
-   *
-   * The default value is true.
-   */
-  loadUserProfileAtStartUp?: boolean;
-  /**
-   * @deprecated
-   * String Array to exclude the urls that should not have the Authorization Header automatically
-   * added. This library makes use of Angular Http Interceptor, to automatically add the Bearer
-   * token to the request.
-   */
-  bearerExcludedUrls?: (string | ExcludedUrl)[];
-  /**
-   * This value will be used as the Authorization Http Header name. The default value is
-   * **Authorization**. If the backend expects requests to have a token in a different header, you
-   * should change this value, i.e: **JWT-Authorization**. This will result in a Http Header
-   * Authorization as "JWT-Authorization: bearer <token>".
-   */
-  authorizationHeaderName?: string;
-  /**
-   * This value will be included in the Authorization Http Header param. The default value is
-   * **Bearer**, which will result in a Http Header Authorization as "Authorization: Bearer <token>".
-   *
-   * If any other value is needed by the backend in the authorization header, you should change this
-   * value.
-   *
-   * Warning: this value must be in compliance with the keycloak server instance and the adapter.
-   */
-  bearerPrefix?: string;
-  /**
-   * This value will be used to determine whether or not the token needs to be updated. If the token
-   * will expire is fewer seconds than the updateMinValidity value, then it will be updated.
-   *
-   * The default value is 20.
-   */
-  updateMinValidity?: number;
-  /**
-   * A function that will tell the KeycloakBearerInterceptor whether to add the token to the request
-   * or to leave the request as it is. If the returned value is `true`, the request will have the token
-   * present on it. If it is `false`, the token will be left off the request.
-   *
-   * The default is a function that always returns `true`.
-   */
-  shouldAddToken?: (request: HttpRequest<unknown>) => boolean;
-  /**
-   * A function that will tell the KeycloakBearerInterceptor if the token should be considered for
-   * updating as a part of the request being made. If the returned value is `true`, the request will
-   * check the token's expiry time and if it is less than the number of seconds configured by
-   * updateMinValidity then it will be updated before the request is made. If the returned value is
-   * false, the token will not be updated.
-   *
-   * The default is a function that always returns `true`.
-   */
-  shouldUpdateToken?: (request: HttpRequest<unknown>) => boolean;
-}

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

@@ -4,7 +4,9 @@
       <div class="flex justify-content-between align-items-center align-content-center">
         <div class="font-medium text-3xl text-900 mb-3">{{ listing?.title }}</div>
         <!-- <button pButton pRipple type="button" label="Go back to listings" icon="pi pi-user-plus" class="mr-3 p-button-rounded"></button> -->
-        <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
+        @if(historyService.canGoBack){
+        <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="historyService.goBack()"></p-button>
+        }
       </div>
       <!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
       @if(listing){
@@ -12,52 +14,72 @@
         <div class="col-12 md:col-6">
           <ul class="list-none p-0 m-0 border-top-1 border-300">
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium flex align-self-start">Description</div>
-              <div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
+              <div class="text-500 w-full md:w-3 font-medium flex">Description</div>
+              <div class="text-900 w-full md:w-9 line-height-3 flex flex-column" [innerHTML]="description"></div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Category</div>
-              <div class="text-900 w-full md:w-10">
+              <div class="text-500 w-full md:w-3 font-medium">Category</div>
+              <div class="text-900 w-full md:w-9">
                 <p-chip [label]="selectOptions.getBusiness(listing.type)"></p-chip>
               </div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Located in</div>
-              <div class="text-900 w-full md:w-10">{{ selectOptions.getState(listing.state) }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Located in</div>
+              <div class="text-900 w-full md:w-9">{{ listing.city }}, {{ selectOptions.getState(listing.state) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Asking Price</div>
-              <div class="text-900 w-full md:w-10">{{ listing.price | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Asking Price</div>
+              <div class="text-900 w-full md:w-9">{{ listing.price | currency }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Real Estate Included</div>
-              <div class="text-900 w-full md:w-10">{{ listing.realEstateIncluded ? 'Yes' : 'No' }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Sales revenue</div>
+              <div class="text-900 w-full md:w-9">{{ listing.salesRevenue | currency }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Sales revenue</div>
-              <div class="text-900 w-full md:w-10">{{ listing.salesRevenue | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Cash flow</div>
+              <div class="text-900 w-full md:w-9">{{ listing.cashFlow | currency }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Cash flow</div>
-              <div class="text-900 w-full md:w-10">{{ listing.cashFlow | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Type of Real Estate</div>
+              <div class="text-900 w-full md:w-9">
+                @if (listing.realEstateIncluded){
+                <p-chip label="Real Estate Included"></p-chip>
+                } @if (listing.leasedLocation){
+                <p-chip label="Leased Location"></p-chip>
+                } @if (listing.franchiseResale){
+                <p-chip label="Franchise Re-Sale"></p-chip>
+                }
+              </div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Employees</div>
-              <div class="text-900 w-full md:w-10">{{ listing.employees }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Employees</div>
+              <div class="text-900 w-full md:w-9">{{ listing.employees }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Broker licensing</div>
-              <div class="text-900 w-full md:w-10">{{ listing.brokerLicencing }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Established since</div>
+              <div class="text-900 w-full md:w-9">{{ listing.established }}</div>
+            </li>
+            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
+              <div class="text-500 w-full md:w-3 font-medium">Support & Training</div>
+              <div class="text-900 w-full md:w-9">{{ listing.supportAndTraining }}</div>
+            </li>
+            <li class="flex align-items-center py-3 px-2 flex-wrap">
+              <div class="text-500 w-full md:w-3 font-medium">Reason for Sale</div>
+              <div class="text-900 w-full md:w-9">{{ listing.reasonForSale }}</div>
+            </li>
+            <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
+              <div class="text-500 w-full md:w-3 font-medium">Broker licensing</div>
+              <div class="text-900 w-full md:w-9">{{ listing.brokerLicencing }}</div>
             </li>
           </ul>
-          @if(listing && user && (user.id===listing?.userId || isAdmin())){
+          @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
           <button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editBusinessListing', listing.id]"></button>
           }
         </div>
         <div class="col-12 md:col-6">
           <div class="surface-card p-4 border-round p-fluid">
-            <div class="font-medium text-xl text-primary text-900 mb-3">Contact The Author of This Listing</div>
-            <div class="font-italic text-sm text-900 mb-5">Please Include your contact info below:</div>
+            <div class="font-medium text-xl text-primary text-900 mb-3">Contact the Author of this Listing</div>
+            <div class="font-italic text-sm text-900 mb-5">Please include your contact info below</div>
             <div class="grid formgrid p-fluid">
               <div class="field mb-4 col-12 md:col-6">
                 <label for="name" class="font-medium text-900">Your Name</label>
@@ -69,7 +91,8 @@
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="phoneNumber" class="font-medium text-900">Phone Number</label>
-                <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" />
+                <!-- <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" /> -->
+                <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="state" class="font-medium text-900">Country/State</label>
@@ -80,7 +103,14 @@
                 <label for="notes" class="font-medium text-900">Questions/Comments</label>
                 <textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5" [(ngModel)]="mailinfo.sender.comments"></textarea>
               </div>
-              <div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
+              @if(listingUser){
+              <div class="surface-border mb-4 col-12 flex align-items-center">
+                Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2 font-semibold">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
+                @if(listingUser.hasCompanyLogo){
+                <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
+                }
+              </div>
+              }
             </div>
             <button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto" (click)="mail()"></button>
           </div>

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

@@ -1,25 +1,26 @@
-import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
 import { MessageService } from 'primeng/api';
 import { GalleriaModule } from 'primeng/galleria';
+import { InputMaskModule } from 'primeng/inputmask';
 import { lastValueFrom } from 'rxjs';
 import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakUser, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { HistoryService } from '../../../services/history.service';
 import { ListingsService } from '../../../services/listings.service';
 import { MailService } from '../../../services/mail.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
-import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
-
+import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../../utils/utils';
 @Component({
   selector: 'app-details-business-listing',
   standalone: true,
-  imports: [SharedModule, GalleriaModule],
+  imports: [SharedModule, GalleriaModule, InputMaskModule],
   providers: [MessageService],
   templateUrl: './details-business-listing.component.html',
   styleUrl: './details-business-listing.component.scss',
@@ -48,8 +49,13 @@ export class DetailsBusinessListingComponent {
   criteria: ListingCriteria;
   mailinfo: MailInfo;
   environment = environment;
+  keycloakUser: KeycloakUser;
   user: User;
+  listingUser: User;
   description: SafeHtml;
+  private history: string[] = [];
+  ts = new Date().getTime();
+  env = environment;
   constructor(
     private activatedRoute: ActivatedRoute,
     private listingsService: ListingsService,
@@ -59,27 +65,35 @@ export class DetailsBusinessListingComponent {
     private mailService: MailService,
     private messageService: MessageService,
     private sanitizer: DomSanitizer,
-    private location: Location,
+    public historyService: HistoryService,
+    public keycloakService: KeycloakService,
   ) {
-    this.mailinfo = { sender: {}, userId: '', email: '' };
-    this.userService.getUserObservable().subscribe(user => {
-      this.user = user;
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationEnd) {
+        this.history.push(event.urlAfterRedirects);
+      }
     });
+    this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
   }
 
   async ngOnInit() {
+    const token = await this.keycloakService.getToken();
+    this.keycloakUser = map2User(token);
+    if (this.keycloakUser) {
+      this.user = await this.userService.getByMail(this.keycloakUser.email);
+      this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.phoneNumber, state: this.user.companyLocation };
+    }
     this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
+    this.listingUser = await this.userService.getById(this.listing.userId);
     this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
   }
-  back() {
-    this.location.back();
-  }
+
   isAdmin() {
-    return this.userService.hasAdminRole();
+    return this.keycloakService.getUserRoles(true).includes('ADMIN');
   }
   async mail() {
-    this.mailinfo.email = this.user.email;
+    this.mailinfo.email = this.listingUser.email;
     this.mailinfo.userId = this.listing.userId;
     this.mailinfo.listing = this.listing;
     await this.mailService.mail(this.mailinfo);

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

@@ -1,10 +1,12 @@
 <div class="surface-ground h-full">
   <div class="px-6 py-5">
     <div class="surface-card p-4 shadow-2 border-round">
-      <div class="flex justify-content-between align-items-center align-content-center">
+      <div class="flex justify-content-between align-items-center align-content-center mb-2">
         <div class="font-medium text-3xl text-900 mb-3">{{ listing?.title }}</div>
         <!-- <button pButton pRipple type="button" label="Go back to listings" icon="pi pi-user-plus" class="mr-3 p-button-rounded"></button> -->
-        <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
+        @if(historyService.canGoBack){
+        <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="historyService.goBack()"></p-button>
+        }
       </div>
       <!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
       @if(listing){
@@ -12,52 +14,54 @@
         <div class="col-12 md:col-6">
           <ul class="list-none p-0 m-0 border-top-1 border-300">
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium flex align-self-start">Description</div>
-              <div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
+              <div class="text-500 w-full md:w-3 font-medium flex">Description</div>
+              <div class="text-900 w-full md:w-9 line-height-3" [innerHTML]="description"></div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">Property Category</div>
-              <div class="text-900 w-full md:w-10">{{ selectOptions.getCommercialProperty(listing.type) }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Property Category</div>
+              <div class="text-900 w-full md:w-9">{{ selectOptions.getCommercialProperty(listing.type) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Located in</div>
-              <div class="text-900 w-full md:w-10">{{ selectOptions.getState(listing.state) }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Located in</div>
+              <div class="text-900 w-full md:w-9">{{ selectOptions.getState(listing.state) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">City</div>
-              <div class="text-900 w-full md:w-10">{{ listing.city }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">City</div>
+              <div class="text-900 w-full md:w-9">{{ listing.city }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Zip Code</div>
-              <div class="text-900 w-full md:w-10">{{ listing.zipCode }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Zip Code</div>
+              <div class="text-900 w-full md:w-9">{{ listing.zipCode }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
-              <div class="text-500 w-full md:w-2 font-medium">County</div>
-              <div class="text-900 w-full md:w-10">{{ listing.county }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">County</div>
+              <div class="text-900 w-full md:w-9">{{ listing.county }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Asking Price:</div>
-              <div class="text-900 w-full md:w-10">{{ listing.price | currency }}</div>
+              <div class="text-500 w-full md:w-3 font-medium">Asking Price:</div>
+              <div class="text-900 w-full md:w-9">{{ listing.price | currency }}</div>
             </li>
           </ul>
-          <p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
-            <ng-template pTemplate="item" let-item>
-              <img src="pictures/property/{{ listing.imagePath }}/{{ item }}" style="width: 100%" />
-            </ng-template>
-          </p-galleria>
-          @if(listing && user && (user.id===listing?.userId || isAdmin())){
+
+          @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
           <button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editCommercialPropertyListing', listing.id]"></button>
           }
         </div>
-        @if (mailinfo){
+
         <div class="col-12 md:col-6">
+          <p-galleria [value]="listing.imageOrder" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
+            <ng-template pTemplate="item" let-item>
+              <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ item }}" style="width: 100%" />
+            </ng-template>
+          </p-galleria>
+          @if (mailinfo){
           <div class="surface-card p-4 border-round p-fluid">
-            <div class="font-medium text-xl text-primary text-900 mb-3">Contact The Author of This Listing</div>
-            <div class="font-italic text-sm text-900 mb-5">Please Include your contact info below:</div>
+            <div class="font-medium text-xl text-primary text-900 mb-3">Contact the Author of this Listing</div>
+            <div class="font-italic text-sm text-900 mb-5">Please include your contact info below</div>
             <div class="grid formgrid p-fluid">
               <div class="field mb-4 col-12 md:col-6">
                 <label for="name" class="font-medium text-900">Your Name</label>
-                <input id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
+                <input [ngClass]="{ 'ng-invalid': containsError('name'), 'ng-dirty': containsError('name') }" id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="email" class="font-medium text-900">Your Email</label>
@@ -65,7 +69,8 @@
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="phoneNumber" class="font-medium text-900">Phone Number</label>
-                <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" />
+                <!-- <input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" /> -->
+                <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
               </div>
               <div class="field mb-4 col-12 md:col-6">
                 <label for="state" class="font-medium text-900">Country/State</label>
@@ -76,12 +81,19 @@
                 <label for="notes" class="font-medium text-900">Questions/Comments</label>
                 <textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5" [(ngModel)]="mailinfo.sender.comments"></textarea>
               </div>
-              <div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
+              @if(listingUser){
+              <div class="surface-border mb-4 col-12 flex align-items-center">
+                Listing by &nbsp;<a routerLink="/details-user/{{ listingUser.id }}" class="mr-2 font-semibold">{{ listingUser.firstname }} {{ listingUser.lastname }}</a>
+                @if(listingUser.hasCompanyLogo){
+                <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imagePath }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 30px; max-width: 100px" />
+                }
+              </div>
+              }
             </div>
             <button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto" (click)="mail()"></button>
           </div>
+          }
         </div>
-        }
       </div>
       }
     </div>

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

@@ -1,31 +1,33 @@
-import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
 import { MessageService } from 'primeng/api';
 import { GalleriaModule } from 'primeng/galleria';
+import { InputMaskModule } from 'primeng/inputmask';
 import { lastValueFrom } from 'rxjs';
 import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
+import { ErrorResponse, KeycloakUser, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { HistoryService } from '../../../services/history.service';
+import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { MailService } from '../../../services/mail.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
-import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
+import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../../../utils/utils';
 
 @Component({
   selector: 'app-details-commercial-property-listing',
   standalone: true,
-  imports: [SharedModule, GalleriaModule],
+  imports: [SharedModule, GalleriaModule, InputMaskModule],
   providers: [MessageService],
   templateUrl: './details-commercial-property-listing.component.html',
   styleUrl: './details-commercial-property-listing.component.scss',
 })
 export class DetailsCommercialPropertyListingComponent {
-  // listings: Array<BusinessListing>;
   responsiveOptions = [
     {
       breakpoint: '1199px',
@@ -47,10 +49,14 @@ export class DetailsCommercialPropertyListingComponent {
   listing: CommercialPropertyListing;
   criteria: ListingCriteria;
   mailinfo: MailInfo;
-  propertyImages: string[] = [];
   environment = environment;
+  keycloakUser: KeycloakUser;
   user: User;
+  listingUser: User;
   description: SafeHtml;
+  ts = new Date().getTime();
+  env = environment;
+  errorResponse: ErrorResponse;
   constructor(
     private activatedRoute: ActivatedRoute,
     private listingsService: ListingsService,
@@ -60,31 +66,42 @@ export class DetailsCommercialPropertyListingComponent {
     private mailService: MailService,
     private messageService: MessageService,
     private sanitizer: DomSanitizer,
-    private location: Location,
+    public historyService: HistoryService,
+    public keycloakService: KeycloakService,
+    private imageService: ImageService,
   ) {
-    this.mailinfo = { sender: {}, userId: '', email: '' };
-    this.userService.getUserObservable().subscribe(user => {
-      this.user = user;
-    });
+    this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
+
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
   }
 
   async ngOnInit() {
+    const token = await this.keycloakService.getToken();
+    this.keycloakUser = map2User(token);
+    if (this.keycloakUser) {
+      this.user = await this.userService.getByMail(this.keycloakUser.email);
+      this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.phoneNumber, state: this.user.companyLocation };
+    }
     this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
-    this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
+    this.listingUser = await this.userService.getById(this.listing.userId);
     this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
   }
-  back() {
-    this.location.back();
-  }
   isAdmin() {
-    return this.userService.hasAdminRole();
+    return this.keycloakService.getUserRoles(true).includes('ADMIN');
   }
   async mail() {
-    this.mailinfo.email = this.user.email;
+    this.mailinfo.email = this.listingUser.email;
     this.mailinfo.userId = this.listing.userId;
     this.mailinfo.listing = this.listing;
-    await this.mailService.mail(this.mailinfo);
-    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your message has been sent to the creator of the listing', life: 3000 });
+    const result = await this.mailService.mail(this.mailinfo);
+    if (result) {
+      this.errorResponse = result as ErrorResponse;
+    } else {
+      this.errorResponse = null;
+      this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your message has been sent to the creator of the listing', life: 3000 });
+    }
+  }
+  containsError(fieldname: string) {
+    return this.errorResponse?.fields.map(f => f.fieldname).includes(fieldname);
   }
 }

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

@@ -2,15 +2,11 @@
   <div class="px-6 py-5">
     @if (user){
     <div class="surface-card p-4 shadow-2 border-round">
-      <!-- <div class="flex justify-content-between align-items-center align-content-center">
-                <div class="font-medium text-3xl text-900 mb-3">{{listing?.title}}</div>
-                <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
-            </div> -->
       <div class="surface-section px-6 pt-5">
         <div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between">
           <div class="flex align-items-start flex-column md:flex-row">
             @if(user.hasProfile){
-            <img src="pictures//profile/{{ user.id }}.avif" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
+            <img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
             } @else {
             <img src="assets/images/person_placeholder.jpg" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
             }
@@ -24,17 +20,17 @@
                 </div>
                 <div class="mr-5 mt-3">
                   <span class="font-medium text-500">For Sale</span>
-                  <div class="text-700 mt-2">12</div>
+                  <div class="text-700 mt-2">{{ businessListings?.length + commercialPropListings?.length }}</div>
                 </div>
-                <div class="mr-5 mt-3">
+                <!-- <div class="mr-5 mt-3">
                   <span class="font-medium text-500">Sold</span>
                   <div class="text-700 mt-2">8</div>
-                </div>
+                </div> -->
                 <div class="flex align-items-center mt-3">
                   <!-- <span class="font-medium text-500">Logo</span> -->
                   <div>
                     @if(user.hasCompanyLogo){
-                    <img src="pictures/logo/{{ user.id }}.avif" class="mr-5 lg:mb-0" style="height: 60px; max-width: 100px" />
+                    <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="mr-5 lg:mb-0" style="max-height: 60px; max-width: 100px" />
                     }
                     <!-- <img *ngIf="!user.hasCompanyLogo" src="assets/images/placeholder.png"
                                             class="mr-5 lg:mb-0" style="height:60px;max-width:100px" /> -->
@@ -44,7 +40,9 @@
               </div>
             </div>
           </div>
-          <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
+          @if(historyService.canGoBack){
+          <p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="historyService.goBack()"></p-button>
+          }
         </div>
         <p class="mt-2 text-700 line-height-3 text-l font-semibold">{{ user.description }}</p>
       </div>
@@ -59,7 +57,7 @@
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
               <div class="text-500 w-full md:w-2 font-medium">Phone Number</div>
-              <div class="text-900 w-full md:w-10 line-height-3">{{ user.phoneNumber }}</div>
+              <div class="text-900 w-full md:w-10 line-height-3">{{ formatPhoneNumber(user.phoneNumber) }}</div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
               <div class="text-500 w-full md:w-2 font-medium">EMail Address</div>
@@ -74,10 +72,10 @@
               <div class="text-900 w-full md:w-10" [innerHTML]="offeredServices"></div>
             </li>
             <li class="flex align-items-center py-3 px-2 flex-wrap">
-              <div class="text-500 w-full md:w-2 font-medium">Areas we serve</div>
+              <div class="text-500 w-full md:w-2 font-medium">Areas (Counties) we serve</div>
               <div class="text-900 w-full md:w-10">
                 @for (area of user.areasServed; track area) {
-                <p-tag styleClass="mr-2" [value]="area" [rounded]="true"></p-tag>
+                <p-tag styleClass="mr-2" value="{{ area.county }}-{{ area.state }}" [rounded]="true"></p-tag>
                 }
                 <!-- <p-tag styleClass="mr-2" severity="success" value="Javascript" [rounded]="true"></p-tag>
                                 <p-tag styleClass="mr-2" severity="danger" value="Python" [rounded]="true"></p-tag>
@@ -87,8 +85,8 @@
             <li class="flex align-items-center py-3 px-2 flex-wrap">
               <div class="text-500 w-full md:w-2 font-medium">Licensed In</div>
               <div class="text-900 w-full md:w-10">
-                @for (license of userLicensedIn; track license) {
-                <div>{{ license.name }} : {{ license.value }}</div>
+                @for (license of user.licensedIn; track license) {
+                <p-tag styleClass="mr-2" value="{{ license.registerNo }}-{{ license.state }}" [rounded]="true" severity="success"></p-tag>
                 }
               </div>
             </li>
@@ -123,7 +121,7 @@
                     <div class="p-3 border-1 surface-border border-round surface-card">
                       <div class="text-900 mb-2 flex align-items-center">
                         @if (listing.imageOrder?.length>0){
-                        <img src="pictures/property/{{ listing.imagePath }}/{{ listing.imageOrder[0] }}" class="mr-3" style="width: 45px; height: 45px" />
+                        <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="mr-3" style="width: 45px; height: 45px" />
                         } @else {
                         <img src="assets/images/placeholder_properties.jpg" class="mr-3" style="width: 45px; height: 45px" />
                         }
@@ -140,8 +138,8 @@
           </ul>
         </div>
       </div>
-      @if( user?.id===(user$| async)?.id || isAdmin()){
-      <button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/account']"></button>
+      @if( user?.email===keycloakUser?.email || isAdmin()){
+      <button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/account', user.id]"></button>
       }
     </div>
     }

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

@@ -1,18 +1,20 @@
-import { Location } from '@angular/common';
 import { Component } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
 import { MessageService } from 'primeng/api';
 import { GalleriaModule } from 'primeng/galleria';
 import { Observable } from 'rxjs';
 import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakUser, ListingCriteria, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
+import { HistoryService } from '../../../services/history.service';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
+import { formatPhoneNumber, map2User } from '../../../utils/utils';
 
 @Component({
   selector: 'app-details-user',
@@ -25,14 +27,18 @@ import { SharedModule } from '../../../shared/shared/shared.module';
 export class DetailsUserComponent {
   private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
   user: User;
-  user$: Observable<User>;
+  user$: Observable<KeycloakUser>;
+  keycloakUser: KeycloakUser;
   environment = environment;
   criteria: ListingCriteria;
   businessListings: BusinessListing[];
   commercialPropListings: CommercialPropertyListing[];
   companyOverview: SafeHtml;
   offeredServices: SafeHtml;
-  userLicensedIn: KeyValue[];
+  ts = new Date().getTime();
+  env = environment;
+  emailToDirName = emailToDirName;
+  formatPhoneNumber = formatPhoneNumber;
   constructor(
     private activatedRoute: ActivatedRoute,
     private router: Router,
@@ -42,26 +48,24 @@ export class DetailsUserComponent {
     public selectOptions: SelectOptionsService,
     private sanitizer: DomSanitizer,
     private imageService: ImageService,
-    private location: Location,
+    public historyService: HistoryService,
+    public keycloakService: KeycloakService,
   ) {}
 
   async ngOnInit() {
     this.user = await this.userService.getById(this.id);
-    this.userLicensedIn = this.user.licensedIn.map(l => {
-      return { name: l.split('|')[0], value: l.split('|')[1] };
-    });
-    const results = await Promise.all([await this.listingsService.getListingByUserId(this.id, 'business'), await this.listingsService.getListingByUserId(this.id, 'commercialProperty')]);
+    const results = await Promise.all([await this.listingsService.getListingsByEmail(this.user.email, 'business'), await this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
     // Zuweisen der Ergebnisse zu den Member-Variablen der Klasse
     this.businessListings = results[0];
     this.commercialPropListings = results[1];
-    this.user$ = this.userService.getUserObservable();
+    //this.user$ = this.userService.getUserObservable();
+    const token = await this.keycloakService.getToken();
+    this.keycloakUser = map2User(token);
     this.companyOverview = this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview);
     this.offeredServices = this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices);
   }
-  back() {
-    this.location.back();
-  }
+
   isAdmin() {
-    return this.userService.hasAdminRole();
+    return this.keycloakService.getUserRoles(true).includes('ADMIN');
   }
 }

bizmatch/src/app/pages/home/home.component.html

@@ -5,10 +5,11 @@
       <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full left-0 top-100 px-6 lg:px-0 shadow-2 lg:shadow-none z-2">
         <section></section>
         <div class="flex justify-content-between lg:block border-top-1 lg:border-top-none border-gray-800 py-3 lg:py-0 mt-3 lg:mt-0">
-          @if(userService.isLoggedIn()){
+          @if(keycloakService.isLoggedIn()){
           <p-button label="Account" class="ml-3 font-bold" [outlined]="true" severity="secondary" [routerLink]="['/account']"></p-button>
           } @else {
           <p-button label="Log In" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="login()"></p-button>
+          <p-button label="Register" class="ml-3 font-bold" [outlined]="true" severity="secondary" (click)="register()"></p-button>
           }
         </div>
       </div>
@@ -45,9 +46,29 @@
           </div>
           <div [ngClass]="{ 'mt-5': activeTabAction === 'business', 'mt-11': activeTabAction === 'commercialProperty', 'mt-22': activeTabAction === 'broker' }">
             <div class="flex flex-column align-items-right gap-3 px-2 py-3 my-3 surface-border">
-              <p-dropdown [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '200px' }"></p-dropdown>
+              <p-dropdown
+                [filter]="true"
+                filterBy="name"
+                [options]="states"
+                [(ngModel)]="criteria.state"
+                optionLabel="name"
+                optionValue="value"
+                [showClear]="true"
+                placeholder="State"
+                [style]="{ width: '200px' }"
+              ></p-dropdown>
               @if(activeTabAction === 'business'){
-              <p-dropdown [options]="selectOptions.typesOfBusiness" [(ngModel)]="criteria.type" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Category" [style]="{ width: '200px' }"></p-dropdown>
+              <p-dropdown
+                [filter]="true"
+                filterBy="name"
+                [options]="selectOptions.typesOfBusiness"
+                [(ngModel)]="criteria.type"
+                optionLabel="name"
+                optionValue="value"
+                [showClear]="true"
+                placeholder="Category"
+                [style]="{ width: '200px' }"
+              ></p-dropdown>
               } @if(activeTabAction === 'commercialProperty'){
               <p-dropdown
                 [options]="selectOptions.typesOfCommercialProperty"
@@ -73,7 +94,7 @@
             pRipple
             label="Create Your Listing"
             class="block mt-7 mb-7 lg:mb-0 p-button-rounded p-button-success p-button-lg font-medium"
-            [routerLink]="userService.isLoggedIn() ? '/createBusinessListing' : '/pricing'"
+            [routerLink]="keycloakService.isLoggedIn() ? '/createBusinessListing' : '/pricing'"
           ></button>
         </div>
       </div>

bizmatch/src/app/pages/home/home.component.ts

@@ -2,18 +2,16 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
 import onChange from 'on-change';
 import { ButtonModule } from 'primeng/button';
 import { CheckboxModule } from 'primeng/checkbox';
 import { DropdownModule } from 'primeng/dropdown';
 import { InputTextModule } from 'primeng/inputtext';
 import { StyleClassModule } from 'primeng/styleclass';
-import { Observable } from 'rxjs';
-import { User } from '../../../../../bizmatch-server/src/models/db.model';
 import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
 import { ListingsService } from '../../services/listings.service';
 import { SelectOptionsService } from '../../services/select-options.service';
-import { UserService } from '../../services/user.service';
 import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from '../../utils/utils';
 @Component({
   selector: 'app-home',
@@ -28,14 +26,12 @@ export class HomeComponent {
   maxPrice: string;
   minPrice: string;
   criteria: ListingCriteria;
-  user$: Observable<User>;
   states = [];
-  public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService, private listingsService: ListingsService) {
+  public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public keycloakService: KeycloakService, private listingsService: ListingsService) {
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
     resetCriteria(this.criteria);
   }
   async ngOnInit() {
-    this.user$ = this.userService.getUserObservable();
     if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
       const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
       this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
@@ -58,6 +54,11 @@ export class HomeComponent {
   }
 
   login() {
-    this.userService.login(window.location.href);
+    this.keycloakService.login({
+      redirectUri: window.location.href,
+    });
+  }
+  register() {
+    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
   }
 }

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html

@@ -3,20 +3,10 @@
   <div class="wrapper">
     <div class="grid p-4 align-items-center">
       <div class="col-2">
-        <p-dropdown
-          [filter]="true"
-          filterBy="name"
-          [options]="selectOptions.states"
-          [(ngModel)]="criteria.state"
-          optionLabel="name"
-          optionValue="value"
-          [showClear]="true"
-          placeholder="Location"
-          [style]="{ width: '100%' }"
-        >
+        <p-dropdown [filter]="true" filterBy="name" [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Location" [style]="{ width: '100%' }">
           <ng-template let-state pTemplate="item">
             <div class="flex align-items-center gap-2">
-              <div>{{ state.name }}</div>
+              <div>{{ state.name }} ({{ state.count }})</div>
             </div>
           </ng-template>
         </p-dropdown>
@@ -42,7 +32,7 @@
           <div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full">
             <span>
               @if(user.hasProfile){
-              <img src="pictures/profile/{{ user.id }}.avif" class="w-5rem" />
+              <img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-5rem" />
               } @else {
               <img src="assets/images/person_placeholder.jpg" class="w-5rem" />
               }
@@ -55,7 +45,7 @@
           </div>
           <div class="px-4 py-3 text-right flex justify-content-between align-items-center">
             @if(user.hasCompanyLogo){
-            <img src="pictures/logo/{{ user.id }}.avif" class="rounded-image" />
+            <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-image" />
             } @else {
             <img src="assets/images/placeholder.png" class="rounded-image" />
             }
@@ -65,7 +55,7 @@
       </div>
       }
     </div>
-    <div class="mb-2 surface-200 flex align-items-center justify-content-center">
+    <div class="mb-2 surface-200 flex align-items-center justify-content-center paginator-bar">
       <div class="mx-1 text-color">Total number of Professionals/Brokers: {{ totalRecords }}</div>
       <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
     </div>

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.scss

@@ -1,23 +1,23 @@
 #sky-line {
-    background-image: url(../../../../assets/images/bw-sky.jpg);
-    height: 204px;
-    background-position: bottom;
-    background-size: cover;
-    margin-bottom: -1px;
+  background-image: url(../../../../assets/images/bw-sky.jpg);
+  height: 204px;
+  background-position: bottom;
+  background-size: cover;
+  margin-bottom: -1px;
 }
-.search{
-    background-color: #343F69;
+.search {
+  background-color: #343f69;
 }
 ::ng-deep p-paginator div {
-    background-color: var(--surface-200) !important;
-    // background-color: var(--surface-400) !important;
+  background-color: var(--surface-200) !important;
+  // background-color: var(--surface-400) !important;
 }
 .rounded-image {
-    border-radius: 6px;
-    // width: 100px;
-    max-width: 100px;
-    height: 45px;
-    border: 1px solid rgba(0,0,0,0.2);
-    padding: 1px 1px;
-    object-fit: contain;
+  border-radius: 6px;
+  // width: 100px;
+  max-width: 100px;
+  max-height: 45px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 1px 1px;
+  object-fit: contain;
 }

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.ts

@@ -12,7 +12,7 @@ import { PaginatorModule } from 'primeng/paginator';
 import { StyleClassModule } from 'primeng/styleclass';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
+import { ListingCriteria, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
@@ -39,7 +39,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
     NgOptimizedImage,
   ],
   templateUrl: './broker-listings.component.html',
-  styleUrl: './broker-listings.component.scss',
+  styleUrls: ['./broker-listings.component.scss', '../../pages.scss'],
 })
 export class BrokerListingsComponent {
   environment = environment;
@@ -58,8 +58,9 @@ export class BrokerListingsComponent {
   rows: number = 12;
   totalRecords: number = 0;
   ts = new Date().getTime();
+  env = environment;
   public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
-
+  emailToDirName = emailToDirName;
   constructor(
     public selectOptions: SelectOptionsService,
     private listingsService: ListingsService,
@@ -71,16 +72,18 @@ export class BrokerListingsComponent {
     private route: ActivatedRoute,
   ) {
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
-    this.criteria.type = undefined;
     this.route.data.subscribe(async () => {
       if (this.router.getCurrentNavigation().extras.state) {
         resetCriteria(this.criteria);
+      } else {
+        this.first = this.criteria.page * this.criteria.length;
+        this.rows = this.criteria.length;
       }
       this.init();
     });
   }
   async ngOnInit() {
-    const statesResult = await this.listingsService.getAllStates('business');
+    const statesResult = await this.userService.getAllStates();
     this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
   }
   async init() {

bizmatch/src/app/pages/listings/business-listings/business-listings.component.html

@@ -3,18 +3,7 @@
   <div class="wrapper">
     <div class="grid p-4 align-items-center">
       <div class="col-2">
-        <p-dropdown
-          [filter]="true"
-          filterBy="name"
-          [options]="states"
-          [(ngModel)]="criteria.state"
-          optionLabel="criteria.location"
-          optionLabel="name"
-          optionValue="value"
-          [showClear]="true"
-          placeholder="State"
-          [style]="{ width: '100%' }"
-        >
+        <p-dropdown [filter]="true" filterBy="name" [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%' }">
           <ng-template let-state pTemplate="item">
             <div class="flex align-items-center gap-2">
               <div>{{ state.name }} ({{ state.count }})</div>
@@ -48,7 +37,6 @@
         </p-inputGroup>
       </div>
       <div class="col-1" pTooltip="Real Estate excluded/included" tooltipPosition="top">
-        <!-- <p-toggleButton [(ngModel)]="checked1"  onLabel="Sustainable" offLabel="Unsustainable" onIcon="pi pi-check" offIcon="pi pi-times" styleClass="mb-3 lg:mt-0 mr-4 flex-shrink-0 w-12rem"></p-toggleButton> -->
         <p-toggleButton [(ngModel)]="criteria.realEstateChecked" onLabel="RE incl." offLabel="RE excl."></p-toggleButton>
       </div>
       <div class="col-1">
@@ -62,8 +50,8 @@
     <div class="grid">
       @for (listing of listings; track listing.id) {
       <div class="col-12 lg:col-3 p-3">
-        <div class="shadow-2 border-round surface-card mb-3 h-full flex-column justify-content-between flex">
-          <div class="p-4 h-full flex flex-column">
+        <div class="shadow-2 border-round surface-card h-full flex-column justify-content-between flex">
+          <div class="p-4 flex flex-column relative h-full">
             <div class="flex align-items-center">
               <span [class]="selectOptions.getBgColorType(listing.type)" class="inline-flex border-circle align-items-center justify-content-center mr-3" style="width: 38px; height: 38px">
                 <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
@@ -76,8 +64,10 @@
             <p class="mt-0 mb-1 text-700 line-height-3">Net profit: {{ listing.cashFlow | currency }}</p>
             <p class="mt-0 mb-1 text-700 line-height-3">Location: {{ selectOptions.getState(listing.state) }}</p>
             <p class="mt-0 mb-1 text-700 line-height-3">Established: {{ listing.established }}</p>
-            <div class="mt-auto ml-auto">
-              <img src="pictures/logo/{{ listing.userId }}.avif" (error)="imageErrorHandler(listing)" class="rounded-image" />
+            <div class="icon-pos">
+              <a routerLink="/details-user/{{ listing.userId }}" class="mr-2"
+                ><img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" (error)="imageErrorHandler(listing)" class="rounded-image"
+              /></a>
             </div>
           </div>
           <div class="px-4 py-3 surface-100 text-left">
@@ -87,7 +77,7 @@
       </div>
       }
     </div>
-    <div class="mb-2 surface-200 flex align-items-center justify-content-center">
+    <div class="mb-2 surface-200 flex align-items-center justify-content-center paginator-bar">
       <div class="mx-1 text-color">Total number of Listings: {{ totalRecords }}</div>
       <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
     </div>

bizmatch/src/app/pages/listings/business-listings/business-listings.component.scss

@@ -10,13 +10,17 @@
 }
 ::ng-deep p-paginator div {
   background-color: var(--surface-200) !important;
-  // background-color: var(--surface-400) !important;
+}
+.icon-pos {
+  position: absolute;
+  bottom: 1.5rem; /* Gleich dem Padding des Containers */
+  right: 1.5rem; /* Gleich dem Padding des Containers */
 }
 .rounded-image {
   border-radius: 6px;
   // width: 100px;
   max-width: 100px;
-  height: 45px;
+  height: 35px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   padding: 1px 1px;
   object-fit: contain;

bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts

@@ -13,7 +13,7 @@ import { StyleClassModule } from 'primeng/styleclass';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import { TooltipModule } from 'primeng/tooltip';
 import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db.model';
-import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
+import { ListingCriteria, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { ImageService } from '../../../services/image.service';
 import { ListingsService } from '../../../services/listings.service';
@@ -39,7 +39,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
     TooltipModule,
   ],
   templateUrl: './business-listings.component.html',
-  styleUrl: './business-listings.component.scss',
+  styleUrls: ['./business-listings.component.scss', '../../pages.scss'],
 })
 export class BusinessListingsComponent {
   environment = environment;
@@ -56,8 +56,9 @@ export class BusinessListingsComponent {
   ts = new Date().getTime();
   first: number = 0;
   rows: number = 12;
+  env = environment;
   public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;
-
+  emailToDirName = emailToDirName;
   constructor(
     public selectOptions: SelectOptionsService,
     private listingsService: ListingsService,
@@ -68,10 +69,12 @@ export class BusinessListingsComponent {
     private route: ActivatedRoute,
   ) {
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
-    this.criteria.type = undefined;
     this.route.data.subscribe(async () => {
       if (this.router.getCurrentNavigation().extras.state) {
         resetCriteria(this.criteria);
+      } else {
+        this.first = this.criteria.page * this.criteria.length;
+        this.rows = this.criteria.length;
       }
       this.init();
     });

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html

@@ -51,7 +51,11 @@
           <article class="flex flex-column md:flex-row w-full gap-3 p-3 surface-card">
             <div class="relative">
               @if (listing.imageOrder?.length>0){
-              <img src="pictures/property/{{ listing.imagePath }}/{{ listing.imageOrder[0] }}" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
+              <img
+                src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}"
+                alt="Image"
+                class="border-round w-full h-full md:w-12rem md:h-9rem"
+              />
               } @else {
               <img src="assets/images/placeholder_properties.jpg" alt="Image" class="border-round w-full h-full md:w-12rem md:h-9rem" />
               }
@@ -91,7 +95,7 @@
       }
     </div>
 
-    <div class="mb-2 surface-200 flex align-items-center justify-content-center">
+    <div class="mb-2 surface-200 flex align-items-center justify-content-center paginator-bar">
       <!-- @if(listings && listings.length>12){ -->
       <div class="mx-1 text-color">Total number of Listings: {{ totalRecords }}</div>
       <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.scss

@@ -1,23 +1,23 @@
 #sky-line {
-    background-image: url(../../../../assets/images/bw-sky.jpg);
-    height: 204px;
-    background-position: bottom;
-    background-size: cover;
-    margin-bottom: -1px;
+  background-image: url(../../../../assets/images/bw-sky.jpg);
+  height: 204px;
+  background-position: bottom;
+  background-size: cover;
+  margin-bottom: -1px;
 }
-.search{
-    background-color: #343F69;
+.search {
+  background-color: #343f69;
 }
 ::ng-deep p-paginator div {
-    background-color: var(--surface-200) !important;
-    // background-color: var(--surface-400) !important;
+  background-color: var(--surface-200) !important;
+  // background-color: var(--surface-400) !important;
 }
 .rounded-image {
-    border-radius: 6px;
-    // width: 100px;
-    max-width: 100px;
-    height: 45px;
-    border: 1px solid rgba(0,0,0,0.2);
-    padding: 1px 1px;
-    object-fit: contain;
+  border-radius: 6px;
+  // width: 100px;
+  max-width: 100px;
+  height: 45px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 1px 1px;
+  object-fit: contain;
 }

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts

@@ -24,7 +24,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from
   standalone: true,
   imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule, InputGroupModule],
   templateUrl: './commercial-property-listings.component.html',
-  styleUrl: './commercial-property-listings.component.scss',
+  styleUrls: ['./commercial-property-listings.component.scss', '../../pages.scss'],
 })
 export class CommercialPropertyListingsComponent {
   environment = environment;
@@ -42,7 +42,7 @@ export class CommercialPropertyListingsComponent {
   state: string;
   totalRecords: number = 0;
   ts = new Date().getTime();
-
+  env = environment;
   constructor(
     public selectOptions: SelectOptionsService,
     private listingsService: ListingsService,
@@ -53,10 +53,12 @@ export class CommercialPropertyListingsComponent {
     private route: ActivatedRoute,
   ) {
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
-    this.criteria.type = undefined;
     this.route.data.subscribe(async () => {
       if (this.router.getCurrentNavigation().extras.state) {
         resetCriteria(this.criteria);
+      } else {
+        this.first = this.criteria.page * this.criteria.length;
+        this.rows = this.criteria.length;
       }
       this.init();
     });

bizmatch/src/app/pages/menu-account/menu-account.component.html

@@ -47,12 +47,7 @@
         </a>
       </li>
       <li>
-        <a
-          (click)="userService.logout()"
-          routerLinkActive="text-blue-500"
-          pRipple
-          class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline"
-        >
+        <a (click)="logout()" routerLinkActive="text-blue-500" pRipple class="flex align-items-center cursor-pointer p-3 border-round text-800 hover:surface-200 transition-duration-150 transition-colors no-underline">
           <fa-icon [icon]="faRightFromBracket" class="mr-2 flex"></fa-icon>
           <span class="font-medium hidden md:block">Logout</span>
         </a>

bizmatch/src/app/pages/menu-account/menu-account.component.ts

@@ -1,37 +1,27 @@
-import { Component } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
-import { StyleClassModule } from 'primeng/styleclass';
-import { SelectOptionsService } from '../../services/select-options.service';
-import { DropdownModule } from 'primeng/dropdown';
-import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ToggleButtonModule } from 'primeng/togglebutton';
-import { TagModule } from 'primeng/tag';
-import data from '../../../assets/data/listings.json';
-import { ActivatedRoute, NavigationEnd, Router, RouterModule } from '@angular/router';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-import { ChipModule } from 'primeng/chip';
-import { DividerModule } from 'primeng/divider';
-import { RippleModule } from 'primeng/ripple';
+import { Component } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faEnvelope } from '@fortawesome/free-regular-svg-icons';
 import { faRightFromBracket } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { UserService } from '../../services/user.service';
+import { KeycloakService } from 'keycloak-angular';
+import { ButtonModule } from 'primeng/button';
+import { DividerModule } from 'primeng/divider';
+import { RippleModule } from 'primeng/ripple';
+import { StyleClassModule } from 'primeng/styleclass';
 
 @Component({
   selector: 'menu-account',
   standalone: true,
-  imports: [CommonModule, StyleClassModule, ButtonModule,  DividerModule, RouterModule, RippleModule, FontAwesomeModule ],
+  imports: [CommonModule, StyleClassModule, ButtonModule, DividerModule, RouterModule, RippleModule, FontAwesomeModule],
   templateUrl: './menu-account.component.html',
-  styleUrl: './menu-account.component.scss'
+  styleUrl: './menu-account.component.scss',
 })
 export class MenuAccountComponent {
   activeLink: string;
-  faEnvelope=faEnvelope;
-  faRightFromBracket=faRightFromBracket;
-  constructor(private router: Router,public userService:UserService) {
+  faEnvelope = faEnvelope;
+  faRightFromBracket = faRightFromBracket;
+  constructor(private router: Router, public keycloakService: KeycloakService) {
     // Abonniere Router-Events, um den aktiven Link zu ermitteln
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
@@ -39,4 +29,8 @@ export class MenuAccountComponent {
       }
     });
   }
+  logout() {
+    sessionStorage.removeItem('USERID');
+    this.keycloakService.logout(window.location.origin + '/home');
+  }
 }

bizmatch/src/app/pages/pages.scss

@@ -1,6 +1,16 @@
 .wrapper {
-    width: 1491px;
-    max-width: 100%;
-    height: 100%;
-    margin: auto;
+  width: 1491px;
+  max-width: 100%;
+  height: 100%;
+  margin: auto;
+}
+:host ::ng-deep .paginator-bar {
+  position: sticky;
+  bottom: 0px;
+  & > button {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatten-/Unschärfe-Effekt */
+  }
+  & .p-paginator {
+    padding: 0;
+  }
 }

bizmatch/src/app/pages/pricing/pricing.component.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
 import { SharedModule } from '../../shared/shared/shared.module';
-import { UserService } from '../../services/user.service';
 
 @Component({
   selector: 'app-pricing',
   standalone: true,
   imports: [SharedModule],
   templateUrl: './pricing.component.html',
-  styleUrl: './pricing.component.scss'
+  styleUrl: './pricing.component.scss',
 })
 export class PricingComponent {
-  constructor(private userService:UserService){}
-  register(){
-    this.userService.register(`${window.location.origin}/account`);
+  constructor(public keycloakService: KeycloakService) {}
+  register() {
+    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
   }
 }

bizmatch/src/app/pages/privacy-statement/privacy-statement.component.html

@@ -1,354 +1,191 @@
 <section id="content" role="main">
-  <article
-    id="post-2"
-    class="post-2 page type-page status-publish hentry pmpro-has-access"
-  >
+  <article id="post-2" class="post-2 page type-page status-publish hentry pmpro-has-access">
     <section class="entry-content">
       <div class="container" style="padding: 3.5% 0 3.75% 0 !important">
         <p>
           <strong>Privacy Policy</strong><br />
-          We are committed to protecting your privacy. We have established this
-          statement as a testament to our commitment to your privacy.
+          We are committed to protecting your privacy. We have established this statement as a testament to our commitment to your privacy.
         </p>
+        <p>This Privacy Policy relates to the use of any personal information you provide to us through this websites.</p>
         <p>
-          This Privacy Policy relates to the use of any personal information you
-          provide to us through this websites.
-        </p>
-        <p>
-          By accepting the Privacy Policy during registration or the sending of
-          an enquiry, you expressly consent to our collection, storage, use and
-          disclosure of your personal information as described in this Privacy
+          By accepting the Privacy Policy during registration or the sending of an enquiry, you expressly consent to our collection, storage, use and disclosure of your personal information as described in this Privacy
           Policy.
         </p>
         <p>
-          We may update our Privacy Policy from time to time. Our Privacy Policy
-          was last updated in Febuary 2018 and is effective upon acceptance for
-          new users. By continuing to use our websites or otherwise continuing
+          We may update our Privacy Policy from time to time. Our Privacy Policy was last updated in Febuary 2018 and is effective upon acceptance for new users. By continuing to use our websites or otherwise continuing
           to deal with us, you accept this Privacy Policy.
         </p>
         <p>
           <strong>Collection of personal information</strong><br />
-          Anyone can browse our websites without revealing any personally
-          identifiable information.
-        </p>
-        <p>
-          However, should you wish to contact a business for sale, a franchise
-          opportunity or an intermediary, we will require you to provide some
-          personal information.
-        </p>
-        <p>
-          Should you wish to advertise your services, your business (es) or your
-          franchise opportunity, we will require you to provide some personal
-          information.
-        </p>
-        <p>
-          By providing personal information, you are consenting to the transfer
-          and storage of that information on our servers located in the United
-          States.
+          Anyone can browse our websites without revealing any personally identifiable information.
         </p>
+        <p>However, should you wish to contact a business for sale, a franchise opportunity or an intermediary, we will require you to provide some personal information.</p>
+        <p>Should you wish to advertise your services, your business (es) or your franchise opportunity, we will require you to provide some personal information.</p>
+        <p>By providing personal information, you are consenting to the transfer and storage of that information on our servers located in the United States.</p>
         <p>We may collect and store the following personal information:</p>
         <p>
-          Your name, email address, physical address, telephone numbers, and
-          (depending on the service used), your business information, financial
-          information, such as credit / payment card details;<br />
-          transactional information based on your activities on the site;
-          information that you disclose in a forum on any of our websites,
-          feedback, correspondence through our websites, and correspondence sent
-          to us;<br />
-          other information from your interaction with our websites, services,
-          content and advertising, including computer and connection
-          information, statistics on page views, traffic to and from the sites,
-          ad data, IP address and standard web log information;<br />
-          supplemental information from third parties (for example, if you incur
-          a debt, we will generally conduct a credit check by obtaining
-          additional information about you from a credit bureau, as permitted by
-          law; or if the information you provide cannot be verified,<br />
-          we may ask you to send us additional information, or to answer
-          additional questions online to help verify your information).
+          Your name, email address, physical address, telephone numbers, and (depending on the service used), your business information, financial information, such as credit / payment card details;<br />
+          transactional information based on your activities on the site; information that you disclose in a forum on any of our websites, feedback, correspondence through our websites, and correspondence sent to us;<br />
+          other information from your interaction with our websites, services, content and advertising, including computer and connection information, statistics on page views, traffic to and from the sites, ad data, IP
+          address and standard web log information;<br />
+          supplemental information from third parties (for example, if you incur a debt, we will generally conduct a credit check by obtaining additional information about you from a credit bureau, as permitted by law;
+          or if the information you provide cannot be verified,<br />
+          we may ask you to send us additional information, or to answer additional questions online to help verify your information).
         </p>
         <p>
           <strong>How we use your information</strong><br />
-          The primary reason we collect your personal information is to improve
-          the services we deliver to you through our website. By registering or
-          sending an enquiry through our website, you agree that we may use your
+          The primary reason we collect your personal information is to improve the services we deliver to you through our website. By registering or sending an enquiry through our website, you agree that we may use your
           personal information to:<br />
           provide the services and customer support you request;<br />
           connect you with relevant parties:<br />
-          If you are a buyer we will pass some or all of your details on to the
-          seller / intermediary along with any message you have typed. This
-          allows the seller to contact you in order to pursue a possible sale of
-          a business;<br />
-          If you are a seller / intermediary, we will disclose your details
-          where you have given us permission to do so;<br />
+          If you are a buyer we will pass some or all of your details on to the seller / intermediary along with any message you have typed. This allows the seller to contact you in order to pursue a possible sale of a
+          business;<br />
+          If you are a seller / intermediary, we will disclose your details where you have given us permission to do so;<br />
           resolve disputes, collect fees, and troubleshoot problems;<br />
-          prevent potentially prohibited or illegal activities, and enforce our
-          Terms and Conditions;<br />
-          customize, measure and improve our services, conduct internal market
-          research, provide content and advertising;<br />
-          tell you about other Biz-Match products and services, target
-          marketing, send you service updates, and promotional offers based on
-          your communication preferences.
+          prevent potentially prohibited or illegal activities, and enforce our Terms and Conditions;<br />
+          customize, measure and improve our services, conduct internal market research, provide content and advertising;<br />
+          tell you about other Biz-Match products and services, target marketing, send you service updates, and promotional offers based on your communication preferences.
         </p>
         <p>
           <strong>Our disclosure of your information</strong><br />
-          We may disclose personal information to respond to legal requirements,
-          enforce our policies, respond to claims that a listing or other
-          content infringes the rights of others, or protect anyone’s rights,
+          We may disclose personal information to respond to legal requirements, enforce our policies, respond to claims that a listing or other content infringes the rights of others, or protect anyone’s rights,
           property, or safety.
         </p>
         <p>
           We may also share your personal information with<br />
-          When you select to register an account as a business buyer, you
-          provide your personal details and we will pass this on to a seller of
-          a business or franchise when you request more information.
+          When you select to register an account as a business buyer, you provide your personal details and we will pass this on to a seller of a business or franchise when you request more information.
         </p>
         <p>
-          When you select to register an account as a business broker or seller
-          on the site, we provide a public platform on which to establish your
-          business profile. This profile consists of pertinent facts about your
-          business along with your personal information; namely, the contact
-          information you provide to facilitate contact between you and other
-          users’ of the site. Direct email addresses and telephone numbers will
-          not be publicly displayed unless you specifically include it on your
-          profile.
+          When you select to register an account as a business broker or seller on the site, we provide a public platform on which to establish your business profile. This profile consists of pertinent facts about your
+          business along with your personal information; namely, the contact information you provide to facilitate contact between you and other users’ of the site. Direct email addresses and telephone numbers will not
+          be publicly displayed unless you specifically include it on your profile.
         </p>
         <p>
-          The information a user includes within the forums provided on the site
-          is publicly available to other users’ of the site. Please be aware
-          that any personal information you elect to provide in a public forum
-          may be used to send you unsolicited messages; we are not responsible
-          for the personal information a user elects to disclose within their
-          public profile, or in the private communications that users’ engage in
-          on the site.
+          The information a user includes within the forums provided on the site is publicly available to other users’ of the site. Please be aware that any personal information you elect to provide in a public forum may
+          be used to send you unsolicited messages; we are not responsible for the personal information a user elects to disclose within their public profile, or in the private communications that users’ engage in on the
+          site.
         </p>
         <p>
-          We post testimonials on the site obtained from users’. These
-          testimonials may include the name, city, state or region and business
-          of the user. We obtain permission from our users’ prior to posting
-          their testimonials on the site. We are not responsible for any
-          personal information a user selects to include within their
-          testimonial.
+          We post testimonials on the site obtained from users’. These testimonials may include the name, city, state or region and business of the user. We obtain permission from our users’ prior to posting their
+          testimonials on the site. We are not responsible for any personal information a user selects to include within their testimonial.
         </p>
         <p>
-          When you elect to email a friend about the site, or a particular
-          business, we request the third party’s email address to send this one
-          time email. We do not share this information with any third parties
-          for their promotional purposes and only store the information to gauge
-          the effectiveness of our referral program.
+          When you elect to email a friend about the site, or a particular business, we request the third party’s email address to send this one time email. We do not share this information with any third parties for
+          their promotional purposes and only store the information to gauge the effectiveness of our referral program.
         </p>
+        <p>We may share your personal information with our service providers where necessary. We employ the services of a payment processor to fulfil payment for services purchased on the site.</p>
         <p>
-          We may share your personal information with our service providers
-          where necessary. We employ the services of a payment processor to
-          fulfil payment for services purchased on the site.
-        </p>
-        <p>
-          We works with a number of partners or affiliates, where we provide
-          marketing services for these companies. These third party agents
-          collect your personal information to facilitate your service request
-          and the information submitted here is governed by their privacy
-          policy.
+          We works with a number of partners or affiliates, where we provide marketing services for these companies. These third party agents collect your personal information to facilitate your service request and the
+          information submitted here is governed by their privacy policy.
         </p>
         <p>
           <strong>Masking Policy</strong><br />
-          In some cases, where the third party agent collects your information,
-          the affiliate portal may appear within a BizMatch.net frame. It is
-          presented as a BizMatch.net page for a streamlined user interface
-          however the data collected on such pages is governed by the third
-          party agent’s privacy policy.
+          In some cases, where the third party agent collects your information, the affiliate portal may appear within a BizMatch.net frame. It is presented as a BizMatch.net page for a streamlined user interface however
+          the data collected on such pages is governed by the third party agent’s privacy policy.
         </p>
         <p>
           <strong>Legal Disclosure</strong><br />
-          In certain circumstances, we may be legally required to disclose
-          information collected on the site to law enforcement, government
-          agencies or other third parties. We reserve the right to disclose
-          information to our service providers and to law enforcement or
-          government agencies where a formal request such as in response to a
-          court order, subpoena or judicial proceeding is made. Where we believe
-          in good faith that disclosure of information is necessary to prevent
-          imminent physical or financial harm, or loss, or in protecting against
-          illegal activity on the site, we reserve to disclose information.
+          In certain circumstances, we may be legally required to disclose information collected on the site to law enforcement, government agencies or other third parties. We reserve the right to disclose information to
+          our service providers and to law enforcement or government agencies where a formal request such as in response to a court order, subpoena or judicial proceeding is made. Where we believe in good faith that
+          disclosure of information is necessary to prevent imminent physical or financial harm, or loss, or in protecting against illegal activity on the site, we reserve to disclose information.
         </p>
         <p>
-          Should the company undergo the merger, acquisition or sale of some or
-          all of its assets, your personal information may likely be a part of
-          the transferred assets. In such an event, your personal information on
-          the site, would be governed by this privacy statement; any changes to
-          the privacy practices governing your information as a result of
-          transfer would be relayed to you by means of a prominent notice on the
-          Site, or by email.
+          Should the company undergo the merger, acquisition or sale of some or all of its assets, your personal information may likely be a part of the transferred assets. In such an event, your personal information on
+          the site, would be governed by this privacy statement; any changes to the privacy practices governing your information as a result of transfer would be relayed to you by means of a prominent notice on the Site,
+          or by email.
         </p>
         <p>
           <strong>Using information from BizMatch.net website</strong><br />
-          In certain cases, (where you are receiving contact details of buyers
-          interested in your business opportunity or a business opportunity you
-          represent), you must comply with data protection laws, and give other
-          users a chance to remove themselves from your database and a chance to
-          review what information you have collected about them.
+          In certain cases, (where you are receiving contact details of buyers interested in your business opportunity or a business opportunity you represent), you must comply with data protection laws, and give other
+          users a chance to remove themselves from your database and a chance to review what information you have collected about them.
         </p>
         <p>
-          <strong
-            >You agree to use BizMatch.net user information only for:</strong
-          >
+          <strong>You agree to use BizMatch.net user information only for:</strong>
         </p>
         <p>
-          BizMatch.net transaction-related purposes that are not unsolicited
-          commercial messages;<br />
+          BizMatch.net transaction-related purposes that are not unsolicited commercial messages;<br />
           using services offered through BizMatch.net, or<br />
           other purposes that a user expressly chooses.
         </p>
         <p>
           <strong>Marketing</strong><br />
-          We do not sell or rent your personal information to third parties for
-          their marketing purposes without your explicit consent. Where you
-          explicitly express your consent at the point of collection to receive
-          offers from third party partners or affiliates, we will communicate to
-          you on their behalf. We will not pass your information on.
+          We do not sell or rent your personal information to third parties for their marketing purposes without your explicit consent. Where you explicitly express your consent at the point of collection to receive
+          offers from third party partners or affiliates, we will communicate to you on their behalf. We will not pass your information on.
         </p>
         <p>
-          You will receive email marketing communications from us throughout the
-          duration of your relationship with our websites. If you do not wish to
-          receive marketing communications from us you may unsubscribe and / or
-          change your preferences at any time by following instructions included
-          within a communication or emailing Customer Services.
+          You will receive email marketing communications from us throughout the duration of your relationship with our websites. If you do not wish to receive marketing communications from us you may unsubscribe and /
+          or change your preferences at any time by following instructions included within a communication or emailing Customer Services.
         </p>
+        <p>If you have an account with one of our websites you can also log in and click the email preferences link to unsubscribe and / or change your preferences.</p>
         <p>
-          If you have an account with one of our websites you can also log in
-          and click the email preferences link to unsubscribe and / or change
-          your preferences.
-        </p>
-        <p>
-          Please note that we reserve the right to send all website users
-          notifications and administrative emails where necessary which are
-          considered a part of the service. Given that these messages aren’t
-          promotional in nature, you will be unable to opt-out of them.
+          Please note that we reserve the right to send all website users notifications and administrative emails where necessary which are considered a part of the service. Given that these messages aren’t promotional
+          in nature, you will be unable to opt-out of them.
         </p>
         <p>
           <strong>Cookies</strong><br />
-          A cookie is a small text file written to your hard drive that contains
-          information about you. Cookies do not contain any personal information
-          about users. Once you close your browser or log out of the website,
-          the cookie simply terminates. We use cookies so that we can
-          personalise your experience of our websites.
+          A cookie is a small text file written to your hard drive that contains information about you. Cookies do not contain any personal information about users. Once you close your browser or log out of the website,
+          the cookie simply terminates. We use cookies so that we can personalise your experience of our websites.
         </p>
         <p>
-          If you set up your browser to reject the cookie, you may still use the
-          website however; doing so may interfere with your use of some aspects
-          of our websites. Some of our business partners use cookies on our site
-          (for example, advertisers). We have no access to or control over these
-          cookies.
-        </p>
-        <p>
-          For more information about how BizMatch.net uses cookies please read
-          our Cookie Policy.
+          If you set up your browser to reject the cookie, you may still use the website however; doing so may interfere with your use of some aspects of our websites. Some of our business partners use cookies on our
+          site (for example, advertisers). We have no access to or control over these cookies.
         </p>
+        <p>For more information about how BizMatch.net uses cookies please read our Cookie Policy.</p>
         <p>
           <strong>Spam, spyware or spoofing</strong><br />
-          We and our users do not tolerate spam. Make sure to set your email
-          preferences so we can communicate with you, as you prefer. Please add
-          us to your safe senders list. To report spam or spoof emails, please
-          contact us using the contact information provided in the Contact Us
-          section of this privacy statement.
+          We and our users do not tolerate spam. Make sure to set your email preferences so we can communicate with you, as you prefer. Please add us to your safe senders list. To report spam or spoof emails, please
+          contact us using the contact information provided in the Contact Us section of this privacy statement.
         </p>
         <p>
-          You may not use our communication tools to send spam or otherwise send
-          content that would breach our Terms and Conditions. We automatically
-          scan and may manually filter messages to check for spam, viruses,
-          phishing attacks and other malicious activity or illegal or prohibited
-          content. We may also store these messages for back up purposes only.
+          You may not use our communication tools to send spam or otherwise send content that would breach our Terms and Conditions. We automatically scan and may manually filter messages to check for spam, viruses,
+          phishing attacks and other malicious activity or illegal or prohibited content. We may also store these messages for back up purposes only.
         </p>
         <p>
-          If you send an email to an email address that is not registered in our
-          community, we do not permanently store that email or use that email
-          address for any marketing purpose. We do not rent or sell these email
+          If you send an email to an email address that is not registered in our community, we do not permanently store that email or use that email address for any marketing purpose. We do not rent or sell these email
           addresses.
         </p>
         <p>
           <strong>Account protection</strong><br />
-          Your password is the key to your account. Make sure this is stored
-          safely. Use unique numbers, letters and special characters, and do not
-          disclose your password to anyone. If you do share your password or
-          your personal information with others, remember that you are
-          responsible for all actions taken in the name of your account. If you
-          lose control of your password, you may lose substantial control over
-          your personal information and may be subject to legally binding
-          actions taken on your behalf. Therefore, if your password has been
-          compromised for any reason, you should immediately notify us and
-          change your password.
+          Your password is the key to your account. Make sure this is stored safely. Use unique numbers, letters and special characters, and do not disclose your password to anyone. If you do share your password or your
+          personal information with others, remember that you are responsible for all actions taken in the name of your account. If you lose control of your password, you may lose substantial control over your personal
+          information and may be subject to legally binding actions taken on your behalf. Therefore, if your password has been compromised for any reason, you should immediately notify us and change your password.
         </p>
         <p>
-          <strong
-            >Accessing, reviewing and changing your personal information</strong
-          ><br />
-          You can view and amend your personal information at any time by
-          logging in to your account online. You must promptly update your
-          personal information if it changes or is inaccurate.
+          <strong>Accessing, reviewing and changing your personal information</strong><br />
+          You can view and amend your personal information at any time by logging in to your account online. You must promptly update your personal information if it changes or is inaccurate.
         </p>
+        <p>If at any time you wish to close your account, please contact Customer Services and instruct us to do so. We will process your request as soon as we can.</p>
+        <p>You may also contact us at any time to find out what information we hold about you, what we do with it and ask us to update it for you.</p>
         <p>
-          If at any time you wish to close your account, please contact Customer
-          Services and instruct us to do so. We will process your request as
-          soon as we can.
-        </p>
-        <p>
-          You may also contact us at any time to find out what information we
-          hold about you, what we do with it and ask us to update it for you.
-        </p>
-        <p>
-          We do retain personal information from closed accounts to comply with
-          law, prevent fraud, collect any fees owed, resolve disputes,
-          troubleshoot problems, assist with any investigations, enforce our
-          Terms and Conditions, and take other actions otherwise permitted by
-          law.
+          We do retain personal information from closed accounts to comply with law, prevent fraud, collect any fees owed, resolve disputes, troubleshoot problems, assist with any investigations, enforce our Terms and
+          Conditions, and take other actions otherwise permitted by law.
         </p>
         <p>
           <strong>Security</strong><br />
-          Your information is stored on our servers located in the USA. We treat
-          data as an asset that must be protected and use a variety of tools
-          (encryption, passwords, physical security, etc.) to protect your
-          personal information against unauthorized access and disclosure.
-          However, no method of security is 100% effective and while we take
-          every measure to protect your personal information, we make no
-          guarantees of its absolute security.
-        </p>
-        <p>
-          We employ the use of SSL encryption during the transmission of
-          sensitive data across our websites.
+          Your information is stored on our servers located in the USA. We treat data as an asset that must be protected and use a variety of tools (encryption, passwords, physical security, etc.) to protect your
+          personal information against unauthorized access and disclosure. However, no method of security is 100% effective and while we take every measure to protect your personal information, we make no guarantees of
+          its absolute security.
         </p>
+        <p>We employ the use of SSL encryption during the transmission of sensitive data across our websites.</p>
         <p>
           <strong>Third parties</strong><br />
-          Except as otherwise expressly included in this Privacy Policy, this
-          document addresses only the use and disclosure of information we
-          collect from you. If you disclose your information to others, whether
-          they are buyers or sellers on our websites or other sites throughout
-          the internet, different rules may apply to their use or disclosure of
-          the information you disclose to them. Dynamis does not control the
-          privacy policies of third parties, and you are subject to the privacy
-          policies of those third parties where applicable.
-        </p>
-        <p>
-          We encourage you to ask questions before you disclose your personal
-          information to others.
+          Except as otherwise expressly included in this Privacy Policy, this document addresses only the use and disclosure of information we collect from you. If you disclose your information to others, whether they
+          are buyers or sellers on our websites or other sites throughout the internet, different rules may apply to their use or disclosure of the information you disclose to them. Dynamis does not control the privacy
+          policies of third parties, and you are subject to the privacy policies of those third parties where applicable.
         </p>
+        <p>We encourage you to ask questions before you disclose your personal information to others.</p>
         <p>
           <strong>General</strong><br />
-          We may change this Privacy Policy from time to time as we add new
-          products and applications, as we improve our current offerings, and as
-          technologies and laws change. You can determine when this Privacy
-          Policy was last revised by referring to the “Last Updated” legend at
-          the top of this page.
+          We may change this Privacy Policy from time to time as we add new products and applications, as we improve our current offerings, and as technologies and laws change. You can determine when this Privacy Policy
+          was last revised by referring to the “Last Updated” legend at the top of this page.
         </p>
         <p>
-          Any changes will become effective upon our posting of the revised
-          Privacy Policy on our affected websites. We will provide notice to you
-          if these changes are material and, where required by applicable law,
-          we will obtain your consent. This notice may be provided by email, by
-          posting notice of the changes on our affected websites or by other
-          means, consistent with applicable laws.
+          Any changes will become effective upon our posting of the revised Privacy Policy on our affected websites. We will provide notice to you if these changes are material and, where required by applicable law, we
+          will obtain your consent. This notice may be provided by email, by posting notice of the changes on our affected websites or by other means, consistent with applicable laws.
         </p>
         <p>
           <strong>Contact Us</strong><br />
-          If you have any questions or comments about our privacy policy, and
-          you can’t find the answer to your question on our help pages, please
-          contact us using this form or email support@bizmatch.net, or write to
+          If you have any questions or comments about our privacy policy, and you can’t find the answer to your question on our help pages, please contact us using this form or email support&#64;bizmatch.net, or write to
           us at BizMatch, 715 S. Tanahua, Corpus Christi, TX 78401.)
         </p>
       </div>

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

@@ -8,10 +8,16 @@
       <div class="flex gap-5 flex-column-reverse md:flex-row">
         <div class="flex-auto p-fluid">
           @if (user){
-          <div class="mb-4">
-            <label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
-            <input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email" />
-            <p class="font-italic text-sm line-height-1">You can only modify your email by contacting us at support&#64;bizmatch.net</p>
+          <div class="grid">
+            <div class="mb-4 col-12 md:col-6">
+              <label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
+              <input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email" />
+              <p class="font-italic text-xs line-height-1">You can only modify your email by contacting us at support&#64;bizmatch.net</p>
+            </div>
+            <div class="mb-4 col-12 md:col-6">
+              <label for="customerType" class="block font-medium text-900 mb-2">Customer Type</label>
+              <p-dropdown id="customerType" [options]="selectOptions?.customerTypes" [(ngModel)]="user.customerType" optionLabel="name" optionValue="value" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
+            </div>
           </div>
           <div class="grid">
             <div class="mb-4 col-12 md:col-6">
@@ -23,6 +29,7 @@
               <input id="lastname" type="text" pInputText [(ngModel)]="user.lastname" />
             </div>
           </div>
+          @if (isProfessional){
           <div class="grid">
             <div class="mb-4 col-12 md:col-6">
               <label for="firstname" class="block font-medium text-900 mb-2">Company Name</label>
@@ -33,10 +40,11 @@
               <input id="lastname" type="text" pInputText [(ngModel)]="user.description" />
             </div>
           </div>
+          } @if (isProfessional){
           <div class="grid">
             <div class="mb-4 col-12 md:col-4">
               <label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
-              <input id="phoneNumber" type="text" pInputText [(ngModel)]="user.phoneNumber" />
+              <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="user.phoneNumber"></p-inputMask>
             </div>
             <div class="mb-4 col-12 md:col-4">
               <label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>
@@ -47,6 +55,14 @@
               <p-autoComplete [(ngModel)]="user.companyLocation" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
             </div>
           </div>
+          } @else {
+          <div class="grid">
+            <div class="mb-4 col-12 md:col-6">
+              <label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
+              <p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="user.phoneNumber"></p-inputMask>
+            </div>
+          </div>
+          } @if (isProfessional){
           <div class="mb-4">
             <label for="companyOverview" class="block font-medium text-900 mb-2">Company Overview</label>
             <p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }" [modules]="editorModules">
@@ -59,29 +75,54 @@
               <ng-template pTemplate="header"></ng-template>
             </p-editor>
           </div>
-
           <div class="mb-4">
             <label for="areasServed" class="block font-medium text-900 mb-2">Areas We Serve</label>
-            <textarea id="areasServed" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="user.areasServed"></textarea>
-          </div>
-          <div>
-            <label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
-            @for (licensedIn of userLicensedIn; track licensedIn.value){
+            @for (areasServed of user.areasServed; track areasServed){
             <div class="grid">
               <div class="flex col-12 md:col-6">
                 <p-dropdown
+                  [filter]="true"
+                  filterBy="name"
                   id="states"
                   [options]="selectOptions?.states"
-                  [(ngModel)]="licensedIn.name"
+                  [(ngModel)]="areasServed.state"
                   optionLabel="name"
                   optionValue="value"
-                  [showClear]="true"
                   placeholder="State"
                   [ngStyle]="{ width: '100%' }"
                 ></p-dropdown>
               </div>
               <div class="flex col-12 md:col-6">
-                <input id="companyWebsite" type="text" pInputText [(ngModel)]="licensedIn.value" placeholder="Licence Number" />
+                <input id="county" type="text" pInputText [(ngModel)]="areasServed.county" placeholder="Area/County Served" />
+              </div>
+            </div>
+            }
+          </div>
+          <div class="field mb-5 col-12 md:col-6 flex align-items-center">
+            <p-button class="mr-1" icon="pi pi-plus" severity="success" (click)="addArea()"></p-button>
+            <p-button icon="pi pi-minus" severity="danger" (click)="removeArea()" [disabled]="user.areasServed?.length < 2"></p-button>
+            <span class="text-xs">&nbsp;(Add more Areas or remove existing ones.)</span>
+            <!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
+          </div>
+          <div>
+            <label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
+            @for (licensedIn of user.licensedIn; track licensedIn){
+            <div class="grid">
+              <div class="flex col-12 md:col-6">
+                <p-dropdown
+                  [filter]="true"
+                  filterBy="name"
+                  id="states"
+                  [options]="selectOptions?.states"
+                  [(ngModel)]="licensedIn.state"
+                  optionLabel="name"
+                  optionValue="value"
+                  placeholder="State"
+                  [ngStyle]="{ width: '100%' }"
+                ></p-dropdown>
+              </div>
+              <div class="flex col-12 md:col-6">
+                <input id="registerNo" type="text" pInputText [(ngModel)]="licensedIn.registerNo" placeholder="Licence Number" />
               </div>
             </div>
             }
@@ -92,17 +133,21 @@
             <span class="text-xs">&nbsp;(Add more licenses or remove existing ones.)</span>
             <!-- <button pButton pRipple label="Add Licence" class="w-auto" (click)="addLicence()"></button> -->
           </div>
-          }
+          } }
           <div>
             <button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
           </div>
         </div>
+        @if (isProfessional){
         <div>
           <div class="flex flex-column align-items-center flex-or mb-8">
             <span class="font-medium text-900 mb-2">Company Logo</span>
             <span class="font-medium text-xs mb-2">(is shown in every offer)</span>
             @if(user?.hasCompanyLogo){
-            <img src="{{ companyLogoUrl }}" class="rounded-profile" />
+            <div class="image-wrap">
+              <img src="{{ companyLogoUrl }}" class="rounded-profile" />
+              <fa-icon [icon]="faTrash" (click)="deleteConfirm('logo')"></fa-icon>
+            </div>
             <!-- <img src="profile/{{ user.id }}.avif" class="rounded-profile" /> -->
             } @else {
             <img src="assets/images/placeholder.png" class="rounded-profile" />
@@ -123,7 +168,10 @@
           <div class="flex flex-column align-items-center flex-or">
             <span class="font-medium text-900 mb-2">Your Profile Picture</span>
             @if(user?.hasProfile){
-            <img src="{{ profileUrl }}" class="rounded-profile" />
+            <div class="image-wrap">
+              <img src="{{ profileUrl }}" class="rounded-profile" />
+              <fa-icon [icon]="faTrash" (click)="deleteConfirm('profile')"></fa-icon>
+            </div>
             } @else {
             <img src="assets/images/person_placeholder.jpg" class="rounded-profile" />
             }
@@ -140,6 +188,7 @@
             ></p-fileUpload>
           </div>
         </div>
+        }
       </div>
       <div class="text-900 font-semibold text-lg mt-3">Membership Level</div>
       <p-divider></p-divider>
@@ -202,3 +251,4 @@
     </div>
   </div>
 </div>
+<p-confirmDialog></p-confirmDialog>

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

@@ -1,11 +1,11 @@
 .rounded-logo {
-    border-radius: 6px;
-    width: 120px;
-    height: 30px;
-    border: 1px solid #6b7280;
-    padding: 1px 1px;
-    object-fit: contain;
-  }
+  border-radius: 6px;
+  width: 120px;
+  height: 30px;
+  border: 1px solid #6b7280;
+  padding: 1px 1px;
+  object-fit: contain;
+}
 .rounded-profile {
   // @extend .rounded-logo;
   max-width: 100px;
@@ -15,6 +15,22 @@
   padding: 1px 1px;
   object-fit: contain;
 }
-.wfull{
+.wfull {
   width: 100%;
 }
+.image-wrap {
+  position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
+  display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
+}
+/* Stil für das FontAwesome Icon */
+.image-wrap fa-icon {
+  position: absolute;
+  top: -5px; /* Positioniert das Icon am oberen Rand des Bildes */
+  right: -18px; /* Positioniert das Icon am rechten Rand des Bildes */
+  color: #fff; /* Weiße Farbe für das Icon */
+  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
+  padding: 5px; /* Ein wenig Platz um das Icon */
+  cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
+  border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
+  font-size: 0.7rem;
+}

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

@@ -1,16 +1,20 @@
 import { HttpEventType } from '@angular/common/http';
 import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { AngularCropperjsModule } from 'angular-cropperjs';
-import { MessageService } from 'primeng/api';
+import { KeycloakService } from 'keycloak-angular';
+import { ConfirmationService, MessageService } from 'primeng/api';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
 import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { EditorModule } from 'primeng/editor';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
+import { InputMaskModule } from 'primeng/inputmask';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { lastValueFrom } from 'rxjs';
 import { User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { AutoCompleteCompleteEvent, Invoice, KeyValue, Subscription } from '../../../../../../bizmatch-server/src/models/main.model';
+import { AutoCompleteCompleteEvent, Invoice, Subscription, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
 import { GeoService } from '../../../services/geo.service';
@@ -20,12 +24,13 @@ import { SelectOptionsService } from '../../../services/select-options.service';
 import { SubscriptionsService } from '../../../services/subscriptions.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
+import { getDialogWidth, getImageDimensions, map2User } from '../../../utils/utils';
 import { TOOLBAR_OPTIONS } from '../../utils/defaults';
 @Component({
   selector: 'app-account',
   standalone: true,
-  imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule],
-  providers: [MessageService, DialogService],
+  imports: [SharedModule, FileUploadModule, EditorModule, AngularCropperjsModule, DialogModule, SelectButtonModule, DynamicDialogModule, ConfirmDialogModule, InputMaskModule],
+  providers: [MessageService, DialogService, ConfirmationService],
   templateUrl: './account.component.html',
   styleUrl: './account.component.scss',
 })
@@ -36,14 +41,15 @@ export class AccountComponent {
   user: User;
   subscriptions: Array<Subscription>;
   userSubscriptions: Array<Subscription> = [];
-  maxFileSize = 1000000;
+  maxFileSize = 15000000;
   companyLogoUrl: string;
   profileUrl: string;
   type: 'company' | 'profile';
   dialogRef: DynamicDialogRef | undefined;
   environment = environment;
   editorModules = TOOLBAR_OPTIONS;
-  userLicensedIn: KeyValue[];
+  env = environment;
+  faTrash = faTrash;
   constructor(
     public userService: UserService,
     private subscriptionService: SubscriptionsService,
@@ -55,43 +61,43 @@ export class AccountComponent {
     private loadingService: LoadingService,
     private imageUploadService: ImageService,
     public dialogService: DialogService,
+    private confirmationService: ConfirmationService,
+    private imageService: ImageService,
+    private keycloakService: KeycloakService,
   ) {}
   async ngOnInit() {
-    const keycloakUser = this.userService.getKeycloakUser();
-    const email = keycloakUser.email;
-    try {
-      this.user = await this.userService.getByMail(email);
-    } catch (e) {
-      this.user = { email, firstname: keycloakUser.firstname, lastname: keycloakUser.lastname };
-      this.user = await this.userService.save(this.user);
+    if (this.id) {
+      this.user = await this.userService.getById(this.id);
+    } else {
+      const token = await this.keycloakService.getToken();
+      const keycloakUser = map2User(token);
+      const email = keycloakUser.email;
+      try {
+        this.user = await this.userService.getByMail(email);
+      } catch (e) {
+        this.user = { email, firstname: keycloakUser.firstName, lastname: keycloakUser.lastName, areasServed: [], licensedIn: [], companyOverview: '', offeredServices: '', customerType: 'broker' };
+        this.user = await this.userService.save(this.user);
+      }
     }
-    this.userLicensedIn = this.user.licensedIn
-      ? this.user.licensedIn.map(l => {
-          return { name: l.split('|')[0], value: l.split('|')[1] };
-        })
-      : [];
-    this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions());
-    if (!this.user.licensedIn || this.user.licensedIn?.length === 0) {
-      this.user.licensedIn = [''];
-    }
-    this.profileUrl = this.user.hasProfile ? `pictures/profile/${this.user.id}.avif` : `/assets/images/placeholder.png`;
-    this.companyLogoUrl = this.user.hasCompanyLogo ? `pictures/logo/${this.user.id}.avif` : `/assets/images/placeholder.png`;
+
+    this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(this.user.id));
+    this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
+    this.companyLogoUrl = this.user.hasCompanyLogo ? `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
   }
   printInvoice(invoice: Invoice) {}
 
   async updateProfile(user: User) {
-    this.user.licensedIn = this.userLicensedIn.map(l => `${l.name}|${l.value}`);
     await this.userService.save(this.user);
-    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Acount changes have been persisted', life: 3000 });
+    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Account changes have been persisted', life: 3000 });
   }
 
   onUploadCompanyLogo(event: any) {
     const uniqueSuffix = '?_ts=' + new Date().getTime();
-    this.companyLogoUrl = `pictures/logo/${this.user.id}${uniqueSuffix}`;
+    this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}${uniqueSuffix}`;
   }
   onUploadProfilePicture(event: any) {
     const uniqueSuffix = '?_ts=' + new Date().getTime();
-    this.profileUrl = `pictures/profile/${this.user.id}${uniqueSuffix}`;
+    this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}${uniqueSuffix}`;
   }
   setImageToFallback(event: Event) {
     (event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
@@ -104,55 +110,91 @@ export class AccountComponent {
     this.suggestions = result.map(r => `${r.city} - ${r.state_code}`).slice(0, 5);
   }
   addLicence() {
-    this.userLicensedIn.push({ name: '', value: '' });
+    this.user.licensedIn.push({ registerNo: '', state: '' });
   }
   removeLicence() {
-    this.userLicensedIn.splice(this.user.licensedIn.length - 2, 1);
+    this.user.licensedIn.splice(this.user.licensedIn.length - 1, 1);
+  }
+  addArea() {
+    this.user.areasServed.push({ county: '', state: '' });
+  }
+  removeArea() {
+    this.user.areasServed.splice(this.user.areasServed.length - 1, 1);
+  }
+  get isProfessional() {
+    return this.user.customerType === 'broker' || this.user.customerType === 'professional';
   }
-
   select(event: any, type: 'company' | 'profile') {
     const imageUrl = URL.createObjectURL(event.files[0]);
     this.type = type;
     const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value };
-    this.dialogRef = this.dialogService.open(ImageCropperComponent, {
-      data: {
-        imageUrl: imageUrl,
-        fileUpload: type === 'company' ? this.companyUpload : this.profileUpload,
-        config: config,
-        ratioVariable: type === 'company' ? true : false,
-      },
-      header: 'Edit Image',
-      width: '50vw',
-      modal: true,
-      closeOnEscape: true,
-      keepInViewport: true,
-      closable: false,
-      breakpoints: {
-        '960px': '75vw',
-        '640px': '90vw',
-      },
-    });
-    this.dialogRef.onClose.subscribe(cropper => {
-      if (cropper) {
-        this.loadingService.startLoading('uploadImage');
-        cropper.getCroppedCanvas().toBlob(async blob => {
-          this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', this.user.id).subscribe(
-            async event => {
-              if (event.type === HttpEventType.Response) {
-                this.loadingService.stopLoading('uploadImage');
-                if (this.type === 'company') {
-                  this.user.hasCompanyLogo = true; //
-                  this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`;
-                } else {
-                  this.user.hasProfile = true;
-                  this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`;
+    getImageDimensions(imageUrl).then(dimensions => {
+      const dialogWidth = getDialogWidth(dimensions);
+
+      this.dialogRef = this.dialogService.open(ImageCropperComponent, {
+        data: {
+          imageUrl: imageUrl,
+          fileUpload: type === 'company' ? this.companyUpload : this.profileUpload,
+          config: config,
+          ratioVariable: type === 'company' ? true : false,
+        },
+        header: 'Edit Image',
+        width: dialogWidth,
+        modal: true,
+        closeOnEscape: true,
+        keepInViewport: true,
+        closable: false,
+      });
+      this.dialogRef.onClose.subscribe(cropper => {
+        if (cropper) {
+          this.loadingService.startLoading('uploadImage');
+          cropper.getCroppedCanvas().toBlob(async blob => {
+            this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', emailToDirName(this.user.email)).subscribe(
+              async event => {
+                if (event.type === HttpEventType.Response) {
+                  this.loadingService.stopLoading('uploadImage');
+                  if (this.type === 'company') {
+                    this.user.hasCompanyLogo = true; //
+                    this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
+                  } else {
+                    this.user.hasProfile = true;
+                    this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
+                  }
+                  await this.userService.save(this.user);
                 }
-              }
-            },
-            error => console.error('Fehler beim Upload:', error),
-          );
-        });
-      }
+              },
+              error => console.error('Fehler beim Upload:', error),
+            );
+          });
+        }
+      });
+    });
+  }
+  deleteConfirm(type: 'profile' | 'logo') {
+    this.confirmationService.confirm({
+      target: event.target as EventTarget,
+      message: `Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image`,
+      header: 'Delete Confirmation',
+      icon: 'pi pi-info-circle',
+      acceptButtonStyleClass: 'p-button-danger p-button-text',
+      rejectButtonStyleClass: 'p-button-text p-button-text',
+      acceptIcon: 'none',
+      rejectIcon: 'none',
+
+      accept: async () => {
+        if (type === 'profile') {
+          this.user.hasProfile = false;
+          await Promise.all([this.imageService.deleteProfileImagesById(this.user.email), this.userService.save(this.user)]);
+        } else {
+          this.user.hasCompanyLogo = false;
+          await Promise.all([this.imageService.deleteLogoImagesById(this.user.email), this.userService.save(this.user)]);
+        }
+        this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
+        this.user = await this.userService.getById(this.user.id);
+      },
+      reject: () => {
+        console.log('deny');
+      },
     });
   }
 }

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

@@ -28,7 +28,6 @@
           <div>
             <div class="mb-4">
               <label for="description" class="block font-medium text-900 mb-2">Description</label>
-              <!-- <textarea id="description" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.description"></textarea> -->
               <p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }" [modules]="editorModules">
                 <ng-template pTemplate="header"></ng-template>
               </p-editor>
@@ -36,13 +35,26 @@
           </div>
           <div class="mb-4">
             <label for="type" class="block font-medium text-900 mb-2">Type of business</label>
-            <p-dropdown id="type" [options]="typesOfBusiness" [(ngModel)]="listing.type" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Type of business" [style]="{ width: '100%' }"></p-dropdown>
+            <p-dropdown
+              id="type"
+              [filter]="true"
+              filterBy="name"
+              [options]="typesOfBusiness"
+              [(ngModel)]="listing.type"
+              optionLabel="name"
+              optionValue="value"
+              [showClear]="true"
+              placeholder="Type of business"
+              [style]="{ width: '100%' }"
+            ></p-dropdown>
           </div>
           <div class="grid">
             <div class="mb-4 col-12 md:col-6">
               <label for="listingCategory" class="block font-medium text-900 mb-2">State</label>
               <p-dropdown
                 id="listingCategory"
+                [filter]="true"
+                filterBy="name"
                 [options]="selectOptions?.states"
                 [(ngModel)]="listing.state"
                 optionLabel="name"
@@ -66,27 +78,27 @@
             <div class="mb-4 col-12 md:col-6">
               <label for="price" class="block font-medium text-900 mb-2">Price</label>
               <!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
-              <app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
+              <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></p-inputNumber>
             </div>
             <div class="mb-4 col-12 md:col-6">
               <label for="salesRevenue" class="block font-medium text-900 mb-2">Sales Revenue</label>
-              <app-inputNumber mode="currency" currency="USD" inputId="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-inputNumber>
+              <p-inputNumber mode="currency" currency="USD" inputId="salesRevenue" [(ngModel)]="listing.salesRevenue"></p-inputNumber>
             </div>
           </div>
           <div class="grid">
             <div class="mb-4 col-12 md:col-6">
               <label for="cashFlow" class="block font-medium text-900 mb-2">Cash Flow</label>
-              <app-inputNumber mode="currency" currency="USD" inputId="cashFlow" [(ngModel)]="listing.cashFlow"></app-inputNumber>
+              <p-inputNumber mode="currency" currency="USD" inputId="cashFlow" [(ngModel)]="listing.cashFlow"></p-inputNumber>
             </div>
           </div>
           <div class="grid">
             <div class="mb-4 col-12 md:col-6">
-              <label for="employees" class="block font-medium text-900 mb-2">Years Established Since</label>
-              <app-inputNumber mode="decimal" inputId="established" [(ngModel)]="listing.established"></app-inputNumber>
+              <label for="established" class="block font-medium text-900 mb-2">Years Established Since</label>
+              <p-inputNumber mode="decimal" inputId="established" [(ngModel)]="listing.established" [useGrouping]="false"></p-inputNumber>
             </div>
             <div class="mb-4 col-12 md:col-6">
               <label for="employees" class="block font-medium text-900 mb-2">Employees</label>
-              <app-inputNumber mode="decimal" inputId="employees" [(ngModel)]="listing.employees"></app-inputNumber>
+              <p-inputNumber mode="decimal" inputId="employees" [(ngModel)]="listing.employees" [useGrouping]="false"></p-inputNumber>
             </div>
           </div>
           <div class="grid">
@@ -119,7 +131,7 @@
             </div>
             <div class="mb-4 col-12 md:col-6">
               <label for="internalListingNumber" class="block font-medium text-900 mb-2">Internal Listing Number</label>
-              <app-inputNumber mode="decimal" inputId="internalListingNumber" type="text" [(ngModel)]="listing.internalListingNumber"></app-inputNumber>
+              <p-inputNumber mode="decimal" inputId="internalListingNumber" type="text" [(ngModel)]="listing.internalListingNumber" [useGrouping]="false"></p-inputNumber>
             </div>
           </div>
           <div class="mb-4">

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

@@ -3,12 +3,13 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { lastValueFrom } from 'rxjs';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { createGenericObject, getListingType, routeListingWithState } from '../../../utils/utils';
+import { createDefaultBusinessListing, map2User, routeListingWithState } from '../../../utils/utils';
 
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { AngularCropperjsModule } from 'angular-cropperjs';
 import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
+import { KeycloakService } from 'keycloak-angular';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { CarouselModule } from 'primeng/carousel';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -17,7 +18,7 @@ import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dy
 import { EditorModule } from 'primeng/editor';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
 import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { AutoCompleteCompleteEvent, ImageProperty } from '../../../../../../bizmatch-server/src/models/main.model';
+import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
 import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
@@ -59,9 +60,7 @@ export class EditBusinessListingComponent {
   private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
   user: User;
   maxFileSize = 3000000;
-  uploadUrl: string;
   environment = environment;
-  propertyImages: string[];
   responsiveOptions = [
     {
       breakpoint: '1199px',
@@ -99,6 +98,7 @@ export class EditBusinessListingComponent {
     public dialogService: DialogService,
     private confirmationService: ConfirmationService,
     private route: ActivatedRoute,
+    private keycloakService: KeycloakService,
   ) {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
@@ -115,21 +115,24 @@ export class EditBusinessListingComponent {
     });
   }
   async ngOnInit() {
+    const token = await this.keycloakService.getToken();
+    const keycloakUser = map2User(token);
     if (this.mode === 'edit') {
       this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'business'));
     } else {
-      this.listing = createGenericObject<BusinessListing>();
-      this.listing.listingsCategory = 'business';
-      this.listing.userId = await this.userService.getId();
-      this.listing.title = this.data?.title;
-      this.listing.description = this.data?.description;
+      this.listing = createDefaultBusinessListing();
+      const listingUser = await this.userService.getByMail(keycloakUser.email);
+      this.listing.userId = listingUser.id;
+      this.listing.imageName = emailToDirName(keycloakUser.email);
+      if (this.data) {
+        this.listing.title = this.data?.title;
+        this.listing.description = this.data?.description;
+      }
     }
-    this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
-    this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
   }
 
   async save() {
-    this.listing = await this.listingsService.save(this.listing, getListingType(this.listing));
+    this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
     this.router.navigate(['editBusinessListing', this.listing.id]);
     this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
   }

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

@@ -38,6 +38,8 @@
             <label for="type" class="block font-medium text-900 mb-2">Property Category</label>
             <p-dropdown
               id="type"
+              [filter]="true"
+              filterBy="name"
               [options]="typesOfCommercialProperty"
               [(ngModel)]="listing.type"
               optionLabel="name"
@@ -50,7 +52,18 @@
           <div class="grid">
             <div class="mb-4 col-12 md:col-6">
               <label for="states" class="block font-medium text-900 mb-2">State</label>
-              <p-dropdown id="states" [options]="selectOptions?.states" [(ngModel)]="listing.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
+              <p-dropdown
+                [filter]="true"
+                filterBy="name"
+                id="states"
+                [options]="selectOptions?.states"
+                [(ngModel)]="listing.state"
+                optionLabel="name"
+                optionValue="value"
+                [showClear]="true"
+                placeholder="State"
+                [style]="{ width: '100%' }"
+              ></p-dropdown>
             </div>
             <div class="mb-4 col-12 md:col-6">
               <label for="city" class="block font-medium text-900 mb-2">City</label>
@@ -69,58 +82,66 @@
           </div>
         </div>
       </div>
-      <p-divider></p-divider>
-      <div class="flex gap-5 flex-column-reverse md:flex-row">
-        <div class="flex-auto p-fluid">
-          <div class="grid">
-            <div class="mb-4 col-12 md:col-6">
-              <label for="price" class="block font-medium text-900 mb-2">Price</label>
-              <!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
-              <app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
-            </div>
-            <div class="mb-4 col-12 md:col-6">
-              <div class="flex flex-column align-items-center flex-or">
-                <span class="font-medium text-900 mb-2">Property Pictures</span>
-                <span class="font-light text-sm text-900 mb-2">(Pictures can be uploaded once the listing is posted initially)</span>
-                <!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> -->
-                <p-fileUpload
-                  mode="basic"
-                  chooseLabel="Upload"
-                  [customUpload]="true"
-                  name="file"
-                  accept="image/*"
-                  [maxFileSize]="maxFileSize"
-                  (onSelect)="select($event)"
-                  styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
-                  [disabled]="!listing.id"
-                >
-                </p-fileUpload>
+      <div class="grid">
+        <div class="mb-4 col-12 md:col-6">
+          <p-inputSwitch inputId="draft" [(ngModel)]="listing.draft"></p-inputSwitch>
+          <span class="ml-2 text-900 absolute translate-y-5">Draft Mode (Will not be shown as public listing)</span>
+        </div>
+      </div>
+      <div>
+        <p-divider></p-divider>
+        <div class="flex gap-5 flex-column-reverse md:flex-row">
+          <div class="flex-auto p-fluid">
+            <div class="grid">
+              <div class="mb-4 col-12 md:col-6">
+                <label for="price" class="block font-medium text-900 mb-2">Price</label>
+                <!-- <p-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price" ></p-inputNumber> -->
+                <app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
+              </div>
+              <div class="mb-4 col-12 md:col-6">
+                <div class="flex flex-column align-items-center flex-or">
+                  <span class="font-medium text-900 mb-2">Property Pictures</span>
+                  <span class="font-light text-sm text-900 mb-2">(Pictures can be uploaded once the listing is posted initially)</span>
+                  <!-- <img [src]="propertyPictureUrl" (error)="setImageToFallback($event)" class="image"/> -->
+                  <p-fileUpload
+                    mode="basic"
+                    chooseLabel="Upload"
+                    [customUpload]="true"
+                    name="file"
+                    accept="image/*"
+                    [maxFileSize]="maxFileSize"
+                    (onSelect)="select($event)"
+                    styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
+                    [disabled]="!listing.id"
+                  >
+                  </p-fileUpload>
+                </div>
               </div>
             </div>
-          </div>
-          @if (propertyImages?.length>0){
-          <div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup mixedCdkDragDrop (dropped)="onDrop($event)" cdkDropListOrientation="horizontal">
-            @for (image of propertyImages; track image) {
-            <span cdkDropList mixedCdkDropList>
-              <div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
-                <img src="pictures/property/{{ listing.imagePath }}/{{ image }}" [alt]="image" class="shadow-2" cdkDrag />
-                <fa-icon [icon]="faTrash" (click)="deleteConfirm(image)"></fa-icon>
-              </div>
-            </span>
-            }
-          </div>
-          }
-          <div>
-            @if (mode==='create'){
-            <button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
-            } @else {
-            <button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
+            @if (listing && listing.imageOrder?.length>0){
+            <div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup mixedCdkDragDrop (dropped)="onDrop($event)" cdkDropListOrientation="horizontal">
+              @for (image of listing.imageOrder; track listing.imageOrder) {
+              <span cdkDropList mixedCdkDropList>
+                <div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
+                  <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="shadow-2" cdkDrag />
+                  <fa-icon [icon]="faTrash" (click)="deleteConfirm(image)"></fa-icon>
+                </div>
+              </span>
+              }
+            </div>
             }
+            <div>
+              @if (mode==='create'){
+              <button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
+              } @else {
+              <button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
+              }
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
+  <p-toast></p-toast>
+  <p-confirmDialog></p-confirmDialog>
 </div>
-<p-toast></p-toast>
-<p-confirmDialog></p-confirmDialog>

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

@@ -1,27 +1,27 @@
 .translate-y-5 {
-    transform: translateY(5px);
+  transform: translateY(5px);
 }
 
 .image-container {
-    display: flex; /* Erlaubt ein flexibles Box-Layout */
-    flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
-    justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
-    align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
-    padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
-  }
+  display: flex; /* Erlaubt ein flexibles Box-Layout */
+  flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
+  justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
+  align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
+  padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
+}
 
 .image-container span {
-    flex-flow: row;
-    display: flex;
-    width: fit-content;
-    height: fit-content;
+  flex-flow: row;
+  display: flex;
+  width: fit-content;
+  height: fit-content;
 }
 
 .image-container span img {
-    max-height: 150px; /* Maximale Höhe der Bilder */
-    width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
-    cursor: pointer;
-    margin: 10px;
+  max-height: 150px; /* Maximale Höhe der Bilder */
+  width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
+  cursor: pointer;
+  margin: 10px;
 }
 // .image-container fa-icon {
 //     top: 0; /* Positioniert das Icon am oberen Rand des Bildes */
@@ -32,26 +32,26 @@
 //     cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
 //   }
 
-  .image-wrap {
-    position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
-    display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
-  }
+.image-wrap {
+  position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
+  display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
+}
 
-  /* Stil für das Bild */
-  .image-wrap img {
-    max-height: 150px;
-    width: auto;
-    display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
-  }
+/* Stil für das Bild */
+.image-wrap img {
+  max-height: 150px;
+  width: auto;
+  display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
+}
 
-  /* Stil für das FontAwesome Icon */
-  .image-wrap fa-icon {
-    position: absolute;
-    top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
-    right: 15px; /* Positioniert das Icon am rechten Rand des Bildes */
-    color: #fff; /* Weiße Farbe für das Icon */
-    background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
-    padding: 5px; /* Ein wenig Platz um das Icon */
-    cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
-    border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
-  }
+/* Stil für das FontAwesome Icon */
+.image-wrap fa-icon {
+  position: absolute;
+  top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
+  right: 15px; /* Positioniert das Icon am rechten Rand des Bildes */
+  color: #fff; /* Weiße Farbe für das Icon */
+  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
+  padding: 5px; /* Ein wenig Platz um das Icon */
+  cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
+  border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
+}

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

@@ -3,13 +3,14 @@ import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { lastValueFrom } from 'rxjs';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { createGenericObject, getListingType, routeListingWithState } from '../../../utils/utils';
+import { createDefaultCommercialPropertyListing, getDialogWidth, getImageDimensions, map2User, routeListingWithState } from '../../../utils/utils';
 
 import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { HttpEventType } from '@angular/common/http';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { AngularCropperjsModule } from 'angular-cropperjs';
 import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
+import { KeycloakService } from 'keycloak-angular';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { CarouselModule } from 'primeng/carousel';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -18,7 +19,7 @@ import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dy
 import { EditorModule } from 'primeng/editor';
 import { FileUpload, FileUploadModule } from 'primeng/fileupload';
 import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { AutoCompleteCompleteEvent, ImageProperty } from '../../../../../../bizmatch-server/src/models/main.model';
+import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
 import { InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
@@ -61,9 +62,7 @@ export class EditCommercialPropertyListingComponent {
   private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
   user: User;
   maxFileSize = 3000000;
-  uploadUrl: string;
   environment = environment;
-  propertyImages: string[];
   responsiveOptions = [
     {
       breakpoint: '1199px',
@@ -90,6 +89,8 @@ export class EditCommercialPropertyListingComponent {
   data: BusinessListing;
   userId: string;
   typesOfCommercialProperty = [];
+  env = environment;
+  ts = new Date().getTime();
   constructor(
     public selectOptions: SelectOptionsService,
     private router: Router,
@@ -103,6 +104,7 @@ export class EditCommercialPropertyListingComponent {
     public dialogService: DialogService,
     private confirmationService: ConfirmationService,
     private route: ActivatedRoute,
+    private keycloakService: KeycloakService,
   ) {
     // Abonniere Router-Events, um den aktiven Link zu ermitteln
     this.router.events.subscribe(event => {
@@ -120,20 +122,24 @@ export class EditCommercialPropertyListingComponent {
     });
   }
   async ngOnInit() {
+    const token = await this.keycloakService.getToken();
+    const keycloakUser = map2User(token);
     if (this.mode === 'edit') {
       this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
     } else {
-      this.listing = createGenericObject<CommercialPropertyListing>();
-      this.listing.userId = await this.userService.getId();
-      this.listing.title = this.data?.title;
-      this.listing.description = this.data?.description;
+      this.listing = createDefaultCommercialPropertyListing();
+      const listingUser = await this.userService.getByMail(keycloakUser.email);
+      this.listing.userId = listingUser.id;
+      this.listing.imagePath = `${emailToDirName(keycloakUser.email)}`;
+      if (this.data) {
+        this.listing.title = this.data?.title;
+        this.listing.description = this.data?.description;
+      }
     }
-    this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/image/uploadPropertyPicture/${this.listing.id}`;
-    this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
   }
 
   async save() {
-    this.listing = await this.listingsService.save(this.listing, getListingType(this.listing));
+    this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
     this.router.navigate(['editCommercialPropertyListing', this.listing.id]);
     this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
   }
@@ -145,40 +151,44 @@ export class EditCommercialPropertyListingComponent {
 
   select(event: any) {
     const imageUrl = URL.createObjectURL(event.files[0]);
-    this.dialogRef = this.dialogService.open(ImageCropperComponent, {
-      data: {
-        imageUrl: imageUrl,
-        fileUpload: this.fileUpload,
-        ratioVariable: false,
-      },
-      header: 'Edit Image',
-      width: '50vw',
-      modal: true,
-      closeOnEscape: true,
-      keepInViewport: true,
-      closable: false,
-      breakpoints: {
-        '960px': '75vw',
-        '640px': '90vw',
-      },
-    });
-    this.dialogRef.onClose.subscribe(cropper => {
-      if (cropper) {
-        this.loadingService.startLoading('uploadImage');
-        cropper.getCroppedCanvas().toBlob(async blob => {
-          this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.id).subscribe(
-            async event => {
-              if (event.type === HttpEventType.Response) {
-                console.log('Upload abgeschlossen', event.body);
-                this.loadingService.stopLoading('uploadImage');
-                this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
-              }
-            },
-            error => console.error('Fehler beim Upload:', error),
-          );
-        }, 'image/jpg');
-        cropper.destroy();
-      }
+    getImageDimensions(imageUrl).then(dimensions => {
+      const dialogWidth = getDialogWidth(dimensions);
+      this.dialogRef = this.dialogService.open(ImageCropperComponent, {
+        data: {
+          imageUrl: imageUrl,
+          fileUpload: this.fileUpload,
+          ratioVariable: false,
+        },
+        header: 'Edit Image',
+        width: dialogWidth,
+        modal: true,
+        closeOnEscape: true,
+        keepInViewport: true,
+        closable: false,
+        breakpoints: {
+          '960px': '75vw',
+          '640px': '90vw',
+        },
+      });
+      this.dialogRef.onClose.subscribe(cropper => {
+        if (cropper) {
+          this.loadingService.startLoading('uploadImage');
+          cropper.getCroppedCanvas().toBlob(async blob => {
+            this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.imagePath, this.listing.serialId).subscribe(
+              async event => {
+                if (event.type === HttpEventType.Response) {
+                  this.ts = new Date().getTime();
+                  console.log('Upload abgeschlossen', event.body);
+                  this.loadingService.stopLoading('uploadImage');
+                  this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
+                }
+              },
+              error => console.error('Fehler beim Upload:', error),
+            );
+          }, 'image/jpg');
+          cropper.destroy();
+        }
+      });
     });
   }
 
@@ -194,9 +204,9 @@ export class EditCommercialPropertyListingComponent {
       rejectIcon: 'none',
 
       accept: async () => {
-        await this.imageService.deleteListingImage(this.listing.id, imageName);
+        this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
+        await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
         this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
-        this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
       },
       reject: () => {
         // this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
@@ -206,8 +216,7 @@ export class EditCommercialPropertyListingComponent {
   }
 
   onDrop(event: { previousIndex: number; currentIndex: number }) {
-    moveItemInArray(this.propertyImages, event.previousIndex, event.currentIndex);
-    this.listingsService.changeImageOrder(this.listing.id, this.propertyImages);
+    moveItemInArray(this.listing.imageOrder, event.previousIndex, event.currentIndex);
   }
   changeListingCategory(value: 'business' | 'commercialProperty') {
     routeListingWithState(this.router, value, this.listing);

bizmatch/src/app/pages/subscription/email-us/email-us.component.html

@@ -1,35 +1,34 @@
-
 <div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
-    <div class="p-fluid flex flex-column lg:flex-row">
-        <menu-account></menu-account>
-        <div class="surface-card p-5 shadow-2 border-round flex-auto">
-            <div class="text-900 font-semibold text-lg mt-3">Contact Us</div>
-            <p-divider></p-divider>
-            <div class="flex gap-5 flex-column-reverse md:flex-row">
-                <div class="flex-auto p-fluid">
-                    <div class="grid">
-                        <div class="mb-4 col-12 md:col-6">
-                            <label for="name" class="block font-medium text-900 mb-2">Your name</label>
-                            <input id="name" type="text" pInputText>
-                        </div>
-                        <div class="mb-4 col-12 md:col-6">
-                            <label for="email" class="block font-medium text-900 mb-2">Your Email</label>
-                            <input id="email" type="text" pInputText>
-                        </div>
-                    </div>
-                    <div class="mb-4">
-                        <label for="phone" class="block font-medium text-900 mb-2">Your Phone</label>
-                        <input id="phone" type="text" pInputText>
-                    </div>
-                    <div class="mb-4">
-                        <label for="help" class="block font-medium text-900 mb-2">How can we help you ?</label>
-                        <textarea id="help" type="text" pInputTextarea rows="5" [autoResize]="true"></textarea>
-                    </div>
-                    <div>
-                        <button pButton pRipple label="Submit" class="w-auto"></button>
-                    </div>
-                </div>
+  <div class="p-fluid flex flex-column lg:flex-row">
+    <menu-account></menu-account>
+    <div class="surface-card p-5 shadow-2 border-round flex-auto">
+      <div class="text-900 font-semibold text-lg mt-3">Contact Us</div>
+      <p-divider></p-divider>
+      <div class="flex gap-5 flex-column-reverse md:flex-row">
+        <div class="flex-auto p-fluid formgrid">
+          <div class="grid">
+            <div class="mb-4 col-12 md:col-6">
+              <label for="name" class="block font-medium text-900 mb-2">Your name</label>
+              <input [ngClass]="{ 'ng-invalid': containsError('name'), 'ng-dirty': containsError('name') }" name="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
             </div>
+            <div class="mb-4 col-12 md:col-6">
+              <label for="email" class="block font-medium text-900 mb-2">Your Email</label>
+              <input name="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
+            </div>
+          </div>
+          <div class="mb-4">
+            <label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone</label>
+            <p-inputMask id="phoneNumber" name="phoneNumber" mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="mailinfo.sender.phoneNumber"></p-inputMask>
+          </div>
+          <div class="mb-4">
+            <label for="help" class="block font-medium text-900 mb-2">How can we help you ?</label>
+            <textarea name="help" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="mailinfo.sender.comments"></textarea>
+          </div>
+          <div>
+            <button pButton pRipple label="Submit" class="w-auto" (click)="mail()"></button>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>

bizmatch/src/app/pages/subscription/email-us/email-us.component.ts

@@ -1,28 +1,50 @@
 import { Component } from '@angular/core';
-import { ButtonModule } from 'primeng/button';
-import { CheckboxModule } from 'primeng/checkbox';
-import { InputTextModule } from 'primeng/inputtext';
-import { StyleClassModule } from 'primeng/styleclass';
-import { SelectOptionsService } from '../../../services/select-options.service';
-import { DropdownModule } from 'primeng/dropdown';
-import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
-import { ToggleButtonModule } from 'primeng/togglebutton';
-import { TagModule } from 'primeng/tag';
-import data from '../../../../assets/data/user.json';
-import { ActivatedRoute } from '@angular/router';
-import { InputTextareaModule } from 'primeng/inputtextarea';
-import { ChipModule } from 'primeng/chip';
-import { MenuAccountComponent } from '../../menu-account/menu-account.component';
-import { DividerModule } from 'primeng/divider';
-import { TableModule } from 'primeng/table';
+import { KeycloakService } from 'keycloak-angular';
+
+import { MessageService } from 'primeng/api';
+import { InputMaskModule } from 'primeng/inputmask';
+import { User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
+import { environment } from '../../../../environments/environment';
+import { MailService } from '../../../services/mail.service';
+import { UserService } from '../../../services/user.service';
+import { SharedModule } from '../../../shared/shared/shared.module';
+import { map2User } from '../../../utils/utils';
 @Component({
   selector: 'app-email-us',
   standalone: true,
-  imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule],
+  imports: [SharedModule, InputMaskModule],
+  providers: [MessageService],
   templateUrl: './email-us.component.html',
-  styleUrl: './email-us.component.scss'
+  styleUrl: './email-us.component.scss',
 })
 export class EmailUsComponent {
-
+  mailinfo: MailInfo;
+  keycloakUser: KeycloakUser;
+  user: User;
+  errorResponse: ErrorResponse;
+  constructor(private mailService: MailService, private userService: UserService, public keycloakService: KeycloakService, private messageService: MessageService) {
+    this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
+  }
+  async ngOnInit() {
+    const token = await this.keycloakService.getToken();
+    this.keycloakUser = map2User(token);
+    if (this.keycloakUser) {
+      this.user = await this.userService.getByMail(this.keycloakUser.email);
+      this.mailinfo.sender = { name: `${this.user.firstname} ${this.user.lastname}`, email: this.user.email, phoneNumber: this.user.phoneNumber, state: this.user.companyLocation };
+    }
+  }
+  async mail() {
+    this.mailinfo.email = 'support@bizmatch.net';
+    const result = await this.mailService.mail(this.mailinfo);
+    if (result) {
+      this.errorResponse = result as ErrorResponse;
+    } else {
+      this.errorResponse = null;
+      this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your request has been forwarded to the support team of bizmatch.', life: 3000 });
+    }
+  }
+  containsError(fieldname: string) {
+    return this.errorResponse?.fields.map(f => f.fieldname).includes(fieldname);
+  }
 }

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

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { User } from '../../../../../../bizmatch-server/src/models/db.model';
-import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakService } from 'keycloak-angular';
+import { KeycloakUser, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
-import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
+import { map2User } from '../../../utils/utils';
 import { MenuAccountComponent } from '../../menu-account/menu-account.component';
 
 @Component({
@@ -15,14 +15,13 @@ import { MenuAccountComponent } from '../../menu-account/menu-account.component'
   styleUrl: './favorites.component.scss',
 })
 export class FavoritesComponent {
-  user: User;
+  user: KeycloakUser;
   listings: Array<ListingType> = []; //= dataListings as unknown as Array<BusinessListing>;
   favorites: Array<ListingType>;
-  constructor(public userService: UserService, private listingsService: ListingsService, public selectOptions: SelectOptionsService) {
-    this.user = this.userService.getKeycloakUser();
-  }
+  constructor(public keycloakService: KeycloakService, private listingsService: ListingsService, public selectOptions: SelectOptionsService) {}
   async ngOnInit() {
-    // this.listings=await lastValueFrom(this.listingsService.getAllListings());
+    const token = await this.keycloakService.getToken();
+    this.user = map2User(token);
     this.favorites = this.listings.filter(l => l.favoritesForUser?.includes(this.user.id));
   }
 }

bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html

@@ -30,9 +30,9 @@
             <td>{{ selectOptions.getListingsCategory(listing.listingsCategory) }}</td>
             <td>{{ selectOptions.getState(listing.state) }}</td>
             <td>
-              @if(isBusinessListing(listing)){
+              @if(listing.listingsCategory==='business'){
               <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" [routerLink]="['/editBusinessListing', listing.id]"></button>
-              } @if(isCommercialPropertyListing(listing)){
+              } @if(listing.listingsCategory==='commercialProperty'){
               <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" [routerLink]="['/editCommercialPropertyListing', listing.id]"></button>
               }
               <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="confirm($event, listing)"></button>

bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts

@@ -1,12 +1,13 @@
 import { ChangeDetectorRef, Component } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
 import { ConfirmationService, MessageService } from 'primeng/api';
-import { User } from '../../../../../../bizmatch-server/src/models/db.model';
+import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
 import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
-import { getListingType, isBusinessListing, isCommercialPropertyListing } from '../../../utils/utils';
+import { map2User } from '../../../utils/utils';
 import { MenuAccountComponent } from '../../menu-account/menu-account.component';
 @Component({
   selector: 'app-my-listing',
@@ -20,10 +21,9 @@ export class MyListingComponent {
   listings: Array<ListingType> = []; //dataListings as unknown as Array<BusinessListing>;
   myListings: Array<ListingType>;
   user: User;
-  isBusinessListing = isBusinessListing;
-  isCommercialPropertyListing = isCommercialPropertyListing;
   constructor(
     public userService: UserService,
+    public keycloakService: KeycloakService,
     private listingsService: ListingsService,
     private cdRef: ChangeDetectorRef,
     public selectOptions: SelectOptionsService,
@@ -31,16 +31,22 @@ export class MyListingComponent {
     private messageService: MessageService,
   ) {}
   async ngOnInit() {
-    const keycloakUser = this.userService.getKeycloakUser();
+    // const keycloakUser = this.userService.getKeycloakUser();
+    const token = await this.keycloakService.getToken();
+    const keycloakUser = map2User(token);
     const email = keycloakUser.email;
     this.user = await this.userService.getByMail(email);
-    const result = await Promise.all([await this.listingsService.getListingByUserId(this.user.id, 'business'), await this.listingsService.getListingByUserId(this.user.id, 'commercialProperty')]);
+    const result = await Promise.all([await this.listingsService.getListingsByEmail(this.user.email, 'business'), await this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
     this.myListings = [...result[0], ...result[1]];
   }
 
   async deleteListing(listing: ListingType) {
-    await this.listingsService.deleteListing(listing.id, getListingType(listing));
-    const result = await Promise.all([await this.listingsService.getListingByUserId(this.user.id, 'business'), await this.listingsService.getListingByUserId(this.user.id, 'commercialProperty')]);
+    if (listing.listingsCategory === 'business') {
+      await this.listingsService.deleteBusinessListing(listing.id);
+    } else {
+      await this.listingsService.deleteCommercialPropertyListing(listing.id, (<CommercialPropertyListing>listing).imagePath);
+    }
+    const result = await Promise.all([await this.listingsService.getListingsByEmail(this.user.email, 'business'), await this.listingsService.getListingsByEmail(this.user.email, 'commercialProperty')]);
     this.myListings = [...result[0], ...result[1]];
   }