adminforth 1.3.52-next.1 → 1.3.52-next.3

package/dist/index.js

@@ -19,7 +19,7 @@ import PostgresConnector from './dataConnectors/postgres.js';
 import SQLiteConnector from './dataConnectors/sqlite.js';
 import CodeInjector from './modules/codeInjector.js';
 import ExpressServer from './servers/express.js';
-import { ADMINFORTH_VERSION, listify, suggestIfTypo } from './modules/utils.js';
+import { ADMINFORTH_VERSION, listify, suggestIfTypo, RateLimiter, getClinetIp } from './modules/utils.js';
 import { AdminForthFilterOperators, AdminForthDataTypes, } from './types/AdminForthConfig.js';
 import AdminForthPlugin from './basePlugin.js';
 import ConfigValidator from './modules/configValidator.js';
@@ -30,7 +30,7 @@ import OperationalResource from './modules/operationalResource.js';
 export * from './types/AdminForthConfig.js';
 export { interpretResource };
 export { AdminForthPlugin };
-export { suggestIfTypo };
+export { suggestIfTypo, RateLimiter, getClinetIp };
 class AdminForth {
     constructor(config) {
         _AdminForth_defaultConfig.set(this, {

package/dist/modules/restApi.js

@@ -160,9 +160,12 @@ export default class AdminForthRestAPI {
                 const dbUser = adminUser.dbUser;
                 username = dbUser[this.adminforth.config.auth.usernameField];
                 userFullName = dbUser[this.adminforth.config.auth.userFullNameField];
+                const userResource = this.adminforth.config.resources.find((res) => res.resourceId === this.adminforth.config.auth.usersResourceId);
+                const userPk = dbUser[userResource.columns.find((col) => col.primaryKey).name];
                 const userData = {
                     [this.adminforth.config.auth.usernameField]: username,
-                    [this.adminforth.config.auth.userFullNameField]: userFullName
+                    [this.adminforth.config.auth.userFullNameField]: userFullName,
+                    pk: userPk,
                 };
                 const checkIsMenuItemVisible = (menuItem) => {
                     if (typeof menuItem.visible === 'function') {

package/dist/modules/utils.js

@@ -323,3 +323,99 @@ export function suggestIfTypo(names, name) {
         return result[0].item;
     }
 }
+export function getClinetIp(headers) {
+    console.log('headers', headers);
+    return headers['CF-Connecting-IP'] ||
+        headers['x-forwarded-for'] ||
+        headers['x-real-ip'] ||
+        headers['x-client-ip'] ||
+        headers['x-proxy-user'] ||
+        headers['x-cluster-client-ip'] ||
+        headers['forwarded'] ||
+        headers['remote-addr'] ||
+        headers['client-ip'] ||
+        headers['x-client-ip'] ||
+        headers['x-real-ip'] || 'unknown';
+}
+export class RateLimiter {
+    /**
+     * Very dirty version of ratelimiter for demo purposes (should not be considered as production ready)
+     * Will be used as RateLimiter.checkRateLimit('key', '5/24h', clientIp)
+     * Stores counter in this class, in RAM, resets limits on app restart.
+     * Also it creates setTimeout for every call, so is not optimal for high load.
+     * @param key - key to store rate limit for
+     * @param limit - limit in format '5/24h' - 5 requests per 24 hours
+     * @param clientIp
+     */
+    static checkRateLimit(key, limit, clientIp) {
+        if (!limit) {
+            throw new Error('Rate limit is not set');
+        }
+        if (!key) {
+            throw new Error('Rate limit key is not set');
+        }
+        if (!clientIp) {
+            throw new Error('Client IP is not set');
+        }
+        if (!limit.includes('/')) {
+            throw new Error('Rate limit should be in format count/period, like 5/24h');
+        }
+        // parse limit
+        const [count, period] = limit.split('/');
+        const [preiodAmount, periodType] = /(\d+)(\w+)/.exec(period).slice(1);
+        const preiodAmountNumber = parseInt(preiodAmount);
+        // get current time
+        const whenClear = new Date();
+        if (periodType === 'h') {
+            whenClear.setHours(whenClear.getHours() + preiodAmountNumber);
+        }
+        else if (periodType === 'd') {
+            whenClear.setDate(whenClear.getDate() + preiodAmountNumber);
+        }
+        else if (periodType === 'm') {
+            whenClear.setMinutes(whenClear.getMinutes() + preiodAmountNumber);
+        }
+        else if (periodType === 'y') {
+            whenClear.setFullYear(whenClear.getFullYear() + preiodAmountNumber);
+        }
+        else if (periodType === 's') {
+            whenClear.setSeconds(whenClear.getSeconds() + preiodAmountNumber);
+        }
+        else {
+            throw new Error(`Unsupported period type for rate limiting: ${periodType}`);
+        }
+        // get current counter
+        const counter = this.counterData[key] && this.counterData[key][clientIp] || 0;
+        if (counter >= count) {
+            return { error: true };
+        }
+        RateLimiter.incrementCounter(key, clientIp);
+        setTimeout(() => {
+            RateLimiter.decrementCounter(key, clientIp);
+        }, whenClear.getTime() - Date.now());
+        return { error: false };
+    }
+    static incrementCounter(key, ip) {
+        if (!RateLimiter.counterData[key]) {
+            RateLimiter.counterData[key] = {};
+        }
+        if (!RateLimiter.counterData[key][ip]) {
+            RateLimiter.counterData[key][ip] = 0;
+        }
+        RateLimiter.counterData[key][ip]++;
+        console.log('🔄️🔄️🔄️🔄️🔄️🔄️ incremented', key, ip, this.counterData[key][ip]);
+    }
+    static decrementCounter(key, ip) {
+        if (!RateLimiter.counterData[key]) {
+            RateLimiter.counterData[key] = {};
+        }
+        if (!RateLimiter.counterData[key][ip]) {
+            RateLimiter.counterData[key][ip] = 0;
+        }
+        if (RateLimiter.counterData[key][ip] > 0) {
+            RateLimiter.counterData[key][ip]--;
+        }
+        console.log('🔄️🔄️🔄️🔄️🔄️🔄️ decremented', key, ip, this.counterData[key][ip]);
+    }
+}
+RateLimiter.counterData = {};

package/dist/servers/express.js

@@ -183,6 +183,7 @@ class ExpressServer {
             }
             const query = req.query;
             const adminUser = req.adminUser;
+            // lower request headers
             const headers = req.headers;
             const cookies = yield parseExpressCookie(req);
             const response = {

package/index.ts

@@ -5,7 +5,7 @@ import PostgresConnector from './dataConnectors/postgres.js';
 import SQLiteConnector from './dataConnectors/sqlite.js';
 import CodeInjector from './modules/codeInjector.js';
 import ExpressServer from './servers/express.js';
-import { ADMINFORTH_VERSION, listify, suggestIfTypo } from './modules/utils.js';
+import { ADMINFORTH_VERSION, listify, suggestIfTypo, RateLimiter, getClinetIp } from './modules/utils.js';
 import { 
   type AdminForthConfig, 
   type IAdminForth, 
@@ -29,7 +29,7 @@ import OperationalResource from './modules/operationalResource.js';
 export * from './types/AdminForthConfig.js'; 
 export { interpretResource };
 export { AdminForthPlugin };
-export { suggestIfTypo };
+export { suggestIfTypo, RateLimiter, getClinetIp };
 
 
 class AdminForth implements IAdminForth {

package/modules/restApi.ts

@@ -193,11 +193,15 @@ export default class AdminForthRestAPI {
     
         const dbUser = adminUser.dbUser;
         username = dbUser[this.adminforth.config.auth.usernameField]; 
-        userFullName =dbUser[this.adminforth.config.auth.userFullNameField];
+        userFullName = dbUser[this.adminforth.config.auth.userFullNameField];
+        const userResource = this.adminforth.config.resources.find((res) => res.resourceId === this.adminforth.config.auth.usersResourceId);
+
+        const userPk = dbUser[userResource.columns.find((col) => col.primaryKey).name];
 
         const userData = {
             [this.adminforth.config.auth.usernameField]: username,
-            [this.adminforth.config.auth.userFullNameField]: userFullName
+            [this.adminforth.config.auth.userFullNameField]: userFullName,
+            pk: userPk,
         };
         const checkIsMenuItemVisible = (menuItem) => {
           if (typeof menuItem.visible === 'function') {

package/modules/utils.ts

@@ -354,4 +354,119 @@ export function suggestIfTypo(names: string[], name: string): string {
   if (result.length > 0) {
     return result[0].item;
   }
+}
+
+
+export function getClinetIp(headers: object) {
+  console.log('headers', headers);
+  return headers['CF-Connecting-IP'] || 
+    headers['x-forwarded-for'] || 
+    headers['x-real-ip'] || 
+    headers['x-client-ip'] || 
+    headers['x-proxy-user'] || 
+    headers['x-cluster-client-ip'] || 
+    headers['forwarded'] || 
+    headers['remote-addr'] || 
+    headers['client-ip'] || 
+    headers['x-client-ip'] || 
+    headers['x-real-ip'] || 'unknown';
+}
+
+
+export class RateLimiter {
+  static counterData = {};
+
+
+
+
+  /**
+   * Very dirty version of ratelimiter for demo purposes (should not be considered as production ready)
+   * Will be used as RateLimiter.checkRateLimit('key', '5/24h', clientIp)
+   * Stores counter in this class, in RAM, resets limits on app restart.
+   * Also it creates setTimeout for every call, so is not optimal for high load.
+   * @param key - key to store rate limit for
+   * @param limit - limit in format '5/24h' - 5 requests per 24 hours
+   * @param clientIp 
+   */
+  static checkRateLimit(key: string, limit: string, clientIp: string) {
+
+    if (!limit) {
+      throw new Error('Rate limit is not set');
+    }
+
+    if (!key) {
+      throw new Error('Rate limit key is not set');
+    }
+
+    if (!clientIp) {
+      throw new Error('Client IP is not set');
+    }
+
+    if (!limit.includes('/')) {
+      throw new Error('Rate limit should be in format count/period, like 5/24h');
+    }
+
+    // parse limit
+    const [count, period] = limit.split('/');
+    const [preiodAmount, periodType] = /(\d+)(\w+)/.exec(period).slice(1);
+    const preiodAmountNumber = parseInt(preiodAmount);
+
+    // get current time
+    const whenClear = new Date();
+    if (periodType === 'h') {
+      whenClear.setHours(whenClear.getHours() + preiodAmountNumber);
+    } else if (periodType === 'd') {
+      whenClear.setDate(whenClear.getDate() + preiodAmountNumber);
+    } else if (periodType === 'm') {
+      whenClear.setMinutes(whenClear.getMinutes() + preiodAmountNumber);
+    } else if (periodType === 'y') {
+      whenClear.setFullYear(whenClear.getFullYear() + preiodAmountNumber);
+    } else if (periodType === 's') {
+      whenClear.setSeconds(whenClear.getSeconds() + preiodAmountNumber);
+    } else {
+      throw new Error(`Unsupported period type for rate limiting: ${periodType}`);
+    }
+
+  
+    // get current counter
+    const counter = this.counterData[key] && this.counterData[key][clientIp] || 0;
+    if (counter >= count) {
+      return { error: true };
+    }
+    RateLimiter.incrementCounter(key, clientIp);
+    setTimeout(() => {
+      RateLimiter.decrementCounter(key, clientIp);
+    }, whenClear.getTime() - Date.now());
+
+
+    return { error: false };
+
+  }
+
+  static incrementCounter(key: string, ip: string) {
+    if (!RateLimiter.counterData[key]) {
+      RateLimiter.counterData[key] = {};
+    }
+    if (!RateLimiter.counterData[key][ip]) {
+      RateLimiter.counterData[key][ip] = 0;
+    }
+    RateLimiter.counterData[key][ip]++;
+    console.log('🔄️🔄️🔄️🔄️🔄️🔄️ incremented', key, ip, this.counterData[key][ip]);
+  }
+
+  static decrementCounter(key: string, ip: string) {
+    if (!RateLimiter.counterData[key]) {
+      RateLimiter.counterData[key] = {};
+    }
+    if (!RateLimiter.counterData[key][ip]) {
+      RateLimiter.counterData[key][ip] = 0;
+    }
+    if (RateLimiter.counterData[key][ip] > 0) {
+      RateLimiter.counterData[key][ip]--;
+    }
+    console.log('🔄️🔄️🔄️🔄️🔄️🔄️ decremented', key, ip, this.counterData[key][ip]);
+
+  }
+
+
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.3.52-next.1",
+  "version": "1.3.52-next.3",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/servers/express.ts

@@ -199,6 +199,7 @@ class ExpressServer implements IExpressHttpServer {
       
       const query = req.query;
       const adminUser = req.adminUser;
+      // lower request headers
       const headers = req.headers;
       const cookies = await parseExpressCookie(req);
 

package/spa/src/App.vue

@@ -22,8 +22,6 @@
               v-for="c in coreStore?.config?.globalInjections?.header || []"
               :is="getCustomComponent(c)"
               :meta="c.meta"
-              :record="coreStore.record"
-              :resource="coreStore.resource"
               :adminUser="coreStore.adminUser"
             />
 
@@ -31,7 +29,8 @@
 
 
 
-              <span @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
+              <span               
+              @click="toggleTheme" class="cursor-pointer flex items-center gap-1 block px-4 py-2 text-sm text-black hover:bg-lightHtml dark:text-darkSidebarTextHover dark:hover:bg-darkHtml dark:hover:text-darkSidebarTextActive" role="menuitem">
                 <IconMoonSolid class="w-5 h-5 text-blue-300" v-if="theme !== 'dark'" />
                 <IconSunSolid class="w-5 h-5 text-yellow-300" v-else />
               </span>
@@ -54,12 +53,11 @@
                   </p>
                 </div>
                 <ul class="py-1" role="none">
-                  <li v-for="c in coreStore?.config?.globalInjections?.userMenu || []">
+              
+                  <li v-for="c in coreStore?.config?.globalInjections?.userMenu || []" >
                     <component 
                       :is="getCustomComponent(c)"
                       :meta="c.meta"
-                      :record="coreStore.record"
-                      :resource="coreStore.resource"
                       :adminUser="coreStore.adminUser"
                     />
                   </li>
@@ -169,8 +167,6 @@
           v-for="c in coreStore?.config?.globalInjections?.sidebar || []"
           :is="getCustomComponent(c)"
           :meta="c.meta"
-          :record="coreStore.record"
-          :resource="coreStore.resource"
           :adminUser="coreStore.adminUser"
         />
       </div>
@@ -250,7 +246,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, defineComponent, onBeforeMount } from 'vue';
 import { RouterLink, RouterView } from 'vue-router';
-import { initFlowbite } from 'flowbite'
+import { initFlowbite, Dropdown } from 'flowbite'
 import './index.scss'
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
@@ -372,6 +368,14 @@ watch([loggedIn,  routerIsReady, loginRedirectCheckIsReady], ([l,r,lr]) => {
   if (l && r && lr) {
     setTimeout(() => {
       initFlowbite();
+
+      const dd = new Dropdown(
+        document.querySelector('#dropdown-user') as HTMLElement,
+        document.querySelector('[data-dropdown-toggle="dropdown-user"]') as HTMLElement,
+      );
+      window.adminforth.closeUserMenuDropdown = () => {
+        dd.hide();
+      }
     }); 
   }
 })
@@ -407,4 +411,8 @@ function closeCTA() {
   const hash = ctaBadge.value.hash;
   window.localStorage.setItem(`ctaBadge-${hash}`, '1');
 }
+
+
+
+
 </script>

package/spa/src/composables/useStores.ts

@@ -47,6 +47,7 @@ export class FrontendAPI {
       list: {
         refresh: () => {/* will be redefined in list*/},
         closeThreeDotsDropdown: () => {/* will be redefined in list*/},
+        closeUserMenuDropdown: () => {/* will be redefined in list*/},
         setFilter: () => this.setListFilter.bind(this),
         updateFilter: () => this.updateListFilter.bind(this),
         clearFilters: () => this.clearListFilters.bind(this),

package/types/FrontendAPI.ts

@@ -48,6 +48,11 @@ export interface FrontendAPIInterface {
          */
         closeThreeDotsDropdown(): void;
 
+        /**
+         * Close the user menu dropdown
+         */
+        closeUserMenuDropdown(): void;
+
         /**
          * Set a filter in the list
          * Works only when user located on the list page.