underpost 2.8.848 → 2.8.852

package/README.md

@@ -42,6 +42,10 @@ template
 
 
 
+
+
+
+
 
 
 
@@ -50,7 +54,7 @@ template
 <!-- badges -->
 
 
-[![Node.js CI](https://github.com/underpostnet/engine/actions/workflows/docker-image.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/docker-image.yml) [![Test](https://github.com/underpostnet/engine/actions/workflows/coverall.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/coverall.yml) [![Downloads](https://img.shields.io/npm/dm/underpost.svg)](https://www.npmjs.com/package/underpost) [![Socket Badge](https://socket.dev/api/badge/npm/package/underpost/2.8.848)](https://socket.dev/npm/package/underpost/overview/2.8.848) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine/badge.svg?branch=master)](https://coveralls.io/github/underpostnet/engine?branch=master) [![Version](https://img.shields.io/npm/v/underpost.svg)](https://www.npmjs.org/package/underpost) [![License](https://img.shields.io/npm/l/underpost.svg)](https://www.npmjs.com/package/underpost)
+[![Node.js CI](https://github.com/underpostnet/engine/actions/workflows/docker-image.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/docker-image.yml) [![Test](https://github.com/underpostnet/engine/actions/workflows/coverall.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/coverall.yml) [![Downloads](https://img.shields.io/npm/dm/underpost.svg)](https://www.npmjs.com/package/underpost) [![Socket Badge](https://socket.dev/api/badge/npm/package/underpost/2.8.852)](https://socket.dev/npm/package/underpost/overview/2.8.852) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine/badge.svg?branch=master)](https://coveralls.io/github/underpostnet/engine?branch=master) [![Version](https://img.shields.io/npm/v/underpost.svg)](https://www.npmjs.org/package/underpost) [![License](https://img.shields.io/npm/l/underpost.svg)](https://www.npmjs.com/package/underpost)
 
 
 <!-- end-badges -->
@@ -75,6 +79,10 @@ template
 
 
 
+
+
+
+
 
 
 
@@ -124,7 +132,7 @@ Run dev client server
 npm run dev
 ```
 <!-- -->
-## underpost ci/cd cli v2.8.848
+## underpost ci/cd cli v2.8.852
 
 ### Usage: `underpost [options] [command]`
   ```

package/cli.md

@@ -1,4 +1,4 @@
-## underpost ci/cd cli v2.8.848
+## underpost ci/cd cli v2.8.852
 
 ### Usage: `underpost [options] [command]`
   ```

package/docker-compose.yml

@@ -58,7 +58,7 @@ services:
           cpus: '0.25'
           memory: 20M
     labels: # labels in Compose file instead of Dockerfile
-      engine.version: '2.8.848'
+      engine.version: '2.8.852'
     networks:
       - load-balancer
 

package/manifests/deployment/dd-template-development/deployment.yaml

@@ -17,7 +17,7 @@ spec:
     spec:
       containers:
         - name: dd-template-development-blue
-          image: localhost/rockylinux9-underpost:v2.8.848
+          image: localhost/rockylinux9-underpost:v2.8.852
           #          resources:
           #            requests:
           #              memory: "124Ki"
@@ -100,7 +100,7 @@ spec:
     spec:
       containers:
         - name: dd-template-development-green
-          image: localhost/rockylinux9-underpost:v2.8.848
+          image: localhost/rockylinux9-underpost:v2.8.852
           #          resources:
           #            requests:
           #              memory: "124Ki"

package/package.json

@@ -2,7 +2,7 @@
     "type": "module",
     "main": "src/index.js",
     "name": "underpost",
-    "version": "2.8.848",
+    "version": "2.8.852",
     "description": "pwa api rest template",
     "scripts": {
         "start": "env-cmd -f .env.production node --max-old-space-size=8192 src/server",

package/src/api/user/user.service.js

@@ -31,20 +31,10 @@ const UserService = {
       const token = hashJWT({ email: req.body.email }, '15m');
       const payloadToken = hashJWT({ email: req.body.email }, '15m');
       const id = `${options.host}${options.path}`;
-      const translate = {
-        H1: {
-          en: 'Recover your account',
-          es: 'Recupera tu cuenta',
-        },
-        P1: {
-          en: 'To recover your account, please click the button below:',
-          es: 'Para recuperar tu cuenta, haz click en el botón de abajo:',
-        },
-        BTN_LABEL: {
-          en: 'Recover Password',
-          es: 'Recuperar Contraseña',
-        },
-      };
+      const translate = MailerProvider.instance[id].translateTemplates.recoverEmail;
+      const recoverUrl = `${process.env.NODE_ENV === 'development' ? 'http://' : 'https://'}${req.body.hostname}${
+        req.body.proxyPath
+      }recover?payload=${payloadToken}`;
       const sendResult = await MailerProvider.send({
         id,
         sendOptions: {
@@ -55,13 +45,8 @@ const UserService = {
             .replace('{{H1}}', translate.H1[req.lang])
             .replace('{{P1}}', translate.P1[req.lang])
             .replace('{{TOKEN}}', token)
-            .replace(`{{COMPANY}}`, options.host) // html body
-            .replace(
-              '{{RECOVER_WEB_URL}}',
-              `${process.env === 'development' ? 'http://' : 'https://'}${options.host}${options.path}${
-                options.path === '/' ? 'recover' : `/recover`
-              }?payload=${payloadToken}`,
-            )
+            .replace(`{{COMPANY}}`, req.body.hostname) // html body
+            .replace('{{RECOVER_WEB_URL}}', recoverUrl)
             .replace('{{RECOVER_BTN_LABEL}}', translate.BTN_LABEL[req.lang]),
 
           attachments: [
@@ -98,18 +83,7 @@ const UserService = {
           },
         );
       }
-      const translate = {
-        H1: {
-          en: 'Confirm Your Email',
-          zh: '请确认您的电子邮箱',
-          es: 'Confirma tu correo electrónico',
-        },
-        P1: {
-          en: 'Email confirmed! Thanks.',
-          zh: '电子邮箱已确认！感谢。',
-          es: 'Correo electrónico confirmado! Gracias.',
-        },
-      };
+      const translate = MailerProvider.instance[id].translateTemplates.confirmEmail;
       const sendResult = await MailerProvider.send({
         id,
         sendOptions: {
@@ -120,7 +94,7 @@ const UserService = {
             .replace('{{H1}}', translate.H1[req.lang])
             .replace('{{P1}}', translate.P1[req.lang])
             .replace('{{TOKEN}}', token)
-            .replace(`{{COMPANY}}`, options.host), // html body
+            .replace(`{{COMPANY}}`, req.body.hostname), // html body
           attachments: [
             // {
             //   filename: 'logo.png',

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

@@ -103,7 +103,11 @@ const Account = {
             e.preventDefault();
             const result = await UserService.post({
               id: 'mailer/verify-email',
-              body: { email: s(`.account-email`).value },
+              body: {
+                email: s(`.account-email`).value,
+                hostname: `${location.hostname}`,
+                proxyPath: getProxyPath(),
+              },
             });
             NotificationManager.Push({
               html: result.status === 'error' ? result.message : Translate.Render(`email send`),

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

@@ -7,7 +7,7 @@ import { Modal, renderViewTitle } from './Modal.js';
 import { DocumentService } from '../../services/document/document.service.js';
 import { CoreService, getApiBaseUrl } from '../../services/core/core.service.js';
 import { loggerFactory } from './Logger.js';
-import { imageShimmer, renderCssAttr } from './Css.js';
+import { imageShimmer, renderChessPattern, renderCssAttr, styleFactory } from './Css.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -114,7 +114,6 @@ const Content = {
         width: '100%',
         border: 'none',
       };
-    options.style = `style="${renderCssAttr(options)}"`;
     if (!options.class) options.class = ``;
     const { container, file } = options;
     const ext = file.name.split('.')[file.name.split('.').length - 1];
@@ -126,7 +125,7 @@ const Content = {
           const content = options.url
             ? await CoreService.getRaw({ url: options.url })
             : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
-          render += html`<div class="${options.class}" ${options.style}>${marked.parse(content)}</div>`;
+          render += html`<div class="${options.class}" ${styleFactory(options.style)}>${marked.parse(content)}</div>`;
         }
 
         break;
@@ -135,13 +134,18 @@ const Content = {
       case 'jpeg':
       case 'webp':
       case 'svg':
+      case 'gif':
       case 'png': {
         const url = options.url
           ? options.url
           : file._id
           ? getApiBaseUrl({ id: file._id, endpoint: 'file/blob' })
           : URL.createObjectURL(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
-        const imgRender = html`<img class="in ${options.class}" ${options.style} src="${url}" />`;
+        const imgRender = html`<img
+          class="in ${options.class}"
+          ${styleFactory(options.style, `${renderChessPattern(50)}`)}
+          src="${url}"
+        />`;
         render += imgRender;
         break;
       }
@@ -153,14 +157,14 @@ const Content = {
           : URL.createObjectURL(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
         render += html`<iframe
           class="in ${options.class} iframe-${options.idModal}"
-          ${options.style}
+          ${styleFactory(options.style)}
           src="${url}"
         ></iframe>`;
         break;
       }
 
       case 'json':
-        render += html`<pre class="in ${options.class}" ${options.style}>
+        render += html`<pre class="in ${options.class}" ${styleFactory(options.style)}>
         ${JSON.stringify(
             JSON.parse(
               options.url
@@ -174,7 +178,7 @@ const Content = {
         break;
 
       default:
-        render += html`<div class="in ${options.class}" ${options.style}>
+        render += html`<div class="in ${options.class}" ${styleFactory(options.style)}>
           ${options.url
             ? await CoreService.getRaw({ url: options.url })
             : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype))}

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

@@ -1026,7 +1026,8 @@ const imageShimmer = () => html`<div
   </div>
 </div>`;
 
-const renderChessPattern = () => `background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / 20px 20px`;
+const renderChessPattern = (patternSize = 20) =>
+  `background: repeating-conic-gradient(#808080 0 25%, #0000 0 50%) 50% / ${patternSize}px ${patternSize}px`;
 
 const extractBackgroundImageUrl = (element) => {
   const style = window.getComputedStyle(element);
@@ -1044,6 +1045,8 @@ const simpleIconsRender = (selector) => {
   });
 };
 
+const styleFactory = (payload, plain = '') => `style="${renderCssAttr({ style: payload })} ${plain}"`;
+
 export {
   Css,
   Themes,
@@ -1083,4 +1086,5 @@ export {
   lightenHex,
   darkenHex,
   adjustHex,
+  styleFactory,
 };

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

@@ -359,4 +359,9 @@ const InputFile = {
   },
 };
 
-export { Input, InputFile, fileFormDataFactory, getSrcFromFileData, getFileFromFileData };
+function isTextInputFocused() {
+  const active = document.activeElement;
+  return active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA');
+}
+
+export { Input, InputFile, fileFormDataFactory, getSrcFromFileData, getFileFromFileData, isTextInputFocused };

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

@@ -189,6 +189,9 @@ const LogIn = {
       </form>
     `;
   },
+  cleanMainUser: () => {
+    LogIn.Scope.user.main.model.user = {};
+  },
 };
 
 export { LogIn };

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

@@ -8,7 +8,7 @@ import { Webhook } from './Webhook.js';
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    LogIn.Scope.user.main.model.user = {};
+    LogIn.cleanMainUser();
     await Webhook.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))

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

@@ -28,7 +28,7 @@ import { setDocTitle, closeModalRouteChangeEvent, handleModalViewRoute } from '.
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
-import { Input } from './Input.js';
+import { Input, isTextInputFocused } from './Input.js';
 import { Validator } from './Validator.js';
 import { DropDown } from './DropDown.js';
 import { Keyboard } from './Keyboard.js';
@@ -186,7 +186,7 @@ const Modal = {
                       `.default-slide-menu-top-bar-fix-title-container`,
                       html`
                         <div class="inl default-slide-menu-top-bar-fix-title-container-text">
-                          ${options.RouterInstance.NameApp}
+                          ${options.RouterInstance.BannerAppTemplate}
                         </div>
                       `,
                     );
@@ -608,6 +608,7 @@ const Modal = {
                     }),
                   );
                   s(`.search-result-btn-${result.routerId}`).onclick = () => {
+                    if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
                     s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
                       `main-btn-menu-active`,
                     );
@@ -621,6 +622,7 @@ const Modal = {
               };
 
               const getResultSearchBox = (validatorData) => {
+                if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
                 const { model, id } = validatorData;
                 switch (model) {
                   case 'search-box':
@@ -998,6 +1000,7 @@ const Modal = {
                     ['Alt', 'k'],
                   ],
                   eventCallBack: () => {
+                    if (isTextInputFocused()) return;
                     if (s(`.top-bar-search-box`)) {
                       if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
                         s(`.main-body-btn-ui-open`).click();

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

@@ -7,7 +7,7 @@ import { LogIn } from './LogIn.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { getQueryParams, s } from './VanillaJs.js';
+import { getProxyPath, getQueryParams, s } from './VanillaJs.js';
 
 const Recover = {
   Event: {},
@@ -80,6 +80,8 @@ const Recover = {
         }
         switch (mode) {
           case 'recover-verify-email': {
+            body.proxyPath = getProxyPath();
+            body.hostname = `${location.hostname}`;
             const result = await UserService.post({ id: 'recover-verify-email', body });
             NotificationManager.Push({
               html:

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

@@ -53,6 +53,7 @@ const SignUp = {
           status: result.status,
         });
         if (result.status === 'success') {
+          await Auth.sessionOut();
           await Auth.signUpToken(result);
           s(`.btn-close-${options.idModal}`).click();
         }

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

@@ -147,8 +147,40 @@ const pasteData = () => new Promise((resolve) => navigator.clipboard.readText().
  * @memberof VanillaJS
  */
 const setPath = (path = '/', stateStorage = {}, title = '') => {
-  if (window.location.pathname === path || window.location.pathname === `${path}/`) return;
-  return history.pushState(stateStorage, title, path);
+  if (!path) path = '/';
+
+  const [inputPath, inputSearch] = `${path}`.split('?');
+
+  let sanitizedPath = (inputPath[0] !== '/' ? `/${inputPath}` : inputPath)
+    .trim()
+    .replaceAll('//', '/')
+    .replaceAll(`\\`, '/');
+
+  if (sanitizedPath.length > 1 && sanitizedPath[sanitizedPath.length - 1] === '/')
+    sanitizedPath = sanitizedPath.slice(0, -1);
+
+  if (window.location.pathname === sanitizedPath && (!inputSearch || inputSearch === location.search)) {
+    console.warn('Prevent overwriting same path', {
+      inputPath: inputPath,
+      inputSearch: inputSearch,
+      sanitizedPath: sanitizedPath,
+      currentLocationSearch: location.search,
+      currentLocationHash: location.hash,
+    });
+    return;
+  }
+  console.warn('Set path', {
+    inputPath: inputPath,
+    inputSearch: inputSearch,
+    sanitizedPath: sanitizedPath,
+    currentLocationSearch: location.search,
+    currentLocationHash: location.hash,
+  });
+  return history.pushState(
+    stateStorage,
+    title,
+    `${sanitizedPath}${inputSearch ? `?${inputSearch}` : ''}${location.hash ?? ''}`,
+  );
 };
 
 /**

package/src/client/components/default/MenuDefault.js

@@ -35,7 +35,7 @@ const MenuDefault = {
     const id = getId(this.Data, 'menu-');
     this.Data[id] = {};
     const RouterInstance = RouterDefault();
-    const { NameApp } = RouterInstance;
+    const { BannerAppTemplate } = RouterInstance;
     const { barConfig } = await Themes[Css.currentTheme]();
     const heightTopBar = 50;
     const heightBottomBar = 50;
@@ -162,7 +162,7 @@ const MenuDefault = {
         </div>
       `,
       barConfig: newInstance(barConfig),
-      title: NameApp,
+      title: BannerAppTemplate,
       // titleClass: 'hide',
       titleRender: () => {
         ThemeEvents['titleRender'] = () => {

package/src/client/components/default/RoutesDefault.js

@@ -4,7 +4,7 @@ import { getProxyPath, s } from '../core/VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
-const NameApp = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
+const BannerAppTemplate = html`<strong class="inl" style="font-family: system-ui">PWA</strong>`;
 
 // Router
 const RoutesDefault = () => {
@@ -12,7 +12,6 @@ const RoutesDefault = () => {
     '/': {
       title: 'Home',
       render: () => Modal.onHomeRouterEvent(),
-      upperCase: false,
     },
     '/home': { title: 'home', render: () => Modal.onHomeRouterEvent() },
     '/settings': { title: 'settings', render: () => s(`.main-btn-settings`).click() },
@@ -40,7 +39,7 @@ const RoutesDefault = () => {
 window.Routes = RoutesDefault;
 
 const RouterDefault = () => {
-  return { Routes: RoutesDefault, NameApp };
+  return { Routes: RoutesDefault, BannerAppTemplate };
 };
 
-export { RoutesDefault, RouterDefault, NameApp };
+export { RoutesDefault, RouterDefault, BannerAppTemplate };

package/src/index.js

@@ -35,7 +35,7 @@ class Underpost {
    * @type {String}
    * @memberof Underpost
    */
-  static version = 'v2.8.848';
+  static version = 'v2.8.852';
   /**
    * Repository cli API
    * @static

package/src/mailer/MailerProvider.js

@@ -48,6 +48,43 @@ const MailerProvider = {
         ...options,
         transporter,
         templates: await EmailRender.getTemplates(options),
+        translateTemplates: {
+          confirmEmail: {
+            H1: {
+              en: 'Confirm Your Email',
+              es: 'Confirma tu correo electrónico',
+            },
+            P1: {
+              en: `Email confirmed! Thanks.
+               <br />
+             <span style="font-size: 12px; color: gray"> 
+                If it is not automatically verified, 
+                please allow the image to be seen, thank you.
+             </span>
+              `,
+              es: `Correo electrónico confirmado! Gracias.
+              <br />
+              <span style="font-size: 12px; color: gray"> 
+               Si no se verifica automáticamente, por favor permita que se vea la imagen, gracias.
+              </span>
+              `,
+            },
+          },
+          recoverEmail: {
+            H1: {
+              en: 'Recover your account',
+              es: 'Recupera tu cuenta',
+            },
+            P1: {
+              en: 'To recover your account, please click the button below:',
+              es: 'Para recuperar tu cuenta, haz click en el botón de abajo:',
+            },
+            BTN_LABEL: {
+              en: 'Recover Password',
+              es: 'Recuperar Contraseña',
+            },
+          },
+        },
       };
 
       return this.instance[id];