Merge pull request 'dev' (#42) from dev into main

Reviewed-on: #42

frontend/src/app/app.config.ts

@@ -1,26 +1,48 @@
 import {
   ApplicationConfig,
+  provideAppInitializer,
   provideZoneChangeDetection,
   importProvidersFrom,
+  inject,
+  REQUEST,
 } from '@angular/core';
 import {
   provideRouter,
   withComponentInputBinding,
   withInMemoryScrolling,
   withViewTransitions,
+  Router,
 } from '@angular/router';
 import { routes } from './app.routes';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
-import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import {
-  provideTranslateHttpLoader,
-  TranslateHttpLoader,
-} from '@ngx-translate/http-loader';
+  TranslateLoader,
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
 import { adminAuthInterceptor } from './core/interceptors/admin-auth.interceptor';
 import {
   provideClientHydration,
   withEventReplay,
 } from '@angular/platform-browser';
+import { serverOriginInterceptor } from './core/interceptors/server-origin.interceptor';
+import { catchError, firstValueFrom, of } from 'rxjs';
+import { StaticTranslateLoader } from './core/i18n/static-translate.loader';
+
+type SupportedLang = 'it' | 'en' | 'de' | 'fr';
+const SUPPORTED_LANGS: readonly SupportedLang[] = ['it', 'en', 'de', 'fr'];
+
+function resolveLangFromUrl(url: string): SupportedLang {
+  const firstSegment = (url || '/')
+    .split('?')[0]
+    .split('#')[0]
+    .split('/')
+    .filter(Boolean)[0]
+    ?.toLowerCase();
+  return SUPPORTED_LANGS.includes(firstSegment as SupportedLang)
+    ? (firstSegment as SupportedLang)
+    : 'it';
+}
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -33,20 +55,44 @@ export const appConfig: ApplicationConfig = {
         scrollPositionRestoration: 'top',
       }),
     ),
-    provideHttpClient(withInterceptors([adminAuthInterceptor])),
-    provideTranslateHttpLoader({
-      prefix: './assets/i18n/',
-      suffix: '.json',
-    }),
+    provideHttpClient(
+      withInterceptors([serverOriginInterceptor, adminAuthInterceptor]),
+    ),
     importProvidersFrom(
       TranslateModule.forRoot({
         defaultLanguage: 'it',
         loader: {
           provide: TranslateLoader,
-          useClass: TranslateHttpLoader,
+          useClass: StaticTranslateLoader,
         },
       }),
     ),
+    provideAppInitializer(() => {
+      const translate = inject(TranslateService);
+      const router = inject(Router);
+      const request = inject(REQUEST, { optional: true }) as {
+        url?: string;
+      } | null;
+
+      translate.addLangs([...SUPPORTED_LANGS]);
+      translate.setDefaultLang('it');
+      const requestedUrl =
+        (typeof request?.url === 'string' && request.url) || router.url || '/';
+      const lang = resolveLangFromUrl(requestedUrl);
+
+      return firstValueFrom(
+        translate.use(lang).pipe(
+          catchError((error) => {
+            console.error('[i18n] Failed to preload language for SSR', {
+              lang,
+              requestedUrl,
+              error,
+            });
+            return of({});
+          }),
+        ),
+      ).then(() => undefined);
+    }),
     provideClientHydration(withEventReplay()),
   ],
 };

frontend/src/app/core/i18n/static-translate.loader.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { TranslateLoader, TranslationObject } from '@ngx-translate/core';
+import { Observable, of } from 'rxjs';
+import de from '../../../assets/i18n/de.json';
+import en from '../../../assets/i18n/en.json';
+import fr from '../../../assets/i18n/fr.json';
+import it from '../../../assets/i18n/it.json';
+
+const TRANSLATIONS: Record<string, TranslationObject> = {
+  it: it as TranslationObject,
+  en: en as TranslationObject,
+  de: de as TranslationObject,
+  fr: fr as TranslationObject,
+};
+
+@Injectable()
+export class StaticTranslateLoader implements TranslateLoader {
+  getTranslation(lang: string): Observable<TranslationObject> {
+    const normalized = String(lang || 'it').toLowerCase();
+    return of(TRANSLATIONS[normalized] ?? TRANSLATIONS['it']);
+  }
+}

frontend/src/app/core/interceptors/server-origin.interceptor.ts

@@ -0,0 +1,63 @@
+import { HttpInterceptorFn } from '@angular/common/http';
+import { inject, REQUEST } from '@angular/core';
+
+type RequestLike = {
+  protocol?: string;
+  get?: (name: string) => string | undefined;
+  headers?: Record<string, string | string[] | undefined>;
+};
+
+function isAbsoluteUrl(url: string): boolean {
+  return /^[a-z][a-z\d+\-.]*:/i.test(url) || url.startsWith('//');
+}
+
+function firstHeaderValue(value: string | string[] | undefined): string | null {
+  if (Array.isArray(value)) {
+    return value[0] ?? null;
+  }
+  return typeof value === 'string' ? value : null;
+}
+
+function resolveOrigin(request: RequestLike | null): string | null {
+  if (!request) {
+    return null;
+  }
+
+  const host =
+    request.get?.('host') ??
+    firstHeaderValue(request.headers?.['host']) ??
+    firstHeaderValue(request.headers?.['x-forwarded-host']);
+  if (!host) {
+    return null;
+  }
+
+  const forwardedProtoRaw = firstHeaderValue(
+    request.headers?.['x-forwarded-proto'],
+  );
+  const forwardedProto = forwardedProtoRaw
+    ?.split(',')
+    .map((part) => part.trim().toLowerCase())
+    .find(Boolean);
+  const protocol = forwardedProto || request.protocol || 'http';
+  return `${protocol}://${host}`;
+}
+
+function normalizeRelativePath(url: string): string {
+  const withoutDot = url.replace(/^\.\//, '');
+  return withoutDot.startsWith('/') ? withoutDot : `/${withoutDot}`;
+}
+
+export const serverOriginInterceptor: HttpInterceptorFn = (req, next) => {
+  if (isAbsoluteUrl(req.url)) {
+    return next(req);
+  }
+
+  const request = inject(REQUEST, { optional: true }) as RequestLike | null;
+  const origin = resolveOrigin(request);
+  if (!origin) {
+    return next(req);
+  }
+
+  const absoluteUrl = `${origin}${normalizeRelativePath(req.url)}`;
+  return next(req.clone({ url: absoluteUrl }));
+};

frontend/src/index.html

@@ -19,6 +19,7 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
+    <meta name="msvalidate.01" content="5AF60C1471E1800B39DF4DBC3C709035" />
   </head>
   <body>
     <app-root></app-root>

frontend/tsconfig.json

@@ -14,6 +14,7 @@
     "esModuleInterop": true,
     "experimentalDecorators": true,
     "moduleResolution": "bundler",
+    "resolveJsonModule": true,
     "importHelpers": true,
     "target": "ES2022",
     "module": "ES2022"