cyberia 3.2.5 → 3.2.9

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 {

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

@@ -14,6 +14,7 @@ import { NotificationManager } from './NotificationManager.js';
 import { SearchBox } from './SearchBox.js';
 import { Translate } from './Translate.js';
 import { s } from './VanillaJs.js';
+import { GuestService } from '../../services/user/guest.service.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
 
@@ -22,20 +23,6 @@ const logger = loggerFactory(import.meta, { trace: true });
  * @memberof AuthClient
  */
 class Auth {
-  /**
-   * The current user access token (JWT).
-   * @type {string}
-   * @method
-   */
-  #token = '';
-
-  /**
-   * The token for anonymous guest sessions.
-   * @type {string}
-   * @method
-   */
-  #guestToken = '';
-
   /**
    * Timeout ID for the token refresh schedule.
    * @type {number | undefined}
@@ -59,7 +46,7 @@ class Auth {
    * @returns {string} The set token value.
    */
   setToken(value = '') {
-    return (this.#token = value);
+    return GuestService.setUserToken(value);
   }
 
   /**
@@ -68,7 +55,7 @@ class Auth {
    * @returns {string} An empty string.
    */
   deleteToken() {
-    return (this.#token = '');
+    return GuestService.clearUserToken();
   }
 
   /**
@@ -77,7 +64,7 @@ class Auth {
    * @returns {string} The JWT token.
    */
   getToken() {
-    return this.#token;
+    return GuestService.getUserToken();
   }
 
   /**
@@ -87,7 +74,7 @@ class Auth {
    * @returns {string} The set guest token value.
    */
   setGuestToken(value = '') {
-    return (this.#guestToken = value);
+    return GuestService.setGuestToken(value);
   }
 
   /**
@@ -96,7 +83,7 @@ class Auth {
    * @returns {string} An empty string.
    */
   deleteGuestToken() {
-    return (this.#guestToken = '');
+    return GuestService.clearGuestToken();
   }
 
   /**
@@ -105,7 +92,7 @@ class Auth {
    * @returns {string} The guest token.
    */
   getGuestToken() {
-    return this.#guestToken;
+    return GuestService.getGuestToken();
   }
 
   /**
@@ -114,9 +101,7 @@ class Auth {
    * @returns {string} The Bearer token string or an empty string.
    */
   getJWT() {
-    if (this.getToken()) return `Bearer ${this.getToken()}`;
-    if (this.getGuestToken()) return `Bearer ${this.getGuestToken()}`;
-    return '';
+    return GuestService.getAuthorizationHeader();
   }
 
   /**
@@ -190,7 +175,7 @@ class Auth {
    */
   async sessionIn(userServicePayload) {
     try {
-      let token = userServicePayload?.data?.token || localStorage.getItem('jwt');
+      let token = userServicePayload?.data?.token || GuestService.getUserToken();
 
       if (token) {
         this.setToken(token);
@@ -204,7 +189,11 @@ class Auth {
         if (status === 'success' && data.token) {
           // A valid user token was found/refreshed
           this.setToken(data.token);
-          localStorage.setItem('jwt', data.token);
+          GuestService.clearGuestToken();
+          await GuestService.setMeta('session', {
+            role: data.user?.role,
+            userId: data.user?._id,
+          });
           // Clear cached profile image to ensure fresh load for new user
           LogIn.Scope.user.main.model.user = {};
           this.renderSessionUI();
@@ -218,7 +207,7 @@ class Auth {
           setTimeout(() => {
             s(`.main-btn-log-in`).click();
             NotificationManager.Push({
-              html: Translate.Render(`expired-session`),
+              html: Translate.instance(`expired-session`),
               status: 'warning',
             });
           });
@@ -227,17 +216,19 @@ class Auth {
 
       // Cleanup failed user session attempt
       this.deleteToken();
-      localStorage.removeItem('jwt');
 
       // Anon guest session attempt
-      let guestToken = localStorage.getItem('jwt.g');
+      let guestToken = GuestService.getGuestToken();
       if (guestToken) {
         this.setGuestToken(guestToken);
         let { data, status, message } = await UserService.get({ id: 'auth' }); // Verify guest token
         if (status === 'success' && data.token) {
           // Guest token is valid and refreshed
           this.setGuestToken(data.token);
-          localStorage.setItem('jwt.g', data.token);
+          await GuestService.setMeta('guest-session', {
+            role: data.user?.role,
+            userId: data.user?._id,
+          });
           // Clear cached profile image for fresh guest session
           LogIn.Scope.user.main.model.user = {};
           await LogIn.Trigger(data);
@@ -264,10 +255,11 @@ class Auth {
    * @returns {Promise<object>} A promise resolving to the newly created guest session data.
    */
   async sessionOut() {
-    // 1. End User Session
+    // 1. End User Session — skip the network call when there is no active user session
+    // (avoids a wasted DELETE round-trip for guests / new visitors)
+    const hasUserSession = !!GuestService.getUserToken();
     try {
-      const result = await UserService.delete({ id: 'logout' });
-      localStorage.removeItem('jwt');
+      const result = hasUserSession ? await UserService.delete({ id: 'logout' }) : null;
       SearchBox.RecentResults.clear();
       this.deleteToken();
       if (this.#refreshTimeout) {
@@ -277,22 +269,28 @@ class Auth {
       this.renderGuestUi();
       // Reset user data in the LogIn state/model
       LogIn.Scope.user.main.model.user = {};
-      await LogOut.Trigger(result);
+      if (result) await LogOut.Trigger(result);
     } catch (error) {
       logger.error('Error during user logout:', error);
     }
 
     // 2. Start Guest Session
     try {
-      localStorage.removeItem('jwt.g');
       this.deleteGuestToken();
       const result = await UserService.post({ id: 'guest' }); // Request a new guest token
 
       if (result.status === 'success' && result.data.token) {
-        localStorage.setItem('jwt.g', result.data.token);
         this.setGuestToken(result.data.token);
-        // Recursively call sessionIn to complete the guest login process (UI update, etc.)
-        return await this.sessionIn();
+        // Use the POST response data directly — avoids a redundant GET /user/auth
+        // round-trip that would otherwise re-verify the token we just received.
+        await GuestService.setMeta('guest-session', {
+          role: result.data.user?.role,
+          userId: result.data.user?._id,
+        });
+        LogIn.Scope.user.main.model.user = {};
+        await LogIn.Trigger(result.data);
+        await Account.updateForm(result.data.user);
+        return result.data;
       } else {
         logger.error('Failed to get a new guest token.');
         return { user: UserMock.default };

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

@@ -2,31 +2,25 @@ 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: '', style: '' }) {
-    if (!options.id) options.id = getId(this.Tokens, 'badge-');
+class Badge {
+  static Tokens = {};
+  static async instance(options = { id: '', type: 'circle-red', classList: '', text: '', style: '' }) {
+    if (!options.id) options.id = getId(Badge.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 };
-
+    Badge.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/BtnIcon.js

@@ -2,10 +2,9 @@ import { getId, s4 } from './CommonJs.js';
 import { renderCssAttr } from './Css.js';
 import { ToolTip } from './ToolTip.js';
 import { getAllChildNodes, htmlStrSanitize, s } from './VanillaJs.js';
-
-const BtnIcon = {
-  Tokens: {},
-  Render: async function (
+class BtnIcon {
+  static Tokens = {};
+  static async instance(
     options = {
       class: '',
       type: '',
@@ -19,9 +18,9 @@ const BtnIcon = {
       useMenuBtn: false,
     },
   ) {
-    const tokenId = getId(this.Tokens, 'btn-token-');
+    const tokenId = getId(BtnIcon.Tokens, 'btn-token-');
     if (options.useMenuBtn) options.class += ' main-menu-btn-selector';
-    this.Tokens[tokenId] = { ...options };
+    BtnIcon.Tokens[tokenId] = { ...options };
     setTimeout(() => {
       if (s(`.a-${tokenId}`)) s(`.a-${tokenId}`).onclick = (e) => e.preventDefault();
     });
@@ -57,7 +56,7 @@ const BtnIcon = {
     if (options.tooltipHtml)
       setTimeout(() => {
         if (s(`.${tokenId}`))
-          ToolTip.Render({
+          ToolTip.instance({
             container: `.${tokenId}`,
             id: tokenId,
             htmlRender: options.tooltipHtml,
@@ -66,15 +65,15 @@ const BtnIcon = {
           });
       });
     return render;
-  },
+  }
   // https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms/Mobile_touch
-  TouchTokens: {},
-  RenderTouch: async function (options = { id: '', Events: {} }) {
+  static TouchTokens = {};
+  static async RenderTouch(options = { id: '', Events: {} }) {
     const { id } = options;
-    this.TouchTokens[id] = { Events: {}, ...options };
+    BtnIcon.TouchTokens[id] = { Events: {}, ...options };
     setTimeout(() => {
       const triggerTouchEvents = () => {
-        for (const event of Object.keys(this.TouchTokens[id].Events)) this.TouchTokens[id].Events[event]();
+        for (const event of Object.keys(BtnIcon.TouchTokens[id].Events)) BtnIcon.TouchTokens[id].Events[event]();
       };
       if (s(`.${id}`)) {
         s(`.${id}`).addEventListener('touchstart', () => {
@@ -101,11 +100,10 @@ const BtnIcon = {
       style="${renderCssAttr({ style: { width: '100%', height: '100%', top: '0px', left: '0px', border: 'none' } })}"
     >
     </canvas>`;
-  },
-  findLabel: (el) =>
+  }
+  static findLabel = (el) =>
     getAllChildNodes(el).find((e) => {
       return e.classList && Array.from(e.classList).find((e) => e.match('BtnIcon-label'));
-    }),
-};
-
+    });
+}
 export { BtnIcon };