underpost 2.8.872 → 2.8.874

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

@@ -8,12 +8,14 @@ import { SignUp } from './SignUp.js';
 import { Translate } from './Translate.js';
 import { s } from './VanillaJs.js';
 
-const logger = loggerFactory(import.meta);
+const logger = loggerFactory(import.meta, { trace: true });
 
 const token = Symbol('token');
 
 const guestToken = Symbol('guestToken');
 
+const refreshTimeout = Symbol('refreshTimeout');
+
 const Auth = {
   [token]: '',
   [guestToken]: '',
@@ -35,50 +37,65 @@ const Auth = {
   getGuestToken: function () {
     return this[guestToken];
   },
-  // jwt
   getJWT: function () {
-    return `Bearer ${this.getToken() ? this.getToken() : this.getGuestToken()}`;
+    if (Auth.getToken()) return `Bearer ${Auth.getToken()}`;
+    if (Auth.getGuestToken()) return `Bearer ${Auth.getGuestToken()}`;
+    return '';
   },
-  signUpToken: async function (
-    result = {
-      data: {
-        token: '',
-        user: null,
-      },
-    },
-  ) {
+  decodeJwt: function (token) {
     try {
-      localStorage.setItem('jwt', result.data.token);
-      await SignUp.Trigger(result.data);
-      await Auth.sessionIn();
-    } catch (error) {
-      logger.error(error);
-      localStorage.removeItem('jwt');
+      return JSON.parse(atob(token.split('.')[1]));
+    } catch (e) {
+      return null;
     }
   },
+  scheduleTokenRefresh: function () {
+    if (this[refreshTimeout]) {
+      clearTimeout(this[refreshTimeout]);
+    }
+
+    const currentToken = Auth.getToken();
+    if (!currentToken) return;
+
+    const payload = Auth.decodeJwt(currentToken);
+    if (!payload || !payload.refreshExpiresAt) return;
+
+    const expiresIn = payload.refreshExpiresAt - Date.now();
+    const refreshBuffer = 2 * 60 * 1000; // 2 minutes
+    const refreshIn = expiresIn - refreshBuffer;
+
+    logger.info(`Token refresh in ${refreshIn / (1000 * 60)} minutes`);
+
+    if (refreshIn <= 0) return; // Already expired or close to it
+
+    this[refreshTimeout] = setTimeout(async () => {
+      const { data, status } = await UserService.get({ id: 'auth' });
+      if (status === 'success') {
+        logger.info('Refreshed access token.');
+        Auth.setToken(data.token);
+        localStorage.setItem('jwt', data.token);
+        Auth.scheduleTokenRefresh();
+      } else Auth.sessionOut();
+    }, refreshIn);
+  },
   sessionIn: async function (userServicePayload) {
     try {
       const token = userServicePayload?.data?.token ? userServicePayload.data.token : localStorage.getItem('jwt');
-
       if (token) {
-        this.setToken(token);
+        Auth.setToken(token);
+
         const result = userServicePayload
-          ? userServicePayload
-          : await (async () => {
-              const _result = await UserService.get({ id: 'auth' });
-              return {
-                status: _result.status,
-                message: _result.message,
-                data: {
-                  user: _result.data,
-                },
-              };
-            })();
+          ? userServicePayload // From login/signup
+          : await UserService.get({ id: 'auth' });
+
         const { status, data, message } = result;
         if (status === 'success') {
+          Auth.setToken(data.token);
           localStorage.setItem('jwt', token);
+          Auth.renderSessionUI();
           await LogIn.Trigger({ user: data.user });
           await Account.updateForm(data.user);
+          Auth.scheduleTokenRefresh();
           return { user: data.user };
         }
         if (message && message.match('expired'))
@@ -89,41 +106,68 @@ const Auth = {
               status: 'warning',
             });
           });
-        return await Auth.sessionOut();
       }
-
-      // anon guest session
-      this.deleteToken();
+      // Important delete session token if guest token already exists
+      Auth.deleteToken();
       localStorage.removeItem('jwt');
-      let guestToken = localStorage.getItem('jwt.g');
 
-      if (!guestToken) {
-        const result = await UserService.post({ id: 'guest' });
-        localStorage.setItem('jwt.g', result.data.token);
-        guestToken = result.data.token;
-      }
-
-      this.setGuestToken(guestToken);
-      let { data, status, message } = await UserService.get({ id: 'auth' });
-      if (status === 'error') {
-        if (message && message.match('expired')) {
-          localStorage.removeItem('jwt.g');
-          return await Auth.sessionOut();
-        } else throw new Error(message);
+      // Anon guest session
+      let guestToken = localStorage.getItem('jwt.g');
+      if (guestToken) {
+        Auth.setGuestToken(guestToken);
+        let { data, status, message } = await UserService.get({ id: 'auth' });
+        if (status === 'success') {
+          await LogIn.Trigger(data);
+          await Account.updateForm(data.user);
+          return data;
+        } else logger.error(message);
       }
-      await Account.updateForm(data);
-      return { user: data };
+      return await Auth.sessionOut();
     } catch (error) {
       logger.error(error);
       return { user: UserMock.default };
     }
   },
   sessionOut: async function () {
-    this.deleteToken();
-    localStorage.removeItem('jwt');
-    const result = await this.sessionIn();
-    await LogOut.Trigger(result);
-    return result;
+    {
+      const result = await UserService.delete({ id: 'logout' });
+      localStorage.removeItem('jwt');
+      Auth.deleteToken();
+      if (this[refreshTimeout]) {
+        clearTimeout(this[refreshTimeout]);
+      }
+      Auth.renderGuestUi();
+      LogIn.Scope.user.main.model.user = {};
+      await LogOut.Trigger(result);
+    }
+    {
+      localStorage.removeItem('jwt.g');
+      Auth.deleteGuestToken();
+      const result = await UserService.post({ id: 'guest' });
+      localStorage.setItem('jwt.g', result.data.token);
+      Auth.setGuestToken(result.data.token);
+      return await Auth.sessionIn();
+    }
+  },
+  renderSessionUI: function () {
+    s(`.main-btn-log-in`).style.display = 'none';
+    s(`.main-btn-sign-up`).style.display = 'none';
+    s(`.main-btn-log-out`).style.display = null;
+    s(`.main-btn-account`).style.display = null;
+    setTimeout(() => {
+      if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
+      if (s(`.modal-sign-up`)) s(`.btn-close-modal-sign-up`).click();
+    });
+  },
+  renderGuestUi: function () {
+    s(`.main-btn-log-in`).style.display = null;
+    s(`.main-btn-sign-up`).style.display = null;
+    s(`.main-btn-log-out`).style.display = 'none';
+    s(`.main-btn-account`).style.display = 'none';
+    setTimeout(() => {
+      if (s(`.modal-log-out`)) s(`.btn-close-modal-log-out`).click();
+      if (s(`.modal-account`)) s(`.btn-close-modal-account`).click();
+    });
   },
 };
 

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

@@ -24,8 +24,9 @@ const LogIn = {
   Event: {},
   Trigger: async function (options) {
     const { user } = options;
-    await Webhook.register({ user });
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+    if (!user || user.role === 'guest') return;
+    await Webhook.register({ user });
     if (s(`.session`))
       htmls(
         `.session`,
@@ -72,19 +73,18 @@ const LogIn = {
           imageSrc,
         };
       }
+      htmls(
+        `.action-btn-profile-log-in-render`,
+        html`<div class="abs center top-box-profile-img-container">
+          <img
+            class="abs center top-box-profile-img"
+            ${this.Scope.user.main.model.user.profileImage
+              ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
+              : ``}
+          />
+        </div>`,
+      );
     }
-
-    htmls(
-      `.action-btn-profile-log-in-render`,
-      html`<div class="abs center top-box-profile-img-container">
-        <img
-          class="abs center top-box-profile-img"
-          ${this.Scope.user.main.model.user.profileImage
-            ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
-            : ``}
-        />
-      </div>`,
-    );
   },
   Render: async function () {
     setTimeout(async () => {
@@ -103,13 +103,7 @@ const LogIn = {
           if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
         }
         const result = await UserService.post({ id: 'auth', body });
-        if (result.status === 'success') {
-          await Auth.sessionIn(result);
-          setTimeout(() => {
-            if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
-            if (s(`.modal-sign-up`)) s(`.btn-close-modal-sign-up`).click();
-          });
-        }
+
         if (result.status === 'error' && result.message.match('attempts')) {
           htmls(`.login-attempt-warn-value`, result.message.split(':')[1]);
           s(`.login-attempt-warn-container`).classList.remove('hide');
@@ -119,6 +113,8 @@ const LogIn = {
           htmls(`.login-attempt-warn-value0`, result.message.split(':')[1]);
           s(`.login-attempt-warn-container0`).classList.remove('hide');
         } else s(`.login-attempt-warn-container0`).classList.add('hide');
+
+        if (result.status === 'success') await Auth.sessionIn(result);
         NotificationManager.Push({
           html: result.status === 'success' ? Translate.Render(`${result.status}-user-log-in`) : result.message,
           status: result.status,
@@ -189,9 +185,6 @@ const LogIn = {
       </form>
     `;
   },
-  cleanMainUser: () => {
-    LogIn.Scope.user.main.model.user = {};
-  },
 };
 
 export { LogIn };

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

@@ -4,11 +4,11 @@ import { LogIn } from './LogIn.js';
 import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
 import { Webhook } from './Webhook.js';
+import { NotificationManager } from './NotificationManager.js';
 
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    LogIn.cleanMainUser();
     await Webhook.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))
@@ -41,6 +41,10 @@ const LogOut = {
       s('.btn-log-out').onclick = async (e) => {
         e.preventDefault();
         await Auth.sessionOut();
+        NotificationManager.Push({
+          html: Translate.Render(`success-logout`),
+          status: 'success',
+        });
       };
     });
     // Translate.Render('confirm-logout')

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

@@ -1,14 +1,207 @@
-const Pagination = {
-  Render: async ({ id }) => {
-    return html`
+import { getQueryParams, setQueryParams } from './Router.js';
+
+class AgPagination extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._gridId = null;
+    const queryParams = getQueryParams();
+    this._currentPage = parseInt(queryParams.page, 10) || 1;
+    this._limit = parseInt(queryParams.limit, 10) || 10;
+    this._totalPages = 1;
+    this._totalItems = 0;
+    this.handlePageChange = this.handlePageChange.bind(this);
+    this.handleLimitChange = this.handleLimitChange.bind(this);
+  }
+
+  static get observedAttributes() {
+    return ['grid-id', 'current-page', 'total-pages', 'total-items', 'limit'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'grid-id':
+        this._gridId = newValue;
+        break;
+      case 'current-page':
+        this._currentPage = parseInt(newValue, 10) || this._currentPage;
+        break;
+      case 'total-pages':
+        this._totalPages = parseInt(newValue, 10) || 1;
+        break;
+      case 'total-items':
+        this._totalItems = parseInt(newValue, 10) || 0;
+        break;
+      case 'limit':
+        this._limit = parseInt(newValue, 10) || this._limit;
+        break;
+    }
+    this.update();
+  }
+
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
+    this.update();
+  }
+
+  disconnectedCallback() {
+    // Event listeners on shadow DOM are garbage collected with the component
+  }
+
+  handlePageChange(newPage) {
+    if (newPage < 1 || newPage > this._totalPages || newPage === this._currentPage) {
+      return;
+    }
+    this._currentPage = newPage;
+    setQueryParams({ page: newPage, limit: this._limit });
+    this.dispatchEvent(new CustomEvent('page-change', { detail: { page: newPage } }));
+  }
+
+  handleLimitChange(event) {
+    const newLimit = parseInt(event.target.value, 10);
+    if (newLimit === this._limit) {
+      return;
+    }
+    this._limit = newLimit;
+    this._currentPage = 1; // Reset to first page on limit change
+    setQueryParams({ page: 1, limit: newLimit });
+    this.dispatchEvent(new CustomEvent('limit-change', { detail: { limit: newLimit } }));
+  }
+
+  update() {
+    if (!this.shadowRoot.querySelector('#page-info')) return;
+
+    const isFirstPage = this._currentPage === 1;
+    const isLastPage = this._currentPage === this._totalPages;
+
+    this.shadowRoot.querySelector('#first-page').disabled = isFirstPage;
+    this.shadowRoot.querySelector('#prev-page').disabled = isFirstPage;
+    this.shadowRoot.querySelector('#next-page').disabled = isLastPage;
+    this.shadowRoot.querySelector('#last-page').disabled = isLastPage;
+
+    const startItem = this._totalItems > 0 ? (this._currentPage - 1) * this._limit + 1 : 0;
+    const endItem = Math.min(this._currentPage * this._limit, this._totalItems);
+
+    this.shadowRoot.querySelector('#summary-info').textContent = `${startItem} - ${endItem} of ${this._totalItems}`;
+    this.shadowRoot.querySelector('#page-info').textContent = `Page ${this._currentPage} of ${this._totalPages}`;
+
+    const limitSelector = this.shadowRoot.querySelector('#limit-selector');
+    if (limitSelector.value != this._limit) {
+      limitSelector.value = this._limit;
+    }
+
+    this.renderPageButtons();
+  }
+
+  renderPageButtons() {
+    const pageButtonsContainer = this.shadowRoot.querySelector('#page-buttons');
+    pageButtonsContainer.innerHTML = '';
+
+    const maxButtons = 5;
+    let startPage = Math.max(1, this._currentPage - Math.floor(maxButtons / 2));
+    let endPage = Math.min(this._totalPages, startPage + maxButtons - 1);
+
+    if (endPage - startPage + 1 < maxButtons) {
+      startPage = Math.max(1, endPage - maxButtons + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      const button = document.createElement('button');
+      button.textContent = i;
+      button.disabled = i === this._currentPage;
+      if (i === this._currentPage) {
+        button.classList.add('active');
+      }
+      button.addEventListener('click', () => this.handlePageChange(i));
+      pageButtonsContainer.appendChild(button);
+    }
+  }
+
+  addEventListeners() {
+    this.shadowRoot.querySelector('#first-page').addEventListener('click', () => this.handlePageChange(1));
+    this.shadowRoot
+      .querySelector('#prev-page')
+      .addEventListener('click', () => this.handlePageChange(this._currentPage - 1));
+    this.shadowRoot
+      .querySelector('#next-page')
+      .addEventListener('click', () => this.handlePageChange(this._currentPage + 1));
+    this.shadowRoot
+      .querySelector('#last-page')
+      .addEventListener('click', () => this.handlePageChange(this._totalPages));
+    this.shadowRoot.querySelector('#limit-selector').addEventListener('change', this.handleLimitChange);
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = html`
       <style>
-        .pagination-container-${id} {
+        :host {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 8px;
+          font-family: sans-serif;
+          font-size: 14px;
+          gap: 8px;
+        }
+        button {
+          border: 1px solid #ccc;
+          background-color: #f0f0f0;
+          padding: 6px 12px;
+          cursor: pointer;
+          border-radius: 4px;
+        }
+        button:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        button.active {
+          border-color: #007bff;
+          background-color: #007bff;
+          color: white;
+        }
+        #page-info {
+          min-width: 80px;
+          text-align: center;
+        }
+        #page-buttons {
+          display: flex;
+          gap: 4px;
+        }
+        .summary-panel,
+        .page-summary-panel {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+        #limit-selector {
+          border: 1px solid #ccc;
+          background-color: #f0f0f0;
+          padding: 6px 12px;
+          border-radius: 4px;
         }
       </style>
-
-      <div class="in pagination-container-${id}">test pagination</div>
+      <div class="summary-panel">
+        <span id="summary-info"></span>
+      </div>
+      <button id="first-page">First</button>
+      <button id="prev-page">Previous</button>
+      <div class="page-summary-panel">
+        <div id="page-buttons"></div>
+        <span id="page-info"></span>
+      </div>
+      <button id="next-page">Next</button>
+      <button id="last-page">Last</button>
+      <select id="limit-selector">
+        <option value="10">10</option>
+        <option value="20">20</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+      </select>
     `;
-  },
-};
+  }
+}
+
+customElements.define('ag-pagination', AgPagination);
 
-export { Pagination };
+export { AgPagination };

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

@@ -1,5 +1,5 @@
 /**
- * Vanilla JavaScript module for manipulating the DOM.
+ * Router module for handling routing in a PWA application.
  * @module src/client/components/core/Router.js
  * @namespace PwaRouter
  */
@@ -245,7 +245,8 @@ const closeModalRouteChangeEvent = (options = {}) => {
 
   for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event]();
   if (topModalId) Modal.setTopModalCallback(topModalId);
-  setPath(`${getProxyPath()}${Modal.Data[topModalId]?.options?.route || 'home'}`);
+  setPath(`${getProxyPath()}${Modal.Data[topModalId]?.options?.route ?? ''}`);
+  setDocTitle(Modal.Data[topModalId]?.options?.route ?? '');
 };
 
 /**
@@ -255,7 +256,7 @@ const closeModalRouteChangeEvent = (options = {}) => {
  * @param {string} options.route - The route associated with the modal view.
  * @memberof PwaRouter
  */
-const handleModalViewRoute = (options = { route: 'home' }) => {
+const handleModalViewRoute = (options = { route: '' }) => {
   const { route } = options;
   if (!route) return;
 
@@ -270,6 +271,31 @@ const handleModalViewRoute = (options = { route: 'home' }) => {
   }
 };
 
+/**
+ * Sets or updates query parameters in the URL.
+ * It preserves the existing path, hash, and other query parameters.
+ *
+ * @param {Object.<string, string|number>} newParams - An object of query parameters to set or update.
+ *        If a value is `null` or `undefined`, the parameter will be removed.
+ * @param {object} [options={ replace: true }] - Options for history manipulation.
+ * @param {boolean} [options.replace=true] - If true, uses `history.replaceState` instead of `history.pushState`.
+ * @memberof PwaRouter
+ */
+const setQueryParams = (newParams, options = { replace: true }) => {
+  const url = new URL(window.location.href);
+  Object.entries(newParams).forEach(([key, value]) => {
+    if (value === null || value === undefined) {
+      url.searchParams.delete(key);
+    } else {
+      url.searchParams.set(key, value);
+    }
+  });
+
+  const newPath = url.pathname + url.search + url.hash;
+
+  history.pushState(history.state, '', newPath);
+};
+
 export {
   RouterEvents,
   closeModalRouteChangeEvents,
@@ -284,4 +310,5 @@ export {
   getQueryParams,
   getProxyPath,
   setPath,
+  setQueryParams,
 };

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

@@ -53,8 +53,7 @@ const SignUp = {
           status: result.status,
         });
         if (result.status === 'success') {
-          await Auth.sessionOut();
-          await Auth.signUpToken(result);
+          await Auth.sessionIn(result);
           s(`.btn-close-${options.idModal}`).click();
         }
       });

package/src/client/components/default/LogInDefault.js

@@ -1,17 +1,11 @@
-import { UserService } from '../../services/user/user.service.js';
 import { Auth } from '../core/Auth.js';
 import { LogIn } from '../core/LogIn.js';
-import { s } from '../core/VanillaJs.js';
 import { ElementsDefault } from './ElementsDefault.js';
 
 const LogInDefault = async function () {
   LogIn.Event['LogInDefault'] = async (options) => {
     const { token, user } = options;
     ElementsDefault.Data.user.main.model.user = user;
-    s(`.main-btn-log-in`).style.display = 'none';
-    s(`.main-btn-sign-up`).style.display = 'none';
-    s(`.main-btn-log-out`).style.display = null;
-    s(`.main-btn-account`).style.display = null;
   };
   const { user } = await Auth.sessionIn();
   ElementsDefault.Data.user.main.model.user = user;

package/src/client/components/default/LogOutDefault.js

@@ -1,25 +1,9 @@
-import { Auth } from '../core/Auth.js';
 import { LogOut } from '../core/LogOut.js';
-import { NotificationManager } from '../core/NotificationManager.js';
-import { Translate } from '../core/Translate.js';
-import { s } from '../core/VanillaJs.js';
 import { ElementsDefault } from './ElementsDefault.js';
 
 const LogOutDefault = async function () {
   LogOut.Event['LogOutDefault'] = async (result = { user: { _id: '' } }) => {
     ElementsDefault.Data.user.main.model.user = result.user;
-
-    s(`.main-btn-log-out`).style.display = 'none';
-    s(`.main-btn-account`).style.display = 'none';
-    s(`.main-btn-log-in`).style.display = null;
-    s(`.main-btn-sign-up`).style.display = null;
-    if (s(`.modal-log-out`)) s(`.btn-close-modal-log-out`).click();
-    if (s(`.modal-account`)) s(`.btn-close-modal-account`).click();
-
-    NotificationManager.Push({
-      html: Translate.Render(`success-logout`),
-      status: 'success',
-    });
   };
 };
 

package/src/client/services/core/core.service.js

@@ -33,7 +33,11 @@ const getWsBaseUrl = (options = { id: '', endpoint: '', wsBasePath: '' }) =>
   }${options?.endpoint ? options.endpoint : ''}${options?.id ? `/${options.id}` : ''}`;
 
 const headersFactory = (headerId = '') => {
-  const headers = { Authorization: Auth.getJWT() }; // , mode: 'no-cors'
+  const headers = {
+    Authorization: Auth.getJWT(),
+    withCredentials: true,
+    credentials: 'include', // no cors: 'same-origin'
+  };
   switch (headerId) {
     case 'file':
       return headers;