underpost 2.8.1 → 2.8.7

package/src/cli/monitor.js

@@ -0,0 +1,236 @@
+import { loadReplicas, pathPortAssignmentFactory } from '../server/conf.js';
+import { loggerFactory } from '../server/logger.js';
+import UnderpostDeploy from './deploy.js';
+import axios from 'axios';
+import UnderpostRootEnv from './env.js';
+import fs from 'fs-extra';
+import { shellExec } from '../server/process.js';
+import { isInternetConnection } from '../server/dns.js';
+
+const logger = loggerFactory(import.meta);
+
+class UnderpostMonitor {
+  static API = {
+    async callback(
+      deployId,
+      env = 'development',
+      options = { now: false, single: false, msInterval: '', type: '', replicas: '', sync: false },
+      commanderOptions,
+      auxRouter,
+    ) {
+      if (deployId === 'dd' && fs.existsSync(`./engine-private/deploy/dd.router`)) {
+        for (const _deployId of fs.readFileSync(`./engine-private/deploy/dd.router`, 'utf8').split(','))
+          UnderpostMonitor.API.callback(
+            _deployId.trim(),
+            env,
+            options,
+            commanderOptions,
+            await UnderpostDeploy.API.routerFactory(_deployId, env),
+          );
+        return;
+      }
+
+      const router = auxRouter ?? (await UnderpostDeploy.API.routerFactory(deployId, env));
+
+      const confServer = loadReplicas(
+        JSON.parse(fs.readFileSync(`./engine-private/conf/${deployId}/conf.server.json`, 'utf8')),
+        'proxy',
+      );
+
+      const pathPortAssignmentData = pathPortAssignmentFactory(router, confServer);
+
+      let errorPayloads = [];
+      if (options.sync === true) {
+        const currentTraffic = UnderpostDeploy.API.getCurrentTraffic(deployId);
+        if (currentTraffic) UnderpostRootEnv.API.set(`${deployId}-${env}-traffic`, currentTraffic);
+      }
+      let traffic = UnderpostRootEnv.API.get(`${deployId}-${env}-traffic`) ?? 'blue';
+      const maxAttempts = parseInt(
+        Object.keys(pathPortAssignmentData)
+          .map((host) => pathPortAssignmentData[host].length)
+          .reduce((accumulator, value) => accumulator + value, 0) * 2.5,
+      );
+
+      logger.info(`Init deploy monitor`, {
+        pathPortAssignmentData,
+        maxAttempts,
+        deployId,
+        env,
+        traffic,
+      });
+
+      const switchTraffic = () => {
+        if (traffic === 'blue') traffic = 'green';
+        else traffic = 'blue';
+        UnderpostRootEnv.API.set(`${deployId}-${env}-traffic`, traffic);
+        shellExec(
+          `node bin deploy --info-router --build-manifest --traffic ${traffic} --replicas ${
+            options.replicas ? options.replicas : 1
+          } ${deployId} ${env}`,
+        );
+        shellExec(`sudo kubectl apply -f ./engine-private/conf/${deployId}/build/${env}/proxy.yaml`);
+      };
+
+      const monitor = async (reject) => {
+        if (UnderpostRootEnv.API.get(`monitor-init-callback-script`))
+          shellExec(UnderpostRootEnv.API.get(`monitor-init-callback-script`));
+        const currentTimestamp = new Date().getTime();
+        errorPayloads = errorPayloads.filter((e) => currentTimestamp - e.timestamp < 60 * 1000 * 5);
+        logger.info(`[${deployId}-${env}] Check server health`);
+        for (const host of Object.keys(pathPortAssignmentData)) {
+          for (const instance of pathPortAssignmentData[host]) {
+            const { port, path } = instance;
+            if (path.match('peer') || path.match('socket')) continue;
+            let urlTest = `http://localhost:${port}${path}`;
+            switch (options.type) {
+              case 'remote':
+              case 'blue-green':
+                urlTest = `https://${host}${path}`;
+                break;
+
+              default:
+                break;
+            }
+            // logger.info('Test instance', urlTest);
+            await axios.get(urlTest, { timeout: 10000 }).catch((error) => {
+              // console.log(error);
+              const errorPayload = {
+                urlTest,
+                host,
+                port,
+                path,
+                name: error.name,
+                status: error.status,
+                code: error.code,
+                errors: error.errors,
+                timestamp: new Date().getTime(),
+              };
+              if (errorPayload.status !== 404) {
+                errorPayloads.push(errorPayload);
+                if (errorPayloads.length >= maxAttempts) {
+                  const message = JSON.stringify(errorPayloads, null, 4);
+                  logger.error(
+                    `Deployment ${deployId} ${env} has been reached max attempts error payloads`,
+                    errorPayloads,
+                  );
+                  switch (options.type) {
+                    case 'blue-green':
+                      {
+                        const confServer = JSON.parse(
+                          fs.readFileSync(`./engine-private/conf/${deployId}/conf.server.json`, 'utf8'),
+                        );
+
+                        shellExec(`kubectl delete configmap underpost-config`);
+                        shellExec(
+                          `kubectl create configmap underpost-config --from-file=/home/dd/engine/engine-private/conf/dd-cron/.env.${env}`,
+                        );
+
+                        for (const host of Object.keys(confServer)) {
+                          shellExec(`sudo kubectl delete HTTPProxy ${host}`);
+                        }
+                        shellExec(`sudo kubectl rollout restart deployment/${deployId}-${env}-${traffic}`);
+
+                        switchTraffic();
+                      }
+
+                      break;
+
+                    case 'remote':
+                      break;
+
+                    default:
+                      if (reject) reject(message);
+                      else throw new Error(message);
+                  }
+                  errorPayloads = [];
+                }
+                logger.error(`Error accumulator ${deployId}-${env}-${traffic}`, errorPayloads.length);
+              }
+            });
+          }
+        }
+      };
+      if (options.now === true) await monitor();
+      if (options.single === true) return;
+      let optionsMsTimeout = parseInt(options.msInterval);
+      if (isNaN(optionsMsTimeout)) optionsMsTimeout = 60250; // 60.25 seconds
+      let monitorTrafficName;
+      let monitorPodName;
+      const monitorCallBack = (resolve, reject) => {
+        const envMsTimeout = UnderpostRootEnv.API.get(`${deployId}-${env}-monitor-ms`);
+        setTimeout(
+          async () => {
+            const isOnline = await isInternetConnection();
+            if (!isOnline) {
+              logger.warn('No internet connection');
+              monitorCallBack(resolve, reject);
+              return;
+            }
+            switch (options.type) {
+              case 'blue-green':
+                {
+                  if (monitorTrafficName !== traffic) {
+                    monitorTrafficName = undefined;
+                    monitorPodName = undefined;
+                  }
+                  const cmd = `underpost config get container-status`;
+                  const checkDeploymentReadyStatus = () => {
+                    const pods = UnderpostDeploy.API.get(`${deployId}-${env}-${traffic}`);
+                    if (pods && pods[0]) {
+                      const { NAME } = pods[0];
+                      if (
+                        shellExec(`sudo kubectl exec -i ${NAME} -- sh -c "${cmd}"`, { stdout: true }).match(
+                          `${deployId}-${env}-running-deployment`,
+                        )
+                      ) {
+                        monitorPodName = NAME;
+                        monitorTrafficName = `${traffic}`;
+                      }
+                    }
+                  };
+                  if (!monitorPodName) {
+                    checkDeploymentReadyStatus();
+                    monitorCallBack(resolve, reject);
+                    return;
+                  }
+                }
+
+                break;
+
+              default:
+                break;
+            }
+            for (const monitorStatus of [
+              { key: `monitor-input`, value: UnderpostRootEnv.API.get(`monitor-input`) },
+              {
+                key: `${deployId}-${env}-monitor-input`,
+                value: UnderpostRootEnv.API.get(`${deployId}-${env}-monitor-input`),
+              },
+            ])
+              switch (monitorStatus.value) {
+                case 'pause':
+                  monitorCallBack(resolve, reject);
+                  return;
+                case 'restart':
+                  UnderpostRootEnv.API.delete(monitorStatus.key);
+                  return reject();
+                case 'stop':
+                  UnderpostRootEnv.API.delete(monitorStatus.key);
+                  return resolve();
+                case 'blue-green-switch':
+                  UnderpostRootEnv.API.delete(monitorStatus.key);
+                  switchTraffic();
+              }
+            await monitor(reject);
+            monitorCallBack(resolve, reject);
+            return;
+          },
+          !isNaN(envMsTimeout) ? envMsTimeout : optionsMsTimeout,
+        );
+      };
+      return new Promise((...args) => monitorCallBack(...args));
+    },
+  };
+}
+
+export default UnderpostMonitor;

package/src/cli/repository.js

@@ -0,0 +1,128 @@
+import { commitData } from '../client/components/core/CommonJs.js';
+import dotenv from 'dotenv';
+import { pbcopy, shellExec } from '../server/process.js';
+import { actionInitLog, loggerFactory } from '../server/logger.js';
+import fs from 'fs-extra';
+import { getNpmRootPath } from '../server/conf.js';
+import UnderpostStartUp from '../server/start.js';
+
+dotenv.config();
+
+const logger = loggerFactory(import.meta);
+
+class UnderpostRepository {
+  static API = {
+    clone(gitUri = 'underpostnet/pwa-microservices-template', options = { bare: false }) {
+      const repoName = gitUri.split('/').pop();
+      if (fs.existsSync(`./${repoName}`)) fs.removeSync(`./${repoName}`);
+      shellExec(
+        `git clone ${options?.bare === true ? ` --bare ` : ''}https://${
+          process.env.GITHUB_TOKEN ? `${process.env.GITHUB_TOKEN}@` : ''
+        }github.com/${gitUri}.git`,
+        {
+          disableLog: true,
+        },
+      );
+    },
+    pull(repoPath = './', gitUri = 'underpostnet/pwa-microservices-template') {
+      shellExec(
+        `cd ${repoPath} && git pull https://${
+          process.env.GITHUB_TOKEN ? `${process.env.GITHUB_TOKEN}@` : ''
+        }github.com/${gitUri}.git`,
+        {
+          disableLog: true,
+        },
+      );
+    },
+    commit(
+      repoPath = './',
+      commitType = 'feat',
+      subModule = '',
+      message = '',
+      options = {
+        copy: false,
+        info: false,
+        empty: false,
+      },
+    ) {
+      if (commitType === 'reset') {
+        shellExec(`cd ${repoPath} && git reset --soft HEAD~${isNaN(parseInt(subModule)) ? 1 : parseInt(subModule)}`);
+        return;
+      }
+      if (options.info) return logger.info('', commitData);
+      const _message = `${commitType}${subModule ? `(${subModule})` : ''}${process.argv.includes('!') ? '!' : ''}: ${
+        commitData[commitType].emoji
+      } ${message ? message : commitData[commitType].description}`;
+      if (options.copy) return pbcopy(_message);
+      shellExec(`cd ${repoPath} && git commit ${options?.empty ? `--allow-empty ` : ''}-m "${_message}"`);
+    },
+
+    push(repoPath = './', gitUri = 'underpostnet/pwa-microservices-template', options = { f: false }) {
+      shellExec(
+        `cd ${repoPath} && git push https://${process.env.GITHUB_TOKEN}@github.com/${gitUri}.git${
+          options?.f === true ? ' --force' : ''
+        }`,
+        {
+          disableLog: true,
+        },
+      );
+      logger.info(
+        'commit url',
+        `http://github.com/${gitUri}/commit/${shellExec(`cd ${repoPath} && git rev-parse --verify HEAD`, {
+          stdout: true,
+        }).trim()}`,
+      );
+    },
+
+    new(repositoryName) {
+      return new Promise(async (resolve, reject) => {
+        try {
+          await logger.setUpInfo();
+          if (repositoryName === 'service')
+            return resolve(
+              await UnderpostStartUp.API.listenPortController(UnderpostStartUp.API.listenServerFactory(), ':'),
+            );
+          else actionInitLog();
+          const exeRootPath = `${getNpmRootPath()}/underpost`;
+          const destFolder = `./${repositoryName}`;
+          logger.info('Note: This process may take several minutes to complete');
+          logger.info('build app', { destFolder });
+          if (fs.existsSync(destFolder)) fs.removeSync(destFolder);
+          fs.mkdirSync(destFolder, { recursive: true });
+          fs.copySync(exeRootPath, destFolder);
+          fs.writeFileSync(`${destFolder}/.gitignore`, fs.readFileSync(`${exeRootPath}/.dockerignore`, 'utf8'), 'utf8');
+          shellExec(`cd ${destFolder} && git init && git add . && git commit -m "Base template implementation"`);
+          shellExec(`cd ${destFolder} && npm run build`);
+          shellExec(`cd ${destFolder} && npm run dev`);
+          return resolve();
+        } catch (error) {
+          logger.error(error, error.stack);
+          return reject(error.message);
+        }
+      });
+    },
+
+    getDeleteFiles(path = '.') {
+      const commandUntrack = `cd ${path} && git ls-files --deleted`;
+      const diffUntrackOutput = shellExec(commandUntrack, { stdout: true, silent: true });
+      return diffUntrackOutput.toString().split('\n').filter(Boolean);
+    },
+
+    getChangedFiles(path = '.', extension = '', head = false) {
+      const extensionFilter = extension ? `-- '***.${extension}'` : '';
+      const command = `cd ${path} && git diff ${head ? 'HEAD^ HEAD ' : ''}--name-only ${extensionFilter}`;
+      const commandUntrack = `cd ${path} && git ls-files --others --exclude-standard`;
+      const diffOutput = shellExec(command, { stdout: true, silent: true });
+      const diffUntrackOutput = shellExec(commandUntrack, { stdout: true, silent: true });
+      const deleteFiles = UnderpostRepository.API.getDeleteFiles(path);
+      return diffOutput
+        .toString()
+        .split('\n')
+        .filter(Boolean)
+        .concat(diffUntrackOutput.toString().split('\n').filter(Boolean))
+        .filter((f) => !deleteFiles.includes(f));
+    },
+  };
+}
+
+export default UnderpostRepository;

package/src/cli/script.js

@@ -0,0 +1,53 @@
+import { getNpmRootPath } from '../server/conf.js';
+import { loggerFactory } from '../server/logger.js';
+import { shellExec } from '../server/process.js';
+import fs from 'fs-extra';
+import UnderpostDeploy from './deploy.js';
+
+const logger = loggerFactory(import.meta);
+
+class UnderpostScript {
+  static API = {
+    set(key, value) {
+      const npmRoot = `${getNpmRootPath()}/underpost`;
+      const packageJson = JSON.parse(fs.readFileSync(`${npmRoot}/package.json`, 'utf8'));
+      packageJson.scripts[key] = value;
+      fs.writeFileSync(`${npmRoot}/package.json`, JSON.stringify(packageJson, null, 4));
+    },
+    run(key, value, options) {
+      const npmRoot = `${getNpmRootPath()}/underpost`;
+      const packageJson = JSON.parse(fs.readFileSync(`${npmRoot}/package.json`, 'utf8'));
+      if (options.itc === true) {
+        value = packageJson.scripts[key];
+        const podScriptPath = `${options.itcPath && typeof options.itcPath === 'string' ? options.itcPath : '/'}${value
+          .split('/')
+          .pop()}`;
+        const nameSpace = options.ns && typeof options.ns === 'string' ? options.ns : 'default';
+        const podMatch = options.podName && typeof options.podName === 'string' ? options.podName : key;
+
+        if (fs.existsSync(`${value}`)) {
+          for (const pod of UnderpostDeploy.API.get(podMatch)) {
+            shellExec(`sudo kubectl cp ${value} ${nameSpace}/${pod.NAME}:${podScriptPath}`);
+            const cmd = `node ${podScriptPath}`;
+            shellExec(`sudo kubectl exec -i ${pod.NAME} -- sh -c "${cmd}"`);
+          }
+        } else {
+          for (const pod of UnderpostDeploy.API.get(podMatch)) {
+            shellExec(`sudo kubectl exec -i ${pod.NAME} -- sh -c "${value}"`);
+          }
+        }
+
+        return;
+      }
+      shellExec(`cd ${npmRoot} && npm run ${key}`);
+    },
+    get(key) {
+      const npmRoot = `${getNpmRootPath()}/underpost`;
+      const packageJson = JSON.parse(fs.readFileSync(`${npmRoot}/package.json`, 'utf8'));
+      logger.info('[get] ' + key, packageJson.scripts[key]);
+      return packageJson.scripts[key];
+    },
+  };
+}
+
+export default UnderpostScript;

package/src/cli/secrets.js

@@ -0,0 +1,37 @@
+import dotenv from 'dotenv';
+import { shellExec } from '../server/process.js';
+import fs from 'fs-extra';
+import UnderpostRootEnv from './env.js';
+
+class UnderpostSecret {
+  static API = {
+    docker: {
+      init() {
+        shellExec(`docker swarm init`);
+      },
+      createFromEnvFile(envPath) {
+        const envObj = dotenv.parse(fs.readFileSync(envPath, 'utf8'));
+        for (const key of Object.keys(envObj)) {
+          UnderpostSecret.API.docker.set(key, envObj[key]);
+        }
+      },
+      set(key, value) {
+        shellExec(`docker secret rm ${key}`);
+        shellExec(`echo "${value}" | docker secret create ${key} -`);
+      },
+      list() {
+        shellExec(`docker secret ls`);
+      },
+    },
+    underpost: {
+      createFromEnvFile(envPath) {
+        const envObj = dotenv.parse(fs.readFileSync(envPath, 'utf8'));
+        for (const key of Object.keys(envObj)) {
+          UnderpostRootEnv.API.set(key, envObj[key]);
+        }
+      },
+    },
+  };
+}
+
+export default UnderpostSecret;

package/src/cli/test.js

@@ -0,0 +1,118 @@
+import { timer } from '../client/components/core/CommonJs.js';
+import { MariaDB } from '../db/mariadb/MariaDB.js';
+import { getNpmRootPath } from '../server/conf.js';
+import { actionInitLog, loggerFactory, setUpInfo } from '../server/logger.js';
+import { pbcopy, shellExec } from '../server/process.js';
+import UnderpostDeploy from './deploy.js';
+
+const logger = loggerFactory(import.meta);
+
+class UnderpostTest {
+  static API = {
+    /**
+     * Logs information about the current process environment to the console.
+     *
+     * This function is used to log details about
+     * the execution context, such as command-line arguments,
+     * environment variables, the process's administrative privileges,
+     * and the maximum available heap space size.
+     *
+     * @static
+     * @method setUpInfo
+     * @returns {Promise<void>}
+     * @memberof Underpost
+     */
+    async setUpInfo() {
+      return await setUpInfo(logger);
+    },
+    run() {
+      actionInitLog();
+      shellExec(`cd ${getNpmRootPath()}/underpost && npm run test`);
+    },
+    async callback(deployList = '', options = { itc: false, sh: false, logs: false }) {
+      if (
+        options.podName &&
+        typeof options.podName === 'string' &&
+        options.podStatus &&
+        typeof options.podStatus === 'string'
+      )
+        return await UnderpostTest.API.statusMonitor(options.podName, options.podStatus, options.kindType);
+
+      if (options.sh === true || options.logs === true) {
+        const [pod] = UnderpostDeploy.API.get(deployList);
+        if (pod) {
+          if (options.sh) return pbcopy(`sudo kubectl exec -it ${pod.NAME} -- sh`);
+          if (options.logs) return shellExec(`sudo kubectl logs -f ${pod.NAME}`);
+        }
+        return logger.warn(`Couldn't find pods in deployment`, deployList);
+      }
+      if (deployList) {
+        for (const _deployId of deployList.split(',')) {
+          const deployId = _deployId.trim();
+          if (!deployId) continue;
+          if (options.itc === true)
+            switch (deployId) {
+              case 'dd-lampp':
+                {
+                  const { MARIADB_HOST, MARIADB_USER, MARIADB_PASSWORD, DD_LAMPP_TEST_DB_0 } = process.env;
+
+                  await MariaDB.query({
+                    host: MARIADB_HOST,
+                    user: MARIADB_USER,
+                    password: MARIADB_PASSWORD,
+                    query: `SHOW TABLES FROM ${DD_LAMPP_TEST_DB_0}`,
+                  });
+                }
+                break;
+
+              default:
+                {
+                  shellExec('npm run test');
+                }
+
+                break;
+            }
+          else {
+            const pods = UnderpostDeploy.API.get(deployId);
+            if (pods.length > 0)
+              for (const deployData of pods) {
+                const { NAME } = deployData;
+                shellExec(
+                  `sudo kubectl exec -i ${NAME} -- sh -c "cd /home/dd/engine && underpost test ${deployId} --inside-container"`,
+                );
+              }
+            else logger.warn(`Couldn't find pods in deployment`, { deployId });
+          }
+        }
+      } else return UnderpostTest.API.run();
+    },
+    statusMonitor(podName, status = 'Running', kindType = '', deltaMs = 1000, maxAttempts = 60 * 5) {
+      if (!(kindType && typeof kindType === 'string')) kindType = 'pods';
+      return new Promise(async (resolve) => {
+        let index = 0;
+        logger.info(`Loading instance`, { podName, status, kindType, deltaMs, maxAttempts });
+        const _monitor = async () => {
+          await timer(deltaMs);
+          const pods = UnderpostDeploy.API.get(podName, kindType);
+          const result = pods.find((p) => p.STATUS === status);
+          logger.info(
+            `Testing pod ${podName}... ${result ? 1 : 0}/1 - elapsed time ${deltaMs * (index + 1)}s - attempt ${
+              index + 1
+            }/${maxAttempts}`,
+            pods[0] ? pods[0].STATUS : 'Not found kind object',
+          );
+          if (result) return resolve(true);
+          index++;
+          if (index === maxAttempts) {
+            logger.error(`Failed to test pod ${podName} within ${maxAttempts} attempts`);
+            return resolve(false);
+          }
+          return _monitor();
+        };
+        await _monitor();
+      });
+    },
+  };
+}
+
+export default UnderpostTest;

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

@@ -151,23 +151,27 @@ const Account = {
           // s(`.btn-close-modal-account`).click();
           s(`.main-btn-recover`).click();
         };
-        s(`.btn-account-delete-confirm`).onclick = 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();
-        };
+        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 });
@@ -178,7 +182,7 @@ const Account = {
           s(`.btn-account-delete-confirm`).classList.remove('hide');
           s(`.btn-account-delete`).classList.add('hide');
           if (result.status === 'success') {
-            s(`.main-btn-home`).click();
+            Modal.onHomeRouterEvent();
             await Auth.sessionOut();
           }
         });
@@ -200,7 +204,7 @@ const Account = {
             disabled: false,
             extension: async () =>
               html`${await BtnIcon.Render({
-                class: `wfa btn-input-extension btn-account-update-username`,
+                class: `in wfa btn-input-extension btn-account-update-username`,
                 type: 'button',
                 style: 'text-align: left',
                 label: html`${Translate.Render(`update`)}`,
@@ -219,7 +223,7 @@ const Account = {
             extension: !(options && options.disabled && options.disabled.includes('emailConfirm'))
               ? async () => html`<div class="in verify-email-status"></div>
                   ${await BtnIcon.Render({
-                    class: `wfa btn-input-extension btn-confirm-email`,
+                    class: `in wfa btn-input-extension btn-confirm-email`,
                     type: 'button',
                     style: 'text-align: left',
                     label: html`<div class="in">
@@ -242,7 +246,7 @@ const Account = {
             disabledEye: true,
             extension: async () =>
               html`${await BtnIcon.Render({
-                class: `wfa btn-input-extension btn-account-change-password`,
+                class: `in wfa btn-input-extension btn-account-change-password`,
                 type: 'button',
                 style: 'text-align: left',
                 label: html`${Translate.Render(`change-password`)}`,
@@ -252,7 +256,7 @@ const Account = {
         ${options?.bottomRender ? await options.bottomRender() : ``}
         <div class="in hide">
           ${await BtnIcon.Render({
-            class: 'section-mp form-button btn-account',
+            class: 'in section-mp form-button btn-account',
             label: Translate.Render('update'),
             type: 'submit',
           })}
@@ -260,13 +264,13 @@ const Account = {
       </form>
       <div class="in">
         ${await BtnIcon.Render({
-          class: 'section-mp form-button btn-account-delete hide',
+          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: 'section-mp form-button btn-account-delete-confirm',
+          class: 'in section-mp form-button btn-account-delete-confirm',
           label: html` ${Translate.Render(`delete-account`)}`,
           type: 'button',
           style: 'color: #5f5f5f',