cyberia 2.8.885

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

@@ -0,0 +1,326 @@
+import { UserService } from '../../services/user/user.service.js';
+import { Auth } from './Auth.js';
+import { BtnIcon } from './BtnIcon.js';
+import { newInstance, s4 } from './CommonJs.js';
+import { renderStatus, renderWave } from './Css.js';
+import { EventsUI } from './EventsUI.js';
+import { fileFormDataFactory, Input } from './Input.js';
+import { LogIn } from './LogIn.js';
+import { Modal } from './Modal.js';
+import { NotificationManager } from './NotificationManager.js';
+import { Translate } from './Translate.js';
+import { Validator } from './Validator.js';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
+
+const Account = {
+  UpdateEvent: {},
+  Render: async function (options = { user: {}, bottomRender: async () => '', idModal: '' }) {
+    // app profile page design example
+    // CSS animated backgrounds
+    let { user, idModal } = options;
+    const waveAnimationId = 'account-wave';
+    const profileFileAccept = ['image/png', 'image/jpeg'];
+    setTimeout(async () => {
+      append(
+        `.wave-animation-container-${waveAnimationId}`,
+        html` <div class="abs center account-profile-image-container">
+            <img
+              class="abs center account-profile-image"
+              style="opacity: 1"
+              ${LogIn.Scope.user.main.model.user.profileImage
+                ? `src="${LogIn.Scope.user.main.model.user.profileImage.imageSrc}"`
+                : ''}
+            />
+          </div>
+          <div class="abs center account-profile-image-loading" style="color: white"></div>`,
+      );
+
+      const formData = [
+        {
+          model: 'username',
+          id: `account-username`,
+          rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }],
+        },
+        { model: 'email', id: `account-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
+        {
+          model: 'password',
+          defaultValue: '#Changethis123',
+          id: `account-password`,
+          rules: [{ type: 'isStrongPassword' }],
+        },
+      ];
+
+      this.formData = formData;
+
+      this.instanceModalUiEvents = async ({ user }) => {
+        const validators = await Validator.instance(formData);
+
+        for (const inputData of formData) {
+          s(`.${inputData.id}`).value =
+            !user[inputData.model] && inputData.defaultValue ? inputData.defaultValue : user[inputData.model];
+        }
+        let lastUser;
+        const submit = async () => {
+          lastUser = newInstance(user);
+          const { successKeys } = await validators();
+          if (successKeys.length === 0) return;
+          const body = {};
+          for (const inputData of formData) {
+            if (!s(`.${inputData.id}`).value || s(`.${inputData.id}`).value === 'undefined') continue;
+            if ('model' in inputData && successKeys.includes(inputData.id)) {
+              body[inputData.model] = s(`.${inputData.id}`).value;
+              user[inputData.model] = s(`.${inputData.id}`).value;
+            }
+          }
+          const result = await UserService.put({ id: user._id, body });
+          NotificationManager.Push({
+            html:
+              result.status === 'error' && result.message
+                ? result.message
+                : Translate.Render(`${result.status}-update-user`),
+            status: result.status,
+          });
+          if (result.status === 'success') {
+            user = result.data;
+            this.triggerUpdateEvent({ user });
+            if (lastUser.emailConfirmed !== user.emailConfirmed) {
+              this.renderVerifyEmailStatus(user);
+            }
+            lastUser = newInstance(user);
+          }
+        };
+        EventsUI.onClick(`.btn-account`, async (e) => {
+          e.preventDefault();
+          await submit();
+        });
+        EventsUI.onClick(`.btn-account-update-username`, async (e) => {
+          e.preventDefault();
+          await submit();
+        });
+
+        if (s(`.btn-confirm-email`))
+          EventsUI.onClick(`.btn-confirm-email`, async (e) => {
+            e.preventDefault();
+            const result = await UserService.post({
+              id: 'mailer/verify-email',
+              body: {
+                email: s(`.account-email`).value,
+                hostname: `${location.hostname}`,
+                proxyPath: getProxyPath(),
+              },
+            });
+            NotificationManager.Push({
+              html: result.status === 'error' ? result.message : Translate.Render(`email send`),
+              status: result.status,
+            });
+          });
+        this.renderVerifyEmailStatus(user);
+
+        s(`.${waveAnimationId}`).style.cursor = 'pointer';
+        s(`.${waveAnimationId}`).onclick = async (e) => {
+          e.preventDefault();
+          s(`.account-profile-image-input`).click();
+        };
+        EventsUI.onChange(
+          `.account-profile-image-input`,
+          async (e) => {
+            e.preventDefault();
+            s(`.account-profile-image`).style.opacity = 0;
+            const formFile = fileFormDataFactory(e, profileFileAccept);
+
+            const { status, data } = await UserService.put({
+              id: `profile-image/${user._id}`,
+              body: formFile,
+              headerId: 'file',
+            });
+
+            if (status === 'success') {
+              user.profileImageId = data.profileImageId;
+              delete LogIn.Scope.user.main.model.user.profileImage;
+              await LogIn.Trigger({ user });
+              s(`.account-profile-image`).src = LogIn.Scope.user.main.model.user.profileImage.imageSrc;
+            } else {
+              NotificationManager.Push({
+                html: Translate.Render('file-upload-failed'),
+                status: 'error',
+              });
+            }
+
+            s(`.account-profile-image`).style.opacity = 1;
+          },
+          { loadingContainer: `.account-profile-image-loading` },
+        );
+        s(`.btn-account-change-password`).onclick = (e) => {
+          e.preventDefault();
+          // s(`.btn-close-modal-account`).click();
+          s(`.main-btn-recover`).click();
+        };
+        EventsUI.onClick(
+          `.btn-account-delete-confirm`,
+          async (e) => {
+            e.preventDefault();
+            const confirmResult = await Modal.RenderConfirm({
+              html: async () => {
+                return html`
+                  <div class="in section-mp" style="text-align: center">
+                    ${Translate.Render('confirm-delete-account')}
+                  </div>
+                `;
+              },
+              id: 'delete-account-modal',
+            });
+            if (confirmResult.status === 'cancelled') return;
+            s(`.btn-account-delete-confirm`).classList.add('hide');
+            s(`.btn-account-delete`).classList.remove('hide');
+            s(`.btn-account-delete`).click();
+          },
+          { context: 'modal' },
+        );
+        EventsUI.onClick(`.btn-account-delete`, async (e) => {
+          e.preventDefault();
+          const result = await UserService.delete({ id: user._id });
+          NotificationManager.Push({
+            html: result.status === 'error' ? result.message : Translate.Render(`success-delete-account`),
+            status: result.status,
+          });
+          s(`.btn-account-delete-confirm`).classList.remove('hide');
+          s(`.btn-account-delete`).classList.add('hide');
+          if (result.status === 'success') {
+            Modal.onHomeRouterEvent();
+            await Auth.sessionOut();
+          }
+        });
+      };
+      await this.instanceModalUiEvents({ user });
+    });
+    return html`
+      <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">
+        <div class="in">
+          ${await Input.Render({
+            id: `account-username`,
+            type: 'text',
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
+            containerClass: 'inl section-mp width-mini-box input-container',
+            placeholder: true,
+            disabled: false,
+            extension: async () =>
+              html`${await BtnIcon.Render({
+                class: `in wfa btn-input-extension btn-account-update-username`,
+                type: 'button',
+                style: 'text-align: left',
+                label: html`${Translate.Render(`update`)}`,
+              })}`,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `account-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',
+            disabled: user.emailConfirmed,
+            extension: !(options && options.disabled && options.disabled.includes('emailConfirm'))
+              ? async () => html`<div class="in verify-email-status"></div>
+                  ${await BtnIcon.Render({
+                    class: `in wfa btn-input-extension btn-confirm-email`,
+                    type: 'button',
+                    style: 'text-align: left',
+                    label: html`<div class="in">
+                      <i class="fa-solid fa-paper-plane"></i> ${Translate.Render('send')}
+                      ${Translate.Render('verify-email')}
+                    </div> `,
+                  })}`
+              : undefined,
+          })}
+        </div>
+        <div class="in">
+          ${await Input.Render({
+            id: `account-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,
+            disabled: true,
+            disabledEye: true,
+            extension: async () =>
+              html`${await BtnIcon.Render({
+                class: `in wfa btn-input-extension btn-account-change-password`,
+                type: 'button',
+                style: 'text-align: left',
+                label: html`${Translate.Render(`change-password`)}`,
+              })}`,
+          })}
+        </div>
+        ${options?.bottomRender ? await options.bottomRender() : ``}
+        <div class="in hide">
+          ${await BtnIcon.Render({
+            class: 'in section-mp form-button btn-account',
+            label: Translate.Render('update'),
+            type: 'submit',
+          })}
+        </div>
+      </form>
+      <div class="in">
+        ${await BtnIcon.Render({
+          class: 'in section-mp form-button btn-account-delete hide',
+          label: html` ${Translate.Render(`delete-account`)}`,
+          type: 'button',
+          style: 'color: #5f5f5f',
+        })}
+        ${await BtnIcon.Render({
+          class: 'in section-mp form-button btn-account-delete-confirm',
+          label: html` ${Translate.Render(`delete-account`)}`,
+          type: 'button',
+          style: 'color: #5f5f5f',
+        })}
+      </div>
+    `;
+  },
+  triggerUpdateEvent: async function (options = { user: {} }) {
+    for (const updateEvent of Object.keys(this.UpdateEvent)) {
+      await this.UpdateEvent[updateEvent](options);
+    }
+  },
+  renderVerifyEmailStatus: function (user) {
+    if (s('.verify-email-status')) {
+      if (s(`.btn-confirm-email`)) {
+        if (user.emailConfirmed) s(`.btn-confirm-email`).classList.add('hide');
+        else s(`.btn-confirm-email`).classList.remove('hide');
+      }
+      htmls(
+        '.verify-email-status',
+        html`${renderStatus(user.emailConfirmed ? 'success' : 'error', { class: 'inl' })} ${Translate.Render('email')}
+        ${Translate.Render(user.emailConfirmed ? 'confirmed' : 'unconfirmed')}`,
+      );
+      if (user.emailConfirmed === true) s(`.account-email`).setAttribute('disabled', '');
+    }
+  },
+  instanceModalUiEvents: async (user) => null,
+  updateForm: async function (user) {
+    if (!s(`.modal-account`)) return;
+    await this.instanceModalUiEvents({ user });
+    s(`.account-profile-image`).style.opacity = 0;
+    for (const inputData of this.formData)
+      if (s(`.${inputData.id}`)) s(`.${inputData.id}`).value = user[inputData.model];
+    if (LogIn.Scope.user.main.model.user.profileImage) {
+      s(`.account-profile-image`).src = LogIn.Scope.user.main.model.user.profileImage.imageSrc;
+      s(`.account-profile-image`).style.opacity = 1;
+    }
+  },
+};
+
+export { Account };

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

@@ -0,0 +1,191 @@
+// https://www.ag-grid.com/javascript-data-grid/getting-started/
+// https://www.ag-grid.com/javascript-data-grid/themes/
+
+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: {},
+  theme: `ag-theme-alpine`, // quartz
+  Render: async function (options) {
+    let { id } = options;
+    setTimeout(() => {
+      // Grid Options: Contains all of the grid configurations
+      const gridOptions = {
+        // Row Data: The data to be displayed.
+        pagination: false, // Disabled by default, will be handled by the management view
+        // paginationPageSize: 100,
+        // suppressPaginationPanel: true, // We are using our own custom pagination component
+        // rowHeight: 60,
+        enableCellChangeFlash: true,
+        defaultColDef: {
+          editable: false,
+          flex: 1,
+          minWidth: 50,
+          filter: true,
+          autoHeight: true,
+        },
+        rowClassRules: {
+          'row-new-highlight': (params) => {
+            // a temporary flag we can set on new rows to highlight them
+            return params.data && params.data._new;
+          },
+        },
+        // domLayout: 'autoHeight', || 'normal'
+        // Column Definitions: Defines & controls grid columns.
+        columnDefs: options?.gridOptions?.rowData?.[0]
+          ? Object.keys(options.gridOptions.rowData[0]).map((field) => {
+              return { field };
+            })
+          : [],
+        ...options.gridOptions,
+      };
+
+      // Your Javascript code to create the grid
+      const myGridElement = s(`.${id}`);
+      if (this.grids[id]) this.grids[id].destroy();
+      this.grids[id] = agGrid.createGrid(myGridElement, gridOptions);
+      // myGridElement.style.setProperty('width', '100%');
+      ThemeEvents[id] = () => {
+        if (s(`.${id}`)) {
+          s(`.${id}`).classList.remove(darkTheme ? this.theme : this.theme + '-dark');
+          s(`.${id}`).classList.add(!darkTheme ? this.theme : this.theme + '-dark');
+        } else {
+          // console.warn('change theme: grid not found');
+          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
+        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 (
+    options = {
+      eventThemeId: 'AgGrid',
+      style: {
+        'font-family': '',
+        'font-size': '',
+        'no-cell-focus-style': false,
+        'row-cursor': '',
+      },
+    },
+  ) {
+    /*
+     --ag-foreground-color: rgb(126, 46, 132);
+     --ag-background-color: rgb(249, 245, 227);
+     --ag-header-foreground-color: rgb(204, 245, 172);
+     --ag-header-background-color: rgb(209, 64, 129);
+     --ag-odd-row-background-color: rgb(0, 0, 0, 0.03);
+     --ag-header-column-resize-handle-color: rgb(126, 46, 132);
+
+     --ag-font-size: 17px;
+     */
+    if (!s(`.ag-grid-base-style`))
+      append(
+        'head',
+        html`<link
+            class="ag-grid-base-style"
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/ag-grid.min.css"
+          /><link
+            rel="stylesheet"
+            type="text/css"
+            href="${getProxyPath()}styles/ag-grid-community/${this.theme}.min.css"
+          />`,
+      );
+    ThemeEvents[options.eventThemeId] = () => {
+      htmls(
+        `.ag-grid-style`,
+        html` ${options.style['font-family']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-family: '{{ag-font-family}}';
+                }
+              </style>`.replaceAll('{{ag-font-family}}', options.style['font-family'])
+            : ''}
+          ${options.style['font-size']
+            ? html`<style>
+                .ag-theme-alpine,
+                .ag-theme-alpine-dark {
+                  --ag-font-size: '{{ag-font-size}}';
+                }
+              </style>`.replaceAll('{{ag-font-size}}', options.style['font-size'])
+            : ''}
+          ${options.style['no-cell-focus-style']
+            ? html`<style>
+                .ag-has-focus .ag-cell-focus {
+                  border: none !important;
+                }
+              </style>`
+            : ''}
+          ${options.style['row-cursor']
+            ? html`<style>
+                .ag-row {
+                  cursor: '{{ag-row-cursor}}';
+                }
+              </style>`.replaceAll(`'{{ag-row-cursor}}'`, options.style['row-cursor'])
+            : ''}
+
+          <style>
+            .ag-btn-renderer {
+              font-size: 16px;
+              min-width: 90px;
+              min-height: 90px;
+            }
+          </style>
+          ${darkTheme
+            ? html`
+                <style>
+                  .ag-row.row-new-highlight {
+                    background-color: #6d68ff !important;
+                    transition: background-color 1s ease-out;
+                  }
+                  .ag-cell-data-changed,
+                  .ag-cell-data-changed-animation {
+                    background-color: #6d68ff !important;
+                    background: #6d68ff !important;
+                    color: #e4e4e4 !important;
+                  }
+                </style>
+              `
+            : html`<style>
+                .ag-row.row-new-highlight {
+                  background-color: #d0eaf8 !important;
+                  transition: background-color 1s ease-out;
+                }
+                .ag-cell-data-changed,
+                .ag-cell-data-changed-animation {
+                  background-color: #d1d1d1 !important;
+                  background: #d1d1d1 !important;
+                  color: #2e2e2e !important;
+                }
+              </style>`}`,
+      );
+    };
+  },
+};
+
+export { AgGrid };

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

@@ -0,0 +1,77 @@
+import { Translate } from './Translate.js';
+
+const maintenance = async () => {
+  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.Render('server-maintenance')}
+  </div>`;
+};
+
+const noInternet = async () => {
+  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.Render('no-internet-connection')}
+  </div>`;
+};
+
+const e404 = async () => {
+  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.Render('page-not-found')} <br />
+    <br />
+    <a href="${location.origin}">${Translate.Render('back')}</a>
+  </div>`;
+};
+
+const e500 = async () => {
+  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.Render('page-broken')} <br />
+    <br />
+    <a href="${location.origin}">${Translate.Render('back')}</a>
+  </div>`;
+};
+
+const Alert = { maintenance, noInternet, e404, e500 };
+
+export { Alert };