underpost 2.8.1 → 2.8.7

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

@@ -1,4 +1,4 @@
-import { getId } from './CommonJs.js';
+import { getId, isValidDate, newInstance } from './CommonJs.js';
 import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { Validator } from '../core/Validator.js';
 import { Input } from '../core/Input.js';
@@ -26,6 +26,7 @@ const Panel = {
       idPanel: '',
       parentIdModal: '',
       scrollClassContainer: '',
+      htmlFormHeader: async () => '',
       formData: [],
       data: [],
       originData: () => [],
@@ -51,12 +52,10 @@ const Panel = {
       <i style="font-size: 25px" class="fa-solid fa-cloud"></i>
     </div>`;
 
-    let editId;
-
     const openPanelForm = () => {
       s(`.${idPanel}-form-body`).classList.remove('hide');
       s(`.btn-${idPanel}-add`).classList.add('hide');
-      s(`.${scrollClassContainer}`).style.overflow = 'hidden';
+      // s(`.${scrollClassContainer}`).style.overflow = 'hidden';
       if (options.customButtons) {
         let customBtnIndex = -1;
         for (const dataBtn of options.customButtons) {
@@ -72,7 +71,7 @@ const Panel = {
     };
 
     const renderPanel = async (payload) => {
-      const obj = payload;
+      const obj = newInstance(payload);
       if ('_id' in obj) obj.id = obj._id;
       const { id } = obj;
 
@@ -90,16 +89,20 @@ const Panel = {
               htmls(`.${idPanel}-cell-col-a-${id}`, render);
             },
           });
-        EventsUI.onClick(`.${idPanel}-btn-delete-${id}`, async (e) => {
-          logger.warn('delete', obj);
-          const { status } = await options.on.remove({ e, data: obj });
-          if (status === 'error') return;
-          if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
-        });
+        EventsUI.onClick(
+          `.${idPanel}-btn-delete-${id}`,
+          async (e) => {
+            logger.warn('delete', obj);
+            const { status } = await options.on.remove({ e, data: obj });
+            if (status === 'error') return;
+            if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
+          },
+          { context: 'modal' },
+        );
         EventsUI.onClick(`.${idPanel}-btn-edit-${id}`, async () => {
           logger.warn('edit', obj);
-          if (obj._id) editId = obj._id;
-          else if (obj.id) editId = obj.id;
+          if (obj._id) Panel.Tokens[idPanel].editId = obj._id;
+          else if (obj.id) Panel.Tokens[idPanel].editId = obj.id;
 
           s(`.btn-${idPanel}-label-edit`).classList.remove('hide');
           s(`.btn-${idPanel}-label-add`).classList.add('hide');
@@ -122,7 +125,7 @@ const Panel = {
           if (options.onClick) await options.onClick({ payload });
         };
       });
-
+      if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
       return html` <div class="in box-shadow ${idPanel} ${idPanel}-${id}">
         <div class="fl ${idPanel}-tools session-fl-log-in  ${obj.tools ? '' : 'hide'}">
           ${await BtnIcon.Render({
@@ -171,6 +174,10 @@ const Panel = {
                   const valueIcon = formObjData?.panel?.icon?.value ? formObjData.panel.icon.value : '';
                   const keyIcon = formObjData?.panel?.icon?.key ? formObjData.panel.icon.key : '';
 
+                  if (formObjData && ['datetime-local'].includes(formObjData.inputType) && isValidDate(obj[infoKey])) {
+                    obj[infoKey] = `${obj[infoKey]}`.replace('T', ' ').replace('.000Z', '');
+                  }
+
                   if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'tags')) {
                     setTimeout(async () => {
                       let tagRender = html``;
@@ -186,22 +193,50 @@ const Panel = {
                     });
                     return html``;
                   }
+                  {
+                    const formDataObj = formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'list');
+                    if (obj[infoKey] && obj[infoKey].length > 0 && formDataObj)
+                      return html`<div class="in ${idPanel}-row">
+                        <span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
+                          ${keyIcon} ${Translate.Render(infoKey)}:</span
+                        >
+                        <span class="${idPanel}-row-value"
+                          >${valueIcon} ${obj[infoKey].map((k) => Translate.Render(k)).join(', ')}</span
+                        >
+                      </div> `;
+                  }
 
-                  if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'info-row-pin'))
-                    return html`<div class="in ${idPanel}-row">
-                      <span class="${idPanel}-row-pin-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
-                        ${keyIcon} ${infoKey}:</span
-                      >
-                      <span class="${idPanel}-row-pin-value">${valueIcon} ${obj[infoKey]}</span>
-                    </div> `;
+                  {
+                    const formDataObj = formData.find(
+                      (f) => f.model === infoKey && f.panel && f.panel.type === 'info-row-pin',
+                    );
+                    if (obj[infoKey] && formDataObj)
+                      return html`<div class="in ${idPanel}-row">
+                        <span class="${idPanel}-row-pin-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
+                          ${keyIcon}
+                          ${formDataObj.translateCode
+                            ? Translate.Render(formDataObj.translateCode)
+                            : Translate.Render(infoKey)}:</span
+                        >
+                        <span class="${idPanel}-row-pin-value">${valueIcon} ${obj[infoKey]}</span>
+                      </div> `;
+                  }
 
-                  if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'info-row'))
-                    return html`<div class="in ${idPanel}-row">
-                      <span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
-                        ${keyIcon} ${infoKey}:</span
-                      >
-                      <span class="${idPanel}-row-value"> ${valueIcon} ${obj[infoKey]}</span>
-                    </div> `;
+                  {
+                    const formDataObj = formData.find(
+                      (f) => f.model === infoKey && f.panel && f.panel.type === 'info-row',
+                    );
+                    if (obj[infoKey] && formDataObj)
+                      return html`<div class="in ${idPanel}-row">
+                        <span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
+                          ${keyIcon}
+                          ${formDataObj.translateCode
+                            ? Translate.Render(formDataObj.translateCode)
+                            : Translate.Render(infoKey)}:</span
+                        >
+                        <span class="${idPanel}-row-value"> ${valueIcon} ${obj[infoKey]}</span>
+                      </div> `;
+                  }
 
                   return html``;
                 })
@@ -213,17 +248,42 @@ const Panel = {
     };
 
     let render = '';
-    let renderForm = html` <div class="in modal stq" style="top: 0px; z-index: 1; padding-bottom: 5px">
-      ${await BtnIcon.Render({
-        class: `section-mp btn-custom btn-${idPanel}-close`,
-        label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
-        type: 'button',
-      })}
-    </div>`;
+    let renderForm = html` <div class="in modal" style="top: 0px; z-index: 1; padding-bottom: 5px">
+        ${await BtnIcon.Render({
+          class: `inl section-mp btn-custom btn-${idPanel}-close`,
+          label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+          type: 'button',
+        })}
+      </div>
+      ${options?.htmlFormHeader ? await options.htmlFormHeader() : ''}`;
 
     for (const modelData of formData) {
       if (modelData.disableRender) continue;
       switch (modelData.inputType) {
+        case 'dropdown-checkbox': {
+          renderForm += html`<div class="in section-mp">
+            ${await DropDown.Render({
+              id: `${modelData.id}`,
+              label: html`${Translate.Render(modelData.model)}`,
+              type: 'checkbox',
+              value: modelData.dropdown.options[0],
+              resetOption: true,
+              containerClass: `${idPanel}-dropdown-checkbox`,
+              data: modelData.dropdown.options.map((dKey) => {
+                return {
+                  value: dKey,
+                  data: dKey,
+                  checked: false,
+                  display: html`${Translate.Render(dKey)}`,
+                  onClick: function () {
+                    logger.info('DropDown onClick', this.checked);
+                  },
+                };
+              }),
+            })}
+          </div>`;
+          break;
+        }
         case 'dropdown':
           renderForm += html` <div class="in section-mp">
             ${await DropDown.Render({
@@ -348,62 +408,19 @@ const Panel = {
     }
     let renderFormBtn = html`
       ${await BtnIcon.Render({
-        class: `section-mp btn-custom btn-${idPanel}-submit`,
+        class: `inl section-mp btn-custom btn-${idPanel}-submit`,
         label: html`<span class="btn-${idPanel}-label-add"><i class="fas fa-plus"></i> ${Translate.Render('add')}</span
           ><span class="btn-${idPanel}-label-edit hide"><i class="fas fa-edit"></i> ${Translate.Render('edit')}</span>`,
         type: 'submit',
       })}
       ${await BtnIcon.Render({
-        class: `section-mp btn-custom btn-${idPanel}-clean`,
+        class: `inl section-mp btn-custom btn-${idPanel}-clean`,
         label: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
         type: 'button',
       })}
     `;
 
     setTimeout(async () => {
-      const resizeParentModal = () => {
-        if (options.parentIdModal) {
-          Modal.Data[options.parentIdModal].onObserverListener[`form-panel-${options.parentIdModal}`] = () => {
-            if (s(`.${idPanel}-form-container`))
-              s(`.${idPanel}-form-container`).style.maxHeight = `${
-                s(`.${options.parentIdModal}`).offsetHeight - Modal.headerTitleHeight
-              }px`;
-          };
-          Modal.Data[options.parentIdModal].onObserverListener[`form-panel-${options.parentIdModal}`]();
-        } else {
-          Responsive.Event[`${idPanel}-responsive`] = () => {
-            if (s(`.${idPanel}-form-container`))
-              s(`.${idPanel}-form-container`).style.maxHeight =
-                options.route === 'home' &&
-                s(`.${idPanel}-form-body`) &&
-                !s(`.${idPanel}-form-body`).classList.contains('hide') &&
-                !s(`.main-body-btn-ui-open`).classList.contains('hide')
-                  ? `${window.innerHeight}px`
-                  : `${window.innerHeight - heightTopBar - heightBottomBar}px`;
-          };
-          Responsive.Event[`${idPanel}-responsive`]();
-        }
-      };
-      if (options.route === 'home') {
-        Modal.Data['modal-menu'].onBarUiClose[`${idPanel}-responsive`] = () => {
-          resizeParentModal();
-        };
-
-        Modal.Data['modal-menu'].onBarUiOpen[`${idPanel}-responsive`] = () => {
-          resizeParentModal();
-        };
-      }
-      setTimeout(resizeParentModal);
-      if (options.route) {
-        RouterEvents[options.parentIdModal] = ({ route }) => {
-          if (route === options.route) {
-            setTimeout(() => {
-              resizeParentModal();
-            }, 350);
-          }
-        };
-      }
-
       const validators = await Validator.instance(formData);
 
       s(`.${idPanel}-form`).onsubmit = (e) => {
@@ -418,21 +435,23 @@ const Panel = {
         obj.id = `${data.length}`;
         let documents;
         if (options && options.on && options.on.add) {
-          const { status, data } = await options.on.add({ data: obj, editId });
+          const { status, data } = await options.on.add({ data: obj, editId: Panel.Tokens[idPanel].editId });
           if (status === 'error') return;
           documents = data;
         }
         s(`.btn-${idPanel}-clean`).click();
-        if (editId && s(`.${idPanel}-${editId}`)) s(`.${idPanel}-${editId}`).remove();
+        if (Panel.Tokens[idPanel].editId && s(`.${idPanel}-${Panel.Tokens[idPanel].editId}`))
+          s(`.${idPanel}-${Panel.Tokens[idPanel].editId}`).remove();
         if (Array.isArray(documents)) {
           htmls(`.${idPanel}-render`, '');
           for (const doc of documents) {
             append(`.${idPanel}-render`, await renderPanel(doc));
           }
-        } else htmls(`.${idPanel}-render`, await renderPanel(obj));
+        } else htmls(`.${idPanel}-render`, await renderPanel({ ...obj, ...documents }));
         Input.cleanValues(formData);
         s(`.btn-${idPanel}-close`).click();
         s(`.${scrollClassContainer}`).scrollTop = 0;
+        if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
       });
       s(`.btn-${idPanel}-clean`).onclick = () => {
         Input.cleanValues(formData);
@@ -458,13 +477,14 @@ const Panel = {
       s(`.btn-${idPanel}-add`).onclick = (e) => {
         e.preventDefault();
         // s(`.btn-${idPanel}-clean`).click();
-        editId = undefined;
+        Panel.Tokens[idPanel].editId = undefined;
         s(`.btn-${idPanel}-label-add`).classList.remove('hide');
         s(`.btn-${idPanel}-label-edit`).classList.add('hide');
         s(`.${scrollClassContainer}`).scrollTop = 0;
 
         openPanelForm();
       };
+      if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
     });
 
     if (data.length > 0) for (const obj of data) render += await renderPanel(obj);
@@ -487,7 +507,7 @@ const Panel = {
             s(`.${btnSelector}`).onclick = () => dataBtn.onClick();
           });
         customButtonsRender += ` ${await BtnIcon.Render({
-          class: `section-mp btn-custom ${btnSelector}`,
+          class: `inl section-mp btn-custom ${btnSelector}`,
           label: dataBtn.label,
           type: 'button',
         })}`;
@@ -522,7 +542,6 @@ const Panel = {
           padding: 10px;
           cursor: pointer;
           min-height: 400px;
-          overflow: hidden;
         }
         .${idPanel}:hover {
           background: #ffffff;
@@ -592,12 +611,12 @@ const Panel = {
         }
       </style>
       <div class="${idPanel}-container">
-        <div
-          class="stq modal ${idPanel}-form-container ${options.formContainerClass ? options.formContainerClass : ''}"
-        >
+        <div class="in modal ${idPanel}-form-container ${options.formContainerClass ? options.formContainerClass : ''}">
           <div class="in ${idPanel}-form-header">
             ${await BtnIcon.Render({
-              class: `section-mp btn-custom btn-${idPanel}-add`,
+              class: `inl section-mp btn-custom btn-${idPanel}-add ${
+                options?.role?.add ? (!options.role.add() ? 'hide' : '') : ''
+              }`,
               label: html`<i class="fas fa-plus"></i> ${Translate.Render('add')}`,
               type: 'button',
             })}

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

@@ -1,4 +1,4 @@
-import { getCapVariableName, getId, newInstance, random, range, timer, uniqueArray } from './CommonJs.js';
+import { getCapVariableName, newInstance, random, range, uniqueArray } from './CommonJs.js';
 import { marked } from 'marked';
 import {
   getBlobFromUint8ArrayFile,
@@ -12,7 +12,6 @@ import { NotificationManager } from './NotificationManager.js';
 import { DocumentService } from '../../services/document/document.service.js';
 import { FileService } from '../../services/file/file.service.js';
 import { getSrcFromFileData } from './Input.js';
-import { Auth } from './Auth.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
@@ -29,6 +28,8 @@ const PanelForm = {
       Elements: {},
       parentIdModal: undefined,
       route: 'home',
+      htmlFormHeader: async () => '',
+      firsUpdateEvent: async () => {},
     },
   ) {
     const { idPanel, heightTopBar, heightBottomBar, defaultUrlImage, Elements } = options;
@@ -90,16 +91,7 @@ const PanelForm = {
         },
       },
     ];
-    const dateFormat = (date) =>
-      html`<span
-        style="${renderCssAttr({
-          style: {
-            'font-size': '14px',
-            color: '#888',
-          },
-        })}"
-        >${new Date(date).toLocaleString().replaceAll(',', '')}</span
-      >`;
+
     const titleIcon = html`<i class="fa-solid fa-quote-left"></i>`;
     const panelRender = async ({ data }) =>
       await Panel.Render({
@@ -108,6 +100,7 @@ const PanelForm = {
         heightTopBar,
         heightBottomBar,
         data,
+        htmlFormHeader: options.htmlFormHeader,
         parentIdModal: options.parentIdModal,
         originData: () => PanelForm.Data[idPanel].originData,
         filesData: () => PanelForm.Data[idPanel].filesData,
@@ -271,7 +264,7 @@ const PanelForm = {
                 fileId: file ? URL.createObjectURL(file) : undefined,
                 _id: documentData._id,
                 id: documentData._id,
-                createdAt: dateFormat(documentData.createdAt),
+                createdAt: documentData.createdAt,
               };
 
               if (documentStatus === 'error') status = 'error';
@@ -376,7 +369,7 @@ const PanelForm = {
           PanelForm.Data[idPanel].data.push({
             id: documentObject._id,
             title: documentObject.title,
-            createdAt: dateFormat(documentObject.createdAt),
+            createdAt: documentObject.createdAt,
             tags: documentObject.tags.filter((t) => !prefixTags.includes(t)),
             mdFileId: marked.parse(mdFileId),
             userId: documentObject.userId._id,
@@ -389,7 +382,7 @@ const PanelForm = {
     };
     const renderSrrPanelData = async () =>
       await panelRender({
-        data: range(0, 5).map((i) => ({
+        data: range(0, 0).map((i) => ({
           id: i,
           title: html`<div class="fl">
             <div
@@ -430,23 +423,25 @@ const PanelForm = {
           ssr: true,
         })),
       });
-
+    let firsUpdateEvent = false;
     let lastCid;
-    let lasUserId;
     this.Data[idPanel].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
-      if (lastCid === cid && lasUserId === Elements.Data.user.main.model.user._id) return;
-      if (options.route === 'home') Modal.homeCid = newInstance(cid);
+      if (lastCid === cid) return;
       lastCid = cid;
-      lasUserId = newInstance(Elements.Data.user.main.model.user._id);
+      if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
       await getPanelData();
       htmls(
         `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
         await panelRender({ data: this.Data[idPanel].data }),
       );
+      if (!firsUpdateEvent && options.firsUpdateEvent) {
+        firsUpdateEvent = true;
+        await options.firsUpdateEvent();
+      }
     };
-    if (options.route)
+    if (options.route) {
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
@@ -454,15 +449,13 @@ const PanelForm = {
           await this.Data[idPanel].updatePanel();
         },
       });
-
-    // if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
-    setTimeout(() => {
-      if (
-        options.route !== 'home' &&
-        (!PanelForm.Data[idPanel].originData || PanelForm.Data[idPanel].originData.length === 0)
-      )
-        this.Data[idPanel].updatePanel();
-    });
+      if (!options.parentIdModal)
+        Modal.Data['modal-menu'].onHome[idPanel] = async () => {
+          lastCid = undefined;
+          setQueryPath({ path: options.route, queryPath: '' });
+          await this.Data[idPanel].updatePanel();
+        };
+    }
 
     if (options.parentIdModal) {
       htmls(`.html-${options.parentIdModal}`, await renderSrrPanelData());

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

@@ -126,7 +126,7 @@ const Recover = {
     });
     return html`
       ${await BtnIcon.Render({
-        class: 'section-mp form-button btn-recover-log-in hide',
+        class: 'in section-mp form-button btn-recover-log-in hide',
         label: Translate.Render('log-in'),
         type: 'button',
       })}
@@ -181,7 +181,7 @@ const Recover = {
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in recover-send-btn-container">
           ${await BtnIcon.Render({
-            class: 'section-mp form-button btn-recover',
+            class: 'in section-mp form-button btn-recover',
             label: Translate.Render(mode === 'recover-verify-email' ? 'send-recover-verify-email' : 'change-password'),
             type: 'button',
           })}
@@ -191,7 +191,7 @@ const Recover = {
             <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('15-min-valid-recover-email')}
           </div>
           ${await BtnIcon.Render({
-            class: 'section-mp form-button btn-recover-resend',
+            class: 'in section-mp form-button btn-recover-resend',
             label: html`${Translate.Render('resend')} ${Translate.Render('recover-verify-email')}`,
             type: 'submit',
           })}

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

@@ -7,28 +7,18 @@ const RichText = {
   Render: async function (options = { id: '', parentIdModal: '' }) {
     const id = options?.id ? options.id : getId(this.Tokens, 'rich-text-');
     this.Tokens[id] = {};
-    let top, height;
     setTimeout(() => {
       const easyMDE = new EasyMDE({
         element: s(`.${id}`),
+        hideIcons: ['fullscreen', 'side-by-side'],
         onToggleFullScreen: (onFs) => {
           if (onFs) {
             if (options.parentIdModal) {
-              s(`.btn-bar-modal-container-${options.parentIdModal}`).classList.add('hide');
-              top = newInstance(s(`.${options.parentIdModal}`).style.top);
-              height = newInstance(s(`.${options.parentIdModal}`).style.height);
-              s(`.${options.parentIdModal}`).style.top = '0px';
-              s(`.${options.parentIdModal}`).style.height = `${window.innerHeight}px`;
             }
             // Modal.cleanUI();
-            if (s(`.slide-menu-top-bar`)) s(`.slide-menu-top-bar`).classList.add('hide');
           } else {
             if (options.parentIdModal) {
-              s(`.btn-bar-modal-container-${options.parentIdModal}`).classList.remove('hide');
-              s(`.${options.parentIdModal}`).style.top = top;
-              s(`.${options.parentIdModal}`).style.height = height;
             }
-            if (s(`.slide-menu-top-bar`)) s(`.slide-menu-top-bar`).classList.add('remove');
             // Modal.restoreUI();
           }
         },

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

@@ -52,7 +52,9 @@ const LoadRouter = function (RouterInstance) {
 
 const setQueryPath = (options = { path: '', queryPath: '' }, queryKey = 'cid') => {
   const { queryPath, path } = options;
-  const newUri = `${getProxyPath()}${path === 'home' ? '' : `${path}/`}${queryPath ? `?${queryKey}=${queryPath}` : ''}`;
+  const newUri = `${getProxyPath()}${path === 'home' ? '' : `${path}/`}${
+    typeof queryPath === 'string' ? `?${queryKey}=${queryPath}` : ''
+  }`;
   const currentUri = `${window.location.pathname}${location.search}`;
   if (currentUri !== newUri && currentUri !== `${newUri}/`) setPath(newUri);
 };

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

@@ -39,6 +39,7 @@ const Scroll = {
     delete this.topRefreshEvents[id];
   },
   pullTopRefresh: function () {
+    return;
     append(
       'body',
       html` <style>

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

@@ -63,7 +63,7 @@ const SignUp = {
     });
     return html`
       ${await BtnIcon.Render({
-        class: 'section-mp form-button btn-sign-up-i-have-account',
+        class: 'in section-mp form-button btn-sign-up-i-have-account',
         label: html`<i class="fas fa-sign-in-alt"></i> ${Translate.Render('i-have-account')}<br />${Translate.Render(
             'log-in',
           )}`,
@@ -112,7 +112,7 @@ const SignUp = {
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in">
           ${await BtnIcon.Render({
-            class: 'section-mp form-button btn-sign-up',
+            class: 'in section-mp form-button btn-sign-up',
             label: Translate.Render('sign-up'),
             type: 'submit',
           })}

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

@@ -11,35 +11,49 @@ const Translate = {
   Data: {},
   Token: {},
   Event: {},
+  Options: {},
   Parse: function (lang) {
     s('html').lang = lang;
     Object.keys(this.Token).map((translateHash) => {
       if (translateHash in this.Token && lang in this.Token[translateHash]) {
-        if (!('placeholder' in this.Token[translateHash]) && s(`.${translateHash}`))
-          htmls(`.${translateHash}`, textFormatted(this.Token[translateHash][lang]));
+        if (!('placeholder' in this.Options[translateHash]) && s(`.${translateHash}`))
+          htmls(
+            `.${translateHash}`,
+            this.Options[translateHash]?.disableTextFormat
+              ? this.Token[translateHash][lang]
+              : textFormatted(this.Token[translateHash][lang]),
+          );
         else if ('placeholder' in this.Token[translateHash] && s(this.Token[translateHash].placeholder))
-          s(this.Token[translateHash].placeholder).placeholder = textFormatted(this.Token[translateHash][lang]);
+          s(this.Token[translateHash].placeholder).placeholder = this.Options[translateHash]?.disableTextFormat
+            ? this.Token[translateHash][lang]
+            : textFormatted(this.Token[translateHash][lang]);
       }
     });
     for (const keyEvent of Object.keys(this.Event)) this.Event[keyEvent]();
   },
-  Render: function (keyLang, placeholder) {
+  Render: function (keyLang, placeholder, options = { disableTextFormat: false }) {
     if (!(keyLang in this.Data)) {
       // TODO: add translate package or library for this case
       logger.warn('translate key lang does not exist: ', keyLang);
-      return textFormatted(keyLang);
+      return options.disableTextFormat ? keyLang : textFormatted(keyLang);
     }
     if (placeholder) this.Data[keyLang].placeholder = placeholder;
     keyLang = this.Data[keyLang];
     const translateHash = getId(this.Token, 'trans');
+    this.Options[translateHash] = options;
     this.Token[translateHash] = newInstance(keyLang);
     if ('placeholder' in keyLang) {
-      if (s('html').lang in keyLang) return textFormatted(keyLang[s('html').lang]);
-      return textFormatted(keyLang['en']);
+      if (s('html').lang in keyLang)
+        return options.disableTextFormat ? keyLang[s('html').lang] : textFormatted(keyLang[s('html').lang]);
+      return options.disableTextFormat ? keyLang['en'] : textFormatted(keyLang['en']);
     }
     if (s('html').lang in keyLang)
-      return html`<span class="${translateHash}">${textFormatted(keyLang[s('html').lang])}</span>`;
-    return html`<span class="${translateHash}">${textFormatted(keyLang['en'])}</span>`;
+      return html`<span class="${translateHash}"
+        >${options.disableTextFormat ? keyLang[s('html').lang] : textFormatted(keyLang[s('html').lang])}</span
+      >`;
+    return html`<span class="${translateHash}"
+      >${options.disableTextFormat ? keyLang['en'] : textFormatted(keyLang['en'])}</span
+    >`;
   },
   renderLang: function (language) {
     localStorage.setItem('lang', language);
@@ -474,6 +488,30 @@ const TranslateCore = {
     Translate.Data['friday'] = { es: 'Viernes', en: 'Friday' };
     Translate.Data['saturday'] = { es: 'Sábado', en: 'Saturday' };
     Translate.Data['sunday'] = { es: 'Domingo', en: 'Sunday' };
+
+    Translate.Data['description'] = { es: 'Descripción', en: 'Description' };
+    Translate.Data['daysOfWeek'] = { es: 'Días de la semana', en: 'Days of the week' };
+    Translate.Data['startTime'] = { es: 'Hora de inicio', en: 'Start time' };
+    Translate.Data['endTime'] = { es: 'Hora de finalizacion', en: 'End time' };
+    Translate.Data['appointment-scheduled'] = {
+      en: 'Your appointment has been scheduled',
+      es: 'Tu cita ha sido programada',
+    };
+    Translate.Data['info'] = { es: 'Información', en: 'Info' };
+    Translate.Data['complete-name'] = { es: 'Nombre completo', en: 'Complete name' };
+    Translate.Data['identityDocument'] = { es: 'Rut', en: 'Identity document' };
+    Translate.Data['day'] = { es: 'Día', en: 'Day' };
+    Translate.Data['month'] = { es: 'Mes', en: 'Month' };
+    Translate.Data['year'] = { es: 'Año', en: 'Year' };
+    Translate.Data['phone'] = { es: 'Teléfono', en: 'Phone' };
+    Translate.Data['invalid-identity-document'] = {
+      en: 'Invalid identity document',
+      es: 'Documento de identidad inválido',
+    };
+    Translate.Data['expired-session'] = {
+      en: 'Your session has expired. Please log in again.',
+      es: 'Su sesión ha expirado. Por favor, inicie sesión de nuevo.',
+    };
   },
 };