underpost 2.8.84 → 2.8.86

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

@@ -10,7 +10,7 @@ import { Modal } from './Modal.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { append, htmls, s } from './VanillaJs.js';
+import { append, getProxyPath, htmls, s } from './VanillaJs.js';
 
 const Account = {
   UpdateEvent: {},
@@ -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' }],
         },
@@ -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/Chat.js

@@ -53,7 +53,7 @@ const Chat = {
       html`
         <div class="in">
           <span class="chat-message-header">${getIsoDate(new Date())} | ${id}:</span><br />
-          ${message}
+          <span class="chat-message-body"> ${message}</span>
         </div>
       `,
     );

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

@@ -822,70 +822,72 @@ const generateRandomPasswordSelection = (length) => {
 
 const commitData = {
   feat: {
-    description: 'A new feature',
+    description: 'New feature or enhancement (frontend, backend, API, or UX)',
     title: 'Features',
     emoji: '✨',
   },
   fix: {
-    description: 'A bug fix',
+    description: 'Fix a bug',
     title: 'Bug Fixes',
     emoji: '🐛',
   },
   docs: {
-    description: 'Documentation only changes',
+    description: 'Documentation changes',
     title: 'Documentation',
     emoji: '📚',
   },
   style: {
-    description:
-      'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)',
+    description: 'Formatting, whitespace, semicolons, code style',
     title: 'Styles',
     emoji: '💎',
   },
   refactor: {
-    description: 'A code change that neither fixes a bug nor adds a feature',
+    description: 'Code refactor.',
     title: 'Code Refactoring',
     emoji: '📦',
   },
   perf: {
-    description: 'A code change that improves performance',
+    description: 'Performance improvements across the stack.',
     title: 'Performance Improvements',
     emoji: '⚡️',
   },
+  ci: {
+    description: 'CI pipeline changes (GitHub Actions, runners, caching)',
+    title: 'Continuous Integration',
+    emoji: '⚙️',
+  },
   cd: {
-    description:
-      'Changes to our Continuous Delivery configuration files and scripts (example scopes: Jenkins, Spinnaker, ArgoCD)',
+    description: 'CD / deployment changes (Remote ssh deployment scripts)',
     title: 'Continuous Delivery',
     emoji: '🚀',
   },
-  test: {
-    description: 'Adding missing tests or correcting existing tests',
-    title: 'Tests',
-    emoji: '🚨',
+  infra: {
+    description: 'Infrastructure changes (MAAS, LXD, cloud infra, networking, provisioning).',
+    title: 'Infrastructure',
+    emoji: '🏗️',
   },
   build: {
-    description: 'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)',
+    description: 'Build system or dependency changes (tooling, bundler, build scripts).',
     title: 'Builds',
     emoji: '🛠',
   },
-  ci: {
-    description:
-      'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)',
-    title: 'Continuous Integrations',
-    emoji: '⚙️',
+  test: {
+    description: 'Unit or integration tests added/updated, test helpers, flake fixes.',
+    title: 'Tests',
+    emoji: '🚨',
   },
   chore: {
-    description: "Other changes that don't modify src or test files",
+    description: "Other changes that don't modify src or tests (automation, housekeeping).",
     title: 'Chores',
     emoji: '♻️',
   },
   revert: {
-    description: 'Reverts a previous commit',
+    description: 'Revert a previous commit or change.',
     title: 'Reverts',
     emoji: '🗑',
   },
   backup: {
-    description: 'Changes related to backups, including creation, restoration, and maintenance.',
+    description: 'Backups, snapshotting, restore scripts, or backup docs.',
     title: 'Backups',
     emoji: '💾',
   },

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);
 
@@ -105,7 +105,6 @@ const Content = {
       class: '',
       container: '',
       url: '',
-      aHrefOptions: { disable: false },
       raw: false,
     },
   ) {
@@ -115,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];
@@ -127,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;
@@ -136,17 +134,19 @@ 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}" />`;
-        render += html`${options.aHrefOptions?.disable
-          ? imgRender
-          : html`<a href="${url}" target="_top">${imgRender}</a>`}`;
-
+        const imgRender = html`<img
+          class="in ${options.class}"
+          ${styleFactory(options.style, `${renderChessPattern(50)}`)}
+          src="${url}"
+        />`;
+        render += imgRender;
         break;
       }
       case 'pdf': {
@@ -157,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
@@ -178,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

@@ -1,9 +1,9 @@
-import { getId, newInstance, range, s4, splitEveryXChar } from './CommonJs.js';
+import { getId, newInstance, range, rgbToHex, s4, splitEveryXChar } from './CommonJs.js';
 import { CssCoreDark, CssCoreLight } from './CssCore.js';
 import { DropDown } from './DropDown.js';
 import { Modal } from './Modal.js';
 import { Translate } from './Translate.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
+import { append, getProxyPath, htmls, s, sa } from './VanillaJs.js';
 
 let ThemesScope = [];
 
@@ -12,14 +12,47 @@ let ThemesScope = [];
 // https://www.1001fonts.com/
 
 const Css = {
+  // Menu button container transition styles
+  menuButtonContainer: () => css`
+    .main-btn-menu {
+      transition: all 0.2s ease-in-out;
+      position: relative;
+    }
+
+    .main-btn-menu::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      height: 2px;
+      background: currentColor;
+      transition: all 0.2s ease-in-out;
+      transform: translateX(-50%);
+    }
+
+    .main-btn-menu:hover::after {
+      width: 60%;
+    }
+
+    .main-btn-menu.active {
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    .main-btn-menu.active::after {
+      width: 80%;
+      background: currentColor;
+    }
+  `,
+
   loadThemes: async function (themes = []) {
     ThemesScope = [];
     for (const themeOptions of themes) addTheme(themeOptions);
     // 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]) {
@@ -31,6 +64,16 @@ const Css = {
   Init: async function (options) {
     if (!options) options = ThemesScope[0];
     const { theme } = options;
+
+    // Inject menu button container styles
+    const styleId = 'menu-btn-container-styles';
+    if (!document.getElementById(styleId)) {
+      const style = document.createElement('style');
+      style.id = styleId;
+      style.textContent = this.menuButtonContainer();
+      document.head.appendChild(style);
+    }
+
     return await Themes[theme](options);
   },
   RenderSetting: async function () {
@@ -156,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();
     }
@@ -169,13 +213,13 @@ const addTheme = (options) => {
   };
 };
 
-const borderChar = (px, color, selectors) => {
+const borderChar = (px, color, selectors, hover = false) => {
   if (selectors) {
     return selectors
       .map(
         (selector) => html`
           <style>
-            ${selector} {
+            ${selector}${hover ? ':hover' : ''} {
               text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color},
                 -${px}px -${px}px ${px}px ${color}, ${px}px ${px}px ${px}px ${color};
             }
@@ -189,18 +233,29 @@ const borderChar = (px, color, selectors) => {
     ${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`
@@ -634,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(
@@ -642,8 +857,8 @@ const scrollBarDarkRender = () => {
     ::-` +
         b +
         `-scrollbar {
-      width: 5px;
-      height: 5px; 
+      width: 8px;
+      height: 8px; 
       /* line-height: 1em; */
     }
 
@@ -659,7 +874,7 @@ const scrollBarDarkRender = () => {
         b +
         `-scrollbar-thumb {
       background: #74747457;
-      border-radius: 3px;
+      border-radius: 4px;
     }
 
     /* Handle on hover */
@@ -811,6 +1026,27 @@ const imageShimmer = () => html`<div
   </div>
 </div>`;
 
+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);
+  const imageString = style.backgroundImage;
+  const foundUrlRaw = imageString.match(/^url\(?(.+)\)$/i)[1];
+  if (!foundUrlRaw) return null;
+  const foundUrl = foundUrlRaw.replace(/^['|"| ]*/, '').replace(/['" ]*$/, '');
+  if (!foundUrl) return null;
+  return foundUrl;
+};
+
+const simpleIconsRender = (selector) => {
+  sa(selector).forEach((el) => {
+    el.src = `https://cdn.simpleicons.org/coveralls/${rgbToHex(window.getComputedStyle(s('html')).color)}`;
+  });
+};
+
+const styleFactory = (payload, plain = '') => `style="${renderCssAttr({ style: payload })} ${plain}"`;
+
 export {
   Css,
   Themes,
@@ -843,4 +1079,12 @@ export {
   renderWave,
   cssEffect,
   imageShimmer,
+  simpleIconsRender,
+  extractBackgroundImageUrl,
+  renderChessPattern,
+  subThemeManager,
+  lightenHex,
+  darkenHex,
+  adjustHex,
+  styleFactory,
 };

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

@@ -17,8 +17,8 @@ const CssCommonCore = async () => {
   await AgGrid.RenderStyle();
   return html`<style>
       .top-bar-app-icon {
-        width: 35px;
-        height: 35px;
+        width: 40px;
+        height: 40px;
       }
       .mini-title {
         font-size: 15px;
@@ -33,7 +33,7 @@ const CssCommonCore = async () => {
         top: 0;
         left: 0;
         transition: 0.3s;
-        height: 5px;
+        height: 10px;
         width: 100%;
         z-index: 11;
       }
@@ -51,7 +51,6 @@ const CssCommonCore = async () => {
         cursor: grabbing !important;
       }
       .btn-label-content {
-        height: 100%;
         top: 15px;
       }
       .badge {
@@ -122,6 +121,7 @@ const CssCommonCore = async () => {
         left: 0;
         width: 100%;
         z-index: 1;
+        transition: 0.3s;
       }
       @keyframes ripple {
         to {
@@ -137,10 +137,6 @@ const CssCommonCore = async () => {
       .title-view-modal .view-title-icon {
         font-size: 21px !important;
       }
-      .plantuml-svg {
-        width: 100%;
-        height: auto;
-      }
       .down-arrow-submenu {
         top: -20px;
         text-align: right;
@@ -611,6 +607,10 @@ const CssCoreLight = {
           background: gray;
           transition: 0.3s;
         }
+        .bar-default-modal-icon {
+          width: 15px;
+          height: 15px;
+        }
         .slide-menu-top-bar {
           width: 100%;
           top: 0;