underpost 3.2.4 → 3.2.8

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);
@@ -267,7 +258,6 @@ class Auth {
     // 1. End User Session
     try {
       const result = await UserService.delete({ id: 'logout' });
-      localStorage.removeItem('jwt');
       SearchBox.RecentResults.clear();
       this.deleteToken();
       if (this.#refreshTimeout) {
@@ -284,12 +274,10 @@ class Auth {
 
     // 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();

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 };

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

@@ -10,49 +10,42 @@ import { Responsive } from './Responsive.js';
 import { listenQueryPathInstance, RouterEvents, setQueryPath, getQueryParams } from './Router.js';
 import { Translate } from './Translate.js';
 import { append, getTimeZone, htmls, s, sa } from './VanillaJs.js';
-
 // https://fullcalendar.io/docs/event-object
-
 const daysOfWeekOptions = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
-
 const eventDateFactory = (event) =>
   newInstance({
     event: { ...event.extendedProps, title: event._def.title },
     start: event.start,
     end: event.end,
   });
-
-const CalendarCore = {
-  RenderStyle: async function () {},
-  Data: {},
-  Render: async function (options = { idModal: '', appStore: {}, hiddenDates: [] }) {
-    this.Data[options.idModal] = {
+class CalendarCore {
+  static async RenderStyle() {}
+  static Data = {};
+  static async instance(options = { idModal: '', appStore: {}, hiddenDates: [] }) {
+    CalendarCore.Data[options.idModal] = {
       data: [],
       originData: [],
       filesData: [],
       calendar: {},
       hiddenDates: options.hiddenDates ? options.hiddenDates : [],
     };
-
     const titleIcon = html`<i class="fas fa-calendar-alt"></i>`;
-
     const getPanelData = async () => {
       const result = await EventSchedulerService.get({
         id: `${getQueryParams().cid ? getQueryParams().cid : Auth.getToken() ? 'creatorUser' : ''}`,
       });
       NotificationManager.Push({
-        html: result.status === 'success' ? Translate.Render('success-get-events-scheduler') : result.message,
+        html: result.status === 'success' ? Translate.instance('success-get-events-scheduler') : result.message,
         status: result.status,
       });
       if (result.status === 'success') {
         const resultData = Array.isArray(result.data) ? result.data : result.data ? [result.data] : [];
-        this.Data[options.idModal].filesData = [];
-        this.Data[options.idModal].originData = newInstance(resultData);
-        this.Data[options.idModal].data = resultData.map((o) => {
+        CalendarCore.Data[options.idModal].filesData = [];
+        CalendarCore.Data[options.idModal].originData = newInstance(resultData);
+        CalendarCore.Data[options.idModal].data = resultData.map((o) => {
           if (o.creatorUserId && options.appStore.Data.user.main.model.user._id === o.creatorUserId) o.tools = true;
           o.id = o._id;
-
-          this.Data[options.idModal].filesData.push({});
+          CalendarCore.Data[options.idModal].filesData.push({});
           return o;
         });
         setTimeout(() => {
@@ -69,17 +62,15 @@ const CalendarCore = {
               // o.exdate = ['2024-04-02'];
               // delete o.end;
               // delete o.start;
-
               return o;
             }),
           );
         });
       }
     };
-
     const renderCalendar = (events) => {
       const calendarEl = s(`.calendar-${idPanel}`);
-      this.Data[options.idModal].calendar = new FullCalendar.Calendar(calendarEl, {
+      CalendarCore.Data[options.idModal].calendar = new FullCalendar.Calendar(calendarEl, {
         allDaySlot: false,
         plugins: [
           FullCalendar.DayGrid.default,
@@ -120,44 +111,42 @@ const CalendarCore = {
             return ['hide'];
         },
       });
-
-      this.Data[options.idModal].calendar.render();
+      CalendarCore.Data[options.idModal].calendar.render();
     };
     setTimeout(() => {
       renderCalendar();
-      Translate.Event['fullcalendar-lang'] = () => {
-        this.Data[options.idModal].calendar.setOption('locale', s(`html`).lang);
-        if (s(`.fc-timegrid-axis-cushion`)) htmls(`.fc-timegrid-axis-cushion`, Translate.Render('all-day'));
-        if (s(`.fc-dayGridMonth-button`)) htmls(`.fc-dayGridMonth-button`, Translate.Render('month'));
-        if (s(`.fc-timeGridWeek-button`)) htmls(`.fc-timeGridWeek-button`, Translate.Render('week'));
-        if (s(`.fc-listWeek-button`)) htmls(`.fc-listWeek-button`, Translate.Render('summary'));
-        if (s(`.fc-today-button`)) htmls(`.fc-today-button`, Translate.Render('today'));
+      const applyFullCalendarLang = () => {
+        CalendarCore.Data[options.idModal].calendar.setOption('locale', s(`html`).lang);
+        if (s(`.fc-timegrid-axis-cushion`)) htmls(`.fc-timegrid-axis-cushion`, Translate.instance('all-day'));
+        if (s(`.fc-dayGridMonth-button`)) htmls(`.fc-dayGridMonth-button`, Translate.instance('month'));
+        if (s(`.fc-timeGridWeek-button`)) htmls(`.fc-timeGridWeek-button`, Translate.instance('week'));
+        if (s(`.fc-listWeek-button`)) htmls(`.fc-listWeek-button`, Translate.instance('summary'));
+        if (s(`.fc-today-button`)) htmls(`.fc-today-button`, Translate.instance('today'));
       };
+      Translate.onChanged(applyFullCalendarLang, { key: 'fullcalendar-lang' });
       setTimeout(() => {
-        Translate.Event['fullcalendar-lang']();
+        applyFullCalendarLang();
         s(`.fc-dayGridMonth-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-listWeek-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-timeGridWeek-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-next-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-prev-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
         s(`.fc-today-button`).onclick = () => {
-          Translate.Event['fullcalendar-lang']();
+          applyFullCalendarLang();
         };
       });
-
       sa(`.fc-button-group`)[1].style.float = 'right';
     });
-
     const idPanel = `calendar-panel-${options.idModal}`;
     const formData = [
       {
@@ -217,25 +206,23 @@ const CalendarCore = {
         panel: { type: 'info-row' },
       },
     ];
-
     setTimeout(() => {
       s(`.close-calendar-container`).onclick = () => {
         s(`.calendar-container`).classList.add('hide');
         s(`.main-body-calendar-${options.idModal}`).classList.remove('hide');
       };
     });
-
     const panelRender = async () => {
-      return html`${await Panel.Render({
+      return html`${await Panel.instance({
           idPanel,
           parentIdModal: options.idModal,
           formData,
-          data: this.Data[options.idModal].data,
+          data: CalendarCore.Data[options.idModal].data,
           formContainerClass: '',
           scrollClassContainer: `main-body-calendar-${options.idModal}`,
           role: options.role,
-          originData: () => this.Data[options.idModal].originData,
-          filesData: () => this.Data[options.idModal].filesData,
+          originData: () => CalendarCore.Data[options.idModal].originData,
+          filesData: () => CalendarCore.Data[options.idModal].filesData,
           onClick: async function ({ payload }) {
             if (options.route) {
               setQueryPath({ path: options.route, queryPath: payload._id });
@@ -254,13 +241,13 @@ const CalendarCore = {
           },
           customButtons: [
             {
-              label: html`<i class="fa-regular fa-calendar-days"></i> ${Translate.Render('calendar')}`,
+              label: html`<i class="fa-regular fa-calendar-days"></i> ${Translate.instance('calendar')}`,
               onClick: function () {
                 s(`.calendar-container`).classList.remove('hide');
                 s(`.main-body-calendar-${options.idModal}`).classList.add('hide');
                 // renderCalendar();
                 CalendarCore.Data[options.idModal].calendar.setOption('height', 700);
-                Translate.Event['fullcalendar-lang']();
+                Translate.emitChanged({ lang: s('html').lang });
               },
             },
           ],
@@ -284,17 +271,15 @@ const CalendarCore = {
                 html:
                   status === 'success'
                     ? editId
-                      ? Translate.Render('success-edit-event-scheduler')
-                      : Translate.Render('success-add-event-scheduler')
+                      ? Translate.instance('success-edit-event-scheduler')
+                      : Translate.instance('success-add-event-scheduler')
                     : message,
                 status: status,
               });
-
               if (status === 'success') {
                 documentData.tools = true;
                 // data._id = documentData._id;
                 data = documentData;
-
                 let originObj, indexOriginObj;
                 let filesData = {};
                 if (editId) {
@@ -310,7 +295,6 @@ const CalendarCore = {
                   CalendarCore.Data[options.idModal].data.push(data);
                   CalendarCore.Data[options.idModal].filesData.push(filesData);
                 }
-
                 setQueryPath({ path: options.route, queryPath: documentData._id });
                 if (options.parentIdModal) Modal.Data[options.parentIdModal].query = `${window.location.search}`;
                 await CalendarCore.Data[options.idModal].updatePanel();
@@ -323,7 +307,7 @@ const CalendarCore = {
                 html: async () => {
                   return html`
                     <div class="in section-mp" style="text-align: center">
-                      ${Translate.Render('confirm-delete-item')}
+                      ${Translate.instance('confirm-delete-item')}
                       <br />
                       "${data.description}"
                     </div>
@@ -339,10 +323,8 @@ const CalendarCore = {
                   html: status,
                   status,
                 });
-
                 setQueryPath({ path: options.route, queryPath: '' });
                 await CalendarCore.Data[options.idModal].updatePanel();
-
                 return { status };
               }
               return { status: 'error' };
@@ -351,9 +333,8 @@ const CalendarCore = {
         })}
         <div class="in" style="margin-bottom: 100px"></div>`;
     };
-
     let lastCid;
-    this.Data[options.idModal].updatePanel = async () => {
+    CalendarCore.Data[options.idModal].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (lastCid === cid) return;
       lastCid = cid;
@@ -364,7 +345,6 @@ const CalendarCore = {
         htmls(`.main-body-calendar-${options.idModal}`, await panelRender());
       }
     };
-
     if (options.route) {
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
@@ -377,7 +357,7 @@ const CalendarCore = {
         Modal.Data['modal-menu'].onHome[idPanel] = async () => {
           lastCid = undefined;
           setQueryPath({ path: options.route, queryPath: '' });
-          await this.Data[idPanel].updatePanel();
+          await CalendarCore.Data[idPanel].updatePanel();
         };
     }
     return html`
@@ -443,16 +423,15 @@ const CalendarCore = {
       </style>
       <div class="in calendar-container hide">
         <div class="in modal calendar-buttons-container">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: `inl section-mp btn-custom close-calendar-container flr`,
-            label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+            label: html`<i class="fa-solid fa-xmark"></i> ${Translate.instance('close')}`,
             type: 'button',
           })}
         </div>
         <div class="in"><div class="calendar-${idPanel}"></div></div>
       </div>
     `;
-  },
-};
-
+  }
+}
 export { CalendarCore };

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

@@ -5,12 +5,11 @@ import { Modal } from './Modal.js';
 import { SocketIo } from './SocketIo.js';
 import { Translate } from './Translate.js';
 import { s, append } from './VanillaJs.js';
-
-const Chat = {
-  Data: {},
-  Render: async function (options) {
+class Chat {
+  static Data = {};
+  static async instance(options) {
     const { idModal } = options;
-    this.Data[idModal] = {};
+    Chat.Data[idModal] = {};
     setTimeout(() => {
       Modal.Data[idModal].onObserverListener[`chat-${idModal}`] = (options) => {
         const { height } = options;
@@ -19,7 +18,7 @@ const Chat = {
       s(`.btn-send-chat-${idModal}`).onclick = (e) => {
         e.preventDefault();
         if (!s(`.input-chat-${idModal}`).value) return;
-        this.appendChatBox({ id: SocketIo.socket.id, idModal, message: s(`.input-chat-${idModal}`).value });
+        Chat.appendChatBox({ id: SocketIo.socket.id, idModal, message: s(`.input-chat-${idModal}`).value });
         SocketIo.Emit('chat', {
           message: s(`.input-chat-${idModal}`).value,
         });
@@ -29,23 +28,23 @@ const Chat = {
     return html`
       <form>
         <div class="in section-mp chat-box ${idModal}-chat-box"></div>
-        ${await Input.Render({
+        ${await Input.instance({
           id: `input-chat-${idModal}`,
-          label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('write')}`,
+          label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.instance('write')}`,
           containerClass: 'in section-mp width-mini-box-hover input-container-width',
           placeholder: true,
         })}
         <div class="in">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: `btn-send-chat-${idModal}`,
-            label: Translate.Render('send'),
+            label: Translate.instance('send'),
             type: 'submit',
           })}
         </div>
       </form>
     `;
-  },
-  appendChatBox: function (options) {
+  }
+  static appendChatBox(options) {
     const { idModal, id, message } = options;
     if (!s(`.${idModal}-chat-box`)) return;
     append(
@@ -58,7 +57,6 @@ const Chat = {
       `,
     );
     s(`.${idModal}-chat-box`).scrollTop = s(`.${idModal}-chat-box`).scrollHeight;
-  },
-};
-
+  }
+}
 export { Chat };