[MULTIDIRECTORY-771] Error handling: interceptor + dictionary

Author: pianonika

projects/multidirectory-app/src/app/app.config.ts

@@ -1,12 +1,7 @@
 import { DEFAULT_DIALOG_CONFIG } from '@angular/cdk/dialog';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import {
-  HTTP_INTERCEPTORS,
-  HttpClient,
-  provideHttpClient,
-  withInterceptorsFromDi,
-} from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import {
   ApplicationConfig,
   ErrorHandler,
@@ -23,7 +18,6 @@ import { ApiAdapter } from '@core/api/api-adapter';
 import { DnsAdapterSettings } from '@core/api/dns-adapter.settings';
 import { GlobalErrorHandler } from '@core/api/error-handling/global-error-handler';
 import { PasswordPolicyViolationInterceptor } from '@core/api/error-handling/password-policy-violation-interceptor';
-import { ResultCodeInterceptor } from '@core/api/error-handling/result-code-interceptor';
 import { MultidirectoryAdapterSettings } from '@core/api/multidirectory-adapter.settings';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { provideTransloco, TranslocoService } from '@jsverse/transloco';
@@ -36,6 +30,7 @@ import { environment } from '../environments/environment';
 import { appRoutes } from './app.routes';
 import { DIALOG_CONFIG_DEFAULT } from './components/modals/constants/dialog.constants';
 import { TranslocoHttpLoader } from './transloco-loader';
+import { ErrorInterceptor } from '@core/interceptors/error.interceptor';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -54,20 +49,11 @@ export const appConfig: ApplicationConfig = {
     {
       provide: 'apiAdapter',
       useFactory: () =>
-        new ApiAdapter<MultidirectoryAdapterSettings>(
-          inject(HttpClient),
-          inject(MultidirectoryAdapterSettings),
-          inject(ToastrService),
-        ),
+        new ApiAdapter<MultidirectoryAdapterSettings>(inject(HttpClient), inject(MultidirectoryAdapterSettings), inject(ToastrService)),
     },
     {
       provide: 'dnsAdapter',
-      useFactory: () =>
-        new ApiAdapter<DnsAdapterSettings>(
-          inject(HttpClient),
-          inject(DnsAdapterSettings),
-          inject(ToastrService),
-        ),
+      useFactory: () => new ApiAdapter<DnsAdapterSettings>(inject(HttpClient), inject(DnsAdapterSettings), inject(ToastrService)),
     },
     {
       provide: ErrorHandler,
@@ -76,7 +62,7 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(withInterceptorsFromDi()),
     {
       provide: HTTP_INTERCEPTORS,
-      useClass: ResultCodeInterceptor,
+      useClass: ErrorInterceptor,
       multi: true,
     },
     {

projects/multidirectory-app/src/app/components/app-layout/app-layout.component.ts

@@ -79,9 +79,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
         const nameAttirbute = searchEntry.partial_attributes.find((x) => x.type == 'name');
         const displayName = nameAttirbute?.vals?.[0] ?? '';
 
-        const objectClass = searchEntry.partial_attributes.find(
-          (x) => x.type.toLocaleLowerCase() == 'objectclass',
-        )!;
+        const objectClass = searchEntry.partial_attributes.find((x) => x.type.toLocaleLowerCase() == 'objectclass')!;
         const entry = new NavigationNode({
           name: displayName,
           selectable: true,
@@ -100,7 +98,6 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
       .status()
       .pipe(
         catchError(() => {
-          this.toastr.error(translate('dns-settings.dns-unavailable'));
           return of(
             new DnsStatusResponse({
               dns_status: DnsStatuses.NOT_CONFIGURED,

projects/multidirectory-app/src/app/components/modals/components/dialogs/add-principal-dialog/add-principal-dialog.component.ts

@@ -1,11 +1,4 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  inject,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, OnInit, ViewChild } from '@angular/core';
 import { DialogComponent } from '../../core/dialog/dialog.component';
 import { MdFormComponent, MultidirectoryUiKitModule } from 'multidirectory-ui-kit';
 import { PatternWithMessageDirective } from '@core/validators/pattern-with-message.directive';
@@ -44,8 +37,7 @@ export class AddPrincipalDialogComponent implements OnInit {
   principalName = '';
 
   private dialogService: DialogService = inject(DialogService);
-  private dialogRef: DialogRef<AddPrincipalDialogReturnData, AddPrincipalDialogComponent> =
-    inject(DialogRef);
+  private dialogRef: DialogRef<AddPrincipalDialogReturnData, AddPrincipalDialogComponent> = inject(DialogRef);
   private api: MultidirectoryApiService = inject(MultidirectoryApiService);
   private toastr: ToastrService = inject(ToastrService);
   private destroyRef$: DestroyRef = inject(DestroyRef);
@@ -64,20 +56,10 @@ export class AddPrincipalDialogComponent implements OnInit {
     this.dialogComponent.showSpinner();
     const request = new AddPrincipalRequest(this.principalName);
 
-    this.api
-      .addPrincipal(request)
-      .pipe(
-        catchError(() => {
-          this.toastr.error(translate('add-principal.unable-to-add'));
-          this.dialogComponent.hideSpinner();
-
-          return EMPTY;
-        }),
-      )
-      .subscribe((x) => {
-        this.dialogComponent.hideSpinner();
-        this.dialogService.close(this.dialogRef, x);
-      });
+    this.api.addPrincipal(request).subscribe((x) => {
+      this.dialogComponent.hideSpinner();
+      this.dialogService.close(this.dialogRef, x);
+    });
   }
 
   onClose() {

projects/multidirectory-app/src/app/components/modals/components/dialogs/change-password-dialog/change-password-dialog.component.ts

@@ -73,21 +73,11 @@ export class ChangePasswordDialogComponent {
 
   protected finish() {
     this.dialog().showSpinner();
-    this.api
-      .changePassword(this.changeRequest)
-      .pipe(
-        catchError(() => {
-          this.toastr.error(translate('change-password.unable-change-password'));
-          this.dialogService.close(this.dialogRef);
-          this.dialog().hideSpinner();
-          return EMPTY;
-        }),
-      )
-      .subscribe((x) => {
-        this.toastr.success(translate('change-password.password-successfully-changed'));
-        this.dialog().hideSpinner();
-        this.dialogService.close(this.dialogRef, x);
-      });
+    this.api.changePassword(this.changeRequest).subscribe((x) => {
+      this.toastr.success(translate('change-password.password-successfully-changed'));
+      this.dialog().hideSpinner();
+      this.dialogService.close(this.dialogRef, x);
+    });
   }
 
   protected checkModel() {

projects/multidirectory-app/src/app/components/modals/components/dialogs/create-group-dialog/create-group-dialog.component.ts

@@ -7,10 +7,7 @@ import { FormsModule } from '@angular/forms';
 import { catchError, EMPTY, map, Observable, Subject, switchMap, takeUntil } from 'rxjs';
 import { DialogService } from '../../../services/dialog.service';
 import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
-import {
-  CreateGroupDialogData,
-  CreateGroupDialogReturnData,
-} from '../../../interfaces/create-group-dialog.interface';
+import { CreateGroupDialogData, CreateGroupDialogReturnData } from '../../../interfaces/create-group-dialog.interface';
 import { MultidirectoryApiService } from '@services/multidirectory-api.service';
 import { ToastrService } from 'ngx-toastr';
 import { LdapAttribute } from '@core/ldap/ldap-attributes/ldap-attribute';
@@ -21,14 +18,7 @@ import { SchemaService } from '@services/schema/schema.service';
 @Component({
   selector: 'app-create-group-dialog',
   standalone: true,
-  imports: [
-    DialogComponent,
-    MultidirectoryUiKitModule,
-    RequiredWithMessageDirective,
-    TranslocoDirective,
-    FormsModule,
-    TranslocoPipe,
-  ],
+  imports: [DialogComponent, MultidirectoryUiKitModule, RequiredWithMessageDirective, TranslocoDirective, FormsModule, TranslocoPipe],
   templateUrl: './create-group-dialog.component.html',
   styleUrl: './create-group-dialog.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -39,8 +29,7 @@ export class CreateGroupDialogComponent implements OnInit {
   formValid = false;
 
   private dialogService: DialogService = inject(DialogService);
-  private dialogRef: DialogRef<CreateGroupDialogReturnData, CreateGroupDialogComponent> =
-    inject(DialogRef);
+  private dialogRef: DialogRef<CreateGroupDialogReturnData, CreateGroupDialogComponent> = inject(DialogRef);
   private api: MultidirectoryApiService = inject(MultidirectoryApiService);
   private toastr: ToastrService = inject(ToastrService);
   private schema = inject(SchemaService);
@@ -100,8 +89,6 @@ export class CreateGroupDialogComponent implements OnInit {
           );
         }),
         catchError(() => {
-          this.dialogComponent?.hideSpinner();
-          this.toastr.error(translate('group-create.unable-create-group'));
           this.dialogService.close(this.dialogRef);
           return EMPTY;
         }),

projects/multidirectory-app/src/app/core/api/error-handling/global-error-handler.ts

@@ -17,25 +17,17 @@ export class GlobalErrorHandler implements ErrorHandler {
   }
 
   handleError(error: any) {
-    console.error(error);
     if (error.error instanceof ProgressEvent) {
       this.router.navigate(['/enable-backend']);
       return;
     }
 
     if (error.error?.detail) {
-      if (typeof error.error?.detail === 'string' || error.error?.detail instanceof String) {
-        this.toastr.error(error.error.detail);
+      if (error.status == 451) {
+        this.toastr.error(translate('errors.license-problem'));
         return;
       }
-
-      for (const i of error.error.detail) {
-        this.toastr.error(i?.msg ?? i);
-      }
       return;
     }
-    this.toastr.error(error?.statusText ?? translate('errors.unknown-error'), '', {
-      onActivateTick: true,
-    });
   }
 }

projects/multidirectory-app/src/app/core/api/error-handling/result-code-interceptor.ts

@@ -0,0 +1,58 @@
+import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgxSpinnerService } from 'ngx-spinner';
+import { ToastrService } from 'ngx-toastr';
+import { catchError, EMPTY, Observable, take, throwError } from 'rxjs';
+import { AppSettingsService } from '@services/app-settings.service';
+import { DialogService } from '@components/modals/services/dialog.service';
+import { translate } from '@jsverse/transloco';
+export const ErrorCode = {
+  BadRequest: 400,
+  NotAuthorized: 401,
+  UnprocessableEntity: 422,
+  NotFound: 404,
+  InternalServerError: 500,
+};
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+  private readonly toastr = inject(ToastrService);
+  private readonly spinner = inject(NgxSpinnerService);
+  private readonly router = inject(Router);
+  private app: AppSettingsService = inject(AppSettingsService);
+  private dialogService = inject(DialogService);
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    return next.handle(req).pipe(
+      catchError((error: HttpErrorResponse) => {
+        this.spinner.hide();
+        if (error.status === ErrorCode.NotAuthorized) {
+          const errText = this.parseBadRequestError(error);
+          this.toastr.info(errText);
+          this.dialogService.closeAll();
+
+          return throwError(() => error);
+        }
+        if (
+          error.status === ErrorCode.BadRequest ||
+          error.status === ErrorCode.InternalServerError ||
+          error.status === ErrorCode.UnprocessableEntity
+        ) {
+          const errText = this.parseBadRequestError(error);
+          this.toastr.error(errText);
+          return EMPTY;
+        }
+        return throwError(() => error.message);
+      }),
+    );
+  }
+  private parseBadRequestError(response: HttpErrorResponse): string {
+    const errorCode = `${response.status}${response.error['domain_code']}${String(response.error['error_code']).padStart(2, '0')}`;
+    const errorName = translate(`errors-code.${errorCode}`);
+    if (errorName === `errors-code.${errorCode}`) {
+      return response.error.detail ?? translate('errors.unknown-error');
+    }
+
+    return errorName;
+  }
+}

projects/multidirectory-app/src/app/core/interceptors/error.interceptor.ts

@@ -5,9 +5,7 @@ import { MultidirectoryApiService } from '@services/multidirectory-api.service';
 import { ToastrService } from 'ngx-toastr';
 import { catchError, delay, map, Observable, of, switchMap } from 'rxjs';
 
-export const setupRouteGuardCanActivateFn = (
-  route: ActivatedRouteSnapshot,
-): Observable<boolean | UrlTree> => {
+export const setupRouteGuardCanActivateFn = (route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> => {
   const multidirectoryApi = inject(MultidirectoryApiService);
   const router = inject(Router);
   const toast = inject(ToastrService);
@@ -16,7 +14,6 @@ export const setupRouteGuardCanActivateFn = (
   return multidirectoryApi.checkSetup().pipe(
     catchError((err, caughtRx) => {
       if (err.status == 0 || calls > 5) {
-        toast.error(translate('backend-status.backend-is-not-responding'));
         router.navigate(['/enable-backend']);
         return of(true);
       }