cyberia 3.2.5 → 3.2.9

package/src/client/Default.index.js

@@ -1,24 +1,17 @@
 'use strict';
 
-import { Css } from './components/core/Css.js';
-import { Responsive } from './components/core/Responsive.js';
-import { TranslateCore } from './components/core/Translate.js';
+import { Worker } from './components/core/Worker.js';
+import { RouterDefault } from './components/default/RouterDefault.js';
+import { AppShellDefault } from './components/default/AppShellDefault.js';
+import { AppStoreDefault } from './components/default/AppStoreDefault.js';
+import { SocketIoDefault } from './components/default/SocketIoDefault.js';
 import { LogInDefault } from './components/default/LogInDefault.js';
 import { LogOutDefault } from './components/default/LogOutDefault.js';
 import { SignUpDefault } from './components/default/SignUpDefault.js';
-import { MenuDefault } from './components/default/MenuDefault.js';
-import { RouterDefault } from './components/default/RoutesDefault.js';
-import { TranslateDefault } from './components/default/TranslateDefault.js';
-import { Worker } from './components/core/Worker.js';
-import { Keyboard } from './components/core/Keyboard.js';
-import { SocketIo } from './components/core/SocketIo.js';
-import { SocketIoDefault } from './components/default/SocketIoDefault.js';
-import { AppStoreDefault } from './components/default/AppStoreDefault.js';
 import { CssDefaultDark, CssDefaultLight } from './components/default/CssDefault.js';
+import { TranslateDefault } from './components/default/TranslateDefault.js';
 import { EventsUI } from './components/core/EventsUI.js';
-import { Modal } from './components/core/Modal.js';
-
-const htmlMainBody = async () => {
+const DefaultTemplate = async () => {
   setTimeout(() => {
     EventsUI.onClick('.get-started-button', (e) => {
       e.preventDefault();
@@ -32,11 +25,10 @@ const htmlMainBody = async () => {
           <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>
+            <h3>Fast &amp; Reliable</h3>
             <p>Lightning-fast performance with 99.9% uptime</p>
           </div>
           <div class="feature-card">
@@ -50,7 +42,6 @@ const htmlMainBody = async () => {
             <p>Everything you need in one place</p>
           </div>
         </div>
-
         <button class="cta-button get-started-button">
           Get Started
           <span class="button-icon">→</span>
@@ -60,24 +51,21 @@ const htmlMainBody = async () => {
   `;
 };
 
+const CssDefaultThemes = [CssDefaultDark, CssDefaultLight];
+
 window.onload = () =>
   Worker.instance({
     router: RouterDefault,
-    render: async () => {
-      await Css.loadThemes([CssDefaultLight, CssDefaultDark]);
-      await TranslateCore.Init();
-      await TranslateDefault.Init();
-      await Responsive.Init();
-      await MenuDefault.Render({ htmlMainBody });
-      await SocketIo.Init({
-        channels: AppStoreDefault.Data,
-        path: `/`,
-      });
-      await SocketIoDefault.Init();
-      await LogInDefault();
-      await LogOutDefault();
-      await SignUpDefault();
-      await Keyboard.Init();
-      await Modal.RenderSeoSanitizer();
+    template: DefaultTemplate,
+    themes: CssDefaultThemes,
+    translate: TranslateDefault,
+    render: AppShellDefault,
+    appStore: AppStoreDefault,
+    socketPath: '/',
+    session: {
+      socket: SocketIoDefault,
+      login: LogInDefault,
+      signout: LogOutDefault,
+      signup: SignUpDefault,
     },
   });

package/src/client/Itemledger.index.js

@@ -1,41 +1,35 @@
 'use strict';
 
-import { Css, darkTheme, ThemeEvents } from './components/core/Css.js';
-import { Responsive } from './components/core/Responsive.js';
-import { TranslateCore } from './components/core/Translate.js';
+import { Worker } from './components/core/Worker.js';
+import { RouterItemledger } from './components/itemledger/RouterItemledger.js';
+import { AppShellItemledger } from './components/itemledger/AppShellItemledger.js';
+import { AppStoreItemledger } from './components/itemledger/AppStoreItemledger.js';
+import { SocketIoItemledger } from './components/itemledger/SocketIoItemledger.js';
 import { LogInItemledger } from './components/itemledger/LogInItemledger.js';
 import { LogOutItemledger } from './components/itemledger/LogOutItemledger.js';
 import { SignUpItemledger } from './components/itemledger/SignUpItemledger.js';
-import { MenuItemledger } from './components/itemledger/MenuItemledger.js';
-import { RouterItemledger } from './components/itemledger/RoutesItemledger.js';
-import { TranslateItemledger } from './components/itemledger/TranslateItemledger.js';
-import { Worker } from './components/core/Worker.js';
-import { Keyboard } from './components/core/Keyboard.js';
-import { SocketIo } from './components/core/SocketIo.js';
-import { SocketIoItemledger } from './components/itemledger/SocketIoItemledger.js';
-import { AppStoreItemledger } from './components/itemledger/AppStoreItemledger.js';
 import { CssItemledgerDark, CssItemledgerLight } from './components/itemledger/CssItemledger.js';
-import { s } from './components/core/VanillaJs.js';
-import { EventsUI } from './components/core/EventsUI.js';
+import { TranslateItemledger } from './components/itemledger/TranslateItemledger.js';
 
-const htmlMainBody = async () => {
+const ItemledgerTemplate = async () => {
   return html``;
 };
 
+const CssItemledgerThemes = [CssItemledgerDark, CssItemledgerLight];
+
 window.onload = () =>
   Worker.instance({
     router: RouterItemledger,
-    render: async () => {
-      await Css.loadThemes([CssItemledgerLight, CssItemledgerDark]);
-      await TranslateCore.Init();
-      await TranslateItemledger.Init();
-      await Responsive.Init();
-      await MenuItemledger.Render({ htmlMainBody });
-      await SocketIo.Init({ channels: AppStoreItemledger.Data });
-      await SocketIoItemledger.Init();
-      await LogInItemledger();
-      await LogOutItemledger();
-      await SignUpItemledger();
-      await Keyboard.Init();
+    template: ItemledgerTemplate,
+    themes: CssItemledgerThemes,
+    translate: TranslateItemledger,
+    render: AppShellItemledger,
+    appStore: AppStoreItemledger,
+
+    session: {
+      socket: SocketIoItemledger,
+      login: LogInItemledger,
+      signout: LogOutItemledger,
+      signup: SignUpItemledger,
     },
   });

package/src/client/Underpost.index.js

@@ -1,35 +1,31 @@
 'use strict';
 
-import { Css } from './components/core/Css.js';
-import { Responsive } from './components/core/Responsive.js';
-import { TranslateCore } from './components/core/Translate.js';
+import { Worker } from './components/core/Worker.js';
+import { RouterUnderpost } from './components/underpost/RouterUnderpost.js';
+import { AppShellUnderpost } from './components/underpost/AppShellUnderpost.js';
+import { AppStoreUnderpost } from './components/underpost/AppStoreUnderpost.js';
+import { SocketIoUnderpost } from './components/underpost/SocketIoUnderpost.js';
 import { LogInUnderpost } from './components/underpost/LogInUnderpost.js';
 import { LogOutUnderpost } from './components/underpost/LogOutUnderpost.js';
 import { SignUpUnderpost } from './components/underpost/SignUpUnderpost.js';
-import { MenuUnderpost } from './components/underpost/MenuUnderpost.js';
-import { RouterUnderpost } from './components/underpost/RoutesUnderpost.js';
-import { TranslateUnderpost } from './components/underpost/TranslateUnderpost.js';
-import { Worker } from './components/core/Worker.js';
-import { Keyboard } from './components/core/Keyboard.js';
-import { SocketIoUnderpost } from './components/underpost/SocketIoUnderpost.js';
-import { SocketIo } from './components/core/SocketIo.js';
-import { AppStoreUnderpost } from './components/underpost/AppStoreUnderpost.js';
 import { CssUnderpostDark, CssUnderpostLight } from './components/underpost/CssUnderpost.js';
+import { TranslateUnderpost } from './components/underpost/TranslateUnderpost.js';
+
+const CssUnderpostThemes = [CssUnderpostDark, CssUnderpostLight];
 
 window.onload = () =>
   Worker.instance({
     router: RouterUnderpost,
-    render: async () => {
-      await Css.loadThemes([CssUnderpostDark, CssUnderpostLight]);
-      await TranslateCore.Init();
-      await TranslateUnderpost.Init();
-      await Responsive.Init();
-      await MenuUnderpost.Render();
-      await SocketIo.Init({ channels: AppStoreUnderpost.Data });
-      await SocketIoUnderpost.Init();
-      await LogInUnderpost();
-      await LogOutUnderpost();
-      await SignUpUnderpost();
-      await Keyboard.Init();
+
+    themes: CssUnderpostThemes,
+    translate: TranslateUnderpost,
+    render: AppShellUnderpost,
+    appStore: AppStoreUnderpost,
+
+    session: {
+      socket: SocketIoUnderpost,
+      login: LogInUnderpost,
+      signout: LogOutUnderpost,
+      signup: SignUpUnderpost,
     },
   });

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

@@ -2,8 +2,8 @@ import { Alert } from './Alert.js';
 import { Modal } from './Modal.js';
 import { s } from './VanillaJs.js';
 
-const Page404 = {
-  Render: async function (options = { idModal: '' }) {
+class Page404 {
+  static async instance(options = { idModal: '' }) {
     setTimeout(() => {
       Modal.Data[options.idModal].onObserverListener['404'] = () => {
         if (s(`.container-404-${options.idModal}`))
@@ -14,7 +14,7 @@ const Page404 = {
       Modal.Data[options.idModal].onObserverListener['404']();
     });
     return html`<div class="in container-404-${options.idModal}">${await Alert.e404()}</div>`;
-  },
-};
+  }
+}
 
 export { Page404 };

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

@@ -2,8 +2,8 @@ import { Alert } from './Alert.js';
 import { Modal } from './Modal.js';
 import { s } from './VanillaJs.js';
 
-const Page500 = {
-  Render: async function (options = { idModal: '' }) {
+class Page500 {
+  static async instance(options = { idModal: '' }) {
     setTimeout(() => {
       Modal.Data[options.idModal].onObserverListener['500'] = () => {
         if (s(`.container-500-${options.idModal}`))
@@ -14,7 +14,7 @@ const Page500 = {
       Modal.Data[options.idModal].onObserverListener['500']();
     });
     return html`<div class="in container-500-${options.idModal}">${await Alert.e500()}</div>`;
-  },
-};
+  }
+}
 
 export { Page500 };

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

@@ -15,13 +15,25 @@ import { Validator } from './Validator.js';
 import { append, htmls, s } from './VanillaJs.js';
 import { getProxyPath } from './Router.js';
 import { getApiBaseUrl } from '../../services/core/core.service.js';
+import { AccountEventType, accountEvents } from './ClientEvents.js';
 import { loggerFactory } from './Logger.js';
 
 const logger = loggerFactory(import.meta);
 
-const Account = {
-  UpdateEvent: {},
-  Render: async function (options = { user: {}, bottomRender: async () => '', idModal: '' }) {
+class Account {
+  static UpdateEvent = {};
+  static onUpdated(listener, options = {}) {
+    if (options.key) Account.UpdateEvent[options.key] = listener;
+    return accountEvents.on(AccountEventType.updated, listener, options);
+  }
+  static offUpdated(key) {
+    delete Account.UpdateEvent[key];
+    return accountEvents.off(key);
+  }
+  static hasUpdatedListener(key) {
+    return accountEvents.has(key);
+  }
+  static async instance(options = { user: {}, bottomRender: async () => '', idModal: '' }) {
     // app profile page design example
     // CSS animated backgrounds
     let { user, idModal } = options;
@@ -82,7 +94,7 @@ const Account = {
           const currentUser = LogIn.Scope.user.main.model.user;
           if (!currentUser || !currentUser._id) {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -90,7 +102,7 @@ const Account = {
           // Guest users cannot submit form
           if (currentUser.role === 'guest') {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -99,7 +111,7 @@ const Account = {
           const { successKeys, errorKeys, errorMessage } = await validators();
           if (errorMessage) {
             NotificationManager.Push({
-              html: `${errorKeys.map((e) => Translate.Render(e.replace('account-', '')))} ${errorMessage}`,
+              html: `${errorKeys.map((e) => Translate.instance(e.replace('account-', '')))} ${errorMessage}`,
             });
             return;
           }
@@ -117,7 +129,7 @@ const Account = {
             html:
               result.status === 'error' && result.message
                 ? result.message
-                : Translate.Render(`${result.status}-update-user`),
+                : Translate.instance(`${result.status}-update-user`),
             status: result.status,
           });
           if (result.status === 'success') {
@@ -151,7 +163,7 @@ const Account = {
             const currentUser = LogIn.Scope.user.main.model.user;
             if (!currentUser || !currentUser._id) {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               return;
@@ -159,7 +171,7 @@ const Account = {
             // Guest users cannot verify email
             if (currentUser.role === 'guest') {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               return;
@@ -173,7 +185,7 @@ const Account = {
               },
             });
             NotificationManager.Push({
-              html: result.status === 'error' ? result.message : Translate.Render(`email send`),
+              html: result.status === 'error' ? result.message : Translate.instance(`email send`),
               status: result.status,
             });
           });
@@ -196,7 +208,7 @@ const Account = {
             const currentUser = LogIn.Scope.user.main.model.user;
             if (!currentUser || !currentUser._id) {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               s(`.account-profile-image`).style.opacity = 1;
@@ -205,7 +217,7 @@ const Account = {
             // Guest users cannot upload profile images
             if (currentUser.role === 'guest') {
               NotificationManager.Push({
-                html: Translate.Render('error-user-not-authenticated'),
+                html: Translate.instance('error-user-not-authenticated'),
                 status: 'error',
               });
               s(`.account-profile-image`).style.opacity = 1;
@@ -259,12 +271,12 @@ const Account = {
               if (topbarImg) topbarImg.src = newImageSrc;
 
               NotificationManager.Push({
-                html: Translate.Render('success-update-user'),
+                html: Translate.instance('success-update-user'),
                 status: 'success',
               });
             } else {
               NotificationManager.Push({
-                html: data?.message || Translate.Render('file-upload-failed'),
+                html: data?.message || Translate.instance('file-upload-failed'),
                 status: 'error',
               });
             }
@@ -286,7 +298,7 @@ const Account = {
               html: async () => {
                 return html`
                   <div class="in section-mp" style="text-align: center">
-                    ${Translate.Render('confirm-delete-account')}
+                    ${Translate.instance('confirm-delete-account')}
                   </div>
                 `;
               },
@@ -304,7 +316,7 @@ const Account = {
           const descriptionValue = s(`.account-brief-description`).value;
           if (!descriptionValue || descriptionValue === 'undefined' || descriptionValue.trim() === '') {
             NotificationManager.Push({
-              html: Translate.Render('brief-description-cannot-be-empty'),
+              html: Translate.instance('brief-description-cannot-be-empty'),
               status: 'error',
             });
             return;
@@ -313,7 +325,7 @@ const Account = {
           const currentUser = LogIn.Scope.user.main.model.user;
           if (!currentUser || !currentUser._id) {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -321,7 +333,7 @@ const Account = {
           // Guest users cannot update brief description
           if (currentUser.role === 'guest') {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
@@ -331,7 +343,7 @@ const Account = {
             html:
               result.status === 'error' && result.message
                 ? result.message
-                : Translate.Render(`${result.status}-update-user`),
+                : Translate.instance(`${result.status}-update-user`),
             status: result.status,
           });
           if (result.status === 'success') {
@@ -357,7 +369,7 @@ const Account = {
               const currentUser = LogIn.Scope.user.main.model.user;
               if (!currentUser || !currentUser._id) {
                 NotificationManager.Push({
-                  html: Translate.Render('error-user-not-authenticated'),
+                  html: Translate.instance('error-user-not-authenticated'),
                   status: 'error',
                 });
                 return;
@@ -365,7 +377,7 @@ const Account = {
               // Guest users cannot toggle public profile
               if (currentUser.role === 'guest') {
                 NotificationManager.Push({
-                  html: Translate.Render('error-user-not-authenticated'),
+                  html: Translate.instance('error-user-not-authenticated'),
                   status: 'error',
                 });
                 return;
@@ -375,7 +387,7 @@ const Account = {
                 html:
                   result.status === 'error' && result.message
                     ? result.message
-                    : Translate.Render(`${result.status}-update-user`),
+                    : Translate.instance(`${result.status}-update-user`),
                 status: result.status,
               });
               if (result.status === 'success') {
@@ -403,14 +415,14 @@ const Account = {
           const currentUser = LogIn.Scope.user.main.model.user;
           if (!currentUser || !currentUser._id) {
             NotificationManager.Push({
-              html: Translate.Render('error-user-not-authenticated'),
+              html: Translate.instance('error-user-not-authenticated'),
               status: 'error',
             });
             return;
           }
           const result = await UserService.delete({ id: currentUser._id });
           NotificationManager.Push({
-            html: result.status === 'error' ? result.message : Translate.Render(`success-delete-account`),
+            html: result.status === 'error' ? result.message : Translate.instance(`success-delete-account`),
             status: result.status,
           });
           s(`.btn-account-delete-confirm`).classList.remove('hide');
@@ -436,27 +448,27 @@ const Account = {
 
       <form class="in">
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-username`,
             type: 'text',
-            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.Render('username')}`,
+            label: html`<i class="fa-solid fa-pen-to-square"></i> ${Translate.instance('username')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             disabled: false,
             extension: async () =>
-              html`${await BtnIcon.Render({
+              html`${await BtnIcon.instance({
                 class: `in wfa btn-input-extension btn-account-update-username`,
                 type: 'button',
                 style: 'text-align: left',
-                label: html`${Translate.Render(`update`)}`,
+                label: html`${Translate.instance(`update`)}`,
               })}`,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-email`,
             type: 'email',
-            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.Render('email')}`,
+            label: html`<i class="fa-solid fa-envelope"></i> ${Translate.instance('email')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             autocomplete: 'email',
@@ -464,57 +476,57 @@ const Account = {
             extension: !(options && options.disabled && options.disabled.includes('emailConfirm'))
               ? async () =>
                   html`<div class="in verify-email-status"></div>
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       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')}
+                        <i class="fa-solid fa-paper-plane"></i> ${Translate.instance('send')}
+                        ${Translate.instance('verify-email')}
                       </div> `,
                     })}`
               : undefined,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-password`,
             type: 'password',
             autocomplete: 'new-password',
-            label: html`<i class="fa-solid fa-lock"></i> ${Translate.Render('password')}`,
+            label: html`<i class="fa-solid fa-lock"></i> ${Translate.instance('password')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             disabled: true,
             disabledEye: true,
             extension: async () =>
-              html`${await BtnIcon.Render({
+              html`${await BtnIcon.instance({
                 class: `in wfa btn-input-extension btn-account-change-password`,
                 type: 'button',
                 style: 'text-align: left',
-                label: html`${Translate.Render(`change-password`)}`,
+                label: html`${Translate.instance(`change-password`)}`,
               })}`,
           })}
         </div>
         <div class="in">
-          ${await Input.Render({
+          ${await Input.instance({
             id: `account-brief-description`,
-            label: html`<i class="fa-solid fa-pen-fancy"></i> ${Translate.Render('brief-description')}`,
+            label: html`<i class="fa-solid fa-pen-fancy"></i> ${Translate.instance('brief-description')}`,
             containerClass: 'inl section-mp width-mini-box input-container',
             placeholder: true,
             rows: 4,
             extension: async () =>
-              html`${await BtnIcon.Render({
+              html`${await BtnIcon.instance({
                 class: `in wfa btn-input-extension btn-brief-description-update`,
                 type: 'button',
                 style: 'text-align: left',
-                label: html`${Translate.Render(`update`)}`,
+                label: html`${Translate.instance(`update`)}`,
               })}`,
           })}
         </div>
         <div class="in section-mp">
-          ${await ToggleSwitch.Render({
+          ${await ToggleSwitch.instance({
             wrapper: true,
-            wrapperLabel: html`<i class="fa-solid fa-globe"></i> ${Translate.Render('public-profile')}`,
+            wrapperLabel: html`<i class="fa-solid fa-globe"></i> ${Translate.instance('public-profile')}`,
             id: 'account-public-profile',
             disabledOnClick: true,
             checked: user.publicProfile ? true : false,
@@ -522,35 +534,36 @@ const Account = {
         </div>
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in hide">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: 'in section-mp form-button btn-account',
-            label: Translate.Render('update'),
+            label: Translate.instance('update'),
             type: 'submit',
           })}
         </div>
       </form>
       <div class="in">
-        ${await BtnIcon.Render({
+        ${await BtnIcon.instance({
           class: 'in section-mp form-button btn-account-delete hide',
-          label: html` ${Translate.Render(`delete-account`)}`,
+          label: html` ${Translate.instance(`delete-account`)}`,
           type: 'button',
           style: 'color: #5f5f5f',
         })}
-        ${await BtnIcon.Render({
+        ${await BtnIcon.instance({
           class: 'in section-mp form-button btn-account-delete-confirm',
-          label: html` ${Translate.Render(`delete-account`)}`,
+          label: html` ${Translate.instance(`delete-account`)}`,
           type: 'button',
           style: 'color: #5f5f5f',
         })}
       </div>
     `;
-  },
-  triggerUpdateEvent: async function (options = { user: {} }) {
+  }
+  static async triggerUpdateEvent(options = { user: {} }) {
+    await accountEvents.emit(AccountEventType.updated, options);
     for (const updateEvent of Object.keys(this.UpdateEvent)) {
       await this.UpdateEvent[updateEvent](options);
     }
-  },
-  renderVerifyEmailStatus: function (user) {
+  }
+  static renderVerifyEmailStatus(user) {
     if (s('.verify-email-status')) {
       if (s(`.btn-confirm-email`)) {
         if (user.emailConfirmed) s(`.btn-confirm-email`).classList.add('hide');
@@ -558,14 +571,14 @@ const Account = {
       }
       htmls(
         '.verify-email-status',
-        html`${renderStatus(user.emailConfirmed ? 'success' : 'error', { class: 'inl' })} ${Translate.Render('email')}
-        ${Translate.Render(user.emailConfirmed ? 'confirmed' : 'unconfirmed')}`,
+        html`${renderStatus(user.emailConfirmed ? 'success' : 'error', { class: 'inl' })} ${Translate.instance('email')}
+        ${Translate.instance(user.emailConfirmed ? 'confirmed' : 'unconfirmed')}`,
       );
       if (user.emailConfirmed === true) s(`.account-email`).setAttribute('disabled', '');
     }
-  },
-  instanceModalUiEvents: async (user) => null,
-  updateForm: async function (user) {
+  }
+  static instanceModalUiEvents = async (user) => null;
+  static async updateForm(user) {
     if (!s(`.modal-account`)) return;
 
     // Always sync the current user data into LogIn.Scope, preserving profileImage if it exists
@@ -611,7 +624,7 @@ const Account = {
         ToggleSwitch.Tokens['account-public-profile'].click();
       }
     }
-  },
-};
+  }
+}
 
 export { Account };