new initialization process, keycloak update 24.0.4

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

@@ -17,9 +17,9 @@
       </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()" [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>

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { SidebarModule } from 'primeng/sidebar';
-import { UserService } from '../../services/user.service';
+import { KeycloakService } from '../../services/keycloak.service';
 import { SharedModule } from '../../shared/shared/shared.module';
 @Component({
   selector: 'footer',
@@ -12,8 +12,10 @@ import { SharedModule } from '../../shared/shared/shared.module';
 export class FooterComponent {
   privacyVisible = false;
   termsVisible = false;
-  constructor(public userService: UserService) {}
+  constructor(public keycloakService: KeycloakService) {}
   login() {
-    this.userService.login(window.location.href);
+    this.keycloakService.login({
+      redirectUri: window.location.href,
+    });
   }
 }

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

@@ -4,7 +4,9 @@
     <p-tabMenu [model]="tabItems" ariaLabelledBy="label" styleClass="flex" [activeItem]="activeItem"> </p-tabMenu>
     <p-menubar [model]="menuItems"></p-menubar>
     <p-menubar [model]="loginItems"></p-menubar>
-    <div *ngIf="user$ | async as user; else empty">Welcome, {{ user.firstName }}</div>
+    @if(user){
+    <div>Welcome, {{ user.firstName }}</div>
+    }
     <ng-template #empty> </ng-template>
   </div>
 </div>

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

@@ -10,7 +10,8 @@ import { TabMenuModule } from 'primeng/tabmenu';
 import { Observable } from 'rxjs';
 import { KeycloakUser } from '../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../environments/environment';
-import { UserService } from '../../services/user.service';
+import { KeycloakService } from '../../services/keycloak.service';
+import { map2User } from '../../utils/utils';
 @Component({
   selector: 'header',
   standalone: true,
@@ -27,63 +28,65 @@ export class HeaderComponent {
   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',
@@ -102,12 +105,12 @@ export class HeaderComponent {
       {
         label: 'Login',
         command: () => this.login(),
-        visible: !this.isUserLogedIn(),
+        visible: !this.keycloakService.isLoggedIn(),
       },
       {
         label: 'Register',
         command: () => this.register(),
-        visible: !this.isUserLogedIn(),
+        visible: !this.keycloakService.isLoggedIn(),
       },
     ];
     this.activeItem = this.tabItems[0];
@@ -116,13 +119,12 @@ export class HeaderComponent {
   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.userService.register(`${window.location.origin}/account`);
+    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
   }
 }

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 '../../services/keycloak.service';
 
 @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');
   }
 }