feat(translation): added translation verification, closes #3317

Author: thorsten

phpmyfaq/admin/assets/src/dashboard.ts

@@ -16,9 +16,9 @@
 import Masonry from 'masonry-layout';
 import { Chart, registerables } from 'chart.js';
 import { getRemoteHashes, verifyHashes } from './api';
-import { addElement } from '../../../assets/src/utils';
+import { addElement, TranslationService } from '../../../assets/src/utils';
 
-export const renderVisitorCharts = async () => {
+export const renderVisitorCharts = async (): Promise<void> => {
   const context = document.getElementById('pmf-chart-visits') as HTMLCanvasElement | null;
 
   if (context) {
@@ -63,15 +63,12 @@ export const renderVisitorCharts = async () => {
               display: true,
               text: 'Visitors',
             },
-            ticks: {
-              beginAtZero: true,
-            },
           },
         },
       },
     });
 
-    const getData = async () => {
+    const getData = async (): Promise<void> => {
       try {
         const response = await fetch('./api/dashboard/visits', {
           method: 'GET',
@@ -102,7 +99,7 @@ export const renderVisitorCharts = async () => {
   }
 };
 
-export const renderTopTenCharts = async () => {
+export const renderTopTenCharts = async (): Promise<void> => {
   const context = document.getElementById('pmf-chart-topten') as HTMLCanvasElement | null;
 
   if (context) {
@@ -150,22 +147,19 @@ export const renderTopTenCharts = async () => {
             title: {
               display: false,
             },
-            ticks: {
-              beginAtZero: true,
-            },
           },
         },
       },
     });
 
     const dynamicColors = (): string => {
-      const r = Math.floor(Math.random() * 255);
-      const g = Math.floor(Math.random() * 255);
-      const b = Math.floor(Math.random() * 255);
+      const r: number = Math.floor(Math.random() * 255);
+      const g: number = Math.floor(Math.random() * 255);
+      const b: number = Math.floor(Math.random() * 255);
       return 'rgb(' + r + ',' + g + ',' + b + ')';
     };
 
-    const getData = async () => {
+    const getData = async (): Promise<void> => {
       try {
         const response = await fetch('./api/dashboard/topten', {
           method: 'GET',
@@ -180,7 +174,7 @@ export const renderTopTenCharts = async () => {
         if (response.status === 200) {
           const topTen: { question: string; visits: number }[] = await response.json();
 
-          topTen.forEach((faq) => {
+          topTen.forEach((faq: { question: string; visits: number }): void => {
             doughnutChart.data.labels!.push(faq.question);
             doughnutChart.data.datasets[0].data.push(faq.visits);
             colors.push(dynamicColors());
@@ -197,9 +191,9 @@ export const renderTopTenCharts = async () => {
   }
 };
 
-export const getLatestVersion = async () => {
-  const loader = document.getElementById('version-loader');
-  const versionText = document.getElementById('phpmyfaq-latest-version');
+export const getLatestVersion = async (): Promise<void> => {
+  const loader = document.getElementById('version-loader') as HTMLDivElement;
+  const versionText = document.getElementById('phpmyfaq-latest-version') as HTMLDivElement;
 
   if (loader && versionText) {
     loader.classList.remove('d-none');
@@ -263,28 +257,31 @@ export const getLatestVersion = async () => {
   }
 };
 
-export const handleVerificationModal = async () => {
-  const verificationModal = document.getElementById('verificationModal');
+export const handleVerificationModal = async (): Promise<void> => {
+  const verificationModal = document.getElementById('verificationModal') as HTMLDivElement;
+  const Translator = new TranslationService();
   if (verificationModal) {
-    verificationModal.addEventListener('show.bs.modal', async () => {
-      const spinner = document.getElementById('pmf-verification-spinner');
-      const version = verificationModal.getAttribute('data-pmf-current-version');
-      const updates = document.getElementById('pmf-verification-updates');
+    verificationModal.addEventListener('show.bs.modal', async (): Promise<void> => {
+      const spinner = document.getElementById('pmf-verification-spinner') as HTMLDivElement;
+      const version = verificationModal.getAttribute('data-pmf-current-version') as string;
+      const updates = document.getElementById('pmf-verification-updates') as HTMLDivElement;
+      const language: string = document.documentElement.lang;
+      await Translator.loadTranslations(language);
       if (spinner && updates && version) {
         spinner.classList.remove('d-none');
-        updates.innerText = 'Fetching verification hashes from api.phpmyfaq.de...';
-        const remoteHashes = await getRemoteHashes(version);
-        updates.innerText = 'Checking hashes with installation files...';
+        updates.innerText = Translator.translate('msgFetchingHashes');
+        const remoteHashes = (await getRemoteHashes(version)) as Record<string, string>;
+        updates.innerText = Translator.translate('msgCheckHashes');
         const issues = await verifyHashes(remoteHashes);
 
         if (typeof issues !== 'object') {
           console.error('Invalid JSON data provided.');
         }
 
-        const ul = document.createElement('ul');
+        const ul = document.createElement('ul') as HTMLUListElement;
         for (const [filename, hashValue] of Object.entries(issues)) {
-          const li = document.createElement('li');
-          li.textContent = `Filename: ${filename}, Hash Value: ${hashValue}`;
+          const li = document.createElement('li') as HTMLLIElement;
+          li.textContent = `${Translator.translate('msgAttachmentsFilename')}: ${filename}, Hash: ${hashValue}`;
           ul.appendChild(li);
         }
 
@@ -295,8 +292,8 @@ export const handleVerificationModal = async () => {
   }
 };
 
-window.onload = () => {
-  const masonryElement = document.querySelector('.masonry-grid');
+window.onload = (): void => {
+  const masonryElement = document.querySelector('.masonry-grid') as HTMLElement;
   if (masonryElement) {
     new Masonry(masonryElement, { columnWidth: 0 });
   }

phpmyfaq/assets/src/api/translations.test.ts

@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { fetchTranslations } from './translations';
+import createFetchMock, { FetchMock } from 'vitest-fetch-mock';
+
+const fetchMocker: FetchMock = createFetchMock(vi);
+
+fetchMocker.enableMocks();
+
+describe('fetchTranslations', () => {
+  beforeEach(() => {
+    fetchMocker.resetMocks();
+  });
+
+  test('should return translations when the response is successful', async (): Promise<void> => {
+    const mockTranslations = { hello: 'Hello', goodbye: 'Goodbye' };
+
+    fetchMocker.mockResponseOnce(JSON.stringify(mockTranslations));
+
+    const locale = 'en';
+    const data: Record<string, string> = await fetchTranslations(locale);
+
+    expect(data).toEqual(mockTranslations);
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(`/api/translations/${locale}`, {
+      method: 'GET',
+      cache: 'no-cache',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      redirect: 'follow',
+      referrerPolicy: 'no-referrer',
+    });
+  });
+
+  test('should throw an error when the response is not successful', async (): Promise<void> => {
+    fetchMocker.mockResponseOnce(null, { status: 500 });
+
+    const locale = 'en';
+
+    await expect(fetchTranslations(locale)).rejects.toThrow('Unexpected end of JSON input');
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(fetch).toHaveBeenCalledWith(`/api/translations/${locale}`, {
+      method: 'GET',
+      cache: 'no-cache',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      redirect: 'follow',
+      referrerPolicy: 'no-referrer',
+    });
+  });
+
+  test('should handle fetch error', async (): Promise<void> => {
+    fetchMocker.mockRejectOnce(new Error('API is down'));
+
+    const locale = 'en';
+
+    await expect(fetchTranslations(locale)).rejects.toThrow('API is down');
+    expect(fetch).toHaveBeenCalledTimes(1);
+  });
+});

phpmyfaq/assets/src/api/translations.ts

@@ -0,0 +1,28 @@
+/**
+ * Private Translations API functionality
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public License,
+ * v. 2.0. If a copy of the MPL was not distributed with this file, You can
+ * obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * @package   phpMyFAQ
+ * @author    Thorsten Rinne <[email protected]>
+ * @copyright 2025 phpMyFAQ Team
+ * @license   https://www.mozilla.org/MPL/2.0/ Mozilla Public License Version 2.0
+ * @link      https://www.phpmyfaq.de
+ * @since     2025-03-17
+ */
+
+export const fetchTranslations = async (locale: string): Promise<Record<string, string>> => {
+  const response: Response = await fetch(`/api/translations/${locale}`, {
+    method: 'GET',
+    cache: 'no-cache',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    redirect: 'follow',
+    referrerPolicy: 'no-referrer',
+  });
+
+  return response.json();
+};

phpmyfaq/assets/src/utils/TranslationService.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test, vi, beforeEach, Mock } from 'vitest';
+import { TranslationService } from './TranslationService';
+import { fetchTranslations } from '../api/translations';
+
+vi.mock('../api/translations', () => ({
+  fetchTranslations: vi.fn(),
+}));
+
+describe('TranslationService', (): void => {
+  let service: TranslationService;
+
+  beforeEach((): void => {
+    service = new TranslationService();
+  });
+
+  test('should load translations successfully', async (): Promise<void> => {
+    const mockTranslations = { hello: 'Hello', goodbye: 'Goodbye' };
+    (fetchTranslations as Mock).mockResolvedValue(mockTranslations);
+
+    await service.loadTranslations('en');
+
+    expect(fetchTranslations).toHaveBeenCalledWith('en');
+    expect(service.translate('hello')).toBe('Hello');
+    expect(service.translate('goodbye')).toBe('Goodbye');
+  });
+
+  test('should handle error when loading translations', async (): Promise<void> => {
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation((): void => {});
+    (fetchTranslations as Mock).mockRejectedValue(new Error('Failed to fetch'));
+
+    await service.loadTranslations('en');
+
+    expect(fetchTranslations).toHaveBeenCalledWith('en');
+    expect(consoleErrorSpy).toHaveBeenCalledWith('Failed to load translations:', expect.any(Error));
+    expect(service.translate('hello')).toBe('hello');
+
+    consoleErrorSpy.mockRestore();
+  });
+
+  test('should return key if translation is not found', (): void => {
+    expect(service.translate('nonexistent')).toBe('nonexistent');
+  });
+});

phpmyfaq/assets/src/utils/TranslationService.ts

@@ -0,0 +1,19 @@
+import { fetchTranslations } from '../api/translations';
+
+export class TranslationService {
+  private translations: Record<string, string> = {};
+
+  // Load translations from JSON
+  async loadTranslations(locale: string): Promise<void> {
+    try {
+      this.translations = await fetchTranslations(locale);
+    } catch (error) {
+      console.error('Failed to load translations:', error);
+    }
+  }
+
+  // Get translated string by key
+  translate(key: string): string {
+    return this.translations[key] || key;
+  }
+}

phpmyfaq/assets/src/utils/index.ts

@@ -4,3 +4,4 @@ export * from './notifications';
 export * from './password';
 export * from './reading-time';
 export * from './tooltip';
+export * from './TranslationService';

phpmyfaq/translations/language_de.php

@@ -1476,5 +1476,7 @@
 $PMF_LANG['msgImageCouldNotBeUploaded'] = 'Das Bild konnte nicht hochgeladen werden.';
 $PMF_LANG['msgImageTooLarge'] = 'Das Bild ist zu groß.';
 $PMF_LANG['msgNoImagesForUpload'] = 'Es gibt keine Bilder zum Hochladen.';
+$PMF_LANG['msgFetchingHashes'] = 'Lade Verifikationsdaten von api.phpmyfaq.de ...';
+$PMF_LANG['msgCheckHashes'] = 'Überprüfe Hash-Werte der installierten Dateien ...';
 
 return $PMF_LANG;

phpmyfaq/translations/language_en.php

@@ -1495,5 +1495,7 @@
 $PMF_LANG['msgImageCouldNotBeUploaded'] = 'The image could not be uploaded.';
 $PMF_LANG['msgImageTooLarge'] = 'The image is too large.';
 $PMF_LANG['msgNoImagesForUpload'] = 'No images for upload.';
+$PMF_LANG['msgFetchingHashes'] = 'Fetching verification hashes from api.phpmyfaq.de...';
+$PMF_LANG['msgCheckHashes'] = 'Checking hashes with installation files...';
 
 return $PMF_LANG;

phpmyfaq/translations/language_es.php

@@ -1428,5 +1428,7 @@
 $PMF_LANG['msgImageCouldNotBeUploaded'] = 'No se pudo subir la imagen.';
 $PMF_LANG['msgImageTooLarge'] = 'La imagen es demasiado grande.';
 $PMF_LANG['msgNoImagesForUpload'] = 'No hay imágenes para subir.';
+$PMF_LANG['msgFetchingHashes'] = 'Obteniendo hashes de verificación de api.phpmyfaq.de...';
+$PMF_LANG['msgCheckHashes'] = 'Verificando hashes con los archivos de instalación...';
 
 return $PMF_LANG;