From 9164f958adbf799c90d164fd17e07dad8b032bf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C3=87=C4=B1rak?= Date: Mon, 25 Mar 2024 21:17:05 +0300 Subject: [PATCH 1/6] refactor: http-error-wrapper component and adding http error message constants --- .../http-error-wrapper.component.html | 44 +++++++++---------- .../http-error-wrapper.component.ts | 13 ++++-- .../src/lib/constants/default-errors.ts | 14 ++++++ .../theme-shared/src/lib/constants/index.ts | 4 ++ .../packages/theme-shared/src/public-api.ts | 3 +- 5 files changed, 50 insertions(+), 28 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html index cb3adb0e17..52056ee18c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html @@ -4,32 +4,28 @@ class="error" [style.backgroundColor]="backgroundColor" > - + @if (!hideCloseIcon) { + + } -
-
-
-

{{ statusText }} {{ title | abpLocalization }}

-
- {{ details | abpLocalization }} -
-
- - {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }} - + @if (!customComponent) { +
+
+
+

{{ statusText }} {{ title | abpLocalization }}

+
+ {{ details | abpLocalization }} +
+
+ @if (isHomeShow) { + + {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }} + + } +
-
+ }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts index 7761751e8c..71566ff76c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts @@ -17,6 +17,7 @@ import { fromEvent, Subject } from 'rxjs'; import { debounceTime, filter } from 'rxjs/operators'; import { LocalizationParam, SubscriptionService } from '@abp/ng.core'; import { ErrorScreenErrorCodes } from '../../models'; +import { Router } from '@angular/router'; @Component({ selector: 'abp-http-error-wrapper', @@ -27,6 +28,8 @@ import { ErrorScreenErrorCodes } from '../../models'; export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestroy { protected readonly document = inject(DOCUMENT); protected readonly window = this.document.defaultView; + protected readonly router = inject(Router); + protected readonly subscription = inject(SubscriptionService); appRef!: ApplicationRef; @@ -57,11 +60,10 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr return this.status ? `[${this.status}]` : ''; } - constructor(private subscription: SubscriptionService) {} - ngOnInit(): void { this.backgroundColor = - this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') || '#fff'; + this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') || + '#fff'; } ngAfterViewInit(): void { @@ -87,6 +89,11 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr this.subscription.addOne(keyup$, () => this.destroy()); } + goHome() { + this.router.navigate(['/']); + this.destroy(); + } + ngOnDestroy(): void { this.destroy(); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts index 46a0605b95..6a2797e037 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/default-errors.ts @@ -51,3 +51,17 @@ export const CUSTOM_HTTP_ERROR_HANDLER_PRIORITY = Object.freeze({ high: 9, veryHigh: 99, }); + +export const HTTP_ERROR_STATUS = { + '401': 'AbpUi::401Message', + '403': 'AbpUi::403Message', + '404': 'AbpUi::404Message', + '500': 'AbpUi::500Message', +}; + +export const HTTP_ERROR_DETAIL = { + '401': 'AbpUi::DefaultErrorMessage401Detail', + '403': 'AbpUi::DefaultErrorMessage403Detail', + '404': 'AbpUi::DefaultErrorMessage404Detail', + '500': 'AbpUi::DefaultErrorMessage', +}; diff --git a/npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts new file mode 100644 index 0000000000..d08eba52b8 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/constants/index.ts @@ -0,0 +1,4 @@ +export * from './validation'; +export * from './default-errors'; +export * from './styles'; +export * from './scripts'; diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts index 659e59e490..d5f78417ef 100644 --- a/npm/ng-packs/packages/theme-shared/src/public-api.ts +++ b/npm/ng-packs/packages/theme-shared/src/public-api.ts @@ -2,7 +2,7 @@ * Public API Surface of theme-shared */ -export * from './lib/adapters' +export * from './lib/adapters'; export * from './lib/animations'; export * from './lib/components'; export * from './lib/constants/validation'; @@ -16,3 +16,4 @@ export * from './lib/services'; export * from './lib/theme-shared.module'; export * from './lib/tokens'; export * from './lib/utils'; +export * from './lib/constants'; From 97fc5d157dabd9a2f98e5ae5961965e6e37ce69b Mon Sep 17 00:00:00 2001 From: masumulu28 Date: Mon, 25 Mar 2024 21:27:12 +0300 Subject: [PATCH 2/6] remove: duplicated contant exports --- npm/ng-packs/packages/theme-shared/src/public-api.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/public-api.ts b/npm/ng-packs/packages/theme-shared/src/public-api.ts index d5f78417ef..43411c916d 100644 --- a/npm/ng-packs/packages/theme-shared/src/public-api.ts +++ b/npm/ng-packs/packages/theme-shared/src/public-api.ts @@ -5,8 +5,6 @@ export * from './lib/adapters'; export * from './lib/animations'; export * from './lib/components'; -export * from './lib/constants/validation'; -export * from './lib/constants/default-errors'; export * from './lib/directives'; export * from './lib/enums'; export * from './lib/handlers'; From 30b99696b0e85cb5e1ceb0e35fda3d29fdafcfbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yusuf=20=C3=87=C4=B1rak?= Date: Thu, 28 Mar 2024 14:40:56 +0300 Subject: [PATCH 3/6] Update goHome() function in http-error-wrapper.component.html --- .../http-error-wrapper/http-error-wrapper.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html index 52056ee18c..f2a887da85 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.html @@ -18,7 +18,7 @@
@if (isHomeShow) { - {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }} From 05212db6b7dc45d8e59c92414d0f3176ce949c64 Mon Sep 17 00:00:00 2001 From: masumulu28 Date: Thu, 28 Mar 2024 15:24:57 +0300 Subject: [PATCH 4/6] refactore: error-wrapper component and create-error-comp service --- .../http-error-wrapper.component.ts | 18 ++++++++++-------- .../services/create-error-component.service.ts | 10 +++++++--- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts index 71566ff76c..618952b11a 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts @@ -13,11 +13,11 @@ import { OnDestroy, } from '@angular/core'; import { DOCUMENT } from '@angular/common'; +import { Router } from '@angular/router'; import { fromEvent, Subject } from 'rxjs'; import { debounceTime, filter } from 'rxjs/operators'; import { LocalizationParam, SubscriptionService } from '@abp/ng.core'; import { ErrorScreenErrorCodes } from '../../models'; -import { Router } from '@angular/router'; @Component({ selector: 'abp-http-error-wrapper', @@ -61,19 +61,21 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr } ngOnInit(): void { - this.backgroundColor = - this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') || - '#fff'; + const computedStyle = this.window.getComputedStyle(this.document.body); + const backgroundColor = computedStyle?.getPropertyValue('background-color'); + this.backgroundColor = backgroundColor || '#fff'; } ngAfterViewInit(): void { if (this.customComponent) { - const customComponentRef = this.cfRes - .resolveComponentFactory(this.customComponent) - .create(this.injector); + const compFactory = this.cfRes.resolveComponentFactory(this.customComponent); + const customComponentRef = compFactory.create(this.injector); + customComponentRef.instance.errorStatus = this.status; customComponentRef.instance.destroy$ = this.destroy$; + this.appRef.attachView(customComponentRef.hostView); + if (this.containerRef) { this.containerRef.nativeElement.appendChild( (customComponentRef.hostView as EmbeddedViewRef).rootNodes[0], @@ -90,7 +92,7 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr } goHome() { - this.router.navigate(['/']); + this.router.navigateByUrl('/'); this.destroy(); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts index 5a6f02aef9..f1d738ec12 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts @@ -2,7 +2,9 @@ import { ApplicationRef, ComponentFactoryResolver, ComponentRef, + createComponent, EmbeddedViewRef, + EnvironmentInjector, inject, Injectable, Injector, @@ -24,6 +26,7 @@ export class CreateErrorComponentService { protected readonly cfRes = inject(ComponentFactoryResolver); protected readonly routerEvents = inject(RouterEvents); protected readonly injector = inject(Injector); + protected readonly envInjector = inject(EnvironmentInjector); protected readonly httpErrorConfig = inject(HTTP_ERROR_CONFIG); componentRef: ComponentRef | null = null; @@ -65,9 +68,9 @@ export class CreateErrorComponentService { const hostElement = this.getErrorHostElement(); const host = renderer.selectRootElement(hostElement, true); - this.componentRef = this.cfRes - .resolveComponentFactory(HttpErrorWrapperComponent) - .create(this.injector); + this.componentRef = createComponent(HttpErrorWrapperComponent, { + environmentInjector: this.envInjector, + }); for (const key in instance) { /* istanbul ignore else */ @@ -91,6 +94,7 @@ export class CreateErrorComponentService { const destroy$ = new Subject(); this.componentRef.instance.destroy$ = destroy$; + destroy$.subscribe(() => { this.componentRef?.destroy(); this.componentRef = null; From c5b792b43e3bfa8aeda74a96a7d217907fd8aaa5 Mon Sep 17 00:00:00 2001 From: masumulu28 Date: Thu, 28 Mar 2024 15:44:04 +0300 Subject: [PATCH 5/6] fix: navigate attempt to unauthorized page after navigation to home --- npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts | 2 +- .../http-error-wrapper/http-error-wrapper.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts index 6588538b28..0d9f82ea25 100644 --- a/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts +++ b/npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts @@ -31,4 +31,4 @@ const routes: Routes = [ imports: [RouterModule.forRoot(routes, {})], exports: [RouterModule], }) -export class AppRoutingModule { } +export class AppRoutingModule {} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts index 618952b11a..bd01e49f83 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts @@ -92,7 +92,7 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr } goHome() { - this.router.navigateByUrl('/'); + this.router.navigateByUrl('/', { onSameUrlNavigation: 'reload' }); this.destroy(); } From 58fafb5b55f3b10c771552e8ba380db0ec9e6aeb Mon Sep 17 00:00:00 2001 From: masumulu28 Date: Thu, 28 Mar 2024 16:07:02 +0300 Subject: [PATCH 6/6] refactor: http-error-wrapper component --- .../http-error-wrapper.component.ts | 42 ++++++++++--------- .../create-error-component.service.ts | 5 +-- 2 files changed, 23 insertions(+), 24 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts index bd01e49f83..83002a3a88 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/http-error-wrapper/http-error-wrapper.component.ts @@ -1,41 +1,40 @@ import { ApplicationRef, Component, - Injector, inject, OnInit, - ComponentFactoryResolver, ElementRef, EmbeddedViewRef, Type, ViewChild, AfterViewInit, OnDestroy, + createComponent, + EnvironmentInjector, + DestroyRef, } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { DOCUMENT } from '@angular/common'; import { Router } from '@angular/router'; import { fromEvent, Subject } from 'rxjs'; import { debounceTime, filter } from 'rxjs/operators'; -import { LocalizationParam, SubscriptionService } from '@abp/ng.core'; +import { LocalizationParam } from '@abp/ng.core'; import { ErrorScreenErrorCodes } from '../../models'; @Component({ selector: 'abp-http-error-wrapper', templateUrl: './http-error-wrapper.component.html', styleUrls: ['http-error-wrapper.component.scss'], - providers: [SubscriptionService], }) export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestroy { + protected readonly destroyRef = inject(DestroyRef); protected readonly document = inject(DOCUMENT); protected readonly window = this.document.defaultView; protected readonly router = inject(Router); - protected readonly subscription = inject(SubscriptionService); appRef!: ApplicationRef; - cfRes!: ComponentFactoryResolver; - - injector!: Injector; + environmentInjector!: EnvironmentInjector; status: ErrorScreenErrorCodes = 0; @@ -68,8 +67,9 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr ngAfterViewInit(): void { if (this.customComponent) { - const compFactory = this.cfRes.resolveComponentFactory(this.customComponent); - const customComponentRef = compFactory.create(this.injector); + const customComponentRef = createComponent(this.customComponent, { + environmentInjector: this.environmentInjector, + }); customComponentRef.instance.errorStatus = this.status; customComponentRef.instance.destroy$ = this.destroy$; @@ -84,24 +84,26 @@ export class HttpErrorWrapperComponent implements OnInit, AfterViewInit, OnDestr customComponentRef.changeDetectorRef.detectChanges(); } - const keyup$ = fromEvent(this.document, 'keyup').pipe( - debounceTime(150), - filter((key: KeyboardEvent) => key && key.key === 'Escape'), - ); - this.subscription.addOne(keyup$, () => this.destroy()); + fromEvent(this.document, 'keyup') + .pipe( + debounceTime(150), + filter((key: KeyboardEvent) => key && key.key === 'Escape'), + takeUntilDestroyed(this.destroyRef), + ) + .subscribe(() => this.destroy()); } - goHome() { + goHome(): void { this.router.navigateByUrl('/', { onSameUrlNavigation: 'reload' }); this.destroy(); } - ngOnDestroy(): void { - this.destroy(); - } - destroy(): void { this.destroy$.next(); this.destroy$.complete(); } + + ngOnDestroy(): void { + this.destroy(); + } } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts index f1d738ec12..92bafb840c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/services/create-error-component.service.ts @@ -1,6 +1,5 @@ import { ApplicationRef, - ComponentFactoryResolver, ComponentRef, createComponent, EmbeddedViewRef, @@ -23,7 +22,6 @@ import { ErrorScreenErrorCodes } from '../models/common'; export class CreateErrorComponentService { protected readonly document = inject(DOCUMENT); protected readonly rendererFactory = inject(RendererFactory2); - protected readonly cfRes = inject(ComponentFactoryResolver); protected readonly routerEvents = inject(RouterEvents); protected readonly injector = inject(Injector); protected readonly envInjector = inject(EnvironmentInjector); @@ -83,9 +81,8 @@ export class CreateErrorComponentService { const appRef = this.injector.get(ApplicationRef); if (this.canCreateCustomError(instance.status as ErrorScreenErrorCodes)) { - this.componentRef.instance.cfRes = this.cfRes; this.componentRef.instance.appRef = appRef; - this.componentRef.instance.injector = this.injector; + this.componentRef.instance.environmentInjector = this.envInjector; this.componentRef.instance.customComponent = this.httpErrorConfig.errorScreen?.component; }