@underpostnet/underpost 2.7.9

package/src/client/ssr/common/Alert.js

@@ -0,0 +1,75 @@
+const maintenance = async ({ Translate }) => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />${Translate('server-maintenance')}
+  </div>`;
+};
+
+const noInternet = async ({ Translate }) => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+    <path
+      fill="currentColor"
+      d="M10 18q.128 0 .254-.004a5.5 5.5 0 0 1-.698-1.083c-.536-.207-1.098-.793-1.578-1.821A9.3 9.3 0 0 1 7.42 13.5h1.672q.096-.52.284-1h-2.17A15 15 0 0 1 7 10c0-.883.073-1.725.206-2.5h5.588c.092.541.156 1.115.186 1.713q.48-.138.992-.188a16 16 0 0 0-.165-1.525h2.733c.251.656.406 1.36.448 2.094q.543.276 1.008.66A8 8 0 1 0 10 18m0-15c.657 0 1.407.59 2.022 1.908c.217.466.406 1.002.559 1.592H7.419c.153-.59.342-1.126.56-1.592C8.592 3.59 9.342 3 10 3M7.072 4.485A10.5 10.5 0 0 0 6.389 6.5H3.936a7.02 7.02 0 0 1 3.778-3.118c-.241.33-.456.704-.642 1.103M6.192 7.5A16 16 0 0 0 6 10c0 .87.067 1.712.193 2.5H3.46A7 7 0 0 1 3 10c0-.88.163-1.724.46-2.5zm.197 6c.176.743.407 1.422.683 2.015c.186.399.401.773.642 1.103A7.02 7.02 0 0 1 3.936 13.5zm5.897-10.118A7.02 7.02 0 0 1 16.064 6.5H13.61a10.5 10.5 0 0 0-.683-2.015a6.6 6.6 0 0 0-.642-1.103M19 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M14.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />${Translate('no-internet-connection')}
+  </div>`;
+};
+
+const e404 = async ({ Translate }) => {
+  const icon = html`
+    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
+      <path
+        fill="currentColor"
+        d="M15.097 5.904A6.5 6.5 0 0 0 4 10.504l.001 1h-2v-1a8.5 8.5 0 1 1 15.176 5.258l5.344 5.345l-1.414 1.414l-5.344-5.345A8.48 8.48 0 0 1 10.5 19h-1v-2h1a6.5 6.5 0 0 0 4.596-11.096M1.672 13.257L4.5 16.086l2.829-2.829l1.414 1.415L5.915 17.5l2.828 2.828l-1.414 1.415L4.5 18.914l-2.828 2.829l-1.414-1.415L3.086 17.5L.258 14.672z"
+      />
+    </svg>
+  `;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />
+    <span class="bold">404</span>
+    <br />
+    <br />${Translate('page-not-found')} <br />
+    <br />
+    <a href="${location.origin}">${Translate('back')}</a>
+  </div>`;
+};
+
+const e500 = async ({ Translate }) => {
+  const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
+    <path
+      fill="currentColor"
+      d="M6 2a2 2 0 0 0-2 2v5.207a5.5 5.5 0 0 1 1-.185V4a1 1 0 0 1 1-1h4v3.5A1.5 1.5 0 0 0 11.5 8H15v8a1 1 0 0 1-1 1h-3.6a5.5 5.5 0 0 1-.657 1H14a2 2 0 0 0 2-2V7.414a1.5 1.5 0 0 0-.44-1.06l-3.914-3.915A1.5 1.5 0 0 0 10.586 2zm8.793 5H11.5a.5.5 0 0 1-.5-.5V3.207zM10 14.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M5.5 12a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 1 0v-2a.5.5 0 0 0-.5-.5m0 5.125a.625.625 0 1 0 0-1.25a.625.625 0 0 0 0 1.25"
+    />
+  </svg>`;
+  return html` <div class="abs center" style="top: 45%">
+    ${icon}
+    <br />
+    <br />
+    <span class="bold">500</span>
+    <br />
+    <br />${Translate('page-broken')} <br />
+    <br />
+    <a href="${location.origin}">${Translate('back')}</a>
+  </div>`;
+};
+
+const Alert = { maintenance, noInternet, e404, e500 };
+
+export { Alert, e404 };

package/src/client/ssr/common/SsrCore.js

@@ -0,0 +1,91 @@
+const s = (el) => document.querySelector(el);
+
+const append = (el, html) => s(el).insertAdjacentHTML('beforeend', html);
+
+const htmls = (el, html) => (s(el).innerHTML = html);
+
+const s4 = () => (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+
+const range = (start, end) => {
+  return end < start
+    ? range(end, start).reverse()
+    : Array.apply(0, Array(end - start + 1)).map((element, index) => index + start);
+};
+
+const timer = (ms) => new Promise((res) => setTimeout(res, ms));
+
+const newInstance = (obj) => {
+  // structuredClone() 2022 ES6 feature
+  try {
+    return JSON.parse(JSON.stringify(obj));
+  } catch (error) {
+    return { error: error.message };
+  }
+};
+
+const fullScreenIn = () => {
+  const elem = document.documentElement;
+  if (elem.requestFullscreen) {
+    elem.requestFullscreen();
+  } else if (elem.mozRequestFullScreen) {
+    /* Firefox */
+    elem.mozRequestFullScreen();
+  } else if (elem.webkitRequestFullscreen) {
+    /* Chrome, Safari & Opera */
+    elem.webkitRequestFullscreen();
+  } else if (elem.msRequestFullscreen) {
+    /* IE/Edge */
+    elem = window.top.document.body; //To break out of frame in IE
+    elem.msRequestFullscreen();
+  }
+};
+
+const borderChar = (px, color, selectors) => {
+  if (selectors) {
+    return selectors
+      .map(
+        (selector) => html`
+          <style>
+            ${selector} {
+              text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color},
+                -${px}px -${px}px ${px}px ${color}, ${px}px ${px}px ${px}px ${color};
+            }
+          </style>
+        `,
+      )
+      .join('');
+  }
+  return html`
+    text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color}, -${px}px -${px}px ${px}px
+    ${color}, ${px}px ${px}px ${px}px ${color};
+  `;
+};
+const getLang = () =>
+  localStorage.getItem('lang') ? localStorage.getItem('lang') : navigator.language || navigator.userLanguage;
+
+const loggerFactory = (meta) => {
+  meta = meta.url.split('/').pop();
+  const types = ['error', 'warn', 'info', 'debug'];
+  const logger = {
+    log: function (type, args) {
+      if (location.hostname !== 'localhost' && console.log() !== null) {
+        console.log = () => null;
+        console.error = () => null;
+        console.info = () => null;
+        console.warn = () => null;
+      }
+      return location.hostname === 'localhost'
+        ? console[type](`[${meta}] ${new Date().toISOString()} ${type}:`, ...args)
+        : null;
+    },
+  };
+  types.map(
+    (type) =>
+      (logger[type] = function (...args) {
+        return this.log(type, args);
+      }),
+  );
+  return logger;
+};
+
+export { getLang, s, append, s4, range, timer, htmls, newInstance, fullScreenIn, borderChar, loggerFactory };

package/src/client/ssr/common/Translate.js

@@ -0,0 +1,26 @@
+const TranslateCore = {
+  ['server-maintenance']: {
+    en: "The server is under maintenance <br> we'll be back soon.",
+    es: 'El servidor está en mantenimiento <br> volveremos pronto.',
+  },
+  ['no-internet-connection']: {
+    en: 'No internet connection <br> verify your network',
+    es: 'Sin conexión a internet <br> verifica tu red',
+  },
+  ['page-not-found']: {
+    en: 'Page not found',
+    es: 'Página no encontrada',
+  },
+  ['page-broken']: {
+    es: 'Algo salio mal',
+    en: 'Something went wrong',
+  },
+  ['back']: {
+    en: 'Back to <br>  homepage',
+    es: 'Volver a  <br> la pagina principal',
+  },
+};
+
+const Translate = (key) => TranslateCore[key][getLang().match('es') ? 'es' : 'en'];
+
+export { Translate };

package/src/client/ssr/common/Worker.js

@@ -0,0 +1,28 @@
+const Worker = {
+  instance: async function (options = { render: async () => {} }) {
+    window.serviceWorkerReady = true;
+    append(
+      'body',
+      html`
+        <style>
+          body {
+            background-color: #dcdcdc;
+            color: #303030;
+            font-family: arial;
+            font-size: 16px;
+          }
+          .page-render {
+            min-height: 100vh;
+          }
+          a {
+            color: #000000;
+          }
+        </style>
+        <div class="in page-render"></div>
+      `,
+    );
+    await options.render();
+  },
+};
+
+export { Worker };

package/src/client/ssr/components/body/CacheControl.js

@@ -0,0 +1,114 @@
+const CacheControl = function ({ ttiLoadTimeLimit }) {
+  window.cleanCache = async () => {
+    await new Promise(async (resolve, reject) => {
+      navigator.serviceWorker
+        .getRegistrations()
+        .then(async (registrations) => {
+          const cacheNames = await caches.keys();
+          for (const cacheName of cacheNames) await caches.delete(cacheName);
+          for (const registration of registrations) {
+            console.log('[sw-cache-control] remove', registration);
+            registration.unregister();
+          }
+        })
+        .catch((...args) => {
+          console.error(...args);
+          return resolve(args);
+        })
+        .finally((...args) => {
+          console.log('[sw-cache-control] finally uninstall', args);
+          return resolve(args);
+        });
+    });
+    //   document.querySelector('html').innerHTML = '';
+    //   window.open(window.location.origin, '_blank');
+    localStorage.clear();
+    location.reload();
+  };
+
+  window.cacheControlCallBack = async () => {
+    let disable = false;
+    let status = false;
+    await new Promise((resolve, reject) => {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker
+          .getRegistrations()
+          .then((registrations) => {
+            for (const registration of registrations) {
+              if (registration.installing) console.log('[sw-cache-control] installing', registration);
+              else if (registration.waiting) console.log('[sw-cache-control] waiting', registration);
+              else if (registration.active) {
+                console.log('[sw-cache-control] active', registration);
+              }
+            }
+            if (registrations.length > 0) status = true;
+          })
+          .catch((...args) => {
+            console.error(...args);
+            return resolve(false);
+          })
+          .finally((...args) => {
+            console.log('[sw-cache-control] finally status', args);
+            return resolve(status);
+          });
+      } else {
+        console.warn('[sw-cache-control] disabled');
+        disable = true;
+        return resolve(false);
+      }
+    });
+    if (!disable && !window.serviceWorkerReady) {
+      window.cleanCache();
+    } else {
+      // old navigator
+    }
+  };
+  setTimeout(() => {
+    if (document.querySelector('.clean-cache-container'))
+      document.querySelector('.clean-cache-container').onclick = window.cleanCache;
+  });
+  setTimeout(window.cacheControlCallBack, ttiLoadTimeLimit); // 70s limit);
+};
+
+SrrComponent = ({ ttiLoadTimeLimit }) => {
+  const borderChar = (px, color, selectors) => {
+    if (selectors) {
+      return selectors
+        .map(
+          (selector) => html`
+            <style>
+              ${selector} {
+                text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color},
+                  -${px}px -${px}px ${px}px ${color}, ${px}px ${px}px ${px}px ${color};
+              }
+            </style>
+          `,
+        )
+        .join('');
+    }
+    return html`
+      text-shadow: ${px}px -${px}px ${px}px ${color}, -${px}px ${px}px ${px}px ${color}, -${px}px -${px}px ${px}px
+      ${color}, ${px}px ${px}px ${px}px ${color};
+    `;
+  };
+  return html`
+    <style>
+      .clean-cache-container {
+        position: fixed !important;
+        bottom: 5px !important;
+        right: 20px !important;
+        cursor: pointer !important;
+        font-family: Arial, sans-serif !important;
+        z-index: 11 !important;
+        color: white !important;
+        font-size: 12px !important;
+      }
+    </style>
+    ${borderChar(1, 'black', ['.clean-cache-container'])}
+    <script>
+      const CacheControl = ${CacheControl};
+      CacheControl({ ttiLoadTimeLimit: ${ttiLoadTimeLimit ? ttiLoadTimeLimit : 1000 * 70 * 1} });
+    </script>
+    <div class="clean-cache-container">v2.7.9</div>
+  `;
+};

package/src/client/ssr/components/body/DefaultSplashScreen.js

@@ -0,0 +1,90 @@
+SrrComponent = ({ base64BackgroundImage, metadata }) => html`
+  ${base64BackgroundImage
+    ? html`<style>
+        .ssr-background-image {
+          background-image: url('${base64BackgroundImage}');
+        }
+      </style>`
+    : metadata?.themeColor
+    ? html`<style>
+        .ssr-background-image {
+          background: ${metadata.themeColor};
+        }
+      </style>`
+    : ''}
+
+  <style>
+    .ssr-top-bar {
+      background: #ffffff;
+      height: 100px;
+    }
+    .ssr-btn {
+      height: 40px;
+      width: 40px;
+    }
+    .ssr-btn-0 {
+      top: 55px;
+      right: 5px;
+    }
+    .ssr-btn-1 {
+      top: 55px;
+      right: 55px;
+    }
+    .ssr-btn-2 {
+      top: 55px;
+      right: 105px;
+    }
+    .ssr-btn-3 {
+      top: 55px;
+      left: 5px;
+    }
+    .ssr-btn-4 {
+      top: 5px;
+      left: 5px;
+    }
+    .ssr-btn-5 {
+      top: 5px;
+      right: 5px;
+      border-radius: 50%;
+    }
+    .ssr-loader {
+      width: auto;
+    }
+
+    .loader {
+      height: 6px;
+      width: 130px;
+      --c: no-repeat linear-gradient(#353535 0 0);
+      background: var(--c), var(--c), #e1e1e1;
+      background-size: 60% 100%;
+      animation: l16 3s infinite;
+    }
+    @keyframes l16 {
+      0% {
+        background-position: -150% 0, -150% 0;
+      }
+      66% {
+        background-position: 250% 0, -150% 0;
+      }
+      100% {
+        background-position: 250% 0, 250% 0;
+      }
+    }
+  </style>
+  <div class="ssr-background-image"></div>
+  <div class="ssr-abs ssr-background" style="opacity: 1">
+    <div class="ssr-in ssr-top-bar">
+      ${new Array(6)
+        .fill()
+        .map(
+          (v, i) => html`<div class="ssr-abs ssr-btn ssr-btn-${i}">
+            <div class="ssr-shimmer"></div>
+          </div>`,
+        )
+        .join('')}
+
+      <div class="ssr-abs ssr-search-box"><div class="ssr-shimmer-search-box"></div></div>
+    </div>
+    <div class="ssr-abs ssr-center ssr-loader"><div class="loader"></div></div>
+  </div>
+`;

package/src/client/ssr/components/email/DefaultRecoverEmail.js

@@ -0,0 +1,21 @@
+SrrComponent = (render = { style: {}, renderStyle: () => '' }, options) =>
+  html`
+    <div style="${render.renderStyle('body')}">
+      <div style="${render.renderStyle('.container')}">
+        <h1 style="${render.renderStyle('h1')}">{{H1}}</h1>
+        <p style="${render.renderStyle('p')}">{{P1}}</p>
+        <p style="${render.renderStyle('p')}">
+          <a href="{{RECOVER_WEB_URL}}" style="${render.renderStyle('button')}"
+            ><img
+              src="http${options.transport.secure ? 's' : ''}://${options.host}${options.path === '/'
+                ? ''
+                : options.path}/api/user/recover/{{TOKEN}}"
+            /><br />{{RECOVER_BTN_LABEL}}</a
+          >
+        </p>
+      </div>
+      <div style="${render.renderStyle('.footer')}">
+        <p>{{COMPANY}}</p>
+      </div>
+    </div>
+  `;

package/src/client/ssr/components/email/DefaultVerifyEmail.js

@@ -0,0 +1,17 @@
+SrrComponent = (render = { style: {}, renderStyle: () => '' }, options) =>
+  html`
+    <div style="${render.renderStyle('body')}">
+      <div style="${render.renderStyle('.container')}">
+        <h1 style="${render.renderStyle('h1')}">{{H1}}</h1>
+        <p style="${render.renderStyle('p')}">{{P1}}</p>
+        <img
+          src="http${options.transport.secure ? 's' : ''}://${options.host}${options.path === '/'
+            ? ''
+            : options.path}/api/user/mailer/{{TOKEN}}"
+        />
+      </div>
+      <div style="${render.renderStyle('.footer')}">
+        <p>{{COMPANY}}</p>
+      </div>
+    </div>
+  `;