@underpostnet/cyberia 3.2.80

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

@@ -0,0 +1,145 @@
+/**
+ * Mobile virtual keyboard avoidance utility.
+ *
+ * On mobile browsers, when the software keyboard appears it reduces
+ * `window.visualViewport.height`.  Without compensation, the keyboard
+ * can cover modals and form inputs so the user cannot see what they type.
+ *
+ * This module attaches to `window.visualViewport` resize/scroll events and
+ * translates a target element upward by the amount of space the keyboard has
+ * consumed.  A debounce is applied so that rapid `resize` events (common on
+ * Android) do not cause visual jitter.
+ *
+ * Usage:
+ * ```js
+ * import { initKeyboardAvoidance } from './KeyboardAvoidance.js';
+ *
+ * // Attach when a modal opens:
+ * const cleanup = initKeyboardAvoidance(document.querySelector('.my-modal'));
+ *
+ * // Detach when the modal closes:
+ * cleanup();
+ * ```
+ *
+ * @module src/client/components/core/KeyboardAvoidance.js
+ * @namespace KeyboardAvoidanceModule
+ */
+
+/**
+ * Minimum keyboard height in pixels below which we consider the keyboard
+ * to be hidden.  Values smaller than this are treated as OS chrome
+ * (address bar resize, etc.) and ignored.
+ *
+ * @constant {number}
+ * @memberof KeyboardAvoidanceModule
+ */
+const MIN_KEYBOARD_HEIGHT_PX = 50;
+
+/**
+ * Debounce delay in milliseconds applied to the `resize` handler.
+ * Prevents excessive style recalculations when the keyboard animates in.
+ *
+ * @constant {number}
+ * @memberof KeyboardAvoidanceModule
+ */
+const DEBOUNCE_MS = 32;
+
+/**
+ * Attaches `visualViewport` listeners to translate `targetEl` when the
+ * mobile software keyboard appears.
+ *
+ * The function is a no-op in environments that do not support the
+ * `visualViewport` API (desktop browsers, some older mobile browsers).
+ *
+ * @param {HTMLElement} targetEl - The element to translate (typically a
+ *   modal container or form wrapper).
+ * @param {object}  [options]
+ * @param {number}  [options.debounceMs=32]       - Debounce delay in ms.
+ * @param {number}  [options.minKeyboardPx=50]    - Minimum offset to treat
+ *   as a real keyboard appearance.
+ * @param {string}  [options.transitionStyle='transform 0.15s ease-out'] -
+ *   CSS transition applied to `targetEl` during keyboard animations.
+ * @returns {function(): void} Cleanup function — call when the element is
+ *   unmounted or the modal closes to remove the event listeners.
+ *
+ * @memberof KeyboardAvoidanceModule
+ *
+ * @example
+ * // Inside a modal's open() method:
+ * this._kbCleanup = initKeyboardAvoidance(this._el);
+ *
+ * // Inside the modal's close() method:
+ * if (this._kbCleanup) { this._kbCleanup(); this._kbCleanup = null; }
+ */
+export function initKeyboardAvoidance(
+  targetEl,
+  {
+    debounceMs = DEBOUNCE_MS,
+    minKeyboardPx = MIN_KEYBOARD_HEIGHT_PX,
+    transitionStyle = 'transform 0.15s ease-out',
+  } = {},
+) {
+  // Feature-detect visualViewport.  When unavailable, return a no-op cleanup.
+  if (!window.visualViewport || !targetEl) return () => {};
+
+  // Apply transition so movement feels natural.
+  const previousTransition = targetEl.style.transition;
+  targetEl.style.transition = transitionStyle;
+
+  let debounceTimer = null;
+
+  /**
+   * Computes the vertical offset caused by the software keyboard and
+   * applies a CSS translateY correction to `targetEl`.
+   *
+   * @returns {void}
+   * @memberof KeyboardAvoidanceModule
+   */
+  const update = () => {
+    const offset = window.innerHeight - window.visualViewport.height - window.visualViewport.offsetTop;
+
+    if (offset > minKeyboardPx) {
+      // Keyboard is visible — push the element up.
+      targetEl.style.transform = `translateY(-${Math.round(offset)}px)`;
+    } else {
+      // Keyboard is hidden — restore original position.
+      targetEl.style.transform = '';
+    }
+  };
+
+  /**
+   * Debounced wrapper for `update`.
+   * @returns {void}
+   */
+  const onViewportChange = () => {
+    if (debounceTimer !== null) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(update, debounceMs);
+  };
+
+  window.visualViewport.addEventListener('resize', onViewportChange);
+  window.visualViewport.addEventListener('scroll', onViewportChange);
+
+  // Run once immediately to handle the case where the keyboard was already
+  // open when this function was called.
+  update();
+
+  /**
+   * Cleanup function.  Removes all listeners and restores the element's
+   * original styles.
+   *
+   * @returns {void}
+   */
+  return () => {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    window.visualViewport.removeEventListener('resize', onViewportChange);
+    window.visualViewport.removeEventListener('scroll', onViewportChange);
+    // Restore previous styles.
+    targetEl.style.transform = '';
+    targetEl.style.transition = previousTransition;
+  };
+}
+
+export default initKeyboardAvoidance;

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

@@ -0,0 +1,152 @@
+import { BtnIcon } from './BtnIcon.js';
+import { s4 } from './CommonJs.js';
+import { darkTheme, renderCssAttr, subThemeManager } from './Css.js';
+import { loggerFactory } from './Logger.js';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
+const logger = loggerFactory(import.meta);
+class LoadingAnimation {
+  static bar = {
+    tokens: {},
+    getId: (id) => `bar-progress-${id.slice(1)}`,
+    play: async function (container) {
+      const id = LoadingAnimation.bar.getId(container);
+      const idEvent = s4() + s4() + s4();
+      LoadingAnimation.bar.tokens[container] = `${idEvent}`;
+      // diagonal-bar-background-animation
+      // #6d68ff #790079
+      append(
+        'body',
+        html`
+          <div
+            class="fix progress-bar box-shadow ${id}"
+            style="left: -100%; background: ${darkTheme
+              ? subThemeManager.darkColor
+                ? subThemeManager.darkColor
+                : `#66e400`
+              : subThemeManager.lightColor
+                ? subThemeManager.lightColor
+                : `#157e00`};"
+          ></div>
+        `,
+      );
+      for (const frame of [
+        { time: 500, value: 35 },
+        { time: 1250, value: 15 },
+        { time: 3000, value: 5 },
+        { time: 5000, value: 1 },
+      ])
+        setTimeout(() => {
+          if (LoadingAnimation.bar.tokens[container] === idEvent && s(`.${id}`)) {
+            s(`.${id}`).style.left = `-${frame.value}%`;
+            // const percentageRender = html`${100 - frame.value}%`;
+          }
+        }, frame.time);
+    },
+    stop: function (container) {
+      const id = LoadingAnimation.bar.getId(container);
+      delete LoadingAnimation.bar.tokens[container];
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).style.left = '0%';
+      s(`.${id}`).style.opacity = 1;
+      setTimeout(() => (s(`.${id}`).style.opacity = 0));
+      setTimeout(() => s(`.${id}`).remove(), 400);
+    },
+  };
+  static spinner = {
+    getId: (id) => `spinner-progress-${id.slice(1)}`,
+    play: async function (container, spinner, options = { append: '', prepend: '' }) {
+      if (!s(container)) return;
+      const id = LoadingAnimation.spinner.getId(container);
+      let render;
+      switch (spinner) {
+        case 'dual-ring':
+          render = html`<div class="lds-dual-ring"></div>`;
+          break;
+        case 'dual-ring-mini':
+        default:
+          render = html`<div class="lds-dual-ring-mini"></div>`;
+          break;
+      }
+      const style = {
+        'text-align': 'center',
+      };
+      append(
+        container,
+        html`
+          <div
+            class="abs center ${id}"
+            style="${renderCssAttr({
+              style,
+            })}"
+          >
+            ${options.prepend ? options.prepend : ''} ${render} ${options.append ? options.append : ''}
+          </div>
+        `,
+      );
+      const label = BtnIcon.findLabel(s(container));
+      if (label) label.classList.add('hide');
+    },
+    stop: function (container) {
+      const id = LoadingAnimation.spinner.getId(container);
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).remove();
+      const label = BtnIcon.findLabel(s(container));
+      if (label) label.classList.remove('hide');
+    },
+  };
+  static img = {
+    tokens: {},
+    load: function ({ key, src, classes, style }) {
+      LoadingAnimation.img.tokens[key] = { src, classes, style };
+    },
+    play: function (container, key) {
+      append(
+        container,
+        html`<img
+          ${LoadingAnimation.img.tokens[key].classes ? `class="${LoadingAnimation.img.tokens[key].classes}"` : ''}
+          ${LoadingAnimation.img.tokens[key].style ? `style="${LoadingAnimation.img.tokens[key].style}"` : ''}
+          src="${getProxyPath()}${LoadingAnimation.img.tokens[key].src}"
+        />`,
+      );
+    },
+  };
+  static barLevel = {
+    append: () => {
+      if (Array.from(sa('.ssr-loading-bar-block')).length >= 5) return;
+      s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
+      append('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+    clear: () => {
+      htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+  };
+  static removeSplashScreen(backgroundContainer, callBack) {
+    if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
+    if (!backgroundContainer) backgroundContainer = '.ssr-background';
+    if (s(backgroundContainer)) {
+      s(backgroundContainer).style.display = 'none';
+      if (callBack) callBack();
+    }
+  }
+  static RenderCurrentSrcLoad(event) {
+    if (s(`.ssr-loading-info`)) {
+      let nameSrcLoad = event.data.path;
+      if (nameSrcLoad) {
+        if (nameSrcLoad.match('assets'))
+          nameSrcLoad =
+            location.hostname +
+            location.pathname +
+            (location.pathname[location.pathname.length - 1] !== '/' ? '/' : '') +
+            'assets';
+        else if (!nameSrcLoad.match('api')) nameSrcLoad = undefined;
+        if (nameSrcLoad)
+          htmls(
+            `.ssr-loading-info`,
+            html`<span style="color: white">Loading </span> ...${nameSrcLoad.slice(-30).replaceAll('file', 'storage')}`,
+          );
+      }
+    }
+  }
+}
+export { LoadingAnimation };

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

@@ -0,0 +1,212 @@
+import { CoreService, getApiBaseUrl } from '../../services/core/core.service.js';
+import { FileService } from '../../services/file/file.service.js';
+import { UserService } from '../../services/user/user.service.js';
+import { Auth } from './Auth.js';
+import { BtnIcon } from './BtnIcon.js';
+import { EventsUI } from './EventsUI.js';
+import { Input } from './Input.js';
+import { loggerFactory } from './Logger.js';
+import { NotificationManager } from './NotificationManager.js';
+import { AuthEventType, authLoginEvents } from './ClientEvents.js';
+import { Translate } from './Translate.js';
+import { Validator } from './Validator.js';
+import { htmls, s } from './VanillaJs.js';
+import { WebhookProvider } from './Webhook.js';
+const logger = loggerFactory(import.meta);
+class LogIn {
+  static Scope = {
+    user: {
+      main: {
+        model: {
+          user: {},
+        },
+      },
+    },
+  };
+  static Event = {};
+  static onLogin(listener, options = {}) {
+    return authLoginEvents.on(AuthEventType.login, listener, options);
+  }
+  static offLogin(key) {
+    return authLoginEvents.off(key);
+  }
+  static hasLoginListener(key) {
+    return authLoginEvents.has(key);
+  }
+  static async Trigger(options) {
+    const { user } = options;
+    if (user) LogIn.Scope.user.main.model.user = { ...LogIn.Scope.user.main.model.user, ...user };
+    await authLoginEvents.emit(AuthEventType.login, options);
+    for (const eventKey of Object.keys(LogIn.Event)) await LogIn.Event[eventKey](options);
+    if (!user || user.role === 'guest') return;
+    await WebhookProvider.register({ user });
+    if (s(`.session`))
+      htmls(
+        `.session`,
+        html`<style>
+          .session-in-log-in {
+            display: block;
+          }
+          .session-inl-log-in {
+            display: inline-table;
+          }
+          .session-fl-log-in {
+            display: flow-root;
+          }
+          .session-in-log-out {
+            display: none;
+          }
+          .session-inl-log-out {
+            display: none;
+          }
+          .session-fl-log-out {
+            display: none;
+          }
+        </style>`,
+      );
+    if (!LogIn.Scope.user.main.model.user.profileImage) {
+      // Try to load profile image only if profileImageId exists
+      if (!LogIn.Scope.user.main.model.user.profileImage && user?.profileImageId) {
+        try {
+          const resultFile = await FileService.get({ id: user.profileImageId });
+          if (resultFile && resultFile.status === 'success' && resultFile.data[0]) {
+            const imageData = resultFile.data[0];
+            let imageSrc = null;
+            try {
+              // Handle new metadata-only format
+              if (!imageData.data?.data && imageData._id) {
+                imageSrc = getApiBaseUrl({ id: imageData._id, endpoint: 'file/blob' });
+              }
+              // Handle legacy format with buffer data
+              else if (imageData.data?.data) {
+                const imageBlob = new Blob([new Uint8Array(imageData.data.data)], { type: imageData.mimetype });
+                const imageFile = new File([imageBlob], imageData.name, { type: imageData.mimetype });
+                imageSrc = URL.createObjectURL(imageFile);
+              }
+              if (imageSrc) {
+                LogIn.Scope.user.main.model.user.profileImage = {
+                  resultFile,
+                  imageData,
+                  imageSrc,
+                };
+              }
+            } catch (error) {
+              logger.warn('Error processing profile image:', error);
+            }
+          }
+        } catch (error) {
+          logger.warn('Error fetching profile image:', error);
+        }
+      }
+      htmls(
+        `.action-btn-profile-log-in-render`,
+        html`<div class="abs center top-box-profile-img-container">
+          <img
+            class="abs center top-box-profile-img"
+            ${LogIn.Scope.user.main.model.user.profileImage
+              ? `src="${LogIn.Scope.user.main.model.user.profileImage.imageSrc}"`
+              : `src="${getApiBaseUrl({
+                  id: 'assets/avatar',
+                  endpoint: 'user',
+                })}"`}
+          />
+        </div>`,
+      );
+    }
+  }
+  static async instance() {
+    setTimeout(async () => {
+      const formData = [
+        { model: 'email', id: `log-in-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
+        { model: 'password', id: `log-in-password`, rules: [{ type: 'isEmpty' }] },
+      ];
+      const validators = await Validator.instance(formData);
+      EventsUI.onClick(`.btn-log-in`, async (e) => {
+        e.preventDefault();
+        const { errorMessage } = await validators();
+        if (errorMessage) return;
+        const body = {};
+        for (const inputData of formData) {
+          if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
+        }
+        const result = await UserService.post({ id: 'auth', body });
+        if (result.status === 'error' && result.message.match('attempts')) {
+          htmls(`.login-attempt-warn-value`, result.message.split(':')[1]);
+          s(`.login-attempt-warn-container`).classList.remove('hide');
+        } else s(`.login-attempt-warn-container`).classList.add('hide');
+        if (result.status === 'error' && result.message.match('locked')) {
+          htmls(`.login-attempt-warn-value0`, result.message.split(':')[1]);
+          s(`.login-attempt-warn-container0`).classList.remove('hide');
+        } else s(`.login-attempt-warn-container0`).classList.add('hide');
+        if (result.status === 'success') await Auth.sessionIn(result);
+        NotificationManager.Push({
+          html: result.status === 'success' ? Translate.instance(`${result.status}-user-log-in`) : result.message,
+          status: result.status,
+        });
+      });
+      s(`.btn-log-in-forgot-password`).onclick = () => {
+        s(`.main-btn-recover`).click();
+      };
+      s(`.btn-log-in-i-not-have-account`).onclick = () => {
+        s(`.main-btn-sign-up`).click();
+      };
+    });
+    return html`
+      <div class="in">
+        ${await BtnIcon.instance({
+          class: 'in section-mp form-button btn-log-in-i-not-have-account',
+          label: html`<i class="fas fa-user-plus"></i> ${Translate.instance(`i-not-have-account`)}
+            <br />
+            ${Translate.instance(`sign-up`)}`,
+          type: 'button',
+        })}
+      </div>
+      <form class="in">
+        <div class="in">
+          ${await Input.instance({
+            id: `log-in-email`,
+            type: 'email',
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.instance('email')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+            autocomplete: 'email',
+          })}
+        </div>
+        <div class="in">
+          ${await Input.instance({
+            id: `log-in-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('password')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await BtnIcon.instance({
+            class: 'in section-mp form-button btn-log-in-forgot-password',
+            label: html`<i class="fas fa-question-circle"></i> ${Translate.instance(`forgot-password`)}`,
+            type: 'button',
+          })}
+        </div>
+        <div class="in section-mp form-button login-attempt-warn-container hide">
+          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.instance('login-attempts-remaining')}
+          <span style="color: #ed9d0f" class="login-attempt-warn-value"></span>
+        </div>
+        <div class="in section-mp form-button login-attempt-warn-container0 hide">
+          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.instance('account-locked-try-again-in')}
+          <span style="color: #ed9d0f" class="login-attempt-warn-value0"></span>
+        </div>
+
+        <div class="in">
+          ${await BtnIcon.instance({
+            class: 'in section-mp form-button btn-log-in',
+            label: Translate.instance('log-in'),
+            type: 'submit',
+          })}
+        </div>
+      </form>
+    `;
+  }
+}
+export { LogIn };

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

@@ -0,0 +1,72 @@
+import { Auth } from './Auth.js';
+import { BtnIcon } from './BtnIcon.js';
+import { AuthEventType, authLogoutEvents } from './ClientEvents.js';
+import { LogIn } from './LogIn.js';
+import { Translate } from './Translate.js';
+import { htmls, s } from './VanillaJs.js';
+import { WebhookProvider } from './Webhook.js';
+import { NotificationManager } from './NotificationManager.js';
+class LogOut {
+  static Event = {};
+  static onLogout(listener, options = {}) {
+    return authLogoutEvents.on(AuthEventType.logout, listener, options);
+  }
+  static offLogout(key) {
+    return authLogoutEvents.off(key);
+  }
+  static hasLogoutListener(key) {
+    return authLogoutEvents.has(key);
+  }
+  static async Trigger(options) {
+    await WebhookProvider.unregister();
+    await authLogoutEvents.emit(AuthEventType.logout, options);
+    for (const eventKey of Object.keys(LogOut.Event)) await LogOut.Event[eventKey](options);
+    if (s(`.session`))
+      htmls(
+        `.session`,
+        html`<style>
+          .session-in-log-out {
+            display: block;
+          }
+          .session-inl-log-out {
+            display: inline-table;
+          }
+          .session-fl-log-out {
+            display: flow-root;
+          }
+          .session-in-log-in {
+            display: none;
+          }
+          .session-inl-log-in {
+            display: none;
+          }
+          .session-fl-log-in {
+            display: none;
+          }
+        </style>`,
+      );
+  }
+  static async instance() {
+    setTimeout(() => {
+      s('.btn-log-out').onclick = async (e) => {
+        e.preventDefault();
+        await Auth.sessionOut();
+        NotificationManager.Push({
+          html: Translate.instance(`success-logout`),
+          status: 'success',
+        });
+      };
+    });
+    // Translate.instance('confirm-logout')
+    return html` <form class="in">
+      <div class="in">
+        ${await BtnIcon.instance({
+          class: 'inl section-mp btn-custom btn-log-out',
+          label: html`<i class="fa-solid fa-power-off"></i> ${Translate.instance('log-out')}`,
+          type: 'submit',
+        })}
+      </div>
+    </form>`;
+  }
+}
+export { LogOut };

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

@@ -0,0 +1,22 @@
+import { getCurrentTrace } from './CommonJs.js';
+
+const loggerFactory = (meta, options = { trace: false }) => {
+  meta = meta.url.split('/').pop();
+  const types = ['error', 'warn', 'info', 'debug'];
+  const logger = {
+    log: function (type, args) {
+      if (!window.renderPayload.dev) return;
+      if (options.trace === true) args.push(getCurrentTrace().split('Logger.js')[1]);
+      return console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args);
+    },
+  };
+  types.map(
+    (type) =>
+      (logger[type] = function (...args) {
+        return this.log(type, args);
+      }),
+  );
+  return logger;
+};
+
+export { loggerFactory };