feat: tune layout of error pages (#429)

onecx · Nov 29, 2024 · 40e2466 · 40e2466
1 parent b49eb41
commit 40e2466
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 78 deletions.
diff --git a/src/app/shell/components/error-page.component.ts b/src/app/shell/components/error-page.component.ts
@@ -7,9 +7,9 @@ import { getLocation } from '@onecx/accelerator'
   template: `
     <div class="p-4 flex flex-column gap-5">
       <div>
-        <h1 class="md:text-4xl text-2xl mb-1">{{ 'ERROR_PAGE.TITLE' | translate }}</h1>
-        <p class="md:text-2xl text-lg mb-1">{{ 'ERROR_PAGE.DETAILS' | translate }}</p>
-        <p class="md:text-lg text-sm">{{ 'ERROR_PAGE.REQUESTED_PAGE' | translate }} {{ requestedApplicationPath }}</p>
+        <h1 class="md:text-2xl text-lg">{{ 'ERROR_PAGE.TITLE' | translate }}</h1>
+        <p class="md:text-lg text-base mb-1">{{ 'ERROR_PAGE.DETAILS' | translate }}</p>
+        <p class="md:text-base text-sm">{{ 'ERROR_PAGE.REQUESTED_PAGE' | translate }} {{ requestedApplicationPath }}</p>
       </div>
       <button pButton (click)="reloadPage()" routerLinkActive="router-link-active" class="w-max">
         {{ 'ERROR_PAGE.BUTTON' | translate }}

diff --git a/src/app/shell/components/initialization-error-page/initialization-error-page.component.ts b/src/app/shell/components/initialization-error-page/initialization-error-page.component.ts
@@ -1,59 +1,61 @@
-import { Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { SerializedInitializationError } from '../../utils/initialization-error-handler.utils';
+import { Component } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { SerializedInitializationError } from '../../utils/initialization-error-handler.utils'
 
 @Component({
   template: `<div class="p-4">
-    <h1 class="md:text-4xl text-2xl mb-1">{{ 'INITIALIZATION_ERROR_PAGE.TITLE' | translate }}</h1>
-    <p class="md:text-2xl text-lg mb-1">{{ 'INITIALIZATION_ERROR_PAGE.SUBTITLE' | translate }}</p>
-    <div *ngIf="error.message">
-      <p class="md:text-lg text-sm">
-        {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.MESSAGE' | translate }}
-        {{ error.message }}
-      </p>
+    <h1 class="md:text-2xl text-lg mb-1">{{ 'INITIALIZATION_ERROR_PAGE.TITLE' | translate }}</h1>
+    <p class="md:text-lg text-base mb-1">{{ 'INITIALIZATION_ERROR_PAGE.SUBTITLE' | translate }}</p>
+    <div class="flex flex-column row-gap-2">
+      <ng-container *ngIf="error.message">
+        <div class="md:text-base text-sm">
+          {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.MESSAGE' | translate }}
+        </div>
+        <i>{{ error.message }}</i>
+      </ng-container>
+      <ng-container *ngIf="error.requestedUrl">
+        <div class="md:text-base text-sm">
+          {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.REQUESTED_URL' | translate }}
+          <i>{{ error.requestedUrl }}</i>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="error.detail">
+        <div class="md:text-base text-sm">
+          {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.DETAILS' | translate }}
+          <i>{{ error.detail }}</i>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="error.errorCode">
+        <div class="md:text-base text-sm">
+          {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.ERRORCODE' | translate }}
+          <i>{{ error.errorCode }}</i>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="error.invalidParams">
+        <div class="md:text-base text-sm">
+          {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.INVALID_PARAMS' | translate }}
+          <i>{{ error.invalidParams }}</i>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="error.params">
+        <div class="md:text-base text-sm">
+          {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.PARAMS' | translate }}
+          <i>{{ error.params }}</i>
+        </div>
+      </ng-container>
     </div>
-    <div *ngIf="error.requestedUrl">
-      <p class="md:text-lg text-sm">
-        {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.REQUESTED_URL' | translate }}
-        {{ error.requestedUrl }}
-      </p>
-    </div>
-    <div *ngIf="error.detail">
-      <p class="md:text-lg text-sm">
-        {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.DETAILS' | translate }}
-        {{ error.detail }}
-      </p>
-    </div>
-    <div *ngIf="error.errorCode">
-      <p class="md:text-lg text-sm">
-        {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.ERRORCODE' | translate }}
-        {{ error.errorCode }}
-      </p>
-    </div>
-    <div *ngIf="error.invalidParams">
-      <p class="md:text-lg text-sm">
-        {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.INVALID_PARAMS' | translate }}
-        {{ error.invalidParams }}
-      </p>
-    </div>
-    <div *ngIf="error.params">
-      <p class="md:text-lg text-sm">
-        {{ 'INITIALIZATION_ERROR_PAGE.DETAILS.PARAMS' | translate }}
-        {{ error.params }}
-      </p>
-    </div>
-  </div> `,
+  </div> `
 })
 export class InitializationErrorPageComponent {
-  error: SerializedInitializationError;
+  error: SerializedInitializationError
   constructor(private route: ActivatedRoute) {
     this.error = {
       message: this.route.snapshot.paramMap.get('message') ?? '',
       requestedUrl: this.route.snapshot.paramMap.get('requestedUrl') ?? '',
       detail: this.route.snapshot.paramMap.get('detail') ?? '',
       errorCode: this.route.snapshot.paramMap.get('errorCode') ?? '',
       params: this.route.snapshot.paramMap.get('params') ?? '',
-      invalidParams: this.route.snapshot.paramMap.get('invalidParams') ?? '',
-    };
+      invalidParams: this.route.snapshot.paramMap.get('invalidParams') ?? ''
+    }
   }
 }
diff --git a/src/app/shell/components/not-found-page.component.ts b/src/app/shell/components/not-found-page.component.ts
@@ -6,8 +6,8 @@ import { Workspace } from '@onecx/integration-interface'
   template: `
     <div class="p-4 flex flex-column gap-5">
       <div>
-        <h1 class="md:text-4xl text-2xl mb-1">{{ 'NOT_FOUND_PAGE.TITLE' | translate }}</h1>
-        <p class="md:text-2xl text-lg">{{ 'NOT_FOUND_PAGE.DETAILS' | translate }}</p>
+        <h1 class="md:text-2xl text-lg">{{ 'NOT_FOUND_PAGE.TITLE' | translate }}</h1>
+        <p class="md:text-lg text-base">{{ 'NOT_FOUND_PAGE.DETAILS' | translate }}</p>
       </div>
       <button pButton [routerLink]="[workspace?.baseUrl]" class="w-max">
         {{ 'NOT_FOUND_PAGE.BUTTON' | translate }}

diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
@@ -1,31 +1,31 @@
 {
-    "ERROR_MESSAGES": {
-        "ON_REMOTE_LOAD_ERROR": "Teile der Anwendung konnte nicht geladen werden."
-    },
-    "WELCOME": {
-        "TITLE": "Hallo"
-    },
-    "NOT_FOUND_PAGE": {
-        "TITLE": "Die Seite konnte nicht gefunden werden.",
-        "DETAILS": "Die Seite, auf die Sie zugreifen wollten, ist im aktuellen Workspace nicht vorhanden.",
-        "BUTTON": "Workspace Startseite"
-    },
-    "ERROR_PAGE": {
-        "TITLE": "Die Seite konnte nicht geladen werden.",
-        "DETAILS": "Versuchen Sie es erneut oder kontaktieren Sie einen Workspace Administrator.",
-        "REQUESTED_PAGE": "Angefragte Seite:",
-        "BUTTON": "Neuladen"
-    },
-    "INITIALIZATION_ERROR_PAGE": {
-        "TITLE": "Fehler bei der Initialisierung des Workspaces",
-        "SUBTITLE": "Bitte kontaktieren Sie einen Workspace Administrator mit den folgenden Informationen:",
-        "DETAILS": {
-            "MESSAGE": "Fehlermeldung:",
-            "REQUESTED_URL": "Aufgerufene URL:",
-            "DETAILS": "Details:",
-            "ERRORCODE": "Fehlercode:",
-            "INVALID_PARAMS": "Ungültige Parameter:",
-            "PARAMS": "Parameter:"
-        }
+  "ERROR_MESSAGES": {
+    "ON_REMOTE_LOAD_ERROR": "Teile der Anwendung konnte nicht geladen werden."
+  },
+  "WELCOME": {
+    "TITLE": "Hallo"
+  },
+  "NOT_FOUND_PAGE": {
+    "TITLE": "Die Seite konnte nicht gefunden werden.",
+    "DETAILS": "Die Seite, auf die Sie zugreifen möchten, ist im aktuellen Workspace nicht vorhanden.",
+    "BUTTON": "Workspace Startseite"
+  },
+  "ERROR_PAGE": {
+    "TITLE": "Die Seite konnte nicht geladen werden.",
+    "DETAILS": "Versuchen Sie es erneut oder kontaktieren Sie einen Workspace Administrator.",
+    "REQUESTED_PAGE": "Angefragte Seite:",
+    "BUTTON": "Neuladen"
+  },
+  "INITIALIZATION_ERROR_PAGE": {
+    "TITLE": "Fehler bei der Initialisierung des Workspaces",
+    "SUBTITLE": "Bitte kontaktieren Sie einen Workspace Administrator mit den folgenden Informationen:",
+    "DETAILS": {
+      "MESSAGE": "Fehlermeldung:",
+      "REQUESTED_URL": "Aufgerufene URL:",
+      "DETAILS": "Details:",
+      "ERRORCODE": "Fehlercode:",
+      "INVALID_PARAMS": "Ungültige Parameter:",
+      "PARAMS": "Parameter:"
     }
-}
+  }
+}