underpost 2.8.847 → 2.8.851

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.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.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.hostname), // html body
           attachments: [
             // {
             //   filename: 'logo.png',
@@ -444,7 +418,7 @@ const UserService = {
           _id: user._id,
         }).select(UserDto.select.get());
       } else throw new Error('invalid token');
-    }
+    } else delete req.body.password;
 
     switch (req.params.id) {
       default: {
@@ -453,9 +427,6 @@ const UserService = {
         });
         switch (user.role) {
           case 'admin': {
-            if (req.body.password !== undefined && req.body.password !== user.password)
-              req.body.password = await hashPassword(req.body.password);
-            else delete req.body.password;
             return await User.findByIdAndUpdate(req.params.id, req.body, {
               runValidators: true,
             });

package/src/cli/run.js

@@ -86,6 +86,13 @@ class UnderpostRun {
       shellExec(`${baseCommand} run ide /home/dd/engine`);
       shellExec(`${baseCommand} run ide /home/dd/engine/engine-private`);
     },
+    'template-deploy': (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      const baseCommand = options.dev || true ? 'node bin' : 'underpost';
+      shellCd('/home/dd/engine');
+      shellExec(`git reset`);
+      shellExec(`${baseCommand} cmt . --empty ci package-pwa-microservices-template`);
+      shellExec(`${baseCommand} push . underpostnet/engine`);
+    },
     'ssh-deploy': (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const baseCommand = options.dev || true ? 'node bin' : 'underpost';
       shellCd('/home/dd/engine');

package/src/client/Default.index.js

@@ -16,6 +16,7 @@ import { SocketIo } from './components/core/SocketIo.js';
 import { SocketIoDefault } from './components/default/SocketIoDefault.js';
 import { ElementsDefault } from './components/default/ElementsDefault.js';
 import { Scroll } from './components/core/Scroll.js';
+import { CssDefaultDark, CssDefaultLight } from './components/default/CssDefault.js';
 
 const htmlMainBody = async () => {
   return html`<span>Hello World!!</span>`;
@@ -25,12 +26,15 @@ window.onload = () =>
   Worker.instance({
     router: RouterDefault,
     render: async () => {
-      await Css.loadThemes();
+      await Css.loadThemes([CssDefaultLight, CssDefaultDark]);
       await TranslateCore.Init();
       await TranslateDefault.Init();
       await Responsive.Init();
       await MenuDefault.Render({ htmlMainBody });
-      await SocketIo.Init({ channels: ElementsDefault.Data });
+      await SocketIo.Init({
+        channels: ElementsDefault.Data,
+        path: `/`,
+      });
       await SocketIoDefault.Init();
       await LogInDefault();
       await LogOutDefault();

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

@@ -44,7 +44,7 @@ const Account = {
         { model: 'email', id: `account-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
         {
           model: 'password',
-          defaultValue: '*******',
+          defaultValue: '#Changethis123',
           id: `account-password`,
           rules: [{ type: 'isStrongPassword' }],
         },

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

@@ -51,8 +51,8 @@ const Css = {
     // if (!ThemesScope.find((t) => t.dark)) addTheme(CssCoreDark);
     // if (!ThemesScope.find((t) => !t.dark)) addTheme(CssCoreLight);
     if (ThemesScope.length === 0) {
-      addTheme(CssCoreDark);
       addTheme(CssCoreLight);
+      addTheme(CssCoreDark);
     }
     const localStorageTheme = localStorage.getItem('_theme');
     if (localStorageTheme && Themes[localStorageTheme]) {
@@ -199,6 +199,7 @@ const addTheme = (options) => {
       if (!['core', 'css-core'].includes(options.theme))
         render += darkTheme ? await CssCoreDark.render() : await CssCoreLight.render();
       render += await options.render();
+      render += await subThemeManager.render();
       htmls('.theme', render);
       TriggerThemeEvents();
     }
@@ -232,18 +233,29 @@ const borderChar = (px, color, selectors, hover = false) => {
     ${color}, ${px}px ${px}px ${px}px ${color};
   `;
 };
-
 const boxShadow = ({ selector }) => html`
-  <style>
-    ${selector} {
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    }
-    ${selector}:hover {
-      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
-    }
-  </style>
+  ${darkTheme
+    ? html`
+        <style>
+          ${selector} {
+            box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(255, 255, 255, 0.08);
+          }
+          ${selector}:hover {
+            box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.15), 0 10px 30px 0 rgba(255, 255, 255, 0.1);
+          }
+        </style>
+      `
+    : html`
+        <style>
+          ${selector} {
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          }
+          ${selector}:hover {
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+          }
+        </style>
+      `}
 `;
-
 const renderMediaQuery = (mediaData) => {
   //  first limit should be '0'
   return html`
@@ -677,6 +689,166 @@ const scrollBarLightRender = () => {
     .join('');
 };
 
+/**
+ * Adjust hex color brightness toward white/black ("mix") or by modifying HSL lightness ("hsl").
+ *
+ * @param {string} hex - Color as '#rrggbb', 'rrggbb', '#rgb', or 'rgb'.
+ * @param {number} factor - -1..1 or -100..100 (percent). Positive = lighten, negative = darken.
+ * @param {{mode?: 'mix'|'hsl'}} [options]
+ * @returns {string} - Adjusted color as '#rrggbb' (lowercase).
+ */
+function adjustHex(hex, factor = 0.1, options = {}) {
+  if (typeof hex !== 'string') throw new TypeError('hex must be a string');
+  if (typeof factor !== 'number') throw new TypeError('factor must be a number');
+
+  // normalize factor: allow -100..100 or -1..1
+  if (factor > 1 && factor <= 100) factor = factor / 100;
+  if (factor < -1 && factor >= -100) factor = factor / 100;
+  factor = Math.max(-1, Math.min(1, factor));
+
+  const mode = options.mode === 'hsl' ? 'hsl' : 'mix';
+
+  // normalize hex
+  let h = hex.replace(/^#/, '').trim();
+  if (!(h.length === 3 || h.length === 6)) throw new Error('Invalid hex format');
+  if (h.length === 3)
+    h = h
+      .split('')
+      .map((c) => c + c)
+      .join('');
+
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+
+  const clamp = (v, a = 0, z = 255) => Math.max(a, Math.min(z, v));
+
+  const rgbToHex = (rr, gg, bb) =>
+    '#' +
+    [rr, gg, bb]
+      .map((v) => Math.round(v).toString(16).padStart(2, '0'))
+      .join('')
+      .toLowerCase();
+
+  if (mode === 'mix') {
+    // positive: mix toward white (255); negative: mix toward black (0)
+    const mixChannel = (c) => {
+      if (factor >= 0) {
+        return clamp(Math.round(c + (255 - c) * factor));
+      } else {
+        const a = Math.abs(factor);
+        return clamp(Math.round(c * (1 - a)));
+      }
+    };
+    return rgbToHex(mixChannel(r), mixChannel(g), mixChannel(b));
+  } else {
+    // HSL mode: convert rgb to hsl, adjust L by factor, convert back
+    const rgbToHsl = (r, g, b) => {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+      const max = Math.max(r, g, b),
+        min = Math.min(r, g, b);
+      let h = 0,
+        s = 0,
+        l = (max + min) / 2;
+      if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+          case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
+            break;
+          case g:
+            h = (b - r) / d + 2;
+            break;
+          case b:
+            h = (r - g) / d + 4;
+            break;
+        }
+        h /= 6;
+      }
+      return { h, s, l };
+    };
+
+    const hslToRgb = (h, s, l) => {
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1 / 6) return p + (q - p) * 6 * t;
+          if (t < 1 / 2) return q;
+          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+      }
+      return { r: r * 255, g: g * 255, b: b * 255 };
+    };
+
+    const { h: hh, s: ss, l: ll } = rgbToHsl(r, g, b);
+    // add factor to lightness (factor already normalized -1..1)
+    let newL = ll + factor;
+    newL = Math.max(0, Math.min(1, newL));
+    const { r: r2, g: g2, b: b2 } = hslToRgb(hh, ss, newL);
+    return rgbToHex(r2, g2, b2);
+  }
+}
+
+// Convenience helpers:
+function lightenHex(hex, percentOr01 = 0.1, options = {}) {
+  return adjustHex(hex, Math.abs(percentOr01), options);
+}
+function darkenHex(hex, percentOr01 = 0.1, options = {}) {
+  return adjustHex(hex, -Math.abs(percentOr01), options);
+}
+
+const subThemeManager = {
+  render: async function () {
+    if (darkTheme && this.renderDark) {
+      return await this.renderDark();
+    } else if (!darkTheme && this.renderLight) {
+      return await this.renderLight();
+    }
+    return html``;
+  },
+  lightColor: null,
+  setLightTheme: function (color) {
+    this.lightColor = color;
+    this.renderLight = async function () {
+      return html`<style>
+        button:hover,
+        .a-btn:hover,
+        .main-btn-menu-active {
+          color: ${this.lightColor};
+          background-color: ${lightenHex(this.lightColor, 0.8)};
+        }
+      </style>`;
+    };
+  },
+  darkColor: null,
+  setDarkTheme: function (color) {
+    this.darkColor = color;
+    this.renderDark = async function () {
+      return html`<style>
+        button:hover,
+        .a-btn:hover,
+        .main-btn-menu-active {
+          color: ${lightenHex(this.darkColor, 0.8)};
+          background-color: ${darkenHex(this.darkColor, 0.75)};
+        }
+      </style>`;
+    };
+  },
+};
+
 const scrollBarDarkRender = () => {
   return cssBrowserCodes
     .map(
@@ -685,8 +857,8 @@ const scrollBarDarkRender = () => {
     ::-` +
         b +
         `-scrollbar {
-      width: 5px;
-      height: 5px; 
+      width: 8px;
+      height: 8px; 
       /* line-height: 1em; */
     }
 
@@ -702,7 +874,7 @@ const scrollBarDarkRender = () => {
         b +
         `-scrollbar-thumb {
       background: #74747457;
-      border-radius: 3px;
+      border-radius: 4px;
     }
 
     /* Handle on hover */
@@ -854,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);
@@ -872,6 +1045,8 @@ const simpleIconsRender = (selector) => {
   });
 };
 
+const styleFactory = (payload, plain = '') => `style="${renderCssAttr({ style: payload })} ${plain}"`;
+
 export {
   Css,
   Themes,
@@ -907,4 +1082,9 @@ export {
   simpleIconsRender,
   extractBackgroundImageUrl,
   renderChessPattern,
+  subThemeManager,
+  lightenHex,
+  darkenHex,
+  adjustHex,
+  styleFactory,
 };

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

@@ -33,7 +33,7 @@ const CssCommonCore = async () => {
         top: 0;
         left: 0;
         transition: 0.3s;
-        height: 5px;
+        height: 10px;
         width: 100%;
         z-index: 11;
       }

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

@@ -16,10 +16,7 @@ const Docs = {
     const docData = this.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
-    barConfig.buttons.close.onClick = () => {
-      setQueryPath({ path: 'docs' });
-      Modal.removeModal(ModalId);
-    };
+
     await Modal.Render({
       barConfig,
       title: renderViewTitle(docData),
@@ -53,6 +50,9 @@ const Docs = {
       }
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
+    Modal.Data[ModalId].onCloseListener[ModalId] = () => {
+      setQueryPath({ path: 'docs', queryPath: '' });
+    };
   },
   Data: [
     {

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/LoadingAnimation.js

@@ -1,7 +1,7 @@
 import { CoreService } from '../../services/core/core.service.js';
 import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
-import { darkTheme, renderCssAttr } from './Css.js';
+import { darkTheme, renderCssAttr, subThemeManager } from './Css.js';
 import { loggerFactory } from './Logger.js';
 import { append, getAllChildNodes, getProxyPath, htmls, s, sa } from './VanillaJs.js';
 
@@ -23,12 +23,12 @@ const LoadingAnimation = {
           <div
             class="fix progress-bar box-shadow ${id}"
             style="left: -100%; background: ${darkTheme
-              ? LoadingAnimation.darkColor
-                ? LoadingAnimation.darkColor
-                : `#c9c9c9`
-              : LoadingAnimation.lightColor
-              ? LoadingAnimation.lightColor
-              : `#515151`};"
+              ? subThemeManager.darkColor
+                ? subThemeManager.darkColor
+                : `#66e400`
+              : subThemeManager.lightColor
+              ? subThemeManager.lightColor
+              : `#157e00`};"
           ></div>
         `,
       );
@@ -140,14 +140,7 @@ const LoadingAnimation = {
         }, 300);
       });
   },
-  lightColor: null,
-  setLightColor: function (color) {
-    this.lightColor = color;
-  },
-  darkColor: null,
-  setDarkColor: function (color) {
-    this.darkColor = color;
-  },
+
   RenderCurrentSrcLoad: function (event) {
     if (s(`.ssr-loading-info`)) {
       let nameSrcLoad = event.data.path;

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`))