adminforth 2.4.0-next.4 → 2.4.0-next.41

package/dist/spa/src/components/AcceptModal.vue

@@ -8,7 +8,7 @@ const modalStore = useModalStore();
   <Teleport to="body">
     <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-full max-h-full">
         <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
+            <div class="afcl-confirmation-container relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black">
                 <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
                     <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
@@ -19,11 +19,11 @@ const modalStore = useModalStore();
                     <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                     </svg>
-                    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
-                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                    <h3 class="afcl-confirmation-title mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
+                    <button @click="()=>{ modalStore.onAcceptFunction(true);modalStore.togleModal()}" type="button" class="afcl-confirmation-accept-button text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
                         {{ modalStore?.modalContent?.acceptText }}
                     </button>
-                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
+                    <button @click="()=>{modalStore.onAcceptFunction(false);modalStore.togleModal()}"  type="button" class="afcl-confirmation-cancel-button py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
                 </div>
             </div>
         </div>

package/dist/spa/src/components/Filters.vue

@@ -2,7 +2,7 @@
   <!-- drawer component -->
   <div id="drawer-navigation" 
   
-      class="fixed  right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-gray-900"
+      class="af-filters-sidebar fixed right-0 z-50 p-4 overflow-y-auto transition-transform translate-x-full bg-white w-80 dark:bg-gray-800 shadow-xl dark:shadow-gray-900"
 
       :class="show ? 'top-0 transform-none' : ''"
       tabindex="-1" aria-labelledby="drawer-navigation-label"

package/dist/spa/src/components/ResourceListTable.vue

@@ -128,7 +128,7 @@
                   }"
 
                 >
-                  <IconEyeSolid class="w-5 h-5 me-2"/>
+                  <IconEyeSolid class="af-show-icon w-5 h-5 me-2"/>
                 </RouterLink>
 
                 <template v-slot:tooltip>
@@ -147,7 +147,7 @@
                     }
                   }"
                 >
-                  <IconPenSolid class="w-5 h-5 me-2"/>
+                  <IconPenSolid class="af-edit-icon w-5 h-5 me-2"/>
                 </RouterLink>
                 <template v-slot:tooltip>
                   {{ $t('Edit item') }}
@@ -159,7 +159,7 @@
                   v-if="resource.options?.allowedActions.delete"
                   @click="deleteRecord(row)"
                 >
-                  <IconTrashBinSolid class="w-5 h-5 me-2"/>
+                  <IconTrashBinSolid class="af-delete-icon w-5 h-5 me-2"/>
                 </button>
 
                 <template v-slot:tooltip>
@@ -199,14 +199,14 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3"
-    v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
-  >
+  <div class="af-pagination-container flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="inline-flex ">
+    <div class="af-pagination-buttons-container inline-flex "
+      v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
+    >
         <!-- Buttons -->
         <button
-          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-prev-button flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page--; pageInput = page.toString();" :disabled="page <= 1">
           <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
               viewBox="0 0 14 10">
@@ -218,14 +218,14 @@
           </span>
         </button>
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-first-page-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page = 1; pageInput = page.toString();" :disabled="page <= 1">
           <!-- <IconChevronDoubleLeftOutline class="w-4 h-4" /> -->
           1
         </button>
         <div
           contenteditable="true" 
-          class="min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
+          class="af-pagination-input min-w-10 outline-none inline-block w-auto min-w-10 py-1.5 px-3 text-sm text-center text-gray-700 border border-gray-300 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800 z-10"
           @keydown="onPageKeydown($event)"
           @input="onPageInput($event)"
           @blur="validatePageInput()"
@@ -234,14 +234,14 @@
         </div>
 
         <button
-          class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-last-page-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0  border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page = totalPages; pageInput = page.toString();" :disabled="page >= totalPages">
           {{ totalPages }}
 
           <!-- <IconChevronDoubleRightOutline class="w-4 h-4" /> -->
         </button>
         <button
-          class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+          class="af-pagination-next-button  flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-l-0 rounded-e border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
           @click="page++; pageInput = page.toString();" :disabled="page >= totalPages">
           <span class="hidden sm:inline">{{ $t('Next') }}</span>
           <svg class="w-3.5 h-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@@ -257,7 +257,7 @@
         <span v-if="((page || 1) - 1) * pageSize + 1 > totalRows">{{ $t('Wrong Page') }} </span>
         <template v-else>
           
-          <span class="hidden sm:inline">
+          <span class="af-pagination-info hidden sm:inline">
             <i18n-t keypath="Showing {from} to {to} of {total} Entries" tag="p"  >
               <template v-slot:from>
                 <strong>{{ from }}</strong>

package/dist/spa/src/components/ResourceListTableVirtual.vue

@@ -216,11 +216,11 @@
   <!-- pagination
   totalRows in v-if is used to not hide page input during loading when user puts cursor into it and edit directly (rows gets null there during edit)
   -->
-  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3"
-    v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
-  >
+  <div class="flex flex-row items-center mt-4 xs:flex-row xs:justify-between xs:items-center gap-3">
     
-    <div class="inline-flex ">
+    <div class="inline-flex "
+      v-if="(rows || totalRows) && totalRows >= pageSize && totalRows > 0"
+    >
         <!-- Buttons -->
         <button
           class="flex items-center py-1 px-3 gap-1 text-sm font-medium text-gray-900 focus:outline-none bg-white border-r-0 rounded-s border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"

package/dist/spa/src/components/ValueRenderer.vue

@@ -28,7 +28,7 @@
         
     <span v-else-if="column.type === 'boolean'">
       <span v-if="record[column.name] === true" class="bg-green-100 whitespace-nowrap text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">{{ $t('Yes') }}</span>
-      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800gg text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
+      <span v-else-if="record[column.name] === false" class="bg-red-100 whitespace-nowrap text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">{{ $t('No') }}</span>
       <span v-else class="bg-gray-100 whitespace-nowrap text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-400 border border-gray-400">{{ $t('Unset') }}</span>
     </span>
     <span

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

@@ -99,7 +99,7 @@ export interface IExpressHttpServer extends IHttpServer {
    *  console.log('User is authorized', req.adminUser);
    *  res.json(\{ message: 'Hello World' \});
    * \}));
-   * ``
+   * ```
    * 
    */
   authorize(callable: Function): void;
@@ -747,6 +747,7 @@ interface AdminForthInputConfigCustomization {
    */
   loginPageInjections?: {
     underInputs?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
+    panelHeader?: AdminForthComponentDeclaration | Array<AdminForthComponentDeclaration>,
   }
 
   /**
@@ -1054,6 +1055,7 @@ export interface AdminForthConfigCustomization extends Omit<AdminForthInputConfi
 
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclarationFull>,
+    panelHeader: Array<AdminForthComponentDeclarationFull>,
   },
 
   globalInjections: {

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

@@ -1060,6 +1060,7 @@ export interface AdminForthConfigForFrontend {
   loginPromptHTML?: string,
   loginPageInjections: {
     underInputs: Array<AdminForthComponentDeclaration>,
+    panelHeader: Array<AdminForthComponentDeclaration>,
   },
   rememberMeDays: number,
   showBrandNameInSidebar: boolean,

package/dist/spa/src/types/adapters/CompletionAdapter.ts

@@ -0,0 +1,25 @@
+export interface CompletionAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): void;
+
+  /**
+   * This method should return a text completion based on the provided content and stop sequence.
+   * @param content - The input text to complete
+   * @param stop - An array of stop sequences to indicate where to stop the completion
+   * @param maxTokens - The maximum number of tokens to generate
+   * @returns A promise that resolves to an object containing the completed text and other metadata
+   */
+  complete(
+    content: string,
+    stop: string[],
+    maxTokens: number,
+  ): Promise<{
+    content?: string;
+    finishReason?: string;
+    error?: string;
+  }>;
+}

package/dist/spa/src/types/adapters/EmailAdapter.ts

@@ -0,0 +1,29 @@
+interface EmailAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): Promise<void>;
+
+  /**
+   * This method should send an email using the adapter
+   * @param from - The sender's email address
+   * @param to - The recipient's email address
+   * @param text - The plain text version of the email
+   * @param html - The HTML version of the email
+   * @param subject - The subject of the email
+   */
+  sendEmail(
+    from: string,
+    to: string,
+    text: string,
+    html: string,
+    subject: string
+  ): Promise<{
+    error?: string;
+    ok?: boolean;
+  }>;
+}
+
+export { EmailAdapter };

package/dist/spa/src/types/adapters/ImageGenerationAdapter.ts

@@ -0,0 +1,50 @@
+export interface ImageGenerationAdapter {
+
+  /**
+   * This method is called to validate the configuration of the adapter
+   * and should throw a clear user-readbale error if the configuration is invalid.
+   */
+  validate(): void;
+
+  /**
+   * Return max number of images which model can generate in one request
+   */
+  outputImagesMaxCountSupported(): number;
+
+  /**
+   * Return the list of supported dimensions in format ["100x500", "200x200"]
+   */
+  outputDimensionsSupported(): string[];
+
+  /**
+   * Input file extension supported
+   */
+  inputFileExtensionSupported(): string[];
+
+  /**
+   * This method should generate an image based on the provided prompt and input files.
+   * @param prompt - The prompt to generate the image
+   * @param inputFiles - An array of input file paths (optional)
+   * @param n - The number of images to generate (default is 1)
+   * @param size - The size of the generated image (default is the lowest dimension supported)
+   * @returns A promise that resolves to an object containing the generated image URLs and any error message
+   */
+  generate({
+    prompt, 
+    inputFiles,
+    n,
+    size,
+  }: {
+    prompt: string,
+    inputFiles: string[],
+
+    // default = lowest dimension supported 
+    size?: string,
+
+    // one by default
+    n?: number
+  }): Promise<{
+    imageURLs?: string[];
+    error?: string;
+  }>;
+}

package/dist/spa/src/types/adapters/OAuth2Adapter.ts

@@ -0,0 +1,34 @@
+
+/**
+ * This interface is used to implement OAuth2 authentication adapters.
+ */
+export interface OAuth2Adapter {
+  /**
+   * This method should return navigatable URL to the OAuth2 provider authentication page.
+   */
+  getAuthUrl(): string;
+
+  /**
+   * This method should return the token from the OAuth2 provider using the provided code and redirect URI.
+   * @param code - The authorization code received from the OAuth2 provider
+   * @param redirect_uri - The redirect URI used in the authentication request
+   * @returns A promise that resolves to an object containing the email address of the authenticated user
+   */
+  getTokenFromCode(code: string, redirect_uri: string): Promise<{ email: string }>;
+
+  /**
+   * This method should return text (content) of SVG icon which will be used in the UI.
+   * Use official SVG icons with simplest possible conent, omit icons which have base64 encoded raster images inside.
+   */
+  getIcon(): string;
+
+  /**
+   * This method should return the text to be displayed on the button in the UI
+   */
+  getButtonText?(): string;
+
+  /**
+   * This method should return the name of the adapter
+   */
+  getName?(): string;
+}

package/dist/spa/src/types/adapters/StorageAdapter.ts

@@ -0,0 +1,73 @@
+
+/**
+ * Each storage adapter should support two ways of storing files:
+ * - publically (public URL) - the file can be accessed by anyone by HTTP GET / HEAD request with plain URL
+ * - privately (presigned URL) - the file can be accessed by anyone by HTTP GET / HEAD request only with presigned URLs, limited by expiration time
+ * 
+ */
+export interface StorageAdapter {
+  /**
+   * This method should return the presigned URL for the given key capable of upload (adapter user will call PUT multipart form data to this URL within expiresIn seconds after link generation).
+   * By default file which will be uploaded on PUT should be marked for deletion. So if during 24h it is not marked for not deletion, it adapter should delete it forever.
+   * The PUT method should fail if the file already exists.
+   * 
+   * Adapter user will always pass next parameters to the method:
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   * @param expiresIn - The expiration time in seconds for the presigned URL
+   * @param contentType - The content type of the file to be uploaded, e.g. "image/png"
+   * 
+   * @returns A promise that resolves to an object containing the upload URL and any extra parameters which should be sent with PUT multipart form data
+   */
+  getUploadSignedUrl(key: string, contentType: string, expiresIn?: number): Promise<{
+    uploadUrl: string;
+    uploadExtraParams?: Record<string, string>;
+  }>;
+
+  /**
+   * This method should return the URL for the given key capable of download (200 GET request with response body or 200 HEAD request without response body).
+   * If adapter configured to store objects publically, this method should return the public URL of the file.
+   * If adapter configured to no allow public storing of images, this method should return the presigned URL for the file.
+   * 
+   * @param key - The key of the file to be downloaded e.g. "uploads/file.txt"
+   * @param expiresIn - The expiration time in seconds for the presigned URL
+   */
+  getDownloadUrl(key: string, expiresIn?: number): Promise<string>;
+
+  /**
+   * This method should mark the file for deletion.
+   * If file is marked for delation and exists more then 24h (since creation date) it should be deleted.
+   * This method should work even if the file does not exist yet (e.g. only presigned URL was generated).
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   */
+  markKeyForDeletation(key: string): Promise<void>;
+
+
+  /**
+   * This method should mark the file to not be deleted.
+   * This method should be used to cancel the deletion of the file if it was marked for deletion.
+   * @param key - The key of the file to be uploaded e.g. "uploads/file.txt"
+   */
+  markKeyForNotDeletation(key: string): Promise<void>;
+
+
+  /**
+   * This method can start needed schedullers, cron jobs, etc. to clean up the storage.
+   * @param adapterUserUniqueRepresentation - The unique representation of the plugin instance which 
+   * wil use this adapter. Might be handy if you need to distinguish between different instances of the same adapter.
+   */
+  setupLifecycle(adapterUserUniqueRepresentation: string): Promise<void>;
+
+  /**
+   * If adapter is configured to publically, this method should return true.
+   */
+  objectCanBeAccesedPublicly(): Promise<boolean>;
+
+  /**
+   * This method should return the key as a data URL (base64 encoded string).
+   * @param key - The key of the file to be converted to a data URL
+   * @returns A promise that resolves to a string containing the data URL
+   */
+  getKeyAsDataURL(key: string): Promise<string>;
+}
+
+  

package/dist/spa/src/types/adapters/index.ts

@@ -0,0 +1,5 @@
+export type { EmailAdapter } from './EmailAdapter.js';
+export type { CompletionAdapter } from './CompletionAdapter.js';
+export type { ImageGenerationAdapter } from './ImageGenerationAdapter.js';
+export type { OAuth2Adapter } from './OAuth2Adapter.js';
+export type { StorageAdapter } from './StorageAdapter.js';

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

@@ -13,14 +13,14 @@
     <BreadcrumbsWithButtons>
       <!-- save and cancle -->
       <button @click="$router.back()"
-        class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="af-cancel-button flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         {{ $t('Cancel') }}
       </button>
 
       <button  
         @click="saveRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
+        class="af-save-button flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 disabled:opacity-50"
         :disabled="saving || (validating && !isValid)"
       > 
         <svg v-if="saving"

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

@@ -74,14 +74,14 @@
 
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="af-create-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         {{ $t('Create') }}
       </RouterLink>
 
       <button
-        class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="af-filter-button flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
         @click="()=>{filtersShow = !filtersShow}"
         v-if="coreStore.resource?.options?.allowedActions?.filter"
       >

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

@@ -23,23 +23,33 @@
 
     <!-- Main modal -->
     <div id="authentication-modal" tabindex="-1" 
-      class="overflow-y-auto flex flex-grow
+      class="af-login-modal overflow-y-auto flex flex-grow
       overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-h-full max-w-[400px]">
             <!-- Modal content -->
-            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
+            <div class="af-login-modal-content relative bg-white rounded-lg shadow dark:bg-gray-700 dark:shadow-black" >
                 <!-- Modal header -->
-                <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
-                    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+                <div class="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+
+                    <template v-if="coreStore?.config?.loginPageInjections?.panelHeader.length > 0">
+                      <component 
+                        v-for="(c, index) in coreStore?.config?.loginPageInjections?.panelHeader || []"
+                        :key="index"
+                        :is="getCustomComponent(c)"
+                        :meta="c.meta"
+                      />
+                    </template>
+                    <h3 v-else class="text-xl font-semibold text-gray-900 dark:text-white">
                       {{ $t('Sign in to') }} {{ coreStore.config?.brandName }}
                     </h3>
                 </div>
                 <!-- Modal body -->
-                <div class="p-4 md:p-5">
+                <div class="af-login-modal-body p-4 md:p-5">
                     <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">{{ $t('Your') }} {{ coreStore.config?.usernameFieldName?.toLowerCase() }}</label>
-                            <input 
+                            <Input 
+                              v-model="username"
                               autocomplete="username"  
                               type="username" 
                               name="username" 
@@ -47,20 +57,25 @@
                               ref="usernameInput"
                               oninput="setCustomValidity('')"
                               @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 />
+                              class="w-full"
+                              placeholder="name@company.com" required />
                         </div>
-                        <div class="relative">
+                        <div class="">
                             <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $t('Your password') }}</label>
-                            <input 
+                            <Input 
+                              v-model="password"
                               ref="passwordInput"
                               autocomplete="current-password"
                               oninput="setCustomValidity('')"
                               @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">
-                              <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
-                              <IconEyeSlashSolid class="w-5 h-5" v-else />
-                            </button>
+                              :type="!showPw ? 'password': 'text'" name="password" id="password" placeholder="••••••••" class="w-full" required>
+                              <template #rightIcon>
+                                <button type="button" @click="showPw = !showPw" class="text-gray-400 dark:text-gray-300">
+                                  <IconEyeSolid class="w-5 h-5" v-if="!showPw" />
+                                  <IconEyeSlashSolid class="w-5 h-5" v-else />
+                                </button>
+                              </template>
+                            </Input>
                         </div>
 
                         <div v-if="coreStore.config.rememberMeDays" 
@@ -79,7 +94,7 @@
                           :meta="c.meta"
                         />
 
-                        <div v-if="error" class="flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
+                        <div v-if="error" class="af-login-modal-error flex items-center p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                           <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                             <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
                           </svg>
@@ -121,7 +136,7 @@ import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
 import { callAdminForthApi, loadFile } from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
-import { Button, Checkbox } from '@/afcl';
+import { Button, Checkbox, Input } from '@/afcl';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -129,6 +144,8 @@ const { t } = useI18n();
 const passwordInput = ref(null);
 const usernameInput = ref(null);
 const rememberMeValue= ref(false);
+const username = ref('');
+const password = ref('');
 
 const route = useRoute();
 const router = useRouter();
@@ -159,9 +176,9 @@ onBeforeMount(() => {
 
 onMounted(async () => {
     if (coreStore.config?.demoCredentials) {
-      const [username, password] = coreStore.config.demoCredentials.split(':');
-      usernameInput.value.value = username;
-      passwordInput.value.value = password;
+      const [demoUsername, demoPassword] = coreStore.config.demoCredentials.split(':');
+      username.value = demoUsername;
+      password.value = demoPassword;
     }
     usernameInput.value.focus();
 });
@@ -169,14 +186,11 @@ onMounted(async () => {
 
 async function login() {
   
-  const username = usernameInput.value.value;
-  const password = passwordInput.value.value;
-
-  if (!username) {
+  if (!username.value) {
     usernameInput.value.setCustomValidity(t('Please fill out this field.'));
     return;
   }
-  if (!password) {
+  if (!password.value) {
     passwordInput.value.setCustomValidity(t('Please fill out this field.'));
     return;
   }
@@ -189,8 +203,8 @@ async function login() {
     path: '/login',
     method: 'POST',
     body: {
-      username,
-      password,
+      username: username.value,
+      password: password.value,
       rememberMe: rememberMeValue.value,
     }
   });

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

@@ -28,21 +28,21 @@
       </template>
       <RouterLink v-if="coreStore.resource?.options?.allowedActions?.create"
         :to="{ name: 'resource-create', params: { resourceId: $route.params.resourceId } }"
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        class="af-add-new-button flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
       >
         <IconPlusOutline class="w-4 h-4 me-2"/>
         {{ $t('Add new') }}
       </RouterLink>
 
       <RouterLink v-if="coreStore?.resourceOptions?.allowedActions?.edit" :to="{ name: 'resource-edit', params: { resourceId: $route.params.resourceId, primaryKey: $route.params.primaryKey } }" 
-        class="flex items-center py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center af-edit-button py-1 px-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-default border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <IconPenSolid class="w-4 h-4" />
         {{ $t('Edit') }}
       </RouterLink>
 
       <button v-if="coreStore?.resourceOptions?.allowedActions?.delete"  @click="deleteRecord"
-        class="flex items-center py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+        class="flex items-center af-delete-button py-1 px-3 text-sm font-medium rounded-default text-red-600 focus:outline-none bg-white  border border-gray-300 hover:bg-gray-100 hover:text-red-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-red-500 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       >
         <IconTrashBinSolid class="w-4 h-4" />
         {{ $t('Delete') }}