@underpostnet/cyberia 3.2.80

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

@@ -0,0 +1,95 @@
+import { CryptoService } from '../../services/crypto/crypto.service.js';
+import { UserService } from '../../services/user/user.service.js';
+import { Auth } from './Auth.js';
+import { BtnIcon } from './BtnIcon.js';
+import { getId } from './CommonJs.js';
+import { dynamicCol } from './Css.js';
+import { EventsUI } from './EventsUI.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Translate } from './Translate.js';
+import { copyData, htmls, s } from './VanillaJs.js';
+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),
+          );
+          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: {
+              data: JSON.stringify(publicKey),
+              format,
+              algorithm,
+            },
+          });
+        }
+        NotificationManager.Push({
+          // 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.instance('success-copy-data'),
+            status: 'success',
+          });
+        });
+      });
+    });
+    return html`
+      ${dynamicCol({ containerSelector: options.idModal, id: `wallet-${id}` })}
+      <div class="fl">
+        <div class="in fll wallet-${id}-col-a">
+          <div class="in section-mp">
+            <div class="in sub-title-modal"><i class="fas fa-key"></i> JWK Management</div>
+            <div class="in section-mp m">
+              Client side <b>JSON Web Keys</b> (<a href="https://datatracker.ietf.org/doc/html/rfc7517">RFC7517</a>)
+              based on elliptic curve digital signature,
+              <a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto">more info</a>.
+            </div>
+            ${await BtnIcon.instance({
+              class: `inl section-mp btn-custom btn-generate-keys-${id}`,
+              label: html`<i class="fa-solid fa-arrows-rotate"></i> ${Translate.instance('generate')}
+                ${Translate.instance('keys')}`,
+            })}
+            ${await BtnIcon.instance({
+              class: `inl section-mp btn-custom btn-copy-keys-${id}`,
+              label: html`<i class="fas fa-copy"></i> ${Translate.instance('copy')} ${Translate.instance('keys')}`,
+            })}
+          </div>
+        </div>
+        <div class="in fll wallet-${id}-col-b">
+          <div class="in section-mp">
+            <pre class="in keys-display"></pre>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+export { Wallet };

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

@@ -0,0 +1,44 @@
+// https://javascript.info/
+// https://javascript.info/web-components
+
+class MyElement extends HTMLElement {
+  constructor() {
+    super();
+    // element created
+  }
+
+  connectedCallback() {
+    // browser calls this method when the element is added to the document
+    // (can be called many times if an element is repeatedly added/removed)
+  }
+
+  disconnectedCallback() {
+    // browser calls this method when the element is removed from the document
+    // (can be called many times if an element is repeatedly added/removed)
+  }
+
+  static get observedAttributes() {
+    return [
+      /* array of attribute names to monitor for changes */
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    // called when one of attributes listed above is modified
+  }
+
+  adoptedCallback() {
+    // called when the element is moved to a new document
+    // (happens in document.adoptNode, very rarely used)
+  }
+
+  // there can be other element methods and properties
+}
+
+customElements.define('my-element', MyElement);
+
+// Now for any HTML elements with tag <my-element>,
+// an instance of MyElement is created, and the aforementioned
+// methods are called.
+
+export { MyElement };

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

@@ -0,0 +1,58 @@
+/**
+ * WebSocket session registration bridge.
+ * Registers and unregisters the authenticated user's identity with the server-side
+ * WebSocket management layer, enabling targeted real-time pushes (e.g. email confirmation).
+ *
+ * @module client/core/Webhook
+ * @namespace WebhookProvider
+ */
+import { SocketIo } from './SocketIo.js';
+
+/**
+ * @class WebhookProvider
+ * @classdesc Provides static methods to register/unregister the authenticated user
+ * with the server-side WebSocket session management channels.
+ * @memberof WebhookProvider
+ */
+class WebhookProvider {
+  /**
+   * Registers the authenticated user with the server-side WebSocket channels.
+   * Creates a user↔socket mapping on the server, enabling targeted events.
+   *
+   * @static
+   * @async
+   * @param {Object} options - Registration options.
+   * @param {Object} options.user - The authenticated user object to register.
+   * @returns {Promise<void>}
+   */
+  static async register(options = { user: {} }) {
+    const { user } = options;
+    SocketIo.Emit('mailer', {
+      status: 'register-user',
+      user,
+    });
+    SocketIo.Emit('user', {
+      status: 'register-user',
+      user,
+    });
+  }
+
+  /**
+   * Unregisters the current user from server-side WebSocket channels.
+   * Cleans up the user↔socket mapping on the server.
+   *
+   * @static
+   * @async
+   * @returns {Promise<void>}
+   */
+  static async unregister() {
+    SocketIo.Emit('mailer', {
+      status: 'unregister-user',
+    });
+    SocketIo.Emit('user', {
+      status: 'unregister-user',
+    });
+  }
+}
+
+export { WebhookProvider };

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

@@ -0,0 +1,313 @@
+/**
+ * Progressive Web App (PWA) worker integration: service worker lifecycle,
+ * cache management, and the bootstrap path that wires the app's router,
+ * shell, translation, sockets, and session components together.
+ *
+ * The public surface is a single `PwaWorker` class with one shared instance,
+ * re-exported as `Worker` for backward compatibility.
+ *
+ * @module src/client/components/core/Worker.js
+ * @namespace PwaWorker
+ */
+
+import { BtnIcon } from './BtnIcon.js';
+import { EventsUI } from './EventsUI.js';
+import { LoadingAnimation } from './LoadingAnimation.js';
+import { loggerFactory } from './Logger.js';
+import { LoadRouter, registerRoutes, getProxyPath } from './Router.js';
+import { Translate, TranslateCore } from './Translate.js';
+import { s } from './VanillaJs.js';
+import { Css } from './Css.js';
+import { Responsive } from './Responsive.js';
+import { SocketIo } from './SocketIo.js';
+import { Keyboard } from './Keyboard.js';
+
+const logger = loggerFactory(import.meta);
+
+const SW_URL = () => `${getProxyPath()}sw.js`;
+
+/**
+ * @memberof PwaWorker
+ */
+class PwaWorker {
+  /** App title sourced from <title>. @type {string} */
+  title = '';
+
+  /** Router instance reference, set during bootstrap. @type {object | null} */
+  RouterInstance = null;
+
+  constructor() {
+    this.title = `${s('title').textContent}`;
+    if (!window.renderPayload?.dev) {
+      console.log = () => null;
+      console.error = () => null;
+      console.info = () => null;
+      console.warn = () => null;
+    }
+  }
+
+  /** @returns {boolean} True when running on localhost or with renderPayload.dev. */
+  devMode() {
+    return Boolean(
+      window.renderPayload?.dev || location.origin.match('localhost') || location.origin.match('127.0.0.1'),
+    );
+  }
+
+  /**
+   * Awaits a component's `instance()` method, a plain function, or an array of either.
+   * Used by `instance()` to keep the bootstrap declarative.
+   * @private
+   */
+  async #initComponent(component, options) {
+    if (!component) return;
+    if (Array.isArray(component)) {
+      for (const item of component) await this.#initComponent(item, options);
+      return;
+    }
+    if (typeof component.instance === 'function') return void (await component.instance(options));
+    if (typeof component === 'function') await component(options);
+  }
+
+  /**
+   * Bootstraps the app with a declarative options object. Shared core inits
+   * (Css, TranslateCore, Responsive, SocketIo, Keyboard) run in the correct
+   * order so per-app entrypoints only declare what's app-specific.
+   *
+   * @param {object} options
+   * @param {function|object}             options.router       Router class (with static `instance()`) or factory.
+   * @param {function(): Promise<string>} [options.template]   Async function returning the landing HTML body.
+   * @param {Array}                       [options.themes]     CSS theme list passed to `Css.loadThemes()`.
+   * @param {object|Array}                [options.translate]  App-level translation class(es).
+   * @param {object}                      [options.render]     AppShell class with `instance({ htmlMainBody })`.
+   * @param {string}                      [options.socketPath] Socket.IO path override.
+   * @param {object}                      [options.appStore]   AppStore whose `.Data` supplies socket channels.
+   * @param {object}                      [options.session]    `{ socket, login, signout|logout, signup, account }`.
+   * @returns {Promise<void>}
+   */
+  async instance({ router, template, themes, translate, render, socketPath, appStore, session }) {
+    window.ononline = () => logger.warn('ononline');
+    window.onoffline = () => logger.warn('onoffline');
+
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        logger.info('The controller of current browsing context has changed.');
+      });
+      navigator.serviceWorker.ready.then((worker) => {
+        logger.info('Service Worker Ready', worker);
+        navigator.serviceWorker.addEventListener('message', (event) => {
+          logger.info('Received event message', event.data);
+          if (event.data?.status === 'loader') LoadingAnimation.RenderCurrentSrcLoad(event);
+        });
+      });
+    }
+
+    this.RouterInstance = typeof router?.instance === 'function' ? router.instance() : router();
+    if (this.RouterInstance?.Routes) registerRoutes(this.RouterInstance.Routes);
+
+    // Defer SW registration out of the render critical path. Firefox in
+    // particular pays a non-trivial IPC cost for SW registration; running it
+    // after `load` keeps first paint unblocked across all engines.
+    this.#registerDeferred();
+
+    // Shared core inits — keep order: theme → translation → responsive → shell.
+    if (themes) await Css.loadThemes(themes);
+    await this.#initComponent(TranslateCore);
+    await this.#initComponent(translate);
+    await this.#initComponent(Responsive);
+
+    if (render && typeof render.instance === 'function') {
+      const htmlMainBody = typeof template === 'function' ? template : undefined;
+      await this.#initComponent(render, htmlMainBody ? { htmlMainBody } : undefined);
+    }
+
+    const channels = appStore?.Data ?? session?.socket?.Data;
+    await this.#initComponent(SocketIo, { channels, path: socketPath });
+
+    if (session) {
+      await this.#initComponent(session.socket);
+      await this.#initComponent(session.login);
+      await this.#initComponent(session.logout || session.signout);
+      await this.#initComponent(session.signup);
+      await this.#initComponent(session.account);
+    }
+
+    await this.#initComponent(Keyboard);
+    await LoadRouter(this.RouterInstance);
+    LoadingAnimation.removeSplashScreen();
+    window.serviceWorkerReady = true;
+  }
+
+  /**
+   * Schedules SW registration to run after page `load` (or immediately if
+   * the page is already loaded). Idempotent: existing registrations are
+   * left alone; missing ones are registered.
+   * @private
+   */
+  #registerDeferred() {
+    if (!('serviceWorker' in navigator)) {
+      logger.warn('Service Worker disabled in browser');
+      return;
+    }
+    const run = async () => {
+      const registration = await this.getRegistration();
+      if (!registration) await this.register();
+    };
+    if (document.readyState === 'complete') run();
+    else window.addEventListener('load', run, { once: true });
+  }
+
+  /** Returns the current service worker registration, if any. */
+  getRegistration() {
+    return 'serviceWorker' in navigator ? navigator.serviceWorker.getRegistration() : Promise.resolve(undefined);
+  }
+
+  /** Registers `sw.js` with the browser. Resolves with the registration (or `null` on failure). */
+  async register() {
+    if (!('serviceWorker' in navigator)) {
+      logger.warn('Service Worker disabled in browser');
+      return null;
+    }
+    try {
+      const registration = await navigator.serviceWorker.register(SW_URL());
+      logger.warn('Service Worker registered', registration);
+      return registration;
+    } catch (error) {
+      logger.error('Error registering service worker:', error);
+      return null;
+    }
+  }
+
+  /**
+   * Reloads the page, asking the active SW to skip waiting first so the
+   * new version takes effect on the next load.
+   * @param {number} [delay=3000] Milliseconds before reload.
+   */
+  async reload(delay = 3000) {
+    navigator.serviceWorker?.controller?.postMessage({ status: 'skipWaiting' });
+    return new Promise((resolve) => setTimeout(() => resolve(location.reload()), delay));
+  }
+
+  /** Deletes every cache visible to the SW. Returns the number of caches removed. */
+  async clearAllCaches() {
+    const names = await caches.keys();
+    await Promise.all(names.map((name) => caches.delete(name)));
+    return names.length;
+  }
+
+  /**
+   * Deletes Workbox/background-sync IndexedDB databases that may pin stale state
+   * across reloads. Safe no-op in browsers without `indexedDB.databases`.
+   */
+  async clearWorkboxIndexedDb() {
+    if (!('indexedDB' in window) || typeof indexedDB.databases !== 'function') return 0;
+    const databases = await indexedDB.databases();
+    const targets = databases
+      .map((db) => db.name)
+      .filter(
+        (name) =>
+          typeof name === 'string' &&
+          (name.toLowerCase().includes('workbox') ||
+            name.toLowerCase().includes('background-sync') ||
+            name.includes('api-mutation-queue')),
+      );
+
+    await Promise.all(
+      targets.map(
+        (name) =>
+          new Promise((resolve) => {
+            const req = indexedDB.deleteDatabase(name);
+            req.onsuccess = () => resolve(true);
+            req.onerror = () => resolve(false);
+            req.onblocked = () => resolve(false);
+          }),
+      ),
+    );
+    return targets.length;
+  }
+
+  /**
+   * Asks the active SW to drop its caches and confirm. Resolves `false`
+   * after 1500 ms if the SW does not reply.
+   */
+  async requestWorkboxReset() {
+    if (!navigator.serviceWorker?.controller) return false;
+    return new Promise((resolve) => {
+      const channel = new MessageChannel();
+      const timeoutId = setTimeout(() => resolve(false), 1500);
+      channel.port1.onmessage = (event) => {
+        clearTimeout(timeoutId);
+        resolve(event.data?.status === 'workbox-reset-done');
+      };
+      navigator.serviceWorker.controller.postMessage({ status: 'workbox-reset' }, [channel.port2]);
+    });
+  }
+
+  /**
+   * Targeted cache invalidation: removes app-shell entries for components,
+   * services, and index bundles, then forces the SW registration to update.
+   * Cheaper than a full reset; used as the default "Update" action.
+   */
+  async update() {
+    const registration = await this.getRegistration();
+    if (!registration) return;
+    const names = await caches.keys();
+    for (const name of names) {
+      if (name.match('components/') || name.match('services/') || name.match('.index.js')) {
+        await caches.delete(name);
+      }
+    }
+    await registration.update();
+  }
+
+  /** Unregisters all SWs and drops every cache. */
+  async unregister() {
+    if (!('serviceWorker' in navigator)) {
+      logger.warn('Service Worker disabled in browser');
+      return;
+    }
+    try {
+      const registrations = await navigator.serviceWorker.getRegistrations();
+      await this.clearAllCaches();
+      for (const registration of registrations) {
+        logger.info('Removing service worker registration', registration);
+        registration.unregister();
+      }
+    } catch (error) {
+      logger.error('Error during service worker unregistration:', error);
+    }
+  }
+
+  /** Full reset: workbox runtime + SW + client storage. Use when caches are visibly stale. */
+  async resetAndRestart() {
+    localStorage.clear();
+    sessionStorage.clear();
+    await this.requestWorkboxReset();
+    await this.unregister();
+    await this.clearAllCaches();
+    await this.clearWorkboxIndexedDb();
+    await this.register();
+    await this.reload(600);
+  }
+
+  /** Settings panel UI: a single "clean cache" action wired to `resetAndRestart`. */
+  async RenderSetting() {
+    setTimeout(() => {
+      EventsUI.onClick(`.btn-clean-cache`, async (e) => {
+        e.preventDefault();
+        await this.resetAndRestart();
+      });
+    });
+    return html` <div class="in">
+      ${await BtnIcon.instance({
+        class: 'inl section-mp btn-custom btn-clean-cache',
+        label: html`<i class="fa-solid fa-broom"></i> ${Translate.instance('clean-cache')}`,
+      })}
+    </div>`;
+  }
+}
+
+const PwaWorkerInstance = new PwaWorker();
+
+export { PwaWorker };
+// Backward-compat alias — older code imports the singleton as `Worker`.
+export { PwaWorkerInstance as Worker };