underpost 2.6.2

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

@@ -0,0 +1,290 @@
+import { UserService } from '../../services/user/user.service.js';
+import { BtnIcon } from './BtnIcon.js';
+import { newInstance, s4 } from './CommonJs.js';
+import { renderStatus, renderWave } from './Css.js';
+import { EventsUI } from './EventsUI.js';
+import { fileFormDataFactory, Input } from './Input.js';
+import { LogIn } from './LogIn.js';
+import { LogOut } from './LogOut.js';
+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';
+
+const Account = {
+  UpdateEvent: {},
+  Render: async function (options = { user: {}, bottomRender: async () => '', idModal: '' }) {
+    // app profile page design example
+    // CSS animated backgrounds
+    let { user, idModal } = options;
+    const waveAnimationId = 'account-wave';
+    const profileFileAccept = ['image/png', 'image/jpeg'];
+    setTimeout(async () => {
+      if (LogIn.Scope.user.main.model.user.profileImage) {
+        append(
+          `.wave-animation-container-${waveAnimationId}`,
+          html` <div class="abs center account-profile-image-container">
+              <img
+                class="abs center account-profile-image"
+                style="opacity: 1"
+                src="${LogIn.Scope.user.main.model.user.profileImage.imageSrc}"
+              />
+            </div>
+            <div class="abs center account-profile-image-loading" style="color: white"></div>`,
+        );
+      }
+
+      const formData = [
+        {
+          model: 'username',
+          id: `account-username`,
+          rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }],
+        },
+        { model: 'email', id: `account-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
+        {
+          model: 'password',
+          defaultValue: '*******',
+          id: `account-password`,
+          rules: [{ type: 'isStrongPassword' }],
+        },
+      ];
+      const validators = await Validator.instance(formData);
+
+      for (const inputData of formData) {
+        s(`.${inputData.id}`).value =
+          !user[inputData.model] && inputData.defaultValue ? inputData.defaultValue : user[inputData.model];
+      }
+      let lastUser;
+      const submit = async () => {
+        lastUser = newInstance(user);
+        const { errorMessage } = await validators();
+        if (errorMessage) return;
+        const body = {};
+        for (const inputData of formData) {
+          if (!s(`.${inputData.id}`).value || s(`.${inputData.id}`).value === 'undefined') continue;
+          if ('model' in inputData) {
+            body[inputData.model] = s(`.${inputData.id}`).value;
+            user[inputData.model] = s(`.${inputData.id}`).value;
+          }
+        }
+        const result = await UserService.put({ id: user._id, body });
+        NotificationManager.Push({
+          html:
+            result.status === 'error' && result.message
+              ? result.message
+              : Translate.Render(`${result.status}-update-user`),
+          status: result.status,
+        });
+        if (result.status === 'success') {
+          user = result.data;
+          this.triggerUpdateEvent({ user });
+          if (lastUser.emailConfirmed !== user.emailConfirmed) {
+            this.renderVerifyEmailStatus(user);
+          }
+          lastUser = newInstance(user);
+        }
+      };
+      EventsUI.onClick(`.btn-account`, async (e) => {
+        e.preventDefault();
+        await submit();
+      });
+      EventsUI.onClick(`.btn-account-update-username`, async (e) => {
+        e.preventDefault();
+        await submit();
+      });
+
+      if (s(`.btn-confirm-email`))
+        EventsUI.onClick(`.btn-confirm-email`, async (e) => {
+          e.preventDefault();
+          const result = await UserService.post({
+            id: 'mailer/verify-email',
+            body: { email: s(`.account-email`).value },
+          });
+          NotificationManager.Push({
+            html: result.status === 'error' ? result.message : Translate.Render(`email send`),
+            status: result.status,
+          });
+        });
+      this.renderVerifyEmailStatus(user);
+
+      s(`.${waveAnimationId}`).style.cursor = 'pointer';
+      s(`.${waveAnimationId}`).onclick = async (e) => {
+        e.preventDefault();
+        s(`.account-profile-image-input`).click();
+      };
+      EventsUI.onChange(
+        `.account-profile-image-input`,
+        async (e) => {
+          e.preventDefault();
+          s(`.account-profile-image`).style.opacity = 0;
+          const formFile = fileFormDataFactory(e, profileFileAccept);
+
+          const { status, data } = await UserService.put({
+            id: `profile-image/${user._id}`,
+            body: formFile,
+            headerId: 'file',
+          });
+
+          if (status === 'success') {
+            user.profileImageId = data.profileImageId;
+            delete LogIn.Scope.user.main.model.user.profileImage;
+            await LogIn.Trigger({ user });
+            s(`.account-profile-image`).src = LogIn.Scope.user.main.model.user.profileImage.imageSrc;
+          } else {
+            NotificationManager.Push({
+              html: Translate.Render('file-upload-failed'),
+              status: 'error',
+            });
+          }
+
+          s(`.account-profile-image`).style.opacity = 1;
+        },
+        { loadingContainer: `.account-profile-image-loading` },
+      );
+      s(`.btn-account-change-password`).onclick = (e) => {
+        e.preventDefault();
+        // s(`.btn-close-modal-account`).click();
+        s(`.main-btn-recover`).click();
+      };
+      s(`.btn-account-delete-confirm`).onclick = async (e) => {
+        e.preventDefault();
+        const confirmResult = await Modal.RenderConfirm({
+          html: async () => {
+            return html`
+              <div class="in section-mp" style="text-align: center">${Translate.Render('confirm-delete-account')}</div>
+            `;
+          },
+          id: 'delete-account-modal',
+        });
+        if (confirmResult.status === 'cancelled') return;
+        s(`.btn-account-delete-confirm`).classList.add('hide');
+        s(`.btn-account-delete`).classList.remove('hide');
+        s(`.btn-account-delete`).click();
+      };
+      EventsUI.onClick(`.btn-account-delete`, async (e) => {
+        e.preventDefault();
+        const result = await UserService.delete({ id: user._id });
+        NotificationManager.Push({
+          html: result.status === 'error' ? result.message : Translate.Render(`success-delete-account`),
+          status: result.status,
+        });
+        s(`.btn-account-delete-confirm`).classList.remove('hide');
+        s(`.btn-account-delete`).classList.add('hide');
+        if (result.status === 'success') {
+          LogOut.Trigger();
+          s(`.main-btn-home`).click();
+        }
+      });
+    });
+    return html`
+      <input type="file" accept="${profileFileAccept.join(', ')}" class="account-profile-image-input hide" />
+      ${renderWave({ id: waveAnimationId })}
+
+      <form class="in">
+        <div class="in">
+          ${await Input.Render({
+            id: `account-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,
+            disabled: false,
+            extension: async () =>
+              html`${await BtnIcon.Render({
+                class: `wfa btn-input-extension btn-account-update-username`,
+                type: 'button',
+                style: 'text-align: left',
+                label: html`${Translate.Render(`update`)}`,
+              })}`,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `account-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',
+            disabled: user.emailConfirmed,
+            extension: !(options && options.disabled && options.disabled.includes('emailConfirm'))
+              ? async () => html`<div class="in verify-email-status"></div>
+                  ${await BtnIcon.Render({
+                    class: `wfa btn-input-extension btn-confirm-email`,
+                    type: 'button',
+                    style: 'text-align: left',
+                    label: html`<div class="in">
+                      <i class="fa-solid fa-paper-plane"></i> ${Translate.Render('send')}
+                      ${Translate.Render('verify-email')}
+                    </div> `,
+                  })}`
+              : undefined,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `account-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,
+            disabled: true,
+            disabledEye: true,
+            extension: async () =>
+              html`${await BtnIcon.Render({
+                class: `wfa btn-input-extension btn-account-change-password`,
+                type: 'button',
+                style: 'text-align: left',
+                label: html`${Translate.Render(`change-password`)}`,
+              })}`,
+          })}
+        </div>
+        ${options?.bottomRender ? await options.bottomRender() : ``}
+        <div class="in hide">
+          ${await BtnIcon.Render({
+            class: 'section-mp form-button btn-account',
+            label: Translate.Render('update'),
+            type: 'submit',
+          })}
+        </div>
+      </form>
+      <div class="in">
+        ${await BtnIcon.Render({
+          class: 'section-mp form-button btn-account-delete hide',
+          label: html` ${Translate.Render(`delete-account`)}`,
+          type: 'button',
+          style: 'color: #5f5f5f',
+        })}
+        ${await BtnIcon.Render({
+          class: 'section-mp form-button btn-account-delete-confirm',
+          label: html` ${Translate.Render(`delete-account`)}`,
+          type: 'button',
+          style: 'color: #5f5f5f',
+        })}
+      </div>
+    `;
+  },
+  triggerUpdateEvent: async function (options = { user: {} }) {
+    for (const updateEvent of Object.keys(this.UpdateEvent)) {
+      await this.UpdateEvent[updateEvent](options);
+    }
+  },
+  renderVerifyEmailStatus: function (user) {
+    if (s('.verify-email-status')) {
+      if (s(`.btn-confirm-email`)) {
+        if (user.emailConfirmed) s(`.btn-confirm-email`).classList.add('hide');
+        else s(`.btn-confirm-email`).classList.remove('hide');
+      }
+      htmls(
+        '.verify-email-status',
+        html`${renderStatus(user.emailConfirmed ? 'success' : 'error', { class: 'inl' })} ${Translate.Render('email')}
+        ${Translate.Render(user.emailConfirmed ? 'confirmed' : 'unconfirmed')}`,
+      );
+      if (user.emailConfirmed === true) s(`.account-email`).setAttribute('disabled', '');
+    }
+  },
+};
+
+export { Account };

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

@@ -0,0 +1,160 @@
+// https://www.ag-grid.com/javascript-data-grid/getting-started/
+// https://www.ag-grid.com/javascript-data-grid/themes/
+
+import { ThemeEvents, darkTheme } from './Css.js';
+import { append, getProxyPath, htmls, s } from './VanillaJs.js';
+import * as agGrid from 'ag-grid-community';
+
+const AgGrid = {
+  grids: {},
+  theme: `ag-theme-alpine`, // quartz
+  Render: async function (options) {
+    let { id } = options;
+    setTimeout(() => {
+      // Grid Options: Contains all of the grid configurations
+      const gridOptions = {
+        // Row Data: The data to be displayed.
+        // rowHeight: 60,
+        enableCellChangeFlash: true,
+        defaultColDef: {
+          editable: false,
+          flex: 1,
+          minWidth: 50,
+          filter: true,
+          autoHeight: true,
+        },
+        // domLayout: 'autoHeight', || 'normal'
+        // Column Definitions: Defines & controls grid columns.
+        columnDefs: options?.gridOptions?.rowData?.[0]
+          ? Object.keys(options.gridOptions.rowData[0]).map((field) => {
+              return { field };
+            })
+          : [],
+        ...options.gridOptions,
+      };
+
+      // Your Javascript code to create the grid
+      const myGridElement = s(`.${id}`);
+      if (this.grids[id]) this.grids[id].destroy();
+      this.grids[id] = agGrid.createGrid(myGridElement, gridOptions);
+      // myGridElement.style.setProperty('width', '100%');
+      ThemeEvents[id] = () => {
+        if (s(`.${id}`)) {
+          s(`.${id}`).classList.remove(darkTheme ? this.theme : this.theme + '-dark');
+          s(`.${id}`).classList.add(!darkTheme ? this.theme : this.theme + '-dark');
+        } else {
+          // console.warn('change theme: grid not found');
+          delete ThemeEvents[id];
+        }
+      };
+    });
+    return html`
+      <div
+        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+        style="${options?.style
+          ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
+          : 'height: 500px'}"
+      ></div>
+    `;
+  },
+  RenderStyle: async function (
+    options = {
+      eventThemeId: 'AgGrid',
+      style: {
+        'font-family': '',
+        'font-size': '',
+        'no-cell-focus-style': false,
+        'row-cursor': '',
+      },
+    },
+  ) {
+    /*
+     --ag-foreground-color: rgb(126, 46, 132);
+     --ag-background-color: rgb(249, 245, 227);
+     --ag-header-foreground-color: rgb(204, 245, 172);
+     --ag-header-background-color: rgb(209, 64, 129);
+     --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
+     --ag-header-column-resize-handle-color: rgb(126, 46, 132);
+
+     --ag-font-size: 17px;
+     */
+    if (!s(`.ag-grid-base-style`))
+      append(
+        'head',
+        html`<link
+            class="ag-grid-base-style"
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/ag-grid.min.css"
+          /><link
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/${this.theme}.min.css"
+          />`,
+      );
+    ThemeEvents[options.eventThemeId] = () => {
+      htmls(
+        `.ag-grid-style`,
+        html` ${options.style['font-family']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-family: '{{ag-font-family}}';
+                }
+              </style>`.replaceAll('{{ag-font-family}}', options.style['font-family'])
+            : ''}
+          ${options.style['font-size']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-size: '{{ag-font-size}}';
+                }
+              </style>`.replaceAll('{{ag-font-size}}', options.style['font-size'])
+            : ''}
+          ${options.style['no-cell-focus-style']
+            ? html`<style>
+                .ag-has-focus .ag-cell-focus {
+                  border: none !important;
+                }
+              </style>`
+            : ''}
+          ${options.style['row-cursor']
+            ? html`<style>
+                .ag-row {
+                  cursor: '{{ag-row-cursor}}';
+                }
+              </style>`.replaceAll(`'{{ag-row-cursor}}'`, options.style['row-cursor'])
+            : ''}
+
+          <style>
+            .ag-btn-renderer {
+              font-size: 16px;
+              min-width: 90px;
+              min-height: 90px;
+            }
+          </style>
+          ${darkTheme
+            ? html`
+                <style>
+                  .ag-cell-data-changed,
+                  .ag-cell-data-changed-animation {
+                    background-color: #6d68ff !important;
+                    background: #6d68ff !important;
+                    color: #e4e4e4 !important;
+                  }
+                </style>
+              `
+            : html`<style>
+                .ag-cell-data-changed,
+                .ag-cell-data-changed-animation {
+                  background-color: #d1d1d1 !important;
+                  background: #d1d1d1 !important;
+                  color: #2e2e2e !important;
+                }
+              </style>`}`,
+      );
+    };
+  },
+};
+
+export { AgGrid };

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

@@ -0,0 +1,19 @@
+const token = Symbol('token');
+
+const Auth = {
+  [token]: '',
+  setToken: function (value = '') {
+    return (this[token] = value);
+  },
+  deleteToken: function () {
+    return (this[token] = '');
+  },
+  getToken: function () {
+    return this[token];
+  },
+  getJWT: function () {
+    return `Bearer ${this.getToken()}`;
+  },
+};
+
+export { Auth };

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

@@ -0,0 +1,32 @@
+import { getId, getIsoDate } from './CommonJs.js';
+import { Css, renderCssAttr, Themes } from './Css.js';
+import { Modal } from './Modal.js';
+import { append, prepend, s } from './VanillaJs.js';
+
+const Badge = {
+  Tokens: {},
+  Render: async function (options = { id: '', type: 'circle-red', classList: '', text: '' }) {
+    if (!options.id) options.id = getId(this.Tokens, 'badge-');
+    else options.id = 'badge-' + options.id;
+    if (options && options.style && !options.style.color) options.style.color = 'white';
+    if (!options.classList) options.classList = '';
+
+    const { id, type } = options;
+    this.Tokens[id] = { ...options };
+
+    switch (type) {
+      case 'circle-red':
+        options.classList += ' badge-notification-circle-red ';
+        break;
+
+      default:
+        break;
+    }
+
+    return html`<div class="badge wfm ${options.classList} ${id}" style="${renderCssAttr(options)}">
+      <div class="badge-text">${options?.text ? options.text : 'B'}</div>
+    </div>`;
+  },
+};
+
+export { Badge };

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

@@ -0,0 +1,41 @@
+import { BlockChainService } from '../../services/blockchain/blockchain.service.js';
+import { BtnIcon } from './BtnIcon.js';
+import { dynamicCol } from './Css.js';
+import { EventsUI } from './EventsUI.js';
+import { Input } from './Input.js';
+import { Translate } from './Translate.js';
+
+const BlockChainManagement = {
+  Render: async function (options) {
+    setTimeout(() => {
+      EventsUI.onClick(`.btn-upload-blockchain`, async () => {
+        // const { result, status } = new BlockChainService.post();
+      });
+    });
+    return html` ${dynamicCol({ containerSelector: options.idModal, id: 'blockchain' })}
+      <div class="fl">
+        <div class="in fll blockchain-col-a">
+          <div class="in section-mp">
+            <div class="in sub-title-modal"><i class="fa-solid fa-sliders"></i> ${Translate.Render('config')}</div>
+            <div class="in">
+              ${await Input.Render({
+                id: `blockchain-seed`,
+                label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('blockchain-seed')}`,
+                containerClass: 'section-mp width-mini-box input-container',
+                placeholder: true,
+              })}
+              ${await BtnIcon.Render({
+                class: `section-mp btn-custom btn-upload-blockchain`,
+                label: html`<i class="fas fa-plus"></i> ${Translate.Render(`create`)}`,
+              })}
+            </div>
+          </div>
+        </div>
+        <div class="in fll blockchain-col-b">
+          <div class="in section-mp"></div>
+        </div>
+      </div>`;
+  },
+};
+
+export { BlockChainManagement };

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

@@ -0,0 +1,9 @@
+import { RichText } from './RichText.js';
+
+const Blog = {
+  Render: async function () {
+    return html`${await RichText.Render()}`;
+  },
+};
+
+export { Blog };

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

@@ -0,0 +1,91 @@
+import { getId, s4 } from './CommonJs.js';
+import { renderCssAttr } from './Css.js';
+import { ToolTip } from './ToolTip.js';
+import { s } from './VanillaJs.js';
+
+const BtnIcon = {
+  Tokens: {},
+  Render: async function (
+    options = {
+      class: '',
+      type: '',
+      style: '',
+      attrs: '',
+      label: '',
+      tabHref: '',
+      tooltipHtml: '',
+    },
+  ) {
+    const tokenId = getId(this.Tokens, 'btn-token-');
+    this.Tokens[tokenId] = { ...options };
+    setTimeout(() => {
+      if (s(`.a-${tokenId}`)) s(`.a-${tokenId}`).onclick = (e) => e.preventDefault();
+    });
+    let label = html` ${options.label}
+    ${options.handleContainerClass
+      ? html` <div class="abs ${options.handleContainerClass}">
+          <div class="abs center">
+            <i class="fas fa-grip-vertical"></i>
+          </div>
+        </div>`
+      : ''}`;
+    let render = html`<button
+      ${options?.class ? `class="${options.class} ${tokenId}"` : ''}
+      ${options?.type ? `type="${options.type}"` : ''}
+      ${options?.style ? `style="${options.style}"` : ''}
+      ${options?.attrs ? `${options.attrs}` : ''}
+    >
+      ${options.tabHref
+        ? html`<a
+            class="abs a-btn a-${tokenId}"
+            href="${options.tabHref}"
+            style="${renderCssAttr({ style: { width: '100%', height: '100%', top: '0%', left: '0%' } })}"
+          >
+            <span class="in btn-label-content"> ${label}</span></a
+          >`
+        : label}
+    </button>`;
+    if (options.tooltipHtml)
+      setTimeout(() => {
+        ToolTip.Render({ container: `.${tokenId}`, id: tokenId, htmlRender: options.tooltipHtml });
+      });
+    return render;
+  },
+  // https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch
+  TouchTokens: {},
+  RenderTouch: async function (options = { id: '', Events: {} }) {
+    const { id } = options;
+    this.TouchTokens[id] = { Events: {}, ...options };
+    setTimeout(() => {
+      const triggerTouchEvents = () => {
+        for (const event of Object.keys(this.TouchTokens[id].Events)) this.TouchTokens[id].Events[event]();
+      };
+      if (s(`.${id}`)) {
+        s(`.${id}`).addEventListener('touchstart', () => {
+          //  handleStart
+          triggerTouchEvents();
+        });
+        s(`.${id}`).addEventListener('touchmove', () => {
+          //  handleMove
+          triggerTouchEvents();
+        });
+        s(`.${id}`).addEventListener('touchend', () => {
+          //  handleEnd
+          triggerTouchEvents();
+        });
+        s(`.${id}`).addEventListener('touchcancel', () => {
+          //  handleCancel
+          triggerTouchEvents();
+        });
+        s(`.${id}`).onclick = triggerTouchEvents;
+      }
+    });
+    return html` <canvas
+      class="abs ${id}"
+      style="${renderCssAttr({ style: { width: '100%', height: '100%', top: '0px', left: '0px', border: 'none' } })}"
+    >
+    </canvas>`;
+  },
+};
+
+export { BtnIcon };