underpost 2.8.878 → 2.8.882

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

@@ -1,3 +1,10 @@
+/**
+ * Utility class for authentication state management and session lifecycle control.
+ * This class is designed to be used as a singleton instance (exported as 'Auth').
+ * @module src/client/components/core/Auth.js
+ * @namespace AuthClient
+ */
+
 import { UserMock, UserService } from '../../services/user/user.service.js';
 import { Account } from './Account.js';
 import { loggerFactory } from './Logger.js';
@@ -9,95 +16,202 @@ import { s } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
 
-const token = Symbol('token');
-
-const guestToken = Symbol('guestToken');
-
-const refreshTimeout = Symbol('refreshTimeout');
-
-const Auth = {
-  [token]: '',
-  [guestToken]: '',
-  setToken: function (value = '') {
-    return (this[token] = value);
-  },
-  deleteToken: function () {
-    return (this[token] = '');
-  },
-  getToken: function () {
-    return this[token];
-  },
-  setGuestToken: function (value = '') {
-    return (this[guestToken] = value);
-  },
-  deleteGuestToken: function () {
-    return (this[guestToken] = '');
-  },
-  getGuestToken: function () {
-    return this[guestToken];
-  },
-  getJWT: function () {
-    if (Auth.getToken()) return `Bearer ${Auth.getToken()}`;
-    if (Auth.getGuestToken()) return `Bearer ${Auth.getGuestToken()}`;
+/**
+ * Manages user authentication state, tokens, and session lifecycle.
+ * @memberof AuthClient
+ */
+class Auth {
+  /**
+   * The current user access token (JWT).
+   * @type {string}
+   * @private
+   */
+  #token = '';
+
+  /**
+   * The token for anonymous guest sessions.
+   * @type {string}
+   * @private
+   */
+  #guestToken = '';
+
+  /**
+   * Timeout ID for the token refresh schedule.
+   * @type {number | undefined}
+   * @private
+   */
+  #refreshTimeout;
+
+  /**
+   * Creates an instance of Auth.
+   */
+  constructor() {
+    // Private fields are initialized above.
+  }
+
+  // --- Token Management ---
+
+  /**
+   * Sets the user's access token.
+   * @memberof AuthClient.Auth
+   * @param {string} [value=''] - The JWT token value.
+   * @returns {string} The set token value.
+   */
+  setToken(value = '') {
+    return (this.#token = value);
+  }
+
+  /**
+   * Clears the user's access token.
+   * @memberof AuthClient.Auth
+   * @returns {string} An empty string.
+   */
+  deleteToken() {
+    return (this.#token = '');
+  }
+
+  /**
+   * Gets the user's access token.
+   * @memberof AuthClient.Auth
+   * @returns {string} The JWT token.
+   */
+  getToken() {
+    return this.#token;
+  }
+
+  /**
+   * Sets the anonymous guest token.
+   * @memberof AuthClient.Auth
+   * @param {string} [value=''] - The guest token value.
+   * @returns {string} The set guest token value.
+   */
+  setGuestToken(value = '') {
+    return (this.#guestToken = value);
+  }
+
+  /**
+   * Clears the anonymous guest token.
+   * @memberof AuthClient.Auth
+   * @returns {string} An empty string.
+   */
+  deleteGuestToken() {
+    return (this.#guestToken = '');
+  }
+
+  /**
+   * Gets the anonymous guest token.
+   * @memberof AuthClient.Auth
+   * @returns {string} The guest token.
+   */
+  getGuestToken() {
+    return this.#guestToken;
+  }
+
+  /**
+   * Generates the JWT header string (e.g., "Bearer [token]") using the active token (user or guest).
+   * @memberof AuthClient.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 '';
-  },
-  decodeJwt: function (token) {
+  }
+
+  /**
+   * Decodes the payload section of a JWT token.
+   * @static
+   * @memberof AuthClient.Auth
+   * @param {string} token - The JWT string.
+   * @returns {object | null} The decoded JWT payload object, or null on failure.
+   */
+  static decodeJwt(token) {
     try {
+      // Uses atob for base64 decoding of the middle part of the JWT
       return JSON.parse(atob(token.split('.')[1]));
     } catch (e) {
+      logger.error('Failed to decode JWT:', e);
       return null;
     }
-  },
-  scheduleTokenRefresh: function () {
-    if (this[refreshTimeout]) {
-      clearTimeout(this[refreshTimeout]);
+  }
+
+  // --- Session Management ---
+
+  /**
+   * Schedules the access token to be refreshed shortly before it expires.
+   * Clears any existing refresh timeout before setting a new one.
+   * @memberof AuthClient.Auth
+   * @returns {void}
+   */
+  scheduleTokenRefresh() {
+    if (this.#refreshTimeout) {
+      clearTimeout(this.#refreshTimeout);
+      this.#refreshTimeout = undefined;
     }
 
-    const currentToken = Auth.getToken();
+    const currentToken = this.getToken();
     if (!currentToken) return;
 
     const payload = Auth.decodeJwt(currentToken);
-    if (!payload || !payload.refreshExpiresAt) return;
+    if (!payload || !payload.refreshExpiresAt) return; // Requires refreshExpiresAt in milliseconds
 
     const expiresIn = payload.refreshExpiresAt - Date.now();
-    const refreshBuffer = 2 * 60 * 1000; // 2 minutes
+    const refreshBuffer = 2 * 60 * 1000; // 2 minutes buffer before expiry
     const refreshIn = expiresIn - refreshBuffer;
 
-    logger.info(`Token refresh in ${refreshIn / (1000 * 60)} minutes`);
+    logger.info(`Token refresh scheduled in ${refreshIn / (1000 * 60)} minutes`);
 
-    if (refreshIn <= 0) return; // Already expired or close to it
+    if (refreshIn <= 0) {
+      logger.warn('Token already expired or too close to expiry, skipping refresh schedule.');
+      return;
+    }
 
-    this[refreshTimeout] = setTimeout(async () => {
-      const { data, status } = await UserService.get({ id: 'auth' });
-      if (status === 'success') {
-        logger.info('Refreshed access token.');
-        Auth.setToken(data.token);
+    this.#refreshTimeout = setTimeout(async () => {
+      const { data, status } = await UserService.get({ id: 'auth' }); // API call to get a fresh token
+      if (status === 'success' && data?.token) {
+        logger.info('Successfully refreshed access token.');
+        this.setToken(data.token);
         localStorage.setItem('jwt', data.token);
-        Auth.scheduleTokenRefresh();
-      } else Auth.sessionOut();
+        this.scheduleTokenRefresh(); // Schedule the next refresh
+      } else {
+        logger.warn('Token refresh failed, attempting session out.');
+        this.sessionOut();
+      }
     }, refreshIn);
-  },
-  sessionIn: async function (userServicePayload) {
+  }
+
+  /**
+   * Establishes a user session (logged-in) or falls back to a guest session.
+   * It attempts to use the provided token or a token from localStorage ('jwt').
+   * @memberof AuthClient.Auth
+   * @param {object} [userServicePayload] - Payload from a successful login/signup call to UserService.
+   * @returns {Promise<{user: object}>} A promise resolving to the current user object.
+   */
+  async sessionIn(userServicePayload) {
     try {
-      const token = userServicePayload?.data?.token ? userServicePayload.data.token : localStorage.getItem('jwt');
+      let token = userServicePayload?.data?.token || localStorage.getItem('jwt');
+
       if (token) {
-        Auth.setToken(token);
+        this.setToken(token);
 
         const result = userServicePayload
           ? userServicePayload // From login/signup
-          : await UserService.get({ id: 'auth' });
+          : await UserService.get({ id: 'auth' }); // Verify token with backend
 
         const { status, data, message } = result;
-        if (status === 'success') {
-          Auth.setToken(data.token);
-          localStorage.setItem('jwt', token);
-          Auth.renderSessionUI();
+
+        if (status === 'success' && data.token) {
+          // A valid user token was found/refreshed
+          this.setToken(data.token);
+          localStorage.setItem('jwt', data.token);
+          this.renderSessionUI();
           await LogIn.Trigger({ user: data.user });
           await Account.updateForm(data.user);
-          Auth.scheduleTokenRefresh();
+          this.scheduleTokenRefresh();
           return { user: data.user };
-        }
-        if (message && message.match('expired'))
+        } else if (message && message.match('expired')) {
+          logger.warn('User session token expired.');
+          // Redirect to login modal and push notification
           setTimeout(() => {
             s(`.main-btn-log-in`).click();
             NotificationManager.Push({
@@ -105,69 +219,124 @@ const Auth = {
               status: 'warning',
             });
           });
+        }
       }
-      // Important delete session token if guest token already exists
-      Auth.deleteToken();
+
+      // Cleanup failed user session attempt
+      this.deleteToken();
       localStorage.removeItem('jwt');
 
-      // Anon guest session
+      // Anon guest session attempt
       let guestToken = localStorage.getItem('jwt.g');
       if (guestToken) {
-        Auth.setGuestToken(guestToken);
-        let { data, status, message } = await UserService.get({ id: 'auth' });
-        if (status === 'success') {
+        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 LogIn.Trigger(data);
           await Account.updateForm(data.user);
           return data;
-        } else logger.error(message);
+        } else {
+          logger.error(`Guest token validation failed: ${message}`);
+          // Fall through to full sessionOut to re-create guest session
+        }
       }
-      return await Auth.sessionOut();
+
+      // If all attempts fail, create a new guest session (which calls sessionIn recursively)
+      return await this.sessionOut();
     } catch (error) {
-      logger.error(error);
+      logger.error('Error during sessionIn process:', error);
+      // Fallback to a mock user object
       return { user: UserMock.default };
     }
-  },
-  sessionOut: async function () {
-    {
+  }
+
+  /**
+   * Ends the current user session (logout) and initiates a new anonymous guest session.
+   * @memberof AuthClient.Auth
+   * @returns {Promise<object>} A promise resolving to the newly created guest session data.
+   */
+  async sessionOut() {
+    // 1. End User Session
+    try {
       const result = await UserService.delete({ id: 'logout' });
       localStorage.removeItem('jwt');
-      Auth.deleteToken();
-      if (this[refreshTimeout]) {
-        clearTimeout(this[refreshTimeout]);
+      this.deleteToken();
+      if (this.#refreshTimeout) {
+        clearTimeout(this.#refreshTimeout);
+        this.#refreshTimeout = undefined;
       }
-      Auth.renderGuestUi();
+      this.renderGuestUi();
+      // Reset user data in the LogIn state/model
       LogIn.Scope.user.main.model.user = {};
       await LogOut.Trigger(result);
+    } catch (error) {
+      logger.error('Error during user logout:', error);
     }
-    {
+
+    // 2. Start Guest Session
+    try {
       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();
+      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();
+      } else {
+        logger.error('Failed to get a new guest token.');
+        return { user: UserMock.default };
+      }
+    } catch (error) {
+      logger.error('Error during guest session creation:', error);
+      return { user: UserMock.default };
     }
-  },
-  renderSessionUI: function () {
+  }
+
+  // --- UI Rendering ---
+
+  /**
+   * Renders the UI for a logged-in user (hides Log In/Sign Up, shows Log Out/Account).
+   * Also closes any active login/signup modals.
+   * @memberof AuthClient.Auth
+   * @returns {void}
+   */
+  renderSessionUI() {
     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(() => {
+      // Close any open login/signup modals
       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 () {
+  }
+
+  /**
+   * Renders the UI for a guest user (shows Log In/Sign Up, hides Log Out/Account).
+   * Also closes any active logout/account modals.
+   * @memberof AuthClient.Auth
+   * @returns {void}
+   */
+  renderGuestUi() {
     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(() => {
+      // Close any open logout/account modals
       if (s(`.modal-log-out`)) s(`.btn-close-modal-log-out`).click();
       if (s(`.modal-account`)) s(`.btn-close-modal-account`).click();
     });
-  },
-};
+  }
+}
+
+// Export a singleton instance of the Auth class to maintain the original utility object access pattern.
+const AuthSingleton = new Auth();
 
-export { Auth };
+export { AuthSingleton as Auth };

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

@@ -1,7 +1,7 @@
 import { getId, s4 } from './CommonJs.js';
 import { renderCssAttr } from './Css.js';
 import { ToolTip } from './ToolTip.js';
-import { getAllChildNodes, s } from './VanillaJs.js';
+import { getAllChildNodes, htmlStrSanitize, s } from './VanillaJs.js';
 
 const BtnIcon = {
   Tokens: {},
@@ -15,9 +15,12 @@ const BtnIcon = {
       labelStyle: '',
       tabHref: '',
       tooltipHtml: '',
+      useVisibilityHover: false,
+      useMenuBtn: false,
     },
   ) {
     const tokenId = getId(this.Tokens, 'btn-token-');
+    if (options.useMenuBtn) options.class += ' main-menu-btn-selector';
     this.Tokens[tokenId] = { ...options };
     setTimeout(() => {
       if (s(`.a-${tokenId}`)) s(`.a-${tokenId}`).onclick = (e) => e.preventDefault();
@@ -32,7 +35,7 @@ const BtnIcon = {
       : ''}`;
     let render = html`<button
       ${options?.class ? `class="${options.class} ${tokenId}"` : ''}
-      ${options?.type ? `type="${options.type}"` : ''}
+      ${options?.type ? `type="${options.type}"` : `type="button"`}
       ${options?.style ? `style="${options.style}"` : ''}
       ${options?.attrs ? `${options.attrs}` : ''}
     >
@@ -49,11 +52,18 @@ const BtnIcon = {
             >`
           : label}
       </div>
+      <label class="hide">${htmlStrSanitize(options.label) ? htmlStrSanitize(options.label) : tokenId}</label>
     </button>`;
     if (options.tooltipHtml)
       setTimeout(() => {
         if (s(`.${tokenId}`))
-          ToolTip.Render({ container: `.${tokenId}`, id: tokenId, htmlRender: options.tooltipHtml });
+          ToolTip.Render({
+            container: `.${tokenId}`,
+            id: tokenId,
+            htmlRender: options.tooltipHtml,
+            useVisibilityHover: !!options.useVisibilityHover,
+            useMenuBtn: !!options.useMenuBtn,
+          });
       });
     return render;
   },

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

@@ -1,7 +1,7 @@
 import { marked } from 'marked';
 import { FileService } from '../../services/file/file.service.js';
 import { append, getBlobFromUint8ArrayFile, getRawContentFile, htmls, s } from './VanillaJs.js';
-import { titleFormatted } from './CommonJs.js';
+import { s4 } from './CommonJs.js';
 import { Translate } from './Translate.js';
 import { Modal, renderViewTitle } from './Modal.js';
 import { DocumentService } from '../../services/document/document.service.js';
@@ -139,6 +139,7 @@ const Content = {
       case 'png': {
         const url = Content.urlFactory(options);
         const imgRender = html`<img
+          alt="${file.name ? file.name : `file ${s4()}`}"
           class="in ${options.class}"
           ${styleFactory(options.style, `${renderChessPattern(50)}`)}
           src="${url}"

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

@@ -130,19 +130,20 @@ const CssCommonCore = async () => {
           opacity: 0;
         }
       }
-      .title-view-modal {
+      .title-main-modal {
         top: 8px;
-        font-size: 21px !important;
-        position: absolute !important;
+        font-size: 21px;
+        position: absolute;
       }
-      .title-view-modal .view-title-icon {
-        font-size: 21px !important;
+      .title-main-modal .view-title-icon {
+        font-size: 21px;
       }
       .down-arrow-submenu {
-        top: -20px;
-        text-align: right;
-        padding-right: 42px;
+        top: 0px;
         color: #5f5f5f;
+        left: 115px;
+        transform-origin: center;
+        width: 0px;
       }
       .main-body-btn {
         width: 50px;
@@ -153,6 +154,9 @@ const CssCommonCore = async () => {
       .main-body-btn:hover {
         font-size: 21px;
       }
+      .main-menu-btn-selector {
+        overflow: hidden;
+      }
     </style>
     <style>
       .lds-dual-ring,
@@ -215,6 +219,20 @@ const CssCommonCore = async () => {
       .bar-default-modal {
         overflow: hidden;
       }
+      .panel-placeholder-bottom {
+        height: 100px;
+        color: gray;
+      }
+      .menu-label-text {
+        transition: 0.3s;
+        position: relative;
+      }
+      .menu-btn-icon {
+        font-size: 20px;
+        width: 40px;
+        overflow: hidden;
+        text-align: center;
+      }
     </style>
     ${boxShadow({ selector: '.account-profile-image' })}
     <div class="ag-grid-style"></div>`;
@@ -325,11 +343,12 @@ const CssCoreDark = {
         }
         .main-btn-menu {
           text-align: left;
+          transition: none; /* sortable necessary */
           padding: 15px;
-          transition: none;
           margin: 0;
           border: 0;
           height: 52px;
+          background: #121212;
         }
         .main-btn-menu-active {
           background: #212020;
@@ -431,10 +450,6 @@ const CssCoreDark = {
           margin: 15px 5px 5px;
           text-align: left;
         }
-        .menu-btn-icon {
-          font-size: 20px;
-          margin: 12px;
-        }
         .view-title-icon {
           font-size: 35px;
           margin: 20px;
@@ -531,6 +546,10 @@ const CssCoreDark = {
           padding: 5px;
           margin: 5px;
         }
+        .submenu-btn {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 0;
+        }
       </style>
       ${scrollBarDarkRender()} ${borderChar(1, 'black', ['.main-body-btn-container'])}
     `,
@@ -579,12 +598,7 @@ const CssCoreLight = {
         .hover-active {
           background: #bbbbbb;
         }
-        .title-modal {
-          cursor: default;
-          font-size: 20px;
-          padding: 5px;
-          margin: 5px;
-        }
+
         .box-shadow {
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         }
@@ -645,11 +659,12 @@ const CssCoreLight = {
         }
         .main-btn-menu {
           text-align: left;
+          transition: none; /* sortable necessary */
           padding: 15px;
-          transition: none;
           margin: 0;
           border: 0;
           height: 52px;
+          background: #fff;
         }
         .main-btn-menu-active {
           background: #d8d8d8;
@@ -727,9 +742,7 @@ const CssCoreLight = {
           color: #333;
           background: 0 0;
         }
-        .title-modal {
-          color: #000;
-        }
+
         input {
           cursor: pointer;
           color: #272727;
@@ -748,10 +761,6 @@ const CssCoreLight = {
           margin: 15px 5px 5px;
           text-align: left;
         }
-        .menu-btn-icon {
-          font-size: 20px;
-          margin: 12px;
-        }
         .view-title-icon {
           font-size: 35px;
           margin: 20px;
@@ -861,6 +870,10 @@ const CssCoreLight = {
           padding: 5px;
           margin: 5px;
         }
+        .submenu-btn {
+          background: rgba(0, 0, 0, 0.1);
+          border-radius: 0;
+        }
       </style>
       ${scrollBarLightRender()} ${borderChar(1, 'white', ['.main-body-btn-container'])}
     `,