feat: error page component

projects/design-angular-kit/assets/i18n/en.json

@@ -86,10 +86,19 @@
       "selected": "Selected",
       "language-selection": "Language selection: {{lang}}",
       "select-language": "Select a language",
-      "404": {
-        "title": "Resource not found",
-        "description": "Oops! The resource you are looking for was not found, go back to the homepage and use the menu to continue browsing.",
-        "go-back": "Go back",
+      "error-page": {
+        "404": {
+          "title": "Resource not found",
+          "description": "Oops! The resource you are looking for was not found, go back to the homepage and use the menu to continue browsing."
+        },
+        "403": {
+          "title": "Forbidden",
+          "description": "You are not authorized to access this resource!"
+        },
+        "500": {
+          "title": "An error has occurred",
+          "description": "There was an unexpected error. Please try again later or contact support."
+        },
         "go-to-homepage": "Return to homepage"
       }
     }

projects/design-angular-kit/assets/i18n/it.json

@@ -86,10 +86,19 @@
       "selected": "Selezionata",
       "language-selection": "Selezione lingua: {{lang}}",
       "select-language": "Seleziona una lingua",
-      "404": {
-        "title": "Risorsa non trovata",
-        "description": "Oops! La risorsa che cerchi non è stata trovata, torna alla homepage e utilizza il menu per continuare la navigazione.",
-        "go-back": "Torna indietro",
+      "error-page": {
+        "404": {
+          "title": "Risorsa non trovata",
+          "description": "Oops! La risorsa che cerchi non è stata trovata, torna alla homepage e utilizza il menu per continuare la navigazione."
+        },
+        "403": {
+          "title": "Non autorizzato",
+          "description": "Non sei autorizzato ad accedere a questa risorsa!"
+        },
+        "500": {
+          "title": "Si è verificato un errore",
+          "description": "Si è verificato un errore imprevisto. Riprova più tardi o contatta il supporto."
+        },
         "go-to-homepage": "Torna alla homepage"
       }
     }

projects/design-angular-kit/src/lib/components/components.module.ts

@@ -46,7 +46,7 @@ import { BreadcrumbItemComponent } from './navigation/breadcrumbs/breadcrumb-ite
 import { HeaderComponent } from './navigation/header/header.component';
 import { IconComponent } from './utils/icon/icon.component';
 import { LanguageSwitcherComponent } from './utils/language-switcher/language-switcher.component';
-import { NotFoundPageComponent } from './utils/not-found-page/not-found-page.component';
+import { ErrorPageComponent } from './utils/error-page/error-page.component';
 import { ChipComponent } from './core/chip/chip.component';
 import { ForwardDirective } from './core/forward/forward.directive';
 import { DimmerComponent } from './core/dimmer/dimmer.component';
@@ -124,7 +124,7 @@ const navigation = [
  */
 const utils = [
   IconComponent,
-  NotFoundPageComponent,
+  ErrorPageComponent,
   LanguageSwitcherComponent,
   MarkMatchingTextPipe
 ];

projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component.html

@@ -0,0 +1,27 @@
+<div class="container text-center mt-5">
+  <h1 *ngIf="errorCode && isShowErrorCode">{{errorCode}}</h1>
+  <h2>
+    <ng-container *ngIf="!errorTitle && isDefaultErrorCode; else customTitle">
+      {{'it.utils.error-page.' + errorCode + '.title' | translate}}
+    </ng-container>
+    <ng-template #customTitle>{{(errorTitle || 'it.errors.generic') | translate}}</ng-template>
+  </h2>
+
+  <p class="mt-3 w-75 mx-auto">
+    <ng-container
+      *ngIf="!errorDescription && isDefaultErrorCode; else customDescription">
+      {{'it.utils.error-page.' + errorCode + '.description' | translate}}
+    </ng-container>
+    <ng-template #customDescription>
+      {{(errorDescription || 'it.errors.generic-support-message') | translate}}
+    </ng-template>
+  </p>
+
+  <div class="mt-5" *ngIf="isShowBackButton || isShowHomeButton">
+    <it-back-button *ngIf="isShowBackButton"></it-back-button>
+    <a *ngIf="isShowHomeButton" itButton="outline-primary" class="ms-3" routerLink="/"
+       title="{{'it.utils.error-page.go-to-homepage' | translate}}">
+      {{'it.utils.error-page.go-to-homepage' | translate}}
+    </a>
+  </div>
+</div>

projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorPageComponent } from './error-page.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+
+describe('ErrorPageComponent', () => {
+  let component: ErrorPageComponent;
+  let fixture: ComponentFixture<ErrorPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ErrorPageComponent], imports: [TranslateModule.forRoot(), RouterTestingModule]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ErrorPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component.ts

@@ -0,0 +1,90 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input';
+
+@Component({
+  selector: 'it-error-page',
+  templateUrl: './error-page.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ErrorPageComponent {
+
+  /**
+   * The error code to show
+   */
+  @Input() errorCode?: number | 404 | 403 | 500;
+
+  /**
+   * Show/Hide error code
+   * @default true - show
+   */
+  @Input() showErrorCode?: BooleanInput = true;
+
+  /**
+   * Custom error title
+   * - If set it will be displayed instead of the default title.
+   * - It is possible to use i18n keys
+   */
+  @Input() errorTitle?: string;
+
+  /**
+   * Custom error description
+   * - If set it will be displayed instead of the default description.
+   * - It is possible to use i18n keys
+   */
+  @Input() errorDescription?: string;
+
+  /**
+   * Show/Hide back button
+   * @default true - show
+   */
+  @Input() showBackButton?: BooleanInput = true;
+
+  /**
+   * Show/Hide home button
+   * @default true - show
+   */
+  @Input() showHomeButton?: BooleanInput = true;
+
+  constructor(
+    private readonly route: ActivatedRoute
+  ) {
+    this.route.data.subscribe(data => {
+      if (!this.errorCode && data['errorCode']) {
+        this.errorCode = data['errorCode']; // Get errorCode from route data
+      }
+      if (data['showErrorCode'] !== undefined) {
+        this.showBackButton = data['showErrorCode'];  // Get showErrorCode from route data
+      }
+      if (!this.errorTitle && data['errorTitle']) {
+        this.errorTitle = data['errorTitle'];  // Get errorTitle from route data
+      }
+      if (!this.errorDescription && data['errorDescription']) {
+        this.errorDescription = data['errorDescription'];  // Get errorDescription from route data
+      }
+      if (data['showBackButton'] !== undefined) {
+        this.showBackButton = data['showBackButton'];  // Get showBackButton from route data
+      }
+      if (data['showHomeButton'] !== undefined) {
+        this.showHomeButton = data['showHomeButton'];  // Get showHomeButton from route data
+      }
+    });
+  }
+
+  get isDefaultErrorCode(): boolean {
+    return this.errorCode === 404 || this.errorCode === 403 || this.errorCode === 500;
+  }
+
+  get isShowErrorCode(): boolean {
+    return isTrueBooleanInput(this.showErrorCode);
+  }
+
+  get isShowBackButton(): boolean {
+    return isTrueBooleanInput(this.showBackButton);
+  }
+
+  get isShowHomeButton(): boolean {
+    return isTrueBooleanInput(this.showHomeButton);
+  }
+
+}

projects/design-angular-kit/src/public_api.ts

@@ -62,7 +62,7 @@ export * from './lib/components/navigation/header/header.component';
 // Utils
 export * from './lib/components/utils/icon/icon.component';
 export * from './lib/components/utils/language-switcher/language-switcher.component';
-export * from './lib/components/utils/not-found-page/not-found-page.component';
+export * from './lib/components/utils/error-page/error-page.component';
 
 // Services
 export * from './lib/services/notifications/notifications.service';

src/app/app-routing.module.ts

@@ -1,6 +1,10 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher.component';
+import {
+  ErrorPageComponent
+} from '../../projects/design-angular-kit/src/lib/components/utils/error-page/error-page.component';
+
 
 const routes: Routes = [
   { path: '', redirectTo: 'info', pathMatch: 'full' },
@@ -39,11 +43,16 @@ const routes: Routes = [
     { path: 'alert', loadChildren: () => import('src/app/alert/alert.module').then(m => m.AlertModule) },
     { path: 'spinner', loadChildren: () => import('src/app/spinner/spinner.module').then(m => m.SpinnerModule) },
     { path: 'icon', loadChildren: () => import('src/app/icon/icon.module').then(m => m.IconModule) },
-  ]}
+    { path: 'error-page', loadChildren: () => import('src/app/error-page/error-page.module').then(m => m.ErrorPageModule) },
+  ]},
+  { path: 'error/not-found', component: ErrorPageComponent, data: { errorCode: 404 } },
+  { path: 'error/forbidden', component: ErrorPageComponent, data: { errorCode: 403 } },
+  { path: 'error/server-error', component: ErrorPageComponent, data: { errorCode: 500 } },
+  { path: '**', redirectTo: 'error/not-found'  }
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, {useHash: true})],
+  imports: [RouterModule.forRoot(routes, {useHash: true, scrollPositionRestoration: 'enabled'})],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { RouterDispatcherComponent } from './router-dispatcher/router-dispatcher
 import { LinkSortPipe } from './link-sort.pipe';
 import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 import { TranslateStore } from '@ngx-translate/core';
+import { DesignAngularKitModule } from '../../projects/design-angular-kit/src/lib/design-angular-kit.module';
 
 @NgModule({
   declarations: [
@@ -22,7 +23,8 @@ import { TranslateStore } from '@ngx-translate/core';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    AppRoutingModule
+    AppRoutingModule,
+    DesignAngularKitModule
   ],
   providers: [
     TranslateStore,

src/app/error-page/error-page-component-example/error-page-component-example.component.html

@@ -0,0 +1,39 @@
+<h3>Componente</h3>
+<p>Puoi utilizzare la pagina d'errore come un classico componente</p>
+
+<div class="bd-example">
+
+  <div class="row">
+    <div class="col-6">
+      <h4>404 - Not Found</h4>
+      <hr>
+      <it-error-page [errorCode]="404"></it-error-page>
+    </div>
+
+    <div class="col-6">
+      <h4>403 - Forbidden</h4>
+      <hr>
+      <it-error-page [errorCode]="403"></it-error-page>
+    </div>
+  </div>
+
+  <div class="row mt-5">
+    <div class="col-6">
+      <h4>500 - Internal Server Error</h4>
+      <hr>
+      <it-error-page [errorCode]="500"></it-error-page>
+    </div>
+
+    <div class="col-6">
+      <h4>Personalizzato</h4>
+      <hr>
+      <it-error-page showBackButton="true"
+                     showHomeButton="false"
+                     [errorCode]="503"
+                     showErrorCode="true"
+                     errorTitle="Servizio non disponibile"
+                     errorDescription="Mi dispiace, momentaneamente questa risorsa non è disponibile"></it-error-page>
+    </div>
+  </div>
+
+</div>

src/app/error-page/error-page-component-example/error-page-component-example.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorPageComponentExampleComponent } from './error-page-component-example.component';
+
+describe('ErrorPageComponentExampleComponent', () => {
+  let component: ErrorPageComponentExampleComponent;
+  let fixture: ComponentFixture<ErrorPageComponentExampleComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ErrorPageComponentExampleComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ErrorPageComponentExampleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/error-page/error-page-component-example/error-page-component-example.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'it-error-page-component-example',
+  templateUrl: './error-page-component-example.component.html'
+})
+export class ErrorPageComponentExampleComponent {
+
+}