changes to old client

bizmatch/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host 0.0.0.0 & http-server ../bizmatch-server",
+    "start": "ng serve --port=4300 --host 0.0.0.0 & http-server ../bizmatch-server",
     "prebuild": "node version.js",
     "build": "node version.js && ng build",
     "build.dev": "node version.js && ng build --configuration dev --output-hashing=all",
@@ -77,4 +77,4 @@
     "tailwindcss": "^3.4.4",
     "typescript": "~5.4.5"
   }
-}
+}

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

@@ -63,27 +63,18 @@
           <li>
             <a routerLink="/account" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Account</a>
           </li>
-          @if((user.customerType==='professional' && user.customerSubType==='broker') || user.customerType==='seller' || (authService.isAdmin() | async)){
+          @if(isProfessional || (authService.isAdmin() | async) && user?.hasProfile){
           <li>
-            @if(user.customerType==='professional'){
             <a routerLink="/createBusinessListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
               >Create Listing</a
             >
-            }@else {
-            <a routerLink="/createCommercialPropertyListing" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
-              >Create Listing</a
-            >
-            }
-          </li>
-          <li>
-            <a routerLink="/myListings" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
           </li>
           }
           <li>
-            <a routerLink="/myFavorites" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
+            <a routerLink="/myListings" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Listings</a>
           </li>
           <li>
-            <a routerLink="/emailUs" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">EMail Us</a>
+            <a routerLink="/myFavorites" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">My Favorites</a>
           </li>
           <li>
             <a routerLink="/logout" (click)="closeDropdown()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Logout</a>
@@ -96,7 +87,7 @@
           </li>
         </ul>
         }
-        <ul class="py-2 md:hidden">
+        <!-- <ul class="py-2 md:hidden">
           <li>
             <a
               routerLink="/businessListings"
@@ -127,7 +118,7 @@
             >
           </li>
           }
-        </ul>
+        </ul> -->
       </div>
       } @else {
       <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600" id="user-unknown">
@@ -135,11 +126,11 @@
           <li>
             <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Log In</a>
           </li>
-          <li>
+          <!-- <li>
             <a routerLink="/login" [queryParams]="{ mode: 'register' }" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white">Sign Up</a>
-          </li>
+          </li> -->
         </ul>
-        <ul class="py-2 md:hidden">
+        <!-- <ul class="py-2 md:hidden">
           <li>
             <a
               routerLink="/businessListings"
@@ -170,11 +161,11 @@
             >
           </li>
           }
-        </ul>
+        </ul> -->
       </div>
       }
     </div>
-    <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
+    <!-- <div class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
       <ul
         class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"
       >
@@ -213,7 +204,7 @@
         </li>
         }
       </ul>
-    </div>
+    </div> -->
   </div>
   <!-- Mobile filter button -->
   <div class="md:hidden flex justify-center pb-4">

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

@@ -135,6 +135,9 @@ export class HeaderComponent {
   isActive(route: string): boolean {
     return this.router.url === route;
   }
+  isEmailUsUrl(): boolean {
+    return ['/emailUs'].includes(this.router.url);
+  }
   isFilterUrl(): boolean {
     return ['/businessListings', '/commercialPropertyListings', '/brokerListings'].includes(this.router.url);
   }

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

@@ -41,6 +41,7 @@ export class LoginRegisterComponent {
   onSubmit(): void {
     this.errorMessage = '';
     if (this.isLoginMode) {
+      this.authService.clearRoleCache();
       this.authService
         .loginWithEmail(this.email, this.password)
         .then(userCredential => {
@@ -81,6 +82,7 @@ export class LoginRegisterComponent {
   // Login with Google
   loginWithGoogle(): void {
     this.errorMessage = '';
+    this.authService.clearRoleCache();
     this.authService
       .loginWithGoogle()
       .then(userCredential => {

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

@@ -12,6 +12,11 @@
       <a href="#services" class="text-gray-800 hover:text-blue-600">Services</a>
       <a href="#location" class="text-gray-800 hover:text-blue-600">Location</a>
       <a href="#contact" class="text-gray-800 hover:text-blue-600">Contact</a>
+      @if(user){
+      <a routerLink="/logout" class="text-gray-800 hover:text-blue-600">Logout</a>
+      }@else{
+      <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="text-gray-800 hover:text-blue-600">Log In</a>
+      }
     </div>
     <div class="md:hidden">
       <button class="text-gray-800 focus:outline-none" (click)="toggleMobileMenu()">
@@ -27,6 +32,11 @@
     <a href="#services" class="block py-2 text-gray-800 hover:text-blue-600">Services</a>
     <a href="#location" class="block py-2 text-gray-800 hover:text-blue-600">Location</a>
     <a href="#contact" class="block py-2 text-gray-800 hover:text-blue-600">Contact</a>
+    @if(user){
+    <a routerLink="/logout" class="block py-2 text-gray-800 hover:text-blue-600">Logout</a>
+    }@else{
+    <a routerLink="/login" [queryParams]="{ mode: 'login' }" class="block py-2 text-gray-800 hover:text-blue-600">Log In</a>
+    }
   </div>
 </nav>
 
@@ -189,37 +199,36 @@
   </div>
 </section>
 
-<!-- Location Section with Map -->
+<!-- Location Section -->
 <section id="location" class="py-20 bg-gray-50">
   <div class="container mx-auto px-6">
-    <div class="flex flex-wrap items-center">
+    <div class="flex flex-wrap items-stretch">
+      <!-- Changed from items-center to items-stretch -->
       <div class="w-full lg:w-2/5 mb-12 lg:mb-0">
-        <!-- Changed from 1/2 to 2/5 to make it smaller -->
+        <div class="h-full flex flex-col">
-        <h2 class="text-3xl font-bold text-blue-800 mb-6">Visit Our Office</h2>
+          <!-- Added flex container with h-full -->
-        <p class="text-gray-600 mb-8 text-lg">Our team of business brokers is ready to assist you at our Corpus Christi location.</p>
+          <h2 class="text-3xl font-bold text-blue-800 mb-6">Visit Our Office</h2>
-        <div class="bg-white p-6 rounded-lg shadow-lg">
+          <p class="text-gray-600 mb-8 text-lg">Our team of business brokers is ready to assist you at our Corpus Christi location.</p>
-          <h3 class="text-xl font-semibold text-blue-800 mb-4">BizMatch Headquarters</h3>
+          <div class="bg-white p-6 rounded-lg shadow-lg flex-grow">
-          <p class="text-gray-600 mb-2">1001 Blucher Street</p>
+            <!-- Added flex-grow to make it fill available space -->
-          <p class="text-gray-600 mb-2">Corpus Christi, TX 78401</p>
+            <h3 class="text-xl font-semibold text-blue-800 mb-4">BizMatch Headquarters</h3>
-          <p class="text-gray-600 mb-6">United States</p>
+            <p class="text-gray-600 mb-2">1001 Blucher Street</p>
-          <p class="text-gray-600 mb-2"><strong>Phone:</strong> (555) 123-4567</p>
+            <p class="text-gray-600 mb-2">Corpus Christi, TX 78401</p>
-          <p class="text-gray-600"><strong>Email:</strong> info&#64;bizmatch.net</p>
+            <p class="text-gray-600 mb-6">United States</p>
+            <p class="text-gray-600 mb-2"><strong>Phone:</strong> (555) 123-4567</p>
+            <p class="text-gray-600"><strong>Email:</strong> info&#64;bizmatch.net</p>
+          </div>
         </div>
       </div>
       <div class="w-full lg:w-3/5">
-        <!-- Changed from 1/2 to 3/5 for the map -->
+        <div class="rounded-lg overflow-hidden shadow-xl h-full min-h-[384px]">
-        <div class="rounded-lg overflow-hidden shadow-xl h-96">
+          <!-- Changed h-96 to h-full with min-height -->
-          <!-- Added fixed height -->
-          <!-- Google Maps integration -->
-          <!-- <google-map [options]="mapOptions" height="100%" width="100%">
-            <map-marker [position]="markerPosition"></map-marker>
-          </google-map> -->
           <iframe
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3331.7894679685755!2d-98.48527228476843!3d27.773756032788047!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866c1e3b8a9d0c0b%3A0x8f2c1d4c1a5c5b2c!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401%2C%20USA!5e0!3m2!1sen!2sde!4v1672531192743!5m2!1sen!2sde"
+            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3533.7894679685755!2d-97.38527228476843!3d27.773756032788047!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866c1e3b8a9d0c0b%3A0x8f2c1d4c1a5c5b2c!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401%2C%20USA!5e0!3m2!1sen!2sde!4v1672531192743!5m2!1sen!2sde"
             width="100%"
-            height="417"
+            height="100%"
-            class="rounded-lg shadow-lg"
+            class="rounded-lg border-0"
-            style="border: 0"
+            style="min-height: 384px; display: block"
             allowfullscreen=""
             loading="lazy"
             referrerpolicy="no-referrer-when-downgrade"

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

@@ -43,3 +43,43 @@ video {
   max-width: 100%;
   object-fit: cover;
 }
+
+// Zusätzliche Styles für den Location-Bereich
+
+// Verbesserte Map-Container Styles
+#location {
+  .rounded-lg.overflow-hidden {
+    position: relative;
+    height: 100%;
+    min-height: 384px;
+  }
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+  // Stellen Sie sicher, dass der Kartencontainer im mobilen Layout
+  // eine angemessene Höhe hat
+  @media (max-width: 1023px) {
+    .rounded-lg.overflow-hidden {
+      height: 400px;
+    }
+  }
+}
+
+// Adressbox-Styling verbessern
+.bg-white.p-6.rounded-lg.shadow-lg.flex-grow {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  // Sicherstellen, dass der untere Bereich sichtbar bleibt
+  .contact-info {
+    margin-top: auto;
+  }
+}

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

@@ -1,6 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
+import { AuthService } from '../../services/auth.service';
+
+import { User } from '../../../../../bizmatch-server/src/models/db.model';
+import { KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
+import { UserService } from '../../services/user.service';
+import { map2User } from '../../utils/utils';
 
 @Component({
   selector: 'app-home',
@@ -11,29 +17,19 @@ import { RouterLink, RouterOutlet } from '@angular/router';
 })
 export class HomeComponent implements OnInit {
   showMobileMenu = false;
+  keycloakUser: KeycloakUser;
+  user: User;
+  constructor(private authService: AuthService, private userService: UserService) {}
 
-  // Google Maps configuration
+  async ngOnInit() {
-  // mapOptions: google.maps.MapOptions = {
-  //   center: { lat: 27.777, lng: -97.396 }, // Corpus Christi coordinates
-  //   zoom: 15,
-  //   mapTypeId: 'roadmap',
-  //   scrollwheel: false,
-  //   disableDefaultUI: true,
-  //   zoomControl: true,
-  //   streetViewControl: true,
-  // };
-
-  // Marker position for office location
-  // markerPosition: google.maps.LatLngLiteral = {
-  //   lat: 27.777,
-  //   lng: -97.396,
-  // };
-
-  constructor() {}
-
-  ngOnInit(): void {
     // Add smooth scrolling for anchor links
     this.setupSmoothScrolling();
+    const token = await this.authService.getToken();
+    this.keycloakUser = map2User(token);
+    if (this.keycloakUser) {
+      this.user = await this.userService.getByMail(this.keycloakUser.email);
+      this.userService.changeUser(this.user);
+    }
   }
 
   toggleMobileMenu(): void {

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

@@ -77,9 +77,9 @@
           <span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">ADMIN</span>
         </div>
 
-        }@else{
+        }
-        <app-validated-select label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
+        <app-validated-select [disabled]="true" label="Customer Type" name="customerType" [(ngModel)]="user.customerType" [options]="customerTypeOptions"></app-validated-select>
-        } @if (isProfessional){
+        @if (isProfessional){
         <!-- <div>
           <label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
           <select id="customerSubType" name="customerSubType" [(ngModel)]="user.customerSubType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
@@ -220,7 +220,7 @@
         </div>
       </div>
       }
-      <div class="flex items-center !my-8">
+      <!-- <div class="flex items-center !my-8">
         <label class="flex items-center cursor-pointer">
           <div class="relative">
             <input type="checkbox" [(ngModel)]="user.showInDirectory" name="showInDirectory" class="hidden" />
@@ -228,7 +228,7 @@
           </div>
           <div class="ml-3 text-gray-700 font-medium">Show your profile in Professional Directory</div>
         </label>
-      </div>
+      </div> -->
 
       <div class="flex justify-start">
         <button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" (click)="updateProfile(user)">

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

@@ -130,38 +130,6 @@ export class AccountComponent {
         label: this.titleCasePipe.transform(type.name),
       }));
   }
-  // async synchronizeSubscriptions(subscriptions: StripeSubscription[]) {
-  //   let changed = false;
-  //   if (this.isAdmin()) {
-  //     return;
-  //   }
-  //   if (this.subscriptions.length === 0) {
-  //     if (!this.user.subscriptionPlan) {
-  //       this.router.navigate(['pricing']);
-  //     } else {
-  //       this.subscriptions = [{ ended_at: null, start_date: Math.floor(new Date(this.user.created).getTime() / 1000), status: null, metadata: { plan: 'Free Plan' } }];
-  //       changed = checkAndUpdate(changed, this.user.customerType !== 'buyer' && this.user.customerType !== 'seller', () => (this.user.customerType = 'buyer'));
-  //       changed = checkAndUpdate(changed, !!this.user.customerSubType, () => (this.user.customerSubType = null));
-  //       changed = checkAndUpdate(changed, this.user.subscriptionPlan !== 'free', () => (this.user.subscriptionPlan = 'free'));
-  //       changed = checkAndUpdate(changed, !!this.user.subscriptionId, () => (this.user.subscriptionId = null));
-  //     }
-  //   } else {
-  //     const subscription = subscriptions[0];
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.customerSubType !== 'broker', () => (this.user.customerSubType = 'broker'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && this.user.subscriptionPlan !== 'broker', () => (this.user.subscriptionPlan = 'broker'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Broker Plan' && !this.user.subscriptionId, () => (this.user.subscriptionId = subscription.id));
-
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.customerType !== 'professional', () => (this.user.customerType = 'professional'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionPlan !== 'professional', () => (this.user.subscriptionPlan = 'professional'));
-  //     changed = checkAndUpdate(changed, subscription.metadata['plan'] === 'Professional Plan' && this.user.subscriptionId !== 'professional', () => (this.user.subscriptionId = subscription.id));
-  //   }
-  //   if (changed) {
-  //     await this.userService.saveGuaranteed(this.user);
-  //     this.cdref.detectChanges();
-  //     this.cdref.markForCheck();
-  //   }
-  // }
 
   ngOnDestroy() {
     this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten

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

@@ -6,7 +6,7 @@
       <div class="mb-4">
         <label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
         <ng-select
-          [readonly]="mode === 'edit'"
+          [readonly]="true"
           [items]="selectOptions?.listingCategories"
           bindLabel="name"
           bindValue="value"

bizmatch/src/styles.scss

@@ -12,7 +12,6 @@
 @import 'tailwindcss/utilities';
 @import 'ngx-sharebuttons/themes/default';
 /* styles.scss */
-@import 'leaflet/dist/leaflet.css';
 :root {
   --text-color-secondary: rgba(255, 255, 255);
   --wrapper-width: 1491px;
@@ -115,20 +114,3 @@ input::placeholder,
 textarea::placeholder {
   color: #999 !important;
 }
-
-/* Fix für Marker-Icons in Leaflet */
-.leaflet-container {
-  height: 100%;
-  width: 100%;
-}
-
-.leaflet-marker-icon,
-.leaflet-marker-shadow {
-  display: block;
-}
-
-.leaflet-marker-icon {
-  /* Optional: Anpassen der Marker-Icon-Größe */
-  width: 25px;
-  height: 41px;
-}