adminforth 1.0.0

package/modules/codeInjector.js

@@ -0,0 +1,313 @@
+import fs from 'fs';
+import fsExtra from 'fs-extra';
+import filewatcher from 'filewatcher';
+import { exec, spawn } from 'child_process';
+import { promisify } from 'util';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import crypto from 'crypto';
+
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.join(path.dirname(__filename), '..');
+
+const execAsync = promisify(exec);
+
+function hashify(obj) {
+  return crypto.createHash
+    ('sha256').update(JSON.stringify(obj)).digest('hex');
+}
+
+class CodeInjector {
+  constructor(adminforth) {
+    this.adminforth = adminforth;
+  }
+
+  async runShell({command, verbose = false}) {
+    console.time(`Running ${command}...`);
+    const { stdout: out, stderr: err } = await execAsync(command);
+    console.timeEnd(`Running ${command}...`);
+    console.log(`Command ${command} output:`, out, err);
+  }
+
+  async runNpmShell({command, verbose = false, cwd}) {
+    const nodeBinary = process.execPath; // Path to the Node.js binary running this script
+    const npmPath = path.join(path.dirname(nodeBinary), 'npm'); // Path to the npm executable
+
+    const env = {
+      VUE_APP_ADMINFORTH_PUBLIC_PATH: this.adminforth.config.baseUrl,
+      FORCE_COLOR: '1',
+      ...process.env,
+    };
+
+    console.time(`Running npm ${command}...`);
+    const { stdout: out, stderr: err } = await execAsync(`${nodeBinary} ${npmPath} ${command}`, {
+      cwd,
+      env,
+    });
+    console.timeEnd(`Running npm ${command}...`);
+
+    if (verbose) {
+      console.log(`npm ${command} output:`, out);
+    }
+    if (err) {
+      console.error(`npm ${command} errors/warnings:`, err);
+    }
+  }
+
+  async rmTmpDir() {
+    // remove spa_tmp folder if it is exists
+    const spaTmpPath = path.join(__dirname, 'spa_tmp');
+    try {
+      await fs.promises.rm(spaTmpPath, { recursive: true });
+    } catch (e) {
+      // ignore
+    }
+  }
+
+  async prepareSources({ filesUpdated, verbose = false }) {
+    const spaTmpPath = path.join(__dirname, 'spa_tmp');
+
+    const customFiles = [];
+    const icons = [];
+    let routes = '';
+
+    const collectAssetsFromMenu = (menu) => {
+      menu.forEach((item) => {
+        if (item.icon) {
+          icons.push(item.icon);
+        }
+        if (item.component) {
+          customFiles.push(item.component);
+          routes += `{
+            path: '${item.path}',
+            name: '${item.path}',
+            component: import('@/custom/${item.component}'),
+          },\n`
+        }
+        if (item.children) {
+          collectAssetsFromMenu(item.children);
+        }
+      });
+    };
+    collectAssetsFromMenu(this.adminforth.config.menu);
+
+    if (this.adminforth.config.customization?.vueUsesFile) {
+      customFiles.push(this.adminforth.config.customization.vueUsesFile);
+    }
+
+    // create spa_tmp folder, or ignore if it exists
+    try {
+      await fs.promises.mkdir(spaTmpPath);
+    } catch (e) {
+      // ignore
+    }
+
+    if (filesUpdated) {
+      // copy only updated files
+      await Promise.all(filesUpdated.map(async (file) => {
+        const src = path.join(__dirname, 'spa', file);
+        const dest = path.join(spaTmpPath, file);
+        await fsExtra.copy(src, dest);
+      }));
+    } else {
+      await fsExtra.copy(path.join(__dirname, 'spa'), spaTmpPath, {
+        filter: (src) => {
+          return !src.includes('/node_modules') && !src.includes('/dist');
+        },
+      });
+
+      // copy custom files
+      await Promise.all(customFiles.map(async (file) => {
+        const src = path.join(file);
+        const dest = path.join(spaTmpPath, 'src', 'custom', file);
+        await fsExtra.copy(src, dest);
+      }))
+    }
+
+    //collect all 'icon' fields from resources bulkActions
+    this.adminforth.config.resources.forEach((resource) => {
+      if (resource.options?.bulkActions) {
+        resource.options.bulkActions.forEach((action) => {
+          if (action.icon) {
+            icons.push(action.icon);
+          }
+        });
+      }
+    });
+
+    const uniqueIcons = Array.from(new Set(icons));
+
+    // icons are collectionName:iconName. Get list of all unique collection names:
+    const collections = new Set(icons.map((icon) => icon.split(':')[0]));
+
+    // package names @iconify-prerendered/vue-<collection name>
+    const packageNames = Array.from(collections).map((collection) => `@iconify-prerendered/vue-${collection}`);
+
+    // for each icon generate import statement
+    const iconImports = uniqueIcons.map((icon) => {
+      const [ collection, iconName ] = icon.split(':');
+      const PascalIconName = 'Icon' + iconName.split('-').map((part, index) => {
+        return part[0].toUpperCase() + part.slice(1);
+      }).join('');
+      return `import { ${PascalIconName} } from '@iconify-prerendered/vue-${collection}';`;
+    }).join('\n');
+
+    // Generate Vue.component statements for each icon
+    const iconComponents = uniqueIcons.map((icon) => {
+      const [ collection, iconName ] = icon.split(':');
+      const PascalIconName = 'Icon' + iconName.split('-').map((part, index) => {
+        return part[0].toUpperCase() + part.slice(1);
+      }).join('');
+      return `app.component('${PascalIconName}', ${PascalIconName});`;
+    }).join('\n');
+
+    let imports = iconImports + '\n';
+
+    if (this.adminforth.config.customization?.vueUsesFile) {
+      imports += `import addCustomUses from '@/custom/${this.adminforth.config.customization.vueUsesFile}';\n`;
+    }
+
+    // inject that code into spa_tmp/src/App.vue
+    const appVuePath = path.join(spaTmpPath, 'src', 'main.ts');
+    let appVueContent = await fs.promises.readFile(appVuePath, 'utf-8');
+    appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH IMPORTS */', imports);
+    appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH COMPONENT REGISTRATIONS */', iconComponents + '\n' );
+    if (this.adminforth.config.customization?.vueUsesFile) {
+      appVueContent = appVueContent.replace('/* IMPORTANT:ADMINFORTH CUSTOM USES */', 'addCustomUses(app);');
+    }
+    await fs.promises.writeFile(appVuePath, appVueContent);
+
+
+    /* generate custom rotes */
+    const routerVuePath = path.join(spaTmpPath, 'src', 'router', 'index.ts');
+    let routerVueContent = await fs.promises.readFile(routerVuePath, 'utf-8');
+    routerVueContent = routerVueContent.replace('/* IMPORTANT:ADMINFORTH ROUTES */', routes);
+    await fs.promises.writeFile(routerVuePath, routerVueContent);
+    
+
+    /* hash checking */
+    const packageLockPath = path.join(spaTmpPath, 'package-lock.json');
+    const packageLock = JSON.parse(await fs.promises.readFile(packageLockPath, 'utf-8'));
+    const lockHash = hashify(packageLock);
+    /* customPackageLock */
+    const customPackagePath = path.join('./package.json');
+    const customPackage = JSON.parse(await fs.promises.readFile(customPackagePath, 'utf-8'));
+    const customPackageHash = hashify(customPackage);
+
+    const customLockPath = path.join('./package-lock.json');
+    const customLock = JSON.parse(await fs.promises.readFile(customLockPath, 'utf-8'));
+    const customLockHash = hashify(customLock);
+
+    const packagesNamesHash = hashify(packageNames);
+
+    const fullHash = hashify([lockHash, packagesNamesHash, customLockHash]);
+    const hashPath = path.join(spaTmpPath, 'node_modules', '.adminforth_hash');
+
+    try {
+      const existingHash = await fs.promises.readFile(hashPath, 'utf-8');
+      if (existingHash === fullHash) {
+        console.log('Hashes match, skipping npm ci/install');
+        return;
+      }
+    } catch (e) {
+      // ignore
+    }
+
+    await this.runNpmShell({command: 'ci', verbose, cwd: spaTmpPath});
+
+    // get packages with version from customPackage
+    const customPackgeNames = [...Object.keys(customPackage.dependencies), ...Object.keys(customPackage.devDependencies || [])].reduce(
+      (acc, packageName) => {
+        const version = customLock.packages[`node_modules/${packageName}`].version;
+        acc.push(`${packageName}@${version}`);
+        return acc;
+      }, []);
+
+    if (packageNames.length) {
+      const npmInstallCommand = `install ${[...packageNames, ...customPackgeNames].join(' ')}`;
+      await this.runNpmShell({command: npmInstallCommand, cwd: spaTmpPath});
+    }
+
+    await fs.promises.writeFile(hashPath, fullHash);
+
+  }
+
+  async watchForReprepare() {
+    const spaPath = path.join(__dirname, 'spa');
+    // get list of all subdirectories in spa recursively
+    const directories = [];
+    const collectDirectories = async (dir) => {
+      const files = await fs.promises.readdir(dir, { withFileTypes: true });
+      for (const file of files) {
+        if (file.isDirectory() && ['node_modules', 'dist'].indexOf(file.name) === -1) {
+          directories.push(path.join(dir, file.name));
+          await collectDirectories(path.join(dir, file.name));
+        }
+      }
+    };
+    await collectDirectories(spaPath);
+
+    // console.log('👌👌Watching for changes in:', directories.join('\n '))
+
+    const watcher = filewatcher();
+    directories.forEach((dir) => {
+      watcher.add(dir);
+    });
+
+    watcher.on(
+      'change',
+      async (file) => {
+        console.log(`File ${file} changed, preparing sources...`);
+        await this.prepareSources({ filesUpdated: [file.replace(spaPath + '/', '')] });
+      }
+    )
+    process.on('exit', () => {
+      watcher.removeAll();
+    });
+  }
+
+  async bundleNow({hotReload = false, verbose = false}) {
+    this.adminforth.config.runningHotReload = hotReload;
+
+    await this.prepareSources({ verbose });
+    await this.watchForReprepare();
+    console.log('AdminForth bundling');
+    
+    const cwd = path.join(__dirname, 'spa_tmp');
+    
+    
+
+    if (!hotReload) {
+      await this.runNpmShell({command: 'run build', verbose, cwd});
+    } else {
+      const command = 'run dev';
+      console.time(`Running npm ${command}...`);
+      const nodeBinary = process.execPath; 
+      const npmPath = path.join(path.dirname(nodeBinary), 'npm');
+      const env = {
+        VUE_APP_ADMINFORTH_PUBLIC_PATH: this.adminforth.config.baseUrl,
+        FORCE_COLOR: '1',
+        ...process.env,
+      };
+
+      const devServer = spawn(`${nodeBinary}`, [`${npmPath}`, ...command.split(' ')], {
+        cwd,
+        env,
+      });
+      devServer.stdout.on('data', (data) => {
+        console.log(`[AdminForth SPA]:`);
+        process.stdout.write(data);
+      });
+      devServer.stderr.on('data', (data) => {
+        console.error(`[AdminForth SPA ERR]:`);
+        process.stdout.write(data);
+
+      });
+
+      console.timeEnd(`Running npm ${command}...`);
+    }
+  }
+}
+
+export default CodeInjector;

package/modules/utils.js

@@ -0,0 +1,12 @@
+
+
+export function guessLabelFromName(name) {
+  if (name.includes('_')) {
+    return name.split('_').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
+  } else if (name.includes('-')) {
+    return name.split('-').map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
+  } else {
+    // split by capital letters
+    return name.split(/(?=[A-Z])/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(' ');
+  }
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "adminforth",
+  "version": "1.0.0",
+  "description": "OpenSource Vue3 powered forth-generation admin panel",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "devforth.io",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "better-sqlite3": "^10.0.0",
+    "crypto": "^1.0.1",
+    "dayjs": "^1.11.11",
+    "filewatcher": "^3.0.1",
+    "fs-extra": "^11.2.0",
+    "jsonwebtoken": "^9.0.2",
+    "mongodb": "6.6",
+    "pg": "^8.11.5",
+    "uuid": "^9.0.1"
+  }
+}

package/servers/express.js

@@ -0,0 +1,217 @@
+
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+
+function replaceAtStart(string, substring) {
+  if (string.startsWith(substring)) {
+    return string.slice(substring.length);
+  }
+  return string;
+}
+
+async function proxyTo(url, res) {
+  const r = await fetch(url);
+  const body = await r.text();
+  res.status(r.status);
+  r.headers.forEach((value, name) => {
+    res.setHeader(name, value);
+  });
+  res.send(body);
+}
+
+async function parseExpressCookie(req) {
+  const cookies = req.headers.cookie;
+  if (!cookies) {
+    return {};
+  }
+  const parts = cookies.split('; ');
+  const result = {};
+  parts.forEach(part => {
+    const [key, value] = part.split('=');
+    result[key] = value;
+  });
+  return result;
+}
+
+
+
+const respondNoServer = (title, explanation) => {
+  return `
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta http-equiv="X-UA-Compatible" content="IE=edge">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>AdminForth</title>
+    </head>
+    <body>
+      <div class="center">
+        <h1>Oops!</h1>
+        <h2>${title}</h2>
+        <p>${explanation}</p>
+      </div>
+      <style>
+        body {
+          font-family: Arial, sans-serif;
+          background-color: #f0f0f0;
+          margin: 0;
+          padding: 0;
+        }
+        .center {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100vh;
+          flex-direction: column;
+        }
+      </style>
+      <script>
+        setTimeout(() => {
+          location.reload();
+        }, 1500);
+      </script>
+    </body>
+    `;
+}
+class ExpressServer {
+  constructor(adminforth) {
+    this.adminforth = adminforth;
+  }
+
+  setupSpaServer() {
+    const prefix = this.adminforth.config.baseUrl
+
+    const slashedPrefix = prefix.endsWith('/') ? prefix : `${prefix}/`;
+
+    if (this.adminforth.config.runningHotReload) {
+      const handler = async (req, res) => {
+        // proxy using fetch to webpack dev server
+        try {
+          await proxyTo(`http://localhost:5173${req.url}`, res);
+        } catch (e) {
+          res.status(500).send(respondNoServer('AdminForth SPA is not ready yet', 'Vite is still starting up. Please wait a moment...'));
+          return;
+        }
+      }
+      this.expressApp.get(`${slashedPrefix}assets/*`, handler);
+      this.expressApp.get(`${prefix}*`, handler);
+
+    } else {
+      this.expressApp.get(`${slashedPrefix}assets/*`, (req, res) => {
+        res.sendFile(path.join(__dirname, '..', 'spa', 'dist', replaceAtStart(req.url, prefix)))
+      })
+
+      this.expressApp.get(`${prefix}*`, async (req, res) => {
+        const fullPath = path.join(__dirname, '..', 'spa', 'dist', 'index.html');
+        
+        let fileExists = true;
+        try { 
+          await fs.promises.access(fullPath, fs.constants.F_OK);
+        } catch (e) {
+          fileExists = false;
+        }
+        console.log('fileExists', fileExists);
+        if (!fileExists) {
+          res.status(500).send(respondNoServer(`${this.adminforth.config.brandName} is still warming up`, 'Please wait a moment...'));
+          return;
+        }
+        res.sendFile(fullPath);
+      });
+    }
+  }
+
+  serve(app) {
+    this.expressApp = app;
+    this.adminforth.setupEndpoints(this);
+    this.setupSpaServer();
+  }
+
+  authorize(handler) {
+    return async (req, res, next) => {
+      const cookies = await parseExpressCookie(req);
+      const jwt = cookies['adminforth_jwt'];
+      if (!jwt) {
+        res.status(401).send('Unauthorized by AdminForth');
+        return
+      }
+      const adminforthUser = this.adminforth.auth.verify(jwt);
+      if (!adminforthUser) {
+        res.status(401).send('Unauthorized by AdminForth');
+      } else {
+        req.adminUser = adminforthUser;
+        handler(req, res, next);
+      }
+    };
+  }
+
+  endpoint({ method='GET', path, handler, noAuth=false }) {
+    if (!path.startsWith('/')) {
+      throw new Error(`Path must start with /, got: ${path}`);
+    }
+    const fullPath = `${this.adminforth.config.baseUrl}/adminapi/v1${path}`;
+
+    const expressHandler = async (req, res) => {
+      let body = req.body || {};
+      if (typeof body === 'string') {
+        try {
+          body = JSON.parse(body);
+        } catch (e) {
+          console.error('Failed to parse body', e);
+          res.status(400).send('Invalid JSON body');
+        }
+      }
+      
+      const query = req.query;
+      const adminUser = req.adminUser;
+      const headers = req.headers;
+      const cookies = await parseExpressCookie(req);
+
+      const response = {
+        headers: {},
+        status: 200,
+        message: undefined,
+        setHeader(name, value) {
+          this.headers[name] = value;
+        },
+        setStatus(code, message) {
+          this.status = code;
+          this.message = message;
+        }
+      };
+      const input = { body, query, headers, cookies, response, _raw_express_req: req, _raw_express_res: res};
+
+      let output;
+      try {
+        output = await handler(input);
+      } catch (e) {
+        console.error('Error in handler', e);
+        // print full stack trace 
+        console.error(e.stack);
+        
+        res.status(500).send('Internal server error');
+        return;
+      }
+      Object.keys(response.headers).forEach((name) => {
+        res.setHeader(name, response.headers[name]);
+      })
+      const resp = res.status(response.status);
+      if (response.message) {
+        resp.send(response.message);
+        return;
+      }
+      res.json(output);
+    }
+
+    console.log(`Adding endpoint ${method} ${fullPath}`);
+    this.expressApp[method.toLowerCase()](fullPath, noAuth ? expressHandler : this.authorize(expressHandler));
+  }
+
+}
+
+export default ExpressServer;

package/spa/.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

package/spa/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint"
+  ]
+}

package/spa/README.md

@@ -0,0 +1,39 @@
+# spa
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

package/spa/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/spa/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+<!--     
+    <script>
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          document.documentElement.classList.add('dark');
+      } else {
+          document.documentElement.classList.remove('dark')
+      }
+  </script> -->
+
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>