@underpostnet/underpost 2.7.9

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

@@ -0,0 +1,178 @@
+import { CoreService } from '../../services/core/core.service.js';
+import { BtnIcon } from './BtnIcon.js';
+import { s4 } from './CommonJs.js';
+import { darkTheme, renderCssAttr } from './Css.js';
+import { loggerFactory } from './Logger.js';
+import { append, getAllChildNodes, getProxyPath, htmls, s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+const LoadingAnimation = {
+  bar: {
+    tokens: {},
+    getId: (id) => `bar-progress-${id.slice(1)}`,
+    play: async function (container) {
+      const id = this.getId(container);
+      const idEvent = s4() + s4() + s4();
+      this.tokens[container] = `${idEvent}`;
+      // diagonal-bar-background-animation
+      // #6d68ff #790079
+      append(
+        'body',
+        html`
+          <div
+            class="fix progress-bar box-shadow ${id}"
+            style="left: -100%; background: ${darkTheme
+              ? LoadingAnimation.darkColor
+                ? LoadingAnimation.darkColor
+                : `#c9c9c9`
+              : LoadingAnimation.lightColor
+              ? LoadingAnimation.lightColor
+              : `#515151`};"
+          ></div>
+        `,
+      );
+      for (const frame of [
+        { time: 500, value: 35 },
+        { time: 1250, value: 15 },
+        { time: 3000, value: 5 },
+        { time: 5000, value: 1 },
+      ])
+        setTimeout(() => {
+          if (this.tokens[container] === idEvent && s(`.${id}`)) {
+            s(`.${id}`).style.left = `-${frame.value}%`;
+            // const percentageRender = html`${100 - frame.value}%`;
+          }
+        }, frame.time);
+    },
+    stop: function (container) {
+      const id = this.getId(container);
+      delete this.tokens[container];
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).style.left = '0%';
+      s(`.${id}`).style.opacity = 1;
+      setTimeout(() => (s(`.${id}`).style.opacity = 0));
+      setTimeout(() => s(`.${id}`).remove(), 400);
+    },
+  },
+  spinner: {
+    getId: (id) => `spinner-progress-${id.slice(1)}`,
+    play: async function (container, spinner) {
+      if (!s(container)) return;
+      const id = this.getId(container);
+
+      let render;
+      switch (spinner) {
+        case 'dual-ring':
+          render = html`<div class="lds-dual-ring"></div>`;
+          break;
+        case 'dual-ring-mini':
+        default:
+          render = html`<div class="lds-dual-ring-mini"></div>`;
+          break;
+      }
+
+      const style = {
+        'text-align': 'center',
+      };
+
+      if (s(container).classList) {
+        const classes = Array.from(s(container).classList);
+        if (classes.find((e) => e.match('management-table-btn-mini'))) {
+          style.top = '-2px';
+          style.left = '-2px';
+        } else if (classes.find((e) => e.match('action-bar-box'))) {
+          style.top = '-30px';
+          style.left = '-12px';
+        }
+      }
+
+      append(
+        container,
+        html`
+          <div
+            class="in ${id}"
+            style="${renderCssAttr({
+              style,
+            })}"
+          >
+            ${render}
+          </div>
+        `,
+      );
+      const label = BtnIcon.findLabel(s(container));
+      if (label) label.classList.add('hide');
+    },
+    stop: function (container) {
+      const id = this.getId(container);
+      if (!s(`.${id}`)) return;
+      s(`.${id}`).remove();
+      const label = BtnIcon.findLabel(s(container));
+      if (label) label.classList.remove('hide');
+    },
+  },
+  img: {
+    tokens: {},
+    load: function ({ key, src, classes, style }) {
+      this.tokens[key] = { src, classes, style };
+    },
+    play: function (container, key) {
+      append(
+        container,
+        html`<img
+          ${this.tokens[key].classes ? `class="${this.tokens[key].classes}"` : ''}
+          ${this.tokens[key].style ? `style="${this.tokens[key].style}"` : ''}
+          src="${getProxyPath()}${this.tokens[key].src}"
+        />`,
+      );
+    },
+  },
+  barLevel: {
+    append: () => {
+      s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
+      append('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+    clear: () => {
+      htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
+    },
+  },
+  removeSplashScreen: function (backgroundContainer) {
+    if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
+    if (!backgroundContainer) backgroundContainer = '.ssr-background';
+    if (s(backgroundContainer))
+      setTimeout(() => {
+        s(backgroundContainer).style.opacity = 0;
+        setTimeout(async () => {
+          s(backgroundContainer).style.display = 'none';
+        }, 300);
+      });
+  },
+  lightColor: null,
+  setLightColor: function (color) {
+    this.lightColor = color;
+  },
+  darkColor: null,
+  setDarkColor: function (color) {
+    this.darkColor = color;
+  },
+  RenderCurrentSrcLoad: function (event) {
+    if (s(`.ssr-loading-info`)) {
+      let nameSrcLoad = event.data.path;
+      if (nameSrcLoad) {
+        if (nameSrcLoad.match('assets'))
+          nameSrcLoad =
+            location.hostname +
+            location.pathname +
+            (location.pathname[location.pathname.length - 1] !== '/' ? '/' : '') +
+            'assets';
+        else if (!nameSrcLoad.match('api')) nameSrcLoad = undefined;
+        if (nameSrcLoad)
+          htmls(
+            `.ssr-loading-info`,
+            html`<span style="color: white">Loading </span> ...${nameSrcLoad.slice(-30).replaceAll('file', 'storage')}`,
+          );
+      }
+    }
+  },
+};
+export { LoadingAnimation };

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

@@ -0,0 +1,187 @@
+import { CoreService } from '../../services/core/core.service.js';
+import { FileService } from '../../services/file/file.service.js';
+import { UserService } from '../../services/user/user.service.js';
+import { BtnIcon } from './BtnIcon.js';
+import { EventsUI } from './EventsUI.js';
+import { Input } from './Input.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Translate } from './Translate.js';
+import { Validator } from './Validator.js';
+import { htmls, s } from './VanillaJs.js';
+import { Webhook } from './Webhook.js';
+
+const LogIn = {
+  Scope: {
+    user: {
+      main: {
+        model: {
+          user: {},
+        },
+      },
+    },
+  },
+  Event: {},
+  Trigger: async function (options) {
+    const { user } = options;
+    await Webhook.register({ user });
+    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+    if (s(`.session`))
+      htmls(
+        `.session`,
+        html`<style>
+          .session-in-log-in {
+            display: block;
+          }
+          .session-inl-log-in {
+            display: inline-table;
+          }
+          .session-fl-log-in {
+            display: flow-root;
+          }
+          .session-in-log-out {
+            display: none;
+          }
+          .session-inl-log-out {
+            display: none;
+          }
+          .session-fl-log-out {
+            display: none;
+          }
+        </style>`,
+      );
+    if (!this.Scope.user.main.model.user.profileImage) {
+      const resultFile = await FileService.get({ id: user.profileImageId });
+      if (resultFile && resultFile.status === 'success' && resultFile.data[0]) {
+        const imageData = resultFile.data[0];
+
+        const imageBlob = new Blob([new Uint8Array(imageData.data.data)], { type: imageData.mimetype });
+
+        const imageFile = new File([imageBlob], imageData.name, { type: imageData.mimetype });
+
+        const imageSrc = URL.createObjectURL(imageFile);
+
+        // const  rawSvg = await CoreService.getRaw({ url: imageSrc });
+        // rawSvg = rawSvg.replace(`<svg`, `<svg class="abs account-profile-image" `).replace(`#5f5f5f`, `#ffffffc8`);
+
+        this.Scope.user.main.model.user.profileImage = {
+          resultFile,
+          imageData,
+          imageBlob,
+          imageFile,
+          imageSrc,
+        };
+      }
+    }
+
+    htmls(
+      `.action-btn-profile-log-in-render`,
+      html`<div class="abs center top-box-profile-img-container">
+        <img
+          class="abs center top-box-profile-img"
+          ${this.Scope.user.main.model.user.profileImage
+            ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
+            : ``}
+        />
+      </div>`,
+    );
+  },
+  Render: async function () {
+    setTimeout(async () => {
+      const formData = [
+        { model: 'email', id: `log-in-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
+        { model: 'password', id: `log-in-password`, rules: [{ type: 'isEmpty' }] },
+      ];
+      const validators = await Validator.instance(formData);
+
+      EventsUI.onClick(`.btn-log-in`, async (e) => {
+        e.preventDefault();
+        const { errorMessage } = await validators();
+        if (errorMessage) return;
+        const body = {};
+        for (const inputData of formData) {
+          if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
+        }
+        const result = await UserService.post({ id: 'auth', body });
+        if (result.status === 'success') this.Trigger(result.data);
+        if (result.status === 'error' && result.message.match('attempts')) {
+          htmls(`.login-attempt-warn-value`, result.message.split(':')[1]);
+          s(`.login-attempt-warn-container`).classList.remove('hide');
+        } else s(`.login-attempt-warn-container`).classList.add('hide');
+
+        if (result.status === 'error' && result.message.match('locked')) {
+          htmls(`.login-attempt-warn-value0`, result.message.split(':')[1]);
+          s(`.login-attempt-warn-container0`).classList.remove('hide');
+        } else s(`.login-attempt-warn-container0`).classList.add('hide');
+        NotificationManager.Push({
+          html: result.status === 'success' ? Translate.Render(`${result.status}-user-log-in`) : result.message,
+          status: result.status,
+        });
+      });
+      s(`.btn-log-in-forgot-password`).onclick = () => {
+        s(`.main-btn-recover`).click();
+      };
+
+      s(`.btn-log-in-i-not-have-account`).onclick = () => {
+        s(`.main-btn-sign-up`).click();
+      };
+    });
+    return html`
+      <div class="in">
+        ${await BtnIcon.Render({
+          class: 'section-mp form-button btn-log-in-i-not-have-account',
+          label: html`<i class="fas fa-user-plus"></i> ${Translate.Render(`i-not-have-account`)}
+            <br />
+            ${Translate.Render(`sign-up`)}`,
+          type: 'button',
+        })}
+      </div>
+      <form class="in">
+        <div class="in">
+          ${await Input.Render({
+            id: `log-in-email`,
+            type: 'email',
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+            autocomplete: 'email',
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `log-in-password`,
+            type: 'password',
+            autocomplete: 'new-password',
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+          })}
+        </div>
+        <div class="in">
+          ${await BtnIcon.Render({
+            class: 'section-mp form-button btn-log-in-forgot-password',
+            label: html`<i class="fas fa-question-circle"></i> ${Translate.Render(`forgot-password`)}`,
+            type: 'button',
+          })}
+        </div>
+        <div class="in section-mp form-button login-attempt-warn-container hide">
+          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('login-attempts-remaining')}
+          <span style="color: #ed9d0f" class="login-attempt-warn-value"></span>
+        </div>
+        <div class="in section-mp form-button login-attempt-warn-container0 hide">
+          <i class="fa-solid fa-triangle-exclamation"></i> ${Translate.Render('account-locked-try-again-in')}
+          <span style="color: #ed9d0f" class="login-attempt-warn-value0"></span>
+        </div>
+
+        <div class="in">
+          ${await BtnIcon.Render({
+            class: 'section-mp form-button btn-log-in',
+            label: Translate.Render('log-in'),
+            type: 'submit',
+          })}
+        </div>
+      </form>
+    `;
+  },
+};
+
+export { LogIn };

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

@@ -0,0 +1,58 @@
+import { BtnIcon } from './BtnIcon.js';
+import { LogIn } from './LogIn.js';
+import { Translate } from './Translate.js';
+import { htmls, s } from './VanillaJs.js';
+import { Webhook } from './Webhook.js';
+
+const LogOut = {
+  Event: {},
+  Trigger: async function (options) {
+    LogIn.Scope.user.main.model.user = {};
+    await Webhook.unregister();
+    for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+    if (s(`.session`))
+      htmls(
+        `.session`,
+        html`<style>
+          .session-in-log-out {
+            display: block;
+          }
+          .session-inl-log-out {
+            display: inline-table;
+          }
+          .session-fl-log-out {
+            display: flow-root;
+          }
+          .session-in-log-in {
+            display: none;
+          }
+          .session-inl-log-in {
+            display: none;
+          }
+          .session-fl-log-in {
+            display: none;
+          }
+        </style>`,
+      );
+  },
+  Render: async function () {
+    setTimeout(() => {
+      s('.btn-log-out').onclick = (e) => {
+        e.preventDefault();
+        LogOut.Trigger();
+      };
+    });
+    // Translate.Render('confirm-logout')
+    return html` <form class="in">
+      <div class="in">
+        ${await BtnIcon.Render({
+          class: 'section-mp btn-custom btn-log-out',
+          label: html`<i class="fa-solid fa-power-off"></i> ${Translate.Render('log-out')}`,
+          type: 'submit',
+        })}
+      </div>
+    </form>`;
+  },
+};
+
+export { LogOut };

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

@@ -0,0 +1,26 @@
+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 { loggerFactory };