use old library and restore acme

frontend/package.json

@@ -3,11 +3,10 @@
   "version": "2.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --host 0.0.0.0",
+    "start": "ng serve ",
     "build": "ng build",
     "build:staging": "ng build --configuration staging",
     "watch": "ng build --watch --configuration development",
-    "watch:prod": "ng build --watch",
     "test": "jest --silent",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run --browser chrome --headed",
@@ -35,7 +34,7 @@
     "@angular/router": "^17.0.6",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "angular-auth-oidc-client": "^18.0.1",
+    "angular-oauth2-oidc": "^17.0.0",
     "bootstrap": "^5.3.2",
     "moment": "^2.30.1",
     "ngx-toastr": "^18.0.0",

frontend/src/app/app-routing.module.ts

@@ -1,27 +1,22 @@
-import { ResolveFn, RouterModule, Routes } from '@angular/router';
-import { AutoLoginPartialRoutesGuard, OidcSecurityService } from 'angular-auth-oidc-client';
-import { CallbackComponent } from './callback/callback.component';
 import { inject, NgModule } from '@angular/core';
+import { ResolveFn, RouterModule, Routes } from '@angular/router';
+import { OverviewComponent } from './components/overview/overview.component';
+import { of } from 'rxjs';
+import { SidepanelComponent } from './shared/sidepanel/sidepanel.component';
 import { authGuard } from './guards/auth.guard';
 import { UserService } from './services/user.service';
 import { User } from './shared/types/model/User';
+import { OAuthService } from 'angular-oauth2-oidc';
 import { ObjectiveDetailComponent } from './components/objective-detail/objective-detail.component';
 import { KeyresultDetailComponent } from './components/keyresult-detail/keyresult-detail.component';
-import { of, switchMap } from 'rxjs';
-import { OverviewComponent } from './components/overview/overview.component';
-import { SidepanelComponent } from './shared/sidepanel/sidepanel.component';
 
 const currentUserResolver: ResolveFn<User | undefined> = () => {
-  const oauthService = inject(OidcSecurityService);
+  const oauthService = inject(OAuthService);
   const userService = inject(UserService);
-  return oauthService.getUserData().pipe(
-    switchMap((token) => {
-      if (token) {
-        return userService.getOrInitCurrentUser();
-      }
-      return of(undefined);
-    }),
-  );
+  if (oauthService.hasValidIdToken()) {
+    return userService.getOrInitCurrentUser();
+  }
+  return of(undefined);
 };
 
 const routes: Routes = [
@@ -47,9 +42,8 @@ const routes: Routes = [
         ],
       },
     ],
-    canActivate: [AutoLoginPartialRoutesGuard],
+    canActivate: [authGuard],
   },
-  { path: 'callback', component: CallbackComponent },
   {
     path: 'team-management',
     loadChildren: () => import('./team-management/team-management.module').then((m) => m.TeamManagementModule),

frontend/src/app/app.component.spec.ts

@@ -1,20 +1,40 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { TranslateTestingModule } from 'ngx-translate-testing';
+import { AuthConfig, OAuthModule, OAuthService } from 'angular-oauth2-oidc';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 // @ts-ignore
 import * as de from '../assets/i18n/de.json';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule, Routes } from '@angular/router';
+import { NavigationEnd, Routes } from '@angular/router';
 import { of } from 'rxjs';
 import { OverviewComponent } from './components/overview/overview.component';
 import { ObjectiveDetailComponent } from './components/objective-detail/objective-detail.component';
 import { CommonModule } from '@angular/common';
-import { StsConfigLoader } from 'angular-auth-oidc-client';
+
+const oauthServiceMock = {
+  configure(environment: AuthConfig): void {},
+  initCodeFlow(): void {},
+  setupAutomaticSilentRefresh(): void {},
+  hasValidAccessToken(): boolean {
+    return true;
+  },
+  loadDiscoveryDocumentAndTryLogin(): Promise<any> {
+    this.initCodeFlow();
+    return Promise.resolve();
+  },
+};
+
+const routerMock = {
+  root: jest.fn(),
+  // Router
+  events: of(new NavigationEnd(0, 'http://localhost:4200/objective/2', 'http://localhost:4200/objective/2')),
+};
 
 const routes: Routes = [
   {
@@ -32,24 +52,17 @@ describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [
-        RouterModule.forRoot(routes),
+        RouterTestingModule.withRoutes(routes),
         HttpClientTestingModule,
         TranslateTestingModule.withTranslations({
           de: de,
         }),
+        OAuthModule.forRoot(),
         MatSidenavModule,
         NoopAnimationsModule,
         CommonModule,
       ],
-      providers: [
-        {
-          provide: StsConfigLoader,
-          useValue: {
-            loadConfig: () => of({}),
-            loadConfigs: () => of({}),
-          },
-        },
-      ],
+      providers: [{ provide: OAuthService, useValue: oauthServiceMock }],
       declarations: [AppComponent, OverviewComponent],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     })

frontend/src/app/app.component.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -9,11 +8,9 @@ import { DomSanitizer } from '@angular/platform-browser';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
   readonly PATH_PREFIX = '../assets/icons/';
-
   constructor(
-    private oidcSecurityService: OidcSecurityService,
     private matIconRegistry: MatIconRegistry,
     private domSanitizer: DomSanitizer,
   ) {
@@ -26,7 +23,4 @@ export class AppComponent implements OnInit {
       this.domSanitizer.bypassSecurityTrustResourceUrl(this.PATH_PREFIX + 'three-dot-menu-icon.svg'),
     );
   }
-  ngOnInit(): void {
-    this.oidcSecurityService.checkAuth().subscribe();
-  }
 }

frontend/src/app/app.module.ts

@@ -20,11 +20,12 @@ import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-transla
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import { OAuthModule, OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatRadioModule } from '@angular/material/radio';
 import { ConfigService } from './services/config.service';
-import { config, firstValueFrom, map } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { environment } from '../environments/environment';
 import { TeamComponent } from './components/team/team.component';
 import { OverviewComponent } from './components/overview/overview.component';
@@ -61,29 +62,26 @@ import { CheckInFormComponent } from './components/checkin/check-in-form/check-i
 import { ApplicationTopBarComponent } from './components/application-top-bar/application-top-bar.component';
 import { A11yModule } from '@angular/cdk/a11y';
 import { CustomizationService } from './services/customization.service';
-import {
-  AuthModule,
-  DefaultLocalStorageService,
-  AbstractSecurityStorage,
-  StsConfigLoader,
-  StsConfigHttpLoader,
-  AuthInterceptor,
-} from 'angular-auth-oidc-client';
-import { CallbackComponent } from './callback/callback.component';
 
-function initOauthFactory(configService: ConfigService) {
-  const config$ = configService.config$.pipe(
-    map((config) => {
-      return { ...environment.oauth, authority: config.issuer, clientId: config.clientId };
-    }),
-  );
-  return new StsConfigHttpLoader(config$);
+function initOauthFactory(configService: ConfigService, oauthService: OAuthService) {
+  return async () => {
+    const config = await firstValueFrom(configService.config$);
+    oauthService.configure({
+      ...environment.oauth,
+      issuer: config.issuer,
+      clientId: config.clientId,
+    });
+  };
 }
 
 export function createTranslateLoader(http: HttpBackend) {
   return new TranslateHttpLoader(new HttpClient(http), './assets/i18n/', '.json');
 }
 
+export function storageFactory(): OAuthStorage {
+  return localStorage;
+}
+
 export const MY_FORMATS = {
   parse: {
     dateInput: 'LL',
@@ -115,7 +113,6 @@ export const MY_FORMATS = {
     ActionPlanComponent,
     KeyResultFormComponent,
     KeyresultDialogComponent,
-    CallbackComponent,
     CheckInHistoryDialogComponent,
     CheckInFormMetricComponent,
     CheckInFormOrdinalComponent,
@@ -126,13 +123,6 @@ export const MY_FORMATS = {
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
-    AuthModule.forRoot({
-      loader: {
-        provide: StsConfigLoader,
-        useFactory: initOauthFactory,
-        deps: [ConfigService],
-      },
-    }),
     MatFormFieldModule,
     MatSelectModule,
     MatIconModule,
@@ -157,7 +147,7 @@ export const MY_FORMATS = {
         deps: [HttpBackend],
       },
     }),
-    A11yModule,
+    OAuthModule.forRoot(),
     MatRadioModule,
     NgOptimizedImage,
     MatSidenavModule,
@@ -182,9 +172,12 @@ export const MY_FORMATS = {
     { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
     { provide: HTTP_INTERCEPTORS, useClass: OauthInterceptor, multi: true },
     { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
+    { provide: OAuthStorage, useFactory: storageFactory },
     {
-      provide: AbstractSecurityStorage,
-      useClass: DefaultLocalStorageService,
+      provide: APP_INITIALIZER,
+      useFactory: initOauthFactory,
+      deps: [ConfigService, OAuthService, Injector],
+      multi: true,
     },
     {
       provide: Router,

frontend/src/app/components/application-top-bar/application-top-bar.component.html

@@ -3,7 +3,6 @@
     <span class="d-flex h-100 align-items-center ps-4">
       <img alt="okr-logo" height="32" ngSrc="{{ this.logoSrc$ | async }}" width="140" />
     </span>
-
     <div class="d-flex align-items-center me-md-5 me-1">
       <button
         *ngIf="teamManagementVisible$ | async"

frontend/src/app/components/application-top-bar/application-top-bar.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+
 import { ApplicationTopBarComponent } from './application-top-bar.component';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { DateTimeProvider, OAuthLogger, OAuthService, UrlHelperService } from 'angular-oauth2-oidc';
 import { HttpClient, HttpHandler } from '@angular/common/http';
 import { MatMenuModule } from '@angular/material/menu';
 import { HarnessLoader } from '@angular/cdk/testing';
@@ -13,12 +15,11 @@ import { of } from 'rxjs';
 import { testUser } from '../../shared/testData';
 import { UserService } from '../../services/user.service';
 import { ConfigService } from '../../services/config.service';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { NgOptimizedImage } from '@angular/common';
 
 const oAuthMock = {
-  getUserData: jest.fn(),
-  logOff: jest.fn(),
+  getIdentityClaims: jest.fn(),
+  logOut: jest.fn(),
+  hasValidIdToken: jest.fn(),
 };
 
 const dialogMock = {
@@ -45,12 +46,15 @@ describe('ApplicationTopBarComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [MatMenuModule, NoopAnimationsModule, MatDialogModule, NgOptimizedImage],
+      imports: [MatMenuModule, NoopAnimationsModule, MatDialogModule],
       declarations: [ApplicationTopBarComponent],
       providers: [
-        { provide: OidcSecurityService, useValue: oAuthMock },
+        { provide: OAuthService, useValue: oAuthMock },
         { provide: HttpClient },
         { provide: HttpHandler },
+        { provide: UrlHelperService },
+        { provide: OAuthLogger },
+        { provide: DateTimeProvider },
         {
           provide: MatDialog,
           useValue: dialogMock,
@@ -86,15 +90,13 @@ describe('ApplicationTopBarComponent', () => {
   });
 
   it('logout function should get called on button click', async () => {
-    oAuthMock.getUserData.mockReturnValue(of({ name: 'Username' }));
-
     routerMock.navigateByUrl.mockReturnValue(of().toPromise());
     const harness = await loader.getHarness(MatMenuHarness);
     await harness.open();
     fixture.detectChanges();
     harness.getItems().then((items) => {
       items[0].click();
-      expect(oAuthMock.logOff).toHaveBeenCalledTimes(1);
+      expect(oAuthMock.logOut).toBeCalledTimes(1);
     });
   });
 });