underpost 2.6.2

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

@@ -0,0 +1,204 @@
+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 { LogIn } from './LogIn.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Translate } from './Translate.js';
+import { Validator } from './Validator.js';
+import { getQueryParams, s } from './VanillaJs.js';
+
+const Recover = {
+  Event: {},
+  Trigger: async function (options) {
+    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+  },
+  Render: async function (options = { idModal: '', user: {}, bottomRender: async () => '' }) {
+    const { idModal, user } = options;
+    let mode = 'recover-verify-email';
+    const recoverToken = getQueryParams().payload;
+    const formData = {
+      'recover-username': {
+        model: 'username',
+        id: `recover-username`,
+        rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }],
+        show: () => false,
+        disable: function () {
+          return !this.show();
+        },
+      },
+      'recover-email': {
+        model: 'email',
+        id: `recover-email`,
+        rules: [{ type: 'isEmpty' }, { type: 'isEmail' }],
+        show: () => mode === 'recover-verify-email',
+        disable: function () {
+          return !this.show();
+        },
+      },
+      'recover-password': {
+        model: 'password',
+        id: `recover-password`,
+        rules: [{ type: 'isStrongPassword' }],
+        show: () => mode === 'change-password',
+        disable: function () {
+          return !this.show();
+        },
+      },
+      'recover-repeat-password': {
+        id: `recover-repeat-password`,
+        rules: [{ type: 'isEmpty' }, { type: 'passwordMismatch', options: `recover-password` }],
+        show: () => mode === 'change-password',
+        disable: function () {
+          return !this.show();
+        },
+      },
+    };
+
+    if (recoverToken) {
+      mode = 'change-password';
+    }
+
+    setTimeout(async () => {
+      if (user && user.email) {
+        s(`.recover-email`).value = user.email;
+        if (user.emailConfirmed) s(`.recover-email`).setAttribute('disabled', '');
+      }
+
+      const validators = await Validator.instance(formData);
+
+      EventsUI.onClick(`.btn-recover`, async (e) => {
+        e.preventDefault();
+        s(`.recover-resend-btn-container`).classList.add('hide');
+        s(`.recover-send-btn-container`).classList.remove('hide');
+        const { errorMessage } = await validators();
+        if (errorMessage) return;
+        const body = {};
+        for (const inputData of Object.values(formData)) {
+          if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
+        }
+        switch (mode) {
+          case 'recover-verify-email': {
+            const result = await UserService.post({ id: 'recover-verify-email', body });
+            NotificationManager.Push({
+              html:
+                result.status === 'error' ? result.message : Translate.Render(`${result.status}-recover-verify-email`),
+              status: result.status,
+            });
+            if (result.status === 'success') {
+              s(`.recover-send-btn-container`).classList.add('hide');
+              s(`.recover-resend-btn-container`).classList.remove('hide');
+            }
+            break;
+          }
+          case 'change-password': {
+            const result = await UserService.put({ id: `recover/${recoverToken}`, body });
+            NotificationManager.Push({
+              html:
+                typeof result.data === 'string' ? result.data : Translate.Render(`${result.status}-recover-password`),
+              status: result.status,
+            });
+            if (result.status === 'success') {
+              if (Auth.getToken()) {
+                s(`.btn-close-modal-recover`).click();
+                s(`.main-btn-account`).click();
+              } else {
+                s(`.btn-recover`).classList.add('hide');
+                s(`.input-container-recover-password`).classList.add('hide');
+                s(`.input-container-recover-repeat-password`).classList.add('hide');
+                s(`.btn-recover-log-in`).classList.remove('hide');
+              }
+              this.Trigger({ user: result.data });
+            }
+            break;
+          }
+        }
+      });
+      s(`.btn-recover-resend`).onclick = (e) => {
+        e.preventDefault();
+        s(`.btn-recover`).click();
+      };
+      s(`.btn-recover-log-in`).onclick = () => {
+        s(`.btn-close-modal-recover`).click();
+        s(`.main-btn-log-in`).click();
+      };
+    });
+    return html`
+      ${await BtnIcon.Render({
+        class: 'section-mp form-button btn-recover-log-in hide',
+        label: Translate.Render('log-in'),
+        type: 'button',
+      })}
+      <form class="in">
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-username`,
+            type: 'text',
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-username`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-email`,
+            type: 'email',
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-email`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+            autocomplete: 'email',
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-password`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `recover-repeat-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('repeat')} ${Translate.Render('password')}`,
+            containerClass: `inl section-mp width-mini-box input-container ${
+              formData[`recover-repeat-password`].show() ? '' : 'hide'
+            }`,
+            placeholder: true,
+          })}
+        </div>
+        ${options?.bottomRender ? await options.bottomRender() : ``}
+        <div class="in recover-send-btn-container">
+          ${await BtnIcon.Render({
+            class: 'section-mp form-button btn-recover',
+            label: Translate.Render(mode === 'recover-verify-email' ? 'send-recover-verify-email' : 'change-password'),
+            type: 'button',
+          })}
+        </div>
+        <div class="in recover-resend-btn-container hide">
+          <div class="in section-mp form-button" style="color: #ed9d0f">
+            <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('15-min-valid-recover-email')}
+          </div>
+          ${await BtnIcon.Render({
+            class: 'section-mp form-button btn-recover-resend',
+            label: html`${Translate.Render('resend')} ${Translate.Render('recover-verify-email')}`,
+            type: 'submit',
+          })}
+        </div>
+      </form>
+    `;
+  },
+};
+
+export { Recover };

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

@@ -0,0 +1,53 @@
+import { newInstance } from './CommonJs.js';
+import { getResponsiveData } from './VanillaJs.js';
+
+const Responsive = {
+  Data: {},
+  Event: {},
+  DelayEvent: {},
+  Observer: ResizeObserver,
+  getResponsiveData: function () {
+    return newInstance(this.Data);
+  },
+  getResponsiveDataAmplitude: function (options) {
+    const { dimAmplitude } = options;
+    const ResponsiveDataAmplitude = newInstance(this.Data);
+    ResponsiveDataAmplitude.minValue = ResponsiveDataAmplitude.minValue * dimAmplitude;
+    ResponsiveDataAmplitude.maxValue = ResponsiveDataAmplitude.maxValue * dimAmplitude;
+    ResponsiveDataAmplitude.width = ResponsiveDataAmplitude.width * dimAmplitude;
+    ResponsiveDataAmplitude.height = ResponsiveDataAmplitude.height * dimAmplitude;
+    return ResponsiveDataAmplitude;
+  },
+  resizeCallback: function () {
+    const Data = getResponsiveData();
+    if (Data.minValue !== Responsive.Data.minValue || Data.maxValue !== Responsive.Data.maxValue) {
+      Responsive.Data = Data;
+      Responsive.triggerEvents();
+    }
+  },
+  resize: 0,
+  Init: async function () {
+    Responsive.resizeCallback();
+    window.onresize = () => {
+      Responsive.resize++;
+      const resize = Responsive.resize;
+      Responsive.resizeCallback();
+      setTimeout(() => {
+        if (resize === Responsive.resize) {
+          Responsive.resizeCallback();
+          Responsive.resize = 0;
+          for (const event of Object.keys(Responsive.DelayEvent)) Responsive.DelayEvent[event]();
+        }
+      }, 750);
+    };
+    // alternative option
+    // this.Observer = new ResizeObserver(this.resizeCallback);
+    // this.Observer.observe(document.documentElement);
+  },
+  triggerEvents: function (keyEvent) {
+    if (keyEvent) return this.Event[keyEvent]();
+    return Object.keys(this.Event).map((key) => this.Event[key]());
+  },
+};
+
+export { Responsive };

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

@@ -0,0 +1,27 @@
+import { getId } from './CommonJs.js';
+import { s } from './VanillaJs.js';
+
+const RichText = {
+  Tokens: {},
+  Render: async function () {
+    const id = getId(this.Tokens, 'rich-text-');
+    this.Tokens[id] = {};
+    setTimeout(() => {
+      const easyMDE = new EasyMDE({ element: s(`#${id}`) });
+      // easyMDE.value();
+      // easyMDE.value(val);
+    });
+    return html` <style>
+        .md-container {
+          background: white;
+          color: black;
+        }
+        .md-container button {
+          color: black !important;
+        }
+      </style>
+      <div class="in md-container"><textarea id="${id}"></textarea></div>`;
+  },
+};
+
+export { RichText };

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

@@ -0,0 +1,77 @@
+import { titleFormatted } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { getProxyPath, getQueryParams, htmls, s, setPath } from './VanillaJs.js';
+
+// Router
+
+const logger = loggerFactory(import.meta);
+
+const setDocTitle = (options = { Routes: () => {}, route: '', NameApp: '' }) => {
+  const { Routes, route, NameApp } = options;
+  let title = titleFormatted(Routes()[`/${route}`].title);
+  if (Routes()[`/${route}`].upperCase) title = title.toUpperCase();
+  htmls('title', html`${title} | ${NameApp}`);
+  {
+    const routeId = route === '' ? 'home' : route;
+    if (s(`.main-btn-${routeId}`)) {
+      if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
+      if (s(`.main-btn-${routeId}`)) s(`.main-btn-${routeId}`).classList.add(`main-btn-menu-active`);
+    }
+  }
+};
+
+const RouterEvents = {};
+
+const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), NameApp: '' }) {
+  const { e, Routes, NameApp } = options;
+  const proxyPath = getProxyPath();
+  let path = window.location.pathname;
+  logger.info(options);
+
+  for (let route of Object.keys(Routes())) {
+    route = route.slice(1);
+    let pushPath = `${proxyPath}${route}`;
+
+    if (path[path.length - 1] !== '/') path = `${path}/`;
+    if (pushPath[pushPath.length - 1] !== '/') pushPath = `${pushPath}/`;
+
+    const routerEvent = { path, pushPath, route };
+
+    logger.info(routerEvent);
+
+    for (const event of Object.keys(RouterEvents)) RouterEvents[event](routerEvent);
+
+    if (path === pushPath) {
+      setDocTitle({ Routes, route, NameApp });
+      return Routes()[`/${route}`].render();
+    }
+  }
+};
+
+const LoadRouter = function (RouterInstance) {
+  Router(RouterInstance);
+  window.onpopstate = (e) => Router({ ...RouterInstance, e });
+};
+
+const setQueryPath = (options = { path: '', queryPath: '' }, queryKey = 'p') => {
+  const { queryPath, path } = options;
+  const newUri = `${getProxyPath()}${path}${queryPath ? `/?${queryKey}=${queryPath}` : ''}`;
+  const currentUri = `${window.location.pathname}${location.search}`;
+  if (currentUri !== newUri && currentUri !== `${newUri}/`) setPath(newUri);
+};
+
+const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'p') => {
+  RouterEvents[id] = ({ path, pushPath, proxyPath, route }) => {
+    if (route === routeId) {
+      setTimeout(() => {
+        const path = getQueryParams()[queryKey];
+        if (path) event(path);
+      });
+    }
+  };
+  setTimeout(() => {
+    RouterEvents[id]({ route: routeId });
+  });
+};
+
+export { Router, setDocTitle, LoadRouter, RouterEvents, setQueryPath, listenQueryPathInstance };

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

@@ -0,0 +1,125 @@
+import { UserService } from '../../services/user/user.service.js';
+import { BtnIcon } from './BtnIcon.js';
+import { EventsUI } from './EventsUI.js';
+import { Input } from './Input.js';
+import { LogIn } from './LogIn.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Translate } from './Translate.js';
+import { Validator } from './Validator.js';
+import { s } from './VanillaJs.js';
+
+const SignUp = {
+  Event: {},
+  Trigger: async function (options) {
+    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+  },
+  Render: async function (options = { bottomRender: async () => '' }) {
+    setTimeout(async () => {
+      const formData = [
+        {
+          model: 'username',
+          id: `sign-up-username`,
+          rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }],
+        },
+        { 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 });
+        NotificationManager.Push({
+          html:
+            typeof result.data === 'string'
+              ? result.data
+              : result.status === 'success'
+              ? Translate.Render(`success-register-user`)
+              : Translate.Render(`no-valid-register`),
+          status: result.status,
+        });
+        if (result.status === 'success') {
+          await this.Trigger(result.data);
+          await LogIn.Trigger(result.data);
+        }
+      });
+      s(`.btn-sign-up-i-have-account`).onclick = () => {
+        s(`.main-btn-log-in`).click();
+      };
+    });
+    return html`
+      ${await BtnIcon.Render({
+        class: 'section-mp form-button btn-sign-up-i-have-account',
+        label: html`<i class="fas fa-sign-in-alt"></i> ${Translate.Render('i-have-account')}<br />${Translate.Render(
+            'log-in',
+          )}`,
+        type: 'button',
+      })}
+      <form class="in">
+        <div class="in">
+          ${await Input.Render({
+            id: `sign-up-username`,
+            type: 'text',
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `sign-up-email`,
+            type: 'email',
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+            autocomplete: 'email',
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `sign-up-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `sign-up-repeat-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('repeat')} ${Translate.Render('password')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+          })}
+        </div>
+        ${options?.bottomRender ? await options.bottomRender() : ``}
+        <div class="in">
+          ${await BtnIcon.Render({
+            class: 'section-mp form-button btn-sign-up',
+            label: Translate.Render('sign-up'),
+            type: 'submit',
+          })}
+        </div>
+      </form>
+    `;
+  },
+};
+
+export { SignUp };

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

@@ -0,0 +1,72 @@
+import { io } from 'socket.io/client-dist/socket.io.esm.min.js';
+import { loggerFactory } from './Logger.js';
+import { getWsBasePath, getWsBaseUrl } from '../../services/core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+const SocketIo = {
+  Event: {
+    connect: {},
+    connect_error: {},
+    disconnect: {},
+  },
+  /** @type {import('socket.io').Socket} */
+  socket: null,
+  Emit: function (channel = '', payload = {}) {
+    try {
+      this.socket.emit(channel, JSON.stringify(payload));
+    } catch (error) {
+      logger.error(error);
+    }
+  },
+  Init: async function (options) {
+    if (this.socket) this.socket.disconnect();
+    this.host = getWsBaseUrl({ wsBasePath: '' });
+    logger.info(`ws host:`, this.host);
+    const path = getWsBasePath();
+    const connectOptions = {
+      path,
+      // auth: {
+      //   token: '',
+      // },
+      // query: {
+      //   'my-key': 'my-value',
+      // },
+      // forceNew: true,
+      // reconnectionAttempts: 'Infinity',
+      // timeout: 10000,
+      transports: ['websocket', 'polling', 'flashsocket'],
+    };
+    // logger.error(`connect options:`, JSON.stringify(connectOptions, null, 4));
+    this.socket = io(this.host, connectOptions);
+
+    this.socket.on('connect', () => {
+      logger.info(`event: connect | session 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}`);
+      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}`);
+      Object.keys(this.Event.disconnect).map((keyEvent) => this.Event.disconnect[keyEvent](reason));
+    });
+
+    if (options && 'channels' in options) this.setChannels(options.channels);
+  },
+  setChannels: function (channels) {
+    Object.keys(channels).map((type) => {
+      logger.info(`load chanel`, type);
+      this.Event[type] = {};
+      this.socket.on(type, (...args) => {
+        // logger.info(`event: ${type} | ${JSON.stringify(args, null, 4)}`);
+        Object.keys(this.Event[type]).map((keyEvent) => this.Event[type][keyEvent](args));
+      });
+    });
+  },
+};
+
+export { SocketIo };

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

@@ -0,0 +1,113 @@
+import { loggerFactory } from './Logger.js';
+import { getProxyPath } from './VanillaJs.js';
+
+// https://peerjs.com/docs/
+
+const logger = loggerFactory(import.meta);
+
+const Stream = {
+  Data: {},
+  createPeerServer: function ({ id }) {
+    const peerOptions = {
+      host: location.hostname, // '/'
+      port: location.protocol === 'https:' ? 443 : location.port ? parseInt(location.port) + 1 : 80,
+      path: `${getProxyPath()}peer`,
+      secure: location.protocol === 'https:',
+    };
+    logger.info('peerOptions', peerOptions);
+    this.Data[id] = {
+      peer: {
+        peerOptions,
+        server: new Peer(undefined, peerOptions),
+      },
+    };
+    return this.Data[id].peer;
+  },
+  connectToNewUser: function (
+    mediaType,
+    id,
+    userId,
+    stream,
+    onConnectStream = (mediaElement) => null,
+    onDisconnectStream = (mediaElement) => null,
+  ) {
+    // This runs when someone joins our room
+    const call = this.Data[id].peer.server.call(userId, stream); // Call the user who just joined
+    const mediaElement = this.createMediaElement(mediaType);
+
+    call.on('stream', (userMediaStream) => {
+      onConnectStream(this.renderElementStream(mediaElement, userMediaStream));
+    });
+    // If they leave, remove their video
+    call.on('close', () => {
+      onDisconnectStream(mediaElement);
+    });
+    return { call, mediaElement };
+  },
+  handlePeerDisconnect({ id }) {
+    // manually close the peer connections
+    for (let conns in this.Data[id].peer.server.connections) {
+      this.Data[id].peer.server.connections[conns].forEach((conn, index, array) => {
+        console.log(`closing ${conn.connectionId} peerConnection (${index + 1}/${array.length})`, conn.peerConnection);
+        if (conn.peerConnection && conn.peerConnection.close) conn.peerConnection.close();
+
+        // close it using peerjs methods
+        if (conn.close) conn.close();
+      });
+    }
+  },
+  renderElementStream: function (mediaElement, stream) {
+    mediaElement.srcObject = stream;
+    mediaElement.addEventListener('loadedmetadata', () => {
+      // Play the video as it loads
+      mediaElement.play();
+    });
+    return mediaElement;
+    // use example:
+    // videoGrid.append(mediaElement); // Append video element to videoGrid
+  },
+  // Access the user's video and audio
+  getMediaStream: function (
+    options = {
+      video: true,
+      audio: true,
+    },
+  ) {
+    return new Promise((resolve) => {
+      navigator.mediaDevices
+        .getUserMedia(options)
+        .then((stream) => resolve(stream))
+        .catch((error) => {
+          logger.error(error);
+          resolve(undefined);
+        });
+    });
+  },
+  removeMediaStream: function (stream) {
+    // later you can do below
+    // stop both video and audio
+    stream.getTracks().forEach((track) => {
+      track.stop();
+    });
+    // stop only audio
+    // stream.getAudioTracks()[0].stop();
+    // stop only video
+    // stream.getVideoTracks()[0].stop();
+  },
+  createMediaElement: function (mediaType) {
+    let mediaElement;
+    switch (mediaType) {
+      case 'audio-video':
+        mediaElement = document.createElement('video'); // Create a new audio/video tag to show our audio/video
+        // mediaElement.muted = true; // Mute ourselves on our end so there is no feedback loop
+
+        break;
+
+      default:
+        break;
+    }
+    return mediaElement;
+  },
+};
+
+export { Stream };