From a5b2870216cdd6750d32f4073f1f892e019746b9 Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Wed, 10 Jan 2024 17:53:26 +0200
Subject: [PATCH 1/3] restructure error components

---
 ui/src/app/app.module.ts                      |  5 +++--
 .../error/error-alert.component.html          |  0
 .../error/error-alert.component.spec.ts       |  2 +-
 .../error/error-alert.component.ts            |  8 +++----
 ui/src/app/error/error.component.html         |  1 +
 ui/src/app/error/error.component.spec.ts      | 21 +++++++++++++++++++
 ui/src/app/error/error.component.ts           |  9 ++++++++
 .../{shared => error}/model/error.model.ts    |  8 +++++++
 .../service/error.service.ts                  |  0
 .../shared/error/error-alert.component.scss   |  0
 ui/src/app/shared/model/error-alert.ts        |  9 --------
 ui/src/app/shared/shared.module.ts            |  2 +-
 12 files changed, 47 insertions(+), 18 deletions(-)
 rename ui/src/app/{shared => }/error/error-alert.component.html (100%)
 rename ui/src/app/{shared => }/error/error-alert.component.spec.ts (92%)
 rename ui/src/app/{shared => }/error/error-alert.component.ts (81%)
 create mode 100644 ui/src/app/error/error.component.html
 create mode 100644 ui/src/app/error/error.component.spec.ts
 create mode 100644 ui/src/app/error/error.component.ts
 rename ui/src/app/{shared => error}/model/error.model.ts (52%)
 rename ui/src/app/{shared => error}/service/error.service.ts (100%)
 delete mode 100644 ui/src/app/shared/error/error-alert.component.scss
 delete mode 100644 ui/src/app/shared/model/error-alert.ts

diff --git a/ui/src/app/app.module.ts b/ui/src/app/app.module.ts
index 6626d517b..44fabc928 100644
--- a/ui/src/app/app.module.ts
+++ b/ui/src/app/app.module.ts
@@ -15,10 +15,11 @@ import { HomeModule } from './home/home.module'
 import { FooterComponent } from './layout/footer/footer.component'
 import { SharedModule } from './shared/shared.module'
 import { HeaderInterceptor } from './shared/interceptor/header.interceptor'
-import { ErrorService } from './shared/service/error.service'
+import { ErrorService } from './error/service/error.service';
+import { ErrorComponent } from './error/error.component'
 
 @NgModule({
-  declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective, FooterComponent],
+  declarations: [AppComponent, NavbarComponent, HasAnyAuthorityDirective, FooterComponent, ErrorComponent],
   imports: [
     FontAwesomeModule,
     AccountModule,
diff --git a/ui/src/app/shared/error/error-alert.component.html b/ui/src/app/error/error-alert.component.html
similarity index 100%
rename from ui/src/app/shared/error/error-alert.component.html
rename to ui/src/app/error/error-alert.component.html
diff --git a/ui/src/app/shared/error/error-alert.component.spec.ts b/ui/src/app/error/error-alert.component.spec.ts
similarity index 92%
rename from ui/src/app/shared/error/error-alert.component.spec.ts
rename to ui/src/app/error/error-alert.component.spec.ts
index 42c71e68d..3f45d263c 100644
--- a/ui/src/app/shared/error/error-alert.component.spec.ts
+++ b/ui/src/app/error/error-alert.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import { ErrorAlertComponent } from './error-alert.component'
-import { ErrorService } from '../service/error.service'
+import { ErrorService } from './service/error.service'
 import { AppModule } from 'src/app/app.module'
 
 describe('ErrorAlertComponent', () => {
diff --git a/ui/src/app/shared/error/error-alert.component.ts b/ui/src/app/error/error-alert.component.ts
similarity index 81%
rename from ui/src/app/shared/error/error-alert.component.ts
rename to ui/src/app/error/error-alert.component.ts
index 228f5e686..426e9053a 100644
--- a/ui/src/app/shared/error/error-alert.component.ts
+++ b/ui/src/app/error/error-alert.component.ts
@@ -1,13 +1,11 @@
 import { ChangeDetectorRef, Component, ErrorHandler, HostListener, Inject, OnInit } from '@angular/core'
-import { ErrorService } from '../service/error.service'
+import { ErrorService } from './service/error.service'
 import { Subscription } from 'rxjs'
-import { ErrorAlert } from '../model/error-alert'
-import { AppError } from '../model/error.model'
+import { AppError, ErrorAlert } from './model/error.model'
 
 @Component({
   selector: 'app-error-alert',
-  templateUrl: './error-alert.component.html',
-  styleUrls: ['./error-alert.component.scss'],
+  templateUrl: './error-alert.component.html'
 })
 export class ErrorAlertComponent implements OnInit {
   alerts: any[] = []
diff --git a/ui/src/app/error/error.component.html b/ui/src/app/error/error.component.html
new file mode 100644
index 000000000..27d6bed7a
--- /dev/null
+++ b/ui/src/app/error/error.component.html
@@ -0,0 +1 @@
+<p>error works!</p>
diff --git a/ui/src/app/error/error.component.spec.ts b/ui/src/app/error/error.component.spec.ts
new file mode 100644
index 000000000..bfc85b143
--- /dev/null
+++ b/ui/src/app/error/error.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorComponent } from './error.component';
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent;
+  let fixture: ComponentFixture<ErrorComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ErrorComponent]
+    });
+    fixture = TestBed.createComponent(ErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ui/src/app/error/error.component.ts b/ui/src/app/error/error.component.ts
new file mode 100644
index 000000000..4c81fe943
--- /dev/null
+++ b/ui/src/app/error/error.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './error.component.html'
+})
+export class ErrorComponent {
+
+}
diff --git a/ui/src/app/shared/model/error.model.ts b/ui/src/app/error/model/error.model.ts
similarity index 52%
rename from ui/src/app/shared/model/error.model.ts
rename to ui/src/app/error/model/error.model.ts
index d533df40f..77825e9f1 100644
--- a/ui/src/app/shared/model/error.model.ts
+++ b/ui/src/app/error/model/error.model.ts
@@ -5,3 +5,11 @@ export class AppError {
     public i18nKey: string | null
   ) {}
 }
+
+export class ErrorAlert {
+  constructor(
+    public type: 'danger',
+    public msg: string,
+    public toast: boolean
+  ) {}
+}
\ No newline at end of file
diff --git a/ui/src/app/shared/service/error.service.ts b/ui/src/app/error/service/error.service.ts
similarity index 100%
rename from ui/src/app/shared/service/error.service.ts
rename to ui/src/app/error/service/error.service.ts
diff --git a/ui/src/app/shared/error/error-alert.component.scss b/ui/src/app/shared/error/error-alert.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ui/src/app/shared/model/error-alert.ts b/ui/src/app/shared/model/error-alert.ts
deleted file mode 100644
index 396582898..000000000
--- a/ui/src/app/shared/model/error-alert.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { EventType } from 'src/app/app.constants'
-
-export class ErrorAlert {
-  constructor(
-    public type: 'danger',
-    public msg: string,
-    public toast: boolean
-  ) {}
-}
diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts
index d58e8ae35..4913b66a7 100644
--- a/ui/src/app/shared/shared.module.ts
+++ b/ui/src/app/shared/shared.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core'
 import { FindLanguageFromKeyPipe } from './pipe/find-language-from-key'
-import { ErrorAlertComponent } from './error/error-alert.component'
+import { ErrorAlertComponent } from '../error/error-alert.component'
 import { CommonModule } from '@angular/common'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 

From 1c31b5741c008768d2949396e1ade06d7e175d13 Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Wed, 10 Jan 2024 18:24:54 +0200
Subject: [PATCH 2/3] add error page for invalid urls

---
 ui/src/app/app-routing.module.ts          |  3 +-
 ui/src/app/error/error-alert.component.ts |  1 -
 ui/src/app/error/error.component.html     | 18 +++++++++++-
 ui/src/app/error/error.component.spec.ts  |  2 ++
 ui/src/app/error/error.component.ts       | 24 +++++++++++++--
 ui/src/app/error/error.route.ts           | 36 +++++++++++++++++++++++
 6 files changed, 79 insertions(+), 5 deletions(-)
 create mode 100644 ui/src/app/error/error.route.ts

diff --git a/ui/src/app/app-routing.module.ts b/ui/src/app/app-routing.module.ts
index 07f851645..c4fb2f2a4 100644
--- a/ui/src/app/app-routing.module.ts
+++ b/ui/src/app/app-routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { RouterModule, Routes } from '@angular/router'
 import { navbarRoute } from './layout/navbar/navbar.route'
+import { errorRoutes } from './error/error.route'
 
 const routes: Routes = [
   {
@@ -14,7 +15,7 @@ const routes: Routes = [
 ]
 
 @NgModule({
-  imports: [RouterModule.forRoot([...routes, navbarRoute])],
+  imports: [RouterModule.forRoot([...routes, ...errorRoutes, navbarRoute])],
   exports: [RouterModule],
 })
 export class AppRoutingModule {}
diff --git a/ui/src/app/error/error-alert.component.ts b/ui/src/app/error/error-alert.component.ts
index 426e9053a..c0ac12e53 100644
--- a/ui/src/app/error/error-alert.component.ts
+++ b/ui/src/app/error/error-alert.component.ts
@@ -18,7 +18,6 @@ export class ErrorAlertComponent implements OnInit {
 
   ngOnInit(): void {
     this.sub = this.errorService.on().subscribe((err: AppError) => {
-      const alerts = [...this.alerts]
       const alert: ErrorAlert = {
         type: 'danger',
         msg: err.message,
diff --git a/ui/src/app/error/error.component.html b/ui/src/app/error/error.component.html
index 27d6bed7a..8cfd83ef3 100644
--- a/ui/src/app/error/error.component.html
+++ b/ui/src/app/error/error.component.html
@@ -1 +1,17 @@
-<p>error works!</p>
+<div class="container">
+  <div class="row">
+    <div class="col-md-12 mt-4">
+      <h1 jhiTranslate="error.title.string" class="mb-3.string">Your request cannot be processed</h1>
+
+      <div [hidden]="!errorMessage">
+        <div class="alert alert-danger">{{ errorMessage }}</div>
+      </div>
+      <div [hidden]="!error403" class="alert alert-danger" jhiTranslate="error.http.403.string">
+        You are not authorized to access this page.
+      </div>
+      <div [hidden]="!error404" class="alert alert-danger" jhiTranslate="error.http.404.string">
+        The page does not exist.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/ui/src/app/error/error.component.spec.ts b/ui/src/app/error/error.component.spec.ts
index bfc85b143..7df37e3cb 100644
--- a/ui/src/app/error/error.component.spec.ts
+++ b/ui/src/app/error/error.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ErrorComponent } from './error.component';
+import { AppModule } from '../app.module';
 
 describe('ErrorComponent', () => {
   let component: ErrorComponent;
@@ -8,6 +9,7 @@ describe('ErrorComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [AppModule],
       declarations: [ErrorComponent]
     });
     fixture = TestBed.createComponent(ErrorComponent);
diff --git a/ui/src/app/error/error.component.ts b/ui/src/app/error/error.component.ts
index 4c81fe943..2d9f6cd8d 100644
--- a/ui/src/app/error/error.component.ts
+++ b/ui/src/app/error/error.component.ts
@@ -1,9 +1,29 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AccountService } from '../account';
 
 @Component({
   selector: 'app-error',
   templateUrl: './error.component.html'
 })
-export class ErrorComponent {
+export class ErrorComponent implements OnInit {
+  errorMessage: string | undefined;
+  error403: boolean | undefined;
+  error404: boolean | undefined;
 
+  constructor(private route: ActivatedRoute, private accountService: AccountService) {}
+
+  ngOnInit() {
+    this.route.data.subscribe(routeData => {
+      if (routeData['error403']) {
+        this.error403 = routeData['error403'];
+      }
+      if (routeData['error404']) {
+        this.error404 = routeData['error404'];
+      }
+      if (routeData['errorMessage']) {
+        this.errorMessage = routeData['errorMessage'];
+      }
+    });
+  }
 }
diff --git a/ui/src/app/error/error.route.ts b/ui/src/app/error/error.route.ts
new file mode 100644
index 000000000..15fe90591
--- /dev/null
+++ b/ui/src/app/error/error.route.ts
@@ -0,0 +1,36 @@
+import { Routes } from '@angular/router';
+
+import { ErrorComponent } from './error.component';
+
+export const errorRoutes: Routes = [
+  {
+    path: 'error',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string'
+    }
+  },
+  {
+    path: 'accessdenied',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error403: true
+    }
+  },
+  {
+    path: '404',
+    component: ErrorComponent,
+    data: {
+      authorities: [],
+      pageTitle: 'error.title.string',
+      error404: true
+    }
+  },
+  {
+    path: '**',
+    redirectTo: '/404'
+  }
+];

From 936693d580772eecac655d8fd70c6a105116e37c Mon Sep 17 00:00:00 2001
From: andrej romanov <50377758+auumgn@users.noreply.github.com>
Date: Wed, 10 Jan 2024 18:28:13 +0200
Subject: [PATCH 3/3] replace jhitranslate with i18n

---
 ui/src/app/error/error.component.html | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/src/app/error/error.component.html b/ui/src/app/error/error.component.html
index 8cfd83ef3..38061984d 100644
--- a/ui/src/app/error/error.component.html
+++ b/ui/src/app/error/error.component.html
@@ -1,17 +1,15 @@
 <div class="container">
   <div class="row">
     <div class="col-md-12 mt-4">
-      <h1 jhiTranslate="error.title.string" class="mb-3.string">Your request cannot be processed</h1>
+      <h1 i18n="@@error.title.string" class="mb-3.string">Your request cannot be processed</h1>
 
       <div [hidden]="!errorMessage">
         <div class="alert alert-danger">{{ errorMessage }}</div>
       </div>
-      <div [hidden]="!error403" class="alert alert-danger" jhiTranslate="error.http.403.string">
+      <div [hidden]="!error403" class="alert alert-danger" i18n="@@error.http.403.string">
         You are not authorized to access this page.
       </div>
-      <div [hidden]="!error404" class="alert alert-danger" jhiTranslate="error.http.404.string">
-        The page does not exist.
-      </div>
+      <div [hidden]="!error404" class="alert alert-danger" i18n="@@error.http.404.string">The page does not exist.</div>
     </div>
   </div>
 </div>