underpost 3.2.4 → 3.2.8

package/src/client/components/core/ToggleSwitch.js

@@ -1,28 +1,22 @@
 import { getId } from './CommonJs.js';
 import { loggerFactory } from './Logger.js';
 import { htmls, s } from './VanillaJs.js';
-
 const logger = loggerFactory(import.meta);
-
-const ToggleSwitch = {
-  Tokens: {},
-  Render: async function (options) {
-    const id = options?.id ? options.id : getId(this.Tokens, 'toggle-switch-');
-    this.Tokens[id] = {};
-
+class ToggleSwitch {
+  static Tokens = {};
+  static async instance(options) {
+    const id = options?.id ? options.id : getId(ToggleSwitch.Tokens, 'toggle-switch-');
+    ToggleSwitch.Tokens[id] = {};
     const widthContent = 60;
     const widthCircle = 20;
-
     setTimeout(() => {
       switch (options.displayMode) {
         case 'checkbox':
           break;
-
         default:
           s(`.${id}-circle`).style.left = `0px`;
           break;
       }
-
       const onToggle = () => {
         switch (options.displayMode) {
           case 'checkbox':
@@ -49,22 +43,17 @@ const ToggleSwitch = {
         s(`.${id}-checkbox`).checked = false;
         options?.on?.unchecked ? options.on.unchecked() : null;
       };
-
       const onClickEvent = () => {
         s(`.${id}-checkbox`).checked ? offToggle() : onToggle();
         logger.info(id, s(`.${id}-checkbox`).checked);
       };
-
-      this.Tokens[id].click = onClickEvent;
-
+      ToggleSwitch.Tokens[id].click = onClickEvent;
       if (!options.disabledOnClick) s(`.${id}`).onclick = onClickEvent;
-
       setTimeout(() => {
         options?.checked ? onToggle() : null;
         logger.info(id, s(`.${id}-checkbox`).checked);
       });
     });
-
     if (options.type === 'checkbox') {
     }
     const htmlRender = html`
@@ -95,7 +84,6 @@ const ToggleSwitch = {
       `;
     }
     return htmlRender;
-  },
-};
-
+  }
+}
 export { ToggleSwitch };

package/src/client/components/core/ToolTip.js

@@ -1,14 +1,12 @@
 import { renderCssAttr } from './Css.js';
 import { append, s } from './VanillaJs.js';
 import { Modal } from './Modal.js';
-
-const ToolTip = {
-  Tokens: {},
-  Render: async function (
+class ToolTip {
+  static Tokens = {};
+  static async instance(
     options = { container: '', htmlRender: '', id: '', classList: '', useVisibilityHover: false, useMenuBtn: false },
   ) {
     const { container, htmlRender, id, useVisibilityHover } = options;
-
     if (useVisibilityHover) {
       const tooltipId = 'tooltip-' + id;
       append(
@@ -27,10 +25,8 @@ const ToolTip = {
       );
       return;
     }
-
     const containerEl = s(container);
     if (!containerEl) return;
-
     const tooltipId = `tooltip-${id}`;
     const tooltip = html`
       <div
@@ -49,9 +45,7 @@ const ToolTip = {
       </div>
     `;
     append('body', tooltip);
-
     const tooltipEl = s(`.${tooltipId}`);
-
     containerEl.addEventListener('mouseenter', () => {
       if (
         options.useMenuBtn &&
@@ -60,13 +54,10 @@ const ToolTip = {
         ).classList.contains('hide')
       )
         return;
-
       const containerRect = containerEl.getBoundingClientRect();
       const tooltipRect = tooltipEl.getBoundingClientRect();
-
       let top = containerRect.bottom + window.scrollY + 5;
       let left = containerRect.left + window.scrollX + containerRect.width / 2 - tooltipRect.width / 2;
-
       // Adjust if it goes off-screen
       if (left < 0) left = 5;
       if (left + tooltipRect.width > window.innerWidth) {
@@ -75,16 +66,13 @@ const ToolTip = {
       if (top + tooltipRect.height > window.innerHeight) {
         top = containerRect.top + window.scrollY - tooltipRect.height - 5;
       }
-
       tooltipEl.style.top = `${top}px`;
       tooltipEl.style.left = `${left}px`;
       tooltipEl.style.opacity = '1';
     });
-
     containerEl.addEventListener('mouseleave', () => {
       tooltipEl.style.opacity = '0';
     });
-  },
-};
-
+  }
+}
 export { ToolTip };

package/src/client/components/core/Translate.js

@@ -1,47 +1,61 @@
 import { newInstance, getId, cap, capFirst } from './CommonJs.js';
+import { TranslateEventType, translateEvents } from './ClientEvents.js';
 import { DropDown } from './DropDown.js';
 import { loggerFactory } from './Logger.js';
 import { s, htmls, getLang } from './VanillaJs.js';
-
 const logger = loggerFactory(import.meta);
-
 const textFormatted = (str = '&nbsp &nbsp . . .') => capFirst(str.toLowerCase());
-
-const Translate = {
-  Data: {},
-  Token: {},
-  Event: {},
-  Options: {},
-  Parse: function (lang) {
+class Translate {
+  static Data = {};
+  static Token = {};
+  static Event = {};
+  static Options = {};
+  static Parse(lang) {
     s('html').lang = lang;
-    Object.keys(this.Token).map((translateHash) => {
-      if (translateHash in this.Token && lang in this.Token[translateHash]) {
-        if (!('placeholder' in this.Options[translateHash]) && s(`.${translateHash}`))
+    Object.keys(Translate.Token).map((translateHash) => {
+      if (translateHash in Translate.Token && lang in Translate.Token[translateHash]) {
+        if (!('placeholder' in Translate.Options[translateHash]) && s(`.${translateHash}`))
           htmls(
             `.${translateHash}`,
-            this.Options[translateHash]?.disableTextFormat
-              ? this.Token[translateHash][lang]
-              : textFormatted(this.Token[translateHash][lang]),
+            Translate.Options[translateHash]?.disableTextFormat
+              ? Translate.Token[translateHash][lang]
+              : textFormatted(Translate.Token[translateHash][lang]),
           );
-        else if ('placeholder' in this.Token[translateHash] && s(this.Token[translateHash].placeholder))
-          s(this.Token[translateHash].placeholder).placeholder = this.Options[translateHash]?.disableTextFormat
-            ? this.Token[translateHash][lang]
-            : textFormatted(this.Token[translateHash][lang]);
+        else if ('placeholder' in Translate.Token[translateHash] && s(Translate.Token[translateHash].placeholder))
+          s(Translate.Token[translateHash].placeholder).placeholder = Translate.Options[translateHash]
+            ?.disableTextFormat
+            ? Translate.Token[translateHash][lang]
+            : textFormatted(Translate.Token[translateHash][lang]);
       }
     });
-    for (const keyEvent of Object.keys(this.Event)) this.Event[keyEvent]();
-  },
-  Render: function (keyLang, placeholder, options = { disableTextFormat: false }) {
-    if (!(keyLang in this.Data)) {
+    Translate.emitChanged({ lang });
+    for (const keyEvent of Object.keys(Translate.Event)) Translate.Event[keyEvent]();
+  }
+  static onChanged(listener, options = {}) {
+    if (options.key) Translate.Event[options.key] = listener;
+    return translateEvents.on(TranslateEventType.changed, listener, options);
+  }
+  static offChanged(key) {
+    delete Translate.Event[key];
+    return translateEvents.off(key);
+  }
+  static hasChangedListener(key) {
+    return translateEvents.has(key);
+  }
+  static async emitChanged(detail) {
+    await translateEvents.emit(TranslateEventType.changed, detail);
+  }
+  static instance(keyLang, placeholder, options = { disableTextFormat: false }) {
+    if (!(keyLang in Translate.Data)) {
       // TODO: add translate package or library for this case
       // logger.warn('translate key lang does not exist: ', keyLang);
       return options.disableTextFormat ? keyLang : textFormatted(keyLang);
     }
-    if (placeholder) this.Data[keyLang].placeholder = placeholder;
-    keyLang = this.Data[keyLang];
-    const translateHash = getId(this.Token, 'trans');
-    this.Options[translateHash] = options;
-    this.Token[translateHash] = newInstance(keyLang);
+    if (placeholder) Translate.Data[keyLang].placeholder = placeholder;
+    keyLang = Translate.Data[keyLang];
+    const translateHash = getId(Translate.Token, 'trans');
+    Translate.Options[translateHash] = options;
+    Translate.Token[translateHash] = newInstance(keyLang);
     if ('placeholder' in keyLang) {
       if (s('html').lang in keyLang)
         return options.disableTextFormat ? keyLang[s('html').lang] : textFormatted(keyLang[s('html').lang]);
@@ -54,32 +68,31 @@ const Translate = {
     return html`<span class="${translateHash}"
       >${options.disableTextFormat ? keyLang['en'] : textFormatted(keyLang['en'])}</span
     >`;
-  },
-  renderLang: function (language) {
+  }
+  static renderLang(language) {
     localStorage.setItem('lang', language);
-    this.Parse(language);
+    Translate.Parse(language);
     if (s(`.action-btn-lang-render`)) htmls(`.action-btn-lang-render`, s('html').lang);
-  },
-  RenderSetting: async function (id) {
+  }
+  static async RenderSetting(id) {
     return html` <div class="in section-mp">
-      ${await DropDown.Render({
+      ${await DropDown.instance({
         id: id ?? 'settings-lang',
         value: s('html').lang ? s('html').lang : 'en',
-        label: html`${Translate.Render('lang')}`,
+        label: html`${Translate.instance('lang')}`,
         data: ['en', 'es'].map((language) => {
           return {
-            display: html`<i class="fa-solid fa-language"></i> ${Translate.Render(language)}`,
+            display: html`<i class="fa-solid fa-language"></i> ${Translate.instance(language)}`,
             value: language,
             onClick: () => Translate.renderLang(language),
           };
         }),
       })}
     </div>`;
-  },
-};
-
-const TranslateCore = {
-  Init: async function () {
+  }
+}
+class TranslateCore {
+  static async instance() {
     s('html').lang = getLang();
     Translate.Data = {
       ...Translate.Data,
@@ -221,11 +234,9 @@ const TranslateCore = {
     Translate.Data['confirm-logout'] = { en: 'Confirm Logout', es: 'Confirmar cierre de sesión' };
     Translate.Data['success-logout'] = { en: 'Successful session logout', es: 'Cierre de sesión exitoso' };
     Translate.Data['account'] = { en: 'Account', es: 'Cuenta' };
-
     Translate.Data['update'] = { en: 'Update', es: 'Actualizar' };
     Translate.Data['success-update-user'] = { en: 'user update successfully', es: 'usuario actualizado correctamente' };
     Translate.Data['error-update-user'] = { en: 'error update user', es: 'error al actualizar el usuario' };
-
     Translate.Data['edit'] = { en: 'Edit', es: 'Editar' };
     Translate.Data['copy-share-link'] = { en: 'Copy share link', es: 'Copiar enlace compartido' };
     Translate.Data['link-copied'] = { en: 'Link copied to clipboard', es: 'Enlace copiado al portapapeles' };
@@ -235,17 +246,12 @@ const TranslateCore = {
     Translate.Data['confirm'] = { en: 'confirm', es: 'confirmar' };
     Translate.Data['cancel'] = { en: 'cancel', es: 'cancelar' };
     Translate.Data['verify-email'] = { en: 'Verify email', es: 'email de verificacion' };
-
     Translate.Data[`email send`] = { en: 'email send', es: 'email enviado' };
-
     Translate.Data['success-generate-keys'] = { en: 'Keys generated successfully.', es: 'Llaves generadas con éxito.' };
     Translate.Data['error-generate-keys'] = { en: 'Error generating keys.', es: 'Error al generar las llaves.' };
-
     Translate.Data['copy'] = { en: 'Copy', es: 'Copiar' };
     Translate.Data['keys'] = { en: 'Keys', es: 'Llaves' };
-
     Translate.Data['success-copy-data'] = { es: '¡Datos copiados con éxito!', en: 'Data copied successfully!' };
-
     Translate.Data['character'] = { es: 'Personaje', en: 'Character' };
     Translate.Data['file-path'] = { en: 'file path', es: 'ruta de archivo' };
     Translate.Data['drop-file'] = { en: 'drop file', es: 'soltar archivo' };
@@ -258,7 +264,6 @@ const TranslateCore = {
     Translate.Data['calendar'] = { es: 'Calendario', en: 'Calendar' };
     Translate.Data['docs'] = { es: 'Documentacion', en: 'Documentation' };
     Translate.Data['clean-cache'] = { es: 'Limpiar caché', en: 'Clean cache' };
-
     Translate.Data['add'] = { es: 'Agregar', en: 'Add' };
     Translate.Data['mode'] = { es: 'Modo', en: 'Mode' };
     Translate.Data['result'] = { es: 'Resultado', en: 'Result' };
@@ -272,7 +277,6 @@ const TranslateCore = {
       es: 'Vista previa no disponible',
     };
     Translate.Data['recent'] = { es: 'Reciente', en: 'recent' };
-
     Translate.Data = {
       ...Translate.Data,
       ...{
@@ -338,7 +342,6 @@ const TranslateCore = {
       es: 'No se pudo conectar al dispositivo de transmisión.',
       en: 'Unable to connect to the stream device.',
     };
-
     Translate.Data['equip'] = {
       es: 'Equipar',
       en: 'Equip',
@@ -347,7 +350,6 @@ const TranslateCore = {
       es: 'Desequipar',
       en: 'Unequip',
     };
-
     Translate.Data['i-have-account'] = {
       en: 'I have an account',
       es: 'Tengo una cuenta',
@@ -398,7 +400,6 @@ const TranslateCore = {
     };
     Translate.Data['resend'] = { en: 'Resend', es: 'Reenviar' };
     Translate.Data['delete-account'] = { en: 'Delete Account', es: 'Borrar cuenta' };
-
     Translate.Data['doc-title'] = {
       en: 'Doc Title',
       es: 'Título del documento',
@@ -455,7 +456,6 @@ const TranslateCore = {
       en: 'Error deleting account.',
       es: 'Error al borrar la cuenta.',
     };
-
     Translate.Data['confirm-delete-account'] = {
       en: 'Are you sure you want to delete your account?',
       es: '¿Estás seguro de que deseas borrar tu cuenta?',
@@ -571,7 +571,6 @@ const TranslateCore = {
     Translate.Data['next'] = { es: 'Siguiente', en: 'Next' };
     Translate.Data['buy'] = { es: 'comprar', en: 'Buy' };
     Translate.Data['sell'] = { es: 'Vender', en: 'sell' };
-
     Translate.Data['monday'] = { es: 'Lunes', en: 'Monday' };
     Translate.Data['tuesday'] = { es: 'Martes', en: 'Tuesday' };
     Translate.Data['wednesday'] = { es: 'Miércoles', en: 'Wednesday' };
@@ -579,7 +578,6 @@ const TranslateCore = {
     Translate.Data['friday'] = { es: 'Viernes', en: 'Friday' };
     Translate.Data['saturday'] = { es: 'Sábado', en: 'Saturday' };
     Translate.Data['sunday'] = { es: 'Domingo', en: 'Sunday' };
-
     Translate.Data['description'] = { es: 'Descripción', en: 'Description' };
     Translate.Data['daysOfWeek'] = { es: 'Días de la semana', en: 'Days of the week' };
     Translate.Data['startTime'] = { es: 'Hora de inicio', en: 'Start time' };
@@ -691,7 +689,6 @@ const TranslateCore = {
       en: 'Filter cleared successfully',
       es: 'Filtro limpiado con éxito',
     };
-  },
-};
-
+  }
+}
 export { Translate, TranslateCore, textFormatted };

package/src/client/components/core/Validator.js

@@ -6,14 +6,14 @@ import { htmls, s } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
-const Validator = {
-  renderErrorMessage: function (rule, text) {
+class Validator {
+  static renderErrorMessage(rule, text) {
     return html` <div class="in">
       ${renderStatus('error', { class: 'inl' })} &nbsp
-      <span style="color: red">${text ? textFormatted(text) : Translate.Render(rule.type)}</span>
+      <span style="color: red">${text ? textFormatted(text) : Translate.instance(rule.type)}</span>
     </div>`;
-  },
-  instance: function (validators, callBack = (value) => {}) {
+  }
+  static instance(validators, callBack = (value) => {}) {
     const validatorFunction = {};
     if (!Array.isArray(validators)) validators = Object.values(validators);
     for (const validatorData of validators) {
@@ -31,7 +31,7 @@ const Validator = {
                   if (errors.length > 0)
                     errorMessage += errors
                       .map((translateMessage) =>
-                        this.renderErrorMessage(
+                        Validator.renderErrorMessage(
                           undefined,
                           html`
                             ${translateMessage[s('html').lang]
@@ -45,23 +45,27 @@ const Validator = {
                 break;
               case 'isEmpty':
                 if (validator.isEmpty(s(`.${validatorData.id}`).value, { ignore_whitespace: true }))
-                  errorMessage += this.renderErrorMessage(rule);
+                  errorMessage += Validator.renderErrorMessage(rule);
                 break;
               case 'isEmail':
-                if (!validator.isEmail(s(`.${validatorData.id}`).value)) errorMessage += this.renderErrorMessage(rule);
+                if (!validator.isEmail(s(`.${validatorData.id}`).value))
+                  errorMessage += Validator.renderErrorMessage(rule);
                 break;
               case 'passwordMismatch':
                 if (!validator.equals(s(`.${validatorData.id}`).value, s(`.${rule.options}`).value))
-                  errorMessage += this.renderErrorMessage(rule);
+                  errorMessage += Validator.renderErrorMessage(rule);
                 break;
               case 'isLength':
                 if (!validator.isLength(s(`.${validatorData.id}`).value, rule.options))
-                  errorMessage += this.renderErrorMessage(rule);
+                  errorMessage += Validator.renderErrorMessage(rule);
                 break;
 
               case 'isChileanIdentityDocument': {
                 if (!isChileanIdentityDocument(s(`.${validatorData.id}`).value)) {
-                  errorMessage += this.renderErrorMessage(undefined, Translate.Render('invalid-identity-document'));
+                  errorMessage += Validator.renderErrorMessage(
+                    undefined,
+                    Translate.instance('invalid-identity-document'),
+                  );
                 }
 
                 break;
@@ -70,13 +74,19 @@ const Validator = {
                 const username = s(`.${validatorData.id}`).value;
                 // Check if username is empty or only whitespace
                 if (!username || username.trim() === '') {
-                  errorMessage += this.renderErrorMessage(undefined, Translate.Render('invalid-username-format'));
+                  errorMessage += Validator.renderErrorMessage(
+                    undefined,
+                    Translate.instance('invalid-username-format'),
+                  );
                   break;
                 }
                 // Check if username contains only valid characters (no spaces or special chars)
                 const usernameRegex = /^[a-zA-Z0-9_-]+$/;
                 if (!usernameRegex.test(username)) {
-                  errorMessage += this.renderErrorMessage(undefined, Translate.Render('invalid-username-format'));
+                  errorMessage += Validator.renderErrorMessage(
+                    undefined,
+                    Translate.instance('invalid-username-format'),
+                  );
                 }
 
                 break;
@@ -86,7 +96,7 @@ const Validator = {
                   validator[rule.type] &&
                   !validator[rule.type](s(`.${validatorData.id}`).value, rule?.options ? rule.options : undefined)
                 )
-                  errorMessage += this.renderErrorMessage(rule);
+                  errorMessage += Validator.renderErrorMessage(rule);
                 break;
             }
           }
@@ -124,7 +134,7 @@ const Validator = {
       }
       return { errorMessage, errorKeys, successKeys };
     };
-  },
-};
+  }
+}
 
 export { Validator };

package/src/client/components/core/Wallet.js

@@ -8,42 +8,34 @@ import { EventsUI } from './EventsUI.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { copyData, htmls, s } from './VanillaJs.js';
-
-const Wallet = {
-  Data: {},
-  Render: async function (options) {
-    const id = getId(this.Data, 'wallet-');
+class Wallet {
+  static Data = {};
+  static async instance(options) {
+    const id = getId(Wallet.Data, 'wallet-');
     setTimeout(async () => {
       EventsUI.onClick(`.btn-generate-keys-${id}`, async (e) => {
         e.preventDefault();
-
         const algorithm = {
           name: 'ECDSA',
           namedCurve: 'P-384',
           hash: 'SHA-256',
         };
         const format = 'jwk';
-
         (async () => {
           return;
           const { data: payload } = await UserService.get({ id: 'public-key-sign-token' });
-
           const signature = await window.crypto.subtle.sign(
             algorithm,
             keyPair.privateKey,
-            new TextEncoder().encode(payload), // Encode data to Uint8Array,
+            new TextEncoder().encode(payload),
           );
-
           const base64Signature = btoa(String.fromCharCode(...new Uint8Array(signature)));
         })();
-
         const keyPair = await window.crypto.subtle.generateKey(algorithm, true, ['sign', 'verify']);
         const privateKey = await window.crypto.subtle.exportKey(format, keyPair.privateKey);
         const publicKey = await window.crypto.subtle.exportKey(format, keyPair.publicKey);
-
         const displayKeys = JSON.stringify({ privateKey, publicKey }, null, 4);
         htmls('.keys-display', displayKeys);
-
         if (Auth.getToken()) {
           const result = await CryptoService.post({
             body: {
@@ -53,19 +45,17 @@ const Wallet = {
             },
           });
         }
-
         NotificationManager.Push({
-          // html: Translate.Render(`${result.status}-generate-keys`),
-          html: Translate.Render(`success-generate-keys`),
+          // html: Translate.instance(`${result.status}-generate-keys`),
+          html: Translate.instance(`success-generate-keys`),
           // status: result.status,
           status: 'success',
         });
-
         EventsUI.onClick(`.btn-copy-keys-${id}`, async (e) => {
           e.preventDefault();
           await copyData(displayKeys);
           NotificationManager.Push({
-            html: Translate.Render('success-copy-data'),
+            html: Translate.instance('success-copy-data'),
             status: 'success',
           });
         });
@@ -82,14 +72,14 @@ const Wallet = {
               based on elliptic curve digital signature,
               <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto">more info</a>.
             </div>
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-generate-keys-${id}`,
-              label: html`<i class="fa-solid fa-arrows-rotate"></i> ${Translate.Render('generate')}
-                ${Translate.Render('keys')}`,
+              label: html`<i class="fa-solid fa-arrows-rotate"></i> ${Translate.instance('generate')}
+                ${Translate.instance('keys')}`,
             })}
-            ${await BtnIcon.Render({
+            ${await BtnIcon.instance({
               class: `inl section-mp btn-custom btn-copy-keys-${id}`,
-              label: html`<i class="fas fa-copy"></i> ${Translate.Render('copy')} ${Translate.Render('keys')}`,
+              label: html`<i class="fas fa-copy"></i> ${Translate.instance('copy')} ${Translate.instance('keys')}`,
             })}
           </div>
         </div>
@@ -100,7 +90,6 @@ const Wallet = {
         </div>
       </div>
     `;
-  },
-};
-
+  }
+}
 export { Wallet };