underpost 2.8.87 → 2.8.88

package/src/cli/run.js

@@ -7,6 +7,8 @@ import fs from 'fs-extra';
 import { range, setPad, timer } from '../client/components/core/CommonJs.js';
 import UnderpostDeploy from './deploy.js';
 import UnderpostRootEnv from './env.js';
+import UnderpostRepository from './repository.js';
+import os from 'os';
 
 const logger = loggerFactory(import.meta);
 
@@ -19,6 +21,8 @@ class UnderpostRun {
     imageName: '',
     containerName: '',
     namespace: '',
+    build: false,
+    replicas: 1,
   };
   static RUNNERS = {
     'spark-template': (path, options = UnderpostRun.DEFAULT_OPTION) => {
@@ -26,9 +30,9 @@ class UnderpostRun {
       shellExec(`sudo rm -rf ${dir}`);
       shellCd('/home/dd');
 
-      // pbcopy(`cd /home/dd && sbt new underpostnet/spark-template.g8`);
+      // pbcopy(`cd /home/dd && sbt new ${process.env.GITHUB_USERNAME}/spark-template.g8`);
       // await read({ prompt: 'Command copy to clipboard, press enter to continue.\n' });
-      shellExec(`cd /home/dd && sbt new underpostnet/spark-template.g8 '--name=spark-template'`);
+      shellExec(`cd /home/dd && sbt new ${process.env.GITHUB_USERNAME}/spark-template.g8 '--name=spark-template'`);
 
       shellCd(dir);
 
@@ -103,10 +107,12 @@ class UnderpostRun {
     },
     'template-deploy': (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const baseCommand = options.dev || true ? 'node bin' : 'underpost';
+      shellExec(`${baseCommand} run clean`);
+      shellExec(`${baseCommand} push ./engine-private ${process.env.GITHUB_USERNAME}/engine-private`);
       shellCd('/home/dd/engine');
       shellExec(`git reset`);
       shellExec(`${baseCommand} cmt . --empty ci package-pwa-microservices-template`);
-      shellExec(`${baseCommand} push . underpostnet/engine`);
+      shellExec(`${baseCommand} push . ${process.env.GITHUB_USERNAME}/engine`);
     },
     clean: (path, options = UnderpostRun.DEFAULT_OPTION) => {
       shellCd(path ?? `/home/dd/engine`);
@@ -115,8 +121,8 @@ class UnderpostRun {
     pull: (path, options = UnderpostRun.DEFAULT_OPTION) => {
       shellCd(`/home/dd/engine`);
       shellExec(`node bin/deploy clean-core-repo`);
-      shellExec(`underpost pull . underpostnet/engine`);
-      shellExec(`underpost pull engine-private underpostnet/engine-private`, { silent: true });
+      shellExec(`underpost pull . ${process.env.GITHUB_USERNAME}/engine`);
+      shellExec(`underpost pull ./engine-private ${process.env.GITHUB_USERNAME}/engine-private`);
     },
     'release-deploy': (path, options = UnderpostRun.DEFAULT_OPTION) => {
       actionInitLog();
@@ -128,11 +134,12 @@ class UnderpostRun {
       }
     },
     'ssh-deploy': (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      actionInitLog();
       const baseCommand = options.dev || true ? 'node bin' : 'underpost';
       shellCd('/home/dd/engine');
       shellExec(`git reset`);
       shellExec(`${baseCommand} cmt . --empty cd ssh-${path}`);
-      shellExec(`${baseCommand} push . underpostnet/engine`);
+      shellExec(`${baseCommand} push . ${process.env.GITHUB_USERNAME}/engine`);
     },
     ide: (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const { underpostRoot } = options;
@@ -148,13 +155,28 @@ class UnderpostRun {
       let [deployId, subConf] = path.split(',');
       shellExec(`npm run dev-api ${deployId} ${subConf}`);
     },
-    'router-sync': (path, options = UnderpostRun.DEFAULT_OPTION) => {
+    sync: (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      const env = options.dev ? 'development' : 'production';
       const baseCommand = options.dev || true ? 'node bin' : 'underpost';
-      const defaultPaht = ['dd', 'kind-control-plane'];
-      let [deployId, node] = path ? path.split(',') : defaultPaht;
-      deployId = deployId ?? defaultPaht[0];
-      node = node ?? defaultPaht[1];
-      shellExec(`${baseCommand} deploy --sync --node ${node} --build-manifest --info-router ${deployId} production`);
+      shellExec(`${baseCommand} run clean`);
+      const defaultPath = ['dd-default', 1, ``, ``, 'kind-control-plane'];
+      let [deployId, replicas, versions, image, node] = path ? path.split(',') : defaultPath;
+      deployId = deployId ?? defaultPath[0];
+      replicas = replicas ?? defaultPath[1];
+      versions = versions ?? defaultPath[2];
+      image = image ?? defaultPath[3];
+      node = node ?? defaultPath[4];
+      shellExec(
+        `${baseCommand} deploy --kubeadm --build-manifest --sync --info-router --replicas ${
+          replicas ?? 1
+        } --node ${node}${image ? ` --image ${image}` : ''}${
+          versions ? ` --versions ${versions.replaceAll('+', ',')}` : ''
+        } dd ${env}`,
+      );
+      if (!options.build) shellExec(`${baseCommand} deploy --kubeadm ${deployId} ${env}`);
+    },
+    'ls-deployments': async (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      console.table(await UnderpostDeploy.API.get(path, 'deployments'));
     },
     monitor: (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const pid = getTerminalPid();
@@ -290,11 +312,21 @@ class UnderpostRun {
     },
     deploy: async (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const deployId = path;
+      const { validVersion, deployVersion } = UnderpostRepository.API.privateConfUpdate(deployId);
+      if (!validVersion) throw new Error('Version mismatch');
       const currentTraffic = UnderpostDeploy.API.getCurrentTraffic(deployId);
       const targetTraffic = currentTraffic === 'blue' ? 'green' : 'blue';
       const env = 'production';
       const ignorePods = UnderpostDeploy.API.get(`${deployId}-${env}-${targetTraffic}`).map((p) => p.NAME);
-      shellExec(`sudo kubectl rollout restart deployment/${deployId}-${env}-${targetTraffic}`);
+
+      if (options.build === true) {
+        // deployId, replicas, versions, image, node
+        shellExec(
+          `node bin run sync ${deployId},${options.replicas ?? 1},${targetTraffic},${
+            options.imageName ?? `localhost/rockylinux9-underpost:${deployVersion}`
+          },${os.hostname()}`,
+        );
+      } else shellExec(`sudo kubectl rollout restart deployment/${deployId}-${env}-${targetTraffic}`);
 
       let checkStatusIteration = 0;
       const checkStatusIterationMsDelay = 1000;

package/src/cli/ssh.js

@@ -1,23 +1,37 @@
-import { getNpmRootPath } from '../server/conf.js';
+/**
+ * SSH module for managing SSH key generation and connection setup.
+ * @module src/cli/ssh.js
+ * @namespace UnderpostSSH
+ */
+
 import { shellExec } from '../server/process.js';
 
+/**
+ * @class UnderpostSSH
+ * @description Manages SSH key generation and connection setup.
+ * @memberof UnderpostSSH
+ */
 class UnderpostSSH {
   static API = {
     /**
      * @method callback
-     * @param {object} options
-     * @param {boolean} options.generate - Generates new ssh credential and stores it in current private keys file storage.
-     * @description Import and start ssh server and client based on current default deployment ID.
+     * @description Manages SSH key generation and connection setup based on the default deployment ID.
+     * This function will either generate a new SSH key pair or import an existing one,
+     * then initiate the SSH connection process.
+     * @param {object} [options={ generate: false }] - Options for the SSH callback.
+     * @param {boolean} [options.generate=false] - If true, generates a new SSH key pair. Otherwise, it imports the existing one.
+     * @memberof UnderpostSSH
+     * @returns {Promise<void>}
      */
     callback: async (
       options = {
         generate: false,
       },
     ) => {
-      // only import + start
+      // Example usage for importing an existing key:
       // node bin/deploy ssh root@<host> <password> import
 
-      // generate + import + start
+      // Example usage for generating a new key:
       // node bin/deploy ssh root@<host> <password>
 
       shellExec(

package/src/client/Default.index.js

@@ -16,9 +16,49 @@ import { SocketIo } from './components/core/SocketIo.js';
 import { SocketIoDefault } from './components/default/SocketIoDefault.js';
 import { ElementsDefault } from './components/default/ElementsDefault.js';
 import { CssDefaultDark, CssDefaultLight } from './components/default/CssDefault.js';
+import { EventsUI } from './components/core/EventsUI.js';
+import { Modal } from './components/core/Modal.js';
 
 const htmlMainBody = async () => {
-  return html`<span>Hello World!!</span>`;
+  setTimeout(() => {
+    EventsUI.onClick('.get-started-button', (e) => {
+      e.preventDefault();
+      location.href = `https://www.nexodev.org/docs/?cid=src`;
+    });
+  });
+  return html`
+    <div class="landing-container">
+      <div class="content-wrapper">
+        <h1 class="animated-text">
+          <span class="greeting">Hello, World!</span>
+          <span class="subtitle">Welcome to Our Platform</span>
+        </h1>
+
+        <div class="features">
+          <div class="feature-card">
+            <i class="icon">🚀</i>
+            <h3>Fast & Reliable</h3>
+            <p>Lightning-fast performance with 99.9% uptime</p>
+          </div>
+          <div class="feature-card">
+            <i class="icon">🎨</i>
+            <h3>Beautiful UI</h3>
+            <p>Modern and intuitive user interface</p>
+          </div>
+          <div class="feature-card">
+            <i class="icon">⚡</i>
+            <h3>Powerful Features</h3>
+            <p>Everything you need in one place</p>
+          </div>
+        </div>
+
+        <button class="cta-button get-started-button">
+          Get Started
+          <span class="button-icon">→</span>
+        </button>
+      </div>
+    </div>
+  `;
 };
 
 window.onload = () =>
@@ -39,5 +79,6 @@ window.onload = () =>
       await LogOutDefault();
       await SignUpDefault();
       await Keyboard.Init({ callBackTime: DefaultParams.EVENT_CALLBACK_TIME });
+      await Modal.RenderSeoSanitizer();
     },
   });

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

@@ -10,7 +10,8 @@ import { Modal } from './Modal.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 const Account = {
   UpdateEvent: {},
@@ -194,7 +195,14 @@ const Account = {
       await this.instanceModalUiEvents({ user });
     });
     return html`
-      <input type="file" accept="${profileFileAccept.join(', ')}" class="account-profile-image-input hide" />
+      <label for="account-profile-image-input-label"
+        ><span class="hide">Profile Image</span>
+        <input
+          type="file"
+          accept="${profileFileAccept.join(', ')}"
+          class="account-profile-image-input hide"
+          id="account-profile-image-input-label"
+      /></label>
       ${renderWave({ id: waveAnimationId })}
 
       <form class="in">

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

@@ -2,8 +2,9 @@
 // https://www.ag-grid.com/javascript-data-grid/themes/
 
 import { ThemeEvents, darkTheme } from './Css.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
-import * as agGrid from 'ag-grid-community';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
+import './Pagination.js';
 
 const AgGrid = {
   grids: {},
@@ -14,6 +15,9 @@ const AgGrid = {
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
         // Row Data: The data to be displayed.
+        pagination: false, // Disabled by default, will be handled by the management view
+        // paginationPageSize: 100,
+        // suppressPaginationPanel: true, // We are using our own custom pagination component
         // rowHeight: 60,
         enableCellChangeFlash: true,
         defaultColDef: {
@@ -23,6 +27,12 @@ const AgGrid = {
           filter: true,
           autoHeight: true,
         },
+        rowClassRules: {
+          'row-new-highlight': (params) => {
+            // a temporary flag we can set on new rows to highlight them
+            return params.data && params.data._new;
+          },
+        },
         // domLayout: 'autoHeight', || 'normal'
         // Column Definitions: Defines & controls grid columns.
         columnDefs: options?.gridOptions?.rowData?.[0]
@@ -48,13 +58,17 @@ const AgGrid = {
         }
       };
     });
+    const usePagination = options?.usePagination;
     return html`
-      <div
-        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
-        style="${options?.style
-          ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
-          : 'height: 500px'}"
-      ></div>
+      <div>
+        <div
+          class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+          style="${options?.style
+            ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
+            : 'height: 500px'}"
+        ></div>
+        ${usePagination ? `<ag-pagination id="ag-pagination-${id}"></ag-pagination>` : ''}
+      </div>
     `;
   },
   RenderStyle: async function (
@@ -136,6 +150,10 @@ const AgGrid = {
           ${darkTheme
             ? html`
                 <style>
+                  .ag-row.row-new-highlight {
+                    background-color: #6d68ff !important;
+                    transition: background-color 1s ease-out;
+                  }
                   .ag-cell-data-changed,
                   .ag-cell-data-changed-animation {
                     background-color: #6d68ff !important;
@@ -145,6 +163,10 @@ const AgGrid = {
                 </style>
               `
             : html`<style>
+                .ag-row.row-new-highlight {
+                  background-color: #d0eaf8 !important;
+                  transition: background-color 1s ease-out;
+                }
                 .ag-cell-data-changed,
                 .ag-cell-data-changed-animation {
                   background-color: #d1d1d1 !important;

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

@@ -4,16 +4,17 @@ import { loggerFactory } from './Logger.js';
 import { LogIn } from './LogIn.js';
 import { LogOut } from './LogOut.js';
 import { NotificationManager } from './NotificationManager.js';
-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 +36,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 +105,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/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: {},
@@ -32,7 +32,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,6 +49,7 @@ const BtnIcon = {
             >`
           : label}
       </div>
+      <label class="hide">${htmlStrSanitize(options.label) ? htmlStrSanitize(options.label) : tokenId}</label>
     </button>`;
     if (options.tooltipHtml)
       setTimeout(() => {

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

@@ -7,9 +7,9 @@ import { Modal } from './Modal.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Panel } from './Panel.js';
 import { Responsive } from './Responsive.js';
-import { listenQueryPathInstance, RouterEvents, setQueryPath } from './Router.js';
+import { listenQueryPathInstance, RouterEvents, setQueryPath, getQueryParams } from './Router.js';
 import { Translate } from './Translate.js';
-import { append, getQueryParams, getTimeZone, htmls, s, sa } from './VanillaJs.js';
+import { append, getTimeZone, htmls, s, sa } from './VanillaJs.js';
 
 // https://fullcalendar.io/docs/event-object
 
@@ -363,7 +363,6 @@ const CalendarCore = {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (lastCid === cid) return;
       lastCid = cid;
-      if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
         // if (Auth.getToken())
         // else getSrrData();

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

@@ -577,8 +577,7 @@ const getCurrentTrace = () => {
   try {
     _stack;
   } catch (error) {
-    console.error(error);
-    return error;
+    return error.stack;
   }
 };
 

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

@@ -1,13 +1,14 @@
 import { marked } from 'marked';
 import { FileService } from '../../services/file/file.service.js';
-import { append, getBlobFromUint8ArrayFile, getQueryParams, getRawContentFile, htmls, s } from './VanillaJs.js';
-import { titleFormatted } from './CommonJs.js';
+import { append, getBlobFromUint8ArrayFile, getRawContentFile, htmls, s } from './VanillaJs.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';
 import { CoreService, getApiBaseUrl } from '../../services/core/core.service.js';
 import { loggerFactory } from './Logger.js';
 import { imageShimmer, renderChessPattern, renderCssAttr, styleFactory } from './Css.js';
+import { getQueryParams } from './Router.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -136,12 +137,9 @@ const Content = {
       case 'svg':
       case 'gif':
       case 'png': {
-        const url = options.url
-          ? options.url
-          : file._id
-          ? getApiBaseUrl({ id: file._id, endpoint: 'file/blob' })
-          : URL.createObjectURL(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+        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}"
@@ -150,11 +148,7 @@ const Content = {
         break;
       }
       case 'pdf': {
-        const url = options.url
-          ? options.url
-          : file._id
-          ? getApiBaseUrl({ id: file._id, endpoint: 'file/blob' })
-          : URL.createObjectURL(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+        const url = Content.urlFactory(options);
         render += html`<iframe
           class="in ${options.class} iframe-${options.idModal}"
           ${styleFactory(options.style)}
@@ -188,6 +182,15 @@ const Content = {
     if (options.raw) return render;
     append(container, render);
   },
+  urlFactory: function (options) {
+    return options.url
+      ? options.url
+      : options.file?.data?.data
+      ? URL.createObjectURL(getBlobFromUint8ArrayFile(options.file.data.data, options.file.mimetype))
+      : options.file._id
+      ? getApiBaseUrl({ id: options.file._id, endpoint: 'file/blob' })
+      : null;
+  },
 };
 
 export { Content };