hotfix: loading states, error handling

Author: nicoalee

src/app/interceptors/error.interceptor.ts

@@ -19,6 +19,15 @@ export class ErrorInterceptor implements HttpInterceptor {
         return next.handle(req).pipe(
             catchError((err: HttpErrorResponse) => {
                 if (err.status === 401) {
+                    // Check if this is a password incorrect error that should be handled locally
+                    const errorMessage = err.error?.message || err.message || '';
+                    const isPasswordIncorrect = errorMessage.toLowerCase().includes('password is incorrect');
+
+                    if (isPasswordIncorrect) {
+                        // Let the login component handle the password incorrect error locally
+                        return throwError(err);
+                    }
+
                     // JWT has expired - log the user out and redirect to login
                     this.snackbarService.openInfoSnackbar('Your session has expired. Please login again to continue.');
 

src/app/pages/landing-page/login/login.component.ts

@@ -6,7 +6,7 @@ import { SnackbarService } from 'src/app/services/snackbar/snackbar.service';
 import { UntypedFormBuilder, Validators } from '@angular/forms';
 import { LoaderService } from 'src/app/services/loader/loader.service';
 import { Role, SupportedLangs } from 'src/app/models/enums';
-import { catchError, mergeMap } from 'rxjs/operators';
+import { catchError, finalize, mergeMap } from 'rxjs/operators';
 import { ClearanceService } from 'src/app/services/clearance.service';
 import { HttpStatusCode } from '@angular/common/http';
 import { HttpStatus } from 'src/app/models/Auth';
@@ -62,6 +62,9 @@ export class LoginComponent implements OnDestroy {
                 mergeMap(() => this.userStateService.getOrUpdateUserState()),
                 catchError((err) => {
                     throw err;
+                }),
+                finalize(() => {
+                    this.loaderService.hideLoader();
                 })
             )
             .subscribe(
@@ -99,10 +102,7 @@ export class LoginComponent implements OnDestroy {
                             break;
                     }
                 }
-            )
-            .add(() => {
-                this.loaderService.hideLoader();
-            });
+            );
     }
 
     constructor(
@@ -134,6 +134,7 @@ export class LoginComponent implements OnDestroy {
     }
 
     ngOnDestroy() {
+        this.loaderService.hideLoader();
         this.subscriptions.forEach((sub) => sub.unsubscribe());
     }
 }

src/app/pages/participant/participant-dashboard/participant-dashboard.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, of, Subscription, throwError } from 'rxjs';
-import { catchError, map, mergeMap, take, tap } from 'rxjs/operators';
+import { catchError, finalize, map, mergeMap, take, tap } from 'rxjs/operators';
 import { SupportedLangs } from 'src/app/models/enums';
 import { Study } from 'src/app/models/Study';
 import { StudyUser } from 'src/app/models/StudyUser';
@@ -61,14 +61,18 @@ export class ParticipantDashboardComponent implements OnInit, OnDestroy {
         sub = (studyId ? redirectSub : of(null))
             .pipe(
                 mergeMap(() => this.userStateService.getOrUpdateUserState(true)),
-                mergeMap((res) =>
-                    res?.lang === SupportedLangs.NONE
+                mergeMap((res) => {
+                    this.loaderService.hideLoader();
+                    return res?.lang === SupportedLangs.NONE
                         ? this.openLanguageDialog().pipe(
                               mergeMap((lang) => this.userService.updateUser({ ...res, lang }))
                           )
-                        : of(res)
-                ),
-                tap((user) => this.translateService.use(user?.lang)),
+                        : of(res);
+                }),
+                tap((user) => {
+                    this.translateService.use(user?.lang ? user.lang : SupportedLangs.EN);
+                    this.loaderService.showLoader();
+                }),
                 mergeMap((user) => {
                     // register the participant for the given study saved in session storage if it exists
                     return studyId ? this.studyUserService.registerParticipantForStudy(user, studyId) : of(null);
@@ -77,11 +81,18 @@ export class ParticipantDashboardComponent implements OnInit, OnDestroy {
                 // and does not reflect our recent call to registerParticipantForStudy
                 mergeMap(() => this.studyUserService.getOrUpdateStudyUsers(true)),
                 // if 409 (conflict) then we dont want an error
-                catchError((err) => (err.status === 409 ? of(null) : throwError(err)))
+                catchError((err) => (err.status === 409 ? of(null) : throwError(err))),
+                // finalize runs regardless of how the observable completes (success, error, or unsubscription)
+                finalize(() => {
+                    this.sessionStorageService.removeStudyIdToRegisterInSessionStorage();
+                    this.isLoading = false;
+                    this.loaderService.hideLoader();
+                })
             )
             .subscribe(
                 (_res) => {
                     // noop
+                    _res;
                 },
                 (err) => {
                     if (err.status === 401) {
@@ -91,12 +102,7 @@ export class ParticipantDashboardComponent implements OnInit, OnDestroy {
                         console.error(err);
                     }
                 }
-            )
-            .add(() => {
-                this.sessionStorageService.removeStudyIdToRegisterInSessionStorage();
-                this.isLoading = false;
-                this.loaderService.hideLoader();
-            });
+            );
 
         this.subscriptions.push(sub);
     }

src/app/pages/participant/participant-dashboard/participant-studies/participant-studies.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { forkJoin, Subscription } from 'rxjs';
-import { map, mergeMap } from 'rxjs/operators';
+import { forkJoin, of, Subscription } from 'rxjs';
+import { finalize, map, mergeMap } from 'rxjs/operators';
 import { StudyUser } from 'src/app/models/StudyUser';
 import { LoaderService } from 'src/app/services/loader/loader.service';
 import { StudyUserService } from 'src/app/services/study-user.service';
@@ -28,10 +28,23 @@ export class ParticipantStudiesComponent implements OnInit, OnDestroy {
         this.loaderService.showLoader();
         const obs = this.studyUserService.studyUsersObservable
             .pipe(
-                mergeMap((studyUsers: StudyUser[] | null) =>
-                    forkJoin((studyUsers || []).map((studyUser) => this.studyService.getStudyById(studyUser.studyId)))
-                ),
-                map((studyUserResponses) => studyUserResponses.map((x) => x.body))
+                mergeMap((studyUsers: StudyUser[] | null) => {
+                    const users = studyUsers || [];
+                    if (users.length === 0) {
+                        return of([]); // Return empty array immediately so finalize gets called
+                    }
+                    return forkJoin(
+                        users.map((studyUser) => {
+                            return this.studyService.getStudyById(studyUser.studyId);
+                        })
+                    );
+                }),
+                map((studyUserResponses) => {
+                    return studyUserResponses.map((x) => x.body);
+                }),
+                finalize(() => {
+                    this.loaderService.hideLoader();
+                })
             )
             .subscribe(
                 (studies) => {
@@ -62,10 +75,7 @@ export class ParticipantStudiesComponent implements OnInit, OnDestroy {
                 (err) => {
                     this.loaderService.hideLoader();
                 }
-            )
-            .add(() => {
-                this.loaderService.hideLoader();
-            });
+            );
         this.subscriptions.push(obs);
     }