new initialization process, keycloak update 24.0.4

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

@@ -9,6 +9,7 @@ import { BusinessListing, User } from '../../../../../../bizmatch-server/src/mod
 import { KeycloakUser, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { HistoryService } from '../../../services/history.service';
+import { KeycloakService } from '../../../services/keycloak.service';
 import { ListingsService } from '../../../services/listings.service';
 import { MailService } from '../../../services/mail.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
@@ -64,6 +65,7 @@ export class DetailsBusinessListingComponent {
     private messageService: MessageService,
     private sanitizer: DomSanitizer,
     public historyService: HistoryService,
+    public keycloakService: KeycloakService,
   ) {
     this.router.events.subscribe(event => {
       if (event instanceof NavigationEnd) {
@@ -71,9 +73,7 @@ export class DetailsBusinessListingComponent {
       }
     });
     this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
-    this.userService.getUserObservable().subscribe(user => {
-      this.user = user;
-    });
+    this.user;
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
   }
 
@@ -84,7 +84,7 @@ export class DetailsBusinessListingComponent {
   }
 
   isAdmin() {
-    return this.userService.hasAdminRole();
+    return this.keycloakService.getUserRoles(true).includes('ADMIN');
   }
   async mail() {
     this.mailinfo.email = this.listingUser.email;

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

@@ -9,12 +9,13 @@ import { CommercialPropertyListing, User } from '../../../../../../bizmatch-serv
 import { ErrorResponse, KeycloakUser, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
 import { HistoryService } from '../../../services/history.service';
+import { KeycloakService } from '../../../services/keycloak.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',
@@ -65,22 +66,23 @@ export class DetailsCommercialPropertyListingComponent {
     private messageService: MessageService,
     private sanitizer: DomSanitizer,
     public historyService: HistoryService,
+    public keycloakService: KeycloakService,
   ) {
     this.mailinfo = { sender: {}, userId: '', email: '', url: environment.mailinfoUrl };
-    this.userService.getUserObservable().subscribe(user => {
-      this.user = user;
-    });
+
     this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
   }
 
   async ngOnInit() {
+    const token = await this.keycloakService.getToken();
+    this.user = map2User(token);
     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);
   }
   isAdmin() {
-    return this.userService.hasAdminRole();
+    return this.keycloakService.getUserRoles(true).includes('ADMIN');
   }
   async mail() {
     this.mailinfo.email = this.listingUser.email;

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

@@ -138,7 +138,7 @@
           </ul>
         </div>
       </div>
-      @if( user?.email===(user$| async)?.email || isAdmin()){
+      @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

@@ -9,10 +9,12 @@ import { KeycloakUser, ListingCriteria } from '../../../../../../bizmatch-server
 import { environment } from '../../../../environments/environment';
 import { HistoryService } from '../../../services/history.service';
 import { ImageService } from '../../../services/image.service';
+import { KeycloakService } from '../../../services/keycloak.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 { map2User } from '../../../utils/utils';
 
 @Component({
   selector: 'app-details-user',
@@ -26,6 +28,7 @@ export class DetailsUserComponent {
   private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
   user: User;
   user$: Observable<KeycloakUser>;
+  keycloakUser: KeycloakUser;
   environment = environment;
   criteria: ListingCriteria;
   businessListings: BusinessListing[];
@@ -44,6 +47,7 @@ export class DetailsUserComponent {
     private sanitizer: DomSanitizer,
     private imageService: ImageService,
     public historyService: HistoryService,
+    public keycloakService: KeycloakService,
   ) {}
 
   async ngOnInit() {
@@ -53,12 +57,14 @@ export class DetailsUserComponent {
     // 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);
   }
 
   isAdmin() {
-    return this.userService.hasAdminRole();
+    return this.keycloakService.getUserRoles(true).includes('ADMIN');
   }
 }

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

@@ -5,7 +5,7 @@
       <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>
@@ -94,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

@@ -8,11 +8,10 @@ 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 { KeycloakUser, ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakService } from '../../services/keycloak.service';
 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',
@@ -27,14 +26,12 @@ export class HomeComponent {
   maxPrice: string;
   minPrice: string;
   criteria: ListingCriteria;
-  user$: Observable<KeycloakUser>;
   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 }));
@@ -57,9 +54,11 @@ export class HomeComponent {
   }
 
   login() {
-    this.userService.login(window.location.href);
+    this.keycloakService.login({
+      redirectUri: window.location.href,
+    });
   }
   register() {
-    this.userService.register(`${window.location.origin}/account`);
+    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
   }
 }

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 { ButtonModule } from 'primeng/button';
+import { DividerModule } from 'primeng/divider';
+import { RippleModule } from 'primeng/ripple';
+import { StyleClassModule } from 'primeng/styleclass';
+import { KeycloakService } from '../../services/keycloak.service';
 
 @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/pricing/pricing.component.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
+import { KeycloakService } from '../../services/keycloak.service';
 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/subscription/account/account.component.ts

@@ -17,11 +17,13 @@ import { environment } from '../../../../environments/environment';
 import { ImageCropperComponent, stateOptions } from '../../../components/image-cropper/image-cropper.component';
 import { GeoService } from '../../../services/geo.service';
 import { ImageService } from '../../../services/image.service';
+import { KeycloakService } from '../../../services/keycloak.service';
 import { LoadingService } from '../../../services/loading.service';
 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 { map2User } from '../../../utils/utils';
 import { TOOLBAR_OPTIONS } from '../../utils/defaults';
 @Component({
   selector: 'app-account',
@@ -60,12 +62,14 @@ export class AccountComponent {
     public dialogService: DialogService,
     private confirmationService: ConfirmationService,
     private imageService: ImageService,
+    private keycloakService: KeycloakService,
   ) {}
   async ngOnInit() {
     if (this.id) {
       this.user = await this.userService.getById(this.id);
     } else {
-      const keycloakUser = this.userService.getKeycloakUser();
+      const token = await this.keycloakService.getToken();
+      const keycloakUser = map2User(token);
       const email = keycloakUser.email;
       try {
         this.user = await this.userService.getByMail(email);

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

@@ -3,7 +3,7 @@ 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 { createDefaultBusinessListing, 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';
@@ -23,6 +23,7 @@ import { InputNumberModule } from '../../../components/inputnumber/inputnumber.c
 import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
 import { GeoService } from '../../../services/geo.service';
 import { ImageService } from '../../../services/image.service';
+import { KeycloakService } from '../../../services/keycloak.service';
 import { LoadingService } from '../../../services/loading.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
@@ -99,6 +100,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,11 +117,13 @@ 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 = createDefaultBusinessListing();
-      this.listing.userId = await this.userService.getId();
+      this.listing.userId = await this.userService.getId(keycloakUser.email);
       if (this.data) {
         this.listing.title = this.data?.title;
         this.listing.description = this.data?.description;

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

@@ -3,7 +3,7 @@ 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 { createDefaultCommercialPropertyListing, routeListingWithState } from '../../../utils/utils';
+import { createDefaultCommercialPropertyListing, map2User, routeListingWithState } from '../../../utils/utils';
 
 import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { HttpEventType } from '@angular/common/http';
@@ -26,6 +26,7 @@ import { InputNumberModule } from '../../../components/inputnumber/inputnumber.c
 import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
 import { GeoService } from '../../../services/geo.service';
 import { ImageService } from '../../../services/image.service';
+import { KeycloakService } from '../../../services/keycloak.service';
 import { LoadingService } from '../../../services/loading.service';
 import { UserService } from '../../../services/user.service';
 import { SharedModule } from '../../../shared/shared/shared.module';
@@ -106,6 +107,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 => {
@@ -123,11 +125,13 @@ 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 = createDefaultCommercialPropertyListing();
-      this.listing.userId = await this.userService.getId();
+      this.listing.userId = await this.userService.getId(keycloakUser.email);
       this.listing.imagePath = uuidv4();
       if (this.data) {
         this.listing.title = this.data?.title;

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

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { KeycloakUser, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakService } from '../../../services/keycloak.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 { map2User } from '../../../utils/utils';
 import { MenuAccountComponent } from '../../menu-account/menu-account.component';
 
 @Component({
@@ -17,11 +18,10 @@ export class FavoritesComponent {
   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.ts

@@ -2,10 +2,12 @@ import { ChangeDetectorRef, Component } from '@angular/core';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
+import { KeycloakService } from '../../../services/keycloak.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 { map2User } from '../../../utils/utils';
 import { MenuAccountComponent } from '../../menu-account/menu-account.component';
 @Component({
   selector: 'app-my-listing',
@@ -21,6 +23,7 @@ export class MyListingComponent {
   user: User;
   constructor(
     public userService: UserService,
+    public keycloakService: KeycloakService,
     private listingsService: ListingsService,
     private cdRef: ChangeDetectorRef,
     public selectOptions: SelectOptionsService,
@@ -28,7 +31,9 @@ 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')]);