OZG-4321 use simple button for logout due to styling/scss problems

alfa-client/apps/admin/src/app/app.component.html

@@ -2,17 +2,14 @@
   <header class="flex items-center justify-between bg-white p-6" data-test-id="admin-header">
     <div class="text-ozgblue font-extrabold">OZG-Cloud Administration</div>
     <div>
-      <alfa-user-profile-in-header
-        [currentUserResource]="currentUserStateResource"
-        (logoutEmitter)="authService.logout()"
-        data-test-id="user-profile-in-header"
-      ></alfa-user-profile-in-header>
+      <p data-test-id="user-profile-initials">{{ currentUserInitials }}</p>
+      <button data-test-id="logout" (click)="authService.logout()">Logout</button>
     </div>
   </header>
   <div class="relative flex w-full flex-auto justify-center">
-    <div class="w-96 bg-slate-300 p-6"><nav>NAV</nav></div>
+    <div class="w-96 bg-slate-300 p-6"><nav></nav></div>
     <main class="flex-auto bg-slate-200 p-6">
-      <h2>MAIN</h2>
+      <h2></h2>
     </main>
   </div>
   <router-outlet></router-outlet>

alfa-client/apps/admin/src/app/app.component.spec.ts

@@ -21,9 +21,10 @@ describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
 
-  const userProfileInHeader: string = getDataTestIdOf('user-profile-in-header');
   const adminHeader: string = getDataTestIdOf('admin-header');
   const buildVersion: string = getDataTestIdOf('build-version');
+  const userProfileInitials: string = getDataTestIdOf('user-profile-initials');
+  const logout: string = getDataTestIdOf('logout');
 
   const authService: Mock<AuthService> = mock(AuthService);
   const apiRootService: Mock<ApiRootService> = mock(ApiRootService);
@@ -80,10 +81,10 @@ describe('AppComponent', () => {
     });
 
     describe('do after logged in', () => {
-      it('should call authService to getCurrentUser', () => {
+      it('should call authService to getCurrentUserInitials', () => {
         component.doAfterLoggedIn();
 
-        expect(authService.getCurrentUser).toHaveBeenCalled();
+        expect(authService.getCurrentUserInitials).toHaveBeenCalled();
       });
 
       it('should call apiRootService to getApiRoot', () => {
@@ -100,7 +101,7 @@ describe('AppComponent', () => {
     notExistsAsHtmlElement(fixture, adminHeader);
   });
 
-  describe('user profile header', () => {
+  describe('user profile initials', () => {
     beforeEach(() => {
       component.apiRoot$ = of(createStateResource(createApiRootResource()));
     });
@@ -108,12 +109,24 @@ describe('AppComponent', () => {
     it('should show if apiRoot exists', () => {
       fixture.detectChanges();
 
-      existsAsHtmlElement(fixture, userProfileInHeader);
+      existsAsHtmlElement(fixture, userProfileInitials);
+    });
+  });
+
+  describe('logout button', () => {
+    beforeEach(() => {
+      component.apiRoot$ = of(createStateResource(createApiRootResource()));
+    });
+
+    it('should show if apiRoot exists', () => {
+      fixture.detectChanges();
+
+      existsAsHtmlElement(fixture, logout);
     });
 
     it('should call authService logout on logoutEmitter event', () => {
       fixture.detectChanges();
-      dispatchEventFromFixture(fixture, userProfileInHeader, 'logoutEmitter');
+      dispatchEventFromFixture(fixture, logout, 'click');
 
       expect(authService.logout).toHaveBeenCalled();
     });

alfa-client/apps/admin/src/app/app.component.ts

@@ -15,6 +15,7 @@ export class AppComponent implements OnInit {
 
   public apiRoot$: Observable<any>;
   public currentUserStateResource: StateResource<UserProfileResource>;
+  public currentUserInitials: string;
 
   constructor(
     public authService: AuthService,
@@ -26,7 +27,7 @@ export class AppComponent implements OnInit {
   }
 
   doAfterLoggedIn(): void {
-    this.currentUserStateResource = this.authService.getCurrentUser();
+    this.currentUserInitials = this.authService.getCurrentUserInitials();
     this.apiRoot$ = this.apiRootService.getApiRoot();
   }
 }

alfa-client/apps/admin/src/app/app.config.ts

@@ -2,14 +2,12 @@ import { Environment } from '@alfa-client/environment-shared';
 import { KeycloakService } from 'keycloak-angular';
 
 export function initializeKeycloak(keycloak: KeycloakService, envConfig: Environment) {
-	console.info('env: ', envConfig);
   return () =>
     keycloak.init({
       config: {
         url: envConfig.authServer,
         realm: envConfig.realm,
         clientId: envConfig.clientId,
-
       },
       initOptions: {
         adapter: 'default',
@@ -22,5 +20,5 @@ export function initializeKeycloak(keycloak: KeycloakService, envConfig: Environ
       },
       updateMinValidity: 1,
       bearerExcludedUrls: ['/assets', '/clients/public'],
-	  })
+    });
 }

alfa-client/apps/admin/src/service/auth.service.spec.ts

@@ -20,16 +20,6 @@ describe('AuthService', () => {
     service = new AuthService(useFromMock(keycloakService));
   });
 
-  describe('ngOninit', () => {
-    it('should call listenToKeycloakEvents', () => {
-      service.listenToKeycloakEvent = jest.fn();
-
-      service.ngOnInit();
-
-      expect(service.listenToKeycloakEvent).toHaveBeenCalled();
-    });
-  });
-
   describe('listenToKeycloakEvent', () => {
     it('should call handleEvent', () => {
       service.handleEvent = jest.fn();
@@ -159,15 +149,17 @@ describe('AuthService', () => {
     });
   });
 
-  describe('getCurrentUser', () => {
+  describe('getCurrentUserInitials', () => {
     it('should return currentUserStateResource', () => {
-      const userStateResource: StateResource<UserProfileResource> = createStateResource(
-        createUserProfileResource(),
-      );
+      const userProfile: UserProfileResource = createUserProfileResource();
+      const userStateResource: StateResource<UserProfileResource> =
+        createStateResource(userProfile);
       service.currentUserStateResource.set(userStateResource);
-      const currentUserStateResource: StateResource<UserProfileResource> = service.getCurrentUser();
+      const currentUserInitials: string = service.getCurrentUserInitials();
 
-      expect(currentUserStateResource).toEqual(userStateResource);
+      const initials: string =
+        userProfile.firstName.substring(0, 1) + '' + userProfile.lastName.substring(0, 1);
+      expect(currentUserInitials).toEqual(initials);
     });
   });
 });

alfa-client/apps/admin/src/service/auth.service.ts

@@ -3,7 +3,7 @@ import {
   createEmptyStateResource,
   createStateResource,
 } from '@alfa-client/tech-shared';
-import { Injectable, OnInit, WritableSignal, signal } from '@angular/core';
+import { Injectable, WritableSignal, signal } from '@angular/core';
 import { KeycloakEvent, KeycloakService } from 'keycloak-angular';
 import { KeycloakProfile } from 'keycloak-js';
 import { UserProfileResource } from 'libs/user-profile-shared/src/lib/user-profile.model';
@@ -11,16 +11,14 @@ import { TOKEN_EXPIRED_TYPE } from './auth.const';
 import { getUserNameInitials } from 'libs/user-profile-shared/src/lib/user-profile.util';
 
 @Injectable({ providedIn: 'root' })
-export class AuthService implements OnInit {
+export class AuthService {
   currentUserStateResource: WritableSignal<StateResource<UserProfileResource>> = signal<
     StateResource<UserProfileResource>
   >(createEmptyStateResource());
 
   public isLoggedIn = false;
 
-  constructor(private keycloak: KeycloakService) {}
-
-  public ngOnInit(): void {
+  constructor(private keycloak: KeycloakService) {
     this.listenToKeycloakEvent();
   }
 
@@ -74,10 +72,6 @@ export class AuthService implements OnInit {
     this.keycloak.logout();
   }
 
-  public getCurrentUser(): StateResource<UserProfileResource> {
-    return this.currentUserStateResource();
-  }
-
   public getCurrentUserInitials(): string {
     return getUserNameInitials(this.currentUserStateResource().resource);
   }