inverse http code with string "error" in en

Author: EmmanuelLefevre

src/app/shared/error-handler/error-handler.component.html

@@ -3,8 +3,10 @@ <h1 class="error-view__title">
     {{ 'PAGES.ERROR.NOT_FOUND.TITLE' | translate }}
   </h1>
 
-  <h3 class="error-view__code">
-    {{ 'PAGES.ERROR.NOT_FOUND.LABEL' | translate }}
+  <h3
+    class="error-view__code"
+    [class.is-english]="translate.getCurrentLang() === 'en'">
+    <span class="error-view__label">{{ 'PAGES.ERROR.NOT_FOUND.LABEL' | translate }}</span>
     <span class="error-view__code-value">{{ code() }}</span>
   </h3>
 

src/app/shared/error-handler/error-handler.component.scss

@@ -19,13 +19,22 @@
   }
 
   &__code {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
     color: var(--text-black-color);
     font-size: var(--font-size-h3);
     margin-bottom: 2rem;
+
     &-value {
       color: var(--text-primary-color);
       font-weight: var(--font-weight-bold);
     }
+
+    &.is-english {
+      flex-direction: row-reverse;
+    }
   }
 
   &__content {

src/app/shared/error-handler/error-handler.component.spec.ts

@@ -276,6 +276,18 @@ describe('ErrorHandlerComponent', () => {
       // --- ASSERT ---
       expect(component.code()).toBe('500');
     });
+
+    it('should set code to empty string if URL does not match any known error pattern', () => {
+      // --- ARRANGE ---
+      Object.defineProperty(router, 'url', { value: '/error/unknown-path', configurable: true });
+      queryParams$.next({});
+
+      // --- ACT ---
+      fixture.detectChanges();
+
+      // --- ASSERT ---
+      expect(component.code()).toBe('');
+    });
   });
 
   describe('UI & Navigation Actions', () => {
@@ -395,5 +407,27 @@ describe('ErrorHandlerComponent', () => {
       expect(buttonComponent.label()).toBe('Login');
       expect(buttonComponent.ariaLabel()).toBe('Button to open the login form');
     });
+
+    it('should apply "is-english" class to the code container when language is English', () => {
+      // --- ACT ---
+      translate.use('en');
+      fixture.detectChanges();
+
+      const codeContainer = fixture.debugElement.query(By.css('.error-view__code'));
+
+      // --- ASSERT ---
+      expect(codeContainer.nativeElement.classList.contains('is-english')).toBe(true);
+    });
+
+    it('should NOT apply "is-english" class when language is French', () => {
+      // --- ACT ---
+      translate.use('fr');
+      fixture.detectChanges();
+
+      const codeContainer = fixture.debugElement.query(By.css('.error-view__code'));
+
+      // --- ASSERT ---
+      expect(codeContainer.nativeElement.classList.contains('is-english')).toBe(false);
+    });
   });
 });

src/app/shared/error-handler/error-handler.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, OnInit, inject, signal, DestroyRef, ChangeDetectorRef } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 
-import { MainButtonComponent } from '../shared';
+import { MainButtonComponent } from '@shared';
 
 @Component({
   selector: 'error-handler',
@@ -25,6 +25,7 @@ export class ErrorHandlerComponent implements OnInit {
   private readonly router = inject(Router);
 
   public readonly code = signal<string>('');
+  public readonly translate = inject(TranslateService);
 
   ngOnInit(): void {
     this.route.queryParams.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {