underpost 2.8.877 → 2.8.881

package/src/api/document/document.router.js

@@ -0,0 +1,24 @@
+import { loggerFactory } from '../../server/logger.js';
+import { DocumentController } from './document.controller.js';
+import express from 'express';
+import fs from 'fs-extra';
+const logger = loggerFactory(import.meta);
+
+const DocumentRouter = (options) => {
+  const router = express.Router();
+  const authMiddleware = options.authMiddleware;
+  router.post(`/:id`, authMiddleware, async (req, res) => await DocumentController.post(req, res, options));
+  router.post(`/`, authMiddleware, async (req, res) => await DocumentController.post(req, res, options));
+  router.get(`/public`, async (req, res) => await DocumentController.get(req, res, options));
+  router.get(`/:id`, authMiddleware, async (req, res) => await DocumentController.get(req, res, options));
+  router.get(`/`, authMiddleware, async (req, res) => await DocumentController.get(req, res, options));
+  router.put(`/:id`, authMiddleware, async (req, res) => await DocumentController.put(req, res, options));
+  router.put(`/`, authMiddleware, async (req, res) => await DocumentController.put(req, res, options));
+  router.delete(`/:id`, authMiddleware, async (req, res) => await DocumentController.delete(req, res, options));
+  router.delete(`/`, authMiddleware, async (req, res) => await DocumentController.delete(req, res, options));
+  return router;
+};
+
+const ApiRouter = DocumentRouter;
+
+export { ApiRouter, DocumentRouter };

package/src/api/document/document.service.js

@@ -0,0 +1,125 @@
+import { loggerFactory } from '../../server/logger.js';
+import { DataBaseProvider } from '../../db/DataBaseProvider.js';
+import { DocumentDto } from './document.model.js';
+import { uniqueArray } from '../../client/components/core/CommonJs.js';
+import { getBearerToken, verifyJWT } from '../../server/auth.js';
+import { isValidObjectId } from 'mongoose';
+
+const logger = loggerFactory(import.meta);
+
+const DocumentService = {
+  post: async (req, res, options) => {
+    /** @type {import('./document.model.js').DocumentModel} */
+    const Document = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models.Document;
+
+    switch (req.params.id) {
+      default:
+        req.body.userId = req.auth.user._id;
+        return await new Document(req.body).save();
+    }
+  },
+  get: async (req, res, options) => {
+    /** @type {import('./document.model.js').DocumentModel} */
+    const Document = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models.Document;
+    /** @type {import('../user/user.model.js').UserModel} */
+    const User = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models.User;
+
+    if (req.path.startsWith('/public') && req.query['tags']) {
+      const publisherUsers = await User.find({ $or: [{ role: 'admin' }, { role: 'moderator' }] });
+
+      const token = getBearerToken(req);
+      let user;
+      if (token) user = verifyJWT(token, options);
+
+      const queryPayload = {
+        userId: {
+          $in: publisherUsers.map((p) => p._id).concat(user?.role && user.role !== 'guest' ? [user._id] : []),
+        },
+        tags: {
+          // $in: uniqueArray(['public'].concat(req.query['tags'].split(','))),
+          $all: uniqueArray(['public'].concat(req.query['tags'].split(','))),
+        },
+        ...(req.query.cid
+          ? {
+              _id: {
+                $in: req.query.cid.split(',').filter((cid) => isValidObjectId(cid)),
+              },
+            }
+          : undefined),
+      };
+      logger.info('queryPayload', queryPayload);
+      // sort in descending (-1) order by length
+      const sort = { createdAt: -1 };
+      const limit = req.query.limit ? parseInt(req.query.limit, 10) : 6;
+      const skip = req.query.skip ? parseInt(req.query.skip, 10) : 0;
+
+      return await Document.find(queryPayload)
+        .sort(sort)
+        .limit(limit)
+        .skip(skip)
+        .populate(DocumentDto.populate.file())
+        .populate(user && user.role !== 'guest' ? DocumentDto.populate.user() : null);
+    }
+
+    switch (req.params.id) {
+      default:
+        return await Document.find({
+          userId: req.auth.user._id,
+          ...(req.params.id ? { _id: req.params.id } : undefined),
+        }).populate(DocumentDto.populate.file());
+    }
+  },
+  delete: async (req, res, options) => {
+    /** @type {import('./document.model.js').DocumentModel} */
+    const Document = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models.Document;
+    /** @type {import('../file/file.model.js').FileModel} */
+    const File = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models.File;
+
+    switch (req.params.id) {
+      default: {
+        const document = await Document.findOne({ _id: req.params.id });
+        if (!document) throw new Error('document not found');
+
+        if (document.userId.toString() !== req.auth.user._id) throw new Error('invalid user');
+
+        if (document.mdFileId) {
+          const file = await File.findOne({ _id: document.mdFileId });
+          if (file) await File.findByIdAndDelete(document.mdFileId);
+        }
+
+        if (document.fileId) {
+          const file = await File.findOne({ _id: document.fileId });
+          if (file) await File.findByIdAndDelete(document.fileId);
+        }
+
+        return await Document.findByIdAndDelete(req.params.id);
+      }
+    }
+  },
+  put: async (req, res, options) => {
+    /** @type {import('./document.model.js').DocumentModel} */
+    const Document = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models.Document;
+    /** @type {import('../file/file.model.js').FileModel} */
+    const File = DataBaseProvider.instance[`${options.host}${options.path}`].mongoose.models.File;
+
+    switch (req.params.id) {
+      default: {
+        const document = await Document.findOne({ _id: req.params.id });
+        if (!document) throw new Error(`Document not found`);
+
+        if (document.mdFileId) {
+          const file = await File.findOne({ _id: document.mdFileId });
+          if (file) await File.findByIdAndDelete(document.mdFileId);
+        }
+
+        if (document.fileId) {
+          const file = await File.findOne({ _id: document.fileId });
+          if (file) await File.findByIdAndDelete(document.fileId);
+        }
+        return await Document.findByIdAndUpdate(req.params.id, req.body);
+      }
+    }
+  },
+};
+
+export { DocumentService };

package/src/api/file/file.controller.js

@@ -20,7 +20,21 @@ const FileController = {
   get: async (req, res, options) => {
     try {
       const result = await FileService.get(req, res, options);
-      if (result instanceof Buffer) return res.status(200).end(result);
+      if (result instanceof Buffer) {
+        if (
+          process.env.NODE_ENV === 'development' ||
+          req.hostname === options.host ||
+          (options.origins && options.origins.find((o) => o.match(req.hostname)))
+        ) {
+          res.set('Cross-Origin-Resource-Policy', 'cross-origin');
+          return res.status(200).end(result);
+        }
+        return res.status(403).json({
+          status: 'error',
+          message: 'Forbidden',
+        });
+      }
+
       return res.status(200).json({
         status: 'success',
         data: result,

package/src/api/user/user.router.js

@@ -48,9 +48,10 @@ const UserRouter = (options) => {
         check: fs.readFileSync(`./src/client/public/default/assets/mailer/api-user-check.png`),
       },
       header: (res) => {
-        res.header('Access-Control-Allow-Origin', '*');
-        res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
-        res.header('Content-Type', 'image/png');
+        res.set('Cross-Origin-Resource-Policy', 'cross-origin');
+        res.set('Access-Control-Allow-Origin', '*');
+        res.set('Access-Control-Allow-Headers', '*');
+        res.set('Content-Type', 'image/png');
       },
     };
 

package/src/cli/deploy.js

@@ -334,7 +334,7 @@ EOF`);
       if (!options.replicas) options.replicas = 1;
       if (options.sync) UnderpostDeploy.API.sync(deployList, options);
       if (options.buildManifest === true) await UnderpostDeploy.API.buildManifest(deployList, env, options);
-      if (options.infoRouter === true) {
+      if (options.infoRouter === true || options.buildManifest === true) {
         logger.info('router', await UnderpostDeploy.API.routerFactory(deployList, env));
         return;
       }

package/src/cli/index.js

@@ -24,6 +24,7 @@ program
   .command('new')
   .argument('<app-name>', 'The name or deploy-id of the application to create.')
   .option('--deploy-id', 'Crete deploy ID conf env files')
+  .option('--cluster', 'Create deploy ID cluster files and sync to current cluster')
   .option('--dev', 'Sets the development cli context')
   .description('Initializes a new Underpost project with a predefined structure.')
   .action(Underpost.repo.new);
@@ -359,6 +360,8 @@ program
   .option('--image-name <image-name>', 'Optional: Specifies the image name for test execution.')
   .option('--container-name <container-name>', 'Optional: Specifies the container name for test execution.')
   .option('--namespace <namespace>', 'Optional: Specifies the namespace for test execution.')
+  .option('--kubeadm', 'Flag to indicate Kubeadm cluster type context')
+  .option('--k3s', 'Flag to indicate K3s cluster type context')
   .description('Runs a script from the specified path.')
   .action(UnderpostRun.API.callback);
 

package/src/cli/repository.js

@@ -90,7 +90,7 @@ class UnderpostRepository {
       );
     },
 
-    new(repositoryName, options = { dev: false, deployId: false }) {
+    new(repositoryName, options = { dev: false, deployId: false, cluster: false }) {
       return new Promise(async (resolve, reject) => {
         try {
           await logger.setUpInfo();
@@ -99,7 +99,7 @@ class UnderpostRepository {
             return resolve(
               await UnderpostStartUp.API.listenPortController(UnderpostStartUp.API.listenServerFactory(), ':'),
             );
-          if (options.deployId === true) return Config.deployIdFactory(repositoryName);
+          if (options.deployId === true) return Config.deployIdFactory(repositoryName, options);
           const npmRoot = getNpmRootPath();
           const underpostRoot = options?.dev === true ? '.' : `${npmRoot}/underpost`;
           const destFolder = `./${repositoryName}`;

package/src/cli/run.js

@@ -23,6 +23,8 @@ class UnderpostRun {
     namespace: '',
     build: false,
     replicas: 1,
+    k3s: false,
+    kubeadm: false,
   };
   static RUNNERS = {
     'spark-template': (path, options = UnderpostRun.DEFAULT_OPTION) => {
@@ -107,6 +109,8 @@ 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`);
@@ -251,7 +255,24 @@ class UnderpostRun {
     },
     'db-client': async (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const { underpostRoot } = options;
+
+      const image = 'adminer:4.7.6-standalone';
+
+      if (!options.kubeadm && !options.k3s) {
+        // Only load if not kubeadm/k3s (Kind needs it)
+        shellExec(`docker pull ${image}`);
+        shellExec(`sudo kind load docker-image ${image}`);
+      } else if (options.kubeadm || options.k3s)
+        // For kubeadm/k3s, ensure it's available for containerd
+        shellExec(`sudo crictl pull ${image}`);
+
+      shellExec(`kubectl delete deployment adminer`);
       shellExec(`kubectl apply -k ${underpostRoot}/manifests/deployment/adminer/.`);
+      const successInstance = await UnderpostTest.API.statusMonitor('adminer', 'Running', 'pods', 1000, 60 * 10);
+
+      if (successInstance) {
+        shellExec(`underpost deploy --expose adminer`);
+      }
     },
     promote: async (path, options = UnderpostRun.DEFAULT_OPTION) => {
       let [inputDeployId, inputEnv, inputReplicas] = path.split(',');
@@ -330,8 +351,15 @@ class UnderpostRun {
       const checkStatusIterationMsDelay = 1000;
       const iteratorTag = `[${deployId}-${env}-${targetTraffic}]`;
       logger.info('Deployment init', { deployId, env, targetTraffic, checkStatusIterationMsDelay });
+      const minReadyOk = 3;
+      let readyOk = 0;
 
-      while (!UnderpostDeploy.API.checkDeploymentReadyStatus(deployId, env, targetTraffic, ignorePods).ready) {
+      while (readyOk < minReadyOk) {
+        const ready = UnderpostDeploy.API.checkDeploymentReadyStatus(deployId, env, targetTraffic, ignorePods).ready;
+        if (ready === true) {
+          readyOk++;
+          logger.info(`${iteratorTag} | Deployment ready. Verification number: ${readyOk}`);
+        }
         await timer(checkStatusIterationMsDelay);
         checkStatusIteration++;
         logger.info(

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

@@ -195,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

@@ -5,6 +5,7 @@ import { ThemeEvents, darkTheme } from './Css.js';
 import { append, htmls, s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
 import './Pagination.js';
+import { Modal } from './Modal.js';
 
 const AgGrid = {
   grids: {},
@@ -57,18 +58,26 @@ const AgGrid = {
           delete ThemeEvents[id];
         }
       };
+
+      if (!options.style || !options.style.height) {
+        if (options.parentModal && Modal.Data[options.parentModal].options.observer) {
+          Modal.Data[options.parentModal].onObserverListener[id + '-observer'] = ({ width, height }) => {
+            if (s(`.${id}`)) s(`.${id}`).style.height = `${height - 180}px`;
+            else delete Modal.Data[options.parentModal].onObserverListener[id + '-observer'];
+          };
+          s(`.${id}`).style.height = `${s(`.${options.parentModal}`).offsetHeight - 180}px`;
+        } else s(`.${id}`).style.height = '500px';
+      }
     });
     const usePagination = options?.usePagination;
     return html`
-      <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>
+      <div
+        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+        style="${options?.style
+          ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
+          : ''}"
+      ></div>
+      ${usePagination ? `<ag-pagination id="ag-pagination-${id}"></ag-pagination>` : ''}
     `;
   },
   RenderStyle: async function (

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/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';
@@ -137,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}"
@@ -151,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)}
@@ -189,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 };

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

@@ -215,6 +215,10 @@ const CssCommonCore = async () => {
       .bar-default-modal {
         overflow: hidden;
       }
+      .panel-placeholder-bottom {
+        height: 100px;
+        color: gray;
+      }
     </style>
     ${boxShadow({ selector: '.account-profile-image' })}
     <div class="ag-grid-style"></div>`;

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

@@ -129,19 +129,16 @@ const Docs = {
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
         cleanActive();
-        s(`.btn-docs-src`).classList.add('main-btn-menu-active');
         await this.RenderModal('src', options.modalOptions);
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
         cleanActive();
-        s(`.btn-docs-api`).classList.add('main-btn-menu-active');
         await this.RenderModal('api', options.modalOptions);
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
         cleanActive();
-        s(`.btn-docs-coverage`).classList.add('main-btn-menu-active');
         await this.RenderModal('coverage', options.modalOptions);
       };
 

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

@@ -7,7 +7,7 @@ import { loggerFactory } from './Logger.js';
 import { RichText } from './RichText.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
-import { htmls, s } from './VanillaJs.js';
+import { htmls, htmlStrSanitize, s } from './VanillaJs.js';
 const logger = loggerFactory(import.meta);
 
 const fileFormDataFactory = (e, extensions) => {
@@ -61,22 +61,27 @@ const Input = {
         };
     });
 
-    const inputElement = html` <input
-        type="${options?.type ? options.type : 'text'}"
-        class="${options.inputClass ? options.inputClass : 'in wfa'} ${id}"
-        ${options?.min !== undefined ? `min="${options.min}"` : ''}
-        ${options?.max !== undefined ? `max="${options.max}"` : ''}
-        placeholder${options?.placeholder ? `="${options.placeholder}"` : ''}
-        ${options?.value !== undefined ? `value="${options.value}"` : ''}
-        ${options?.autocomplete ? `autocomplete="${options.autocomplete}"` : ''}
-        ${options?.disabled ? `disabled` : ''}
-        ${options?.name !== undefined ? `name="${options.name}"` : ''}
-        ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
-        ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
-        ${options?.required ? ` required ` : ''}
-        ${options?.accept ? `accept="${options.accept}"` : ''}
-        ${options?.multiple ? `multiple="multiple"` : ''}
-      />
+    const labelValue = htmlStrSanitize(options.label) ? htmlStrSanitize(options.label) : id;
+
+    const inputElement = html` <label for="${id}-name">
+        <span class="hide">${labelValue}</span>
+        <input
+          type="${options?.type ? options.type : 'text'}"
+          class="${options.inputClass ? options.inputClass : 'in wfa'} ${id}"
+          ${options?.min !== undefined ? `min="${options.min}"` : ''}
+          ${options?.max !== undefined ? `max="${options.max}"` : ''}
+          placeholder${options?.placeholder ? `="${options.placeholder}"` : ''}
+          ${options?.value !== undefined ? `value="${options.value}"` : ''}
+          ${options?.autocomplete ? `autocomplete="${options.autocomplete}"` : ''}
+          ${options?.disabled ? `disabled` : ''}
+          ${options?.name !== undefined ? `name="${options.name}"` : `name='${id}-name'`}
+          ${options?.pattern !== undefined ? `pattern="${options.pattern}"` : ''}
+          ${options?.pattern === undefined && options.type === 'tel' ? `pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"` : ''}
+          ${options?.required ? ` required ` : ''}
+          ${options?.accept ? `accept="${options.accept}"` : ''}
+          ${options?.multiple ? `multiple="multiple"` : ''}
+          id="${id}-name"
+      /></label>
       <div class="${id}-input-extension input-info input-extension ${options?.extension ? '' : 'hide'}">
         ${options?.extension ? await options.extension() : ''}
       </div>`;
@@ -244,7 +249,12 @@ const Input = {
 };
 
 const InputFile = {
-  Render: async function ({ id, multiple }, on = { change: () => {}, clear: () => {} }) {
+  Render: async function (
+    options = { id: '', multiple: false, extensionsAccept: [] },
+    on = { change: () => {}, clear: () => {} },
+  ) {
+    let { id, multiple, extensionsAccept } = options;
+    if (!extensionsAccept) extensionsAccept = [];
     // drag drop multi file
     const gridId = `ag-grid-input-file-${id}`;
     setTimeout(() => {
@@ -322,7 +332,12 @@ const InputFile = {
     return html` <div class="fl">
       <div class="in fll input-file-col">
         <div class="in section-mp input-file-sub-col">
-          <input class="wfa ${id}" type="file" ${multiple ? `multiple="multiple"` : ''} />
+          <input
+            class="wfa ${id}"
+            type="file"
+            ${multiple ? `multiple="multiple"` : ''}
+            ${extensionsAccept.length > 0 ? `accept="${extensionsAccept.join(', ')}"` : ''}
+          />
           <div class="in">
             ${await BtnIcon.Render({
               class: `wfa btn-clear-input-file-${id}`,