adminforth 1.4.3-next.8 → 1.5.1

package/dist/spa/src/types/Back.ts

@@ -13,6 +13,7 @@ import { ActionCheckSource, AdminForthFilterOperators, AdminForthSortDirections,
 export interface ICodeInjector {
   srcFoldersToSync: Object;
   allComponentNames: Object;
+  devServerPort: number;
 
   getServeDir(): string;
 }
@@ -72,6 +73,12 @@ export interface IExpressHttpServer extends IHttpServer {
    */
   serve(app: Express): void;
 
+  /**
+   * Method to start listening on port.
+   */
+  listen(port: number, callback: Function): void;
+  listen(port: number, host: string, callback: Function): void;
+
   /**
    * Method (middleware) to wrap express endpoints with authorization check.
    * Adds adminUser to request object if user is authorized. Drops request with 401 status if user is not authorized.
@@ -90,6 +97,7 @@ export interface IExpressHttpServer extends IHttpServer {
   authorize(callable: Function): void;
 }
 
+
 export interface IAdminForthFilter {
   field: string;
   operator: AdminForthFilterOperators;
@@ -249,15 +257,35 @@ export interface IAdminForthAuth {
   removeAuthCookie(response: any): void;
 }
 
+export interface IAdminForthRestAPI {
+
+  /**
+   * Called by AdminForth to initialize all endpoints for REST API.
+   */
+  registerEndpoints(server: IHttpServer): void;
+
+  /**
+   * Called by login endpoint to process login callbacks. Also might be called by plugins, to prevent action if user is not allowed to login.
+   * For example signup or login via google might want to check if user is allowed to login by calling this method.
+   * @param adminUser - plugin/af pases current adminUser
+   * @param toReturn - this is an object which will get status of login process. If at least one callback returns error or redirectTo, login process will be stopped (future callbacks will not be called).
+   * @param response - http response object
+   */
+  processLoginCallbacks(adminUser: AdminUser, toReturn: { redirectTo?: string, allowedLogin: boolean, error?: string }, response: any): Promise<void>;
+}
+
 export interface IAdminForth {
   config: AdminForthConfig;
   codeInjector: ICodeInjector;
   express: IHttpServer;
 
+  restApi: IAdminForthRestAPI;
   activatedPlugins: Array<IAdminForthPlugin>;
 
   baseUrlSlashed: string;
 
+  websocket: IWebSocketBroker;
+
   statuses: {
     dbDiscover: 'running' | 'done',
   };
@@ -310,6 +338,7 @@ export interface IAdminForth {
    * This method will be automatically called from AdminForth HTTP adapter to serve AdminForth SPA.
    */
   setupEndpoints(server: IHttpServer): void;
+
 }
 
 
@@ -424,7 +453,7 @@ export enum AdminForthMenuTypes {
 /**
  * Menu item which displayed in the left sidebar of the admin panel.
  */
-export type AdminForthConfigMenuItem = {
+export interface AdminForthConfigMenuItem {
     type?: AdminForthMenuTypes | keyof typeof AdminForthMenuTypes,
 
     /**
@@ -512,6 +541,11 @@ export type AdminForthConfigMenuItem = {
      * Result of callback if not null will be used as a small badge near the menu item.
      */
     badge?: string | ((user: AdminUser) => Promise<string>),
+
+    /**
+     * Item id will be automatically generated from hashed resourceId+Path+label
+     */
+    _itemId?: string,
 }
   
 
@@ -521,13 +555,17 @@ export type AdminForthConfigMenuItem = {
  * Modify query to change how data is fetched from database.
  * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
  */
-export type BeforeDataSourceRequestFunction = (params: {resource: AdminForthResource, adminUser: AdminUser, query: any, 
+export type BeforeDataSourceRequestFunction = (params: {
+  resource: AdminForthResource, 
+  adminUser: AdminUser, 
+  query: any, 
   extra: {
     body: any,
     query: Record<string, string>,
     headers: Record<string, string>,
     cookies: Record<string, string>,
-  }
+  },
+  adminforth: IAdminForth,
 }) => Promise<{ok: boolean, error?: string}>;
 
 /**
@@ -543,20 +581,35 @@ export type AfterDataSourceResponseFunction = (params: {
     query: Record<string, string>,
     headers: Record<string, string>,
     cookies: { key: string, value: string }[],
-  }
+  },
+  adminforth: IAdminForth,
 }) => Promise<{ok: boolean, error?: string}>;
 
 /**
  * Modify record to change how data is saved to database.
  * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
  */
-export type BeforeSaveFunction = (params: {resource: AdminForthResource, recordId: any, adminUser: AdminUser, record: any, oldRecord?: any}) => Promise<{ok: boolean, error?: string}>;
+export type BeforeSaveFunction = (params: {
+  resource: AdminForthResource, 
+  recordId: any, 
+  adminUser: AdminUser, 
+  record: any, 
+  oldRecord?: any,
+  adminforth: IAdminForth,
+}) => Promise<{ok: boolean, error?: string}>;
 
 /**
  * Modify record to change how data is saved to database.
  * Return ok: false and error: string to stop execution and show error message to user. Return ok: true to continue execution.
  */
-export type AfterSaveFunction = (params: {resource: AdminForthResource, recordId: any, adminUser: AdminUser, record: any, oldRecord?: any}) => Promise<{ok: boolean, error?: string}>;
+export type AfterSaveFunction = (params: {
+  resource: AdminForthResource, 
+  recordId: any, 
+  adminUser: AdminUser, 
+  record: any, 
+  oldRecord?: any,
+  adminforth: IAdminForth,
+}) => Promise<{ok: boolean, error?: string}>;
 
 /**
  * Allow to get user data before login confirmation, will triger when user try to login.
@@ -564,9 +617,9 @@ export type AfterSaveFunction = (params: {resource: AdminForthResource, recordId
 export type BeforeLoginConfirmationFunction = (params?: { 
     adminUser: AdminUser,
     response: IAdminForthHttpResponse,
+    adminforth: IAdminForth,
 }) => Promise<{
-  ok:boolean, 
-  error?:string, 
+  error?: string, 
   body: {
     redirectTo?: string, 
     allowedLogin?: boolean,
@@ -678,6 +731,23 @@ export interface AdminForthConfig {
        * If rememberMeDays is set, then users who check "Remember Me" will be staying logged in for this amount of days.
        */
       rememberMeDays?: number,
+
+
+      /**
+       * Can be used to limit user access when subscribing from frontend to websocket topics.
+       * @param topic - topic where user is trying to subscribe
+       * @param user - user object
+       * @returns - boolean, true if user is allowed to subscribe to this topic, false otherwise
+       */
+      websocketTopicAuth?: (topic: string, user: AdminUser) => Promise<boolean>,
+
+      /**
+       * callback which will be called after user subscribes to websocket topic
+       * @param topic - topic on which user subscribed
+       * @param user - user object
+       * @returns 
+       */
+      websocketSubscribed?: (topic: string, user: AdminUser) => void,
     },
      /**
       * Array of resources which will be displayed in the admin panel.
@@ -956,7 +1026,7 @@ export interface IOperationalResource {
  * or function which returns Boolean or string with error message
  * 
  */
-export type AllowedActionValue = boolean | (({adminUser, resource, meta, source}: {
+export type AllowedActionValue = boolean | (({adminUser, resource, meta, source, adminforth}: {
   adminUser: AdminUser,
   resource: AdminForthResource,
 
@@ -969,6 +1039,11 @@ export type AllowedActionValue = boolean | (({adminUser, resource, meta, source}
    * Source of the check
    */
   source: ActionCheckSource,
+
+  /**
+   * Instance of AdminForth, can be used e.g. to call data API adminforth.resource(resourceId)...
+   */
+  adminforth: IAdminForth,
 }) => Promise<boolean | string>);
 
 
@@ -1191,4 +1266,22 @@ export interface AdminForthForeignResource extends AdminForthForeignResourceComm
 
 export interface AdminForthResourceColumn extends AdminForthResourceColumnCommon {
   foreignResource?: AdminForthForeignResource,
+}
+
+export interface IWebSocketClient {
+  id: string;
+  lastPing: number;
+  topics: Set<string>;
+  adminUser: AdminUser;
+  
+  send: (message: string) => void;
+  close: () => void;
+  onMessage: (handler: (message: string) => void) => void;
+  onClose: (handler: () => void) => void;
+}
+
+export interface IWebSocketBroker {
+  publish: (topic: string, data: any) => void;
+
+  registerWsClient: (client: IWebSocketClient) => void;
 }

package/dist/spa/src/types/Common.ts

@@ -570,9 +570,14 @@ export type AdminForthResourceColumnCommon = {
    */
   editingNote?: string | { create?: string, edit?: string },
 
+  /**
+   * Whether AdminForth will allow to edit this field in editing mode.
+   */
+  editReadonly?: boolean,
+
   /**
    * On which AdminForth pages this field will be shown. By default all.
-   * Example: if you want to show field only in create and edit pages, set it to 
+   * Example: if you want to show field only in create and edit pages, set it to
    * 
    * ```ts
    * showIn: [AdminForthResourcePages.CREATE, AdminForthResourcePages.EDIT]

package/dist/spa/src/types/FrontendAPI.ts

@@ -98,6 +98,13 @@ export interface FrontendAPIInterface {
          */
         clearFilters(): void;
     }
+
+    menu: {
+        /**
+         * Refreshes the badges in the menu, by recalling the badge function for each menu item
+         */
+        refreshMenuBadges(): void;
+    }
 }
 
 export type ConfirmParams = {

package/dist/spa/src/views/EditView.vue

@@ -124,6 +124,7 @@ onMounted(async () => {
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
+    source: 'edit',
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
   loading.value = false;

package/dist/spa/src/views/ListView.vue

@@ -97,6 +97,7 @@
       :pageSize="pageSize"
       :totalRows="totalRows"
       :checkboxes="checkboxes"
+      :customActionsInjection="coreStore.resourceOptions?.pageInjections?.list?.customActionIcons"
     />
 
     <component 
@@ -350,8 +351,7 @@ async function init() {
 }
 
 watch([page, sort, () => filtersStore.filters], async () => {
-  console.log('🔄️ page/sort/filter change fired, page:', page.value);
-
+  // console.log('🔄️ page/sort/filter change fired, page:', page.value);
   await getList();
 }, { deep: true });
 

package/dist/spa/src/views/LoginView.vue

@@ -39,7 +39,11 @@
                     <form class="space-y-4" @submit.prevent>
                         <div>
                             <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
-                            <input type="username" name="username" id="username" 
+                            <input 
+                              autocomplete="username"  
+                              type="username" 
+                              name="username" 
+                              id="username" 
                               ref="usernameInput"
                               @keydown.enter="passwordInput.focus()"
                               class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="name@company.com" required />
@@ -48,6 +52,7 @@
                             <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your password</label>
                             <input 
                               ref="passwordInput"
+                              autocomplete="current-password"
                               @keydown.enter="login"
                               :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required />
                             <button type="button" @click="showPw = !showPw" class="absolute top-12 right-3 -translate-y-1/2 text-gray-400 dark:text-gray-300">
@@ -85,8 +90,6 @@
                           {{ error }}
                           </div>
                         </div>
-                        
-                        
 
                         <div v-if="coreStore.config?.loginPromptHTML"
                           class="flex items-center p-4 mb-4 text-sm text-gray-800 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-400" role="alert"
@@ -97,14 +100,11 @@
                           <span class="sr-only">Info</span>
                           <div v-html="coreStore.config?.loginPromptHTML"></div>
                         </div>
-
                         <Button @click="login" :loader="inProgress" :disabled="inProgress" class="w-full">
                           Login to your account
                         </Button>
                     </form>
 
-                    
-
                 </div>
             </div>
         </div>
@@ -123,7 +123,7 @@ import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRouter } from 'vue-router';
-import Button from '@/afcl/Button.vue';
+import { Button } from '@/afcl';
 
 const passwordInput = ref(null);
 const usernameInput = ref(null);

package/dist/spa/src/views/PageNotFound.vue

@@ -0,0 +1,20 @@
+<template>
+  <section class="bg-white dark:bg-gray-900">
+    <div class="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div class="mx-auto max-w-screen-sm text-center">
+            <h1 class="mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-lightPrimary dark:text-darkPrimary">404</h1>
+            <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Something's missing.</p>
+            <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">Sorry, we can't find that page. You'll find lots to explore on the home page. </p>
+            <div class="flex justify-center">
+             <LinkButton  to="/">Go back home</LinkButton>
+            </div>
+        </div>   
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+
+import { LinkButton } from '@/afcl';
+
+</script>

package/dist/spa/src/views/ResourceParent.vue

@@ -32,7 +32,6 @@ const limitHeightToPage = computed(() => {
     return true;
   }
   const listPageInjects = coreStore.resource.options.pageInjections.list;
-  console.log('asdcoreStore.resource', JSON.stringify(listPageInjects, null, 2))
   
   for (const pi of [listPageInjects.beforeBreadcrumbs, listPageInjects.afterBreadcrumbs, listPageInjects.bottom]) {
     if (pi) {

package/dist/spa/src/views/ShowView.vue

@@ -158,6 +158,7 @@ onMounted(async () => {
   await coreStore.fetchRecord({
     resourceId: route.params.resourceId, 
     primaryKey: route.params.primaryKey,
+    source: 'show',
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
   loading.value = false;

package/dist/spa/src/websocket.ts

@@ -0,0 +1,84 @@
+
+const subscriptions: { [topic: string]: ((data: any) => void)[] } = {};
+const state: {
+  status: 'connecting' | 'connected' | 'disconnected';
+  ws: WebSocket | null;
+} = {
+  status: 'connecting',
+  ws: null
+};
+
+function doPhysicalSubscribe(topic: string) {
+  state.ws!.send(JSON.stringify({ type: 'subscribe', topic }));
+}
+
+function doPhysicalUnsubscribe(topic: string) {
+  state.ws!.send(JSON.stringify({ type: 'unsubscribe', topic }));
+}
+
+
+async function init() {
+  state.ws = new WebSocket(`${
+    window.location.protocol === 'http:' ? 'ws' : 'wss'
+  }://${window.location.host}/afws`);
+  state.status = 'connecting';
+  state.ws.addEventListener('open', () => {
+    console.log('connected');
+    state.status = 'connected';
+    Object.keys(subscriptions).forEach((topic) => {
+      doPhysicalSubscribe(topic);
+    });
+  });
+  state.ws.addEventListener('message', (event) => {
+    const data = event.data.toString();
+    if (data === 'pong') {
+      return;
+    }
+    const message = JSON.parse(data);
+    if (message.type === 'message') {
+      const topic = message.topic;
+      const data = message.data;
+      if (subscriptions[topic]) {
+        for (const callback of subscriptions[topic]) {
+          callback(data);
+        }
+      }
+    }
+  });
+  state.ws.addEventListener('close', () => {
+    console.log('disconnected');
+    state.status = 'disconnected';
+  });
+}
+
+setInterval(() => {
+  if (state.status === 'connected') {
+    state.ws!.send('ping');
+  }
+}, 10_000);
+
+try {
+  init();
+} catch (e) {
+  console.error('Failed to initialize websocket', e);
+}
+
+export default {
+  subscribe(topic: string, callback: (data: any) => void): void {
+    if (!subscriptions[topic]) {
+      subscriptions[topic] = [];
+    }
+    subscriptions[topic].push(callback);
+    if (state.status === 'connected') {
+      doPhysicalSubscribe(topic);
+    }
+  },
+
+  unsubscribe(topic: string): void {
+    delete subscriptions[topic];
+    if (state.status === 'connected') {
+      doPhysicalUnsubscribe(topic);
+    }
+  }
+  
+}

package/dist/spa/vite.config.ts

@@ -2,48 +2,30 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { clear, error } from 'node:console';
+import portfinder from 'portfinder';
 
-
-const customLogger = {
-  info(msg: string) {
-    // Filter out the lines containing '➜ Local:' or '➜ Network:'
-    if (!msg.includes('➜')) {
-      console.log(msg);
-    }
-  },
-  warnOnce(msg: string) {
-    console.warn('warn once', msg);
-    if (!this.hasWarned) {
-      this.hasWarned = true;
-    }
-  },
-  warn(msg: string) {
-    console.warn(msg);
-  },
-  error(msg: string) {
-    console.error(msg);
-  },
-  clear() {
-    console.clear();
-  },
-  clearScreen() {
-    console.clear();
-  },
-  hasWarned: false,
-  hasErrorLogged: (error: any): boolean => {
-    return false;
-  }
+/**
+ * Find the next available port after a specified port.
+ * @param {number} startPort - The starting port to check.
+ * @returns {Promise<number>} - A promise that resolves with the next available port.
+ */
+async function getNextAvailablePort(startPort) {
+  return await portfinder.getPortPromise({ port: startPort });
 };
 
+const appPort = await getNextAvailablePort(5173);
+const hmrPort = await getNextAvailablePort(5273);
+console.log(`SPA port: ${appPort}. HMR port: ${hmrPort}`);
 // https://vitejs.dev/config/
 export default defineConfig({
   base: process.env.VITE_ADMINFORTH_PUBLIC_PATH || '/',
   server: {
-    port: 5173,
-    strictPort: true, // better predictability
+    port: appPort,
+    hmr: {
+      path: '/adminforth-dev-server-ws', // Set your custom WebSocket path here
+      port: hmrPort,
+    },
   },
-  customLogger,
   plugins: [
     vue(),
   ],