@underpostnet/cyberia 3.2.80

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

@@ -0,0 +1,153 @@
+import { UserService } from '../../services/user/user.service.js';
+import { Auth } from './Auth.js';
+import { BtnIcon } from './BtnIcon.js';
+import { AuthEventType, authSignupEvents } from './ClientEvents.js';
+import { EventsUI } from './EventsUI.js';
+import { Input } from './Input.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Translate } from './Translate.js';
+import { Validator } from './Validator.js';
+import { s } from './VanillaJs.js';
+class SignUp {
+  static Event = {};
+  static onSignup(listener, options = {}) {
+    return authSignupEvents.on(AuthEventType.signup, listener, options);
+  }
+  static offSignup(key) {
+    return authSignupEvents.off(key);
+  }
+  static hasSignupListener(key) {
+    return authSignupEvents.has(key);
+  }
+  static async Trigger(options) {
+    await authSignupEvents.emit(AuthEventType.signup, options);
+    for (const eventKey of Object.keys(SignUp.Event)) await SignUp.Event[eventKey](options);
+  }
+  static async instance(options = { bottomRender: async () => '' }) {
+    setTimeout(async () => {
+      const formData = [
+        {
+          model: 'username',
+          id: `sign-up-username`,
+          rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }, { type: 'isValidUsername' }],
+        },
+        { model: 'email', id: `sign-up-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
+        {
+          model: 'password',
+          id: `sign-up-password`,
+          rules: [{ type: 'isStrongPassword' }],
+        },
+        {
+          id: `sign-up-repeat-password`,
+          rules: [{ type: 'isEmpty' }, { type: 'passwordMismatch', options: `sign-up-password` }],
+        },
+      ];
+      const validators = await Validator.instance(formData);
+      EventsUI.onClick(`.btn-sign-up`, 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({ body });
+        const handleSignUpError = (data) => {
+          let error = '';
+          if (data.message) {
+            if (data.message.match('duplicate')) {
+              if (data.message.match('username')) error += Translate.instance('error-username-taken');
+              if (data.message.match('email')) error += Translate.instance('error-email-taken');
+            } else {
+              if (data.message.match('username')) error += Translate.instance('error-username-invalid');
+              if (data.message.match('email')) error += Translate.instance('error-email-invalid');
+              if (data.message.match('password')) error += Translate.instance('error-password-invalid');
+            }
+            return error;
+          }
+          return Translate.instance('error-register-user');
+        };
+        NotificationManager.Push({
+          html:
+            typeof result.data === 'string'
+              ? result.data
+              : result.status === 'success'
+                ? Translate.instance(`success-register-user`)
+                : handleSignUpError(result),
+          status: result.status,
+        });
+        if (result.status === 'success') {
+          await Auth.sessionIn(result);
+          setTimeout(() => {
+            if (s(`.btn-close-${options.idModal}`)) s(`.btn-close-${options.idModal}`).click();
+          });
+        }
+      });
+      setTimeout(() => {
+        s(`.btn-sign-up-i-have-account`).onclick = () => {
+          s(`.main-btn-log-in`).click();
+        };
+      });
+    });
+    return html`
+      ${await BtnIcon.instance({
+        class: 'in section-mp form-button btn-sign-up-i-have-account',
+        label: html`<i class="fas fa-sign-in-alt"></i> ${Translate.instance('i-have-account')}<br />${Translate.instance(
+            'log-in',
+          )}`,
+        type: 'button',
+      })}
+      <form class="in">
+        <div class="in">
+          ${await Input.instance({
+            id: `sign-up-username`,
+            type: 'text',
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.instance('username')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.instance({
+            id: `sign-up-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: `sign-up-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 Input.instance({
+            id: `sign-up-repeat-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('repeat')}
+              ${Translate.instance('password')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+          })}
+        </div>
+        ${options?.bottomRender ? await options.bottomRender() : ``}
+        <div class="in">
+          ${await BtnIcon.instance({
+            class: 'in section-mp form-button btn-sign-up',
+            label: Translate.instance('sign-up'),
+            type: 'submit',
+          })}
+        </div>
+      </form>
+    `;
+  }
+}
+export { SignUp };

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

@@ -0,0 +1,163 @@
+/**
+ * Client-side WebSocket provider using Socket.IO.
+ * Manages a singleton socket connection, channel registration, and event dispatching.
+ *
+ * @module client/core/SocketIo
+ * @namespace SocketIoProvider
+ */
+import { io } from 'socket.io/client-dist/socket.io.esm.min.js';
+import { SocketEventType, socketEvents } from './ClientEvents.js';
+import { loggerFactory } from './Logger.js';
+import { getWsBasePath, getWsBaseUrl } from '../../services/core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+/**
+ * @class SocketIoProvider
+ * @classdesc Provides static methods for managing a singleton Socket.IO client connection,
+ * channel event dispatching, and message emission.
+ * @memberof SocketIoProvider
+ */
+class SocketIoProvider {
+  /**
+   * Event callback registry, keyed by channel name → unique callback ID → handler function.
+   * Built-in channels: `connect`, `connect_error`, `disconnect`.
+   *
+   * @static
+   * @type {Object.<string, Object.<string, function>>}
+   */
+  static Event = {
+    connect: {},
+    connect_error: {},
+    disconnect: {},
+  };
+
+  /**
+   * The active Socket.IO client socket instance.
+   *
+   * @static
+   * @type {import('socket.io-client').Socket|null}
+   */
+  static socket = null;
+
+  /**
+   * The current WebSocket host URL.
+   *
+   * @static
+   * @type {string|undefined}
+   */
+  static host;
+  static onConnect(listener, options = {}) {
+    return socketEvents.on(SocketEventType.connect, listener, options);
+  }
+  static offConnect(key) {
+    return socketEvents.off(key);
+  }
+  static onConnectError(listener, options = {}) {
+    return socketEvents.on(SocketEventType.connectError, listener, options);
+  }
+  static offConnectError(key) {
+    return socketEvents.off(key);
+  }
+  static onDisconnect(listener, options = {}) {
+    return socketEvents.on(SocketEventType.disconnect, listener, options);
+  }
+  static offDisconnect(key) {
+    return socketEvents.off(key);
+  }
+  static onChannel(type, listener, options = {}) {
+    return socketEvents.on(SocketEventType.channel(type), listener, options);
+  }
+  static offChannel(key) {
+    return socketEvents.off(key);
+  }
+
+  /**
+   * Emits a JSON-serialized payload to the server on the specified channel.
+   *
+   * @static
+   * @param {string} [channel=''] - The channel/event name to emit on.
+   * @param {Object} [payload={}] - The data to send.
+   * @returns {void}
+   */
+  static Emit(channel = '', payload = {}) {
+    try {
+      this.socket.emit(channel, JSON.stringify(payload));
+    } catch (error) {
+      logger.error(error);
+    }
+  }
+
+  /**
+   * Initializes (or re-initializes) the Socket.IO connection.
+   * Disconnects any existing socket, creates a new connection, and registers
+   * built-in event listeners and custom channels.
+   *
+   * @static
+   * @async
+   * @param {Object} options - Connection options.
+   * @param {string} [options.host] - Override WebSocket host URL.
+   * @param {Object.<string, Object>} [options.channels] - Channel definitions to register listeners for.
+   * @returns {Promise<void>}
+   */
+  static async instance(options) {
+    if (this.socket) this.socket.disconnect();
+    const path = getWsBasePath();
+    this.host = options.host ? options.host : getWsBaseUrl({ wsBasePath: '' });
+    logger.info(`ws host:`, {
+      host: this.host,
+      path,
+    });
+    const connectOptions = {
+      path: path === '/' ? undefined : path,
+      withCredentials: true,
+      extraHeaders: {},
+      transports: ['websocket', 'polling', 'flashsocket'],
+    };
+    this.socket = io(this.host, connectOptions);
+
+    this.socket.on('connect', () => {
+      logger.info(`event: connect | session id: ${this.socket.id}`);
+      socketEvents.emit(SocketEventType.connect, { id: this.socket.id });
+      Object.keys(this.Event.connect).map((keyEvent) => this.Event.connect[keyEvent]());
+    });
+
+    this.socket.on('connect_error', (err) => {
+      logger.info(`event: connect_error | reason: ${err.message}`);
+      socketEvents.emit(SocketEventType.connectError, { error: err });
+      Object.keys(this.Event.connect_error).map((keyEvent) => this.Event.connect_error[keyEvent](err));
+    });
+
+    this.socket.on('disconnect', (reason) => {
+      logger.info(`event: disconnect | reason: ${reason}`);
+      socketEvents.emit(SocketEventType.disconnect, { reason });
+      Object.keys(this.Event.disconnect).map((keyEvent) => this.Event.disconnect[keyEvent](reason));
+    });
+
+    if (options && 'channels' in options) this.setChannels(options.channels);
+  }
+
+  /**
+   * Registers socket listeners for each channel key, routing incoming messages
+   * to all registered callbacks in `Event[channel]`.
+   *
+   * @static
+   * @param {Object.<string, Object>} channels - Channel definitions keyed by channel name.
+   * @returns {void}
+   */
+  static setChannels(channels) {
+    Object.keys(channels).map((type) => {
+      logger.info(`load chanel`, type);
+      if (!this.Event[type]) this.Event[type] = {};
+      this.socket.on(type, (...args) => {
+        socketEvents.emit(SocketEventType.channel(type), { type, args });
+        Object.keys(this.Event[type]).map((keyEvent) => this.Event[type][keyEvent](args));
+      });
+    });
+  }
+}
+
+/** @type {SocketIoProvider} Backward compatibility alias. */
+const SocketIo = SocketIoProvider;
+
+export { SocketIoProvider, SocketIo };

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

@@ -0,0 +1,75 @@
+/**
+ * Shared factory for app-specific WebSocket event handlers.
+ * Eliminates duplication across per-app SocketIo*.js modules by providing
+ * common channel event handling (chat, email-confirmed, etc.).
+ *
+ * @module client/core/SocketIoHandler
+ * @namespace SocketIoHandlerProvider
+ */
+import { Account } from './Account.js';
+import { Chat } from './Chat.js';
+import { s4 } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { SocketIo } from './SocketIo.js';
+import { s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+/**
+ * @class SocketIoHandlerProvider
+ * @classdesc Provides a static factory method to create app-specific SocketIo event handlers
+ * from an {@link AppStore} instance. Handles common channel events (chat, email-confirmed)
+ * and wires connect/disconnect lifecycle.
+ * @memberof SocketIoHandlerProvider
+ */
+class SocketIoHandlerProvider {
+  /**
+   * Creates a standard SocketIo event initialization object for an app module.
+   *
+   * @static
+   * @param {import('./AppStore.js').AppStore} appStore - The app-specific AppStore instance.
+   * @returns {{ instance: function(): Promise<void> }} An object with an `instance` method for SocketIo event registration.
+   */
+  static create(appStore) {
+    return {
+      instance() {
+        return new Promise((resolve) => {
+          for (const type of Object.keys(appStore.Data)) {
+            SocketIo.onChannel(type, async ({ args }) => {
+              args = JSON.parse(args[0]);
+              switch (type) {
+                case 'chat':
+                  {
+                    const idModal = 'modal-chat';
+                    if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
+                  }
+                  break;
+
+                default:
+                  break;
+              }
+              const { status } = args;
+
+              switch (status) {
+                case 'email-confirmed': {
+                  const newUser = { ...appStore.Data.user.main.model.user, emailConfirmed: true };
+                  Account.renderVerifyEmailStatus(newUser);
+                  Account.triggerUpdateEvent({ user: newUser });
+                  break;
+                }
+
+                default:
+                  break;
+              }
+            }, { key: s4() });
+          }
+          SocketIo.onConnect(async ({ id }) => {}, { key: s4() });
+          SocketIo.onDisconnect(async ({ reason }) => {}, { key: s4() });
+          return resolve();
+        });
+      },
+    };
+  }
+}
+
+export { SocketIoHandlerProvider };

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

@@ -0,0 +1,161 @@
+/**
+ * Client-side WebRTC stream manager backed by PeerJS.
+ * Handles peer creation, media capture, and room-based A/V streaming.
+ *
+ * @module client/core/Stream
+ * @see https://peerjs.com/docs/
+ */
+
+import { loggerFactory } from './Logger.js';
+import { getProxyPath } from './Router.js';
+
+const logger = loggerFactory(import.meta);
+
+/**
+ * @class Stream
+ * @classdesc Static manager for PeerJS connections and MediaStream lifecycle.
+ * Supports multiple concurrent peer sessions keyed by an arbitrary `id`.
+ */
+class Stream {
+  /** @type {Object.<string, { peer: Peer, options: Object }>} Active peer sessions keyed by session id. */
+  static #sessions = {};
+
+  /**
+   * Builds PeerJS connection options from current page location.
+   * @returns {{ host: string, port: number, path: string, secure: boolean }}
+   */
+  static #buildPeerOptions() {
+    return {
+      host: location.hostname,
+      port: location.protocol === 'https:' ? 443 : location.port ? parseInt(location.port) + 1 : 80,
+      path: `${getProxyPath()}peer`,
+      secure: location.protocol === 'https:',
+    };
+  }
+
+  /**
+   * Creates a PeerJS client for the given session id.
+   * @param {string} id - Unique session identifier.
+   * @returns {{ peer: Peer, options: Object }} The Peer instance and its options.
+   */
+  static createPeer(id) {
+    this.destroyPeer(id);
+    const options = this.#buildPeerOptions();
+    logger.info('peerOptions', options);
+    const peer = new Peer(undefined, options);
+    this.#sessions[id] = { peer, options };
+    return this.#sessions[id];
+  }
+
+  /**
+   * Returns an existing session or `undefined`.
+   * @param {string} id
+   * @returns {{ peer: Peer, options: Object }|undefined}
+   */
+  static getSession(id) {
+    return this.#sessions[id];
+  }
+
+  /**
+   * Destroys a peer session — closes all connections and the peer itself.
+   * @param {string} id - Session identifier.
+   */
+  static destroyPeer(id) {
+    const session = this.#sessions[id];
+    if (!session) return;
+    const { peer } = session;
+    if (peer) {
+      for (const key in peer.connections) {
+        for (const conn of peer.connections[key]) {
+          if (conn.peerConnection?.close) conn.peerConnection.close();
+          if (conn.close) conn.close();
+        }
+      }
+      if (!peer.destroyed) peer.destroy();
+    }
+    delete this.#sessions[id];
+  }
+
+  /**
+   * Calls a remote peer and streams local media to them.
+   * @param {string} id - Session identifier.
+   * @param {string} remotePeerId - The remote peer's ID.
+   * @param {MediaStream} localStream - Local media stream to send.
+   * @param {Object} [callbacks]
+   * @param {function(HTMLMediaElement): void} [callbacks.onStream] - Called when remote stream arrives.
+   * @param {function(HTMLMediaElement): void} [callbacks.onClose] - Called when the call closes.
+   * @returns {{ call: import('peerjs').MediaConnection, element: HTMLVideoElement }}
+   */
+  static callPeer(id, remotePeerId, localStream, { onStream, onClose } = {}) {
+    const session = this.#sessions[id];
+    if (!session) throw new Error(`No peer session "${id}"`);
+    const call = session.peer.call(remotePeerId, localStream);
+    const element = this.createVideoElement();
+    call.on('stream', (remoteStream) => {
+      this.attachStream(element, remoteStream);
+      onStream?.(element);
+    });
+    call.on('close', () => onClose?.(element));
+    return { call, element };
+  }
+
+  // ── Media helpers ────────────────────────────────────────────────
+
+  /**
+   * Requests user media (camera / microphone) with graceful fallback.
+   * Falls back to video-only if audio is unavailable (NotReadableError).
+   * @param {{ video?: boolean|MediaTrackConstraints, audio?: boolean|MediaTrackConstraints }} [constraints]
+   * @returns {Promise<MediaStream|undefined>}
+   */
+  static async getMediaStream(constraints = { video: true, audio: true }) {
+    const fallbacks = [
+      constraints,
+      constraints.audio ? { video: constraints.video, audio: false } : null,
+      constraints.video ? { video: false, audio: constraints.audio } : null,
+    ].filter(Boolean);
+
+    for (const c of fallbacks) {
+      try {
+        return await navigator.mediaDevices.getUserMedia(c);
+      } catch (err) {
+        logger.warn(`getUserMedia failed (${err.name}): ${err.message}`, c);
+      }
+    }
+    logger.error('All media capture attempts failed');
+    return undefined;
+  }
+
+  /**
+   * Stops all tracks of a MediaStream.
+   * @param {MediaStream} stream
+   */
+  static stopStream(stream) {
+    if (!stream) return;
+    stream.getTracks().forEach((track) => track.stop());
+  }
+
+  /**
+   * Creates a `<video>` element pre-configured for inline autoplay.
+   * @returns {HTMLVideoElement}
+   */
+  static createVideoElement() {
+    const video = document.createElement('video');
+    video.playsInline = true;
+    video.autoplay = true;
+    return video;
+  }
+
+  /**
+   * Attaches a MediaStream to a media element and starts playback.
+   * @param {HTMLMediaElement} element
+   * @param {MediaStream} stream
+   * @returns {HTMLMediaElement}
+   */
+  static attachStream(element, stream) {
+    element.srcObject = stream;
+    element.addEventListener('loadedmetadata', () => element.play());
+    return element;
+  }
+}
+
+export { Stream };

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

@@ -0,0 +1,89 @@
+import { getId } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { htmls, s } from './VanillaJs.js';
+const logger = loggerFactory(import.meta);
+class ToggleSwitch {
+  static Tokens = {};
+  static async instance(options) {
+    const id = options?.id ? options.id : getId(ToggleSwitch.Tokens, 'toggle-switch-');
+    ToggleSwitch.Tokens[id] = {};
+    const widthContent = 60;
+    const widthCircle = 20;
+    setTimeout(() => {
+      switch (options.displayMode) {
+        case 'checkbox':
+          break;
+        default:
+          s(`.${id}-circle`).style.left = `0px`;
+          break;
+      }
+      const onToggle = () => {
+        switch (options.displayMode) {
+          case 'checkbox':
+            htmls(`.${id}-circle`, html`<i class="fas fa-check"></i>`);
+            break;
+          default:
+            s(`.${id}-circle`).style.left = `${widthContent - widthCircle}px`;
+            s(`.${id}-circle`).classList.add(`toggle-switch-active`);
+            break;
+        }
+        s(`.${id}-checkbox`).checked = true;
+        options?.on?.checked ? options.on.checked() : null;
+      };
+      const offToggle = () => {
+        switch (options.displayMode) {
+          case 'checkbox':
+            htmls(`.${id}-circle`, html``);
+            break;
+          default:
+            s(`.${id}-circle`).style.left = `0px`;
+            s(`.${id}-circle`).classList.remove(`toggle-switch-active`);
+            break;
+        }
+        s(`.${id}-checkbox`).checked = false;
+        options?.on?.unchecked ? options.on.unchecked() : null;
+      };
+      const onClickEvent = () => {
+        s(`.${id}-checkbox`).checked ? offToggle() : onToggle();
+        logger.info(id, s(`.${id}-checkbox`).checked);
+      };
+      ToggleSwitch.Tokens[id].click = onClickEvent;
+      if (!options.disabledOnClick) s(`.${id}`).onclick = onClickEvent;
+      setTimeout(() => {
+        options?.checked ? onToggle() : null;
+        logger.info(id, s(`.${id}-checkbox`).checked);
+      });
+    });
+    if (options.type === 'checkbox') {
+    }
+    const htmlRender = html`
+      ${options?.displayMode === 'checkbox'
+        ? html`<div class="${options?.containerClass ? options.containerClass : 'inl box-content-border'} ${id}">
+            <div class="in ${id}-content toggle-switch-content-checkbox">
+              <div class="abs center ${id}-circle toggle-switch-circle-checkbox"></div>
+            </div>
+          </div>`
+        : html`<div class="${options?.containerClass ? options.containerClass : 'inl box-content-border'} ${id}">
+            <div class="in ${id}-content toggle-switch-content ">
+              <div class="in ${id}-circle toggle-switch-circle"></div>
+            </div>
+          </div>`}
+      <input type="checkbox" class="${id}-checkbox" style="display: none" />
+    `;
+    if (options.wrapper) {
+      setTimeout(() => (s(`.toggle-form-container-${id}`).onclick = () => ToggleSwitch.Tokens[`${id}`].click()));
+      return html`
+        <div class="in toggle-form-container toggle-form-container-${id} hover">
+          <div class="fl ">
+            <div class="in fll" style="width: 70%">
+              <div class="in">${options.wrapperLabel}</div>
+            </div>
+            <div class="in fll" style="width: 30%">${htmlRender}</div>
+          </div>
+        </div>
+      `;
+    }
+    return htmlRender;
+  }
+}
+export { ToggleSwitch };