new initialization process, keycloak update 24.0.4

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` });
   }
 }