underpost 2.8.86 → 2.8.88

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

@@ -67,7 +67,7 @@ const ToggleSwitch = {
 
     if (options.type === 'checkbox') {
     }
-    return html`
+    const htmlRender = html`
       ${options?.displayMode === 'checkbox'
         ? html`<div class="${options?.containerClass ? options.containerClass : 'inl box-content-border'} ${id}">
             <div class="in ${id}-content toggle-switch-content-checkbox">
@@ -81,6 +81,20 @@ const ToggleSwitch = {
           </div>`}
       <input type="checkbox" class="${id}-checkbox" style="display: none" />
     `;
+    if (options.wrapper) {
+      setTimeout(() => (s(`.toggle-form-container-${id}`).onclick = () => ToggleSwitch.Tokens[`${id}`].click()));
+      return html`
+        <div class="in toggle-form-container toggle-form-container-${id} hover">
+          <div class="fl ">
+            <div class="in fll" style="width: 70%">
+              <div class="in">${options.wrapperLabel}</div>
+            </div>
+            <div class="in fll" style="width: 30%">${htmlRender}</div>
+          </div>
+        </div>
+      `;
+    }
+    return htmlRender;
   },
 };
 

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

@@ -132,72 +132,6 @@ const copyData = (data) =>
  */
 const pasteData = () => new Promise((resolve) => navigator.clipboard.readText().then((clipText) => resolve(clipText)));
 
-/**
- * The setPath function in JavaScript updates the browser's history with a new path, state, and title.
- * @param path - The `path` parameter is a string that represents the URL path where you want to
- * navigate or update in the browser history. It is the first parameter in the `setPath` function and
- * has a default value of `'/'`.
- * @param stateStorage - The `stateStorage` parameter in the `setPath` function is an object that
- * represents the state object associated with the new history entry. It is used to store data related
- * to the state of the application when navigating to a new path using `history.pushState()`. This data
- * can be accessed later
- * @param title - The `title` parameter in the `setPath` function is a string that represents the
- * title of the new history entry. It is used as the title of the new history entry in the browser's
- * history.
- * @memberof VanillaJS
- */
-const setPath = (path = '/', stateStorage = {}, title = '') => {
-  if (!path) path = '/';
-
-  const [inputPath, inputSearch] = `${path}`.split('?');
-
-  let sanitizedPath = (inputPath[0] !== '/' ? `/${inputPath}` : inputPath)
-    .trim()
-    .replaceAll('//', '/')
-    .replaceAll(`\\`, '/');
-
-  if (sanitizedPath.length > 1 && sanitizedPath[sanitizedPath.length - 1] === '/')
-    sanitizedPath = sanitizedPath.slice(0, -1);
-
-  if (window.location.pathname === sanitizedPath && (!inputSearch || inputSearch === location.search)) {
-    console.warn('Prevent overwriting same path', {
-      inputPath: inputPath,
-      inputSearch: inputSearch,
-      sanitizedPath: sanitizedPath,
-      currentLocationSearch: location.search,
-      currentLocationHash: location.hash,
-    });
-    return;
-  }
-  console.warn('Set path', {
-    inputPath: inputPath,
-    inputSearch: inputSearch,
-    sanitizedPath: sanitizedPath,
-    currentLocationSearch: location.search,
-    currentLocationHash: location.hash,
-  });
-  return history.pushState(
-    stateStorage,
-    title,
-    `${sanitizedPath}${inputSearch ? `?${inputSearch}` : ''}${location.hash ?? ''}`,
-  );
-};
-
-/**
- * The function `getQueryParams` extracts query parameters from the current URL and returns them as an
- * object.
- * @returns An object containing the query parameters from the current URL is being returned.
- * @memberof VanillaJS
- */
-const getQueryParams = () => {
-  const params = new URLSearchParams(window.location.search);
-  let queries = {};
-  for (const param of params) {
-    queries[param[0]] = param[1];
-  }
-  return queries;
-};
-
 /**
  * The `preHTML` function in JavaScript replaces special characters like &, <, and > with their
  * corresponding HTML entities.
@@ -375,21 +309,6 @@ const getBlobFromUint8ArrayFile = (data = [[]], mimetype = 'application/octet-st
   return new Blob([new Uint8Array(data)], { type: mimetype });
 };
 
-// Router
-/**
- * The function `getProxyPath` returns a proxy path based on the current location pathname.
- * @returns The `getProxyPath` function returns the path based on the current location. If the first
- * segment of the pathname is not empty, it returns `/<first-segment>/`, otherwise it returns `/`. If
- * the `window.Routes` object exists and the path is not `/` and the path without the trailing slash is
- * a key in the `window.Routes` object, it returns `/`.
- * @memberof VanillaJS
- */
-const getProxyPath = () => {
-  let path = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1]}/` : '/';
-  if (window.Routes && path !== '/' && path.slice(0, -1) in window.Routes()) path = '/';
-  return path;
-};
-
 /**
  * The function `isNavigator` checks if the user agent string contains a specified name.
  * @param name - The `name` parameter is a string that represents the name of a browser or device to
@@ -470,6 +389,8 @@ function hexToRgbA(hex) {
   throw new Error('Invalid Hex');
 }
 
+const htmlStrSanitize = (str) => (str ? str.replace(/<\/?[^>]+(>|$)/g, '').trim() : '');
+
 export {
   s,
   htmls,
@@ -478,8 +399,6 @@ export {
   sa,
   copyData,
   pasteData,
-  setPath,
-  getQueryParams,
   preHTML,
   disableOptionsClick,
   checkFullScreen,
@@ -488,7 +407,6 @@ export {
   getResponsiveData,
   isElement,
   downloadFile,
-  getProxyPath,
   getRawContentFile,
   getBlobFromUint8ArrayFile,
   isNavigator,
@@ -500,4 +418,5 @@ export {
   getDataFromInputFile,
   getLang,
   hexToRgbA,
+  htmlStrSanitize,
 };

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

@@ -5,8 +5,8 @@ import { LoadingAnimation } from './LoadingAnimation.js';
 import { loggerFactory } from './Logger.js';
 import { LoadRouter } from './Router.js';
 import { Translate } from './Translate.js';
-import { getProxyPath, htmls, s } from './VanillaJs.js';
-
+import { s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 const logger = loggerFactory(import.meta);
 
 const Worker = {

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/components/default/MenuDefault.js

@@ -17,10 +17,11 @@ import { LogOut } from '../core/LogOut.js';
 import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from '../core/Modal.js';
 import { SignUp } from '../core/SignUp.js';
 import { Translate } from '../core/Translate.js';
-import { getProxyPath, htmls, s } from '../core/VanillaJs.js';
+import { htmls, s } from '../core/VanillaJs.js';
+import { getProxyPath } from '../core/Router.js';
 import { ElementsDefault } from './ElementsDefault.js';
 import Sortable from 'sortablejs';
-import { RouterDefault } from './RoutesDefault.js';
+import { RouterDefault, BannerAppTemplate } from './RoutesDefault.js';
 import { SettingsDefault } from './SettingsDefault.js';
 import { Badge } from '../core/Badge.js';
 import { Docs } from '../core/Docs.js';
@@ -28,6 +29,8 @@ import { Recover } from '../core/Recover.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
 import { Page500 } from '../core/500.js';
 import { Page404 } from '../core/404.js';
+import { PanelForm } from '../core/PanelForm.js';
+import { Chat } from '../core/Chat.js';
 
 const MenuDefault = {
   Data: {},
@@ -35,7 +38,7 @@ const MenuDefault = {
     const id = getId(this.Data, 'menu-');
     this.Data[id] = {};
     const RouterInstance = RouterDefault();
-    const { BannerAppTemplate } = RouterInstance;
+
     const { barConfig } = await Themes[Css.currentTheme]();
     const heightTopBar = 50;
     const heightBottomBar = 50;
@@ -159,6 +162,34 @@ const MenuDefault = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('500')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-blog',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('blog')}</span>`,
+            }),
+            attrs: `data-id="blog"`,
+            tabHref: `${getProxyPath()}blog`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('blog')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-chat',
+            label: html`${renderMenuLabel({
+              icon: html`<i class="far fa-comments"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('chat')}</span>`,
+            })}
+            ${await Badge.Render({
+              id: 'main-btn-chat',
+              type: 'circle-red',
+              style: badgeNotificationMenuStyle,
+              classList: 'hide',
+            })}`,
+            attrs: `data-id="chat"`,
+            tabHref: `${getProxyPath()}chat`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('chat')),
+          })}
         </div>
       `,
       barConfig: newInstance(barConfig),
@@ -180,47 +211,7 @@ const MenuDefault = {
       RouterInstance,
       heightTopBar,
       heightBottomBar,
-      htmlMainBody: async () => {
-        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>
-        `;
-      },
+      htmlMainBody: options.htmlMainBody,
     });
 
     ThemeEvents['main-theme-handler'] = () => {
@@ -671,6 +662,68 @@ const MenuDefault = {
         observer: true,
       });
     });
+
+    EventsUI.onClick(`.main-btn-blog`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      const idModal = 'modal-blog';
+      const routeModal = 'blog';
+      const idEvent = `form-panel-${idModal}`;
+      await Modal.Render({
+        id: idModal,
+        route: routeModal,
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+          text: Translate.Render('blog'),
+        }),
+        observer: true,
+        html: async () => {
+          setTimeout(async () => {
+            await PanelForm.instance({
+              idPanel: 'default-blog',
+              heightTopBar,
+              heightBottomBar,
+              defaultUrlImage: `${getProxyPath()}android-chrome-96x96.png`,
+              Elements: ElementsDefault,
+              parentIdModal: idModal,
+              scrollClassContainer: `html-${idModal}`,
+              route: routeModal,
+            });
+          });
+        },
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-chat`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-chat',
+        route: 'chat',
+        barConfig,
+        title: renderViewTitle({
+          icon: html` <i class="far fa-comments"></i>`,
+          text: Translate.Render('chat'),
+        }),
+        html: async () => await Chat.Render({ idModal: 'modal-chat' }),
+        handleType: 'bar',
+        maximize: true,
+        observer: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
   },
 };
 

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

@@ -1,6 +1,7 @@
 import { loggerFactory } from '../core/Logger.js';
 import { Modal } from '../core/Modal.js';
-import { getProxyPath, s } from '../core/VanillaJs.js';
+import { s } from '../core/VanillaJs.js';
+import { getProxyPath } from '../core/Router.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -26,6 +27,8 @@ const RoutesDefault = () => {
       render: () => s(`.main-btn-account`).click(),
     },
     '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
+    '/chat': { title: 'docs', render: () => s(`.main-btn-chat`).click() },
+    '/blog': { title: 'docs', render: () => s(`.main-btn-blog`).click() },
     '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
     '/default-management': {
       title: 'default-management',
@@ -39,7 +42,7 @@ const RoutesDefault = () => {
 window.Routes = RoutesDefault;
 
 const RouterDefault = () => {
-  return { Routes: RoutesDefault, BannerAppTemplate };
+  return { Routes: RoutesDefault };
 };
 
 export { RoutesDefault, RouterDefault, BannerAppTemplate };

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

@@ -1,6 +1,6 @@
 import { Auth } from '../../components/core/Auth.js';
 import { loggerFactory } from '../../components/core/Logger.js';
-import { getProxyPath } from '../../components/core/VanillaJs.js';
+import { getProxyPath } from '../../components/core/Router.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -33,7 +33,9 @@ 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(),
+  };
   switch (headerId) {
     case 'file':
       return headers;
@@ -67,29 +69,12 @@ const CoreService = {
           return reject(error);
         }),
     ),
-  getRandomImage: (options = { category: ['city'], mimetype: 'image/jpg' }) => {
-    const src = `https://api.api-ninjas.com/v1/randomimage?category=${options.category[0]}`;
-    return new Promise((resolve) => {
-      fetch(src, {
-        headers: { 'X-Api-Key': 'FyITmcxRXkCaUehbX6K0/g==uxZcFKL0dZUUg48G', Accept: options.mimetype },
-      })
-        .then((res) => res.blob())
-        .then(async (blob) => {
-          return resolve({
-            file: {
-              mimetype: 'image/jpg',
-              name: 'image.jpg',
-            },
-            url: URL.createObjectURL(blob),
-          });
-        });
-    });
-  },
   post: (options = { id: '', body: {} }) =>
     new Promise((resolve, reject) =>
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'POST',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {
@@ -109,6 +94,7 @@ const CoreService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'PUT',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {
@@ -128,6 +114,7 @@ const CoreService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'GET',
         headers: headersFactory(),
+        credentials: 'include',
       })
         .then(async (res) => {
           return await res.json();
@@ -146,6 +133,7 @@ const CoreService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'DELETE',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {