chore: interpolate translations

medic · Nov 4, 2024 · 8fee9e8 · 8fee9e8
1 parent 9d1c055
commit 8fee9e8
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/api/src/controllers/login.js b/api/src/controllers/login.js
@@ -346,7 +346,7 @@ const validatePassword = (password, confirmPassword) => {
     return {
       isValid: false,
       error: 'short',
-      params: { minimum: PASSWORD_MINIMUM_LENGTH}
+      params: { minimum: PASSWORD_MINIMUM_LENGTH }
     };
   }
 

diff --git a/api/src/public/login/auth-utils.js b/api/src/public/login/auth-utils.js
@@ -52,13 +52,38 @@ export const parseTranslations = function() {
     return JSON.parse(decodeURIComponent(raw));
 };
 
+const replaceTranslationPlaceholders = (text, translateValues) => {
+    if (!text || !translateValues) {
+        return text;
+    }
+
+    try {
+        const values = JSON.parse(translateValues);
+        console.log(values);
+        return Object.entries(values).reduce((result, [key, value]) =>
+            result.replace(new RegExp(`{{${key}}}`, 'g'), value),
+            text
+        );
+    } catch (e) {
+        console.error('Error parsing translation placeholders', e);
+        return text;
+    }
+}
+
 export const baseTranslate = (selectedLocale, translations) => {
     if (!selectedLocale) {
         return console.error('No enabled locales found - not translating');
     }
     document
         .querySelectorAll('[translate]')
-        .forEach(elem => elem.innerText = translations[selectedLocale][elem.getAttribute('translate')]);
+        .forEach(elem => {
+            let text = translations[selectedLocale][elem.getAttribute('translate')];
+            const translateValues = elem.getAttribute('translate-values');
+            if (translateValues) {
+                text = replaceTranslationPlaceholders(text, translateValues);
+            }
+            elem.innerText = text;
+        });
     document
         .querySelectorAll('[translate-title]')
         .forEach(elem => elem.title = translations[selectedLocale][elem.getAttribute('translate-title')]);

diff --git a/api/src/public/login/password-reset.js b/api/src/public/login/password-reset.js
@@ -31,8 +31,12 @@ const displayPasswordValidationError = (serverResponse) => {
     const { error, params } = JSON.parse(serverResponse);
     setState(error);
 
-    if (params) {
-        //add translate values param
+    if (params?.minimum) {
+        const passwordError = document.querySelector('.error.password-short');
+        if (passwordError) {
+            passwordError.setAttribute('translate-values', JSON.stringify(params));
+            baseTranslate(selectedLocale, translations);
+        }
     }
 };