underpost 3.2.4 → 3.2.8

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

@@ -15,13 +15,25 @@ import { Validator } from './Validator.js';
 import { append, htmls, s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
 import { getApiBaseUrl } from '../../services/core/core.service.js';
+import { AccountEventType, accountEvents } from './ClientEvents.js';
 import { loggerFactory } from './Logger.js';
 
 const logger = loggerFactory(import.meta);
 
-const Account = {
-  UpdateEvent: {},
-  Render: async function (options = { user: {}, bottomRender: async () => '', idModal: '' }) {
+class Account {
+  static UpdateEvent = {};
+  static onUpdated(listener, options = {}) {
+    if (options.key) Account.UpdateEvent[options.key] = listener;
+    return accountEvents.on(AccountEventType.updated, listener, options);
+  }
+  static offUpdated(key) {
+    delete Account.UpdateEvent[key];
+    return accountEvents.off(key);
+  }
+  static hasUpdatedListener(key) {
+    return accountEvents.has(key);
+  }
+  static async instance(options = { user: {}, bottomRender: async () => '', idModal: '' }) {
     // app profile page design example
     // CSS animated backgrounds
     let { user, idModal } = options;
@@ -82,7 +94,7 @@ const Account = {
           const currentUser = LogIn.Scope.user.main.model.user;
           if (!currentUser || !currentUser._id) {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -90,7 +102,7 @@ const Account = {
           // Guest users cannot submit form
           if (currentUser.role === 'guest') {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -99,7 +111,7 @@ const Account = {
           const { successKeys, errorKeys, errorMessage } = await validators();
           if (errorMessage) {
             NotificationManager.Push({
-              html: `${errorKeys.map((e) => Translate.Render(e.replace('account-', '')))} ${errorMessage}`,
+              html: `${errorKeys.map((e) => Translate.instance(e.replace('account-', '')))} ${errorMessage}`,
             });
             return;
           }
@@ -117,7 +129,7 @@ const Account = {
             html:
               result.status === 'error' && result.message
                 ? result.message
-                : Translate.Render(`${result.status}-update-user`),
+                : Translate.instance(`${result.status}-update-user`),
             status: result.status,
           });
           if (result.status === 'success') {
@@ -151,7 +163,7 @@ const Account = {
             const currentUser = LogIn.Scope.user.main.model.user;
             if (!currentUser || !currentUser._id) {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               return;
@@ -159,7 +171,7 @@ const Account = {
             // Guest users cannot verify email
             if (currentUser.role === 'guest') {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               return;
@@ -173,7 +185,7 @@ const Account = {
               },
             });
             NotificationManager.Push({
-              html: result.status === 'error' ? result.message : Translate.Render(`email send`),
+              html: result.status === 'error' ? result.message : Translate.instance(`email send`),
               status: result.status,
             });
           });
@@ -196,7 +208,7 @@ const Account = {
             const currentUser = LogIn.Scope.user.main.model.user;
             if (!currentUser || !currentUser._id) {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               s(`.account-profile-image`).style.opacity = 1;
@@ -205,7 +217,7 @@ const Account = {
             // Guest users cannot upload profile images
             if (currentUser.role === 'guest') {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               s(`.account-profile-image`).style.opacity = 1;
@@ -259,12 +271,12 @@ const Account = {
               if (topbarImg) topbarImg.src = newImageSrc;
 
               NotificationManager.Push({
-                html: Translate.Render('success-update-user'),
+                html: Translate.instance('success-update-user'),
                 status: 'success',
               });
             } else {
               NotificationManager.Push({
-                html: data?.message || Translate.Render('file-upload-failed'),
+                html: data?.message || Translate.instance('file-upload-failed'),
                 status: 'error',
               });
             }
@@ -286,7 +298,7 @@ const Account = {
               html: async () => {
                 return html`
                   <div class="in section-mp" style="text-align: center">
-                    ${Translate.Render('confirm-delete-account')}
+                    ${Translate.instance('confirm-delete-account')}
                   </div>
                 `;
               },
@@ -304,7 +316,7 @@ const Account = {
           const descriptionValue = s(`.account-brief-description`).value;
           if (!descriptionValue || descriptionValue === 'undefined' || descriptionValue.trim() === '') {
             NotificationManager.Push({
-              html: Translate.Render('brief-description-cannot-be-empty'),
+              html: Translate.instance('brief-description-cannot-be-empty'),
               status: 'error',
             });
             return;
@@ -313,7 +325,7 @@ const Account = {
           const currentUser = LogIn.Scope.user.main.model.user;
           if (!currentUser || !currentUser._id) {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -321,7 +333,7 @@ const Account = {
           // Guest users cannot update brief description
           if (currentUser.role === 'guest') {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -331,7 +343,7 @@ const Account = {
             html:
               result.status === 'error' && result.message
                 ? result.message
-                : Translate.Render(`${result.status}-update-user`),
+                : Translate.instance(`${result.status}-update-user`),
             status: result.status,
           });
           if (result.status === 'success') {
@@ -357,7 +369,7 @@ const Account = {
               const currentUser = LogIn.Scope.user.main.model.user;
               if (!currentUser || !currentUser._id) {
                 NotificationManager.Push({
-                  html: Translate.Render('error-user-not-authenticated'),
+                  html: Translate.instance('error-user-not-authenticated'),
                   status: 'error',
                 });
                 return;
@@ -365,7 +377,7 @@ const Account = {
               // Guest users cannot toggle public profile
               if (currentUser.role === 'guest') {
                 NotificationManager.Push({
-                  html: Translate.Render('error-user-not-authenticated'),
+                  html: Translate.instance('error-user-not-authenticated'),
                   status: 'error',
                 });
                 return;
@@ -375,7 +387,7 @@ const Account = {
                 html:
                   result.status === 'error' && result.message
                     ? result.message
-                    : Translate.Render(`${result.status}-update-user`),
+                    : Translate.instance(`${result.status}-update-user`),
                 status: result.status,
               });
               if (result.status === 'success') {
@@ -403,14 +415,14 @@ const Account = {
           const currentUser = LogIn.Scope.user.main.model.user;
           if (!currentUser || !currentUser._id) {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
           }
           const result = await UserService.delete({ id: currentUser._id });
           NotificationManager.Push({
-            html: result.status === 'error' ? result.message : Translate.Render(`success-delete-account`),
+            html: result.status === 'error' ? result.message : Translate.instance(`success-delete-account`),
             status: result.status,
           });
           s(`.btn-account-delete-confirm`).classList.remove('hide');
@@ -436,27 +448,27 @@ const Account = {
 
       <form class="in">
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-username`,
             type: 'text',
-            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
+            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,
             disabled: false,
             extension: async () =>
-              html`${await BtnIcon.Render({
+              html`${await BtnIcon.instance({
                 class: `in wfa btn-input-extension btn-account-update-username`,
                 type: 'button',
                 style: 'text-align: left',
-                label: html`${Translate.Render(`update`)}`,
+                label: html`${Translate.instance(`update`)}`,
               })}`,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-email`,
             type: 'email',
-            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('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',
@@ -464,57 +476,57 @@ const Account = {
             extension: !(options && options.disabled && options.disabled.includes('emailConfirm'))
               ? async () =>
                   html`<div class="in verify-email-status"></div>
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       class: `in 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')}
+                        <i class="fa-solid fa-paper-plane"></i> ${Translate.instance('send')}
+                        ${Translate.instance('verify-email')}
                       </div> `,
                     })}`
               : undefined,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-password`,
             type: 'password',
             autocomplete: 'new-password',
-            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('password')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             disabled: true,
             disabledEye: true,
             extension: async () =>
-              html`${await BtnIcon.Render({
+              html`${await BtnIcon.instance({
                 class: `in wfa btn-input-extension btn-account-change-password`,
                 type: 'button',
                 style: 'text-align: left',
-                label: html`${Translate.Render(`change-password`)}`,
+                label: html`${Translate.instance(`change-password`)}`,
               })}`,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-brief-description`,
-            label: html`<i class="fa-solid fa-pen-fancy"></i> ${Translate.Render('brief-description')}`,
+            label: html`<i class="fa-solid fa-pen-fancy"></i> ${Translate.instance('brief-description')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             rows: 4,
             extension: async () =>
-              html`${await BtnIcon.Render({
+              html`${await BtnIcon.instance({
                 class: `in wfa btn-input-extension btn-brief-description-update`,
                 type: 'button',
                 style: 'text-align: left',
-                label: html`${Translate.Render(`update`)}`,
+                label: html`${Translate.instance(`update`)}`,
               })}`,
           })}
         </div>
         <div class="in section-mp">
-          ${await ToggleSwitch.Render({
+          ${await ToggleSwitch.instance({
             wrapper: true,
-            wrapperLabel: html`<i class="fa-solid fa-globe"></i> ${Translate.Render('public-profile')}`,
+            wrapperLabel: html`<i class="fa-solid fa-globe"></i> ${Translate.instance('public-profile')}`,
             id: 'account-public-profile',
             disabledOnClick: true,
             checked: user.publicProfile ? true : false,
@@ -522,35 +534,36 @@ const Account = {
         </div>
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in hide">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in section-mp form-button btn-account',
-            label: Translate.Render('update'),
+            label: Translate.instance('update'),
             type: 'submit',
           })}
         </div>
       </form>
       <div class="in">
-        ${await BtnIcon.Render({
+        ${await BtnIcon.instance({
           class: 'in section-mp form-button btn-account-delete hide',
-          label: html` ${Translate.Render(`delete-account`)}`,
+          label: html` ${Translate.instance(`delete-account`)}`,
           type: 'button',
           style: 'color: #5f5f5f',
         })}
-        ${await BtnIcon.Render({
+        ${await BtnIcon.instance({
           class: 'in section-mp form-button btn-account-delete-confirm',
-          label: html` ${Translate.Render(`delete-account`)}`,
+          label: html` ${Translate.instance(`delete-account`)}`,
           type: 'button',
           style: 'color: #5f5f5f',
         })}
       </div>
     `;
-  },
-  triggerUpdateEvent: async function (options = { user: {} }) {
+  }
+  static async triggerUpdateEvent(options = { user: {} }) {
+    await accountEvents.emit(AccountEventType.updated, options);
     for (const updateEvent of Object.keys(this.UpdateEvent)) {
       await this.UpdateEvent[updateEvent](options);
     }
-  },
-  renderVerifyEmailStatus: function (user) {
+  }
+  static renderVerifyEmailStatus(user) {
     if (s('.verify-email-status')) {
       if (s(`.btn-confirm-email`)) {
         if (user.emailConfirmed) s(`.btn-confirm-email`).classList.add('hide');
@@ -558,14 +571,14 @@ const Account = {
       }
       htmls(
         '.verify-email-status',
-        html`${renderStatus(user.emailConfirmed ? 'success' : 'error', { class: 'inl' })} ${Translate.Render('email')}
-        ${Translate.Render(user.emailConfirmed ? 'confirmed' : 'unconfirmed')}`,
+        html`${renderStatus(user.emailConfirmed ? 'success' : 'error', { class: 'inl' })} ${Translate.instance('email')}
+        ${Translate.instance(user.emailConfirmed ? 'confirmed' : 'unconfirmed')}`,
       );
       if (user.emailConfirmed === true) s(`.account-email`).setAttribute('disabled', '');
     }
-  },
-  instanceModalUiEvents: async (user) => null,
-  updateForm: async function (user) {
+  }
+  static instanceModalUiEvents = async (user) => null;
+  static async updateForm(user) {
     if (!s(`.modal-account`)) return;
 
     // Always sync the current user data into LogIn.Scope, preserving profileImage if it exists
@@ -611,7 +624,7 @@ const Account = {
         ToggleSwitch.Tokens['account-public-profile'].click();
       }
     }
-  },
-};
+  }
+}
 
 export { Account };

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

@@ -1,16 +1,14 @@
 // 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, htmls, s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
 import './Pagination.js';
 import { Modal } from './Modal.js';
-
-const AgGrid = {
-  grids: {},
-  theme: `ag-theme-alpine`, // quartz
-  Render: async function (options) {
+class AgGrid {
+  static grids = {};
+  static theme = `ag-theme-alpine`;
+  static async instance(options) {
     let { id, paginationOptions } = options;
     setTimeout(() => {
       // Normalize rowSelection from deprecated string form to object form (AG Grid v32.2.1+)
@@ -21,7 +19,6 @@ const AgGrid = {
           mode: mode === 'multiple' ? 'multiRow' : 'singleRow',
         };
       }
-
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
         // Use legacy CSS theme mode to avoid conflict with Theming API (AG Grid v33+)
@@ -63,24 +60,20 @@ const AgGrid = {
         onSortChanged: options?.onSortChanged,
         // set background colour on every row, this is probably bad, should be using CSS classes
         // rowStyle: { background: 'black' },
-
         // set background colour on even rows again, this looks bad, should be using CSS classes
         // getRowStyle: (params) => {
         //   if (params.node.rowIndex % 2 === 0) {
         //     return { background: 'red' };
         //   }
         // },
-
         // all rows assigned CSS class 'my-green-class'
         // rowClass: 'my-green-class',
-
         // all even rows assigned 'my-shaded-effect'
         // getRowClass: (params) => {
         //   if (params.node.rowIndex % 2 === 0) {
         //     return 'my-shaded-effect';
         //   }
         // },
-
         // domLayout: 'autoHeight', || 'normal'
         // Column Definitions: Defines & controls grid columns.
         columnDefs: options?.gridOptions?.rowData?.[0]
@@ -90,25 +83,23 @@ const AgGrid = {
           : [],
         ...gridOptionsOverrides,
       };
-
       // 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);
+      if (AgGrid.grids[id]) AgGrid.grids[id].destroy();
+      AgGrid.grids[id] = agGrid.createGrid(myGridElement, gridOptions);
       // myGridElement.style.setProperty('width', '100%');
       ThemeEvents[id] = () => {
         if (s(`.${id}`)) {
           // darkTheme has already been updated by Css.js when this event fires
           // If darkTheme is true: remove light class, add dark class
           // If darkTheme is false: remove dark class, add light class
-          s(`.${id}`).classList.remove(this.theme, this.theme + '-dark');
-          s(`.${id}`).classList.add(darkTheme ? this.theme + '-dark' : this.theme);
+          s(`.${id}`).classList.remove(AgGrid.theme, AgGrid.theme + '-dark');
+          s(`.${id}`).classList.add(darkTheme ? AgGrid.theme + '-dark' : AgGrid.theme);
         } else {
           // console.warn('change theme: grid not found');
           delete ThemeEvents[id];
         }
       };
-
       if (!options.style || !options.style.height) {
         if (options.parentModal && Modal.Data[options.parentModal].options.observer) {
           Modal.Data[options.parentModal].onObserverListener[id + '-observer'] = ({ width, height }) => {
@@ -127,15 +118,15 @@ const AgGrid = {
       : '';
     return html`
       <div
-        class="${id} ${darkTheme ? this.theme + '-dark' : this.theme}"
+        class="${id} ${darkTheme ? AgGrid.theme + '-dark' : AgGrid.theme}"
         style="${options?.style
           ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
           : ''}"
       ></div>
       ${usePagination ? `<ag-pagination id="ag-pagination-${id}" ${limitOptionsAttr}></ag-pagination>` : ''}
     `;
-  },
-  RenderStyle: async function (
+  }
+  static async RenderStyle(
     options = {
       eventThemeId: 'AgGrid',
       style: {
@@ -147,15 +138,15 @@ const AgGrid = {
     },
   ) {
     /*
-     --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;
-     */
+         --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',
@@ -167,7 +158,7 @@ const AgGrid = {
           /><link
             rel="stylesheet"
             type="text/css"
-            href="${getProxyPath()}styles/ag-grid-community/${this.theme}.min.css"
+            href="${getProxyPath()}styles/ag-grid-community/${AgGrid.theme}.min.css"
           />`,
       );
     ThemeEvents[options.eventThemeId] = () => {
@@ -242,7 +233,6 @@ const AgGrid = {
               </style>`}`,
       );
     };
-  },
-};
-
+  }
+}
 export { AgGrid };

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

@@ -1,5 +1,4 @@
 import { Translate } from './Translate.js';
-
 const maintenance = async () => {
   const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
     <path
@@ -14,10 +13,9 @@ const maintenance = async () => {
   return html` <div class="abs center" style="top: 45%">
     ${icon}
     <br />
-    <br />${Translate.Render('server-maintenance')}
+    <br />${Translate.instance('server-maintenance')}
   </div>`;
 };
-
 const noInternet = async () => {
   const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
     <path
@@ -28,10 +26,9 @@ const noInternet = async () => {
   return html` <div class="abs center" style="top: 45%">
     ${icon}
     <br />
-    <br />${Translate.Render('no-internet-connection')}
+    <br />${Translate.instance('no-internet-connection')}
   </div>`;
 };
-
 const e404 = async () => {
   const icon = html`
     <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
@@ -47,12 +44,11 @@ const e404 = async () => {
     <br />
     <span class="bold">404</span>
     <br />
-    <br />${Translate.Render('page-not-found')} <br />
+    <br />${Translate.instance('page-not-found')} <br />
     <br />
-    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.instance('back')}</a>
   </div>`;
 };
-
 const e500 = async () => {
   const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
     <path
@@ -66,12 +62,15 @@ const e500 = async () => {
     <br />
     <span class="bold">500</span>
     <br />
-    <br />${Translate.Render('page-broken')} <br />
+    <br />${Translate.instance('page-broken')} <br />
     <br />
-    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.instance('back')}</a>
   </div>`;
 };
-
-const Alert = { maintenance, noInternet, e404, e500 };
-
+class Alert {
+  static maintenance = maintenance;
+  static noInternet = noInternet;
+  static e404 = e404;
+  static e500 = e500;
+}
 export { Alert };

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

@@ -10,7 +10,7 @@
  * @classdesc Per-app singleton state store for WebSocket channel data and authenticated user state.
  *
  * Usage: `AppStoreX.Data.user.main.model.user` — the authenticated user object.
- * `AppStoreX.Data` keys (`chat`, `mailer`, `stream`, etc.) — channel definitions for `SocketIo.Init`.
+ * `AppStoreX.Data` keys (`chat`, `mailer`, `stream`, etc.) — channel definitions for `SocketIo.instance`.
  * @memberof AppStore
  */
 class AppStore {