adminforth 1.3.13 → 1.3.15

package/dataConnectors/baseConnector.ts

@@ -57,9 +57,24 @@ export default class AdminForthBaseConnector implements IAdminForthDataSourceCon
     throw new Error('Method not implemented.');
   }
 
+  async checkUnique(resource: AdminForthResource, column: AdminForthResourceColumn, value: any) {
+    process.env.HEAVY_DEBUG && console.log('☝️🪲🪲🪲🪲 checkUnique|||', column, value);
+    const existingRecord = await this.getData({
+      resource,
+      filters: [{ field: column.name, operator: AdminForthFilterOperators.EQ, value }],
+      limit: 1,
+      sort: [],
+      offset: 0,
+      getTotals: false
+    });
+    process.env.HEAVY_DEBUG && console.log('☝️🪲🪲🪲🪲 existingRecord|||', existingRecord);
+
+    return existingRecord.data.length > 0;
+  }
+
   async createRecord({ resource, record, adminUser }: { 
     resource: AdminForthResource; record: any; adminUser: any;
-  }): Promise<any> {
+  }): Promise<{ error?: string; ok: boolean; createdRecord?: any; }> {
     // transform value using setFieldValue and call createRecordOriginalValues
     const filledRecord = {...record};
     const recordWithOriginalValues = {...record};
@@ -75,10 +90,33 @@ export default class AdminForthBaseConnector implements IAdminForthDataSourceCon
       }
       recordWithOriginalValues[col.name] = this.setFieldValue(col, filledRecord[col.name]);
     }
+
+    
+    let error: string | null = null;
+    await Promise.all(
+      resource.dataSourceColumns.map(async (col) => {
+
+        if (col.isUnique && !col.virtual && !error) {
+
+          const exists = await this.checkUnique(resource, col, recordWithOriginalValues[col.name]);
+          if (exists) {
+            error = `Record with ${col.name} ${recordWithOriginalValues[col.name]} already exists`;
+          }
+        }
+      })
+    );
+    process.env.HEAVY_DEBUG && console.log('🪲🪲🪲🪲 error', error);
+    if (error) {
+      return { error, ok: false };
+    }
+
     process.env.HEAVY_DEBUG && console.log('🪲🪲🪲🪲 creating record', recordWithOriginalValues);
     await this.createRecordOriginalValues({ resource, record: recordWithOriginalValues });
 
-    return recordWithOriginalValues;
+    return {
+      ok: true,
+      createdRecord: recordWithOriginalValues,
+    }
   }
 
   updateRecord({ resource, recordId, newValues }: { resource: AdminForthResource; recordId: string; newValues: any; }): Promise<void> {

package/dist/dataConnectors/baseConnector.js

@@ -50,6 +50,21 @@ export default class AdminForthBaseConnector {
     createRecordOriginalValues({ resource, record }) {
         throw new Error('Method not implemented.');
     }
+    checkUnique(resource, column, value) {
+        return __awaiter(this, void 0, void 0, function* () {
+            process.env.HEAVY_DEBUG && console.log('☝️🪲🪲🪲🪲 checkUnique|||', column, value);
+            const existingRecord = yield this.getData({
+                resource,
+                filters: [{ field: column.name, operator: AdminForthFilterOperators.EQ, value }],
+                limit: 1,
+                sort: [],
+                offset: 0,
+                getTotals: false
+            });
+            process.env.HEAVY_DEBUG && console.log('☝️🪲🪲🪲🪲 existingRecord|||', existingRecord);
+            return existingRecord.data.length > 0;
+        });
+    }
     createRecord(_a) {
         return __awaiter(this, arguments, void 0, function* ({ resource, record, adminUser }) {
             // transform value using setFieldValue and call createRecordOriginalValues
@@ -66,9 +81,25 @@ export default class AdminForthBaseConnector {
                 }
                 recordWithOriginalValues[col.name] = this.setFieldValue(col, filledRecord[col.name]);
             }
+            let error = null;
+            yield Promise.all(resource.dataSourceColumns.map((col) => __awaiter(this, void 0, void 0, function* () {
+                if (col.isUnique && !col.virtual && !error) {
+                    const exists = yield this.checkUnique(resource, col, recordWithOriginalValues[col.name]);
+                    if (exists) {
+                        error = `Record with ${col.name} ${recordWithOriginalValues[col.name]} already exists`;
+                    }
+                }
+            })));
+            process.env.HEAVY_DEBUG && console.log('🪲🪲🪲🪲 error', error);
+            if (error) {
+                return { error, ok: false };
+            }
             process.env.HEAVY_DEBUG && console.log('🪲🪲🪲🪲 creating record', recordWithOriginalValues);
             yield this.createRecordOriginalValues({ resource, record: recordWithOriginalValues });
-            return recordWithOriginalValues;
+            return {
+                ok: true,
+                createdRecord: recordWithOriginalValues,
+            };
         });
     }
     updateRecord({ resource, recordId, newValues }) {

package/dist/index.js

@@ -159,22 +159,11 @@ class AdminForth {
         return __awaiter(this, arguments, void 0, function* ({ resource, record, adminUser }) {
             var _c, _d, _e, _f, _g;
             for (const column of resource.columns) {
+                // TODO: assuming specifity for AdminForthResourcePages.create better to move it to api for this button
                 if (((_c = column.required) === null || _c === void 0 ? void 0 : _c.create) &&
                     record[column.name] === undefined &&
                     column.showIn.includes(AdminForthResourcePages.create)) {
-                    return { error: `Column '${column.name}' is required` };
-                }
-                if (column.isUnique) {
-                    const existingRecord = yield this.connectors[resource.dataSource].getData({
-                        resource,
-                        filters: [{ field: column.name, operator: AdminForthFilterOperators.EQ, value: record[column.name] }],
-                        limit: 1,
-                        sort: [],
-                        offset: 0
-                    });
-                    if (existingRecord.data.length > 0) {
-                        return { error: `Record with ${column.name} ${record[column.name]} already exists` };
-                    }
+                    return { error: `Column '${column.name}' is required`, ok: false };
                 }
             }
             // execute hook if needed
@@ -184,7 +173,7 @@ class AdminForth {
                     throw new Error(`Hook beforeSave must return object with {ok: true} or { error: 'Error' } `);
                 }
                 if (resp.error) {
-                    return { error: resp.error };
+                    return { error: resp.error, ok: false };
                 }
             }
             // remove virtual columns from record
@@ -195,20 +184,28 @@ class AdminForth {
             }
             const connector = this.connectors[resource.dataSource];
             process.env.HEAVY_DEBUG && console.log('🪲🪲🪲🪲 creating record createResourceRecord', record);
-            yield connector.createRecord({ resource, record, adminUser });
+            const { ok, error, createdRecord } = yield connector.createRecord({ resource, record, adminUser });
+            if (!ok) {
+                return { ok, error };
+            }
             const primaryKey = record[resource.columns.find((col) => col.primaryKey).name];
             // execute hook if needed
             for (const hook of listify((_g = (_f = resource.hooks) === null || _f === void 0 ? void 0 : _f.create) === null || _g === void 0 ? void 0 : _g.afterSave)) {
                 console.log('Hook afterSave', hook);
-                const resp = yield hook({ recordId: primaryKey, resource, record, adminUser });
+                const resp = yield hook({
+                    recordId: primaryKey,
+                    resource,
+                    record: createdRecord,
+                    adminUser
+                });
                 if (!resp || (!resp.ok && !resp.error)) {
                     throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
                 }
                 if (resp.error) {
-                    return { error: resp.error };
+                    return { error: resp.error, ok: false };
                 }
             }
-            return { ok: true };
+            return { ok, error, createdRecord };
         });
     }
     resource(resourceId) {

package/dist/modules/configValidator.js

@@ -122,6 +122,9 @@ export default class ConfigValidator {
         if (this.config.customization.brandLogo) {
             errors.push(...this.checkCustomFileExists(this.config.customization.brandLogo));
         }
+        if (this.config.customization.showBrandNameInSidebar === undefined) {
+            this.config.customization.showBrandNameInSidebar = true;
+        }
         if (this.config.customization.favicon) {
             errors.push(...this.checkCustomFileExists(this.config.customization.favicon));
         }

package/dist/modules/operationalResource.js

@@ -58,9 +58,14 @@ export default class OperationalResource {
             });
         });
     }
-    create(record) {
+    create(recordValues) {
         return __awaiter(this, void 0, void 0, function* () {
-            return yield this.dataConnector.createRecord({ resource: this.resourceConfig, record, adminUser: null });
+            const { ok, createdRecord, error } = yield this.dataConnector.createRecord({
+                resource: this.resourceConfig,
+                record: recordValues,
+                adminUser: null
+            });
+            return { ok, createdRecord, error };
         });
     }
     update(primaryKey, record) {

package/dist/modules/restApi.js

@@ -135,6 +135,7 @@ export default class AdminForthRestAPI {
                     brandName: this.adminforth.config.customization.brandName,
                     usernameFieldName: usernameColumn.label,
                     loginBackgroundImage: this.adminforth.config.auth.loginBackgroundImage,
+                    loginBackgroundPosition: this.adminforth.config.auth.loginBackgroundPosition,
                     title: (_j = this.adminforth.config.customization) === null || _j === void 0 ? void 0 : _j.title,
                     demoCredentials: this.adminforth.config.auth.demoCredentials,
                     loginPromptHTML: this.adminforth.config.auth.loginPromptHTML,
@@ -208,6 +209,7 @@ export default class AdminForthRestAPI {
                     menu: newMenu,
                     config: {
                         brandName: this.adminforth.config.customization.brandName,
+                        showBrandNameInSidebar: this.adminforth.config.customization.showBrandNameInSidebar,
                         brandLogo: this.adminforth.config.customization.brandLogo,
                         datesFormat: this.adminforth.config.customization.datesFormat,
                         deleteConfirmation: this.adminforth.config.deleteConfirmation,
@@ -317,6 +319,7 @@ export default class AdminForthRestAPI {
                     offset,
                     filters,
                     sort,
+                    getTotals: true,
                 });
                 // for foreign keys, add references
                 yield Promise.all(resource.columns.filter((col) => col.foreignResource).map((col) => __awaiter(this, void 0, void 0, function* () {
@@ -486,11 +489,12 @@ export default class AdminForthRestAPI {
                 const { record } = body;
                 const response = yield this.adminforth.createResourceRecord({ resource, record, adminUser });
                 if (response.error) {
-                    return { error: response.error };
+                    return { error: response.error, ok: false };
                 }
                 const connector = this.adminforth.connectors[resource.dataSource];
                 return {
-                    newRecordId: record[connector.getPrimaryKey(resource)]
+                    newRecordId: response.createdRecord[connector.getPrimaryKey(resource)],
+                    ok: true
                 };
             })
         });

package/index.ts

@@ -23,6 +23,7 @@ import ConfigValidator from './modules/configValidator.js';
 import AdminForthRestAPI, { interpretResource } from './modules/restApi.js';
 import ClickhouseConnector from './dataConnectors/clickhouse.js';
 import OperationalResource from './modules/operationalResource.js';
+import { error } from 'console';
 
 // exports
 export * from './types/AdminForthConfig.js'; 
@@ -198,28 +199,20 @@ class AdminForth implements IAdminForth {
     return users.data[0] || null;
   }
 
-  async createResourceRecord({ resource, record, adminUser }: { resource: AdminForthResource, record: any, adminUser: AdminUser }) {
+  async createResourceRecord(
+    { resource, record, adminUser }: 
+    { resource: AdminForthResource, record: any, adminUser: AdminUser }
+  ): Promise<{ ok: boolean, error?: string, createdRecord?: any }> {
+    
     for (const column of resource.columns) {
-        if (
-            (column.required as {create?: boolean, edit?: boolean}) ?.create &&
-            record[column.name] === undefined &&
-            column.showIn.includes(AdminForthResourcePages.create)
-        ) {
-            return { error: `Column '${column.name}' is required` };
-        }
-
-        if (column.isUnique) {
-            const existingRecord = await this.connectors[resource.dataSource].getData({
-                resource,
-                filters: [{ field: column.name, operator: AdminForthFilterOperators.EQ, value: record[column.name] }],
-                limit: 1,
-                sort: [],
-                offset: 0
-            });
-            if (existingRecord.data.length > 0) {
-                return { error: `Record with ${column.name} ${record[column.name]} already exists` };
-            }
-        }
+      // TODO: assuming specifity for AdminForthResourcePages.create better to move it to api for this button
+      if (
+          (column.required as {create?: boolean, edit?: boolean}) ?.create &&
+          record[column.name] === undefined &&
+          column.showIn.includes(AdminForthResourcePages.create)
+      ) {
+          return { error: `Column '${column.name}' is required`, ok: false };
+      }
     }
 
     // execute hook if needed
@@ -230,7 +223,7 @@ class AdminForth implements IAdminForth {
       }
 
       if (resp.error) {
-        return { error: resp.error };
+        return { error: resp.error, ok: false };
       }
     }
 
@@ -242,24 +235,33 @@ class AdminForth implements IAdminForth {
     }
     const connector = this.connectors[resource.dataSource];
     process.env.HEAVY_DEBUG && console.log('🪲🪲🪲🪲 creating record createResourceRecord', record);
-    await connector.createRecord({ resource, record, adminUser });
-
+    const { ok, error, createdRecord } = await connector.createRecord({ resource, record, adminUser });
+    if (!ok) {
+      return { ok, error };
+    }
+    
     const primaryKey = record[resource.columns.find((col) => col.primaryKey).name];
 
     // execute hook if needed
     for (const hook of listify(resource.hooks?.create?.afterSave as AfterSaveFunction[])) {
       console.log('Hook afterSave', hook);
-      const resp = await hook({ recordId: primaryKey, resource, record, adminUser });
+      const resp = await hook({ 
+        recordId: primaryKey, 
+        resource, 
+        record: createdRecord, 
+        adminUser
+      });
+
       if (!resp || (!resp.ok && !resp.error)) {
         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
       }
 
       if (resp.error) {
-        return { error: resp.error };
+        return { error: resp.error, ok: false };
       }
     }
 
-    return { ok: true };
+    return { ok, error, createdRecord };
   }
 
   resource(resourceId: string) {

package/modules/configValidator.ts

@@ -130,7 +130,9 @@ export default class ConfigValidator implements IConfigValidator {
     if (this.config.customization.brandLogo) {
       errors.push(...this.checkCustomFileExists(this.config.customization.brandLogo));
     }
-
+    if (this.config.customization.showBrandNameInSidebar === undefined) {
+      this.config.customization.showBrandNameInSidebar = true;
+    }
     if (this.config.customization.favicon) {
       errors.push(...this.checkCustomFileExists(this.config.customization.favicon));
     }

package/modules/operationalResource.ts

@@ -1,3 +1,4 @@
+import { error } from 'console';
 import { IAdminForthFilter, IAdminForthSort, IOperationalResource, IAdminForthDataSourceConnectorBase, AdminForthResource, IAdminForth } from '../types/AdminForthConfig.js';
 
 
@@ -63,8 +64,13 @@ export default class OperationalResource implements IOperationalResource {
     });
   }
 
-  async create(record: any): Promise<any> {
-    return await this.dataConnector.createRecord({ resource: this.resourceConfig, record, adminUser: null });
+  async create(recordValues: any): Promise<{ ok: boolean; createdRecord: any; error?: string; }> {
+    const { ok, createdRecord, error } = await this.dataConnector.createRecord({ 
+      resource: this.resourceConfig, 
+      record: recordValues, 
+      adminUser: null 
+    });
+    return { ok, createdRecord, error };
   }
 
   async update(primaryKey: any, record: any): Promise<any> {

package/modules/restApi.ts

@@ -166,6 +166,7 @@ export default class AdminForthRestAPI {
           brandName: this.adminforth.config.customization.brandName,
           usernameFieldName: usernameColumn.label,
           loginBackgroundImage: this.adminforth.config.auth.loginBackgroundImage,
+          loginBackgroundPosition: this.adminforth.config.auth.loginBackgroundPosition,
           title: this.adminforth.config.customization?.title,
           demoCredentials: this.adminforth.config.auth.demoCredentials,
           loginPromptHTML: this.adminforth.config.auth.loginPromptHTML,
@@ -244,6 +245,7 @@ export default class AdminForthRestAPI {
           menu: newMenu,
           config: { 
             brandName: this.adminforth.config.customization.brandName,
+            showBrandNameInSidebar: this.adminforth.config.customization.showBrandNameInSidebar,
             brandLogo: this.adminforth.config.customization.brandLogo,
             datesFormat: this.adminforth.config.customization.datesFormat,
             deleteConfirmation: this.adminforth.config.deleteConfirmation,
@@ -259,8 +261,6 @@ export default class AdminForthRestAPI {
       },
     });
 
-    
-
     function checkAccess(action: AllowedActionsEnum, allowedActions: AllowedActions): { allowed: boolean, error?: string } {
       const allowed = (allowedActions[action] as boolean | string | undefined);
       if (allowed !== true) {
@@ -381,6 +381,7 @@ export default class AdminForthRestAPI {
           offset,
           filters,
           sort,
+          getTotals: true,
         });
         // for foreign keys, add references
         await Promise.all(
@@ -568,12 +569,13 @@ export default class AdminForthRestAPI {
 
             const response = await this.adminforth.createResourceRecord({ resource, record, adminUser });
             if (response.error) {
-              return { error: response.error };
+              return { error: response.error, ok: false };
             }
             const connector = this.adminforth.connectors[resource.dataSource];
 
             return {
-              newRecordId: record[connector.getPrimaryKey(resource)]
+              newRecordId: response.createdRecord[connector.getPrimaryKey(resource)],
+              ok: true
             }
         }
     });

package/package.json

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

package/spa/src/App.vue

@@ -68,7 +68,10 @@
       <div class="h-full px-3 pb-4 overflow-y-auto bg-lightSidebar dark:bg-darkSidebar border-r border-lightSidebarBorder dark:border-darkSidebarBorder">
         <div class="flex ms-2 md:me-24  m-4  ">
           <img :src="loadFile(coreStore.config?.brandLogo || '@/assets/logo.svg')" :alt="`${ coreStore.config?.brandName } Logo`" class="h-8 me-3"  />
-          <span class="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText">
+          <span 
+            v-if="coreStore.config?.showBrandNameInSidebar"
+            class="self-center text-lightNavbarText-size font-semibold sm:text-lightNavbarText-size whitespace-nowrap dark:text-darkSidebarText text-lightSidebarText"
+          >
             {{ coreStore.config?.brandName }}
           </span>
         </div>

package/spa/src/components/Filters.vue

@@ -115,7 +115,7 @@
 </template>
 
 <script setup>
-import { watch, computed, ref, onMounted } from 'vue'
+import { watch, computed } from 'vue'
 import Dropdown from '@/components/Dropdown.vue';
 import CustomDateRangePicker from '@/components/CustomDateRangePicker.vue';
 import { callAdminForthApi } from '@/utils';

package/spa/src/components/ResourceForm.vue

@@ -130,7 +130,6 @@
                       </button>
                     </template>
                     <div v-if="columnError(column) && validating" class="mt-1 text-xs text-red-500 dark:text-red-400">{{ columnError(column) }}</div>
-
                     <div v-if="column.editingNote && column.editingNote[mode]" class="mt-1 text-xs text-gray-400 dark:text-gray-500">{{ column.editingNote[mode] }}</div>
 
                 </td>
@@ -154,10 +153,10 @@ import { IconExclamationCircleSolid, IconEyeSlashSolid, IconEyeSolid } from '@ic
 import { computedAsync } from '@vueuse/core';
 import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 
 const router = useRouter();
-
+const route = useRoute();
 const props = defineProps({
   loading: Boolean,
   resource: Object,
@@ -168,7 +167,7 @@ const props = defineProps({
 
 const unmasked = ref({});
 
-const mode = computed(() => props.record  && Object.keys(props.record).length ? 'edit' : 'create');
+const mode = computed(() => route.name === 'resource-create' ? 'create' : 'edit');
 
 const emit = defineEmits(['update:record', 'update:isValid']);
 

package/spa/src/router/index.ts

@@ -56,12 +56,4 @@ const router = createRouter({
   ]
 })
 
-router.beforeEach((to, from, next) => {
-  const filterStore = useFiltersStore();
-  if (to.path.startsWith('/resource/')) {
-    filterStore.clearFilters();
-  }
-  next()
-})
-
 export default router

package/spa/src/spa_types/core.ts

@@ -32,6 +32,7 @@ export type CoreConfig = {
         usernameField: string,
         passwordHashField: string,
         loginBackgroundImage: string,
+        loginBackgroundPosition: string,
         userFullnameField: string,
     },
     emptyFieldPlaceholder?: {

package/spa/src/stores/filters.ts

@@ -3,11 +3,12 @@ import { defineStore } from 'pinia';
 
 export const useFiltersStore = defineStore('filters', () => {
     const filters: Ref<any[]> = ref([]);
+    
     const setFilter = (filter: any) => {
-        filters.value = [...filters.value, filter];
+        filters.value.push(filter);
     }
     const setFilters = (f: any) => {
-        filters.value = [...f];
+        filters.value = f;
     }
     const getFilters = () => {
         return filters.value;

package/spa/src/views/ListView.vue

@@ -117,8 +117,6 @@ import { initFlowbite } from 'flowbite';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { showErrorTost } from '@/composables/useFrontendApi'
-
-import ValueRenderer from '@/components/ValueRenderer.vue';
 import { getCustomComponent } from '@/utils';
 
 
@@ -151,20 +149,7 @@ const DEFAULT_PAGE_SIZE = 10;
 const pageSize = computed(() => coreStore.resource?.options?.listPageSize || DEFAULT_PAGE_SIZE);
 
 
-watch([page], async () => {
-  await getList();
-});
-
-watch(()=>filtersStore.filters, async () => {
-  page.value = 1;
-  checkboxes.value = [];
-
-  await getList();
-}, {deep: true});
 
-watch([sort], async () => {
-  await getList();
-}, {deep: true});
 
 
 async function getList() {
@@ -222,6 +207,8 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
+  // !!! clear filters should be in same tick with sort assignment so that watch can catch it
+  filtersStore.clearFilters();
   if (coreStore.resource.options?.defaultSort) {
     sort.value = [{
         field: coreStore.resource.options.defaultSort.columnName,
@@ -230,8 +217,8 @@ async function init() {
   } else {
     sort.value = [];
   }
-
-  await getList();
+  console.log('↘️init fired');
+  // await getList();
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
     method: 'POST',
@@ -241,18 +228,22 @@ async function init() {
   });
 }
 
+watch([page, sort, () => filtersStore.filters], async () => {
+  console.log('↘️watch fired getList');
+  await getList();
+}, { deep: true });
+
+watch(() => filtersStore.filters, async (to, from) => {
+  page.value = 1;
+  checkboxes.value = [];
+}, {deep: true});
+
 onMounted(async () => {
+  console.log('🧱onMounted fired');
   initFlowbite(); 
- 
   await init();
-
 });
 
-// on route param change 
-watch(() => route.params.resourceId, async () => {
-  filtersStore.setFilters([]);
-  checkboxes.value = [];
-  await init();
-});
+
 
 </script>

package/spa/src/views/LoginView.vue

@@ -1,24 +1,38 @@
 <template>
-  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800"
-    :style="coreStore.config?.loginBackgroundImage ? {
+  <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 relative w-screen h-screen"
+    :style="coreStore.config?.loginBackgroundImage && backgroundPosition === 'over' ? {
       'background-image': 'url(' + loadFile(coreStore.config?.loginBackgroundImage) + ')',
       'background-size': 'cover',
       'background-position': 'center',
       'background-blend-mode': 'darken'
     }: {}"
-    >
+  >
+    
+    <img v-if="coreStore.config?.loginBackgroundImage && backgroundPosition !== 'over'"
+      :src="loadFile(coreStore.config?.loginBackgroundImage)"
+      class="position-absolute top-0 left-0 h-screen object-cover w-0"
+      :class="{
+        '1/2': 'md:w-1/2',
+        '1/3': 'md:w-1/3',
+        '2/3': 'md:w-2/3',
+        '3/4': 'md:w-3/4',
+        '2/5': 'md:w-2/5',
+        '3/5': 'md:w-3/5',
+      }[backgroundPosition]"
+    />
 
     <!-- Main modal -->
-    <div id="authentication-modal" tabindex="-1" class=" overflow-y-auto overflow-x-hidden z-50 min-w-[400px] justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
-        <div class="relative p-4 w-full max-w-md max-h-full">
+    <div id="authentication-modal" tabindex="-1" 
+      class="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" >
                 <!-- 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">
-                        Sign in to {{ coreStore.config?.brandName }}
+                      Sign in to {{ coreStore.config?.brandName }}
                     </h3>
-                   
                 </div>
                 <!-- Modal body -->
                 <div class="p-4 md:p-5">
@@ -87,7 +101,7 @@
 
 <script setup>
 
-import { onMounted, ref, watchEffect } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
 import { useUserStore } from '@/stores/user';
 import { IconEyeSolid, IconEyeSlashSolid } from '@iconify-prerendered/vue-flowbite';
@@ -103,11 +117,14 @@ const inProgress = ref(false);
 const coreStore = useCoreStore();
 const user = useUserStore();
 
-
 const showPw = ref(false);
 
 const error = ref(null);
 
+const backgroundPosition = computed(() => {
+  return coreStore.config?.loginBackgroundPosition || '1/2';
+});
+
 onMounted(async () => {
     await coreStore.getPublicConfig();
     if (coreStore.config?.demoCredentials) {

package/types/AdminForthConfig.ts

@@ -226,7 +226,7 @@ export interface IAdminForthDataSourceConnectorBase extends IAdminForthDataSourc
     resource: AdminForthResource, 
     record: any 
     adminUser: AdminUser
-  }): Promise<any>;
+  }): Promise<{ok: boolean, error?: string, createdRecord?: any}>;
 
   getMinMaxForColumns({ resource, columns }: { resource: AdminForthResource, columns: AdminForthResourceColumn[] }): Promise<{ [key: string]: { min: any, max: any } }>;
 }
@@ -264,7 +264,9 @@ export interface IAdminForth {
     [key: string]: IAdminForthDataSourceConnectorBase;
   };
 
-  createResourceRecord(params: { resource: AdminForthResource, record: any, adminUser: AdminUser }): Promise<any>;
+  createResourceRecord(
+    params: { resource: AdminForthResource, record: any, adminUser: AdminUser }
+  ): Promise<{ ok: boolean, error?: string, createdRecord?: any }>;
 
   auth: IAdminForthAuth;
 
@@ -1130,6 +1132,16 @@ export type AdminForthConfig = {
        */
       loginBackgroundImage?: string,
 
+
+      /**
+       * Position of background image on login page
+       * 'over' - image will be displayed over full login page under login form
+       * '1/2' - image will be displayed on left 1/2 of login page
+       * 
+       * Default: '1/2'
+       */
+      loginBackgroundPosition?: 'over' | '1/2' | '1/3' | '2/3' | '3/4' | '2/5' | '3/5',
+
       /**
        * Function or functions  which will be called before user try to login.
        * Each function will resive User object as an argument
@@ -1193,6 +1205,13 @@ export type AdminForthConfig = {
        */
       brandName?: string,
 
+
+      /**
+       * Whether to show brand name in sidebar
+       * default is true
+       */
+      showBrandNameInSidebar?: boolean,
+
       /**
        * Path to your app logo
        * 
@@ -1379,7 +1398,7 @@ export interface IOperationalResource {
 
   count: (filter: IAdminForthFilter | IAdminForthFilter[]) => Promise<number>;
 
-  create: (record: any) => Promise<any>;
+  create: (record: any) => Promise<{ ok: boolean; createdRecord: any; error?: string; }>;
 
   update: (primaryKey: any, record: any) => Promise<any>;