refactor: http-error-wrapper component and adding http error message constants

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"
 >
-  <button
-    *ngIf="!hideCloseIcon"
-    id="abp-close-button"
-    type="button"
-    class="btn-close me-2"
-    (click)="destroy()"
-  ></button>
+  @if (!hideCloseIcon) {
+    <button id="abp-close-button" type="button" class="btn-close me-2" (click)="destroy()"></button>
+  }
 
-  <div *ngIf="!customComponent" class="row centered">
-    <div class="col-md-12">
-      <div class="error-template">
-        <h1>{{ statusText }} {{ title | abpLocalization }}</h1>
-        <div class="error-details">
-          {{ details | abpLocalization }}
-        </div>
-        <div class="error-actions">
-          <a
-            *ngIf="isHomeShow"
-            (click)="destroy()"
-            routerLink="/"
-            class="btn btn-primary btn-md mt-2"
-            ><span class="glyphicon glyphicon-home"></span>
-            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
-          </a>
+  @if (!customComponent) {
+    <div class="row centered">
+      <div class="col-md-12">
+        <div class="error-template">
+          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>
+          <div class="error-details">
+            {{ details | abpLocalization }}
+          </div>
+          <div class="error-actions">
+            @if (isHomeShow) {
+              <a (click)="destroy()" routerLink="/" class="btn btn-primary btn-md mt-2"
+                ><span class="glyphicon glyphicon-home"></span>
+                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}
+              </a>
+            }
+          </div>
         </div>
       </div>
     </div>
-  </div>
+  }
 </div>

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();
   }

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',
+};

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';

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';