Login with Keycloak UI

package.json

@@ -50,6 +50,7 @@
     "flag-icons": "^6.10.0",
     "hammerjs": "^2.0.8",
     "json-query": "^2.2.2",
+    "keycloak-angular": "^14.1.0",
     "keycloak-js": "^22.0.1",
     "leaflet": "^1.9.4",
     "lodash-es": "^4.17.21",

src/app/app-initializers.ts

@@ -7,11 +7,12 @@ import { ConfigService } from "./core/config/config.service";
 import { RouterService } from "./core/config/dynamic-routing/router.service";
 import { EntityConfigService } from "./core/entity/entity-config.service";
 import { Router } from "@angular/router";
-import { SessionService } from "./core/session/session-service/session.service";
 import { AnalyticsService } from "./core/analytics/analytics.service";
 import { LoginState } from "./core/session/session-states/login-state.enum";
 import { LoggingService } from "./core/logging/logging.service";
 import { environment } from "../environments/environment";
+import { LoginStateSubject } from "./core/session/session-type";
+import { CurrentUserSubject } from "./core/user/user";
 
 export const appInitializers = {
   provide: APP_INITIALIZER,
@@ -22,8 +23,9 @@ export const appInitializers = {
       routerService: RouterService,
       entityConfigService: EntityConfigService,
       router: Router,
-      sessionService: SessionService,
+      currentUser: CurrentUserSubject,
       analyticsService: AnalyticsService,
+      loginState: LoginStateSubject,
     ) =>
     async () => {
       // Re-trigger services that depend on the config when something changes
@@ -35,9 +37,9 @@ export const appInitializers = {
       });
 
       // update the user context for remote error logging and tracking and load config initially
-      sessionService.loginState.subscribe((newState) => {
+      loginState.subscribe((newState) => {
         if (newState === LoginState.LOGGED_IN) {
-          const username = sessionService.getCurrentUser().name;
+          const username = currentUser.value.name;
           LoggingService.setLoggingContextUser(username);
           analyticsService.setUser(username);
         } else {
@@ -62,8 +64,9 @@ export const appInitializers = {
     RouterService,
     EntityConfigService,
     Router,
-    SessionService,
+    CurrentUserSubject,
     AnalyticsService,
+    LoginStateSubject,
   ],
   multi: true,
 };

src/app/app.module.ts

@@ -63,7 +63,11 @@ import {
   entityRegistry,
   EntityRegistry,
 } from "./core/entity/database-entity.decorator";
-import { LOCATION_TOKEN, WINDOW_TOKEN } from "./utils/di-tokens";
+import {
+  LOCATION_TOKEN,
+  NAVIGATOR_TOKEN,
+  WINDOW_TOKEN,
+} from "./utils/di-tokens";
 import { AttendanceModule } from "./child-dev-project/attendance/attendance.module";
 import { NotesModule } from "./child-dev-project/notes/notes.module";
 import { SchoolsModule } from "./child-dev-project/schools/schools.module";
@@ -76,7 +80,6 @@ import { RouterModule } from "@angular/router";
 import { TodosModule } from "./features/todos/todos.module";
 import moment from "moment";
 import { getLocaleFirstDayOfWeek } from "@angular/common";
-import { SessionService } from "./core/session/session-service/session.service";
 import { waitForChangeTo } from "./core/session/session-states/session-utils";
 import { LoginState } from "./core/session/session-states/login-state.enum";
 import { appInitializers } from "./app-initializers";
@@ -87,6 +90,7 @@ import { BirthdayDashboardWidgetModule } from "./features/dashboard-widgets/birt
 import { ConfigSetupModule } from "./features/config-setup/config-setup.module";
 import { MarkdownPageModule } from "./features/markdown-page/markdown-page.module";
 import { AdminModule } from "./features/admin/admin.module";
+import { LoginStateSubject } from "./core/session/session-type";
 
 /**
  * Main entry point of the application.
@@ -147,6 +151,7 @@ import { AdminModule } from "./features/admin/admin.module";
     { provide: EntityRegistry, useValue: entityRegistry },
     { provide: WINDOW_TOKEN, useValue: window },
     { provide: LOCATION_TOKEN, useValue: window.location },
+    { provide: NAVIGATOR_TOKEN, useValue: navigator },
     {
       provide: LOCALE_ID,
       useValue:
@@ -161,12 +166,12 @@ import { AdminModule } from "./features/admin/admin.module";
     },
     {
       provide: SwRegistrationOptions,
-      useFactory: (session: SessionService) => ({
+      useFactory: (loginState: LoginStateSubject) => ({
         enabled: environment.production,
         registrationStrategy: () =>
-          session.loginState.pipe(waitForChangeTo(LoginState.LOGGED_IN)),
+          loginState.pipe(waitForChangeTo(LoginState.LOGGED_IN)),
       }),
-      deps: [SessionService],
+      deps: [LoginStateSubject],
     },
     appInitializers,
   ],

src/app/child-dev-project/attendance/add-day-attendance/roll-call-setup/roll-call-setup.component.ts

@@ -9,7 +9,6 @@ import { AttendanceService } from "../../attendance.service";
 import { Note } from "../../../notes/model/note";
 import { EntityMapperService } from "../../../../core/entity/entity-mapper/entity-mapper.service";
 import { RecurringActivity } from "../../model/recurring-activity";
-import { SessionService } from "../../../../core/session/session-service/session.service";
 import { NoteDetailsComponent } from "../../../notes/note-details/note-details.component";
 import { FormDialogService } from "../../../../core/form-dialog/form-dialog.service";
 import { AlertService } from "../../../../core/alerts/alert.service";
@@ -27,6 +26,7 @@ import { NgForOf, NgIf } from "@angular/common";
 import { MatProgressBarModule } from "@angular/material/progress-bar";
 import { ActivityCardComponent } from "../../activity-card/activity-card.component";
 import { MatButtonModule } from "@angular/material/button";
+import { CurrentUserSubject } from "../../../../core/user/user";
 
 @Component({
   selector: "app-roll-call-setup",
@@ -76,7 +76,7 @@ export class RollCallSetupComponent implements OnInit {
   constructor(
     private entityMapper: EntityMapperService,
     private attendanceService: AttendanceService,
-    private sessionService: SessionService,
+    private currentUser: CurrentUserSubject,
     private formDialog: FormDialogService,
     private alertService: AlertService,
     private filerService: FilterService,
@@ -105,7 +105,7 @@ export class RollCallSetupComponent implements OnInit {
       this.visibleActivities = this.allActivities;
     } else {
       this.visibleActivities = this.allActivities.filter((a) =>
-        a.isAssignedTo(this.sessionService.getCurrentUser().name),
+        a.isAssignedTo(this.currentUser.value.name),
       );
       if (this.visibleActivities.length === 0) {
         this.visibleActivities = this.allActivities.filter(
@@ -155,7 +155,7 @@ export class RollCallSetupComponent implements OnInit {
       activity,
       this.date,
     )) as NoteForActivitySetup;
-    event.authors = [this.sessionService.getCurrentUser().name];
+    event.authors = [this.currentUser.value.name];
     event.isNewFromActivity = true;
     return event;
   }
@@ -175,7 +175,7 @@ export class RollCallSetupComponent implements OnInit {
         score += 1;
       }
 
-      if (assignedUsers.includes(this.sessionService.getCurrentUser().name)) {
+      if (assignedUsers.includes(this.currentUser.value.name)) {
         score += 2;
       }
 
@@ -189,7 +189,7 @@ export class RollCallSetupComponent implements OnInit {
 
   createOneTimeEvent() {
     const newNote = Note.create(new Date());
-    newNote.authors = [this.sessionService.getCurrentUser().name];
+    newNote.authors = [this.currentUser.value.name];
 
     this.formDialog
       .openFormPopup(newNote, [], NoteDetailsComponent)

src/app/child-dev-project/notes/notes-manager/notes-manager.component.ts

@@ -4,7 +4,6 @@ import { NoteDetailsComponent } from "../note-details/note-details.component";
 import { ActivatedRoute } from "@angular/router";
 import { EntityMapperService } from "../../../core/entity/entity-mapper/entity-mapper.service";
 import { FilterSelectionOption } from "../../../core/filter/filters/filters";
-import { SessionService } from "../../../core/session/session-service/session.service";
 import { FormDialogService } from "../../../core/form-dialog/form-dialog.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { LoggingService } from "../../../core/logging/logging.service";
@@ -92,7 +91,6 @@ export class NotesManagerComponent implements OnInit {
 
   constructor(
     private formDialog: FormDialogService,
-    private sessionService: SessionService,
     private entityMapperService: EntityMapperService,
     private route: ActivatedRoute,
     private log: LoggingService,

src/app/core/common-components/entity-form/entity-form.service.ts

@@ -12,12 +12,12 @@ import { UnsavedChangesService } from "../../entity-details/form/unsaved-changes
 import { ActivationStart, Router } from "@angular/router";
 import { Subscription } from "rxjs";
 import { filter } from "rxjs/operators";
-import { SessionService } from "../../session/session-service/session.service";
 import {
   EntitySchemaField,
   PLACEHOLDERS,
 } from "../../entity/schema/entity-schema-field";
 import { isArrayDataType } from "../../basic-datatypes/datatype-utils";
+import { CurrentUserSubject } from "../../user/user";
 
 /**
  * These are utility types that allow to define the type of `FormGroup` the way it is returned by `EntityFormService.create`
@@ -40,7 +40,7 @@ export class EntityFormService {
     private dynamicValidator: DynamicValidatorsService,
     private ability: EntityAbility,
     private unsavedChanges: UnsavedChangesService,
-    private session: SessionService,
+    private currentUser: CurrentUserSubject,
     router: Router,
   ) {
     router.events
@@ -154,7 +154,7 @@ export class EntityFormService {
         newVal = new Date();
         break;
       case PLACEHOLDERS.CURRENT_USER:
-        newVal = this.session.getCurrentUser().name;
+        newVal = this.currentUser.value.name;
         break;
       default:
         newVal = schema.defaultValue;

src/app/core/common-components/entity-subrecord/list-paginator/list-paginator.component.ts

@@ -1,19 +1,18 @@
 import {
   Component,
-  ViewChild,
   Input,
   OnChanges,
-  SimpleChanges,
   OnInit,
+  SimpleChanges,
+  ViewChild,
 } from "@angular/core";
 import {
   MatPaginator,
   MatPaginatorModule,
   PageEvent,
 } from "@angular/material/paginator";
 import { MatTableDataSource } from "@angular/material/table";
-import { User } from "../../../user/user";
-import { SessionService } from "../../../session/session-service/session.service";
+import { CurrentUserSubject, User } from "../../../user/user";
 import { EntityMapperService } from "../../../entity/entity-mapper/entity-mapper.service";
 
 @Component({
@@ -35,7 +34,7 @@ export class ListPaginatorComponent<E> implements OnChanges, OnInit {
   pageSize = 10;
 
   constructor(
-    private sessionService: SessionService,
+    private currentUser: CurrentUserSubject,
     private entityMapperService: EntityMapperService,
   ) {}
 
@@ -83,7 +82,7 @@ export class ListPaginatorComponent<E> implements OnChanges, OnInit {
 
   private async ensureUserIsLoaded(): Promise<boolean> {
     if (!this.user) {
-      const currentUser = this.sessionService.getCurrentUser();
+      const currentUser = this.currentUser.value;
       this.user = await this.entityMapperService
         .load(User, currentUser.name)
         .catch(() => undefined);

src/app/core/core.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from "@angular/core";
 import { ComponentRegistry } from "../dynamic-components";
 import { coreComponents } from "./core-components";
-import { User } from "./user/user";
+import { CurrentUserSubject, User } from "./user/user";
 import { Config } from "./config/config";
 import { StringDatatype } from "./basic-datatypes/string/string.datatype";
 import { DefaultDatatype } from "./entity/default-datatype/default.datatype";
@@ -25,6 +25,7 @@ import { CommonModule } from "@angular/common";
  */
 @NgModule({
   providers: [
+    CurrentUserSubject,
     // base dataTypes
     { provide: DefaultDatatype, useClass: StringDatatype, multi: true },
     { provide: DefaultDatatype, useClass: BooleanDatatype, multi: true },

src/app/core/database/sync.service.spec.ts

@@ -0,0 +1,116 @@
+import { fakeAsync, TestBed, tick } from "@angular/core/testing";
+
+import { SyncService } from "./sync.service";
+import { PouchDatabase } from "./pouch-database";
+import { Database } from "./database";
+import { LoginStateSubject, SyncStateSubject } from "../session/session-type";
+import { LoginState } from "../session/session-states/login-state.enum";
+import { KeycloakAuthService } from "../session/auth/keycloak/keycloak-auth.service";
+import { HttpStatusCode } from "@angular/common/http";
+import PouchDB from "pouchdb-browser";
+
+describe("SyncService", () => {
+  let service: SyncService;
+  let loginState: LoginStateSubject;
+  let mockAuthService: jasmine.SpyObj<KeycloakAuthService>;
+
+  beforeEach(() => {
+    mockAuthService = jasmine.createSpyObj(["login", "addAuthHeader"]);
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: KeycloakAuthService, useValue: mockAuthService },
+        { provide: Database, useClass: PouchDatabase },
+        LoginStateSubject,
+        SyncStateSubject,
+      ],
+    });
+    service = TestBed.inject(SyncService);
+    loginState = TestBed.inject(LoginStateSubject);
+  });
+
+  it("should be created", () => {
+    expect(service).toBeTruthy();
+  });
+
+  it("should restart the sync if it fails at one point", fakeAsync(() => {
+    let errorCallback, pauseCallback;
+    const syncHandle = {
+      on: (action, callback) => {
+        if (action === "error") {
+          errorCallback = callback;
+        }
+        if (action === "paused") {
+          pauseCallback = callback;
+        }
+        return syncHandle;
+      },
+      cancel: () => undefined,
+    };
+    const syncSpy = jasmine
+      .createSpy()
+      .and.returnValues(Promise.resolve("first"), syncHandle, syncHandle);
+    spyOn(
+      TestBed.inject(Database) as PouchDatabase,
+      "getPouchDB",
+    ).and.returnValue({ sync: syncSpy } as any);
+
+    service.startSync();
+    tick(1000);
+
+    // error + logged in -> sync should restart
+    loginState.next(LoginState.LOGGED_IN);
+    syncSpy.calls.reset();
+    errorCallback();
+    expect(syncSpy).toHaveBeenCalled();
+
+    // pause -> no restart required
+    syncSpy.calls.reset();
+    pauseCallback();
+    expect(syncSpy).not.toHaveBeenCalled();
+
+    // logout + error -> no restart
+    syncSpy.calls.reset();
+    loginState.next(LoginState.LOGGED_OUT);
+    tick();
+    errorCallback();
+    expect(syncSpy).not.toHaveBeenCalled();
+  }));
+
+  it("should try auto-login if fetch fails and fetch again", async () => {
+    // Make sync call pass
+    spyOn(
+      TestBed.inject(Database) as PouchDatabase,
+      "getPouchDB",
+    ).and.returnValues({ sync: () => Promise.resolve() } as any);
+    spyOn(PouchDB, "fetch").and.returnValues(
+      Promise.resolve({
+        status: HttpStatusCode.Unauthorized,
+        ok: false,
+      } as Response),
+      Promise.resolve({ status: HttpStatusCode.Ok, ok: true } as Response),
+    );
+    // providing "valid" token on second call
+    let calls = 0;
+    mockAuthService.addAuthHeader.and.callFake((headers) => {
+      headers.Authorization = calls++ === 1 ? "valid" : "invalid";
+    });
+    mockAuthService.login.and.resolveTo();
+    const initSpy = spyOn(service["remoteDatabase"], "initRemoteDB");
+    await service.startSync();
+    // taking fetch function from init call
+    const fetch = initSpy.calls.mostRecent().args[1];
+
+    const url = "/db/_changes";
+    const opts = { headers: {} };
+    await expectAsync(fetch(url, opts)).toBeResolved();
+
+    expect(PouchDB.fetch).toHaveBeenCalledTimes(2);
+    expect(PouchDB.fetch).toHaveBeenCalledWith(url, opts);
+    expect(opts.headers).toEqual({ Authorization: "valid" });
+    expect(mockAuthService.login).toHaveBeenCalled();
+    expect(mockAuthService.addAuthHeader).toHaveBeenCalledTimes(2);
+
+    // prevent live sync call
+    service["cancelLiveSync"]();
+  });
+});